/* IMACX — Sustentabilidade & Certificações.
   Reuses the editorial home system (hm-*, ab-*). Original IMACX copy (PT-PT).
   Certifications held at parent-company / group level: EcoVadis + FCC. */

function SustainabilityPage({ go }) {
  const certs = [
    ["EcoVadis", "Avaliação de sustentabilidade",
      "Enquanto grupo, somos avaliados pela EcoVadis — a referência internacional em desempenho sustentável. A avaliação cobre quatro temas: ambiente, práticas laborais e direitos humanos, ética e compras responsáveis. É a prova, auditada por terceiros, de que o compromisso não fica no discurso."],
    ["FCC", "Conformidade de produtos eletrónicos",
      "Os artigos eletrónicos que personalizamos — power banks, colunas, auscultadores e gadgets — cumprem as normas FCC ao nível do grupo. Significa segurança, compatibilidade eletromagnética e conformidade técnica em cada peça que entra no seu catálogo de campanha."],
  ];

  const commitments = [
    ["01", "Materiais com origem responsável", "Privilegiamos materiais reciclados, recicláveis e de origem controlada — papel de fonte certificada, algodão orgânico, plásticos reciclados. Quando existe uma alternativa mais responsável com a mesma qualidade, é essa que propomos."],
    ["02", "Personalização que dura", "Um brinde que se mantém em uso é o gesto mais sustentável que existe. Escolhemos produtos e técnicas de marcação pensados para durar, não para acabar na gaveta — menos desperdício, mais presença de marca."],
    ["03", "Embalagem reduzida ao essencial", "Eliminamos o plástico desnecessário e dimensionamos cada embalagem ao produto. Menos volume, menos transporte, menos resíduo — sem comprometer a proteção da encomenda."],
    ["04", "Cadeia de fornecimento avaliada", "Trabalhamos com fornecedores que partilham os nossos critérios. Conhecemos fábricas e materiais por dentro e exigimos transparência — é o mesmo conhecimento que nos torna bons compradores que nos torna responsáveis."],
  ];

  return (
    <div className="hm" data-screen-label="Sustentabilidade">
      {/* index bar + masthead */}
      <div className="hm-bleed">
        <div className="hm-idx hm-rule-l">
          <span><span className="sq" />Sustentabilidade &amp; Certificações</span>
          <span className="o">Est. 1998</span>
        </div>

        <section className="bp-masthead">
          <h1>Brindes com <span className="o">responsabilidade</span>.</h1>
          <p>Um brinde corporativo é uma escolha. Pode ser mais um objeto descartável — ou uma peça pensada, com origem responsável e feita para durar. Fazemos questão da segunda. E não estamos sozinhos: enquanto grupo, somos avaliados e certificados de forma independente.</p>
          <div className="hm-cta" style={{ marginTop: 30 }}>
            <button className="btn-accent" onClick={() => go("request")}>Pedir orçamento {Icons.arrow}</button>
            <button className="btn" onClick={() => go("about")}>Sobre a IMACX</button>
          </div>
        </section>
      </div>

      {/* manifesto */}
      <div className="hm-bleed">
        <section className="ab-mani hm-rule">
          <span className="e">— O nosso compromisso</span>
          <p>O brinde mais sustentável é o que <span className="o">continua em uso</span>. Por isso pensamos cada peça para durar — do material à marcação.</p>
        </section>
      </div>

      {/* certifications */}
      <div className="hm-bleed">
        <div className="hm-idx hm-rule">
          <span><span className="sq" />Certificações do grupo</span>
          <span className="num">02 reconhecimentos</span>
        </div>
        <section className="su-certs">
          {certs.map(([mark, kicker, body]) => (
            <article className="su-cert" key={mark}>
              <div className="su-cert-mark" aria-hidden="true"><span>{mark}</span></div>
              <div className="su-cert-text">
                <span className="e">{kicker}</span>
                <h3>{mark}</h3>
                <p>{body}</p>
              </div>
            </article>
          ))}
        </section>
        <p className="su-note">A EcoVadis e a conformidade FCC são detidas ao nível da nossa empresa-mãe e do grupo, beneficiando todos os projetos que acompanhamos.</p>
      </div>

      {/* how we work sustainably */}
      <div className="hm-bleed">
        <div className="hm-idx hm-rule">
          <span>Como o fazemos na prática</span>
          <span className="num">04 compromissos</span>
        </div>
        <section className="hm-cap">
          {commitments.map(([n, h, p]) => (
            <div className="hm-cap-row" key={n}>
              <span className="n">{n}</span>
              <h3>{h}</h3>
              <p>{p}</p>
              <span className="ar">{Icons.arrow}</span>
            </div>
          ))}
        </section>
      </div>

      {/* CTA band */}
      <section className="hm-band">
        <div className="hm-bleed in">
          <div>
            <span className="e">— Próxima campanha</span>
            <h2>Quer uma campanha mais <span className="o">responsável</span>?<br />Nós ajudamos a escolher.</h2>
          </div>
          <div className="r">
            <p>Diga-nos o produto, a quantidade e o prazo. Propomos alternativas com origem responsável e a marcação certa — sem abdicar da qualidade nem do impacto da sua marca.</p>
            <div className="hm-cta">
              <button className="btn-accent btn-lg" onClick={() => go("request")}>Pedir orçamento {Icons.arrow}</button>
              <button className="btn btn-lg" style={{ borderColor: "rgba(255,255,255,.35)", color: "#fff", background: "transparent" }} onClick={() => go("catalog")}>Explorar catálogo</button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

window.SustainabilityPage = SustainabilityPage;