// Hero.jsx — landing hero with type-on prompt
const Hero = ({ onShop, onManifesto }) => {
  const [typed, setTyped] = React.useState('');
  const full = '$ ./brew --execute --dominate';
  React.useEffect(() => {
    let i = 0;
    const t = setInterval(() => {
      i++;
      setTyped(full.slice(0, i));
      if (i >= full.length) clearInterval(t);
    }, 45);
    return () => clearInterval(t);
  }, []);
  return (
    <section style={{ borderBottom: '1px solid rgba(255,255,255,0.1)', padding: '64px 24px 80px', position: 'relative', overflow: 'hidden' }}>
      {/* faint scanlines */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: 'repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(0,255,65,0.025) 3px, transparent 4px)' }}></div>
      <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative' }}>
        <div style={{ fontSize: 11, color: '#00FF41', letterSpacing: '0.25em', marginBottom: 18 }}>
          {typed}<span style={{ background: '#00FF41', color: '#000', marginLeft: 2 }}>█</span>
        </div>
        <h1 style={{ fontSize: 'clamp(56px, 9vw, 128px)', lineHeight: 0.95, letterSpacing: '0.02em', textTransform: 'uppercase', fontWeight: 800, color: '#FFF', margin: 0 }}>
          BREW.<br/>EXECUTE.<br/><span className="phosphor glitch" data-text="DOMINATE." style={{ color: '#00FF41' }}>DOMINATE.</span>
        </h1>
        <p style={{ marginTop: 28, maxWidth: 540, color: '#B8B8B8', fontSize: 16, lineHeight: 1.6 }}>
          coffee for operators. high quality beans. ethically sourced. carefully roasted to deliver flavor and performance for long sessions.
        </p>
        <div style={{ marginTop: 36, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <button onClick={onShop} style={{ background: '#00FF41', color: '#000', border: '1px solid #00FF41', padding: '14px 22px', fontFamily: 'inherit', fontSize: 13, fontWeight: 700, letterSpacing: '0.2em', cursor: 'pointer', borderRadius: 2 }}>
            {'>'} ENTER SHOP
          </button>
          <button onClick={onManifesto} style={{ background: 'transparent', color: '#00FF41', border: '1px solid #00FF41', padding: '14px 22px', fontFamily: 'inherit', fontSize: 13, fontWeight: 700, letterSpacing: '0.2em', cursor: 'pointer', borderRadius: 2 }}>
            ./manifesto
          </button>
        </div>
        <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.1)' }}>
          {[
            { k: 'ROASTED FOR', v: 'OPERATORS' },
            { k: 'BEANS', v: '100% ARABICA' },
            { k: 'BATCH', v: 'SMALL · TO ORDER' },
            { k: 'FILLERS', v: 'NONE.' },
          ].map((x) => (
            <div key={x.k} style={{ background: '#000', padding: '20px 18px' }}>
              <div style={{ fontSize: 9, letterSpacing: '0.25em', color: '#6E6E6E' }}>// {x.k}</div>
              <div style={{ marginTop: 8, fontSize: 16, letterSpacing: '0.1em', color: '#00FF41', fontWeight: 700 }}>{x.v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Hero = Hero;