/* Alis AI — landing: seções B (use cases → final CTA) */

const USECASES = [
  ["Dentistas", "Recepção que entende dor antes de oferecer agenda. Nunca diagnostica, sempre acolhe. Identifica urgência (siso, fratura, sangramento) e passa pra você. Agenda por profissional e unidade.", ["Triagem de dor", "Agenda por especialidade", "Lembrete de retorno", "Faturamento por procedimento"]],
  ["Salões & Estética", "Tom caloroso e descontraído. Sabe perguntar se é primeira vez, se tem profissional preferido. Marca corte, coloração, escova e manicure no mesmo fluxo.", ["Catálogo com preço", "Agenda por profissional", "Indicação cruzada", "Antes/depois"]],
  ["Restaurantes", "Pega pedido, calcula taxa de entrega, sugere combos. Avisa quando saiu e quando chegou. Se o cliente reclama, escala pra você na hora.", ["Cardápio dinâmico", "Pedido completo", "Pagamento PIX", "Rastreio"]],
  ["Lojas", "Cota frete, mostra estoque, faz pedido com pagamento na entrega. Não trava em variação de tamanho ou cor — pergunta sempre. Acompanha o pedido até chegar.", ["Consulta de catálogo", "Cálculo de frete", "Criação de pedido", "Tracking"]],
  ["Outros", "Seu negócio não tá aqui? A Alis aprende com 1 prompt que descreve o que você faz. Em 5 minutos tá atendendo como se trabalhasse com você há anos.", ["Prompt customizado", "Tools sob medida", "Multi-unidade", "API"]],
];

