const INNOVATION_QUERY = `*[_type == "innovationPage"][0]{
  hero{ crumb, heading, lead, facts[]{ num, "lbl": label } },
  offerings{ eyebrow, heading, intro, items[]{ title, copy, href, tags } },
  featureRow{ eyebrow, heading, copy, checks, ctaLabel, ctaHref },
  process{ eyebrow, heading, intro, steps[]{ title, copy } },
  cta{ heading, copy, primaryLabel, primaryHref, secondaryLabel, secondaryHref }
}`;

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

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

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

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

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

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

      <FeatureRow
        eyebrow={featureRow.eyebrow}
        title={featureRow.heading}
        copy={featureRow.copy}
        checks={featureRow.checks}
        cta={featureRow.ctaLabel ? {label: featureRow.ctaLabel, href: featureRow.ctaHref} : null}
        image="https://images.unsplash.com/photo-1566073771259-6a8506099945?w=1200&q=80&auto=format&fit=crop"
      />

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

      <Newsletter />

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

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