// Manifesto section + Final CTA + Footer
const Manifesto = ({ accent }) => {
  const t = window.ATTO_TOKENS;
  const c = accent === 'blue' ? t.blue : t.gold;

  return (
    <section className="atto-manifesto" style={{
      padding: '160px 48px 140px',
      borderTop: `1px solid ${t.rule}`,
      background: t.ink, color: t.ivory,
      fontFamily: 'var(--atto-sans)',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Animated ambient grid */}
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.07 }}>
        <defs>
          <pattern id="mgrid" width="60" height="60" patternUnits="userSpaceOnUse">
            <path d="M 60 0 L 0 0 0 60" fill="none" stroke={t.ivory} strokeWidth="0.4" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#mgrid)" />
      </svg>

      <div style={{ position: 'relative', maxWidth: 'none' }}>
        <div className="atto-section-meta" style={{ display: 'flex', justifyContent: 'space-between',
          fontFamily: 'var(--atto-mono)', fontSize: 13,
          color: 'rgba(244,239,230,0.4)',
          letterSpacing: '0.08em', marginBottom: 48 }}>
          <span>/ 05 — MANIFESTO</span>
          <span>AI AS THE NEW ELECTRICITY</span>
        </div>

        <div style={{ maxWidth: 1400 }}>
          <h2 className="atto-manifesto-h2" style={{
            fontSize: 'clamp(52px, 6vw, 104px)',
            lineHeight: 1, letterSpacing: '-0.035em', fontWeight: 600,
            margin: 0, textWrap: 'balance',
          }}>
            If intelligence is{' '}
            <span style={{ fontFamily: 'var(--atto-serif)', fontStyle: 'italic', fontWeight: 400, color: c }}>
              electricity
            </span>, a nation must own its generation.
          </h2>
        </div>
        <div className="atto-manifesto-copy" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 60,
          marginTop: 64, maxWidth: 1400 }}>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'rgba(244,239,230,0.78)',
            margin: 0, textWrap: 'pretty' }}>
            A century ago, electricity rewrote every industrial process. Today, AI is doing
            the same — and nations renting intelligence from abroad are rebuilding a
            colonial dependency in a new dialect.
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'rgba(244,239,230,0.78)',
            margin: 0, textWrap: 'pretty' }}>
            India cannot out-spend a $400 billion hardware race. It must out-engineer it.
            AttoFlow is building the efficient stack — small, local, owned — so the next
            generation of Indian companies compute on their own terms.
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'rgba(244,239,230,0.78)',
            margin: 0, textWrap: 'pretty' }}>
            This is not an import-substitution pitch. It is a bet that the next era of
            compute — local, edge-first, efficiency-bound — is the first one where India
            can lead rather than catch up.
          </p>
        </div>

        {/* Sovereign race table */}
        <div style={{ marginTop: 100, borderTop: `1px solid rgba(244,239,230,0.15)`, paddingTop: 28 }}>
          <div style={{ fontFamily: 'var(--atto-mono)', fontSize: 13,
            color: 'rgba(244,239,230,0.4)', letterSpacing: '0.1em', marginBottom: 20 }}>
            THE SOVEREIGN AI RACE · CUMULATIVE COMMITMENT
          </div>
          <div className="atto-sovereign-table" style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 1,
            background: 'rgba(244,239,230,0.15)', border: '1px solid rgba(244,239,230,0.15)',
            overflowX: 'auto' }}>
            {[
              { nation: 'USA', amt: '$471B', emph: false },
              { nation: 'China', amt: '$125B', emph: false },
              { nation: 'EU', amt: '€109B', emph: false },
              { nation: 'Saudi Arabia', amt: '$100B', emph: false },
              { nation: 'South Korea', amt: '$8.5B', emph: false },
              { nation: 'UAE', amt: '$1.5B', emph: false },
              { nation: 'India', amt: '$1.25B', emph: true },
            ].map(n => (
              <div key={n.nation} style={{
                background: t.ink, padding: '20px 14px',
                borderLeft: n.emph ? `2px solid ${c}` : 'none',
                minWidth: 80,
              }}>
                <div style={{ fontSize: 12, color: n.emph ? c : 'rgba(244,239,230,0.6)',
                  fontFamily: 'var(--atto-mono)', letterSpacing: '0.04em', marginBottom: 10,
                  fontWeight: n.emph ? 500 : 400 }}>
                  {n.nation}
                </div>
                <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em',
                  color: n.emph ? c : t.ivory }}>
                  {n.amt}
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 20, fontSize: 14, color: 'rgba(244,239,230,0.55)',
            fontStyle: 'italic', fontFamily: 'var(--atto-serif)' }}>
            India does not need the biggest budget. It needs the most efficient one.
          </div>
        </div>
      </div>
    </section>
  );
};

