// GROQ projection reshapes Sanity data to match component prop shapes exactly.
// "lbl" alias matches PageHero, tags[].value flattens to plain strings for Offerings,
// checks[].value flattens to plain strings for FeatureRow.
const BUSINESS_EVENTS_QUERY = `*[_type == "businessEventsPage"][0]{
  hero{
    crumb, heading, lead,
    facts[]{ num, "lbl": label }
  },
  offerings{
    eyebrow, heading, intro,
    items[]{ title, copy, href, tags }
  },
  process{
    eyebrow, heading, intro,
    steps[]{ title, copy }
  },
  featureRow{
    eyebrow, heading, copy,
    checks
  },
  cta{ heading, copy, primaryLabel, primaryHref, secondaryLabel, secondaryHref }
}`;

function BusinessEventsPage({ mobile }) {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    sanityFetch(BUSINESS_EVENTS_QUERY).then(setData);
  }, []);

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

  const { hero, offerings, process: proc, featureRow, cta } = data;

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

      <PageHero
        crumb={<span><a href="index.html">Home</a> / Business Events</span>}
        title={hero.heading}
        lead={hero.lead}
        facts={hero.facts}
        image={IMG_EVENTS}
      />

      <Offerings
        eyebrow={offerings.eyebrow}
        title={offerings.heading}
        intro={offerings.intro}
        items={offerings.items}
      />

      <ProcessStrip
        eyebrow={proc.eyebrow}
        title={proc.heading}
        intro={proc.intro}
        steps={proc.steps}
      />

      <FeatureRow
        eyebrow={featureRow.eyebrow}
        title={featureRow.heading}
        copy={featureRow.copy}
        checks={featureRow.checks}
        image={IMG_HOSPITALITY}
      />

      <Newsletter />

      <PageCTA
        noPeriod
        title={cta.heading}
        copy={cta.copy}
        primary={cta.primaryLabel}
        primaryHref={cta.primaryHref}
        secondary={cta.secondaryLabel || 'See Incentive Travel'}
        secondaryHref={cta.secondaryHref || 'incentive-travel.html'}
      />

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