/* ═══════════════════════════════════════════════════════════
   MÓDULOS — os 3 principais em blocos zigue-zague, cada um com
   âncora própria (#agenda, #prontuario, #financeiro) linkada no
   menu; os demais num grid compacto de chips no fim.
   Todo o conteúdo vem dos módulos que existem de fato no sistema.
   ═══════════════════════════════════════════════════════════ */

const featureStyles = {};

/* Os 3 módulos-carro-chefe, cada um com screenshot real do produto.
   WhatsApp não vira bloco próprio — não tem tela dedicada, e já
   aparece mencionado dentro do módulo de Agenda. */
const MAIN_MODULES = [
  {
    id: 'agenda',
    color: '#0ea5e9',
    icon: ICONS.calendarCheck,
    tag: 'Agenda',
    title: 'Sua semana, organizada de verdade',
    body: 'Veja todos os horários, com cores por status. Confirmação e lembrete já saem prontos na agenda — um clique abre o WhatsApp direto para o paciente certo.',
    roi: 'Menos falta, menos telefone tocando o dia todo',
    shot: 'img/por-dentro/agenda-semana.png',
    shotAlt: 'Agenda semanal do Klyvo com consultas de vários dentistas e status coloridos',
  },
  {
    id: 'prontuario',
    color: '#6366f1',
    icon: ICONS.tooth,
    iconFilled: true,
    tag: 'Prontuário',
    title: 'Odontograma interativo e histórico completo do paciente',
    body: 'Anamnese digital, evoluções por sessão e histórico completo do paciente. Gere orçamentos direto do odontograma, com um clique.',
    roi: 'Reduza a dependência de papel e centralize as informações do paciente',
    shot: 'img/odontograma-hero.png',
    shotAlt: 'Odontograma interativo do Klyvo com marcações de canal, implante e restauração',
  },
  {
    id: 'financeiro',
    color: '#10b981',
    icon: ICONS.dollar,
    tag: 'Financeiro',
    title: 'Seu caixa em tempo real, sem depender de planilha',
    body: 'Receitas, despesas, parcelamentos, comissões por profissional, taxas de máquina de cartão e relatório de inadimplência. Cobre devedores pelo WhatsApp com um clique, mensagem já pronta.',
    roi: 'Pare de esquecer cobranças e enxergue seu caixa em tempo real',
    shot: 'img/por-dentro/financeiro.png',
    shotAlt: 'Tela de Financeiro do Klyvo com evolução mensal e fluxo de caixa acumulado',
  },
];

const EXTRA_MODULES = [
  'Portal do paciente',
  'Fichas por especialidade',
  'CRM',
  'Estoque',
  'Relatórios',
  'Convênios',
];

/* ── Bloco zigue-zague de um módulo principal ────────────── */
function ModuleBlock({ mod, index }) {
  const reversed = index % 2 === 1;

  return (
    <div
      className={`module-block${reversed ? ' reversed' : ''} reveal`}
      id={mod.id}
      style={{ '--c': mod.color }}
    >
      <div className="module-copy">
        <div className="module-heading">
          <div className="module-icon">
            <Icon d={mod.icon} fill={mod.iconFilled ? 'currentColor' : 'none'} strokeWidth={mod.iconFilled ? 0 : 2} />
          </div>
          <div className="tag module-heading-tag">{mod.tag}</div>
          <h3 className="module-title module-heading-title">{mod.title}</h3>
        </div>
        <h3 className="module-title module-title-desktop">{mod.title}</h3>
        <p>{mod.body}</p>
        <div className="feat-roi">{mod.roi}</div>
      </div>

      <div className="module-visual">
        <img src={mod.shot} alt={mod.shotAlt} loading="lazy" />
      </div>
    </div>
  );
}

function Features() {
  return (
    <section className="section section-alt" id="funcionalidades">
      <div className="container">
        <div className="section-header">
          <div className="tag">Módulos</div>
          <h2>Tudo que a sua rotina precisa — num único login</h2>
          <p>
            Um sistema completo que conecta agenda, prontuário, financeiro e WhatsApp na mesma tela,
            para reduzir trabalho manual e centralizar sua rotina.
          </p>
        </div>

        <div className="modules-stack">
          {MAIN_MODULES.map((mod, i) => (
            <ModuleBlock mod={mod} index={i} key={mod.id} />
          ))}
        </div>

        <div className="feat-more reveal">
          <span className="feat-more-label">O sistema também tem:</span>
          <div className="feat-more-chips">
            {EXTRA_MODULES.map((m) => (
              <span className="feat-chip" key={m}>
                {m}
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Features });