// Service pages: Solar Installation, Solar Cleaning, Roofing, Maintenance.
// Polished w/ Reveal, filterable gallery, photo cards, animated FAQ.

const { Gallery: GAL_S, CTAStrip: CTA_S, SectionEyebrow: SE_S } = window.AMSChrome;
const { Reveal: RevealS } = window.AMSPrim;
const D4 = window.AMS_DATA;

function FilterableGallery({ photos }) {
  const [filter, setFilter] = React.useState("all");
  const filters = [
    { id: "all", label: "All" },
    { id: "install", label: "Installs" },
    { id: "cleaning", label: "Cleaning" },
    { id: "battery", label: "Battery" },
    { id: "roof", label: "Roofing" },
  ].filter((f) => f.id === "all" || photos.some((p) => p.tags.includes(f.id)));
  const filtered = filter === "all" ? photos : photos.filter((p) => p.tags.includes(filter));
  return (
    <div>
      <div className="ams-filter-tabs" role="tablist" aria-label="Gallery filters">
        {filters.map((f) => (
          <button
            key={f.id}
            role="tab"
            aria-selected={filter === f.id}
            className={"ams-filter-tab" + (filter === f.id ? " is-active" : "")}
            onClick={() => setFilter(f.id)}
          >
            {f.label}
            <span className="ams-filter-count">{f.id === "all" ? photos.length : photos.filter((p) => p.tags.includes(f.id)).length}</span>
          </button>
        ))}
      </div>
      <div className="ams-filter-pane" key={filter}>
        <GAL_S photos={filtered} columns={3} />
      </div>
    </div>
  );
}

function ServicePageShell({ title, eyebrow, lede, hero, sections, photoFilter, processSteps, faqs, useFilterableGallery = false }) {
  const photos = D4.photos.filter(photoFilter);
  return (
    <main className="ams-service">
      <section className="ams-page-hero">
        <div className="ams-container ams-page-hero-grid">
          <div>
            <RevealS as="p" className="ams-eyebrow"><span className="ams-eyebrow-rule" />{eyebrow}</RevealS>
            <RevealS as="h1" className="ams-page-title" delay={80}>{title}</RevealS>
            <RevealS as="p" className="ams-page-lede" delay={160}>{lede}</RevealS>
            <RevealS className="ams-hero-actions" delay={240}>
              <a href={D4.business.phoneHref} className="ams-btn ams-btn-primary">
                Call {D4.business.phone}
              </a>
              <a href="#/contact" className="ams-btn ams-btn-ghost-dark">Free quote →</a>
            </RevealS>
          </div>
          <RevealS as="figure" className="ams-page-hero-img" delay={120}>
            <img src={hero} alt="" />
          </RevealS>
        </div>
      </section>

      {sections && (
        <section className="ams-section">
          <div className="ams-container">
            <RevealS className="ams-section-head">
              <SE_S>What's included</SE_S>
              <h2 className="ams-h2">{sections.heading}</h2>
            </RevealS>
            <div className="ams-include-grid">
              {sections.items.map((it, i) => (
                <RevealS key={i} delay={i * 80}>
                  <div className="ams-include">
                    <span className="ams-include-num">0{i + 1}</span>
                    <h3>{it.h}</h3>
                    <p>{it.p}</p>
                  </div>
                </RevealS>
              ))}
            </div>
          </div>
        </section>
      )}

      {processSteps && (
        <section className="ams-section ams-section-soft">
          <div className="ams-container">
            <RevealS className="ams-section-head">
              <SE_S>How it works</SE_S>
              <h2 className="ams-h2">{processSteps.heading}</h2>
            </RevealS>
            <ol className="ams-process">
              {processSteps.items.map((it, i) => (
                <RevealS key={i} as="li" delay={i * 90}>
                  <span className="ams-process-num">{String(i + 1).padStart(2, "0")}</span>
                  <h3>{it.h}</h3>
                  <p>{it.p}</p>
                </RevealS>
              ))}
            </ol>
          </div>
        </section>
      )}

      <section className="ams-section">
        <div className="ams-container">
          <RevealS className="ams-section-head">
            <SE_S>Recent jobs</SE_S>
            <h2 className="ams-h2">{photos.length} photos from real installs.</h2>
          </RevealS>
          <RevealS>
            {useFilterableGallery
              ? <FilterableGallery photos={photos} />
              : <GAL_S photos={photos} columns={3} />}
          </RevealS>
        </div>
      </section>

      {faqs && (
        <section className="ams-section ams-section-soft">
          <div className="ams-container ams-prose-grid">
            <RevealS>
              <SE_S>Common questions</SE_S>
              <h2 className="ams-h2">Quick answers.</h2>
            </RevealS>
            <div className="ams-faqs">
              {faqs.map((f, i) => (
                <RevealS key={i} as="details" className="ams-faq" delay={i * 60}>
                  <summary>{f.q}</summary>
                  <p>{f.a}</p>
                </RevealS>
              ))}
            </div>
          </div>
        </section>
      )}

      <CTA_S heading="Ready to get a number on it?" sub="Free consultations, every day except Sunday." />
    </main>
  );
}

