// Section 4 — Prévia grátis. The conversion anchor. Dark split block,
// form left, before/after phone right. Fake submit → inline confirmation.
function PreviewForm() {
  const [sent, setSent] = React.useState(false);
  const ramos = ['Estética / beleza', 'Odontologia', 'Restaurante / food', 'Saúde / clínica', 'Serviços', 'Outro'];
  const field = {
    width: '100%', fontFamily: 'var(--font-ui)', fontSize: 15, color: 'var(--ink)',
    background: 'rgba(255,255,255,.06)', border: '1px solid rgba(255,255,255,.16)',
    borderRadius: 10, padding: '13px 15px', outline: 'none', color: '#fff',
  };
  const label = { fontSize: 13, fontWeight: 600, color: '#cdded7', marginBottom: 7, display: 'block' };
  const onSubmit = e => { e.preventDefault(); setSent(true); };
  return (
    <section id="previa" className="section" style={{ paddingTop: 0 }}>
      <div className="container">
        <Reveal>
          <div style={{ background: 'var(--ink)', borderRadius: 'var(--r-2xl)', padding: 'clamp(32px, 5vw, 64px)',
            position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', width: 420, height: 420, left: -120, top: -160,
              background: 'radial-gradient(circle, rgba(15,107,92,.55), transparent 64%)', filter: 'blur(20px)' }} />
            <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '1.1fr .9fr', gap: 48, alignItems: 'center', position: 'relative' }}>
              {/* form / confirmation */}
              <div>
                <span className="eyebrow" style={{ color: 'var(--mint)' }}>Sua prévia, grátis</span>
                <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(30px,3.6vw,46px)', lineHeight: 1.06, letterSpacing: '-.015em', color: '#fff', margin: '14px 0 0' }}>
                  Veja o seu site antes <span style={{ fontStyle: 'italic', color: 'var(--brand-300)' }}>de decidir.</span>
                </h2>
                <p style={{ fontSize: 16, lineHeight: 1.55, color: '#9fb3ab', margin: '14px 0 28px', maxWidth: '42ch' }}>
                  Preenche em 1 minuto. A gente faz a prévia e te manda em 24-48h, sem custo.
                </p>
                {sent ? <Confirmation /> : (
                  <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                    <div style={{ animation: 'fieldIn .5s var(--ease-out) both' }}>
                      <label style={label}>Nome do negócio *</label>
                      <input required style={field} placeholder="Ex: Studio Le'Âme" />
                    </div>
                    <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                      <div style={{ animation: 'fieldIn .5s var(--ease-out) .06s both' }}>
                        <label style={label}>Ramo</label>
                        <select style={{ ...field, appearance: 'none' }}>
                          {ramos.map(r => <option key={r} style={{ color: '#10241f' }}>{r}</option>)}
                        </select>
                      </div>
                      <div style={{ animation: 'fieldIn .5s var(--ease-out) .12s both' }}>
                        <label style={label}>Cidade / bairro</label>
                        <input style={field} placeholder="Água Verde, Curitiba" />
                      </div>
                    </div>
                    <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                      <div style={{ animation: 'fieldIn .5s var(--ease-out) .18s both' }}>
                        <label style={label}>@ do Instagram</label>
                        <input style={field} placeholder="@seunegocio" />
                      </div>
                      <div style={{ animation: 'fieldIn .5s var(--ease-out) .24s both' }}>
                        <label style={label}>WhatsApp *</label>
                        <input required style={field} placeholder="(41) 9 0000-0000" />
                      </div>
                    </div>
                    <button type="submit" className="btn btn-primary btn-lg shimmer" style={{ marginTop: 6, alignSelf: 'flex-start' }}>
                      Quero minha prévia grátis <Icon name="arrow" size={18} color="#fff" />
                    </button>
                    <span style={{ fontSize: 13, color: '#7d8f88' }}>Sem cartão, sem compromisso. A gente só te manda a prévia.</span>
                  </form>
                )}
              </div>
              {/* visual: before/after phone */}
              <div style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
                <BeforeAfter />
              </div>
            </div>
          </div>
        </Reveal>
      </div>
      <style>{`@keyframes fieldIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
        .shimmer { position: relative; overflow: hidden; }
        .shimmer::after { content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); transform:translateX(-120%); }
        .shimmer:hover::after { transform:translateX(120%); transition:transform .7s var(--ease-out); }
        select option { background:#fff; }`}</style>
    </section>
  );
}

function BeforeAfter() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
      {/* sad IG card */}
      <div style={{ width: 116, borderRadius: 18, overflow: 'hidden', background: '#1c2b27', border: '1px solid rgba(255,255,255,.1)', opacity: .7, transform: 'rotate(-4deg)' }}>
        <div style={{ height: 84, background: 'linear-gradient(150deg,#3a4d47,#26332f)' }} />
        <div style={{ padding: '10px 11px 14px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: '#8fa39c' }}><Icon name="instagram" size={13} color="#8fa39c" /><span style={{ fontSize: 10 }}>só Instagram</span></div>
          <div style={{ height: 5, width: '80%', background: 'rgba(255,255,255,.12)', borderRadius: 99, marginTop: 8 }} />
          <div style={{ height: 5, width: '55%', background: 'rgba(255,255,255,.12)', borderRadius: 99, marginTop: 5 }} />
        </div>
      </div>
      <Icon name="arrow" size={22} color="var(--brand-300)" />
      {/* happy site card */}
      <div className="levitate" style={{ width: 138, borderRadius: 20, overflow: 'hidden', background: '#fff', boxShadow: 'var(--shadow-lg)', transform: 'rotate(3deg)' }}>
        <div style={{ height: 90, background: 'linear-gradient(150deg,#cfe7df,#e9d9c2)', position: 'relative' }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 70% 30%, rgba(15,107,92,.25), transparent 60%)' }} />
        </div>
        <div style={{ padding: '11px 12px 15px' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 14, color: 'var(--ink-2)' }}>site no ar</div>
          <div style={{ height: 5, width: '70%', background: 'var(--line)', borderRadius: 99, marginTop: 8 }} />
          <div style={{ marginTop: 10, height: 22, borderRadius: 999, background: 'var(--brand)' }} />
        </div>
      </div>
    </div>
  );
}

function Confirmation() {
  return (
    <div style={{ background: 'rgba(255,255,255,.06)', border: '1px solid rgba(255,255,255,.16)', borderRadius: 18, padding: 28, display: 'flex', gap: 16, alignItems: 'flex-start' }}>
      <div style={{ flex: 'none', width: 46, height: 46, borderRadius: 999, background: 'var(--brand)', display: 'flex', alignItems: 'center', justifyContent: 'center', animation: 'pop .5s var(--ease-out) both' }}>
        <Icon name="check" size={24} color="#fff" stroke={2.4} />
      </div>
      <div>
        <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, color: '#fff', margin: '0 0 6px' }}>Recebido!</h3>
        <p style={{ margin: 0, fontSize: 15, lineHeight: 1.55, color: '#9fb3ab', maxWidth: '40ch' }}>
          Sua prévia já entrou na fila. A gente te manda no WhatsApp em até 48h — fica de olho.
        </p>
      </div>
      <style>{`@keyframes pop { 0%{transform:scale(0);opacity:0} 60%{transform:scale(1.15)} 100%{transform:scale(1);opacity:1} }`}</style>
    </div>
  );
}

window.PreviewForm = PreviewForm;