// Operação Brasil — presença dos parceiros no mapa

const PARTNER_LOCATIONS = [
  {
    id: "cac-agua-boa",
    brand: "CAC Armas",
    place: "Água Boa · MT",
    logo: "../../assets/partners/cac-armas.png",
    position: "map-tag-left map-tag-agua-boa",
  },
  {
    id: "cac-goiania",
    brand: "CAC Armas",
    place: "Goiânia · GO",
    logo: "../../assets/partners/cac-armas.png",
    position: "map-tag-left map-tag-goiania",
  },
  {
    id: "big-formosa",
    brand: "Big Boar",
    place: "Formosa · GO",
    logo: "../../assets/partners/big-boar-clean.png",
    position: "map-tag-right map-tag-formosa",
  },
  {
    id: "big-df",
    brand: "Big Boar",
    place: "Brasília · DF",
    logo: "../../assets/partners/big-boar-clean.png",
    position: "map-tag-right map-tag-df",
  },
  {
    id: "canil-uberlandia",
    brand: "Canil do Caçador",
    place: "Uberlândia · MG",
    logo: "../../assets/partners/canil-do-cacador-clean.png",
    position: "map-tag-right map-tag-uberlandia",
  },
];

function PartnerLocationTag({ partner }) {
  return (
    <div className={`partner-map-tag ${partner.position}`}>
      <div className="partner-map-logo-box" aria-hidden="true">
        <img src={partner.logo} alt="" />
      </div>
      <span className="partner-map-tag-region">{partner.place}</span>
    </div>
  );
}

function Ecossistema() {
  return (
    <section id="parceiros" className="partner-map-section">
      <div className="partner-map-shell">
        <div className="partner-map-layout">
          <div className="partner-map-copy">
            <HudEyebrow style={{ marginBottom: "20px" }}>Parceiros</HudEyebrow>
            <h2>Onde a operação acontece</h2>
            <p>
              Você escolhe a loja no cadastro. Depois do envio confirmado, você segue para o produto ou catálogo
              do parceiro nesta mesma aba.
            </p>
            <div className="partner-map-copy-rule" aria-hidden="true" />
            <span className="partner-map-caption">Lojas parceiras em regiões estratégicas para atender a todo o Brasil</span>
          </div>

          <div className="partner-map-stage" aria-label="Mapa das lojas parceiras da Operação Brasil">
            <picture>
              <img
                className="partner-map-image"
                src="../../assets/landing-page/mapa-operacao-brasil-final.png?v=1"
                alt="Mapa do Brasil com os pontos parceiros em Água Boa, Goiânia, Formosa, Distrito Federal e Uberlândia"
              />
            </picture>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Ecossistema = Ecossistema;