const Pricing = () => {
  const [period, setPeriod] = React.useState('anual');
  const factor = period === 'anual' ? 0.8 : 1;

  const plans = [
    {
      name: 'Starter',
      slug: 'starter',
      sub: 'Para autônomos e escritórios iniciando a operação digital',
      price: 79,
      users: 'até 3 usuários',
      proposals: '20 propostas/mês',
      support: 'Suporte por e-mail',
      modules: [
        { label: 'Dashboard financeiro', included: true },
        { label: 'Clientes', included: true },
        { label: 'Propostas em PDF', included: true },
        { label: 'Contratos e parcelas', included: false },
        { label: 'Contas a receber e pagar', included: true },
        { label: 'Tarefas da equipe', included: false },
        { label: 'Relatórios', included: false },
        { label: 'Usuários e permissões', included: false },
      ],
      highlights: [
        'Teste grátis de 7 dias',
        'Cadastro de clientes e histórico',
        'Fluxo de caixa básico',
        'Anexos por cliente e proposta',
      ],
    },
    {
      name: 'Professional',
      slug: 'professional',
      sub: 'Para escritórios que já gerem propostas, contratos e financeiro',
      price: 179,
      users: 'até 10 usuários',
      proposals: '100 propostas/mês',
      support: 'Suporte prioritário',
      featured: true,
      modules: [
        { label: 'Dashboard financeiro', included: true },
        { label: 'Clientes', included: true },
        { label: 'Propostas Automáticas', included: true },
        { label: 'Contratos e parcelas', included: true },
        { label: 'Contas a receber e pagar', included: true },
        { label: 'Tarefas da equipe', included: true },
        { label: 'Relatórios', included: true },
        { label: 'Usuários e permissões', included: true },
      ],
      highlights: [
        'Módulo de relatórios liberado',
        'Controle de contratos e vencimentos',
        'Controle de pendências financeiras',
        'Administração de usuários',
      ],
    },
    {
      name: 'Enterprise',
      slug: 'enterprise',
      sub: 'Para operações maiores com governança, volume e acompanhamento',
      price: 349,
      users: 'até 30 usuários',
      proposals: 'propostas ilimitadas',
      support: 'Suporte dedicado',
      modules: [
        { label: 'Dashboard financeiro', included: true },
        { label: 'Clientes', included: true },
        { label: 'Propostas em PDF', included: true },
        { label: 'Contratos e parcelas', included: true },
        { label: 'Contas a receber e pagar', included: true },
        { label: 'Tarefas da equipe', included: true },
        { label: 'Relatórios', included: true },
        { label: 'Usuários e permissões', included: true },
      ],
      highlights: [
        'Maior limite de usuários',
        'Propostas sem limite mensal',
        'Histórico e auditoria operacional',
        'Acompanhamento de implantação',
      ],
    },
  ];

  return (
    <section id="pricing" className="relative py-32 md:py-48 border-t" style={{ borderColor: 'var(--rule)' }} data-screen-label="07 Pricing">
      <div className="max-w-[1400px] mx-auto px-6 md:px-10">
        <div className="grid grid-cols-12 gap-x-6">
          <div className="col-span-12 md:col-span-7">
            <SectionHeader
              index="07"
              label="Planos · Sheet 07"
              title={<>Planos por <em className="italic font-serif" style={{ color: 'var(--sepia)' }}>módulo</em> e volume.</>}
              kicker="Escolha o limite de propostas, usuários e módulos que fazem sentido para a fase atual do escritório."
            />
          </div>

          <div className="col-span-12 md:col-span-5 md:flex md:items-end md:justify-end mt-8 md:mt-0">
            <div className="inline-flex border" style={{ borderColor: 'var(--rule-strong)' }}>
              {['mensal', 'anual'].map((p) => (
                <button
                  key={p}
                  onClick={() => setPeriod(p)}
                  className="px-5 py-3 font-mono text-[10px] uppercase tracking-wider2 transition-all"
                  style={{
                    background: period === p ? 'var(--ink)' : 'transparent',
                    color: period === p ? 'var(--bg)' : 'var(--ash)',
                  }}
                >
                  {p}{p === 'anual' && <span style={{ color: 'var(--sepia)' }}> · -20%</span>}
                </button>
              ))}
            </div>
          </div>
        </div>

        <div className="mt-20 grid grid-cols-1 lg:grid-cols-3 gap-px" style={{ background: 'var(--rule-strong)' }}>
          {plans.map((p, i) => (
            <PricingCard key={p.name} {...p} factor={factor} period={period} index={i} />
          ))}
        </div>

        <div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-px" style={{ background: 'var(--rule-strong)' }}>
          {[
            ['Teste grátis', '7 dias sem cartão, com CPF/CNPJ obrigatório.'],
            ['Cadastro seguro', 'Validação de documento, usuário admin e workspace da empresa.'],
            ['Ativação simples', 'Escolha o plano, cadastre a empresa, pague e acesse a plataforma.'],
          ].map(([title, copy]) => (
            <div key={title} className="p-6" style={{ background: 'var(--bg)' }}>
              <DimLabel>/ {title}</DimLabel>
              <p className="mt-2 text-sm leading-relaxed" style={{ color: 'var(--ash)' }}>{copy}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const PricingCard = ({ name, slug, sub, price, users, proposals, support, modules, highlights, featured, factor, period, index }) => {
  const [ref, inView] = useReveal({ threshold: 0.2 });
  const finalPrice = Math.round(price * factor);
  const mutedColor = featured ? 'var(--mist)' : 'var(--ash)';

  return (
    <div
      ref={ref}
      className="relative p-8 md:p-10 transition-all duration-1000"
      style={{
        background: featured ? 'var(--ink)' : 'var(--bg)',
        color: featured ? 'var(--bg)' : 'var(--ink)',
        opacity: inView ? 1 : 0,
        transform: inView ? 'translateY(0)' : 'translateY(30px)',
        transitionDelay: `${index * 120}ms`,
      }}
    >
      {featured && (
        <div className="absolute top-0 right-0 px-3 py-1 font-mono text-[9px] uppercase tracking-wider2"
          style={{ background: 'var(--sepia)', color: 'var(--ink)' }}>
          MAIS ESCOLHIDO
        </div>
      )}

      <div className="flex items-baseline justify-between mb-2">
        <DimLabel style={featured ? { color: 'var(--mist)' } : {}}>/ {String(index + 1).padStart(2, '0')}</DimLabel>
        <DimLabel style={featured ? { color: 'var(--mist)' } : {}}>{users}</DimLabel>
      </div>

      <h3 className="font-serif font-light text-5xl tracking-tightest">{name}</h3>
      <p className="text-sm mt-2 min-h-[3rem]" style={{ color: mutedColor }}>{sub}</p>

      <div className="mt-8 mb-8">
        <div className="flex items-baseline gap-2">
          <span className="font-mono text-sm">R$</span>
          <span className="font-serif font-light text-7xl tracking-tightest">{finalPrice}</span>
          <span className="font-mono text-xs" style={{ color: featured ? 'var(--mist)' : 'var(--stone)' }}>/mês</span>
        </div>
        {period === 'anual' && (
          <div className="font-mono text-[10px] uppercase tracking-wider2 mt-2" style={{ color: 'var(--sepia)' }}>
            Cobrado anualmente · R$ {(finalPrice * 12).toLocaleString('pt-BR')}/ano
          </div>
        )}
      </div>

      <div className="grid grid-cols-2 gap-px mb-8" style={{ background: featured ? 'rgba(245,241,234,.28)' : 'var(--rule-strong)' }}>
        {[
          ['Usuários', users],
          ['Propostas', proposals],
          ['Suporte', support],
          ['Relatórios', modules.find((m) => m.label === 'Relatórios')?.included ? 'incluído' : 'não incluído'],
        ].map(([label, value]) => (
          <div key={label} className="p-3" style={{ background: featured ? 'var(--ink)' : 'var(--bg)' }}>
            <div className="font-mono text-[9px] uppercase tracking-wider2" style={{ color: 'var(--sepia)' }}>{label}</div>
            <div className="mt-1 text-sm leading-tight">{value}</div>
          </div>
        ))}
      </div>

      <div className="mb-8">
        <DimLabel style={featured ? { color: 'var(--mist)' } : {}}>/ Módulos incluídos</DimLabel>
        <ul className="mt-4 grid gap-2">
          {modules.map((m) => (
            <li key={m.label} className="flex items-start gap-3 text-sm leading-relaxed" style={{ color: m.included ? 'inherit' : mutedColor }}>
              <span className="font-mono text-[10px] mt-1.5" style={{ color: m.included ? 'var(--sepia)' : mutedColor }}>
                {m.included ? '+' : '–'}
              </span>
              <span>{m.label}</span>
            </li>
          ))}
        </ul>
      </div>

      <div className="mb-10">
        <DimLabel style={featured ? { color: 'var(--mist)' } : {}}>/ Destaques</DimLabel>
        <ul className="mt-4 space-y-2">
          {highlights.map((f) => (
            <li key={f} className="flex items-start gap-3 text-sm leading-relaxed">
              <span className="font-mono text-[10px] mt-1.5" style={{ color: 'var(--sepia)' }}>•</span>
              <span>{f}</span>
            </li>
          ))}
        </ul>
      </div>

      <a href={`/cadastro?plano=${slug}`} className={featured ? 'btn-ghost w-full justify-center' : 'btn-primary w-full justify-center'}
        style={featured ? { color: 'var(--bg)', borderColor: 'var(--bg)' } : {}}>
        Cadastrar →
      </a>
    </div>
  );
};

window.Pricing = Pricing;