// Multi-step modal — 3 steps + lead capture

const CARGO_OPTIONS = [
  "Founder/CEO",
  "CTO/Head de Tech",
  "CFO/Head Financeiro",
  "Head de Produto",
  "Diretor de Inovação",
  "Outro",
];

const SEGMENT_OPTIONS = [
  { id: "marketplace", label: "Marketplace / Plataforma" },
  { id: "saas",        label: "SaaS / Software" },
  { id: "varejo",      label: "Varejo / E-commerce" },
  { id: "educacao",    label: "Educação / Health / Serviços" },
  { id: "fintech",     label: "Fintech / Banking" },
  { id: "outro",       label: "Outro" },
];
const CLIENTES_OPTIONS = [
  { id: "<500",     label: "Menos de 500" },
  { id: "500-2k",   label: "500 a 2.000" },
  { id: "2k-10k",   label: "2.000 a 10.000" },
  { id: "10k-50k",  label: "10.000 a 50.000" },
  { id: "50k+",     label: "Mais de 50.000" },
];
const FATURAMENTO_OPTIONS = [
  { id: "<100k",       label: "Até R$ 100k" },
  { id: "100k-500k",   label: "R$ 100k a R$ 500k" },
  { id: "500k-2M",     label: "R$ 500k a R$ 2M" },
  { id: "2M-10M",      label: "R$ 2M a R$ 10M" },
  { id: "10M+",        label: "Mais de R$ 10M" },
];

function Chip({ selected, label, onClick }) {
  return (
    <button type="button" className={"chip" + (selected ? " selected" : "")} onClick={onClick}>
      <span className="check">
        <Icon name="check" size={11} stroke={2.6} style={{color:"#050F0A"}}/>
      </span>
      <span>{label}</span>
    </button>
  );
}

function ProductCard({ selected, product, onClick }) {
  return (
    <button type="button" className={"prod-card" + (selected ? " selected" : "")} onClick={onClick}>
      <div className="corner-check">
        <Icon name="check" size={13} stroke={2.6} style={{color:"#050F0A"}}/>
      </div>
      <div className="icon-chip">
        <Icon name={product.icon} size={18}/>
      </div>
      <div className="name">{product.name}</div>
      <div className="desc">{product.desc}</div>
    </button>
  );
}

// ---------- STEP 1: Business ----------
function Step1({ form, setForm }) {
  return (
    <div className="modal-step">
      <span className="eyebrow">Passo 1 de 3</span>
      <h3>Vamos calibrar pelo seu negócio</h3>
      <p className="helper">Três perguntas pra dimensionar a janela de receita. Nada é guardado — selecione e siga.</p>

      <div className="q-block">
        <div className="q-label"><span className="num">01</span> Segmento</div>
        <div className="q-title">Que tipo de negócio você tem?</div>
        <div className="chip-grid">
          {SEGMENT_OPTIONS.map(o => (
            <Chip key={o.id} selected={form.segmento === o.id} label={o.label}
                  onClick={() => setForm({...form, segmento: o.id})}/>
          ))}
        </div>
      </div>

      <div className="q-block">
        <div className="q-label"><span className="num">02</span> Tamanho da base</div>
        <div className="q-title">Quantos clientes ativos sua operação tem hoje?</div>
        <div className="chip-grid">
          {CLIENTES_OPTIONS.map(o => (
            <Chip key={o.id} selected={form.clientes === o.id} label={o.label}
                  onClick={() => setForm({...form, clientes: o.id})}/>
          ))}
        </div>
      </div>

      <div className="q-block">
        <div className="q-label"><span className="num">03</span> Faturamento</div>
        <div className="q-title">Qual seu faturamento mensal médio?</div>
        <div className="chip-grid">
          {FATURAMENTO_OPTIONS.map(o => (
            <Chip key={o.id} selected={form.faturamento === o.id} label={o.label}
                  onClick={() => setForm({...form, faturamento: o.id})}/>
          ))}
        </div>
      </div>
    </div>
  );
}

// ---------- STEP 2: Products ----------
function Step2({ form, setForm }) {
  const toggle = (pid) => {
    const has = form.produtos.includes(pid);
    const next = has ? form.produtos.filter(x => x !== pid) : [...form.produtos, pid];
    setForm({...form, produtos: next});
  };
  return (
    <div className="modal-step">
      <span className="eyebrow">Passo 2 de 3</span>
      <h3>Quais frentes financeiras fazem sentido?</h3>
      <p className="helper">Escolha quantas quiser, pelo menos uma. A gente calcula a receita potencial em cada uma separadamente.</p>

      <div className="prod-grid">
        {PRODUCTS.map(p => (
          <ProductCard key={p.id} product={p} selected={form.produtos.includes(p.id)} onClick={() => toggle(p.id)}/>
        ))}
      </div>
    </div>
  );
}

