function Hero() {
  const [copied, setCopied] = React.useState(false);
  const cmd = 'npx foreman-sh init';
  const copy = () => {
    navigator.clipboard?.writeText(cmd);
    setCopied(true);
    setTimeout(() => setCopied(false), 1200);
  };

  return (
    <section id="top" style={{ paddingTop: 96, paddingBottom: 96, position: 'relative' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 48 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 28 }}>
              <span className="eyebrow">Open source &middot; MIT &middot; v1.0.0</span>
              <span style={{ width: 4, height: 4, borderRadius: 2, background: 'var(--muted-2)' }} />
              <span className="eyebrow">For founders, not consultants</span>
            </div>
            <h1 style={{
              fontSize: 'clamp(56px, 9vw, 128px)',
              fontWeight: 800,
              letterSpacing: '-0.045em',
              lineHeight: 0.94,
              marginBottom: 32,
            }}>
              Think clearer.<br />
              Decide faster.<br />
              <span style={{ color: 'var(--muted-2)' }}>Ship anyway.</span>
            </h1>
            <p style={{
              fontSize: 22,
              lineHeight: 1.4,
              maxWidth: 720,
              color: 'var(--ink-2)',
              fontWeight: 400,
              letterSpacing: '-0.015em',
              marginBottom: 40,
              textWrap: 'pretty',
            }}>
              Foreman is the strategic advisor that used to cost six figures.
              You describe the problem in plain language. It diagnoses,
              picks the right framework, applies it to your context, and
              tracks whether you actually follow through.
            </p>

            <div style={{ display: 'flex', alignItems: 'stretch', gap: 12, flexWrap: 'wrap' }}>
              <button onClick={copy} style={{
                display: 'inline-flex', alignItems: 'center', gap: 14,
                background: 'var(--paper-3)',
                border: '1px solid var(--line)',
                padding: '14px 18px',
                fontFamily: 'var(--mono)',
                fontSize: 14,
                color: 'var(--ink)',
                fontWeight: 500,
              }}>
                <span style={{ color: 'var(--muted)' }}>$</span>
                <span>{cmd}</span>
                <span style={{
                  marginLeft: 8, paddingLeft: 14, borderLeft: '1px solid var(--line)',
                  color: copied ? 'var(--ink)' : 'var(--muted)', fontSize: 12,
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                }}>
                  {copied ? '\u2713 copied' : 'copy'}
                </span>
              </button>
              <a href="#how" style={{
                display: 'inline-flex', alignItems: 'center',
                background: 'var(--ink)', color: 'white',
                padding: '14px 22px', fontSize: 14, fontWeight: 600,
              }}>
                See how it works &rarr;
              </a>
              <a href="https://github.com/fatihguner/foreman" style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '14px 18px', fontSize: 14, fontWeight: 500,
                color: 'var(--ink-2)',
              }}>
                <span className="mono" style={{ fontSize: 13 }}>github.com/fatihguner/foreman</span>
                <span style={{ color: 'var(--muted)' }}>&#x2197;</span>
              </a>
            </div>

            <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
              {[
                { n: '158', l: 'skills' },
                { n: '24', l: 'diagnostics' },
                { n: '21', l: 'playbooks' },
                { n: '9', l: 'industry packs' },
              ].map((s, i, arr) => (
                <div key={s.l} style={{
                  padding: '20px 24px',
                  borderRight: i < arr.length - 1 ? '1px solid var(--line)' : 'none',
                }}>
                  <div style={{ fontSize: 32, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1 }}>{s.n}</div>
                  <div className="eyebrow" style={{ marginTop: 8 }}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* JTBD strip */}
        <div style={{ marginTop: 48 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>The job you&rsquo;re hiring it for</div>
          <p style={{
            fontSize: 28,
            fontWeight: 500,
            letterSpacing: '-0.02em',
            lineHeight: 1.3,
            maxWidth: 980,
            textWrap: 'balance',
          }}>
            <span style={{ color: 'var(--muted-2)' }}>When</span> a vague worry won&rsquo;t leave my head,
            <span style={{ color: 'var(--muted-2)' }}> I want to</span> name the real problem
            <span style={{ color: 'var(--muted-2)' }}> so I can</span> spend Monday on the right thing.
          </p>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;