function SolarInstallPage() {
  return (
    <ServicePageShell
      eyebrow="Solar Installation"
      title="Roof-mounted, ground-mounted, on-grid, off-grid."
      lede="From a fresh array on a tile roof to adding panels to an existing system, we design, permit, install, and walk it through PG&E PTO. NEM 2.0 timeline expertise included."
      hero="assets/work-photos/yelp-07-19-80-kw-tile-roof.jpg"
      photoFilter={(p) => p.tags.includes("install") || p.tags.includes("battery")}
      useFilterableGallery={true}
      sections={{
        heading: "Four ways homeowners hire us.",
        items: [
          { h: "Solar system installation", p: "Full design + permit + install + PG&E PTO. Tile, clay tile, flat roof, composite, ground mount." },
          { h: "Solar rooftop panel installation", p: "The standard residential rooftop array. Modules and inverter sized to your real bill." },
          { h: "Add to existing system", p: "Top up an undersized array, replace failing inverters, or fold in battery storage on a SunPower legacy setup." },
          { h: "Add solar panels", p: "Same array, more modules. We confirm structural and electrical headroom before quoting." },
        ],
      }}
      processSteps={{
        heading: "Consult → design → install → PTO.",
        items: [
          { h: "Free consultation", p: "We come look at the roof, the panel, and your last 12 months of PG&E bills." },
          { h: "Design & quote", p: "System sized to actual usage. Itemized quote with battery options if you want them." },
          { h: "Permit & install", p: "We handle permits and inspection. Crews are fast, clean, and on-time." },
          { h: "PTO & monitoring", p: "We carry the PTO process with PG&E so you start saving the day it switches on." },
        ],
      }}
      faqs={[
        { q: "How long does an install take?", a: "Most residential installs run 1–3 days on the roof. Inspection and PTO can add 2–6 weeks depending on PG&E." },
        { q: "Do you do battery backup?", a: "Yes — we're certified on Tesla, Eg4 (with Grid Boss), Enphase, and IQ Battery. We can also retrofit batteries onto existing arrays." },
        { q: "What about my old SunPower system?", a: "We service legacy SunPower customers — diagnostics, panel and inverter swaps, and battery additions when SunPower can't help." },
        { q: "Who handles the PG&E paperwork?", a: "We do. We've been through enough NEM 2.0 timelines and PTO inspections to know where the snags are." },
      ]}
    />
  );
}

