/* IMACX — Galeria / Portefólio.
   A bento-grid portfolio: product pieces on colour, advertising panels and real
   work shots, woven together. Replaces the old "Campanhas" idea. Images are
   meant to be background-free cut-outs, so each card plays with a card colour and
   carries only a tiny informational caption in the corner. */

/* Mono-line product glyphs — stand-ins for the background-free product photos.
   Drawn at 120-unit box, stroke inherits currentColor. */
function GG({ d, vb = "0 0 120 120", fill }) {
  return (
    <svg className="gx-glyph-svg" viewBox={vb} fill="none" xmlns="http://www.w3.org/2000/svg"
      stroke="currentColor" strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round">
      {d}
    </svg>);
}
const GLY = {
  bottle: <GG d={<><path d="M50 18h20v10c0 4 6 7 6 16v54a8 8 0 0 1-8 8H52a8 8 0 0 1-8-8V44c0-9 6-12 6-16V18Z"/><path d="M44 60h32"/></>} />,
  mug:    <GG d={<><rect x="34" y="40" width="44" height="46" rx="6"/><path d="M78 50h10a12 12 0 0 1 0 24H78"/><path d="M44 30v6M58 28v8M72 30v6"/></>} />,
  tote:   <GG d={<><path d="M36 44h48l-5 56H41l-5-56Z"/><path d="M50 44V32a10 10 0 0 1 20 0v12"/></>} />,
  shirt:  <GG d={<><path d="M44 28 30 40l8 12 8-6v46h44V46l8 6 8-12-14-12-12 6a12 12 0 0 1-24 0l-12-6Z"/></>} />,
  cap:    <GG d={<><path d="M24 78c8-34 64-34 72 0"/><path d="M96 78c10 0 14-6 14-6"/><path d="M60 44v6"/></>} />,
  pen:    <GG d={<><path d="M44 90 78 30a8 8 0 0 1 14 8L58 98l-18 6 4-14Z"/><path d="M72 40l14 8"/></>} />,
  usb:    <GG d={<><rect x="40" y="34" width="40" height="56" rx="6"/><rect x="50" y="20" width="20" height="16" rx="3"/><path d="M52 76h16"/></>} />,
  notebook:<GG d={<><rect x="36" y="26" width="48" height="68" rx="4"/><path d="M50 26v68"/><path d="M62 44h14M62 56h14"/></>} />,
  power:  <GG d={<><rect x="38" y="30" width="44" height="60" rx="8"/><path d="M60 44v18m-8-9 8-9 8 9"/><path d="M50 78h20"/></>} />,
  lanyard:<GG d={<><path d="M44 22 60 54l16-32"/><path d="M60 54v8"/><rect x="48" y="62" width="24" height="34" rx="4"/></>} />,
  umbrella:<GG d={<><path d="M22 60a38 38 0 0 1 76 0Z"/><path d="M60 60v34a8 8 0 0 0 16 0"/></>} />,
  box:    <GG d={<><path d="M60 24 30 40v40l30 16 30-16V40L60 24Z"/><path d="M30 40l30 16 30-16M60 56v40"/></>} />,
};

/* Curated card palette — harmonised with the acid-orange brand. */
const PAL = {
  ink:    { bg: "#0a0a0a", ink: "light" },
  orange: { bg: "#ff5a00", ink: "light" },
  sand:   { bg: "#e3d8c2", ink: "dark"  },
  green:  { bg: "#2f3b2a", ink: "light" },
  navy:   { bg: "#1b2740", ink: "light" },
  bord:   { bg: "#4e2230", ink: "light" },
  cream:  { bg: "#f1ece1", ink: "dark"  },
  clay:   { bg: "#c4663a", ink: "light" },
  sky:    { bg: "#dbe4e5", ink: "dark"  },
  olive:  { bg: "#5f6238", ink: "light" },
  stone:  { bg: "#cdc6ba", ink: "dark"  },
  rust:   { bg: "#8c3b1e", ink: "light" },
};

/* Portfolio tiles. type=piece → product on colour; type=ad → advertising panel;
   type=photo → real work shot. size: ""|"w2"|"h2"|"w2 h2". */
