const { useState, useEffect, useRef } = React;

// ===== Lead capture form (used in hero + final CTA) =====
function LeadForm({ variant = "hero", title, sub, cta = "QUERO GERAR LEADS" }) {
  const [form, setForm] = useState({ nome: "", telefone: "", email: "" });
  const [errors, setErrors] = useState({});
  const [submitted, setSubmitted] = useState(false);

  const formatPhone = (v) => {
    const digits = v.replace(/\D/g, "").slice(0, 11);
    if (digits.length <= 2) return digits;
    if (digits.length <= 7) return `(${digits.slice(0, 2)}) ${digits.slice(2)}`;
    if (digits.length <= 10) return `(${digits.slice(0, 2)}) ${digits.slice(2, 6)}-${digits.slice(6)}`;
    return `(${digits.slice(0, 2)}) ${digits.slice(2, 7)}-${digits.slice(7)}`;
  };

  const onChange = (k, v) => {
    if (k === "telefone") v = formatPhone(v);
    setForm((f) => ({ ...f, [k]: v }));
    if (errors[k]) setErrors((e) => ({ ...e, [k]: null }));
  };

  const onSubmit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.nome.trim() || form.nome.trim().length < 3) errs.nome = "Informe seu nome completo.";
    const tDigits = form.telefone.replace(/\D/g, "");
    if (tDigits.length < 10) errs.telefone = "Telefone incompleto. Inclua DDD.";
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) errs.email = "E-mail inválido.";
    setErrors(errs);
    if (Object.keys(errs).length === 0) {
      setSubmitted(true);
    }
  };

  if (submitted) {
    return (
      <div className="form-card">
        <div className="form-success">
          <div className="form-success-mark">✓</div>
          <div className="form-success-h">PEDIDO RECEBIDO</div>
          <div className="form-success-sub">
            Obrigado, <strong style={{ color: 'var(--brand)' }}>{form.nome.split(' ')[0]}</strong>. Em até 24h um especialista da Leadys liga no <span className="mono">{form.telefone}</span> para desenhar o seu plano de captação.
          </div>
        </div>
      </div>);

  }

  return (
    <form className="form-card" onSubmit={onSubmit} noValidate data-leadys="true">
      <div className="form-eyebrow"><span className="form-eyebrow-dot"></span>RESPOSTA EM MENOS DE 24H</div>
      <h2 className="form-h">{title || "Receba leads qualificados ainda esta semana"}</h2>
      {sub && <p className="form-sub">{sub}</p>}

      <div className={"field" + (errors.nome ? " error" : "")}>
        <label htmlFor={`nome-${variant}`}>Nome completo</label>
        <input id={`nome-${variant}`} name="nome" type="text" placeholder="Como podemos te chamar?" value={form.nome} onChange={(e) => onChange("nome", e.target.value)} autoComplete="name" />
        {errors.nome && <span className="err">{errors.nome}</span>}
      </div>

      <div className={"field" + (errors.telefone ? " error" : "")}>
        <label htmlFor={`tel-${variant}`}>WhatsApp / telefone</label>
        <input id={`tel-${variant}`} name="telefone" type="tel" placeholder="(11) 99999-9999" value={form.telefone} onChange={(e) => onChange("telefone", e.target.value)} autoComplete="tel" inputMode="numeric" />
        {errors.telefone && <span className="err">{errors.telefone}</span>}
      </div>

      <div className={"field" + (errors.email ? " error" : "")}>
        <label htmlFor={`mail-${variant}`}>E-mail profissional</label>
        <input id={`mail-${variant}`} name="email" type="email" placeholder="seu@imobiliaria.com.br" value={form.email} onChange={(e) => onChange("email", e.target.value)} autoComplete="email" />
        {errors.email && <span className="err">{errors.email}</span>}
      </div>

      <button type="submit" className="btn btn-primary">{cta} <span>→</span></button>

      <div className="form-privacy">
        <span className="lock">⌧</span>
        <span>Seus dados são usados <strong style={{ color: 'var(--fg-2)' }}>apenas para te entregar leads</strong>. Nunca compartilhamos com terceiros. Privacidade total.</span>
      </div>
    </form>);

}

// ===== Top nav =====
function Nav() {
  return (
    <header className="nav">
      <div className="nav-inner">
        <a href="#top" className="nav-mark">
          <img src="assets/leadys-wordmark-clean.png" alt="Leadys" className="nav-wordmark" />
        </a>
        <nav className="nav-links">
          <a href="#como-funciona">Como funciona</a>
          <a href="#diferenciais">Diferenciais</a>
          <a href="#privacidade">Privacidade</a>
          <a href="#duvidas">Dúvidas</a>
        </nav>
        <div className="nav-actions">
          <a href="#form" className="btn btn-primary btn-sm">QUERO GERAR LEADS</a>
        </div>
      </div>
    </header>);

}

// ===== Hero =====
function Hero() {
  return (
    <section className="hero" id="form">
      <div className="hero-glow"></div>
      <div className="hero-trace"></div>
      <div className="hero-inner">
        <div className="hero-left">
          <div className="eyebrow" style={{ fontSize: "11px" }}><span className="eyebrow-dot"></span>INTELIGÊNCIA ARTIFICIAL · META ADS · GOOGLE ADS · LANDING PAGES</div>
          <h1 className="hero-h1">
            LEADS QUALIFICADOS<br />
            <span className="accent">NA SUA MÃO.</span>
          </h1>
          <p className="hero-sub">
            A Leadys é um ecossistema em constante atualização de <strong>geração e captação de leads qualificados para o setor imobiliário</strong>. Usamos Meta Ads, Google Ads e as ferramentas mais avançadas de IA e automação para que você só precise atender — e fechar.
          </p>
          <ul className="hero-bullets">
            <li><span className="check">✓</span><span><strong>Notificações em tempo real</strong> no seu celular quando o lead entra.</span></li>
            <li><span className="check">✓</span><span><strong>CRM personalizado</strong> incluso — leads na sua mão, sem valor adicional.</span></li>
            <li><span className="check">✓</span><span><strong>Privacidade total:</strong> não precisamos do seu acesso ao Facebook nem ao Google Ads.</span></li>
          </ul>
        </div>
        <div className="hero-right">
          <LeadForm variant="hero" title="Quero gerar leads agora" sub="Preencha agora! E um especialista liga pra você em alguns minutos." />
        </div>
      </div>
    </section>);

}

// ===== Stats band =====
function StatsBand() {
  return (
    <section className="stats-band">
      <div className="stats-trace"></div>
      <div className="stats-inner">
        <div className="stat"><div className="stat-val">+1.247</div><div className="stat-label">leads entregues / mês</div></div>
        <div className="stat"><div className="stat-val">R$ 4,82</div><div className="stat-label">custo médio por lead</div></div>
        <div className="stat"><div className="stat-val">38%</div><div className="stat-label">taxa de resposta média</div></div>
        <div className="stat"><div className="stat-val">24h</div><div className="stat-label">do contrato ao 1º lead</div></div>
      </div>
    </section>);

}