function SolarCleaningPage() {
  return (
    <ServicePageShell
      eyebrow="Solar Cleaning"
      title="Dirty panels lose 20–30% efficiency. Let's fix that."
      lede="Solar-panel-specific brushes, proper ladders, before/after photos sent the same day. We also inspect rodent guards while we're up there."
      hero="assets/team-photos/sal-cleaning-panels.jpg"
      photoFilter={(p) => p.tags.includes("cleaning")}
      sections={{
        heading: "What a cleaning visit covers.",
        items: [
          { h: "Solar panel cleaning", p: "Standard residential cleaning. Most arrays take about an hour." },
          { h: "Rooftop solar panel cleaning", p: "Tile, composite, flat — we have ladders and tie-offs for each." },
          { h: "Rooftop solar shingles cleaning", p: "Specialized care for solar shingle systems where standard brushes won't do." },
        ],
      }}
      processSteps={{
        heading: "Show up · clean · prove it.",
        items: [
          { h: "Arrive on time", p: "If we say 8 AM, we're up there at 8 AM. Reviewers mention this — we mean it." },
          { h: "Clean with the right tools", p: "Solar-specific soft brushes and pure-water systems. No abrasive cloths, no harsh detergents." },
          { h: "Inspect while we're up there", p: "Rodent guards, mounting hardware, visible wiring. We flag anything off — and quote a fix only if it's worth fixing." },
          { h: "Send before/after photos", p: "Same day. So you can see the difference, even when you're not home." },
        ],
      }}
      faqs={[
        { q: "How often should I clean my panels?", a: "Once a year for most Bay Area homes. Twice a year if you're near construction, agriculture, or heavy tree cover." },
        { q: "Will it really matter?", a: "Yes. Soiled panels can lose 20–30% of their output. A cleaning typically pays for itself in recovered production." },
        { q: "Do you offer cleaning plans?", a: "Yes. Ask about our annual cleaning plan, and our 'free cleaning for a year' that ships with new installs." },
      ]}
    />
  );
}

function RoofingPage() {
  return (
    <ServicePageShell
      eyebrow="Roofing"
      title="Re-roof before solar, so the roof outlasts the array."
      lede="Solar panels last 25+ years. If your roof has 8 years of life left, you'll be paying twice. We'll tell you straight — and re-roof first when it makes sense."
      hero="assets/work-photos/yelp-15-tile-roof-san-jose.jpg"
      photoFilter={(p) => p.tags.includes("roof") || p.tags.includes("tile")}
      sections={{
        heading: "Roof types we work on.",
        items: [
          { h: "Tile & clay tile", p: "Most South Bay homes — we install with proper tile-hook mounts so panels lift cleanly for future cleaning." },
          { h: "Composite shingle", p: "Standard residential. Standoffs flashed and sealed; nothing leaks five years later." },
          { h: "Flat roof", p: "Residential and small commercial. We handle ballast and penetrations both ways." },
        ],
      }}
      faqs={[
        { q: "Can I re-roof and install solar on the same job?", a: "Yes — and that's the cleanest path. One crew, one permit window, one warranty story." },
        { q: "What if my roof is fine?", a: "Then we'll tell you that, and we won't sell you a roof. Most of our jobs are solar-only." },
      ]}
    />
  );
}

function MaintenancePage() {
  return (
    <ServicePageShell
      eyebrow="Maintenance"
      title="Keep the system you bought producing what it should."
      lede="Diagnostics, post-outage recovery, inverter swaps, battery additions, monitoring. SunPower legacy systems welcome."
      hero="assets/team-photos/tech-disconnect-walkway.jpg"
      photoFilter={(p) => p.tags.includes("battery") || p.tags.includes("install")}
      sections={{
        heading: "What we keep an eye on.",
        items: [
          { h: "Solar system maintenance", p: "Production drops, monitoring outages, inverter alarms. We diagnose and quote before fixing." },
          { h: "Post-outage diagnostics", p: "System didn't come back online after a PG&E outage? That's a common one — usually a quick fix." },
          { h: "Battery storage upgrades", p: "Add Tesla, Eg4 + Grid Boss, Enphase, or IQ Battery to an existing array." },
        ],
      }}
      faqs={[
        { q: "Do you service systems you didn't install?", a: "Yes — including legacy SunPower customers who've lost their original installer." },
        { q: "What's an annual check-up cost?", a: "Most annual visits run alongside a cleaning. Ask when you book." },
      ]}
    />
  );
}

window.SolarInstallPage = SolarInstallPage;
window.SolarCleaningPage = SolarCleaningPage;
window.RoofingPage = RoofingPage;
window.MaintenancePage = MaintenancePage;