// Home page — bold rework: split-hero w/ parallax, animated counters, marquee,
// photo service cards w/ orange corner accent, testimonial carousel.

const { PageHero: PH_H, Gallery: GAL_H, CTAStrip: CTA_H, SectionEyebrow: SE_H } = window.AMSChrome;
const { Reveal, Counter, Marquee, Carousel, Parallax } = window.AMSPrim;
const D2 = window.AMS_DATA;

function StarRow({ value = 5 }) {
  return (
    <span className="ams-stars" aria-label={value + " out of 5 stars"}>
      {"★★★★★".split("").map((s, i) => (<span key={i}>{s}</span>))}
    </span>
  );
}

function ScrollGlowBg() {
  const ref = React.useRef(null);
  const [y, setY] = React.useState(0);
  React.useEffect(() => {
    let raf = null;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        raf = null;
        if (!ref.current) return;
        const r = ref.current.getBoundingClientRect();
        const center = r.top + r.height / 2 - window.innerHeight / 2;
        setY(-center * 0.12);
      });
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => { window.removeEventListener("scroll", onScroll); if (raf) cancelAnimationFrame(raf); };
  }, []);
  return (
    <div ref={ref} className="ams-section-glow-bg" aria-hidden="true" style={{ transform: `translate3d(0, ${y}px, 0)` }}>
      <span className="ams-glow ams-glow-a" />
      <span className="ams-glow ams-glow-b" />
      <span className="ams-glow ams-glow-c" />
      <span className="ams-glow-grid" />
    </div>
  );
}

const SERVICE_CARD_PHOTO = {
  "solar-installation": "assets/team-photos/sal-disconnect-front.jpg",
  "solar-cleaning": "assets/team-photos/sal-cleaning-panels.jpg",
  "roofing": "assets/work-photos/yelp-15-tile-roof-san-jose.jpg",
  "maintenance": "assets/team-photos/tech-disconnect-walkway.jpg",
};

const SERVICE_AREAS = [
  "San Jose", "Los Gatos", "Los Altos", "Mountain View", "Sunnyvale",
  "Cupertino", "Gilroy", "San Francisco", "Carmel Valley", "Stockton",
  "Manteca", "Tracy", "Modesto", "Merced",
];

