/* global React */
const { useState, useEffect, useMemo } = React;

/* =====================================================================
   EB-3 Eligibility Modal, official questionnaire
   ===================================================================== */
const EB3_UPSELL_URL = "https://calendar.app.google/QVx4S4pR5rj4NcEy6";
const EB3_SUBMIT_URL = "https://script.google.com/macros/s/AKfycbypMxXSHtVZtbijwCEf_tg63upF90wruoc_i69zuR1Q6fC6K-5Xo6kFfp4mT52mUOctAA/exec";

function EB3EligibilityModal({ onClose }) {
  const [step, setStep] = useState(0);
  const [submitting, setSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState("");
  const [data, setData] = useState({
    authorize: "",
    name: "", whatsapp: "", email: "", instagram: "",
    countryBirth: "", countryLive: "",
    enteredUs: "", outOfStatus: "", outOfStatus180: "", denied: "", deniedDetails: "",
    passport: "", usVisa: "",
    understandsEb3: "", availableSponsor: "",
    understandsInvestment: "", hasInvestment: "",
    eb3Priority: "", readiness: "", motivation: "",
    lgpd: false,
  });
  const total = 7;
  const update = (k, v) => setData((d) => ({ ...d, [k]: v }));

  const stepValid = useMemo(() => {
    if (step === 0) return !!data.authorize;
    if (step === 1) return data.name && validatePhone(data.whatsapp) && validateEmail(data.email) && data.countryBirth && data.countryLive && data.lgpd;
    if (step === 2) {
      if (!data.enteredUs || !data.outOfStatus || !data.denied) return false;
      if (data.outOfStatus === "Sim" && !data.outOfStatus180) return false;
      if (data.denied === "Sim" && !data.deniedDetails.trim()) return false;
      return true;
    }
    if (step === 3) return !!data.passport && !!data.usVisa;
    if (step === 4) return !!data.understandsEb3 && !!data.availableSponsor;
    if (step === 5) return !!data.understandsInvestment && !!data.hasInvestment;
    if (step === 6) return !!data.eb3Priority && !!data.readiness && data.motivation.trim().length > 10;
    return false;
  }, [step, data]);

  if (step >= total) {
    return (
      <Modal wide onClose={onClose}>
        <ModalHead stepper={<div className="t-overline">Formulário recebido</div>} onClose={onClose} />
        <div className="modal-body">
          <div className="flex items-center gap-3 mb-4">
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
              <circle cx="20" cy="20" r="20" fill="var(--c-terracota)" opacity="0.12" />
              <path d="M13 20.5l5 5L28 15" stroke="var(--c-terracota)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
            <h2 className="t-h2" style={{ margin: 0 }}>Recebido com sucesso</h2>
          </div>
          <p className="t-body mb-6">
            Sua resposta vai pra análise individual da Raísa. Se o seu perfil for compatível com as oportunidades disponíveis, a equipe entra em contato pelos canais que você informou.
          </p>

          <div style={{ height: 1, background: "var(--c-navy-12)", margin: "32px 0" }}></div>

          <div className="t-overline mb-3" style={{ color: "var(--c-terracota)" }}>Enquanto a Raísa analisa</div>
          <h3 className="t-h2 mb-4" style={{ fontSize: 28, lineHeight: 1.2 }}>
            Quer <span style={{ fontStyle: "italic", color: "var(--c-terracota)" }}>antecipar</span> a clareza sobre o seu caso?
          </h3>
          <p className="t-body mb-4">
            EB-3 é processo longo e o investimento é alto. Antes de esperar a triagem ou tomar decisões, vale considerar uma <strong style={{ fontWeight: 600 }}>Sessão Individual</strong> com a Raísa.
          </p>
          <p className="t-body mb-6">
            Em 60 minutos, ela olha pro seu cenário inteiro (não só EB-3) e te ajuda a entender se este é o melhor caminho pra você. Pra muita gente, a sessão revela uma rota mais rápida (Green Card por casamento, mudança de status, F-1) que economiza tempo e dinheiro.
          </p>

          <ul style={{ listStyle: "none", padding: 0, margin: "0 0 28px 0", display: "grid", gap: 10 }}>
            {[
              "Análise do seu cenário migratório completo",
              "Comparação entre EB-3 e alternativas reais pro seu perfil",
              "Custos, prazos e riscos com transparência",
              "Próximos passos concretos pra começar com segurança",
            ].map((d) => (
              <li key={d} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 14, lineHeight: 1.5, color: "var(--c-navy)" }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0, marginTop: 2 }}>
                  <circle cx="12" cy="12" r="10" fill="var(--c-terracota)" opacity="0.12" />
                  <path d="M8 12.5l2.5 2.5L16 9" stroke="var(--c-terracota)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
                <span>{d}</span>
              </li>
            ))}
          </ul>

          <div style={{ padding: "20px 24px", background: "var(--c-navy)", color: "var(--c-offwhite)", borderRadius: "var(--r-md)" }}>
            <div className="flex items-center justify-between gap-4" style={{ flexWrap: "wrap" }}>
              <div>
                <div style={{ fontFamily: "var(--ff-display)", fontSize: 20, fontWeight: 700, marginBottom: 4 }}>Sessão Individual com a Raísa</div>
                <div style={{ fontSize: 13, opacity: 0.78 }}>60 minutos · US$ 150 · Google Meet</div>
              </div>
              <a href={EB3_UPSELL_URL} target="_blank" rel="noopener noreferrer" className="btn btn--accent">
                Agendar agora
                <svg className="arrow" viewBox="0 0 16 16" fill="none">
                  <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div className="modal-foot">
          <span className="t-caption">Análise da triagem em até 7 dias úteis</span>
          <button className="btn btn--ghost" onClick={onClose}>Fechar</button>
        </div>
      </Modal>
    );
  }

  const submit = async () => {
    setSubmitError("");
    setSubmitting(true);
    const ok = await submitLead({ formType: "eb3", ...data, origin: "modal-eb3" });
    setSubmitting(false);
    if (ok) {
      setStep(total);
    } else {
      setSubmitError("Não consegui enviar agora. Verifica sua conexão e tenta de novo.");
    }
  };

  const next = () => {
    if (step === total - 1) submit();
    else setStep(step + 1);
  };
  const prev = () => setStep(Math.max(0, step - 1));

  return (
    <Modal wide onClose={onClose}>
      <ModalHead stepper={<Stepper total={total} current={step} />} onClose={onClose} />
      <div className="modal-body">
        <div className="t-overline mb-3" style={{ color: "var(--c-terracota)" }}>Elegibilidade EB-3</div>

        {step === 0 && (
          <StepBlock title="Antes de começar" subtitle="Este formulário é destinado a pessoas interessadas em participar de uma triagem para possíveis oportunidades de EB-3, especialmente na categoria Unskilled Worker. As informações serão analisadas para verificar se o seu perfil atende aos requisitos iniciais (elegibilidade imigratória, disponibilidade, documentação e capacidade de investimento). Caso compatível, entraremos em contato.">
            <div style={{ padding: "14px 16px", background: "var(--c-sand)", borderRadius: "var(--r-md)", fontSize: 13, lineHeight: 1.55, color: "var(--c-navy)", marginBottom: 16 }}>
              <strong style={{ fontWeight: 600 }}>Importante:</strong> o preenchimento deste formulário não garante aprovação, vaga, patrocínio, contratação, início de processo ou obtenção de Green Card. Cada caso será analisado individualmente.
            </div>
            <Field label="Você autoriza a nossa equipe a entrar em contato com você?">
              <div className="flex flex-col gap-3">
                {["Sim", "Não"].map((opt) => (
                  <OptionTile key={opt} label={opt} active={data.authorize === opt} onClick={() => update("authorize", opt)} />
                ))}
              </div>
            </Field>
          </StepBlock>
        )}

        {step === 1 && (
          <StepBlock title="Informações pessoais" subtitle="Como te encontramos pra dar retorno.">
            <div className="grid grid-2 gap-4">
              <Field label="Nome completo">
                <input className="input" value={data.name} onChange={(e) => update("name", e.target.value)} placeholder="Seu nome" />
              </Field>
              <Field label="WhatsApp (com código do país)">
                <input className="input" value={data.whatsapp} onChange={(e) => update("whatsapp", e.target.value)} placeholder="+55 11 99999-9999" />
              </Field>
            </div>
            <Field label="E-mail" className="mt-4">
              <input className="input" value={data.email} onChange={(e) => update("email", e.target.value)} placeholder="seu@email.com" />
            </Field>
            <Field label="Instagram (opcional)" className="mt-4">
              <input className="input" value={data.instagram} onChange={(e) => update("instagram", e.target.value)} placeholder="@seuusuario" />
            </Field>
            <div className="grid grid-2 gap-4 mt-4">
              <Field label="País de nascimento">
                <input className="input" value={data.countryBirth} onChange={(e) => update("countryBirth", e.target.value)} placeholder="Ex: Brasil" />
              </Field>
              <Field label="País onde mora atualmente">
                <select className="select" value={data.countryLive} onChange={(e) => update("countryLive", e.target.value)}>
                  <option value="">Selecione…</option>
                  <option value="Estados Unidos">Estados Unidos</option>
                  <option value="Brasil">Brasil</option>
                </select>
              </Field>
            </div>
            <LgpdCheckbox checked={data.lgpd} onChange={(v) => update("lgpd", v)} />
          </StepBlock>
        )}

        {step === 2 && (
          <StepBlock title="Histórico nos Estados Unidos" subtitle="Esses pontos definem quais caminhos de EB-3 estão abertos pro seu caso.">
            <Field label="Você já entrou nos EUA?">
              <div className="flex flex-col gap-3">
                {["Sim", "Não"].map((opt) => (
                  <OptionTile key={opt} label={opt} active={data.enteredUs === opt} onClick={() => update("enteredUs", opt)} />
                ))}
              </div>
            </Field>
            <Field label="Você já ficou fora de status nos EUA (ultrapassou o tempo de permanência do visto)?" className="mt-6">
              <div className="flex flex-col gap-3">
                {["Sim", "Não"].map((opt) => (
                  <OptionTile key={opt} label={opt} active={data.outOfStatus === opt} onClick={() => update("outOfStatus", opt)} />
                ))}
              </div>
            </Field>
            {data.outOfStatus === "Sim" && (
              <Field label="Foi por mais de 180 dias?" className="mt-6">
                <div className="flex flex-col gap-3">
                  {["Sim", "Não"].map((opt) => (
                    <OptionTile key={opt} label={opt} active={data.outOfStatus180 === opt} onClick={() => update("outOfStatus180", opt)} />
                  ))}
                </div>
              </Field>
            )}
            <Field label="Você já teve algum visto negado, processo negado ou problema imigratório?" className="mt-6">
              <div className="flex flex-col gap-3">
                {["Sim", "Não"].map((opt) => (
                  <OptionTile key={opt} label={opt} active={data.denied === opt} onClick={() => update("denied", opt)} />
                ))}
              </div>
            </Field>
            {data.denied === "Sim" && (
              <Field label="Explique com o máximo de detalhes possível" className="mt-6">
                <textarea className="textarea" value={data.deniedDetails} onChange={(e) => update("deniedDetails", e.target.value)} placeholder="Quando, qual visto/processo, motivo da negativa…" style={{ minHeight: 120 }} />
              </Field>
            )}
          </StepBlock>
        )}

        {step === 3 && (
          <StepBlock title="Documentos essenciais">
            <Field label="Você possui passaporte válido?">
              <div className="flex flex-col gap-3">
                {["Sim", "Não", "Está vencido, mas posso renovar"].map((opt) => (
                  <OptionTile key={opt} label={opt} active={data.passport === opt} onClick={() => update("passport", opt)} />
                ))}
              </div>
            </Field>
            <Field label="Você possui visto americano válido ou já teve visto americano?" className="mt-6">
              <div className="flex flex-col gap-3">
                {["Sim, válido", "Sim, mas vencido", "Nunca tive visto americano"].map((opt) => (
                  <OptionTile key={opt} label={opt} active={data.usVisa === opt} onClick={() => update("usVisa", opt)} />
                ))}
              </div>
            </Field>
          </StepBlock>
        )}

        {step === 4 && (
          <StepBlock title="Disponibilidade pro EB-3" subtitle="EB-3 é Green Card baseado em oferta real de emprego.">
            <Field label="Você entende que o EB-3 é um processo de Green Card baseado em uma oferta real de emprego?">
              <div className="flex flex-col gap-3">
                {["Sim", "Não", "Tenho dúvidas"].map((opt) => (
                  <OptionTile key={opt} label={opt} active={data.understandsEb3 === opt} onClick={() => update("understandsEb3", opt)} />
                ))}
              </div>
            </Field>
            <Field label="Você teria disponibilidade para trabalhar para o sponsor após receber autorização/Green Card, conforme exigido pelo processo?" className="mt-6">
              <div className="flex flex-col gap-3">
                {["Sim", "Não"].map((opt) => (
                  <OptionTile key={opt} label={opt} active={data.availableSponsor === opt} onClick={() => update("availableSponsor", opt)} />
                ))}
              </div>
            </Field>
          </StepBlock>
        )}

        {step === 5 && (
          <StepBlock title="Investimento e momento financeiro" subtitle="O processo EB-3 envolve custos legais que são repassados ao aplicante por lei.">
            <Field label="Você entende que o processo EB-3 exige investimento financeiro em dólar?">
              <div className="flex flex-col gap-3">
                {["Sim", "Não"].map((opt) => (
                  <OptionTile key={opt} label={opt} active={data.understandsInvestment === opt} onClick={() => update("understandsInvestment", opt)} />
                ))}
              </div>
            </Field>
            <Field label="Você possui o investimento necessário para iniciar o processo caso seja aprovado(a) na triagem?" className="mt-6">
              <div className="flex flex-col gap-3">
                {[
                  "Sim, tenho o valor disponível para iniciar agora",
                  "Tenho parte do valor",
                  "Não tenho o valor agora, mas estou me planejando",
                  "Não sei qual é o valor necessário",
                ].map((opt) => (
                  <OptionTile key={opt} label={opt} active={data.hasInvestment === opt} onClick={() => update("hasInvestment", opt)} />
                ))}
              </div>
            </Field>
          </StepBlock>
        )}

        {step === 6 && (
          <StepBlock title="Nível de interesse" subtitle="Pra entender em que momento da jornada você está.">
            <Field label="O EB-3 é hoje para você:">
              <div className="flex flex-col gap-3">
                {[
                  "Minha prioridade principal para conseguir o Green Card",
                  "Uma possibilidade que estou analisando",
                  "Apenas curiosidade",
                  "Ainda não entendo bem o processo",
                ].map((opt) => (
                  <OptionTile key={opt} label={opt} active={data.eb3Priority === opt} onClick={() => update("eb3Priority", opt)} />
                ))}
              </div>
            </Field>
            <Field label="Em uma escala de 1 a 5, o quanto você está pronto(a) para iniciar?" className="mt-6">
              <div className="flex flex-col gap-3">
                {[
                  "1. Estou apenas pesquisando",
                  "2. Tenho interesse, mas ainda não estou preparado(a)",
                  "3. Estou me planejando financeiramente",
                  "4. Tenho quase tudo pronto e quero entender os próximos passos",
                  "5. Estou pronto(a) para iniciar agora se for aprovado(a) na triagem",
                ].map((opt) => (
                  <OptionTile key={opt} label={opt} active={data.readiness === opt} onClick={() => update("readiness", opt)} />
                ))}
              </div>
            </Field>
            <Field label="Explique brevemente por que você deseja aplicar para o EB-3 e qual é o seu objetivo nos Estados Unidos:" className="mt-6">
              <textarea className="textarea" value={data.motivation} onChange={(e) => update("motivation", e.target.value)} placeholder="Conta um pouco do seu motivo, situação atual e o que você quer construir nos EUA…" style={{ minHeight: 140 }} />
            </Field>
          </StepBlock>
        )}
      </div>
      {submitError && (
        <div style={{ padding: "10px 24px", background: "rgba(199,95,56,0.08)", borderTop: "1px solid var(--c-terracota)", color: "var(--c-terracota)", fontSize: 13 }}>
          {submitError}
        </div>
      )}
      <div className="modal-foot">
        <button className="btn btn--ghost" onClick={prev} disabled={step === 0 || submitting} style={{ opacity: step === 0 || submitting ? 0.4 : 1 }}>Voltar</button>
        <div className="flex gap-3 items-center">
          <span className="t-caption">{step + 1} de {total}</span>
          <button className="btn btn--primary" onClick={next} disabled={!stepValid || submitting} style={{ opacity: stepValid && !submitting ? 1 : 0.4 }}>
            {submitting ? "Enviando..." : (step === total - 1 ? "Enviar formulário" : "Continuar")}
            {!submitting && (
              <svg className="arrow" viewBox="0 0 16 16" fill="none">
                <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            )}
          </button>
        </div>
      </div>
    </Modal>
  );
}