// ---------- Teaser animado Step 3 ----------
function CalcTeaser() {
  const [digits, setDigits] = React.useState("000.000,00");
  React.useEffect(() => {
    let frame;
    const chars = "0123456789";
    let tick = 0;
    const animate = () => {
      tick++;
      // gera número aleatório formatado que "parece" calculando
      const n = Math.floor(Math.random() * 9000000) + 100000;
      const fmt = n.toLocaleString("pt-BR", {minimumFractionDigits:2, maximumFractionDigits:2});
      setDigits(fmt);
      if (tick < 18) frame = setTimeout(animate, tick < 8 ? 60 : tick < 14 ? 100 : 180);
    };
    frame = setTimeout(animate, 300);
    return () => clearTimeout(frame);
  }, []);

  return (
    <div className="step3-teaser">
      <div className="step3-teaser-inner">
        <div className="step3-teaser-label">Seu potencial estimado</div>
        <div className="step3-teaser-num">
          R$ <span>{digits}</span>
        </div>
        <div className="step3-teaser-overlay">
          <Icon name="x" size={14} stroke={2}/> Complete o cadastro para liberar
        </div>
      </div>
    </div>
  );
}

// ---------- STEP 3: Lead capture ----------
function Step3({ form, setForm, errors, setErrors }) {
  // live validate email
  const onEmail = (e) => {
    const v = e.target.value;
    setForm({...form, email: v});
    if (errors.email) setErrors({...errors, email: undefined});
  };
  const onEmailBlur = () => {
    const v = form.email;
    if (!v) return;
    const r = validateEmail(v);
    if (!r.ok) {
      setErrors({...errors, email: r.kind});
    } else if (errors.email) {
      setErrors({...errors, email: undefined});
    }
  };
  const emailMsg = (() => {
    if (errors.email === "personal") return { type: "info", msg: "Use o e-mail da empresa — é pra você receber o diagnóstico com qualidade" };
    if (errors.email === "format") return { type: "err", msg: "E-mail inválido" };
    if (errors.email === "empty") return { type: "err", msg: "Preenche aí" };
    return null;
  })();

  return (
    <div className="modal-step">
      <CalcTeaser/>
      <span className="eyebrow" style={{marginTop:20}}>Quase lá · Ver resultado</span>
      <h3>Complete para liberar seu potencial</h3>
      <p className="helper">Preencha seus dados para ver o número. Um especialista SH entra em contato para transformar esse potencial em plano real.</p>

      <form id="form-calculadora-lead" name="form-calculadora-lead" className="form-grid" onSubmit={e => e.preventDefault()}>
        <div className="field">
          <label>Nome completo</label>
          <input
            type="text"
            placeholder="Como te chamam"
            value={form.nome}
            onChange={e => { setForm({...form, nome: e.target.value}); if(errors.nome) setErrors({...errors, nome: undefined}); }}
          />
          {errors.nome && <div className="err"><Icon name="alert" size={13}/> {errors.nome}</div>}
        </div>

        <div className="field">
          <label>E-mail corporativo</label>
          <input
            type="email"
            placeholder="voce@suaempresa.com"
            value={form.email}
            onChange={onEmail}
            onBlur={onEmailBlur}
            autoComplete="email"
          />
          {emailMsg && (
            emailMsg.type === "info"
              ? <div className="info"><Icon name="alert" size={13}/> {emailMsg.msg}</div>
              : <div className="err"><Icon name="alert" size={13}/> {emailMsg.msg}</div>
          )}
        </div>

        <div className="field-row">
          <div className="field">
            <label>WhatsApp</label>
            <div className="input-prefix-wrap">
              <span className="input-prefix">+55</span>
              <input
                type="tel"
                placeholder="(11) 99999-9999"
                value={form.whatsapp}
                onChange={e => { setForm({...form, whatsapp: maskPhone(e.target.value)}); if(errors.whatsapp) setErrors({...errors, whatsapp: undefined}); }}
              />
            </div>
            {errors.whatsapp && <div className="err"><Icon name="alert" size={13}/> {errors.whatsapp}</div>}
          </div>
          <div className="field">
            <label>Empresa</label>
            <input
              type="text"
              placeholder="Nome da empresa"
              value={form.empresa}
              onChange={e => { setForm({...form, empresa: e.target.value}); if(errors.empresa) setErrors({...errors, empresa: undefined}); }}
            />
            {errors.empresa && <div className="err"><Icon name="alert" size={13}/> {errors.empresa}</div>}
          </div>
        </div>

        <div className="field">
          <label>Cargo</label>
          <select
            value={form.cargo}
            onChange={e => { setForm({...form, cargo: e.target.value}); if(errors.cargo) setErrors({...errors, cargo: undefined}); }}
          >
            <option value="">Selecione…</option>
            {CARGO_OPTIONS.map(c => <option key={c} value={c}>{c}</option>)}
          </select>
          {errors.cargo && <div className="err"><Icon name="alert" size={13}/> {errors.cargo}</div>}
        </div>

        <label className="consent">
          <input
            type="checkbox"
            checked={form.consent}
            onChange={e => { setForm({...form, consent: e.target.checked}); if(errors.consent) setErrors({...errors, consent: undefined}); }}
          />
          <span className="cbox">
            <Icon name="check" size={11} stroke={2.6} style={{color:"#050F0A"}}/>
          </span>
          <span>Aceito receber o diagnóstico e o contato da SH Squads sobre o resultado.</span>
        </label>
        {errors.consent && <div className="err"><Icon name="alert" size={13}/> {errors.consent}</div>}
      </form>
    </div>
  );
}

