const HAPPY_SITES_QUERY = `*[_type == "happySitesPage"][0]{
  hero{ pill, heading, body, videoUrl, appStoreUrl, primaryCtaLabel, secondaryCtaLabel, secondaryCtaHref },
  features{ eyebrow, heading, intro, items[]{ number, title, copy } },
  howItWorks{ heading, steps[]{ stepLabel, heading, copy } },
  cta{ heading, copy, primaryLabel, primaryHref, secondaryLabel, secondaryHref }
}`;

// Images for how-it-works steps (not stored in Sanity)
const HS_HOW_IMAGES = [
  'https://images.unsplash.com/photo-1566073771259-6a8506099945?w=1200&q=80&auto=format&fit=crop',
  'https://images.unsplash.com/photo-1551918120-9739cb430c6d?w=1200&q=80&auto=format&fit=crop',
  'https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=1200&q=80&auto=format&fit=crop',
];

function HappySitesPage({ mobile }) {
  const [data, setData] = React.useState(null);
  React.useEffect(() => { sanityFetch(HAPPY_SITES_QUERY).then(setData); }, []);

  if (!data) return (
    <div className={`page ${mobile ? 'page-mobile' : 'page-desktop'} dark`}><SiteNav dark mobile={mobile} /></div>
  );

  const { hero, features, howItWorks, cta } = data;

  return (
    <div className={`page ${mobile ? 'page-mobile' : 'page-desktop'} dark`}>
      <SiteNav dark mobile={mobile} />

      <section className="hs-hero">
        <div className="container">
          <div className="inner">
            <div>
              <span className="product-pill">{hero.pill}</span>
              <h1>{hero.heading}<span className="period">.</span></h1>
              <p className="lead">{hero.body}</p>
              <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
                <a className="btn btn-primary" href={hero.appStoreUrl}>{hero.primaryCtaLabel} <span className="btn-arrow">›</span></a>
                <a className="btn btn-ghost" href={hero.secondaryCtaHref} style={{ color: 'var(--engage-offwhite)' }}>{hero.secondaryCtaLabel}</a>
              </div>
            </div>
            <div className="screenshot">
              <iframe
                src={hero.videoUrl}
                frameBorder="0"
                allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share"
                referrerPolicy="strict-origin-when-cross-origin"
                style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
                title="Happy Sites"
              />
            </div>
          </div>
        </div>
      </section>

      <section className="hs-features" style={{ background: 'var(--engage-offwhite)', color: 'var(--engage-black)' }}>
        <div className="container">
          <div className="offerings-head" style={{ marginBottom: 48 }}>
            <span className="eyebrow-row"><span className="bar" />{features.eyebrow}</span>
            <h2>{features.heading}<span className="period">.</span></h2>
            <p>{features.intro}</p>
          </div>
          <div className="hs-features-grid">
            {features.items.map(f => (
              <div className="hs-feature" key={f.number}>
                <div className="icon">{f.number}</div>
                <h3>{f.title}<span className="period" style={{ color: 'var(--engage-orange)' }}>.</span></h3>
                <p>{f.copy}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="hs-how">
        <div className="container">
          <div className="offerings-head" style={{ marginBottom: 64 }}>
            <span className="eyebrow-row"><span className="bar" />How it works</span>
            <h2>{howItWorks.heading}<span className="period">.</span></h2>
          </div>
          {howItWorks.steps.map((step, i) => (
            <div className={`hs-how-row ${i % 2 === 1 ? 'reverse' : ''}`} key={i}>
              <div>
                <div className="step-label">{step.stepLabel}</div>
                <h3>{step.heading}<span className="period">.</span></h3>
                <p>{step.copy}</p>
              </div>
              <div className="visual"><img src={HS_HOW_IMAGES[i]} alt="" /></div>
            </div>
          ))}
        </div>
      </section>

      <Newsletter />

      <PageCTA
        noPeriod
        title={cta.heading}
        copy={cta.copy}
        primary={cta.primaryLabel}
        primaryHref={cta.primaryHref}
        secondary={cta.secondaryLabel}
        secondaryHref={cta.secondaryHref}
      />

      <SiteFooter />
    </div>
  );
}
window.HappySitesPage = HappySitesPage;