/* =====================================================================
   Agenda Modal, book appointment
   ===================================================================== */
const AGENDA_URL = "https://calendar.app.google/rBuBEPS7MWZTcVcdA";
const AGENDA_DELIVERABLES = [
  "Análise do seu status atual",
  "Caminho migratório recomendado pro seu caso",
  "Próximos passos com prazos realistas",
  "Custos estimados do processo",
  "Erros comuns que travam aplicações",
];
const AGENDA_TOPICS = [
  "Green Card por casamento",
  "EB-3",
  "Mudança de status",
  "Vida pós-Au Pair",
  "Vistos consulares (F-1, J-1, B1/B2)",
  "Renovação de Green Card",
  "Cidadania americana",
];

function AgendaModal({ onClose }) {
  const open = () => { window.open(AGENDA_URL, "_blank", "noopener"); onClose(); };

  return (
    <Modal onClose={onClose}>
      <ModalHead onClose={onClose} />
      <div className="modal-body">
        <div className="t-overline mb-3" style={{ color: "var(--c-terracota)" }}>Agendar com a Raísa</div>
        <h3 className="t-h2 mb-4">Immigration Assistance</h3>
        <p className="t-body t-soft mb-6" style={{ maxWidth: 520 }}>
          Reunião individual com a Raísa pra avaliar o seu cenário, te orientar tecnicamente e definir o caminho migratório que faz sentido pra você.
        </p>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 24 }}>
          <div style={{ padding: "18px 20px", background: "var(--c-offwhite-warm)", borderRadius: "var(--r-md)", border: "1px solid var(--c-navy-12)" }}>
            <div className="t-overline" style={{ fontSize: 10, marginBottom: 6 }}>Duração</div>
            <div style={{ fontFamily: "var(--ff-display)", fontSize: 22, fontWeight: 700, color: "var(--c-navy)" }}>60 minutos</div>
          </div>
          <div style={{ padding: "18px 20px", background: "var(--c-offwhite-warm)", borderRadius: "var(--r-md)", border: "1px solid var(--c-navy-12)" }}>
            <div className="t-overline" style={{ fontSize: 10, marginBottom: 6 }}>Investimento</div>
            <div style={{ fontFamily: "var(--ff-display)", fontSize: 22, fontWeight: 700, color: "var(--c-navy)" }}>US$ 150,00</div>
          </div>
        </div>

        <div className="t-overline mb-3" style={{ fontSize: 11 }}>O que você sai sabendo</div>
        <ul style={{ listStyle: "none", padding: 0, margin: "0 0 20px 0", display: "grid", gap: 10 }}>
          {AGENDA_DELIVERABLES.map((d) => (
            <li key={d} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 14, lineHeight: 1.5, color: "var(--c-navy)" }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0, marginTop: 2 }}>
                <circle cx="12" cy="12" r="10" fill="var(--c-terracota)" opacity="0.12" />
                <path d="M8 12.5l2.5 2.5L16 9" stroke="var(--c-terracota)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
              <span>{d}</span>
            </li>
          ))}
        </ul>

        <div className="t-small mb-6" style={{ color: "var(--c-charcoal)", opacity: 0.7, fontSize: 12, lineHeight: 1.5 }}>
          <strong style={{ fontWeight: 600 }}>Cenários atendidos:</strong> {AGENDA_TOPICS.join(" · ")}
        </div>

        <div style={{ padding: "14px 16px", background: "var(--c-sand)", borderRadius: "var(--r-md)", display: "flex", gap: 12, alignItems: "flex-start", marginBottom: 8 }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0, marginTop: 2 }}>
            <rect x="3" y="5" width="18" height="16" rx="2" stroke="var(--c-navy)" strokeWidth="1.5"/>
            <path d="M3 9h18M8 3v4M16 3v4" stroke="var(--c-navy)" strokeWidth="1.5" strokeLinecap="round"/>
          </svg>
          <div style={{ fontSize: 13, lineHeight: 1.55, color: "var(--c-navy)" }}>
            O link da videochamada (Google Meet) é adicionado automaticamente após a reserva. Você escolhe data e horário direto na próxima etapa.
          </div>
        </div>
      </div>
      <div className="modal-foot">
        <button className="btn btn--ghost" onClick={onClose}>Cancelar</button>
        <button className="btn btn--accent" onClick={open}>
          Ver horários disponíveis
          <svg className="arrow" viewBox="0 0 16 16" fill="none">
            <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
      </div>
    </Modal>
  );
}

