/*
  Integrações, com a logo de cada uma. Cada nome só aparece porque a
  integração existe de fato no sistema: pagamento e Pix pelo Mercado Pago e
  pelo Asaas, frete pelo Melhor Envio e SuperFrete, e o catálogo da XBZ
  entrando no estoque. As logos moram em assets/integracoes.
*/

import type { CSSProperties } from "react";
import Image, { type StaticImageData } from "next/image";
import mercadoPago from "../assets/integracoes/mercado-pago.svg";
import asaas from "../assets/integracoes/asaas.svg";
import melhorEnvio from "../assets/integracoes/melhor-envio.png";
import superFrete from "../assets/integracoes/superfrete.png";
import xbz from "../assets/integracoes/xbz.png";

type Integracao = {
  nome: string;
  logo: StaticImageData;
  /* Altura em px: cada logo tem uma proporção, e a mesma altura para todas
     deixaria umas gigantes e outras miúdas. */
  altura: number;
  texto: string;
  /* A logo do Asaas é só o símbolo (as asas): o nome entra escrito ao lado. */
  nomeAoLado?: boolean;
};

const INTEGRACOES: Integracao[] = [
  { nome: "Mercado Pago", logo: mercadoPago, altura: 32, texto: "Pagamento no checkout da loja e Pix na hora no balcão. A venda só entra depois que o pagamento é aprovado." },
  { nome: "Asaas", logo: asaas, altura: 36, nomeAoLado: true, texto: "Outro jeito de receber: Pix pelo Asaas na loja e no balcão, com a mesma regra de só entrar depois de aprovado." },
  { nome: "Melhor Envio", logo: melhorEnvio, altura: 42, texto: "Calcula o frete dentro do carrinho e soma o prazo de produção ao prazo da entrega." },
  { nome: "SuperFrete", logo: superFrete, altura: 38, texto: "Outra transportadora cotando junto. O cliente escolhe a mais barata ou a mais rápida." },
  { nome: "XBZ Brindes", logo: xbz, altura: 44, texto: "O catálogo de brindes entra direto no seu estoque, com foto e preço." },
];

export default function Integracoes() {
  return (
    <section className="lp-secao lp-secao--apoio lp-integracoes">
      <div className="lp-wrap">
        <div className="lp-cabeca" data-revela>
          <p className="lp-rotulo">Integrações</p>
          <h2 className="lp-titulo lp-titulo--h2 lp-titulo--centro">Já conectado com o que você usa.</h2>
          <p className="lp-lede lp-lede--centro">Pagamento, frete e fornecedor já ligados. Você só liga a sua conta.</p>
        </div>

        <div className="lp-integracoes-lista" data-revela-filhos>
          {INTEGRACOES.map((item) => (
            <div key={item.nome} className="lp-integracao">
              <span className="lp-integracao-logo">
                <Image src={item.logo} alt={item.nome} style={{ "--altura": `${item.altura}px` } as CSSProperties} />
                {item.nomeAoLado ? (
                  <span className="lp-integracao-nome" aria-hidden="true">
                    {item.nome}
                  </span>
                ) : null}
              </span>
              <p>{item.texto}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}