// FinalCTA v2, 2 fields, direct booking redirect, guarantee line
const { useRef: useCtaRef, useEffect: useCtaEffect, useState: useCtaState } = React;

const CAL_URL = 'https://cal.com/ratan-kumar/ai-automation-startegy-call-with-ratan-quantaeight';

function FinalCTA() {
  const [revealed,  setRevealed]  = useCtaState(false);
  const [form,      setForm]      = useCtaState({ email: '', bottleneck: '' });
  const [sending,   setSending]   = useCtaState(false);
  const sectionRef = useCtaRef(null);

  useCtaEffect(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setRevealed(true); }, { threshold: 0.08 });
    if (sectionRef.current) obs.observe(sectionRef.current);
    return () => obs.disconnect();
  }, []);

  const handleSubmit = (e) => {
    e.preventDefault();
    setSending(true);
    // Encode answers into Cal.com prefill so the conversation starts pre-context
    const params = new URLSearchParams({
      email: form.email,
      notes: form.bottleneck,
    });
    setTimeout(() => window.location.href = `${CAL_URL}?${params.toString()}`, 400);
  };

  const inputBase = {
    width: '100%', background: 'var(--bg-primary)',
    border: '1px solid var(--border-subtle)',
    borderRadius: 9, padding: '14px 16px',
    color: 'var(--text-primary)', fontSize: 15,
    fontFamily: 'Inter, sans-serif', outline: 'none',
    transition: 'border-color 0.2s ease, background 0.2s ease',
  };

  const labelStyle = {
    fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
    color: 'var(--text-tertiary)', letterSpacing: '0.08em',
    display: 'block', marginBottom: 8, textTransform: 'uppercase',
  };

  return (
    <section id="contact" ref={sectionRef} style={{
      padding: '120px 0',
      background: 'var(--bg-primary)',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Top accent line */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 1,
        background: 'linear-gradient(90deg, transparent, var(--accent-mint), var(--accent-violet), transparent)',
        opacity: 0.4,
      }} />
      {/* Bottom bloom */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'radial-gradient(ellipse 60% 50% at 50% 100%, rgba(0,217,160,0.05) 0%, transparent 70%)',
      }} />

      <div style={{ maxWidth: 1180, margin: '0 auto', padding: '0 48px', position: 'relative', zIndex: 1 }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center',
        }} className="cta-grid">

          {/* ── LEFT: pitch ───────────────────────────────────────────── */}
          <div style={{
            opacity: revealed ? 1 : 0, transform: revealed ? 'translateY(0)' : 'translateY(24px)',
            transition: 'all 0.6s cubic-bezier(0.16,1,0.3,1)',
          }}>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
              color: 'var(--accent-mint-text)', letterSpacing: '0.12em',
              textTransform: 'uppercase', marginBottom: 16,
            }}>// BOOK A DISCOVERY CALL</div>
            <h2 style={{
              fontFamily: 'Syne, sans-serif',
              fontSize: 'clamp(28px, 3.8vw, 50px)',
              fontWeight: 700, letterSpacing: '-0.02em',
              lineHeight: 1.08, marginBottom: 20,
            }}>
              Stop watching competitors automate<br />
              <span style={{ color: 'var(--accent-mint)' }}>while you write SOPs.</span>
            </h2>
            <p style={{
              fontSize: 17, color: 'var(--text-secondary)',
              lineHeight: 1.65, maxWidth: 480, marginBottom: 32,
              fontFamily: 'Inter, sans-serif',
            }}>
              60-minute discovery call. Free. We'll tell you exactly what to build, what{' '}
              <strong style={{ fontWeight: 600, color: 'var(--text-primary)' }}>not</strong>{' '}
              to build, and what it costs. No pitch deck. No follow-up pressure.
            </p>

            {/* Promise list */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 32 }}>
              {[
                'Map your highest-leverage bottleneck',
                "Honest read on whether AI is the right tool",
                'Rough scope and cost range, no ambiguity',
                'Walk away with a written next step',
              ].map((item, i) => (
                <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                  <span style={{
                    width: 18, height: 18, borderRadius: '50%',
                    border: '1.5px solid var(--accent-mint)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0, marginTop: 2,
                    background: 'rgba(0,217,160,0.1)', fontSize: 8, color: 'var(--accent-mint)',
                  }}>✓</span>
                  <span style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.5, fontFamily: 'Inter, sans-serif' }}>{item}</span>
                </div>
              ))}
            </div>

            {/* Spec-First, protects both sides */}
            <div style={{
              padding: '14px 18px',
              background: 'linear-gradient(135deg, rgba(0,217,160,0.07), rgba(139,92,246,0.04))',
              border: '1px solid rgba(0,217,160,0.32)', borderRadius: 9,
              display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20,
            }}>
              <span style={{
                width: 22, height: 22, borderRadius: 6,
                background: 'rgba(0,217,160,0.18)', border: '1px solid rgba(0,217,160,0.5)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: 'var(--accent-mint)', fontSize: 11, fontWeight: 700, flexShrink: 0,
                fontFamily: 'JetBrains Mono, monospace',
              }}>{'</>'}</span>
              <span style={{
                fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 500,
                color: 'var(--text-primary)', lineHeight: 1.5,
              }}>
                <span style={{ color: 'var(--accent-mint)', fontWeight: 600 }}>Spec-locked before code:</span>{' '}
                tech stack, scope, and price agreed in writing, no mid-build surprises.
              </span>
            </div>

            {/* Live status */}
            <div style={{
              padding: '12px 18px',
              background: 'var(--bg-tertiary)',
              border: '1px solid var(--border-subtle)', borderRadius: 8,
              display: 'inline-flex', alignItems: 'center', gap: 10,
            }}>
              <span style={{
                width: 6, height: 6, borderRadius: '50%',
                background: 'var(--accent-mint)', boxShadow: '0 0 6px var(--accent-mint)',
                animation: 'cta-blink 2s ease infinite',
              }} />
              <span style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                color: 'var(--text-secondary)', letterSpacing: '0.04em',
              }}>2 client slots open · Q3 2026 · usually replies in &lt; 24 hrs</span>
            </div>
          </div>

          {/* ── RIGHT: 2-field form ────────────────────────────────── */}
          <div style={{
            opacity: revealed ? 1 : 0, transform: revealed ? 'translateY(0)' : 'translateY(24px)',
            transition: 'all 0.6s cubic-bezier(0.16,1,0.3,1) 0.15s',
          }}>
            <form onSubmit={handleSubmit} style={{
              background: 'var(--bg-tertiary)',
              border: '1px solid var(--border-subtle)',
              borderRadius: 16, padding: '36px 32px',
              display: 'flex', flexDirection: 'column', gap: 18,
              boxShadow: '0 16px 48px rgba(0,0,0,0.18)',
            }}>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                color: 'var(--accent-mint-text)', letterSpacing: '0.08em', marginBottom: 4,
              }}>// 30 SECONDS · 2 FIELDS · STRAIGHT TO CALENDAR</div>

              <div>
                <label style={labelStyle}>Work email</label>
                <input type="email" placeholder="you@company.com" required
                  value={form.email}
                  onChange={e => setForm(s => ({...s, email: e.target.value}))}
                  style={inputBase}
                  onFocus={e => e.target.style.borderColor = 'var(--accent-mint)'}
                  onBlur={e => e.target.style.borderColor = 'var(--border-subtle)'}
                />
              </div>

              <div>
                <label style={labelStyle}>What's your biggest bottleneck right now?</label>
                <textarea placeholder="One sentence is fine. e.g. 'My team spends 4 hours a day on lead intake.'"
                  rows={4} required
                  value={form.bottleneck}
                  onChange={e => setForm(s => ({...s, bottleneck: e.target.value}))}
                  style={{...inputBase, resize: 'vertical', minHeight: 100, lineHeight: 1.5}}
                  onFocus={e => e.target.style.borderColor = 'var(--accent-mint)'}
                  onBlur={e => e.target.style.borderColor = 'var(--border-subtle)'}
                />
              </div>

              <button type="submit" disabled={sending} style={{
                padding: '15px 24px', background: 'var(--accent-mint)',
                color: '#0A0A0B', border: 'none', borderRadius: 9,
                fontSize: 15, fontWeight: 700, fontFamily: 'Inter, sans-serif',
                cursor: sending ? 'wait' : 'pointer', transition: 'all 0.2s ease',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                letterSpacing: '0.01em',
                opacity: sending ? 0.7 : 1,
              }}
              onMouseEnter={e => { if (!sending) { e.currentTarget.style.opacity = '0.9'; e.currentTarget.style.transform = 'translateY(-1px)'; } }}
              onMouseLeave={e => { if (!sending) { e.currentTarget.style.opacity = '1';   e.currentTarget.style.transform = 'translateY(0)'; } }}
              >
                {sending ? 'Opening calendar…' : 'Pick a time on the calendar →'}
              </button>

              <div style={{
                display: 'flex', alignItems: 'center', gap: 12,
                margin: '4px 0',
              }}>
                <div style={{ flex: 1, height: 1, background: 'var(--border-subtle)' }} />
                <span style={{
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
                  color: 'var(--text-tertiary)', letterSpacing: '0.1em',
                }}>OR</span>
                <div style={{ flex: 1, height: 1, background: 'var(--border-subtle)' }} />
              </div>

              <a href={CAL_URL} target="_blank" rel="noopener" style={{
                padding: '12px 22px', background: 'transparent',
                color: 'var(--text-secondary)',
                border: '1px solid var(--border-emphasis)', borderRadius: 9,
                fontSize: 13, fontWeight: 500, fontFamily: 'Inter, sans-serif',
                textDecoration: 'none', textAlign: 'center',
                transition: 'all 0.2s ease',
              }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--accent-mint)'; e.currentTarget.style.color = 'var(--text-primary)'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-emphasis)'; e.currentTarget.style.color = 'var(--text-secondary)'; }}
              >
                Skip the form, go straight to calendar
              </a>

              <p style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                color: 'var(--text-tertiary)', textAlign: 'center', marginTop: 4,
                letterSpacing: '0.04em',
              }}>No spam. No drip sequence. No pitch deck.</p>
            </form>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes cta-blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
        @media (max-width: 880px) { .cta-grid { grid-template-columns: 1fr !important; gap: 48px !important; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { FinalCTA });