// Quill Keyboard — closing CTA (with Mac waitlist) + footer
function CTA() {
  const [email, setEmail] = useState('');
  const [done, setDone] = useState(false);
  return (
    <section id="waitlist" className="wrap" style={{ paddingBottom: 90 }}>
      <div className="mesh" style={{ borderRadius: 34, padding: '70px 28px', textAlign: 'center', boxShadow: '0 30px 70px rgba(17,24,39,0.28)' }}>
        <h2 style={{ fontSize: 46, fontWeight: 800, letterSpacing: '-0.03em', color: '#fff', margin: 0, textShadow: '0 2px 24px rgba(0,0,0,0.16)' }}>
          Type with Claude,<br />everywhere you already type.
        </h2>
        <div style={{ display: 'flex', gap: 13, justifyContent: 'center', marginTop: 30, flexWrap: 'wrap' }}>
          <AppStoreBadge soft />
        </div>

        <div style={{ marginTop: 40, paddingTop: 32, borderTop: '1px solid rgba(255,255,255,0.22)', maxWidth: 460, marginLeft: 'auto', marginRight: 'auto' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: '#fff', fontSize: 15, fontWeight: 600, marginBottom: 14 }}>
            <Icon name="laptop" size={17} color="#fff" />The Mac app is in planning
          </div>
          {done ? (
            <div className="glass-card" style={{ borderRadius: 14, padding: '13px 18px', color: '#fff', display: 'inline-flex', alignItems: 'center', gap: 9, background: 'rgba(255,255,255,0.2)' }}>
              <Icon name="check" size={18} color="#fff" stroke={2.6} />You’re on the list. We’ll be in touch.
            </div>
          ) : (
            <form onSubmit={e => { e.preventDefault(); if (email.includes('@')) setDone(true); }}
              style={{ display: 'flex', gap: 9, justifyContent: 'center', flexWrap: 'wrap' }}>
              <input type="email" required value={email} onChange={e => setEmail(e.target.value)} placeholder="you@email.com"
                style={{ flex: '1 1 240px', minWidth: 0, padding: '13px 18px', borderRadius: 999, border: '1px solid rgba(255,255,255,0.4)',
                  background: 'rgba(255,255,255,0.16)', color: '#fff', fontSize: 15, fontFamily: 'var(--font-sans)',
                  WebkitBackdropFilter: 'blur(10px)', backdropFilter: 'blur(10px)', outline: 'none' }} />
              <button type="submit" className="btn btn-white">Join the waitlist</button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    { h: 'Product', items: [['How it works', '#howitworks'], ['Action library', '#actions'], ['Privacy', '#privacy'], ['FAQ', '#faq']] },
    { h: 'Get it', items: [['App Store', APP_STORE_URL], ['Mac waitlist', '#waitlist'], ['Action catalog', '#']] },
    { h: 'Company', items: [['Privacy policy', '/privacy'], ['Support', '/support'], ['Anthropic', 'https://anthropic.com']] },
  ];
  return (
    <footer style={{ borderTop: '1px solid var(--separator)', padding: '54px 0 40px' }}>
      <div className="wrap two-col" style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 30 }}>
        <div>
          <AkLogo size={28} />
          <p style={{ fontSize: 14.5, color: 'var(--fg3)', maxWidth: 250, marginTop: 14, lineHeight: 1.5 }}>
            A custom iOS keyboard with Claude built in. Bring your own Anthropic key.
          </p>
        </div>
        {cols.map(c => (
          <div key={c.h}>
            <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--fg1)', marginBottom: 12 }}>{c.h}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
              {c.items.map(([t, href]) => <a key={t} href={href} style={{ fontSize: 14.5, color: 'var(--fg2)', textDecoration: 'none' }}
                onMouseEnter={e => e.currentTarget.style.color = 'var(--accent)'} onMouseLeave={e => e.currentTarget.style.color = 'var(--fg2)'}>{t}</a>)}
            </div>
          </div>
        ))}
      </div>
      <div className="wrap" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 44, paddingTop: 22, borderTop: '1px solid var(--separator)', flexWrap: 'wrap', gap: 12 }}>
        <span style={{ fontSize: 13.5, color: 'var(--fg3)' }}>© 2026 Quill Keyboard. Powered by Anthropic Claude.</span>
        <span style={{ fontSize: 13.5, color: 'var(--fg3)' }}>Made for iPhone & iPad.</span>
      </div>
    </footer>
  );
}
Object.assign(window, { CTA, Footer });