// Lead magnet form + Footer + Cookie banner + Floating WhatsApp + Toast

const LeadMagnet = ({ onSuccess }) => {
  const [form, setForm] = useState({ name: "", email: "", phone: "" });
  const [errors, setErrors] = useState({});
  const [state, setState] = useState("idle"); // idle | loading | success

  const validate = () => {
    const e = {};
    if (form.name.trim().length < 2) e.name = "Coloca seu nome completo";
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = "Email inválido";
    if (form.phone.replace(/\D/g, "").length < 10) e.phone = "Telefone com DDD";
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const submit = (ev) => {
    ev.preventDefault();
    if (!validate()) return;
    setState("loading");
    setTimeout(() => {
      setState("success");
      onSuccess && onSuccess();
    }, 1100);
  };

  return (
    <section id="checklist" className="lead">
      <style>{`
        .lead { background: var(--bg); }
        .lead-wrap {
          background: #fff;
          border: 1px solid var(--border);
          border-radius: var(--radius-lg);
          overflow: hidden;
          display: grid;
          grid-template-columns: 1fr;
        }
        @media (min-width: 980px) {
          .lead-wrap { grid-template-columns: 1.1fr 1fr; }
        }
        .lead-left { padding: clamp(28px, 5vw, 56px); }
        .lead-left h2 {
          font-size: clamp(30px, 4.4vw, 52px);
          line-height: 1.05;
          margin-top: 18px;
        }
        .lead-left p.lede {
          color: var(--ink-2);
          font-size: 16px;
          margin: 24px 0 32px;
          max-width: 46ch;
        }
        .lead-left ul {
          list-style: none; margin: 0; padding: 0;
          display: flex; flex-direction: column; gap: 12px;
        }
        .lead-left li {
          display: flex; gap: 10px; align-items: flex-start;
          font-size: 14px;
        }
        .lead-left li .check {
          width: 20px; height: 20px;
          border-radius: 50%;
          background: var(--soft);
          display: grid; place-items: center;
          flex: 0 0 auto;
          margin-top: 1px;
        }
        .lead-form-wrap {
          background: var(--soft);
          padding: clamp(28px, 5vw, 56px);
          display: flex; flex-direction: column; justify-content: center;
        }
        .lead-form { display: flex; flex-direction: column; gap: 16px; }
        .field label {
          display: block;
          font-family: var(--mono);
          font-size: 10.5px;
          letter-spacing: 0.16em;
          text-transform: uppercase;
          color: var(--ink-2);
          margin-bottom: 8px;
        }
        .field input {
          width: 100%;
          height: 52px;
          padding: 0 16px;
          background: #fff;
          border: 1px solid var(--border);
          border-radius: var(--radius);
          font-size: 15px;
          color: var(--ink);
          transition: border-color .2s;
        }
        .field input:focus {
          outline: none;
          border-color: var(--accent);
          box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent);
        }
        .field.error input { border-color: #B53A3A; }
        .field .err {
          font-size: 12px;
          color: #B53A3A;
          margin-top: 6px;
          display: flex; gap: 6px; align-items: center;
        }
        .lead-form .privacy {
          font-size: 11.5px;
          color: var(--ink-2);
          line-height: 1.5;
        }
        .lead-form button[type="submit"] {
          margin-top: 8px;
          width: 100%;
        }
        .success-state {
          text-align: center;
          padding: 24px 8px;
        }
        .success-state .icon-wrap {
          width: 64px; height: 64px;
          margin: 0 auto 18px;
          background: var(--accent);
          color: var(--accent-ink);
          border-radius: 50%;
          display: grid; place-items: center;
        }
        .success-state h3 { font-size: 28px; margin: 0 0 10px; }
        .success-state p { color: var(--ink-2); font-size: 14px; margin: 0; }
        .spin { animation: spin 1s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }
      `}</style>
      <div className="container">
        <div className="lead-wrap reveal">
          <div className="lead-left">
            <span className="eyebrow">06 / Lead Magnet</span>
            <h2>Checklist gratuito<br/><em style={{ fontStyle: "italic", color: "var(--accent)" }}>para brasileiros em Orlando.</em></h2>
            <p className="lede">
              68 itens que você precisa resolver nos primeiros 30 dias —
              do número de telefone à abertura da empresa. PDF de 14 páginas,
              direto no seu email.
            </p>
            <ul>
              <li><span className="check"><Icon name="check" size={11}/></span>Documentos que economizam US$ 1.200 em taxas</li>
              <li><span className="check"><Icon name="check" size={11}/></span>Bairros do Central FL ranqueados por idade dos filhos</li>
              <li><span className="check"><Icon name="check" size={11}/></span>5 erros que estouram seu orçamento de chegada</li>
            </ul>
          </div>
          <div className="lead-form-wrap">
            {state === "success" ? (
              <div className="success-state">
                <div className="icon-wrap"><Icon name="check" size={28} stroke={2}/></div>
                <h3>Confere seu email!</h3>
                <p>Mandei o checklist para <strong>{form.email}</strong>. Pode levar até 2 minutos.</p>
              </div>
            ) : (
              <form className="lead-form" onSubmit={submit} noValidate>
                <div className={`field ${errors.name ? "error" : ""}`}>
                  <label htmlFor="lead-name">Nome</label>
                  <input id="lead-name" type="text" placeholder="Como você se chama"
                    value={form.name}
                    onChange={(e) => setForm({ ...form, name: e.target.value })}
                  />
                  {errors.name && <div className="err"><Icon name="close" size={12}/> {errors.name}</div>}
                </div>
                <div className={`field ${errors.email ? "error" : ""}`}>
                  <label htmlFor="lead-email">Email</label>
                  <input id="lead-email" type="email" placeholder="seuemail@exemplo.com"
                    value={form.email}
                    onChange={(e) => setForm({ ...form, email: e.target.value })}
                  />
                  {errors.email && <div className="err"><Icon name="close" size={12}/> {errors.email}</div>}
                </div>
                <div className={`field ${errors.phone ? "error" : ""}`}>
                  <label htmlFor="lead-phone">Telefone (com DDD)</label>
                  <input id="lead-phone" type="tel" placeholder="+55 11 9 9999-9999"
                    value={form.phone}
                    onChange={(e) => setForm({ ...form, phone: e.target.value })}
                  />
                  {errors.phone && <div className="err"><Icon name="close" size={12}/> {errors.phone}</div>}
                </div>
                <button type="submit" className="btn btn-primary" disabled={state === "loading"}>
                  {state === "loading" ? (<><Icon name="loader" size={16}/> Enviando…</>) : (<>Baixar agora <Icon name="download" size={16}/></>)}
                </button>
                <p className="privacy">
                  Ao enviar, você concorda em receber emails do Curiosidade na América.
                  Cancele a qualquer momento. Seus dados estão protegidos pela LGPD.
                </p>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

const Footer = () => (
  <footer className="site-footer">
    <div className="container">
      <div className="row">
        <div>
          <div className="brand" style={{ color: "#fff" }}>
            <span className="brand-mark">CA</span>
            <span className="brand-text">
              Curiosidade<br/>na&nbsp;América
              <small>Por Júnior Costa</small>
            </span>
          </div>
          <p style={{ color: "rgba(255,255,255,0.6)", marginTop: 24, maxWidth: "38ch", fontSize: 14 }}>
            Bastidores, mentoria e indicações para quem quer construir uma vida nova nos EUA — sem perder o jeito brasileiro.
          </p>
        </div>
        <div>
          <h4>Navegação</h4>
          <ul>
            {NAV_ITEMS.map(n => <li key={n.id}><a href={`#${n.id}`}>{n.label}</a></li>)}
            <li><a href="#depoimentos">Depoimentos</a></li>
          </ul>
        </div>
        <div>
          <h4>Conteúdo</h4>
          <ul>
            <li><a href="#produtos">Curso Etsy</a></li>
            <li><a href="#produtos">Guia de sobrevivência</a></li>
            <li><a href="#checklist">Checklist gratuito</a></li>
            <li><a href="#impacto">Para empresas</a></li>
          </ul>
        </div>
        <div>
          <h4>Contato</h4>
          <ul>
            <li style={{ display: "flex", gap: 18, marginTop: 4 }}>
              <a href="#" aria-label="Instagram"><Icon name="instagram" size={20}/></a>
              <a href="#" aria-label="YouTube"><Icon name="youtube" size={20}/></a>
              <a href="#" aria-label="TikTok"><Icon name="tiktok" size={20}/></a>
              <a href={WHATSAPP_LINK} aria-label="WhatsApp"><Icon name="whatsapp" size={20}/></a>
            </li>
            <li style={{ marginTop: 14 }}>contato@curiosidadenaamerica.com</li>
            <li><a href={WHATSAPP_LINK} target="_blank" rel="noopener" style={{ color: "inherit" }}>+1 (689) 266-4002</a></li>
            <li>Orlando, FL · 2026</li>
          </ul>
        </div>
      </div>
      <div className="legal">
        <span>© 2026 Curiosidade na América · Todos os direitos reservados</span>
        <span style={{ display: "flex", gap: 18 }}>
          <a href="#">Política de privacidade</a>
          <a href="#">Termos de uso</a>
          <a href="#">LGPD</a>
        </span>
      </div>
    </div>
  </footer>
);

const FloatingWA = () => (
  <a href={WHATSAPP_LINK} target="_blank" rel="noopener" className="fab" aria-label="Falar no WhatsApp">
    <Icon name="whatsapp" size={28}/>
  </a>
);

const CookieBanner = () => {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const seen = (() => { try { return localStorage.getItem("cna_cookies"); } catch { return null; } })();
    if (!seen) {
      const t = setTimeout(() => setShow(true), 1500);
      return () => clearTimeout(t);
    }
  }, []);
  const dismiss = (val) => {
    try { localStorage.setItem("cna_cookies", val); } catch {}
    setShow(false);
  };
  if (!show) return null;
  return (
    <div className="cookie-banner" role="dialog" aria-label="Consentimento de cookies">
      <div>
        Usamos cookies para melhorar sua experiência e medir tráfego. Você decide.
      </div>
      <div className="actions">
        <button className="decline" onClick={() => dismiss("denied")}>Recusar</button>
        <button className="accept" onClick={() => dismiss("accepted")}>Aceitar</button>
      </div>
    </div>
  );
};

const Toast = ({ message, show }) => (
  <div className={`toast ${show ? "show" : ""}`} role="status" aria-live="polite">
    <span className="dot"></span>
    {message}
  </div>
);

window.LeadMagnet = LeadMagnet;
window.Footer = Footer;
window.FloatingWA = FloatingWA;
window.CookieBanner = CookieBanner;
window.Toast = Toast;