function HomePage() {
  // Mix install + cleaning + team-on-the-job for the home preview gallery.
  // Install-led recent-work preview: 5 install/battery shots + 1 cleaning teaser.
  // Avoids hero photos (indices 6, 12, 30) so we don't repeat what's above.
  const previewPhotos = D2.photos.filter((_, i) => [13, 22, 27, 7, 23, 21].includes(i));

  return (
    <main className="ams-home">
      {/* SPLIT HERO */}
      <section className="ams-hero ams-hero-split">
        {window.SolarGrid && <window.SolarGrid />}
        <div className="ams-container ams-hero-grid">
          <div className="ams-hero-copy">
            <Reveal as="p" className="ams-eyebrow ams-eyebrow-on-dark" delay={0}>
              <span className="ams-eyebrow-rule" />
              {D2.business.sinceCopy} · San Jose
            </Reveal>
            <Reveal as="h1" className="ams-hero-title" delay={80}>
              Solar designed for <span className="ams-orange">your bill.</span>
              <br />
              Installed by <span className="ams-orange">Sal's crew.</span>
            </Reveal>
            <Reveal as="p" className="ams-hero-lede" delay={180}>
              Family-owned solar installation across San Jose, the Bay Area, and the
              San Joaquin Valley — sized to your last 12 months of PG&amp;E and built
              for your roof. Cleaning, roofing, and maintenance are how we keep
              what we install producing for the next 25 years. Free consultations,
              10-minute response, every day except Sunday.
            </Reveal>
            <Reveal className="ams-hero-actions" delay={260}>
              <a href={D2.business.phoneHref} className="ams-btn ams-btn-primary">
                Call {D2.business.phone}
              </a>
              <a href="#/contact" className="ams-btn ams-btn-ghost-dark">
                Free consultation →
              </a>
            </Reveal>
            <Reveal className="ams-hero-trust" delay={360}>
              <div>
                <StarRow />
                <span className="ams-trust-line">
                  {D2.business.rating}★ rated on{" "}
                  <a className="ams-inline-link ams-inline-link-on-dark" href={D2.social.yelp} target="_blank" rel="noreferrer">Yelp</a>
                </span>
              </div>
              <div className="ams-trust-divider" />
              <div className="ams-trust-line">{D2.business.response}</div>
            </Reveal>
          </div>

          <div className="ams-hero-photo">
            <figure className="ams-hero-photo-main">
              <img src="assets/work-photos/yelp-07-19-80-kw-tile-roof.jpg" alt="19.80 kW system on tile roof" />
              <figcaption>
                <span className="ams-hero-photo-tag">19.80 kW · San Jose</span>
              </figcaption>
            </figure>
            <div className="ams-hero-photo-card">
              <figure>
                <img src="assets/work-photos/yelp-23-just-the-best.jpg" alt="Residential solar install — Bay Area" />
              </figure>
            </div>
            <div className="ams-hero-photo-card-b">
              <figure>
                <img src="assets/team-photos/sal-enphase-portrait.jpg" alt="Salvador Magallon next to an Enphase battery install" />
                <figcaption>
                  <span className="ams-hero-photo-tag ams-hero-photo-tag-dark">Sal · on the job</span>
                </figcaption>
              </figure>
            </div>
            <div className="ams-hero-photo-stat">
              <strong><Counter to={5} decimals={1} suffix="★" /></strong>
              <span>Rated on Yelp</span>
            </div>
          </div>
        </div>
      </section>

      {/* CITY MARQUEE */}
      <section className="ams-marquee-section">
        <Marquee items={SERVICE_AREAS} speed={28} />
      </section>

      {/* TRUST STRIP — animated counters */}
      <section className="ams-trust-strip">
        <div className="ams-container ams-trust-strip-inner">
          <Reveal><div><strong><Counter to={5} decimals={1} suffix="★" /></strong><span>Rated on Yelp</span></div></Reveal>
          <Reveal delay={80}><div><strong><Counter to={10} suffix="-min" /></strong><span>response time</span></div></Reveal>
          <Reveal delay={160}><div><strong><Counter to={100} suffix="%" /></strong><span>response rate</span></div></Reveal>
          <Reveal delay={240}><div><strong>{D2.business.sinceCopy}</strong><span>family-owned</span></div></Reveal>
        </div>
      </section>

      {/* SERVICES — photo cards w/ orange corner accent */}
      <section className="ams-section">
        <div className="ams-container">
          <Reveal className="ams-section-head">
            <SE_H>What we do</SE_H>
            <h2 className="ams-h2">Solar installation, plus what keeps it earning.</h2>
            <p className="ams-section-lede">
              We're a solar installer first. Cleaning, roofing, and maintenance
              exist so the system you buy keeps producing for the next 25 years.
              Every job runs through Salvador — no call centers, no sub-tier
              installers you've never met.
            </p>
          </Reveal>
          <div className="ams-services-grid">
            {D2.services.map((s, i) => (
              <Reveal key={s.slug} delay={i * 90}>
                <a href={"#/" + s.slug} className="ams-service-card ams-service-card-photo">
                  <div className="ams-service-thumb">
                    <img src={SERVICE_CARD_PHOTO[s.slug] || s.thumb} alt="" loading="lazy" />
                    <span className="ams-service-corner" aria-hidden="true">
                      <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                        <path d="M5 12h14" /><path d="M12 5l7 7-7 7" />
                      </svg>
                    </span>
                  </div>
                  <div className="ams-service-body">
                    <h3 className="ams-service-h">{s.label}</h3>
                    <p className="ams-service-blurb">{s.blurb}</p>
                    <span className="ams-service-link">
                      See the work <span aria-hidden="true">→</span>
                    </span>
                  </div>
                </a>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* REVIEWS — auto-advancing carousel */}
      <section className="ams-section ams-section-dark ams-section-glow">
        <ScrollGlowBg />
        <div className="ams-container">
          <Reveal className="ams-section-head">
            <SE_H>Reviews</SE_H>
            <h2 className="ams-h2 ams-on-dark">
              {D2.business.rating}★ rated on Yelp <span className="ams-orange">·</span> read what neighbors are saying.
            </h2>
            <p className="ams-section-lede ams-on-dark-muted">
              Vetted Yelp reviewers — read the originals on{" "}
              <a className="ams-inline-link ams-inline-link-on-dark" href={D2.social.yelp} target="_blank" rel="noreferrer">our Yelp page</a>.
            </p>
          </Reveal>
          <Reveal>
            <Carousel
              items={D2.quotes}
              renderItem={(q) => (
                <figure className="ams-review ams-review-large">
                  <StarRow />
                  <blockquote>"{q.text}"</blockquote>
                  <figcaption>
                    <strong>{q.reviewer}</strong>
                    <span> · {q.city} · via Yelp</span>
                  </figcaption>
                </figure>
              )}
            />
          </Reveal>
        </div>
      </section>

      {/* GALLERY PREVIEW */}
      <section className="ams-section ams-section-soft">
        <div className="ams-container">
          <Reveal className="ams-section-head ams-section-head-row">
            <div>
              <SE_H>Recent work</SE_H>
              <h2 className="ams-h2">Recent installs across the Bay.</h2>
            </div>
            <a href="#/solar-installation" className="ams-btn ams-btn-text">
              See more work <span aria-hidden="true">→</span>
            </a>
          </Reveal>
          <Reveal>
            <GAL_H photos={previewPhotos} columns={3} />
          </Reveal>
        </div>
      </section>

      <CTA_H
        heading="Ready for a real solar quote?"
        sub="Free consultation, sized to your last 12 months of PG&E. We'll text you back within ten minutes."
      />
    </main>
  );
}

window.HomePage = HomePage;