// site/Homepage.jsx — fetches homePage doc from Sanity and passes data to sections.
// Child components fall back to hardcoded values when data is null (initial render).
const HOMEPAGE_QUERY = `*[_type == "homePage"][0]{
  heroSafe{ eyebrow, heading, body, ctas[]{ label, href, variant } },
  heroBold{
    eyebrow, heading, body,
    stats[]{ num, unit, "lbl": label },
    ctas[]{ label, href, variant }
  },
  heroCreative{ tagline, marqueeRows[]{ words }, ctas[]{ label, href, variant } },
  servicesSection{
    eyebrow, heading, intro,
    services[]{ _key, categoryLabel, title, copy, href, panel{ eyebrow, title, body, items } }
  },
  differentiatorsSection{ eyebrow, heading, intro, items[]{ number, title, body } },
  playbookSection{ eyebrow, heading, subheading, description, ctaLabel, ctaUrl }
}`;

function HomepageArtboard({ direction = 'safe', terse = false }) {
  const [data, setData] = React.useState(null);
  React.useEffect(() => { sanityFetch(HOMEPAGE_QUERY).then(setData); }, []);

  const isBold = direction === 'bold';
  const isCreative = direction === 'creative';

  return (
    <div className={`homepage-artboard page ${isBold ? 'dark' : ''} ${terse ? 'terse' : ''}`}>
      <SiteNav dark={isBold} />
      {direction === 'safe'  && <HeroSafe     terse={terse} data={data && data.heroSafe} />}
      {isBold                && <HeroBold     terse={terse} data={data && data.heroBold} />}
      {isCreative            && <HeroCreative terse={terse} data={data && data.heroCreative} />}
      <Services variant={isCreative ? 'creative' : ''} dark={isBold} terse={terse} data={data && data.servicesSection} />
      <Differentiators terse={terse} data={data && data.differentiatorsSection} />
      <PlaybookSection data={data && data.playbookSection} />
      <Newsletter dark={isBold} terse={terse} />
      <Contact terse={terse} />
      <SiteFooter />
    </div>
  );
}
window.HomepageArtboard = HomepageArtboard;