Custom-coded websites built to load fast

export function FlagshipHero({
  content,
  service,
  extras,
  trail,
  preview = false,
}: FlagshipProps & { trail?: readonly Crumb[]; preview?: boolean }) {
  const Heading = preview ? 'p' : 'h1';
  const pillar = service.pillar ? pillars.find((entry) => entry.pixel === service.pillar) : undefined;
  return (
    <section
      aria-labelledby={preview ? undefined : 'service-heading'}
      data-stage-hero={preview ? undefined : ''}
      className={preview ? '' : 'px-stage-inset pt-stage-inset'}
      data-view-service={preview ? undefined : service.slug}
      data-view-pillar={preview ? undefined : service.pillar}
    >
      <div
        data-fx-scene={preview ? undefined : 'flagship'}
        className="dz-flag-hero relative mx-auto max-w-page overflow-hidden rounded-stage bg-(image:--dz-grad-stage) text-on-color"
      >
        <div className="relative mx-auto grid max-w-[60rem] justify-items-start gap-5 px-gutter pt-[calc(var(--dz-layout-header-height)+var(--dz-space-6))] lg:justify-items-center lg:pt-[calc(var(--dz-layout-header-height)+var(--dz-space-8))] lg:text-center">
          {trail ? <Breadcrumbs trail={trail} tone="onColor" className="" /> : null}
          <p className="flex flex-wrap gap-2.5 text-caption lg:justify-center">
            {service.pillar && pillar ? (
              <span
                className={`inline-flex min-h-8 items-center gap-2 rounded-full px-3 text-ink ${PILLAR_WASH[service.pillar]}`}
              >
                <PillarMark pillar={service.pillar} className="size-2" />
                {pillar.name}
              </span>
            ) : null}
            <span className="inline-flex min-h-8 items-center rounded-full border border-line-on-color px-3">
              {service.number} · {extras.hero.tag}
            </span>
          </p>
          <Heading id={preview ? undefined : 'service-heading'} className="text-hero-line text-balance text-on-color">
            {content.heading}
          </Heading>
          <p className="max-w-[47.5rem] text-lead">{content.answer}</p>
          <div className="mt-1 flex w-full flex-col gap-3 sm:w-auto sm:flex-row sm:flex-wrap sm:justify-center">
            <CtaButton href={auditHref()} label={shellContent.cta} variant="primary" className="dz-cta-rim" />
            <a href={`#${CODE_PAGE_ID}`} className="dz-press dz-button-on-color">
              {extras.hero.seeCode}
            </a>
          </div>
        </div>
        <div aria-hidden="true" className="dz-laptop-stage">
          <div className="dz-laptop" data-macbook={preview ? undefined : ''}>
            <div className="dz-laptop-lid">
              <div className="dz-laptop-screen">
                <span className="dz-screen-bar" />
                <span className="dz-screen-slab">{heroRotator.phrases[0]}</span>
                <span className="dz-screen-line" />
                <span className="dz-screen-line dz-screen-line-short" />
                <span className="dz-screen-button" />
              </div>
            </div>
            <div className="dz-laptop-base" />
          </div>
        </div>
      </div>
    </section>
  );
}