/* ═══════════════════════════════════════════════════════════
   PLANOS — Autônomo / Essential / Advanced / Prime, toggle
   mensal × anual. Preços da Clínica idênticos aos que já estão
   no ar (v1); Autônomo é plano novo (definido em 2026-08-08).
   ═══════════════════════════════════════════════════════════ */

const pricingStyles = {
  fullBtn: { width: '100%', justifyContent: 'center' },
};

const PLANS = [
  {
    id: 'autonomo',
    name: 'Autônomo',
    monthly: [59, '90'],
    yearly: [49, '90'],
    desc: 'Para quem atende sozinho, mesmo em locais diferentes.',
    features: [
      [true, '1 profissional'],
      [true, 'Múltiplos locais de atendimento'],
      [true, 'Agenda'],
      [true, 'Cadastro de pacientes e orçamentos'],
      [false, 'Lembretes por WhatsApp'],
      [false, 'Agendamento online e portal do paciente'],
      [false, 'CRM e comissões'],
    ],
    featured: false,
  },
  {
    id: 'essential',
    name: 'Essential',
    monthly: [109, '90'],
    yearly: [99, '90'],
    desc: 'Para quem quer organizar agenda, pacientes e orçamentos num lugar só.',
    features: [
      [true, 'Até 2 acessos'],
      [true, 'Agenda + lembretes por WhatsApp'],
      [true, 'Cadastro de pacientes'],
      [true, 'Orçamentos e planos de tratamento'],
      [false, 'Prontuário digital'],
      [false, 'Financeiro'],
    ],
    featured: false,
  },
  {
    id: 'advanced',
    name: 'Advanced',
    monthly: [144, '90'],
    yearly: [129, '90'],
    desc: 'Para quem quer prontuário completo, financeiro e menos trabalho manual.',
    features: [
      [true, 'Até 3 acessos'],
      [true, 'Tudo do Essential'],
      [true, 'Prontuário digital completo'],
      [true, 'Financeiro + relatórios'],
      [true, 'CRM e recuperação de pacientes'],
      [true, 'Estoque e convênios'],
    ],
    featured: true,
  },
  {
    id: 'prime',
    name: 'Prime',
    monthly: [219, '90'],
    yearly: [199, '90'],
    desc: 'Para operações maiores: acesso ilimitado, comissões e contabilidade.',
    features: [
      [true, 'Acessos ilimitados'],
      [true, 'Tudo do Advanced'],
      [true, 'Comissões automáticas'],
      [true, 'Contabilidade (PF×PJ)'],
      [true, 'Suporte com plantão'],
    ],
    featured: false,
  },
];

/* Preço com os dígitos animando até o novo valor (mensal↔anual). */
function PlanPrice({ yearly, plan }) {
  const [int, frac] = yearly ? plan.yearly : plan.monthly;
  const [mInt, mFrac] = plan.monthly;
  const target = int + Number(frac) / 100;
  const animated = useAnimatedNumber(target);

  const displayInt = Math.floor(animated);
  const displayFrac = String(Math.round((animated - displayInt) * 100)).padStart(2, '0');

  return (
    <div className="plan-price">
      <span className="price-before">{yearly ? `R$ ${mInt},${mFrac}/mês` : ' '}</span>
      <span className="price-currency">R$</span>
      <span className="price-int">{displayInt}</span>
      <span className="price-frac">,{displayFrac}</span>
      <span className="price-period">/mês</span>
    </div>
  );
}

function Pricing() {
  const [yearly, setYearly] = React.useState(true);
  const switchRef = React.useRef(null);

  const handleToggle = () => {
    setYearly((v) => {
      const next = !v;
      // Confete só ao trocar PARA anual — celebra o desconto, não o oposto.
      if (next && switchRef.current) {
        const rect = switchRef.current.getBoundingClientRect();
        fireConfetti(rect.left + rect.width / 2, rect.top + rect.height / 2);
      }
      return next;
    });
  };

  return (
    <section className="section section-alt" id="planos">
      <div className="container">
        <div className="section-header">
          <div className="tag">Planos e preços</div>
          <h2>Planos transparentes para a sua rotina odontológica</h2>
          <p>
            Compare recursos e valores de cada plano. As condições de cobrança, cancelamento e
            renovação estão disponíveis nos Termos de Uso e no momento da contratação.
          </p>
        </div>

        <div className="pricing-toggle">
          <span className={`toggle-label${yearly ? '' : ' active'}`}>Mensal</span>
          <button
            ref={switchRef}
            className={`toggle-switch${yearly ? ' yearly' : ''}`}
            role="switch"
            aria-checked={yearly}
            aria-label="Alternar entre cobrança mensal e anual"
            onClick={handleToggle}
          />
          <span className={`toggle-label${yearly ? ' active' : ''}`}>Anual</span>
          {yearly && <span className="toggle-badge">Economize até 10%</span>}
        </div>

        <div className="plans-grid">
          {PLANS.map((plan, i) => {
            return (
              <div
                className={`plan-card reveal${plan.featured ? ' featured' : ''}${
                  i ? ` reveal-delay-${i}` : ''
                }`}
                key={plan.id}
              >
                {plan.featured && <div className="plan-badge">★ Mais popular</div>}

                <div className="plan-name">{plan.name}</div>

                <PlanPrice yearly={yearly} plan={plan} />

                <div className="plan-desc">{plan.desc}</div>

                <ul className="plan-features">
                  {plan.features.map(([ok, text]) => (
                    <li key={text} className={ok ? '' : 'off'}>
                      <span className={`fi ${ok ? 'ok' : 'no'}`} aria-hidden="true">
                        {ok ? '✓' : '–'}
                      </span>
                      {text}
                    </li>
                  ))}
                </ul>

                <a
                  href={LINKS.plano(plan.id)}
                  className={`btn ${plan.featured ? 'btn-primary' : 'btn-outline'}`}
                  style={pricingStyles.fullBtn}
                  onClick={(e) =>
                    trackCta(
                      'cta_start_free_trial',
                      { placement: 'pricing', plan: plan.id, billing_cycle: yearly ? 'anual' : 'mensal' },
                      e
                    )
                  }
                >
                  Começar grátis
                </a>
              </div>
            );
          })}
        </div>

        {/* Múltiplas clínicas ainda não tem plano/preço fechado —
            direciona para conversa comercial em vez de inventar
            condição. Ver klyvo-plano-multiplas-clinicas na memória. */}
        <div className="multi-clinic-cta reveal">
          <div className="multi-clinic-text">
            <strong>Gerencia mais de uma clínica?</strong>
            <span>Temos condições específicas para redes e grupos odontológicos.</span>
          </div>
          <a
            href={LINKS.waInfo}
            target="_blank"
            rel="noopener"
            className="btn btn-outline"
            onClick={() => track('whatsapp_clicked', { placement: 'multi-clinic' })}
          >
            Falar com o time
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Pricing });