/* Closing CTA — the calm green payoff that completes the fault -> fixed arc.
   Soft green glow, not aggressive red. Email capture with a gentle success state. */
function WaitlistCTA() {
  const { Button, Input } = window.RevvoDesignSystem_a89086;
  const { Reveal, Ic } = window;
  const [email, setEmail] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');
  const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

  const submit = async (e) => {
    e.preventDefault();
    if (!valid || loading) return;
    setLoading(true);
    setError('');
    try {
      const res = await fetch('/api/waitlist', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email }),
      });
      const data = await res.json();
      if (res.ok) {
        setSubmitted(true);
      } else {
        setError(data.error || 'Something went wrong. Please try again.');
      }
    } catch {
      setError('Connection error. Please try again.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <section id="waitlist" style={{
      position: 'relative', overflow: 'hidden', textAlign: 'center',
      padding: 'clamp(110px, 16vw, 220px) clamp(20px, 5vw, 48px)',
    }}>
      <div className="bg-pulse" style={{
        position: 'absolute', top: '50%', left: '50%', width: 'min(1100px, 130vw)', height: 900,
        transform: 'translate(-50%,-50%)', pointerEvents: 'none',
        background: 'radial-gradient(closest-side, rgba(22,214,128,0.22), rgba(22,214,128,0.05) 52%, transparent 74%)',
      }} />
      <div style={{
        position: 'absolute', inset: 0, backgroundImage: window.ALEROQ_CIRCUIT, backgroundSize: '200px 200px',
        opacity: 0.035, pointerEvents: 'none',
        maskImage: 'radial-gradient(60% 60% at 50% 50%, #000, transparent 75%)',
        WebkitMaskImage: 'radial-gradient(60% 60% at 50% 50%, #000, transparent 75%)',
      }} />

      <Reveal style={{ position: 'relative', zIndex: 1, maxWidth: 'var(--container)', margin: '0 auto' }}>
        <div className="final-panel" data-theme="dark" style={{
          position: 'relative', overflow: 'hidden', borderRadius: 'var(--radius-lg)',
          border: '1px solid rgba(22,214,128,0.4)', boxShadow: 'var(--glow-green-lg, 0 0 120px rgba(22,214,128,0.45))',
          padding: 'clamp(40px, 6vw, 84px) clamp(24px, 5vw, 64px)',
        }}>
          {/* resolved emerald vehicle panel */}
          <div style={{
            position: 'absolute', inset: 0, zIndex: 0,
            backgroundImage: 'url("hero-car.png")', backgroundSize: 'cover', backgroundPosition: 'center',
            transform: 'scale(1.04)', filter: 'saturate(1.05)',
          }} />
          <div style={{ position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none',
            background: 'linear-gradient(120deg, rgba(4,20,13,0.92) 0%, rgba(10,107,64,0.66) 55%, rgba(22,214,128,0.32) 120%)' }} />
          <div style={{ position: 'absolute', top: '50%', left: '68%', width: 'min(700px, 70vw)', height: 560,
            transform: 'translate(-50%,-50%)', zIndex: 1, pointerEvents: 'none',
            background: 'radial-gradient(closest-side, rgba(22,214,128,0.4), transparent 72%)', mixBlendMode: 'screen' }} />

          <div style={{ position: 'relative', zIndex: 2, maxWidth: 640, textAlign: 'left' }}>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 22,
              fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em',
              textTransform: 'uppercase', color: '#bfffe0',
            }}>
              <Ic name="BadgeCheck" size={15} color="#bfffe0" /> All clear
            </span>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(36px, 5.2vw, 66px)',
              letterSpacing: 'var(--ls-tight)', color: '#fff', margin: '0 0 16px', lineHeight: 1.04, textWrap: 'balance',
            }}>
              Approve repairs with<br />confidence, not crossed fingers.
            </h2>
            <p style={{ fontSize: 'var(--fs-lead)', color: 'rgba(255,255,255,0.86)', margin: '0 0 36px', maxWidth: 520 }}>
              Turn the next warning light into a clear decision. Join the ALEROQ beta in Phoenix and put the information back in your hands.
            </p>

            {submitted ? (
              <div className="success-pop" style={{
                display: 'inline-flex', alignItems: 'center', gap: 12, color: '#fff',
                background: 'rgba(0,0,0,0.32)', border: '1px solid rgba(255,255,255,0.4)',
                borderRadius: 'var(--radius-md)', padding: '16px 24px', fontSize: 16, fontWeight: 500,
              }}>
                <Ic name="CheckCircle2" size={22} color="#aaffd6" />
                You&rsquo;re on the list. Welcome to ALEROQ, {email.split('@')[0]}.
              </div>
            ) : (
              <form onSubmit={submit} style={{ display: 'flex', gap: 12, flexWrap: 'wrap', maxWidth: 520 }}>
                <div style={{ flex: '1 1 260px' }}>
                  <Input type="email" size="lg" placeholder="you@email.com" value={email} onChange={(e) => setEmail(e.target.value)}
                    style={{ background: 'rgba(0,0,0,0.34)', borderColor: 'rgba(255,255,255,0.4)', color: '#fff' }} />
                </div>
                <Button type="submit" variant="secondary" size="lg" disabled={!valid || loading}
                  style={{ background: loading ? 'rgba(255,255,255,0.7)' : '#fff', color: '#04130c', borderColor: '#fff', flex: '0 0 auto', opacity: (!valid || loading) ? 0.7 : 1 }}>
                  {loading ? 'Joining…' : 'Request beta access'}
                </Button>
                {error && (
                  <p style={{ width: '100%', margin: '4px 0 0', fontSize: 13, color: '#ff8080' }}>{error}</p>
                )}
              </form>
            )}
          </div>
        </div>
      </Reveal>
    </section>
  );
}

window.WaitlistCTA = WaitlistCTA;