// Hero section
const Hero = ({ accent, heroMode }) => {
  const t = window.ATTO_TOKENS;
  const [email, setEmail] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    if (!email || !email.includes('@')) return;
    try {
      const res = await fetch('https://formspree.io/f/xrerqvop', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email }),
      });
      if (res.ok) setSubmitted(true);
    } catch (_) {}
  };

  return (
    <section id="company" className="atto-hero" style={{
      position: 'relative',
      minHeight: '100vh',
      padding: '140px 48px 80px',
      display: 'grid',
      gridTemplateColumns: '0.75fr 1.25fr',
      gap: 48,
      alignItems: 'center',
      fontFamily: 'var(--atto-sans)',
      overflow: 'hidden',
    }}>
      {/* Decorative corner tick marks */}
      <div className="atto-hero-corner-left" style={{ position: 'absolute', top: 100, left: 48, fontSize: 16,
        fontFamily: 'var(--atto-mono)', color: t.fadedText, letterSpacing: '0.08em' }}>
        ATF / 01 — INTELLIGENCE INDEPENDENCE
      </div>
      <div className="atto-hero-corner-right" style={{ position: 'absolute', top: 100, right: 48, fontSize: 16,
        fontFamily: 'var(--atto-mono)', color: t.fadedText, letterSpacing: '0.08em' }}>
        EST. 2025 · भारत
      </div>

      {/* Left: editorial stack */}
      <div style={{ maxWidth: 640, zIndex: 2 }}>

        {/* Mobile-only section label */}
        <div style={{ fontFamily: 'var(--atto-mono)', fontSize: 11, color: t.fadedText,
          letterSpacing: '0.08em', marginBottom: 20 }}
          className="atto-hero-mobile-label">
          ATF / 01 — INTELLIGENCE INDEPENDENCE
        </div>

        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          padding: '6px 12px 6px 8px',
          border: `1px solid ${t.rule}`, borderRadius: 999,
          fontSize: 12, color: t.ink, marginBottom: 36, background: 'rgba(255,255,255,0.4)',
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: t.gold,
            boxShadow: `0 0 8px ${t.gold}` }} />
          <span style={{ letterSpacing: '-0.005em' }}>Waitlist now open · Private beta Q3 2026</span>
        </div>

        <h1 style={{
          fontFamily: 'var(--atto-sans)',
          fontSize: 'clamp(42px, 6.4vw, 92px)',
          lineHeight: 0.96,
          letterSpacing: '-0.035em',
          fontWeight: 600,
          color: t.ink,
          margin: 0,
          textWrap: 'balance',
        }}>
          Intelligence that <br/>
          <span style={{
            fontStyle: 'italic', fontWeight: 400,
            fontFamily: 'var(--atto-serif)',
          }}>stays</span> on your device.
        </h1>

        <p style={{
          marginTop: 28, fontSize: 17, lineHeight: 1.5,
          color: t.mutedText, maxWidth: 520, letterSpacing: '-0.005em',
          textWrap: 'pretty',
        }}>
          AttoFlow is building the efficient AI ecosystem for a sovereign India —
          small, tireless models that run local workflows, with 100% privacy. Your data never leaves. Your intelligence, you Rules.
        </p>

        {/* Waitlist form */}
        <form onSubmit={submit} style={{
          marginTop: 44, display: 'flex', alignItems: 'center', gap: 0,
          maxWidth: 460, border: `1px solid ${t.ink}`, borderRadius: 999,
          padding: 5, background: 'rgba(255,255,255,0.35)',
          transition: 'all 240ms',
        }}>
          <input
            type="email"
            placeholder={submitted ? "✓ You're on the list." : "you@company.in"}
            value={email}
            disabled={submitted}
            onChange={e => setEmail(e.target.value)}
            style={{
              flex: 1, border: 'none', outline: 'none',
              background: 'transparent', padding: '12px 14px',
              fontSize: 14, color: t.ink, fontFamily: 'var(--atto-sans)',
              letterSpacing: '-0.005em', minWidth: 0,
            }}
          />
          <button type="submit" disabled={submitted} style={{
            padding: '11px 18px', border: 'none',
            background: submitted ? t.gold : t.ink,
            color: submitted ? t.ink : t.ivory,
            borderRadius: 999, fontSize: 13, fontWeight: 500,
            fontFamily: 'var(--atto-sans)', cursor: submitted ? 'default' : 'pointer',
            letterSpacing: '-0.005em',
            transition: 'background 200ms',
            whiteSpace: 'nowrap', flexShrink: 0,
          }}>{submitted ? 'Joined' : 'Join waitlist →'}</button>
        </form>
        <div style={{ marginTop: 14, fontSize: 12, color: t.fadedText, fontFamily: 'var(--atto-mono)' }}>
          Join other Engineers, Founders & Researchers at the Frontier!
        </div>
      </div>

      {/* Right: animated glyph */}
      <div className="atto-hero-glyph" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
        <HeroGlyph accent={accent} style={{ width: '100%' }} />
      </div>

      {/* Bottom ticker */}
      <div className="atto-hero-ticker" style={{
        position: 'absolute', bottom: 32, left: 48, right: 48,
        display: 'flex', justifyContent: 'space-between',
        fontFamily: 'var(--atto-mono)', fontSize: 13, color: t.fadedText,
        letterSpacing: '0.08em',
      }}>
        <span>◉ LIVE · 100 TOK/S ON NPU</span>
        <span>SUB-4B PARAMETERS</span>
        <span>14% ↑ HALLUCINATION DETECTION</span>
        <span>0 BYTES LEAVE DEVICE</span>
      </div>
    </section>
  );
};

window.Hero = Hero;