function UseCases() {
  const [active, setActive] = React.useState(0);
  const uc = USECASES[active];
  const panelMsgs = [
    ["in", "Tô com um siso doendo muito 😣"],
    ["out", "Sinto muito! Dor de siso é urgência. Vou ver com a equipe — consigo te encaixar hoje 17h com a Dra. Marina, fecha?"],
    ["in", "Fecha! Obrigado"],
    ["out", "Encaixe confirmado pra hoje 17h. Já avisei a recepção que é urgência 💜"],
  ];
  return (
    <section className="section" id="usecases">
      <div className="container">
        <SectionHead eyebrow="Pra quem é" title="Configurada pro seu nicho. Não pra todos." />
        <div className="tabs">
          {USECASES.map((u, i) => (
            <button key={u[0]} className={"tab" + (i === active ? " tab--active" : "")} onClick={() => setActive(i)}>{u[0]}</button>
          ))}
        </div>
        <div className="usecase reveal">
          <div>
            <p className="usecase__text">{uc[1]}</p>
            <div className="usecase__tools">
              {uc[2].map(t => <span className="tool-chip" key={t}>{t}</span>)}
            </div>
          </div>
          <div className="usecase__panel">
            {panelMsgs.map(([dir, msg], i) => (
              <div className={"bubble bubble--" + (dir === "in" ? "in" : "out")} key={i}>{msg}</div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

const COMPARE_ROWS = [
  ["Responde em segundos", "yes", "yes", "no"],
  ["Entende áudio e foto", "yes", "no", "yes"],
  ["Sabe quando passar pra você", "yes", "no", "—"],
  ["Aprende o seu tom", "yes", "no", "—"],
  ["Agenda direto na conversa", "yes", "no", "manual"],
  ["Cancela e remarca sozinha", "yes", "no", "no"],
  ["Funciona 24h", "yes", "yes", "no"],
];

function cell(v) {
  if (v === "yes") return <span className="yes"><Icon name="check" size={18} /></span>;
  if (v === "no") return <span className="no"><Icon name="x" size={16} /></span>;
  return <span className="no">{v}</span>;
}

function Comparison() {
  return (
    <section className="section" style={{ background: "var(--bg-subtle)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
      <div className="container container--narrow">
        <SectionHead eyebrow="Por que Alis" title="Tem ferramenta. E tem ferramenta que faz seu time render 3x mais." />
        <div className="compare reveal">
          <table>
            <thead>
              <tr>
                <th></th>
                <th className="col-alis">Equipe + Alis</th>
                <th>Bot comum</th>
                <th>Só sua equipe</th>
              </tr>
            </thead>
            <tbody>
              {COMPARE_ROWS.map(r => (
                <tr key={r[0]}>
                  <td>{r[0]}</td>
                  <td className="col-alis">{cell(r[1])}</td>
                  <td>{cell(r[2])}</td>
                  <td>{cell(r[3])}</td>
                </tr>
              ))}
              <tr>
                <td>Custo / mês</td>
                <td className="col-alis num">R$ 149–500</td>
                <td className="num">R$ 300+</td>
                <td className="num">R$ 2.500+</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

const PLANS = [
  { name: "Starter", price: "R$ 149", period: "/mês", desc: "Pra profissional autônomo ou negócio individual", cta: "Testar 14 dias grátis", variant: "secondary",
    items: ["500 conversas/mês", "1 número WhatsApp", "Até 2 usuários do painel", "IA Claude Sonnet", "Agenda inteligente", "Lembretes automáticos", "Painel completo"] },
  { name: "Business", price: "R$ 500", period: "/mês", desc: "Pra clínicas, salões e franquias com equipe", cta: "Testar 14 dias grátis", variant: "primary", featured: true,
    items: [["Conversas ilimitadas", 1], ["Números ilimitados", 1], ["Usuários ilimitados", 1], "Campanhas em massa", "White-label total", "Multi-unidade", "Domínio próprio", "Estatística avançada", "Onboarding dedicado", "Suporte prioritário"] },
  { name: "Customizado", price: "Sob consulta", period: "", desc: "Pra redes, marketplaces e operações de alto volume", cta: "Falar com vendas", variant: "secondary",
    items: ["Tudo do Business +", "API completa de integração", "Volume ilimitado com SLA", "Gerente de conta dedicado", "Pipeline de mensagens customizado", "Auditoria e relatórios sob medida", "Treinamento da equipe in loco"] },
];

function Pricing({ onSignup }) {
  return (
    <section className="section" id="pricing">
      <div className="container">
        <SectionHead eyebrow="Planos" title="Escolha o tamanho que cabe agora. Suba quando crescer." sub="14 dias grátis em qualquer plano. Sem cartão pra começar. Sem fidelidade. Sem taxa de setup." />
        <div className="prices">
          {PLANS.map(p => (
            <div className={"price reveal" + (p.featured ? " price--featured" : "")} key={p.name}>
              {p.featured && <span className="price__pop">Recomendado pra clínicas</span>}
              <p className="price__name">{p.name}</p>
              <p className="price__desc">{p.desc}</p>
              <div><span className="price__amount">{p.price}</span><span className="price__period">{p.period}</span></div>
              <ul className="price__list">
                {p.items.map((it, i) => {
                  const [txt, bold] = Array.isArray(it) ? it : [it, 0];
                  return <li key={i}><Icon name="check" /> {bold ? <b>{txt}</b> : txt}</li>;
                })}
              </ul>
              <Button variant={p.variant} block onClick={onSignup}>{p.cta}</Button>
            </div>
          ))}
        </div>
        <p className="price__foot">Todos os planos incluem Claude Sonnet, transcrição de áudio e voz natural.</p>
      </div>
    </section>
  );
}

const TESTIMONIALS = [
  ["Minha recepção tava sufocada. Agora a Alis recebe e a equipe foca em quem realmente precisa de atenção. No-show caiu de 30% pra 8%, e ninguém precisou trabalhar mais.", "Dr. Casemiro Borges", "Cirurgião Dentista · 4 unidades em SP", "C"],
  ["Minha recepcionista virou super-recepcionista. A Alis recebe, organiza, e ela fecha — em dupla, agendamos o dobro nas primeiras 2 semanas.", "Carla Mendes", "Salão Sorriso · Recife", "C"],
  ["A campanha de aniversário pela Alis deu 47 agendamentos em 3 dias. Minha equipe não daria conta sozinha — agora consegue.", "Renato Lima", "Clínica Bem-Estar · Belo Horizonte", "R"],
];

function Testimonials() {
  return (
    <section className="section" style={{ background: "var(--bg-subtle)", borderTop: "1px solid var(--border)" }}>
      <div className="container">
        <SectionHead eyebrow="O que dizem" title="Times que pararam de se sufocar no WhatsApp" />
        <div className="testi-grid">
          {TESTIMONIALS.map(([q, n, r, av]) => (
            <div className="testi reveal" key={n}>
              <div className="testi__stars">{[0, 1, 2, 3, 4].map(i => <Icon key={i} name="star" size={16} />)}</div>
              <p className="testi__quote">“{q}”</p>
              <div className="testi__who">
                <div className="testi__av">{av}</div>
                <div>
                  <p className="testi__name">{n}</p>
                  <p className="testi__role">{r}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const FAQS = [
  ["Preciso de novo número de WhatsApp?", "Não. A Alis se conecta no SEU número (do celular do trabalho). É um QR Code, igual WhatsApp Web. Você continua usando o WhatsApp normalmente — a IA só responde quando você não tá lá."],
  ["Cliente percebe que é IA?", "Só se você quiser. A maioria não percebe — o tom é natural, a Alis sabe quando errar de propósito pra não parecer robotizada. Mas também temos modo “transparente” se você preferir avisar."],
  ["E se a IA errar?", "Você ou qualquer um do seu time tem o botão “Pausar bot” em cada conversa. Quando pausa, a Alis cala e passa o bastão. A pessoa assume, conversa, e quando termina a Alis volta a receber as próximas — sem ninguém perder ritmo."],
  ["Funciona com WhatsApp Business?", "Funciona com qualquer WhatsApp — pessoal ou Business. Não precisa da API oficial do Meta, que é cara e burocrática."],
  ["Posso usar minha logo e cor?", "Pode. No Starter você sobe sua logo. No Business é white-label total: subdomínio próprio (ex: agenda.suaempresa.com.br), sua identidade visual, zero menção à Alis. Cliente nem sabe que tem IA no meio."],
  ["Os dados são meus?", "100%. Você exporta tudo em CSV ou JSON quando quiser. Apaga a conta e a gente apaga tudo — sem retenção. LGPD-compliant."],
  ["E se eu quiser cancelar?", "Cancela com 1 click no painel. Sem ligação, sem retenção forçada, sem multa. Os dados ficam acessíveis por 30 dias caso você volte."],
  ["Quanto tempo leva pra configurar?", "30 segundos pra criar conta. 1 minuto pra conectar o WhatsApp. 10 minutos pra revisar os prompts da sua vertical. Depois é só ver as conversas acontecendo."],
];

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq">
      <div className="container">
        <SectionHead eyebrow="Dúvidas comuns" title="Perguntas que toda gente faz antes de assinar" />
        <div className="faq">
          {FAQS.map(([q, a], i) => (
            <div className={"faq__item" + (open === i ? " faq__item--open" : "")} key={i}>
              <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
                {q} <Icon name="chevron-down" />
              </button>
              <div className="faq__a"><p>{a}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ onSignup }) {
  return (
    <section className="section section--tight">
      <div className="container">
        <div className="finalcta reveal">
          <Eyebrow invert>Começa agora</Eyebrow>
          <h2 className="finalcta__title">Em 30 segundos, seu time ganha um co-piloto que não dorme.</h2>
          <p className="finalcta__sub">Sem cartão. Sem treinamento. Sem reunião com vendedor. Você cria, conecta, e vê a Alis recebendo o primeiro cliente — junto com sua equipe.</p>
          <div className="finalcta__cta">
            <Button variant="onDark" size="lg" icon="arrow-right" onClick={onSignup}>Criar conta grátis</Button>
          </div>
          <a className="finalcta__link" href="#" onClick={e => { e.preventDefault(); onSignup(); }}>Ou agendar uma demo de 15min com nosso time</a>
          <p className="finalcta__micro">14 dias grátis em qualquer plano. Sem cartão pra começar. Você vê funcionando antes de pagar 1 centavo.</p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { UseCases, Comparison, Pricing, Testimonials, FAQ, FinalCTA });