// dthas landing — inverted black hero. Large wordmark, tagline, value prop, CTA.
function Hero() {
  const { Button } = window.DesignSystem_aa2f04;
  return (
    <header id="top" style={{
      background: 'var(--c-black)', color: 'var(--c-white)',
      borderBottom: '1px solid var(--c-line-invert)',
    }}>
      <div style={{
        maxWidth: 'var(--container-max)', margin: '0 auto',
        padding: 'clamp(64px, 12vh, 160px) var(--container-pad) clamp(48px, 8vh, 96px)',
      }}>
        <div className="hero-in hero-in-1" style={{
          fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-overline)',
          letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase',
          color: 'var(--c-paper-500)', marginBottom: 'clamp(40px, 8vh, 88px)',
          display: 'flex', justifyContent: 'flex-end', flexWrap: 'wrap', gap: '12px',
        }}>
          <span aria-hidden="true" style={{ visibility: 'hidden' }}>Est. Den Haag · NL</span>
        </div>

        <div className="hero-in hero-in-2" style={{ display: 'flex', alignItems: 'flex-end', flexWrap: 'wrap', gap: 'clamp(16px, 3vw, 48px)' }}>
          <h1 style={{
            margin: 0, fontWeight: 400,
            fontSize: 'clamp(3.25rem, 9vw, 8rem)', lineHeight: 0.92,
            letterSpacing: '-0.05em',
          }}>dthas</h1>

          <div className="dino-scene" aria-hidden="true">
            <div className="dino-ground" />
            <svg className="dino-cactus" viewBox="0 0 18 28" fill="currentColor">
              <rect x="7" y="0" width="4" height="28" />
              <rect x="0" y="10" width="4" height="8" />
              <rect x="0" y="14" width="7" height="4" />
              <rect x="14" y="6" width="4" height="10" />
              <rect x="11" y="12" width="7" height="4" />
            </svg>
            <svg className="dino-cactus-2" viewBox="0 0 22 34" fill="currentColor">
              <rect x="9" y="0" width="4" height="34" />
              <rect x="0" y="12" width="4" height="9" />
              <rect x="0" y="17" width="9" height="4" />
              <rect x="18" y="8" width="4" height="11" />
              <rect x="13" y="14" width="9" height="4" />
            </svg>
            <svg className="dino-bird" viewBox="0 0 28 18" fill="currentColor">
              <rect x="16" y="7" width="10" height="4" />
              <rect x="24" y="6" width="4" height="3" />
              <polygon className="wing" points="6,9 18,9 12,1" />
            </svg>
            <div className="dino-enter">
              <div className="dino-runner">
                <svg className="dino" viewBox="0 0 48 48" fill="currentColor">
                  <rect x="0" y="24" width="12" height="6" />
                  <rect x="8" y="14" width="22" height="18" />
                  <rect x="26" y="4" width="16" height="16" />
                  <rect x="40" y="10" width="8" height="7" />
                  <rect x="24" y="22" width="6" height="5" />
                  <rect x="33" y="8" width="3" height="3" fill="#000" />
                  <rect className="leg leg-a" x="12" y="32" width="6" height="16" />
                  <rect className="leg leg-b" x="20" y="32" width="6" height="16" />
                </svg>
              </div>
            </div>
          </div>
        </div>

        <p className="hero-in hero-in-3" style={{
          margin: 'clamp(20px, 4vh, 36px) 0 0', maxWidth: '20ch',
          fontSize: 'var(--fs-lead)', lineHeight: 1.3,
          letterSpacing: '-0.02em', color: 'var(--c-white)',
        }}>design · technology hub and services</p>

        <div style={{
          marginTop: 'clamp(40px, 7vh, 80px)',
          display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) auto',
          alignItems: 'end', gap: '32px',
          borderTop: '1px solid var(--c-line-invert)', paddingTop: '32px',
        }} className="dthas-hero-foot hero-in hero-in-4">
          <p style={{
            margin: 0, maxWidth: 'none',
            fontSize: 'clamp(1.0625rem, 1.4vw, 1.25rem)', lineHeight: 1.4,
            letterSpacing: '-0.01em', color: 'var(--c-paper-700)',
          }}>
            Bespoke software and digital strategy, precisely engineered.
          </p>
          <Button variant="inverse" size="lg" withArrow onClick={()=>onScrollTo('contact')}>
            Start a project
          </Button>
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { Hero });