/* IMACX — Sobre nós (About). Reuses the editorial home system (hm-*). */

function AboutPage({ go }) {
  const year = "2026";

  const caps = [
    ["01", "Especialistas em grandes marcas", "Brindes corporativos para grandes empresas. Conhecemos fornecedores, fábricas e catálogos como poucos no mercado."],
    ["02", "Experiência que se nota", "Equipa com 20 a 30 anos de mercado. Compradores seniores que sabem onde procurar, o que pedir e como negociar."],
    ["03", "10 ou 10.000, o mesmo cuidado", "A maioria dos fornecedores foca-se nas encomendas grandes. Tratamos uma de 10 com o mesmo rigor de uma de 10.000 — do orçamento à entrega."],
    ["04", "Account managers dedicados", "Uma equipa que fala a sua linguagem e acompanha o pedido do briefing à entrega, sem o passar de mão em mão."],
  ];

  const values = [
    ["Proposta", "Mais do que produzir. Propomos.", "Conhecemos catálogos, fornecedores, materiais e técnicas. Transformamos o briefing numa proposta alinhada com a marca, o orçamento e o prazo."],
    ["Escala", "10 ou 10.000. O mesmo cuidado.", "Acompanhamos encomendas pequenas, médias e grandes com o mesmo rigor: produto, validação de marcação, amostras, produção e entrega."],
    ["Capacidade", "Equipa interna. Velocidade real.", "Acabamentos, embalagem e personalização manual com mais controlo operacional, menos subcontratação e mais segurança nos prazos."],
  ];

  return (
    <div className="hm">
      {/* index bar + masthead */}
      <div className="hm-bleed">
        <div className="hm-idx hm-rule-l">
          <span><span className="sq" />Sobre a IMACX · Brindes corporativos personalizados</span>
          <span>Lisboa · Porto</span>
          <span className="o">Est. {year}</span>
        </div>

        <section className="bp-masthead">
          <h1>Não somos apenas mais uma empresa de <span className="o">brindes</span>.</h1>
          <p>Somos o parceiro estratégico das marcas que precisam de reputação, confiança e execução. Criamos, produzimos e acompanhamos brindes corporativos para empresas, campanhas, eventos e ativações de marca — de 10 a 10.000 unidades, com o mesmo rigor do briefing à entrega.</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("catalog")}>Explorar catálogo</button>
          </div>
        </section>
      </div>

      {/* full-bleed editorial image */}
      <div className="hm-bleed">
        <figure className="ab-hero">
          <img src="uploads/homepage-hero-imacx-universe-flat-lay.jpg" alt="Universo de brindes IMACX personalizados" loading="lazy" />
        </figure>
      </div>

      {/* manifesto */}
      <div className="hm-bleed">
        <section className="ab-mani hm-rule">
          <span className="e">— O que nos torna diferentes</span>
          <p>Mais do que produzir, <span className="o">propomos</span>. Conhecemos o mercado por dentro — fornecedores, fábricas, materiais e técnicas — e usamos esse conhecimento para transformar um briefing numa decisão acertada. O brinde é o último detalhe de uma marca bem pensada.</p>
        </section>
      </div>

      {/* scale statement */}
      <div className="hm-bleed">
        <section className="ab-scale hm-rule">
          <div className="ab-scale-fig"><span>10</span> <span className="ar">→</span> <span className="o">10.000</span></div>
          <div className="ab-scale-side">
            <p>O mesmo cuidado, em qualquer escala. Encomendas pequenas, médias e grandes acompanhadas do briefing à entrega — com produto e personalização sempre discriminados.</p>
            <button className="btn-accent" onClick={() => go("request")}>Começar um pedido {Icons.arrow}</button>
          </div>
        </section>
      </div>

      {/* how we work */}
      <div className="hm-bleed">
        <div className="hm-idx hm-rule">
          <span>Como trabalhamos</span>
          <span className="num">04 capacidades</span>
        </div>
        <section className="hm-cap">
          {caps.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>

      {/* internal team feature */}
      <div className="hm-bleed">
        <section className="hm-feat hm-rule" style={{ borderTopColor: "var(--line)" }}>
          <figure style={{ margin: 0, border: "var(--hairline) solid var(--line)", overflow: "hidden" }}>
            <img src="uploads/homepage-hero-imacx-summer-brand-experience.jpg" alt="Produção e personalização IMACX" loading="lazy" style={{ display: "block", width: "100%", height: "100%", objectFit: "cover", aspectRatio: "4/3" }} />
          </figure>
          <div>
            <span className="e">Capacidade · <i>Equipa interna</i></span>
            <h2>Equipa interna. Velocidade real.</h2>
            <p>Mão-de-obra própria para acabamentos, embalagem e personalização manual. Menos subcontratação, mais controlo, prazos cumpridos. É o que nos permite tratar uma encomenda de 10 com a mesma seriedade de uma de 10.000.</p>
            <div className="hm-cta">
              <button className="btn-accent" onClick={() => go("request")}>Pedir orçamento {Icons.arrow}</button>
            </div>
          </div>
        </section>
      </div>

      {/* values trio */}
      <div className="hm-bleed">
        <div className="hm-idx hm-rule">
          <span><span className="sq" />Os nossos princípios</span>
          <span className="o num">03</span>
        </div>
        <section className="ab-values">
          {values.map(([n, h, p], i) => (
            <div className="ab-val" key={i}>
              <div className="n">{n}</div>
              <h3>{h}</h3>
              <p>{p}</p>
            </div>
          ))}
        </section>
      </div>

      {/* locations */}
      <div className="hm-bleed">
        <section className="ab-locs hm-rule">
          <div className="ab-loc">
            <span className="e">Onde estamos</span>
            <h3>Lisboa · Porto</h3>
            <p>Dois polos, uma equipa. Compradores seniores, account managers dedicados e capacidade de produção interna ao serviço de todo o país.</p>
          </div>
          <div className="ab-loc-contact">
            <span className="e">Fale connosco</span>
            <a className="ab-tel" href="tel:+351210000000">+351 210 000 000</a>
            <a className="ab-mail" href="mailto:ola@imacx.pt">ola@imacx.pt</a>
            <div className="ab-hours"><span>Segunda a sexta-feira</span><span className="num">9:00 às 18:00</span></div>
          </div>
        </section>
      </div>

      {/* CTA band */}
      <section className="hm-band">
        <div className="hm-bleed in">
          <div>
            <span className="e">— Próxima campanha</span>
            <h2>Conte-nos o que precisa.<br />Respondemos com uma <span className="o">proposta</span>.</h2>
          </div>
          <div className="r">
            <p>Envie produto, quantidade, prazo e logótipo. A equipa IMACX responde com uma proposta ajustada — produto e personalização sempre discriminados.</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.AboutPage = AboutPage;