const INCENTIVE_QUERY = `*[_type == "incentiveTravelPage"][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 IncentiveTravelPage({ mobile }) {
  const [data, setData] = React.useState(null);
  React.useEffect(() => { sanityFetch(INCENTIVE_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> / Incentive Travel</span>}
        title={hero.heading}
        lead={hero.lead}
        facts={hero.facts}
        image={IMG_INCENTIVE}
      />

      <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="https://images.unsplash.com/photo-1511497584788-876760111969?w=1600&q=80&auto=format&fit=crop"
      />

      <Newsletter />

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

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