const { Wordmark } = window.CammusDesignSystem_2ef585;

/* HERO — load-time sequence: wordmark → headline → strike draws over "future" →
   lime period pops (the section's single lime). Scroll cue = gray geometric
   triangle with a soft continuous bob. */
function Hero() {
  return (
    <header id="top" data-screen-label="Hero" className="cam-canvas cam-grain" style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="cam-mesh" aria-hidden="true" style={{ position: 'absolute', right: -140, top: -140, width: 520, height: 520, opacity: 0.6 }} />
      <div style={{
        position: 'relative', zIndex: 1,
        maxWidth: 'var(--page-max)', margin: '0 auto',
        padding: 'calc(var(--section-pad) * 1.45) var(--page-gutter) calc(var(--section-pad) * 1.15)',
      }}>
        <div className="lp-seq" style={{ '--d': '0s' }}>
          <Wordmark tone="white" height={30} />
        </div>
        <h1 className="lp-seq" style={{
          '--d': '0.15s',
          margin: 'var(--space-8) 0 0',
          fontSize: 'var(--fs-display)', fontWeight: 'var(--fw-regular)',
          letterSpacing: 'var(--track-display)', lineHeight: 'var(--lh-tight)',
          color: 'var(--cam-text-primary)', maxWidth: '17ch',
        }}>
          The marketing agency of the{' '}
          <s style={{ position: 'relative', textDecoration: 'none', color: 'var(--cam-text-inactive)', whiteSpace: 'nowrap' }}>
            future
            <span className="lp-strike" aria-hidden="true" style={{
              '--d': '0.85s',
              position: 'absolute', left: '-0.02em', right: '-0.02em', top: '56%',
              height: '0.055em', background: 'var(--cam-border-strong)',
            }} />
          </s>{' '}
          <span style={{ fontWeight: 'var(--fw-black)' }}>present</span><span className="lp-dot" style={{ '--d': '1.15s', color: 'var(--cam-accent-lime)' }}>.</span>
        </h1>
        <div className="lp-seq" aria-hidden="true" style={{ '--d': '1.5s', marginTop: 'var(--space-9)' }}>
          <span className="lp-scrollcue" style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
            <span style={{ width: 1, height: 22, background: 'var(--cam-border-strong)' }} />
            <span style={{
              width: 0, height: 0, borderLeft: '5px solid transparent',
              borderRight: '5px solid transparent', borderTop: '7px solid var(--cam-text-inactive)',
            }} />
          </span>
        </div>
      </div>
    </header>
  );
}
window.Hero = Hero;