// Persona selector — 3 tabs
const PERSONAS = {
  tea: {
    key: "tea",
    label: "Famílias TEA",
    desc: "Pais e responsáveis legais de pessoa com diagnóstico de TEA",
    preview: "Até 30% de desconto · IPI + ICMS + IPVA · Sem limite de idade",
    iconKind: "heart-puzzle",
    waMsg: "Olá Aline! Tenho um filho(a) com diagnóstico de TEA e quero saber sobre isenção PCD para compra de carro.",
    rights: [
      { k: "IPI", v: "Isenção total em veículos 0km até R$200.000" },
      { k: "ICMS (RS)", v: "Isenção total até R$100.000; parcial R$100k–R$120k" },
      { k: "IPVA (RS 2026)", v: "Isenção total até R$144.294,68 (5.094 UPF-RS)" },
      { k: "Renovação", v: "3 anos para nova aquisição com isenção de IPI" },
      { k: "Condutores", v: "Até 3 condutores autorizados (representante + 2)" },
      { k: "Idade", v: "Sem limite mínimo da pessoa com TEA" },
    ],
    docs: [
      "Laudo conforme Anexo IV do Convênio ICMS 38/12",
      "Laudo emitido por médico + psicólogo credenciados ao SUS",
      "RG e CPF do responsável legal e da pessoa com TEA",
      "Certidão de nascimento ou documentos de tutela",
      "Comprovante de residência do responsável e condutores",
      "Não exige CNH da pessoa com TEA",
    ],
  },
  pcd: {
    key: "pcd",
    label: "Pessoas com Deficiência",
    desc: "Pessoas com deficiência física, visual, auditiva, mental severa ou seus representantes",
    preview: "Até 30% de desconto · IPI + ICMS + IPVA + IOF · Condutor ou não condutor",
    iconKind: "accessibility",
    waMsg: "Olá Aline! Tenho (ou sou representante de) uma pessoa com deficiência e quero saber sobre a isenção para compra de veículo.",
    rights: [
      { k: "IPI", v: "Isenção total em 0km até R$200.000 (motor até 2.0, 4 portas)" },
      { k: "ICMS (RS)", v: "Isenção total até R$100.000; parcial R$100k–R$120k" },
      { k: "IPVA (RS 2026)", v: "Isenção total em veículos até R$144.294,68" },
      { k: "IOF", v: "Isenção para deficientes físicos condutores (uso único)" },
      { k: "Tipos cobertos", v: "Física, visual, auditiva, mental severa, mobilidade reduzida" },
      { k: "Renovação", v: "3 anos para IPI" },
    ],
    docs: [
      "Laudo conforme anexo III ou IV do Convênio ICMS 38/12",
      "Laudo de serviço público de saúde, credenciado SUS ou DETRAN-RS",
      "Condutores: CNH Especial emitida após perícia médica",
      "Não condutores: indicação de até 3 condutores legais",
      "Adaptações veiculares conforme laudo DETRAN",
      "Documentos pessoais + comprovante de residência",
    ],
  },
  taxi: {
    key: "taxi",
    label: "Taxistas",
    desc: "Motoristas profissionais autônomos com alvará municipal",
    preview: "Até 30% de desconto · IPI + ICMS + IPVA · Renovação a cada 2 anos",
    iconKind: "taxi",
    waMsg: "Olá Aline! Sou taxista e quero saber sobre isenção de impostos para compra do meu próximo carro.",
    rights: [
      { k: "IPI", v: "Isenção total em 0km até R$200.000 (motor até 2.0)" },
      { k: "ICMS (RS)", v: "Isenção total — condicionada à concessão prévia do IPI" },
      { k: "IPVA (RS)", v: "Isenção anual enquanto o veículo estiver em uso como táxi" },
      { k: "Economia total", v: "Até 36,75% do valor do veículo (IPI + ICMS)" },
      { k: "Permanência", v: "Mínimo de 2 anos na posse do veículo" },
      { k: "Renovação", v: "2 anos para nova aquisição" },
    ],
    docs: [
      "CNH com averbação de atividade remunerada (taxista)",
      "Alvará/permissão municipal de táxi (autenticada)",
      "Certidão DETRAN-RS de posse de auto de aluguel (≥1 ano)",
      "Inscrição no INSS + extrato previdenciário (≥1 ano)",
      "Autorização IPI (pré-requisito para ICMS)",
      "Se MEI: CCMEI com CNAE 4923-0/01",
    ],
  },
};

const TabIcon = ({ kind, size = 24 }) => {
  if (kind === "heart-puzzle") {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
        <path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.5-7 10-7 10z" fill="currentColor"/>
        <path d="M12 7v13M5 12h14" stroke="#fff" strokeWidth="1.4" opacity="0.7"/>
      </svg>
    );
  }
  if (kind === "accessibility") return <Icon name="accessibility" size={size}/>;
  return <Icon name="taxi" size={size}/>;
};

const PersonaSelector = () => {
  const [active, setActive] = React.useState("tea");
  const cur = PERSONAS[active];

  return (
    <div>
      <div className="persona-tabs">
        {Object.values(PERSONAS).map(p => (
          <button
            key={p.key}
            className={`persona-tab ${active === p.key ? "active" : ""}`}
            onClick={() => setActive(p.key)}
            data-audience={p.key}
          >
            <div className="persona-tab-icon">
              <TabIcon kind={p.iconKind} size={22}/>
            </div>
            <h3>{p.label}</h3>
            <p>{p.desc}</p>
            <div className="persona-tab-preview">{p.preview}</div>
          </button>
        ))}
      </div>

      <div className="persona-panel" key={active}>
        <div className="persona-panel-inner" data-audience={cur.key}>
          <div>
            <h4>O que você tem direito</h4>
            <ul className="persona-list">
              {cur.rights.map((r, i) => (
                <li key={i}>
                  <Icon name="check-circle" size={20} style={{ color: "#F37021" }}/>
                  <span><strong>{r.k}:</strong> {r.v}</span>
                </li>
              ))}
            </ul>
          </div>
          <div>
            <h4>O que você precisa apresentar</h4>
            <ul className="persona-list">
              {cur.docs.map((d, i) => (
                <li key={i}>
                  <Icon name="doc" size={20} style={{ color: "#001e40" }}/>
                  <span>{d}</span>
                </li>
              ))}
            </ul>
            {cur.key === "tea" && (
              <div style={{ marginTop: 28, display: "flex", justifyContent: "center" }}>
                <PuzzleHeart size={130}/>
              </div>
            )}
          </div>
        </div>
        <div style={{ marginTop: 24, textAlign: "center" }}>
          <a
            className="btn btn-whatsapp"
            href={`https://wa.me/5500000000000?text=${encodeURIComponent(cur.waMsg)}`}
            target="_blank" rel="noreferrer"
          >
            <Icon name="whatsapp" size={18}/>
            Quero análise gratuita para {cur.label}
            <Icon name="arrow-right" size={16}/>
          </a>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { PersonaSelector, PERSONAS });