// Hero — editorial title with technical meta strip + stats strip. Quiet but instrument-like.
const Hero = () => {
  return (
    <section id="top" className="hero-root" style={{
      position: 'relative',
      minHeight: 'min(820px, 92vh)',
      padding: '88px 48px 40px',
      maxWidth: 1280,
      margin: '0 auto',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'space-between',
    }}>
      {/* Top meta strip — small, technical */}
      <div className="hero-meta" style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        gap: 24,
        fontFamily: 'var(--mono)',
        fontSize: 9.5,
        color: 'var(--ink-mute)',
        letterSpacing: '0.08em',
        textTransform: 'uppercase',
        paddingBottom: 16,
        flexWrap: 'wrap',
      }}>
        <span>Accepting samples — Q3 2026</span>
        <span className="hero-meta-mid">NGI · New Generation Instruments</span>
        <span>Est. 2026 — Silicon Valley · soon in Boston</span>
      </div>

      <div className="rule-soft"></div>

      {/* Center — title block */}
      <div style={{
        flex: 1,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        padding: '56px 0',
        maxWidth: 980,
      }}>
        <div className="eyebrow" style={{ marginBottom: 32 }}>
          <span className="marker"></span>Sample preparation, as a service
        </div>

        <h1 className="h-display" style={{
          margin: 0,
          fontSize: 'clamp(48px, 7vw, 108px)',
          lineHeight: 1.0,
          letterSpacing: '-0.03em',
          fontWeight: 320,
        }}>
          Ship samples.<br/>
          Receive <em style={{color:'var(--accent)', fontStyle:'italic'}}>libraries.</em>
        </h1>

        <p style={{
          marginTop: 32,
          maxWidth: '52ch',
          fontSize: 17,
          lineHeight: 1.5,
          color: 'var(--ink-soft)',
        }}>
          Ship us your samples. We return sequencing-ready libraries within a week, prepared on our microfluidic instruments — at half the cost of established providers.
        </p>

        <div style={{
          marginTop: 36,
          display: 'flex',
          gap: 14,
          alignItems: 'center',
          flexWrap: 'wrap',
        }}>
          <a href="#demo" className="btn btn-primary">
            Request a quote
            <span className="arrow"></span>
          </a>
          <a href="#technology" className="btn btn-ghost">
            How it works
          </a>
        </div>
      </div>

      <div className="rule-soft"></div>

      {/* Bottom stats strip */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(4, 1fr)',
        gap: 1,
        background: 'var(--rule-soft)',
        marginTop: 20,
      }} className="hero-stats">
        {[
          ['24 hrs', 'sample-to-library', 'excl. shipping'],
          ['2 hrs', 'on-instrument prep', '4–10 hrs · industry'],
          ['½×', 'price per library', 'vs. cheapest provider'],
          ['Any', 'volume', '24 to 100,000+ samples'],
        ].map(([big, label, sub], i) => (
          <div key={i} style={{
            background: 'var(--bone)',
            padding: '18px 20px 16px',
            display: 'flex',
            flexDirection: 'column',
            gap: 4,
          }}>
            <div style={{
              fontFamily: 'var(--serif)',
              fontSize: 30,
              lineHeight: 1,
              letterSpacing: '-0.03em',
              fontWeight: 380,
            }}>{big}</div>
            <div style={{
              fontFamily: 'var(--sans)',
              fontSize: 12,
              color: 'var(--ink)',
              fontWeight: 500,
              marginTop: 4,
            }}>{label}</div>
            <div style={{
              fontFamily: 'var(--mono)',
              fontSize: 9.5,
              color: 'var(--ink-mute)',
              letterSpacing: '0.06em',
              textTransform: 'uppercase',
            }}>{sub}</div>
          </div>
        ))}
      </div>

      <style>{`
        @media (max-width: 1100px) {
          .hero-root { padding: 88px 36px 36px !important; }
        }
        @media (max-width: 900px) {
          .hero-stats { grid-template-columns: repeat(2, 1fr) !important; }
          .hero-meta-mid { display: none; }
        }
        @media (max-width: 760px) {
          .hero-root { padding: 96px 20px 28px !important; min-height: 0 !important; }
        }
        @media (max-width: 480px) {
          .hero-meta { font-size: 8.5px !important; gap: 12px !important; }
          .hero-stats { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </section>
  );
};

window.Hero = Hero;