/* Alis AI — landing: seções A (hero → features) */

const HERO_VIDEO = "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260302_085640_276ea93b-d7da-4418-a09b-2aa5b490e838.mp4";

function Hero({ onSignup, onDemo }) {
  return (
    <header className="hero hero--video" id="top">
      <video className="hero__video" autoPlay muted loop playsInline preload="auto" aria-hidden="true">
        <source src={HERO_VIDEO} type="video/mp4" />
      </video>
      <div className="hero__filter" aria-hidden="true" />
      <div className="container hero__grid">
        <div className="hero__copy reveal">
          <span className="badge-pill badge-pill--glass"><Icon name="zap" size={14} /> Novo — agenda inteligente e cancelamento automático</span>
          <h1 className="hero__title">Sua equipe vira super-equipe. No mesmo WhatsApp.</h1>
          <p className="hero__sub">A Alis recebe, responde rápido e organiza tudo na sua agenda. Sua equipe entra pra fechar venda e cuidar do que importa. Em 30 segundos no ar.</p>
          <div className="hero__cta">
            <Button variant="primary" size="lg" icon="arrow-right" onClick={onSignup}>Criar conta grátis</Button>
            <Button variant="glass" size="lg" icon="play" onClick={onDemo}>Ver demonstração</Button>
          </div>
          <p className="hero__micro"><Icon name="check" /> 14 dias grátis. Sem cartão. Funciona com o time e o número que você já tem.</p>
        </div>
        <div className="hero__mock reveal">
          <HeroMock />
        </div>
      </div>
      <div className="hero__fade" aria-hidden="true" />
    </header>
  );
}

function HeroMock() {
  return (
    <div className="mock">
      <div className="mock__card">
        <div className="mock__bar">
          <span className="mock__dot" style={{ background: "#e5484d" }} />
          <span className="mock__dot" style={{ background: "#f59e0b" }} />
          <span className="mock__dot" style={{ background: "#16a45e" }} />
          <span className="mock__title">Clínica Bem-Estar · WhatsApp</span>
        </div>
        <div className="chat">
          <div className="bubble bubble--in">Oi! Queria marcar uma limpeza essa semana 🦷</div>
          <div className="bubble bubble--out">Oi Cláudia! 💜 Posso te encaixar quinta às 14h ou sexta às 9h30. Qual fica melhor pra você?<span className="bubble__meta">Alis · agora</span></div>
          <div className="bubble bubble--in">Quinta 14h tá ótimo</div>
          <div className="bubble bubble--out">Fechado, Cláudia! Agendei quinta, 14h, com a Dra. Marina. Te lembro 2h antes ✨<span className="bubble__meta">Alis · agora</span></div>
        </div>
      </div>
      <div className="mock__float">
        <div className="ico"><Icon name="calendar-check" /></div>
        <div>
          <b>Confirmado</b>
          <span>Qui · 14:00 · Dra. Marina</span>
        </div>
      </div>
    </div>
  );
}

function LogoBar() {
  const items = ["Dr. Casemiro Borges", "Salão Sorriso", "Clínica Bem-Estar", "Pneu Prime", "Esmalteria Lu"];
  return (
    <section className="logobar container">
      <p className="logobar__label">Times que rendem mais sem contratar ninguém</p>
      <div className="logobar__row">
        {items.map(i => (
          <span className="logobar__item" key={i}><Icon name="message" size={18} /> {i}</span>
        ))}
      </div>
    </section>
  );
}

const PROBLEMS = [
  ["🕐", "Cliente espera 4h, fecha com outro.", "73% dos clientes desistem se ninguém responde em 1 hora. Seu time não dá conta de todo mundo ao mesmo tempo — alguém ia ter que."],
  ["🔁", "Sua equipe digitando a mesma resposta o dia inteiro.", "“Qual o valor?”, “Atende sábado?”, “Onde fica?” — gente boa ocupada com pergunta de rotina, em vez de fechar venda."],
  ["📅", "Agenda no Google, cliente no WhatsApp, recibo no papel.", "Sua recepção confirma manualmente, perde horário, esquece de lembrar. Cliente some. Faturamento despenca."],
];

function Problem() {
  return (
    <section className="section problem">
      <div className="container">
        <SectionHead eyebrow="O problema" title="Sua equipe é boa. Mas não tem mão pra tudo." />
        <div className="grid-3">
          {PROBLEMS.map(([e, t, d]) => (
            <div className="pcard reveal" key={t}>
              <span className="pcard__emoji">{e}</span>
              <h3 className="pcard__title">{t}</h3>
              <p className="pcard__text">{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const STEPS = [
  ["01", "Crie sua conta", "Sem cartão. Sem treinamento. Você escolhe o tipo do seu negócio e a Alis já vem configurada do jeito certo."],
  ["02", "Conecte o WhatsApp", "Aparece um QR Code. Você escaneia com o celular do negócio — sem chip novo, sem API do Meta. Pronto."],
  ["03", "A Alis recebe. Seu time fecha.", "Clientes mandam mensagem, a Alis responde rápido, agenda e organiza. Sua equipe vê tudo no painel e entra pra cuidar do que importa."],
];

function HowItWorks() {
  return (
    <section className="section" id="how">
      <div className="container">
        <SectionHead eyebrow="Como funciona" title="3 passos. 30 segundos. Funciona pra sempre." />
        <div className="steps">
          {STEPS.map(([n, t, d]) => (
            <div className="step reveal" key={n}>
              <div className="step__num">{n}</div>
              <h3 className="step__title">{t}</h3>
              <p className="step__text">{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const FEATURES = [
  ["message", "Conversa de gente", "Entende áudio, texto e foto. Aprende o tom do seu negócio. Nunca enrola, nunca alucina preço."],
  ["calendar", "Agenda inteligente", "Consulta sua agenda em tempo real e oferece só horários livres. Cliente confirma no próprio WhatsApp."],
  ["bell", "Lembretes automáticos", "2h antes, a Alis manda lembrete. Cliente confirma ou cancela ali mesmo. No-show despenca."],
  ["brush", "Sua marca, do seu jeito", "White-label de verdade: logo, cor e nome são seus. Subdomínio próprio. Cliente nem sabe que tem IA."],
  ["headset", "Sua equipe no comando", "Painel onde seu time vê tudo em tempo real. Assume a conversa com 1 click. A Alis sinaliza urgência e dá o contexto pronto."],
  ["megaphone", "Mensagens em massa", "Campanha pra sua base, segmentada por tag, com variáveis. Quem responde cai no funil normal."],
  ["id-card", "CRM enxuto", "Tags, notas, histórico e próximo agendamento dentro da conversa. Busca instantânea. Funciona offline."],
  ["bar-chart", "Estatística que importa", "Conversão de conversa → agendamento → atendimento. No-show por dia. Receita projetada do mês."],
];

function Features() {
  return (
    <section className="section" id="features" style={{ background: "var(--bg-subtle)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
      <div className="container">
        <SectionHead eyebrow="O que a Alis faz" title="A estrutura que você já tem. Agora com a mão direita que faltava." />
        <div className="fgrid">
          {FEATURES.map(([ic, t, d]) => (
            <div className="fcard reveal" key={t}>
              <div className="fcard__icon"><Icon name={ic} /></div>
              <h3 className="fcard__title">{t}</h3>
              <p className="fcard__text">{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, LogoBar, Problem, HowItWorks, Features });