/* Mother's Day Lead Capture — Jaque Personal
   Single conversion goal: email capture in exchange for free guide.
   Mobile-first, 430px frame. */

const PINK = 'var(--jp-pink)';
const PINK_600 = 'var(--jp-pink-600)';
const PINK_50 = 'var(--jp-pink-50)';
const PINK_100 = 'var(--jp-pink-100)';
const GREEN = 'var(--jp-green)';
const INK = 'var(--jp-black)';
const SUBTLE = 'var(--fg-subtle)';
const MUTED = 'var(--fg-muted)';

/* ---------- TopBar ---------- */
function TopBar({ logoSrc }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '14px 20px', borderBottom: '1px solid var(--border)',
      background: '#fff',
    }}>
      <img src={logoSrc} alt="Jaque Personal" style={{ height: 30 }} />
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        fontSize: 11, fontWeight: 800, letterSpacing: '0.12em',
        textTransform: 'uppercase', color: PINK,
      }}>
        <i data-lucide="gift" style={{ width: 14, height: 14 }}></i>
        Dia das Mães
      </div>
    </div>
  );
}

/* ---------- Hero with form ---------- */
function Hero({ onSubmit }) {
  const [email, setEmail] = React.useState('');
  const [whats, setWhats] = React.useState('');

  return (
    <section style={{ padding: '32px 22px 36px', background: '#fff', position: 'relative', overflow: 'hidden' }}>
      {/* soft pink wash behind hero */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(120% 60% at 50% 0%, var(--jp-pink-50) 0%, #fff 60%)',
        pointerEvents: 'none',
      }} />
      <div style={{ position: 'relative' }}>
        {/* Pink pill */}
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          background: PINK, color: '#fff',
          padding: '7px 14px', borderRadius: 999,
          fontSize: 11, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase',
          boxShadow: 'var(--shadow-pink)',
        }}>
          <span>★</span> Dia das Mães · Mentoria Expressa
        </div>

        <h1 style={{
          fontFamily: "'Sora', system-ui, sans-serif",
          fontSize: 'clamp(36px, 9vw, 44px)',
          fontWeight: 800,
          lineHeight: 1.04,
          letterSpacing: '-0.03em',
          marginTop: 18,
          color: INK,
          textWrap: 'balance',
        }}>
          Mãe, comece hoje.<br/>
          Mesmo com <span style={{ color: PINK }}>15 minutos</span>.
        </h1>

        <p style={{
          fontSize: 16, lineHeight: 1.55, color: MUTED,
          marginTop: 16, maxWidth: 380,
        }}>
          Receba o guia gratuito <strong style={{ color: INK }}>"5 Hábitos Pra Voltar a Treinar Em Casa Sem Culpa"</strong> e ganhe um bônus especial de Dia das Mães.
        </p>

        {/* Form card */}
        <form
          onSubmit={(e) => { e.preventDefault(); onSubmit({ email, whats }); }}
          style={{
            marginTop: 24,
            background: '#fff',
            border: `2px solid ${INK}`,
            borderRadius: 20,
            padding: 18,
            boxShadow: 'var(--shadow-md)',
            display: 'grid', gap: 12,
          }}
        >
          <div>
            <label htmlFor="email" style={labelStyle}>Seu melhor e-mail</label>
            <input
              id="email" type="email" required
              value={email} onChange={(e) => setEmail(e.target.value)}
              placeholder="seu@email.com"
              style={inputStyle}
            />
          </div>
          <div>
            <label htmlFor="whats" style={labelStyle}>
              WhatsApp <span style={{ color: SUBTLE, fontWeight: 500 }}>(opcional, pra avisar do bônus)</span>
            </label>
            <input
              id="whats" type="tel"
              value={whats} onChange={(e) => setWhats(e.target.value)}
              placeholder="(11) 9 9999-9999"
              style={inputStyle}
            />
          </div>
          <button type="submit" className="btn btn-cta" style={{
            padding: '17px 18px', fontSize: 17, marginTop: 4,
            fontFamily: "'Sora', system-ui, sans-serif",
          }}>
            Quero meu guia gratuito →
          </button>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            fontSize: 12, color: SUBTLE,
          }}>
            <i data-lucide="lock" style={{ width: 12, height: 12 }}></i>
            Sem spam. Cancele quando quiser.
          </div>
        </form>
      </div>
    </section>
  );
}

const labelStyle = {
  display: 'block',
  fontSize: 13, fontWeight: 700,
  color: INK, marginBottom: 6,
};
const inputStyle = {
  width: '100%', boxSizing: 'border-box',
  padding: '14px 16px', borderRadius: 12,
  border: '1.5px solid var(--border-strong)',
  fontSize: 16, fontFamily: 'inherit', background: '#fff', outline: 'none',
  transition: 'border-color 140ms, box-shadow 220ms',
};

