import type { CSSProperties } from "react";
import { Coffee, Gift, Printer, Signpost, TShirt } from "@phosphor-icons/react/dist/ssr";
import type { Icon } from "@phosphor-icons/react";

/*
  O gatilho de reconhecimento: a pessoa precisa ver o trabalho DELA listado
  para concluir que o sistema serve para o caso dela. Cinco ofícios, cada um
  num tile de cor cheia, como os cartões do painel.
*/

const OFICIOS: { nome: string; icone: Icon; tile: string; itens: string[] }[] = [
  {
    nome: "Gráfica rápida",
    icone: Printer,
    tile: "var(--tile-violeta)",
    itens: ["Cartão de visita", "Panfleto e flyer", "Banner", "Adesivo", "Encadernação", "Crachá e convite", "Bloco e talão"],
  },
  {
    nome: "Brindes",
    icone: Gift,
    tile: "var(--tile-ceu)",
    itens: ["Caneta", "Chaveiro", "Squeeze", "Mouse pad", "Agenda e caderno", "Kit corporativo", "Catálogo XBZ"],
  },
  {
    nome: "Personalizados",
    icone: TShirt,
    tile: "var(--tile-esmeralda)",
    itens: ["Camiseta", "Boné", "Ecobag", "Almofada", "Caixa de MDF", "Lembrancinha", "DTF e serigrafia"],
  },
  {
    nome: "Sublimação",
    icone: Coffee,
    tile: "var(--tile-ambar)",
    itens: ["Caneca", "Caneca mágica", "Camiseta de poliéster", "Chinelo", "Azulejo", "Almofada", "Papel e transfer"],
  },
  {
    nome: "Comunicação visual",
    icone: Signpost,
    tile: "var(--tile-rosa)",
    itens: ["Fachada em ACM", "Letra caixa", "Luminoso", "Placa", "Plotter de recorte", "Envelopamento", "Lona"],
  },
];

export default function Oficios() {
  return (
    <section id="oficios" className="lp-secao">
      <div className="lp-wrap">
        <div className="lp-cabeca" data-revela>
          <p className="lp-rotulo">Para quem é</p>
          <h2 className="lp-titulo lp-titulo--h2 lp-titulo--centro">Feito pra quem produz.</h2>
          <p className="lp-lede lp-lede--centro">
            Cada ofício tem material, processo e margem diferentes. O Ktalogu foi feito pensando nisso. Não é um
            sistema de loja genérico adaptado pra quem produz.
          </p>
        </div>

        <div className="lp-oficios-grade" data-revela-filhos>
          {OFICIOS.map((oficio) => {
            const Icone = oficio.icone;
            return (
              <div key={oficio.nome} className="lp-oficio" style={{ "--tile": oficio.tile } as CSSProperties}>
                <span className="lp-oficio-icone" aria-hidden="true">
                  <Icone size={26} weight="duotone" />
                </span>
                <h3>{oficio.nome}</h3>
                <ul>
                  {oficio.itens.map((item) => (
                    <li key={item}>{item}</li>
                  ))}
                </ul>
              </div>
            );
          })}
        </div>

        <p className="lp-oficios-fecho" data-revela>
          Tudo isso orçado, produzido, cobrado e entregue pelo mesmo sistema, com a mesma equipe.
        </p>
      </div>
    </section>
  );
}