import {
  CalendarX,
  Certificate,
  Infinity as Infinito,
  PixLogo,
  ShieldCheck,
  SquaresFour,
  Storefront,
  UsersThree,
  WhatsappLogo,
} from "@phosphor-icons/react/dist/ssr";
import type { Icon } from "@phosphor-icons/react";
import { TOTAL_DE_RECURSOS } from "../data/recursos";
import { ASSINATURA_DA_KTALOGU, type LinksDeAssinatura } from "../parceiras";

/* O preço cheio do ano no mensal, para mostrar a economia sem inventar
   número: 12 × 69,90 = 838,80, e 838,80 − 597 = 241,80 (29%). */
const MENSAL_VALOR = 69.9;
const ANUAL_VALOR = 597;
const centavos = (valor: number) => Math.round(valor * 100) / 100;
const ANO_NO_MENSAL = centavos(MENSAL_VALOR * 12);
const ECONOMIA = centavos(ANO_NO_MENSAL - ANUAL_VALOR);
const ANUAL_POR_MES = centavos(ANUAL_VALOR / 12);
const DESCONTO = Math.round((ECONOMIA / ANO_NO_MENSAL) * 100);

const valor = (reais: number) => reais.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 });

/* O que vem dentro, nos dois jeitos de pagar: é o mesmo plano. */
const INCLUSO: { icone: Icon; texto: string }[] = [
  { icone: SquaresFour, texto: `${TOTAL_DE_RECURSOS} recursos, nada bloqueado` },
  { icone: Infinito, texto: "Orçamentos, pedidos e produtos sem limite" },
  { icone: Storefront, texto: "Loja virtual no seu domínio" },
  { icone: UsersThree, texto: "Equipe inteira, sem cobrar por usuário" },
  { icone: WhatsappLogo, texto: "Suporte no WhatsApp" },
];

const GARANTIAS: { icone: Icon; texto: string }[] = [
  { icone: PixLogo, texto: "Pix ou cartão" },
  { icone: ShieldCheck, texto: "Pagamento seguro" },
  { icone: CalendarX, texto: "Sem contrato, cancele quando quiser" },
];

function Linha({ icone: Icone, texto }: { icone: Icon; texto: string }) {
  return (
    <li>
      <Icone size={16} aria-hidden="true" />
      <span>• {texto}</span>
    </li>
  );
}

/*
  Os dois cartões seguem o modelo que o Natan mandou em 30/09/2026: título em
  caixa-alta, selo de economia, preço grande com "/ mês", linha do total,
  listas com ícone e bolinha, botão em caixa-alta e a nota miúda. O mensal
  vem primeiro, como ele pediu, e lista tudo que vem dentro; o anual não
  repete a lista: diz "tudo do mensal", um "+" e o certificado digital A1 de
  brinde, em destaque.
*/
export default function Preco({ assinatura = ASSINATURA_DA_KTALOGU }: { assinatura?: LinksDeAssinatura }) {
  return (
    <section id="preco" className="lp-secao lp-preco">
      <div className="lp-wrap">
        <div className="lp-cabeca" data-revela>
          <p className="lp-rotulo">Preço</p>
          <h2 className="lp-titulo lp-titulo--h2 lp-titulo--centro">Um plano. Dois jeitos de pagar.</h2>
          <p className="lp-lede lp-lede--centro">
            Todo mundo usa o sistema inteiro desde o primeiro dia. Só muda o jeito de pagar.
          </p>
        </div>

        <div className="lp-planos" data-revela-filhos>
          <article className="lp-plano lp-plano--mensal">
            <h3 className="lp-plano-nome">Plano Mensal</h3>
            <p className="lp-plano-valor">
              <strong>R$ {valor(MENSAL_VALOR)}</strong>
              <span>/ mês</span>
            </p>
            <p className="lp-plano-rotulo">Tudo incluso</p>
            <ul className="lp-plano-lista">
              {INCLUSO.map((item) => (
                <Linha key={item.texto} icone={item.icone} texto={item.texto} />
              ))}
            </ul>
            <a href={assinatura.mensal} className="lp-btn lp-btn--tinta">
              Assinar Plano Mensal
            </a>
          </article>

          <article className="lp-plano lp-plano--anual">
            <h3 className="lp-plano-nome">Plano Anual</h3>
            <span className="lp-plano-selo">Economize {DESCONTO}%</span>
            <p className="lp-plano-valor">
              <strong>R$ {valor(ANUAL_POR_MES)}</strong>
              <span>/ mês</span>
            </p>
            <p className="lp-plano-total">Total: R$ {valor(ANUAL_VALOR)}/ano</p>
            <p className="lp-plano-chamada">Mais economia e vantagens</p>
            <p className="lp-plano-rotulo lp-plano-rotulo--tudo">Tudo do mensal</p>
            <span className="lp-plano-mais" aria-hidden="true">
              +
            </span>
            <div className="lp-plano-brinde">
              <span className="lp-plano-brinde-tag">Brinde</span>
              <Certificate size={34} weight="duotone" aria-hidden="true" />
              <strong>Certificado digital A1 grátis</strong>
            </div>
            <a href={assinatura.anual} className="lp-btn lp-btn--papel">
              Assinar Plano Anual
            </a>
            <p className="lp-plano-nota">*Valor para pagamento via Pix ou no cartão à vista. Parcele em até 12x com juros.</p>
          </article>
        </div>

        <ul className="lp-garantias" data-revela aria-label="Condições">
          {GARANTIAS.map((item) => {
            const Icone = item.icone;
            return (
              <li key={item.texto}>
                <Icone size={20} weight="duotone" aria-hidden="true" />
                {item.texto}
              </li>
            );
          })}
        </ul>
        <p className="lp-preco-aviso" data-revela>
          Emissão de NF-e, NFC-e e NFS-e disponível nos dois planos, contratada à parte direto no painel a partir
          de R$ 9,90/mês.
        </p>
      </div>
    </section>
  );
}