// ---------- MODAL CONTAINER ----------
function CalcModal({ open, onClose, form, setForm, onSubmit }) {
  const [step, setStep] = React.useState(1);
  const [errors, setErrors] = React.useState({});

  // reset step when modal closes
  React.useEffect(() => {
    if (!open) { setStep(1); setErrors({}); }
  }, [open]);

  // ESC to close
  React.useEffect(() => {
    if (!open) return;
    const h = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [open, onClose]);

  if (!open) return null;

  const step1Done = !!form.segmento && !!form.clientes && !!form.faturamento;
  const step2Done = form.produtos.length >= 1;
  // step 3 form validity
  const emailRes = validateEmail(form.email);
  const step3Done =
    form.nome.trim().length >= 3 &&
    emailRes.ok &&
    isPhoneValid(form.whatsapp) &&
    form.empresa.trim().length >= 2 &&
    !!form.cargo &&
    !!form.consent;

  const progress = step === 1 ? 33 : step === 2 ? 66 : 100;

  const validateStep3 = () => {
    const errs = {};
    if (form.nome.trim().length < 3) errs.nome = "Preenche aí (mín. 3 chars)";
    const er = validateEmail(form.email);
    if (!er.ok) errs.email = er.kind;
    if (!isPhoneValid(form.whatsapp)) errs.whatsapp = "Número incompleto";
    if (form.empresa.trim().length < 2) errs.empresa = "Preenche aí";
    if (!form.cargo) errs.cargo = "Selecione um cargo";
    if (!form.consent) errs.consent = "É preciso aceitar pra liberar o resultado";
    setErrors(errs);
    return Object.keys(errs).length === 0;
  };

  const next = () => {
    if (step === 1 && step1Done) setStep(2);
    else if (step === 2 && step2Done) setStep(3);
    else if (step === 3) {
      if (validateStep3()) onSubmit();
    }
  };
  const back = () => { if (step > 1) setStep(step - 1); };

  const onBackdrop = (e) => { if (e.target === e.currentTarget) onClose(); };

  return (
    <div className="modal-backdrop" onClick={onBackdrop} role="dialog" aria-modal="true">
      <div className="modal">
        <div className="modal-head">
          <span className="step-label">Passo {step} de 3</span>
          <button className="close-btn" onClick={onClose} aria-label="Fechar">
            <Icon name="x" size={18}/>
          </button>
        </div>
        <div className="modal-progress" style={{"--p": progress + "%"}}></div>

        <div className="modal-body" key={step}>
          {step === 1 && <Step1 form={form} setForm={setForm}/>}
          {step === 2 && <Step2 form={form} setForm={setForm}/>}
          {step === 3 && <Step3 form={form} setForm={setForm} errors={errors} setErrors={setErrors}/>}
        </div>

        <div className="modal-foot">
          {step > 1 ? (
            <button className="btn btn--ghost" onClick={back}>
              <Icon name="chevron-left" size={16}/> Voltar
            </button>
          ) : <div className="meta">// 90 segundos · sem spam</div>}

          <button
            className="btn btn--primary btn--lg"
            onClick={next}
            disabled={
              (step === 1 && !step1Done) ||
              (step === 2 && !step2Done) ||
              (step === 3 && !step3Done)
            }
          >
            {step < 3 ? <>Próximo <span className="arr">→</span></> : <>Ver meu resultado <span className="arr">→</span></>}
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CalcModal });