const WORKS = [
  { type: "piece", brand: "Sagres", piece: "Garrafa térmica gravada a laser", cat: "garrafas", g: "bottle", pal: "green", size: "h2" },
  { type: "ad", kicker: "Portefólio", head: <>Já fizemos.<br/>Continuamos a<br/>fazer.</>, sub: "Mais de 1.400 projetos entregues a marcas que não aceitam o genérico.", pal: "orange", size: "w2 h2" },
  { type: "piece", brand: "Delta", piece: "Caneca cerâmica serigrafada", cat: "garrafas", g: "mug", pal: "cream", size: "" },
  { type: "piece", brand: "Continente", piece: "Tote bag algodão orgânico", cat: "sacos", g: "tote", pal: "sand", size: "" },
  { type: "photo", brand: "Super Bock", piece: "Kit de verão para ativação de marca", cat: "eventos", img: "uploads/homepage-hero-imacx-summer-brand-experience.jpg", size: "w2" },
  { type: "piece", brand: "NOS", piece: "Powerbank RPET com logo", cat: "tecnologia", g: "power", pal: "ink", size: "" },
  { type: "piece", brand: "Galp", piece: "Caderno A5 com elástico", cat: "escritorio", g: "notebook", pal: "clay", size: "" },
  { type: "piece", brand: "Sumol", piece: "T-shirt heavy bordada", cat: "textil", g: "shirt", pal: "navy", size: "h2" },
  { type: "ad", kicker: "O que fazemos", head: <>Do briefing<br/>à entrega.</>, sub: "Criamos, produzimos e acompanhamos. Equipa interna, prazos cumpridos.", pal: "ink", size: "w2" },
  { type: "piece", brand: "Worten", piece: "Pen USB 32GB personalizada", cat: "tecnologia", g: "usb", pal: "sky", size: "" },
  { type: "piece", brand: "EDP", piece: "Boné bordado 6 painéis", cat: "textil", g: "cap", pal: "olive", size: "" },
  { type: "piece", brand: "Luso", piece: "Garrafa RPET reciclada", cat: "garrafas", g: "bottle", pal: "sky", size: "" },
  { type: "photo", brand: "Compal", piece: "Merchandising de feira", cat: "eventos", img: "uploads/categoria-roupa-personalizada-imacx-brindes.jpg", size: "" },
  { type: "piece", brand: "Vodafone", piece: "Caneta de bambu gravada", cat: "escritorio", g: "pen", pal: "rust", size: "" },
  { type: "piece", brand: "Fidelidade", piece: "Lanyard tecido sublimado", cat: "eventos", g: "lanyard", pal: "bord", size: "h2" },
  { type: "ad", kicker: "Escala", head: <>10 ou 10.000.<br/>O mesmo cuidado.</>, sub: "Da pequena tiragem à grande campanha — sem nunca baixar o nível.", pal: "sand", size: "w2" },
  { type: "piece", brand: "Sonae", piece: "Mochila urbana com logo", cat: "sacos", g: "box", pal: "stone", size: "" },
  { type: "piece", brand: "Bial", piece: "Chávena dupla parede", cat: "garrafas", g: "mug", pal: "green", size: "" },
  { type: "photo", brand: "Salsa", piece: "Vestuário corporativo", cat: "textil", img: "uploads/categoria-bones-personalizados-com-logo-imacx-brindes.jpg", size: "w2" },
  { type: "piece", brand: "Parfois", piece: "Necessaire em lona", cat: "sacos", g: "tote", pal: "clay", size: "" },
  { type: "piece", brand: "Cofidis", piece: "Chapéu de sol de praia", cat: "eventos", g: "umbrella", pal: "orange", size: "" },
  { type: "piece", brand: "Salsa", piece: "Auriculares true wireless", cat: "tecnologia", g: "power", pal: "navy", size: "" },
  { type: "piece", brand: "Delta", piece: "Agenda anual personalizada", cat: "escritorio", g: "notebook", pal: "ink", size: "" },
  { type: "piece", brand: "Sagres", piece: "Saco de cordas serigrafado", cat: "sacos", g: "box", pal: "bord", size: "" },
];

const GAL_CATS = [
  { id: "all", name: "Tudo" },
  { id: "garrafas", name: "Garrafas & Canecas" },
  { id: "textil", name: "Têxtil" },
  { id: "tecnologia", name: "Tecnologia" },
  { id: "sacos", name: "Sacos & Mochilas" },
  { id: "escritorio", name: "Escritório" },
  { id: "eventos", name: "Eventos" },
];

const GAL_BRANDS = ["Sagres", "Luso", "Compal", "Delta", "Super Bock", "Sumol", "Galp", "NOS", "EDP", "Continente", "Vodafone", "Fidelidade", "Worten", "Sonae", "Bial", "Salsa", "Parfois", "Cofidis"];

