// CTA + Footer

const interestOptions = [
'My inbox is overwhelming',
'I want a clear action list',
'I prefer summaries over emails',
'I want to clean up my inbox for good',
'Just curious'];


function CTA() {
  const [email, setEmail] = useState('');
  const [why, setWhy] = useState('');
  const [whyOpen, setWhyOpen] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const [isExisting, setIsExisting] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');

  const submit = async (e) => {
    e.preventDefault();
    if (!email) return;

    setIsLoading(true);
    setError('');

    try {
      const response = await fetch('/api/subscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, interest: why })
      });

      const data = await response.json();

      if (data.success) {
        setIsExisting(data.existing || false);
        setSubmitted(true);
      } else {
        setError(data.error || 'Something went wrong. Please try again.');
      }
    } catch (err) {
      setError('Failed to submit. Please try again.');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <section id="cta" style={{
      position: 'relative', padding: '140px 0 120px',
      background: 'var(--bg-deep)',
      overflow: 'hidden', borderTop: '1px solid var(--hair-dk)'
    }}>
      <AmbientGrid density={36} dark />

      <div style={{
        position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
        width: 800, height: 800, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(232,112,90,0.14) 0%, transparent 60%)',
        pointerEvents: 'none', filter: 'blur(20px)',
        animation: 'ambient-glow 5s ease-in-out infinite'
      }} />

      <div style={{ position: 'relative', maxWidth: 720, margin: '0 auto', padding: '0 32px', textAlign: 'center', zIndex: 2 }}>
        <Reveal style={{ display: 'flex', justifyContent: 'center' }}>
          <SectionMark num="09" label="Limited beta · 500 seats" />
        </Reveal>
        <Reveal delay={100}>
          <h2 style={{
            fontFamily: 'var(--serif)', fontWeight: 400,
            fontSize: 'clamp(2.6rem, 6.5vw, 5.5rem)', lineHeight: 0.95,
            letterSpacing: '-0.035em', margin: '24px 0 24px',
            textWrap: 'balance'
          }}>
            Step away from<br />
            <span className="italic" style={{ color: 'var(--accent)' }}>your inbox.</span>
          </h2>
        </Reveal>
        <Reveal delay={200}>
          <p style={{
            maxWidth: 480, margin: '0 auto 40px',
            fontSize: 17, lineHeight: 1.6, fontWeight: 300, color: 'var(--ink-mute)'
          }}>
            Be one of the first 500. Founding-member access. Direct line to the team.
          </p>
        </Reveal>

        <Reveal delay={300}>
          {!submitted ?
          <form onSubmit={submit} style={{
            maxWidth: 480, margin: '0 auto',
            display: 'flex', flexDirection: 'column', gap: 12
          }}>
              <input
              type="email"
              required
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="you@inbox.com"
              style={{
                padding: '16px 18px', fontSize: 15,
                background: 'rgba(255,255,255,0.04)',
                border: '1px solid var(--hair-dk-strong)',
                borderRadius: 10, color: 'var(--ink)',
                fontFamily: 'inherit', outline: 'none',
                transition: 'border-color 0.2s'
              }}
              onFocus={(e) => e.target.style.borderColor = 'var(--accent)'}
              onBlur={(e) => e.target.style.borderColor = 'var(--hair-dk-strong)'} />
            
              <div style={{ position: 'relative' }}>
                <button
                type="button"
                onClick={() => setWhyOpen((v) => !v)}
                style={{
                  width: '100%', padding: '16px 18px',
                  background: 'rgba(255,255,255,0.04)',
                  border: '1px solid var(--hair-dk-strong)',
                  borderRadius: 10, color: why ? 'var(--ink)' : 'var(--ink-faint)',
                  fontSize: 15, textAlign: 'left',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center'
                }}>
                  {why || 'What brings you to Scrub?'}
                  <span style={{ color: 'var(--ink-faint)', transform: whyOpen ? 'rotate(180deg)' : 'rotate(0)', transition: 'transform 0.2s' }}>▾</span>
                </button>
                {whyOpen &&
              <div style={{
                position: 'absolute', top: 'calc(100% + 4px)', left: 0, right: 0,
                background: 'var(--bg-elev)',
                border: '1px solid var(--hair-dk-strong)',
                borderRadius: 10, overflow: 'hidden',
                zIndex: 10, boxShadow: '0 16px 48px rgba(0,0,0,0.4)'
              }}>
                    {interestOptions.map((opt, i) =>
                <button key={i} type="button"
                onClick={() => {setWhy(opt);setWhyOpen(false);}}
                style={{
                  width: '100%', padding: '12px 18px', textAlign: 'left',
                  fontSize: 14, color: 'var(--ink)',
                  borderBottom: i < interestOptions.length - 1 ? '1px solid var(--hair-dk)' : 'none',
                  transition: 'background 0.15s'
                }}
                onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(232,112,90,0.10)'}
                onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
                  {opt}</button>
                )}
                  </div>
              }
              </div>
              <PrimaryBtn style={{ marginTop: 4, opacity: isLoading ? 0.7 : 1 }} onClick={submit} disabled={isLoading}>
                {isLoading ? 'Submitting...' : 'Request early access →'}
              </PrimaryBtn>
              {error && <div style={{ fontSize: 13, color: '#ff6b6b', marginTop: 8 }}>{error}</div>}
              <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-faint)', letterSpacing: '0.08em', marginTop: 8 }}>
                NO SPAM · UNSUBSCRIBE WITH ONE TAP
              </div>
            </form> :

          <div style={{
            maxWidth: 480, margin: '0 auto',
            padding: 36,
            background: 'rgba(232,112,90,0.06)',
            border: '1px solid rgba(232,112,90,0.3)',
            borderRadius: 14
          }}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em', color: 'var(--accent)', marginBottom: 16 }}>
                {isExisting ? '✓ WELCOME BACK' : '✓ YOU\'RE ON THE LIST'}
              </div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 28, lineHeight: 1.1, marginBottom: 12 }}>
                {isExisting ? 'Thanks for reaching out!' : 'See you on the other side of email.'}
              </div>
              <div style={{ fontSize: 14, color: 'var(--ink-mute)' }}>
                {isExisting
                  ? <>We have <span style={{ color: 'var(--ink)' }}>{email}</span> on our waitlist and will get back to you soon.</>
                  : <>We'll email <span style={{ color: 'var(--ink)' }}>{email}</span> when your seat opens.</>
                }
              </div>
            </div>
          }
        </Reveal>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer style={{
      position: 'relative', padding: '60px 0 40px',
      background: 'var(--bg-deep)',
      borderTop: '1px solid var(--hair-dk)'
    }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 32px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 32, marginBottom: 48 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', marginBottom: 14 }}>
              <img
                src="assets/scrub-logo-dark.png"
                alt="Scrub"
                style={{ height: 64, width: 'auto', display: 'block' }} />
              
            </div>
            <div style={{ fontSize: 13, color: 'var(--ink-mute)', maxWidth: 280, lineHeight: 1.6 }}>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 64 }}>
            {[
            ['Product', [['Features', '#features'], ['How it works', '#how'], ['Privacy', '#privacy'], ['FAQ', '#faq']]],
            ['Company', [['About', '#'], ['Contact', 'mailto:support@scrubaiapp.com']]],
            ['Legal', [['Privacy Policy', 'privacy-policy.html'], ['Terms', 'terms-of-service.html'], ['Data Deletion', 'data-deletion.html']]]].
            map(([t, items]) =>
            <div key={t}>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', color: 'var(--ink-faint)', marginBottom: 14 }}>
                  {t.toUpperCase()}
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {items.map(([label, href]) =>
                <a key={label} href={href} style={{ fontSize: 13, color: 'var(--ink-mute)', transition: 'color 0.2s' }}
                onMouseEnter={(e) => e.currentTarget.style.color = 'var(--accent)'}
                onMouseLeave={(e) => e.currentTarget.style.color = 'var(--ink-mute)'}>
                  {label}</a>
                )}
                </div>
              </div>
            )}
          </div>
        </div>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          paddingTop: 24, borderTop: '1px solid var(--hair-dk)',
          fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-faint)', letterSpacing: '0.04em'
        }}>
          <span>© 2026 SCRUB · INDIA</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { CTA, Footer });