/* ---------- What you'll get ---------- */
function WhatYouGet() {
  const items = [
    { ic: 'file-text', t: 'Guia em PDF de leitura rápida', d: '10 páginas. Você lê no intervalo de qualquer coisa.' },
    { ic: 'clock', t: '5 hábitos práticos pra mãe com rotina cheia', d: 'Sem treino mirabolante. Coisa que cabe na sua semana.' },
    { ic: 'gift', t: 'Acesso preferencial à oferta de Dia das Mães', d: 'Você recebe primeiro, com condição especial só pra quem entrou na lista.' },
  ];
  return (
    <section style={{ padding: '40px 22px', background: 'var(--bg-soft)' }}>
      <div style={{
        fontSize: 11, fontWeight: 800, letterSpacing: '0.12em',
        textTransform: 'uppercase', color: PINK, marginBottom: 10,
      }}>
        O que vem no seu e-mail
      </div>
      <h2 style={{
        fontFamily: "'Sora', system-ui, sans-serif",
        fontSize: 26, fontWeight: 800, letterSpacing: '-0.02em',
        lineHeight: 1.15, color: INK, marginBottom: 24,
      }}>
        Três coisas pequenas que mudam sua semana.
      </h2>
      <div style={{ display: 'grid', gap: 14 }}>
        {items.map(i => (
          <div key={i.t} style={{
            display: 'flex', gap: 14, alignItems: 'flex-start',
            background: '#fff', border: '1px solid var(--border)',
            borderRadius: 16, padding: 16,
          }}>
            <div style={{
              width: 38, height: 38, borderRadius: '50%',
              background: 'var(--jp-green-100)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
            }}>
              <i data-lucide="check" style={{ width: 20, height: 20, color: GREEN, strokeWidth: 3 }}></i>
            </div>
            <div>
              <div style={{
                fontFamily: "'Sora', system-ui, sans-serif",
                fontSize: 16, fontWeight: 700, color: INK, lineHeight: 1.25,
                marginBottom: 4,
              }}>{i.t}</div>
              <div style={{ fontSize: 14, color: MUTED, lineHeight: 1.5 }}>{i.d}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- Who is this for ---------- */
function WhoFor() {
  return (
    <section style={{ padding: '40px 22px', background: '#fff' }}>
      <div style={{
        display: 'flex', alignItems: 'flex-start', gap: 18,
      }}>
        {/* circular photo placeholder */}
        <div style={{
          width: 92, height: 92, borderRadius: '50%',
          background: 'linear-gradient(135deg, var(--jp-pink-100), var(--jp-pink-50))',
          border: `2px solid ${PINK}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0, color: PINK_600, fontSize: 11, fontWeight: 700,
          textAlign: 'center', padding: 6, boxSizing: 'border-box',
          boxShadow: 'var(--shadow-sm)',
        }}>
          [ foto<br/>Jaque ]
        </div>
        <div style={{ flex: 1 }}>
          <div style={{
            fontSize: 11, fontWeight: 800, letterSpacing: '0.12em',
            textTransform: 'uppercase', color: PINK, marginBottom: 8,
          }}>
            Pra quem é
          </div>
          <h3 style={{
            fontFamily: "'Sora', system-ui, sans-serif",
            fontSize: 20, fontWeight: 800, letterSpacing: '-0.02em',
            lineHeight: 1.2, color: INK, marginBottom: 10,
          }}>
            Pra você que cuida de todo mundo e vive deixando você por último.
          </h3>
        </div>
      </div>
      <p style={{
        fontSize: 16, lineHeight: 1.6, color: MUTED, marginTop: 18,
      }}>
        Esse guia <strong style={{ color: INK }}>não é mais um treino aleatório</strong> da internet. É o caminho que cabe na sua vida real — mesmo nos dias em que você só tem 15 minutos antes da criança acordar.
      </p>
      <div style={{
        marginTop: 16, padding: '14px 16px',
        background: PINK_50, border: `1px solid ${PINK_100}`,
        borderRadius: 14,
        fontSize: 14, color: INK, lineHeight: 1.5,
      }}>
        <strong style={{ color: PINK_600 }}>"Eu fui mãe, eu travei, eu voltei.</strong> Esse guia é o passo a passo que eu queria ter tido."<br/>
        <span style={{ fontSize: 12, color: SUBTLE, fontWeight: 600, marginTop: 4, display: 'inline-block' }}>— Jaque, sua personal</span>
      </div>
    </section>
  );
}

/* ---------- Social proof + testimonials ---------- */
function Validation() {
  const tests = [
    { q: 'Em 12 semanas voltei a me reconhecer no espelho.', n: 'Marina', age: '34, mãe de 2' },
    { q: 'Treino na sala enquanto a Bia dorme. Mudou minha cabeça.', n: 'Carol', age: '29, mãe de 1' },
    { q: 'Achei que não ia conseguir. 4 meses depois, conseguindo.', n: 'Patrícia', age: '41, mãe de 3' },
  ];
  return (
    <section style={{ padding: '40px 22px', background: INK, color: '#fff' }}>
      <div style={{ textAlign: 'center', marginBottom: 28 }}>
        <div style={{
          fontFamily: "'Sora', system-ui, sans-serif",
          fontSize: 44, fontWeight: 800, letterSpacing: '-0.03em',
          lineHeight: 1, color: '#fff',
        }}>
          +12 mil
        </div>
        <div style={{
          fontSize: 14, color: '#d4d4d4', marginTop: 8, lineHeight: 1.5,
          maxWidth: 320, margin: '8px auto 0',
        }}>
          mulheres já transformaram seus corpos com o <strong style={{ color: '#fff' }}>Método Corpo Definido</strong>.
        </div>
        <div style={{
          marginTop: 14, color: PINK, fontSize: 16, letterSpacing: '0.2em',
        }}>★★★★★</div>
      </div>

      <div style={{ display: 'grid', gap: 10 }}>
        {tests.map(t => (
          <div key={t.n} style={{
            background: 'rgba(255,255,255,0.06)',
            border: '1px solid rgba(255,255,255,0.10)',
            borderRadius: 14, padding: '14px 16px',
            display: 'flex', alignItems: 'flex-start', gap: 12,
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: '50%',
              background: PINK_100, color: PINK_600,
              flexShrink: 0,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: "'Sora', system-ui, sans-serif", fontWeight: 800, fontSize: 14,
            }}>{t.n[0]}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 14, color: '#fff', lineHeight: 1.4 }}>
                "{t.q}"
              </div>
              <div style={{ fontSize: 12, color: '#a3a3a3', marginTop: 6, fontWeight: 600 }}>
                {t.n} · <span style={{ color: '#737373', fontWeight: 400 }}>{t.age}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- Final CTA (form repeat) ---------- */
function FinalCTA({ onSubmit }) {
  const [email, setEmail] = React.useState('');
  return (
    <section style={{
      padding: '48px 22px',
      background: 'linear-gradient(180deg, var(--jp-pink-50) 0%, #fff 100%)',
      textAlign: 'center',
    }}>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        fontSize: 11, fontWeight: 800, letterSpacing: '0.12em',
        textTransform: 'uppercase', color: PINK_600,
        background: PINK_100, padding: '6px 12px', borderRadius: 999,
        marginBottom: 16,
      }}>
        <span>★</span> Última chamada
      </div>
      <h2 style={{
        fontFamily: "'Sora', system-ui, sans-serif",
        fontSize: 32, fontWeight: 800, letterSpacing: '-0.03em',
        lineHeight: 1.05, color: INK, marginBottom: 12,
        textWrap: 'balance',
      }}>
        Lindona, esse momento é seu.
      </h2>
      <p style={{
        fontSize: 15, color: MUTED, lineHeight: 1.55,
        maxWidth: 340, margin: '0 auto 24px',
      }}>
        Coloca seu e-mail abaixo. Em até 1 minuto, o guia tá na sua caixa de entrada.
      </p>
      <form
        onSubmit={(e) => { e.preventDefault(); onSubmit({ email }); }}
        style={{ display: 'grid', gap: 10, textAlign: 'left', maxWidth: 360, margin: '0 auto' }}
      >
        <input
          type="email" required value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="seu@email.com"
          style={{ ...inputStyle, padding: '16px 18px', fontSize: 16, borderColor: INK }}
        />
        <button type="submit" className="btn btn-cta" style={{
          padding: '17px 18px', fontSize: 17,
          fontFamily: "'Sora', system-ui, sans-serif",
        }}>
          Receber meu guia agora →
        </button>
      </form>
      <div style={{
        marginTop: 18, display: 'inline-flex', alignItems: 'center', gap: 8,
        background: 'var(--jp-green-100)', color: 'var(--jp-green-700)',
        padding: '8px 14px', borderRadius: 999,
        fontSize: 13, fontWeight: 700,
      }}>
        <i data-lucide="mail-check" style={{ width: 16, height: 16 }}></i>
        Você vai receber o guia em até 1 minuto.
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer({ logoSrc }) {
  return (
    <footer style={{
      background: INK, color: '#a3a3a3',
      padding: '32px 24px', textAlign: 'center',
    }}>
      <img src={logoSrc} alt="Jaque Personal" style={{ height: 32, marginBottom: 14 }} />
      <div style={{ fontSize: 12, lineHeight: 1.7, maxWidth: 320, margin: '0 auto' }}>
        © 2026 Jaque Personal · Método Corpo Definido<br/>
        <a href="#" style={{ color: '#d4d4d4', fontWeight: 500 }}>Política de privacidade</a>
        {' · '}
        <a href="#" style={{ color: '#d4d4d4', fontWeight: 500 }}>Termos de uso</a>
      </div>
      <div style={{ fontSize: 11, color: '#737373', marginTop: 14, maxWidth: 320, margin: '14px auto 0', lineHeight: 1.6 }}>
        Resultados variam. Consulte um profissional de saúde antes de iniciar treinos.
      </div>
    </footer>
  );
}

/* ---------- Sticky CTA bar ---------- */
function StickyCTA({ visible, onClick }) {
  if (!visible) return null;
  return (
    <div style={{
      position: 'sticky', bottom: 0, zIndex: 50,
      background: 'rgba(255,255,255,0.94)',
      backdropFilter: 'blur(12px)',
      WebkitBackdropFilter: 'blur(12px)',
      borderTop: '1px solid var(--border)',
      padding: '12px 16px',
      display: 'flex', alignItems: 'center', gap: 12,
      animation: 'slideUp 240ms var(--ease-out)',
    }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontFamily: "'Sora', system-ui, sans-serif",
          fontWeight: 800, fontSize: 14, color: INK, lineHeight: 1.2,
        }}>
          Guia grátis · Dia das Mães
        </div>
        <div style={{ fontSize: 11, color: SUBTLE, marginTop: 2 }}>
          Receba em 1 minuto no seu e-mail
        </div>
      </div>
      <button onClick={onClick} className="btn btn-cta" style={{
        padding: '12px 18px', fontSize: 14,
        fontFamily: "'Sora', system-ui, sans-serif",
      }}>
        Quero o guia →
      </button>
    </div>
  );
}

/* ---------- Success state ---------- */
function SuccessState({ onReset }) {
  return (
    <section style={{
      padding: '64px 24px',
      textAlign: 'center', minHeight: '100vh',
      display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center',
      background: 'linear-gradient(180deg, var(--jp-pink-50) 0%, #fff 60%)',
    }}>
      <div style={{
        width: 88, height: 88, borderRadius: '50%',
        background: 'var(--jp-green-100)', border: `2px solid ${GREEN}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        marginBottom: 24,
        animation: 'pop 420ms var(--ease-spring)',
      }}>
        <i data-lucide="check" style={{ width: 44, height: 44, color: GREEN, strokeWidth: 3 }}></i>
      </div>
      <h2 style={{
        fontFamily: "'Sora', system-ui, sans-serif",
        fontSize: 32, fontWeight: 800, letterSpacing: '-0.03em',
        color: INK, marginBottom: 12, textWrap: 'balance',
      }}>
        Pronto, lindona!
      </h2>
      <p style={{
        fontSize: 16, color: MUTED, lineHeight: 1.55,
        maxWidth: 340, marginBottom: 24,
      }}>
        Seu guia tá voando pro seu e-mail. Confere a caixa de entrada (e o spam, só pra garantir).
      </p>
      <div style={{
        background: '#fff', border: `2px solid ${PINK}`,
        borderRadius: 16, padding: 18, maxWidth: 320,
        boxShadow: 'var(--shadow-md)',
      }}>
        <div style={{
          fontSize: 11, fontWeight: 800, letterSpacing: '0.12em',
          textTransform: 'uppercase', color: PINK, marginBottom: 6,
        }}>
          ★ Próximo passo
        </div>
        <div style={{
          fontFamily: "'Sora', system-ui, sans-serif",
          fontSize: 18, fontWeight: 700, color: INK, lineHeight: 1.25,
          marginBottom: 8,
        }}>
          Sua oferta de Dia das Mães já tá te esperando.
        </div>
        <a href="#" className="btn btn-pink" style={{
          width: '100%', padding: '14px', fontSize: 15, marginTop: 6,
          fontFamily: "'Sora', system-ui, sans-serif",
        }}>
          Ver oferta especial →
        </a>
      </div>
      <a href="#" onClick={(e) => { e.preventDefault(); onReset(); }} style={{
        marginTop: 20, fontSize: 13, color: SUBTLE, fontWeight: 500,
      }}>
        ← voltar
      </a>
    </section>
  );
}

Object.assign(window, {
  TopBar, Hero, WhatYouGet, WhoFor, Validation, FinalCTA, Footer, StickyCTA, SuccessState,
});