const FinalCTA = ({ accent }) => {
  const t = window.ATTO_TOKENS;
  const c = accent === 'blue' ? t.blue : t.gold;
  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="waitlist" className="atto-finalcta" style={{
      padding: '160px 48px 120px',
      borderTop: `1px solid ${t.rule}`,
      fontFamily: 'var(--atto-sans)',
      position: 'relative', overflow: 'hidden',
    }}>
      <div className="atto-section-meta" style={{ display: 'flex', justifyContent: 'space-between',
        fontFamily: 'var(--atto-mono)', fontSize: 13, color: t.fadedText,
        letterSpacing: '0.08em', marginBottom: 48 }}>
        <span>/ 06 — JOIN THE WAITLIST</span>
        <span>PRIVATE BETA · Q3 2026</span>
      </div>

      <div className="atto-finalcta-grid" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, alignItems: 'center' }}>
        <div>
          <h2 style={{
            fontSize: 'clamp(40px, 5.6vw, 80px)',
            lineHeight: 1, letterSpacing: '-0.035em', fontWeight: 600,
            margin: 0, textWrap: 'balance',
          }}>
            Build on{' '}
            <span style={{ fontFamily: 'var(--atto-serif)', fontStyle: 'italic', fontWeight: 400 }}>
              Indian hardware
            </span>.<br/>
            Reason with Indian software.
          </h2>
          <p style={{ fontSize: 18, color: t.mutedText, margin: '28px 0 0', maxWidth: 540, lineHeight: 1.5 }}>
            Early access to the AttoFlow stack, the nanos-family of SLMs, and the first two vertical products.
            Priority for founders, research labs, and professional-service firms in India.
          </p>
        </div>

        <form onSubmit={submit}
          style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 0,
            border: `1px solid ${t.ink}`, borderRadius: 999, padding: 5,
            background: 'rgba(255,255,255,0.4)',
          }}>
            <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: '14px 16px', fontSize: 15, color: t.ink,
                fontFamily: 'var(--atto-sans)', minWidth: 0,
              }} />
            <button type="submit" disabled={submitted} style={{
              padding: '13px 22px', border: 'none',
              background: submitted ? c : t.ink,
              color: submitted ? t.ink : t.ivory,
              borderRadius: 999, fontSize: 14, fontWeight: 500,
              fontFamily: 'var(--atto-sans)', cursor: submitted ? 'default' : 'pointer',
              whiteSpace: 'nowrap', flexShrink: 0,
            }}>{submitted ? 'Joined' : 'Request access →'}</button>
          </div>
          <div style={{ fontSize: 12, color: t.fadedText, fontFamily: 'var(--atto-mono)',
            letterSpacing: '0.04em' }}>
            By joining, you agree to occasional product updates — nothing else.
          </div>
        </form>
      </div>
    </section>
  );
};

const Footer = () => {
  const t = window.ATTO_TOKENS;
  const cols = [
    { head: 'Research', items: ['ML Trinity', 'HD-NDE Paper', 'AI Harness Whitepaper', 'Nanos Family'] },
    { head: 'Products', items: ['Automated Time-Keeping', 'Lipi (OCR + Translation)', 'In the Lab'] },
    { head: 'Company', items: ['Manifesto', 'Careers', 'Press', 'Contact'] },
    { head: 'Connect', items: ['X / Twitter', 'LinkedIn', 'GitHub', 'Discord'] },
  ];

  return (
    <footer className="atto-footer" style={{
      padding: '80px 48px 48px',
      borderTop: `1px solid ${t.rule}`,
      background: t.ivorySoft,
      fontFamily: 'var(--atto-sans)',
    }}>
      <div className="atto-footer-grid" style={{ display: 'grid', gridTemplateColumns: '2fr repeat(4, 1fr)', gap: 48, marginBottom: 64 }}>
        <div className="atto-footer-brand">
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
            <img src="assets/attoflow-logo.png" alt="" style={{ height: 28, width: 'auto' }} />
            <span style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em' }}>AttoFlow</span>
          </div>
          <p style={{ fontSize: 14, color: t.mutedText, margin: 0, maxWidth: 280, lineHeight: 1.5 }}>
            Engineering the efficient AI ecosystem for a sovereign India.
          </p>
          <div style={{ marginTop: 28, fontFamily: 'var(--atto-mono)', fontSize: 11,
            color: t.fadedText, letterSpacing: '0.08em' }}>
            BENGALURU · भारत
          </div>
        </div>
        {cols.map(c => (
          <div key={c.head}>
            <div style={{ fontFamily: 'var(--atto-mono)', fontSize: 11, color: t.fadedText,
              letterSpacing: '0.1em', marginBottom: 18 }}>{c.head.toUpperCase()}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {c.items.map(i => (
                <a key={i} href="#" style={{ fontSize: 14, color: t.ink, textDecoration: 'none',
                  opacity: 0.78 }}>{i}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{ borderTop: `1px solid ${t.rule}`, paddingTop: 24,
        display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8,
        fontFamily: 'var(--atto-mono)', fontSize: 11, color: t.fadedText,
        letterSpacing: '0.06em' }}>
        <span>© 2026 ATTOFLOW LABS PVT LTD</span>
        <span>INTELLIGENCE · INDEPENDENCE · INDIA</span>
        <span>V 0.1 · PRE-LAUNCH</span>
      </div>
    </footer>
  );
};

window.Manifesto = Manifesto;
window.FinalCTA = FinalCTA;
window.Footer = Footer;