// Operação Brasil — portfólio visual de equipamentos.
const { SectionHeading: OfSH, LegalNote: OfLegal } = window.OperaOBrasilDesignSystem_ac060f;

const OFFER_PRODUCTS = [
  {
    name: "G2C CAFO Black", finish: "CAFO Black", image: "../../assets/products/clean/g2c-cafo.png",
    note: "Compacta, leve e funcional para uso cotidiano.",
    specs: [["Capacidade", "12+1"], ["Comprimento", "158,7 mm"], ["Largura", "32,1 mm"], ["Peso", "610 g"]],
  },
  {
    name: "GX4 Carry Grafeno", finish: "Grafeno", image: "../../assets/products/clean/gx4-carry-grafeno.png",
    note: "Compacta, ergonômica e pronta para mira óptica.",
    specs: [["Capacidade", "15+1"], ["Comprimento", "166,5 mm"], ["Largura", "28,3 mm"], ["Peso", "593 g"]],
  },
  {
    name: "GX4 Carry Tungstênio", finish: "Tungstênio", image: "../../assets/products/clean/gx4-carry-tungstenio.png",
    note: "Plataforma GX4 Carry com acabamento cinza metálico.",
    specs: [["Capacidade", "15+1"], ["Comprimento", "166,5 mm"], ["Largura", "28,3 mm"], ["Peso", "593 g"]],
  },
  {
    name: "G3 Tungstênio", finish: "Tungstênio", image: "../../assets/products/clean/g3-tungstenio.png",
    note: "Empunhadura ampla, gatilho de 3ª geração e trilho Picatinny.",
    specs: [["Capacidade", "15+1 / 17+1"], ["Comprimento", "184,8 mm"], ["Largura", "32,5 mm"], ["Peso", "700 g"]],
  },
  {
    name: "G3 T.O.R.O.", finish: "Optic Ready", image: "../../assets/products/clean/g3-toro.png",
    note: "Pronta para mira óptica e acompanhada por dois carregadores.",
    specs: [["Capacidade", "15+1 / 17+1"], ["Comprimento", "184,8 mm"], ["Largura", "32,5 mm"], ["Peso", "700 g"]],
  },
];

function OfferSpecs({ specs }) {
  return (
    <div className="offer-specs">
      {specs.map(([label, value], index) => (
        <div className="offer-spec" key={label}>
          <span aria-hidden="true" className="offer-spec-mark">{["▤", "↔", "↕", "◆"][index]}</span>
          <span><small>{label}</small><strong>{value}</strong></span>
        </div>
      ))}
    </div>
  );
}

function Oferta() {
  return (
    <section id="oferta" className="offer-section">
      <div className="offer-shell">
        <HudEyebrow style={{ marginBottom: "20px" }}>Portfólio da operação</HudEyebrow>
        <OfSH title="Cinco equipamentos, cinco oportunidades"
          description="Compare rapidamente os modelos participantes da Operação Brasil." />

        <div className="offer-grid">
          {OFFER_PRODUCTS.map((product, index) => (
            <article className="weapon-card" key={product.name}>
              <div className="weapon-visual">
                <span className="weapon-index">{String(index + 1).padStart(2, "0")}</span>
                <span className="weapon-caliber">.38 TPC</span>
                <img className="weapon-image" src={product.image} alt={product.name} loading="lazy" decoding="async" />
              </div>
              <div className="weapon-copy">
                <span className="weapon-finish">{product.finish}</span>
                <h3>{product.name}</h3>
                <p>{product.note}</p>
              </div>
              <OfferSpecs specs={product.specs} />
            </article>
          ))}
        </div>

        <div style={{ marginTop: "26px" }}>
          <OfLegal icon={false}>* Imagens ilustrativas. <a href="#condicoes-completas">Detalhes no rodapé.</a></OfLegal>
        </div>
      </div>
    </section>
  );
}
window.Oferta = Oferta;