function _AgendaModal_OLD_UNUSED({ onClose }) {
  const [step, setStep] = useState(0);
  const [data, setData] = useState({ duration: "", date: "", time: "", name: "", email: "", whatsapp: "", topic: "", lgpd: false });
  const total = 4;
  const update = (k, v) => setData((d) => ({ ...d, [k]: v }));
  const stepValid = useMemo(() => {
    if (step === 0) return !!data.duration;
    if (step === 1) return !!data.date && !!data.time;
    if (step === 2) return data.name && validateEmail(data.email) && validatePhone(data.whatsapp) && data.lgpd;
    return true;
  }, [step, data]);
  if (step >= total) {
    return <SuccessModal onClose={onClose} title="Conversa agendada" body={`Marcamos pra ${formatDate(data.date)} às ${data.time}.`} />;
  }
  const weekdays = useMemo(() => {
    const days = [];
    let d = new Date();
    d.setHours(0, 0, 0, 0);
    while (days.length < 14) {
      d.setDate(d.getDate() + 1);
      const day = d.getDay();
      if (day !== 0 && day !== 6) days.push(new Date(d));
    }
    return days;
  }, []);

  const timeSlots = ["09:00", "10:30", "13:00", "14:30", "16:00"];

  const next = () => setStep(step + 1);
  const prev = () => setStep(Math.max(0, step - 1));

  return (
    <Modal wide onClose={onClose}>
      <ModalHead stepper={<Stepper total={total} current={step} />} onClose={onClose} />
      <div className="modal-body">
        <div className="t-overline mb-3">Agendar com a Raísa</div>
        {step === 0 && (
          <StepBlock title="Que tipo de conversa você quer marcar?">
            <DurationOption
              active={data.duration === "30min"}
              onClick={() => update("duration", "30min")}
              title="Conversa inicial · 30 minutos"
              desc="Pra quem está começando e quer entender se tem caminho. Você me conta seu cenário, eu te oriento sobre os próximos passos."
              tag="Gratuito"
            />
            <DurationOption
              active={data.duration === "60min"}
              onClick={() => update("duration", "60min")}
              title="Análise técnica · 60 minutos"
              desc="Pra quem já decidiu seguir e quer um plano detalhado: categoria migratória, cronograma, documentação, riscos e investimento."
              tag="Investimento aplicado no contrato"
            />
          </StepBlock>
        )}
        {step === 1 && (
          <StepBlock title="Escolhe um horário" subtitle="Horários de Brasília · à distância (videochamada)">
            <div>
              <div className="t-overline mb-3" style={{ fontSize: 11 }}>Data</div>
              <div className="flex gap-2" style={{ overflowX: "auto", paddingBottom: 8 }}>
                {weekdays.map((d) => {
                  const iso = d.toISOString().slice(0, 10);
                  const active = data.date === iso;
                  return (
                    <button
                      key={iso}
                      className="day-btn"
                      onClick={() => update("date", iso)}
                      style={{
                        minWidth: 64, padding: "10px 8px",
                        border: "1px solid " + (active ? "var(--c-navy)" : "var(--c-navy-12)"),
                        borderRadius: "var(--r-md)",
                        background: active ? "var(--c-navy)" : "var(--c-offwhite)",
                        color: active ? "var(--c-offwhite)" : "var(--c-navy)",
                        cursor: "pointer",
                        fontFamily: "var(--ff-sans)",
                        transition: "all 0.2s",
                      }}
                    >
                      <div style={{ fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", opacity: 0.75 }}>
                        {["DOM","SEG","TER","QUA","QUI","SEX","SAB"][d.getDay()]}
                      </div>
                      <div style={{ fontSize: 18, fontWeight: 600, fontFamily: "var(--ff-display)", marginTop: 4 }}>
                        {d.getDate()}
                      </div>
                      <div style={{ fontSize: 10, opacity: 0.65 }}>
                        {d.toLocaleString("pt-BR", { month: "short" }).replace(".", "")}
                      </div>
                    </button>
                  );
                })}
              </div>
            </div>
            {data.date && (
              <div className="mt-6">
                <div className="t-overline mb-3" style={{ fontSize: 11 }}>Horário</div>
                <div className="flex gap-2" style={{ flexWrap: "wrap" }}>
                  {timeSlots.map((t) => {
                    const active = data.time === t;
                    return (
                      <button key={t} onClick={() => update("time", t)}
                        style={{
                          padding: "10px 18px",
                          border: "1px solid " + (active ? "var(--c-navy)" : "var(--c-navy-12)"),
                          borderRadius: "var(--r-pill)",
                          background: active ? "var(--c-navy)" : "var(--c-offwhite)",
                          color: active ? "var(--c-offwhite)" : "var(--c-navy)",
                          cursor: "pointer",
                          fontSize: 14, fontFamily: "var(--ff-sans)", fontWeight: 500,
                          transition: "all 0.2s",
                        }}>
                        {t}
                      </button>
                    );
                  })}
                </div>
              </div>
            )}
          </StepBlock>
        )}
        {step === 2 && (
          <StepBlock title="Pra confirmar a chamada">
            <div className="grid grid-2 gap-4">
              <Field label="Nome completo">
                <input className="input" value={data.name} onChange={(e) => update("name", e.target.value)} placeholder="Seu nome" />
              </Field>
              <Field label="WhatsApp">
                <input className="input" value={data.whatsapp} onChange={(e) => update("whatsapp", e.target.value)} placeholder="+55 11 99999-9999" />
              </Field>
            </div>
            <Field label="E-mail" className="mt-4">
              <input className="input" value={data.email} onChange={(e) => update("email", e.target.value)} placeholder="seu@email.com" />
            </Field>
            <Field label="Sobre o que você quer falar?" className="mt-4">
              <textarea className="textarea" value={data.topic} onChange={(e) => update("topic", e.target.value)} placeholder="Conta o que está em mente, me ajuda a chegar preparada na conversa." />
            </Field>
            <LgpdCheckbox checked={data.lgpd} onChange={(v) => update("lgpd", v)} />
          </StepBlock>
        )}
        {step === 3 && (
          <StepBlock title="Confirmar agendamento">
            <div className="card card--sand">
              <SummaryRow label="Tipo" value={data.duration === "30min" ? "Conversa inicial · 30 min · Gratuito" : "Análise técnica · 60 min"} />
              <SummaryRow label="Data" value={formatDate(data.date)} />
              <SummaryRow label="Horário" value={data.time + " (horário de Brasília)"} />
              <SummaryRow label="Formato" value="Videochamada" />
              <SummaryRow label="Para" value={data.name} />
              <SummaryRow label="WhatsApp" value={data.whatsapp} />
              <SummaryRow label="E-mail" value={data.email} />
            </div>
            <p className="t-small t-soft mt-4">
              Você vai receber um e-mail de confirmação com o link da chamada e um lembrete 24h antes.
            </p>
          </StepBlock>
        )}
      </div>
      <div className="modal-foot">
        <button className="btn btn--ghost" onClick={prev} disabled={step === 0} style={{ opacity: step === 0 ? 0.4 : 1 }}>Voltar</button>
        <button className="btn btn--accent" onClick={next} disabled={!stepValid} style={{ opacity: stepValid ? 1 : 0.4 }}>
          {step === total - 1 ? "Confirmar agendamento" : "Continuar"}
          <svg className="arrow" viewBox="0 0 16 16" fill="none">
            <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
      </div>
    </Modal>
  );
}

/* =====================================================================
   Equipe Modal, direct contact with team
   ===================================================================== */
function EquipeModal({ onClose }) {
  const [data, setData] = useState({ name: "", email: "", subject: "", message: "", lgpd: false });
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const update = (k, v) => setData((d) => ({ ...d, [k]: v }));
  const valid = data.name && validateEmail(data.email) && data.subject && data.message.length > 10 && data.lgpd;
  const handleSubmit = async () => {
    if (!valid || sending) return;
    setSending(true);
    await submitLead({ formType: "equipe", ...data, origin: "modal-equipe" });
    setSending(false);
    setSent(true);
  };

  if (sent) return <SuccessModal onClose={onClose} title="Mensagem enviada à equipe" body="A equipe da Moura Immigration vai te responder por e-mail em até 24h úteis." />;

  return (
    <Modal onClose={onClose}>
      <ModalHead stepper={<div className="t-overline">Falar com a equipe</div>} onClose={onClose} />
      <div className="modal-body">
        <h2 className="t-h2 mb-3">Equipe Moura Immigration</h2>
        <p className="t-body t-soft mb-6">
          Canal direto com a equipe da Moura Immigration. Pra primeiras dúvidas sobre serviços, parcerias, imprensa ou questões administrativas. A equipe te orienta sobre o próximo passo do seu caso.
        </p>
        <Field label="Nome">
          <input className="input" value={data.name} onChange={(e) => update("name", e.target.value)} placeholder="Seu nome" />
        </Field>
        <Field label="E-mail" className="mt-4">
          <input className="input" value={data.email} onChange={(e) => update("email", e.target.value)} placeholder="seu@email.com" />
        </Field>
        <Field label="Assunto" className="mt-4">
          <select className="select" value={data.subject} onChange={(e) => update("subject", e.target.value)}>
            <option value="">Selecione…</option>
            <option value="duvida">Dúvida administrativa sobre meu caso</option>
            <option value="pagamento">Questão financeira / pagamento</option>
            <option value="parceria">Parceria / proposta comercial</option>
            <option value="imprensa">Imprensa / mídia</option>
            <option value="outros">Outro</option>
          </select>
        </Field>
        <Field label="Mensagem" className="mt-4">
          <textarea className="textarea" value={data.message} onChange={(e) => update("message", e.target.value)} placeholder="Conta um pouco sobre o que precisa…" />
        </Field>
        <LgpdCheckbox checked={data.lgpd} onChange={(v) => update("lgpd", v)} />
      </div>
      <div className="modal-foot">
        <span className="t-caption">Resposta em até 24h úteis</span>
        <button className="btn btn--primary" onClick={handleSubmit} disabled={!valid || sending} style={{ opacity: (valid && !sending) ? 1 : 0.4 }}>
          {sending ? "Enviando..." : "Enviar mensagem"}
        </button>
      </div>
    </Modal>
  );
}

/* =====================================================================
   Sub-components
   ===================================================================== */
function StepBlock({ title, subtitle, children }) {
  return (
    <div>
      <h2 className="t-h2 mb-3">{title}</h2>
      {subtitle && <p className="t-body t-soft mb-6 mw-prose">{subtitle}</p>}
      <div className="flex flex-col gap-3">{children}</div>
    </div>
  );
}

function OptionTile({ label, active, onClick }) {
  return (
    <button className={`option-tile ${active ? "is-active" : ""}`} onClick={onClick}>
      <span className="tile-dot"></span>
      {label}
    </button>
  );
}

function Field({ label, hint, children, className }) {
  return (
    <div className={`field ${className || ""}`}>
      <label className="field-label">{label}</label>
      {children}
      {hint && <span className="field-hint">{hint}</span>}
    </div>
  );
}

function LgpdCheckbox({ checked, onChange }) {
  const linkStyle = { color: "var(--c-terracota)", textDecoration: "underline" };
  return (
    <label className="checkbox mt-6">
      <input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} />
      <span className="box"></span>
      <span>
        Concordo com o tratamento dos meus dados conforme a{" "}
        <a href="/privacidade" target="_blank" rel="noopener noreferrer" style={linkStyle} onClick={(e) => e.stopPropagation()}>
          Política de Privacidade
        </a>{" "}
        da Moura Immigration Management LLC, em conformidade com a{" "}
        <a href="/privacidade#lgpd" target="_blank" rel="noopener noreferrer" style={linkStyle} onClick={(e) => e.stopPropagation()}>
          LGPD (Brasil)
        </a>{" "}
        e{" "}
        <a href="/privacidade#ccpa" target="_blank" rel="noopener noreferrer" style={linkStyle} onClick={(e) => e.stopPropagation()}>
          CCPA (Estados Unidos)
        </a>.
      </span>
    </label>
  );
}

function DurationOption({ active, onClick, title, desc, tag }) {
  return (
    <button onClick={onClick} className={`option-tile ${active ? "is-active" : ""}`}
      style={{ padding: 24, alignItems: "flex-start", flexDirection: "column", gap: 8 }}>
      <div className="flex items-center justify-between" style={{ width: "100%" }}>
        <span style={{ fontFamily: "var(--ff-display)", fontSize: 18, fontWeight: 700 }}>{title}</span>
        <span style={{ fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", opacity: 0.7 }}>{tag}</span>
      </div>
      <span style={{ opacity: 0.78, fontSize: 14, lineHeight: 1.55, fontWeight: 400 }}>{desc}</span>
    </button>
  );
}

function SummaryRow({ label, value }) {
  return (
    <div className="flex justify-between" style={{ padding: "10px 0", borderBottom: "1px solid var(--c-navy-12)" }}>
      <span className="t-caption" style={{ opacity: 1, fontWeight: 500, letterSpacing: "0.04em", textTransform: "uppercase", fontSize: 11 }}>{label}</span>
      <span className="t-small" style={{ fontWeight: 500, color: "var(--c-navy)", textAlign: "right" }}>{value}</span>
    </div>
  );
}

function SuccessModal({ title, body, onClose }) {
  return (
    <Modal onClose={onClose}>
      <div style={{ padding: "56px 40px", textAlign: "center" }}>
        <div style={{
          width: 64, height: 64, borderRadius: "50%",
          background: "var(--c-navy)", color: "var(--c-offwhite)",
          display: "grid", placeItems: "center", margin: "0 auto 24px",
        }}>
          <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
            <path d="M5 12l5 5 9-10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
        <h2 className="t-h2 mb-3">{title}</h2>
        <p className="t-body t-soft mw-prose" style={{ margin: "0 auto 32px" }}>{body}</p>
        <button className="btn btn--primary" onClick={onClose}>Fechar</button>
      </div>
    </Modal>
  );
}

function formatDate(iso) {
  if (!iso) return "";
  const d = new Date(iso + "T00:00:00");
  return d.toLocaleDateString("pt-BR", { weekday: "long", day: "2-digit", month: "long" });
}

/* =====================================================================
   Modal Renderer, listens to context
   ===================================================================== */
function ModalRenderer() {
  const { open, setOpen } = useModal();
  // expose openModal globally (used by EB3 -> Agenda chain)
  useEffect(() => {
    window.__openModal = setOpen;
  }, [setOpen]);
  if (!open) return null;
  const close = () => setOpen(null);
  return (
    <>
      {open === "eb3" && <EB3EligibilityModal onClose={close} />}
      {open === "agenda" && <AgendaModal onClose={close} />}
      {open === "equipe" && <EquipeModal onClose={close} />}
    </>
  );
}

Object.assign(window, {
  EB3EligibilityModal, AgendaModal, EquipeModal,
  ModalRenderer, StepBlock, OptionTile, Field, LgpdCheckbox,
});