/* ---- Tile ---------------------------------------------------------------- */
function GTile({ w, i, onOpen }) {
  const pal = PAL[w.pal] || PAL.cream;
  if (w.type === "ad") {
    return (
      <article className={"gx-card gx-ad " + w.size} style={{ "--i": i, background: pal.bg }} data-ink={pal.ink}>
        <div className="gx-ad-in">
          <span className="gx-kick">{w.kicker}</span>
          <h3 className="gx-ad-h">{w.head}</h3>
          <p className="gx-ad-p">{w.sub}</p>
        </div>
        <span className="gx-ad-mark" aria-hidden="true">®</span>
      </article>);
  }
  if (w.type === "photo") {
    return (
      <button className={"gx-card gx-photo " + w.size} style={{ "--i": i }} onClick={() => onOpen(w)} aria-label={w.brand + " — " + w.piece}>
        <img src={w.img} alt={w.piece} loading="lazy" />
        <span className="gx-photo-scrim" />
        <span className="gx-cap" data-on-photo="true">
          <b>{w.brand}</b><i>{w.piece}</i>
        </span>
        <span className="gx-go">{Icons.arrow}</span>
      </button>);
  }
  return (
    <button className={"gx-card gx-piece " + w.size} style={{ "--i": i, background: pal.bg }} data-ink={pal.ink}
      onClick={() => onOpen(w)} aria-label={w.brand + " — " + w.piece}>
      <span className="gx-glyph">{GLY[w.g]}</span>
      <span className="gx-cap"><b>{w.brand}</b><i>{w.piece}</i></span>
      <span className="gx-tag">{(GAL_CATS.find((c) => c.id === w.cat) || {}).name}</span>
      <span className="gx-go">{Icons.arrow}</span>
    </button>);
}

/* ---- Lightbox ------------------------------------------------------------ */
function GLightbox({ work, onClose, onPrev, onNext, go, goCatalog }) {
  useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowLeft") onPrev();
      if (e.key === "ArrowRight") onNext();
    };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [onClose, onPrev, onNext]);

  if (!work) return null;
  const pal = PAL[work.pal] || PAL.cream;
  const catName = (GAL_CATS.find((c) => c.id === work.cat) || {}).name;
  return (
    <div className="gx-lb" onClick={onClose}>
      <button className="gx-lb-x" onClick={onClose} aria-label="Fechar">{Icons.x}</button>
      <button className="gx-lb-nav prev" onClick={(e) => { e.stopPropagation(); onPrev(); }} aria-label="Anterior">‹</button>
      <button className="gx-lb-nav next" onClick={(e) => { e.stopPropagation(); onNext(); }} aria-label="Seguinte">›</button>
      <div className="gx-lb-card" onClick={(e) => e.stopPropagation()}>
        <div className="gx-lb-stage" style={{ background: work.type === "photo" ? "#0a0a0a" : pal.bg }} data-ink={work.type === "photo" ? "light" : pal.ink}>
          {work.type === "photo"
            ? <img src={work.img} alt={work.piece} />
            : <span className="gx-lb-glyph">{GLY[work.g]}</span>}
        </div>
        <div className="gx-lb-info">
          <span className="gx-kick">{catName} · Portefólio IMACX</span>
          <h3>{work.brand}</h3>
          <p className="gx-lb-piece">{work.piece}</p>
          <p className="gx-lb-blurb">Produzido pela IMACX para {work.brand} — do conceito à entrega, com personalização e controlo de qualidade próprios.</p>
          <div className="gx-lb-cta">
            <button className="btn-accent" onClick={() => { onClose(); go("request"); }}>Quero algo assim {Icons.arrow}</button>
            <button className="btn" onClick={() => { onClose(); goCatalog(work.cat === "all" ? null : work.cat); }}>Ver produtos</button>
          </div>
        </div>
      </div>
    </div>);
}

/* ---- Page ---------------------------------------------------------------- */
function GalleryPage({ go, goCatalog }) {
  const [cat, setCat] = useState("all");
  const [open, setOpen] = useState(null);
  const gridRef = useRef(null);

  const visible = useMemo(
    () => WORKS.filter((w) => cat === "all" || w.type === "ad" || w.cat === cat),
    [cat]);
  const openable = useMemo(() => visible.filter((w) => w.type !== "ad"), [visible]);

  const openWork = (w) => setOpen(openable.indexOf(w));
  const step = (dir) => setOpen((n) => (n + dir + openable.length) % openable.length);

  return (
    <div className="gx">
      {/* index + masthead */}
      <div className="hm-bleed">
        <div className="hm-idx hm-rule-l">
          <span><span className="sq" />Portefólio · Casos de marca</span>
          <span>Lisboa · Porto</span>
          <span className="o">{WORKS.filter((w) => w.type !== "ad").length}+ peças</span>
        </div>
        <section className="gx-mast">
          <h1 className="gx-h1">
            <span className="ln"><span>O que já</span></span>
            <span className="ln"><span><em className="o">fizemos</em> para</span></span>
            <span className="ln"><span>grandes marcas.</span></span>
          </h1>
          <div className="gx-mast-side">
            <p>Não é um catálogo — é prova. Cada peça abaixo saiu da nossa equipa para uma marca real, do primeiro esboço à caixa entregue. É o que os nossos clientes querem mesmo ver: <b>com quem trabalhamos</b> e <b>o que sabemos fazer</b>.</p>
            <div className="gx-mast-stats">
              <div className="s"><b className="num">1.400+</b><span>Projetos entregues</span></div>
              <div className="s"><b className="num">200+</b><span>Marcas servidas</span></div>
              <div className="s"><b className="num">30</b><span>Anos de mercado</span></div>
            </div>
          </div>
        </section>
      </div>

      {/* brand wall — marquee */}
      <div className="hm-bleed">
        <div className="hm-idx hm-rule"><span><span className="sq" />Marcas que confiam na IMACX</span><span className="num">Seleção</span></div>
      </div>
      <div className="gx-marquee" aria-hidden="true">
        <div className="gx-mq-track">
          {[...GAL_BRANDS, ...GAL_BRANDS].map((b, i) => <span className="gx-mq-item" key={i}>{b}<span className="gx-mq-dot" /></span>)}
        </div>
      </div>

      {/* filter + bento */}
      <div className="hm-bleed">
        <div className="gx-bar hm-rule">
          <div className="gx-filters">
            {GAL_CATS.map((c) =>
              <button key={c.id} className="gx-chip" data-on={cat === c.id} onClick={() => setCat(c.id)}>{c.name}</button>)}
          </div>
          <span className="gx-count num">{openable.length} peças</span>
        </div>

        <div className="gx-bento" ref={gridRef} key={cat}>
          {visible.map((w, i) =>
            <GTile key={(w.brand || "ad") + "-" + i} w={w} i={i} onOpen={openWork} />)}
        </div>
      </div>

      {/* what we do — techniques */}
      <div className="hm-bleed">
        <div className="hm-idx hm-rule"><span><span className="sq" />Como personalizamos</span><span className="num">06 técnicas</span></div>
        <section className="gx-techs">
          {[
            ["Serigrafia", "Cor sólida, vibrante e durável. Ideal para grandes tiragens em têxtil e sacos."],
            ["Bordado", "Relevo e textura premium. O acabamento que comunica qualidade no vestuário."],
            ["Gravação laser", "Marca permanente em metal, vidro e madeira. Discreta e sofisticada."],
            ["Transferência digital", "Full color sem limite de cores. Para logótipos complexos e fotografia."],
            ["Tampografia", "Precisão em superfícies curvas e pequenas — canetas, gadgets, brindes técnicos."],
            ["Sublimação", "Cor que entranha no tecido. Lanyards, têxtil técnico e peças all-over."],
          ].map(([h, p], i) =>
            <div className="gx-tech" key={i}>
              <span className="n num">{String(i + 1).padStart(2, "0")}</span>
              <h4>{h}</h4>
              <p>{p}</p>
            </div>)}
        </section>
      </div>

      {/* closing CTA */}
      <section className="hm-band">
        <div className="hm-bleed in">
          <div>
            <span className="e">— O próximo caso é o seu</span>
            <h2>Vamos pôr a sua marca <span className="o">nesta galeria</span>.</h2>
          </div>
          <div className="r">
            <p>Diga-nos a marca, a ocasião e a quantidade. Respondemos com uma proposta — e com ideias que ainda não pediu.</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={() => goCatalog(null)}>Explorar catálogo</button>
            </div>
          </div>
        </div>
      </section>

      {open != null
        ? <GLightbox work={openable[open]} onClose={() => setOpen(null)} onPrev={() => step(-1)} onNext={() => step(1)} go={go} goCatalog={goCatalog} />
        : null}
    </div>);
}

window.GalleryPage = GalleryPage;