/* IMACX — elevated editorial Home (overrides HomePage from pages.jsx) */

/* Hero heading split into per-character spans for a staggered "written" entrance. */
const HERO_LINES = [
  [{ t: "Brindes que" }],
  [{ t: "a sua marca" }],
  [{ t: "merece", cls: "o" }, { t: "\u00ae", cls: "reg" }]
];

function currentSeasonalCampaign(now = new Date()) {
  const month = now.getMonth() + 1;
  if (month === 12) return {
    label: "Natal",
    familyId: "presentes",
    image: "/images/home-families/presentes.webp",
    imageWidth: 720,
    imageHeight: 720,
    eyebrow: "Presentes que aproximam marcas e pessoas",
    title: "Brindes de Natal personalizados",
    description: "Presentes empresariais, kits e detalhes personalizados para agradecer a clientes, equipas e parceiros.",
    cards: [
      { familyId: "embalagem-especial", image: "/images/home-families/embalagem-especial.webp", title: "Embalagens especiais", text: "Uma apresentação à altura do presente." },
      { familyId: "canecas-frascos-e-termos", image: "/images/home-families/canecas-frascos-e-termos.webp", title: "Canecas e termos", text: "Presentes úteis para todos os dias." },
    ],
  };
  if (month >= 6 && month <= 9) return {
    label: "Verão",
    familyId: "verao-e-praia",
    image: "/images/brand/home/homepage-hero-imacx-summer-brand-experience.webp",
    imageWidth: 1400,
    imageHeight: 632,
    eyebrow: "Merchandising que faz a sua marca brilhar",
    title: "Brindes personalizados com o seu logótipo",
    description: "Surpreenda clientes, equipas e convidados com brindes que falam por si. Opções originais, prontas a marcar, do conceito à entrega.",
    cards: [
      { familyId: "sacos", image: "/images/home-families/sacos.webp", title: "Totebags personalizados", text: "Para dar visibilidade à sua marca." },
      { familyId: "canecas-frascos-e-termos", image: "/images/brand/home/homepage-hero-imacx-premium-bottle.webp", title: "Garrafas com logo", text: "Para desfrutar a sua bebida." },
    ],
  };
  if (month >= 3 && month <= 5) return {
    label: "Primavera",
    familyId: "lazer-e-tempo-livre",
    image: "/images/home-families/lazer-e-tempo-livre.webp",
    imageWidth: 720,
    imageHeight: 720,
    eyebrow: "Ideias para voltar a viver lá fora",
    title: "Brindes para a primavera",
    description: "Produtos personalizados para eventos, equipas e campanhas que regressam aos espaços exteriores.",
    cards: [
      { familyId: "eventos-e-festa", image: "/images/home-families/eventos-e-festa.webp", title: "Eventos e ativações", text: "Materiais para marcar presença." },
      { familyId: "sacos", image: "/images/home-families/sacos.webp", title: "Sacos reutilizáveis", text: "A sua marca em movimento." },
    ],
  };
  return {
    label: "Chuva e Frio",
    familyId: "chuva-e-frio",
    image: "/images/home-families/chuva-e-frio.webp",
    imageWidth: 720,
    imageHeight: 720,
    eyebrow: "Produtos úteis para os dias frios",
    title: "Brindes para chuva e frio",
    description: "Escolhas práticas e personalizáveis para proteger, aquecer e manter a sua marca presente durante o inverno.",
    cards: [
      { familyId: "textil", image: "/images/home-families/textil.webp", title: "Têxtil personalizado", text: "Conforto com a identidade da sua marca." },
      { familyId: "canecas-frascos-e-termos", image: "/images/home-families/canecas-frascos-e-termos.webp", title: "Canecas e termos", text: "Bebidas quentes sempre por perto." },
    ],
  };
}

function homeFamilyImage(family) {
  if (family?.hasCategoryImage) return `/images/home-families/${family.id}.webp`;
  return family?.image || (PRODUCTS.find((product) => product.fam === family?.id)?.img || "");
}

window.getCurrentSeasonalCampaign = currentSeasonalCampaign;

function SplitH1() {
  let gi = 0;
  return (
    <h1 className="hm-h1-split">
      {HERO_LINES.map((segs, li) =>
        <span className="ln" key={li}>
          {segs.map((seg, si) =>
            <span className={"sg" + (seg.cls ? " " + seg.cls : "")} key={si}>
              {Array.from(seg.t).map((ch, ci) => {
                if (ch === " ") return <span className="sp" key={ci}> </span>;
                const i = gi++;
                return <span className="ch" key={ci} style={{ "--i": i }}>{ch}</span>;
              })}
            </span>
          )}
        </span>
      )}
    </h1>);
}

/* Manifesto illustration: a gift box draws itself line by line when the section
   scrolls into view, then gently floats — the brinde as the last detail. */
function ManifestoBlock() {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el || el.nodeType !== 1) return;
    if (!("IntersectionObserver" in window)) { setInView(true); return; }
    const io = new IntersectionObserver((ents) => {
      ents.forEach((e) => { if (e.isIntersecting) { setInView(true); io.disconnect(); } });
    }, { threshold: 0.18, rootMargin: "0px 0px -12% 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  return (
    <div className="hm-bleed">
      <section ref={ref} className={"hm-manifesto" + (inView ? " is-in" : "")}>
        <div className="hm-mani-text">
          <span className="e">— O que nos torna diferentes</span>
          <p>Mais do que produzir, <span className="u">propomos</span>. O brinde é o último detalhe de uma <span className="o">marca bem pensada</span>.</p>
        </div>
        <div className="hm-mani-art" aria-hidden="true">
          <svg className="mani-svg gift-svg" viewBox="0 0 460 400" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g transform="translate(356 120)"><path className="gift-spark sp1" d="M0 -10 C 1.5 -2.5 2.5 -1.5 10 0 C 2.5 1.5 1.5 2.5 0 10 C -1.5 2.5 -2.5 1.5 -10 0 C -2.5 -1.5 -1.5 -2.5 0 -10 Z" /></g>
            <g transform="translate(110 262) scale(.72)"><path className="gift-spark sp2" d="M0 -10 C 1.5 -2.5 2.5 -1.5 10 0 C 2.5 1.5 1.5 2.5 0 10 C -1.5 2.5 -2.5 1.5 -10 0 C -2.5 -1.5 -1.5 -2.5 0 -10 Z" /></g>
            <g className="gift-wrap">
              <path className="gift-draw gift-box d-body" pathLength="1" d="M158 192 H302 V332 H158 Z" />
              <path className="gift-draw gift-box d-lid" pathLength="1" d="M144 156 H316 V192 H144 Z" />
              <path className="gift-draw gift-accent d-ribh" pathLength="1" d="M144 174 H316" />
              <path className="gift-draw gift-accent d-ribv" pathLength="1" d="M230 156 V332" />
              <path className="gift-draw gift-accent d-bowL" pathLength="1" d="M230 150 C 196 116 164 138 200 151 C 215 156 226 155 230 150" />
              <path className="gift-draw gift-accent d-bowR" pathLength="1" d="M230 150 C 264 116 296 138 260 151 C 245 156 234 155 230 150" />
              <path className="gift-draw gift-accent d-tailL" pathLength="1" d="M223 156 C 213 178 209 192 200 206" />
              <path className="gift-draw gift-accent d-tailR" pathLength="1" d="M237 156 C 247 178 251 192 260 206" />
              <circle className="gift-knot" cx="230" cy="152" r="7" />
            </g>
          </svg>
        </div>
      </section>
    </div>);
}

function HomePage({ go, goCatalog, openProduct }) {
  const year = new Date().getFullYear();
  const season = currentSeasonalCampaign();
  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 fams = FAMILIES.filter((f) => f.displayInPrimaryNav !== false).slice(0, 8);
  const seasonalProducts = PRODUCTS.filter((product) => product.fam === season.familyId).slice(0, 4);

  return (
    <div className="hm">
      <div className="hm-bleed">

        {/* index bar */}
        <div className="hm-idx hm-rule-l">
          <span><span className="sq" />Brindes corporativos personalizados</span>
          <span className="o">Est. 1998</span>
        </div>

        {/* HERO */}
        <section className="hm-hero">
          <SplitH1 />
          <div className="meta">
            <p>Não somos apenas mais uma empresa de brindes. Somos o parceiro estratégico das marcas que precisam de reputação, confiança e execução.</p>
            <div className="hm-cta">
              <button className="btn-accent" onClick={() => go("catalog")}>Explorar catálogo {Icons.arrow}</button>
              <button className="btn" onClick={() => go("request")}>Pedir orçamento</button>
            </div>
            <div className="stat">
              <b className="num">10 → 10K</b>
              <span>Da pequena tiragem à grande campanha, com o mesmo cuidado.</span>
            </div>
          </div>
        </section>

      </div>

      {/* SUMMER CAMPAIGN — bento grid */}
      <div className="hm-bleed">
        <div className="hm-idx hm-rule">
          <span><span className="sq" />Campanha de {season.label} · {year}</span>
          <span className="o" style={{ cursor: "pointer" }} onClick={() => goCatalog(season.familyId)}>Ver campanha →</span>
        </div>
        <section className="hm-camp">
          <div className="hm-camp-grid">
            <div className="hm-camp-card hm-camp-card--wide" onClick={() => goCatalog(season.familyId)}>
              <div className="hm-camp-bg">
                <img src={season.image} alt="" loading="lazy" decoding="async" width={season.imageWidth} height={season.imageHeight} />
                <div className="hm-camp-scrim brand" />
              </div>
              <div className="hm-camp-in on-photo">
                <span className="e">{season.eyebrow}</span>
                <h3>{season.title}</h3>
                <p>{season.description}</p>
                <span className="pill">Descubra as novidades {Icons.arrow}</span>
              </div>
            </div>
            {season.cards.map((card) => (
              <div className="hm-camp-card" key={card.familyId} onClick={() => goCatalog(card.familyId)}>
                <div className="hm-camp-bg">
                  <img src={card.image} alt="" loading="lazy" decoding="async" width="720" height="720" />
                  <div className="hm-camp-scrim bottom" />
                </div>
                <div className="hm-camp-in on-photo">
                  <h3>{card.title}</h3>
                  <p>{card.text}</p>
                  <span className="pill">Ver produtos {Icons.arrow}</span>
                </div>
              </div>
            ))}
          </div>
        </section>
      </div>

      {/* MANIFESTO */}
      <ManifestoBlock />

      {/* FAMILIES — typographic index */}
      <div className="hm-bleed">
        <section className="hm-fams">
          <div className="hm-idx hm-rule" style={{ borderBottom: 0 }}>
            <span><span className="sq" />Catálogo por família</span>
            <span className="o" style={{ cursor: "pointer" }} onClick={() => go("categories")}>Ver todas as categorias →</span>
          </div>
          <div className="fam-bento">
            {fams.map((t, i) =>
            <div className={"fam-tile " + (i === 0 || i === 5 ? "w2" : i === 1 || i === 2 ? "h2" : "")} key={t.id} onClick={() => goCatalog(t.id)}>
                <img src={homeFamilyImage(t)} alt={t.name} loading="lazy" decoding="async" width="720" height="720" />
                <div className="scrim" />
                <div className="ft-in">
                  <div className="ft-txt">
                    <div className="ft-name">{t.name}</div>
                    <div className="ft-n num">{t.n} referências</div>
                  </div>
                  <span className="ft-go">{Icons.arrow}</span>
                </div>
              </div>
            )}
          </div>
        </section>
      </div>

      {/* CAPABILITIES — full-width hairline index */}
      <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>
        <a className="hm-callout" onClick={() => go("gallery")}>
          <span className="hm-callout-txt">Veja estas capacidades aplicadas a <span className="o">casos reais de marca</span>.</span>
          <span className="hm-callout-cta">Ver galeria {Icons.arrow}</span>
        </a>
      </div>

      {/* FEATURED campaign split */}
      <div className="hm-bleed">
        <section className="hm-feat hm-rule" style={{ borderTopColor: "var(--line)" }}>
          <figure style={{ margin: 0, border: "var(--hairline) solid var(--line)" }}>
            <Placeholder ratio="4/3" label="Equipa interna" />
          </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.</p>
            <div className="hm-cta">
              <button className="btn-accent" onClick={() => go("request")}>Pedir orçamento {Icons.arrow}</button>
            </div>
          </div>
        </section>
      </div>

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

      {/* SELECTED products */}
      <div className="hm-bleed">
        <section className="hm-sel">
          <div className="hm-sel-hd hm-rule" style={{ borderTopColor: "var(--line)", paddingTop: 22 }}>
            <div>
              <span className="e">Seleção de {season.label}</span>
              <h2>Mais pedidos agora</h2>
            </div>
            <a className="accent" style={{ cursor: "pointer", fontSize: "var(--t-body-s)", fontWeight: 500 }} onClick={() => go("catalog")}>Ver catálogo →</a>
          </div>
          <div className="pgrid" data-cols="4">
            {seasonalProducts.map((p) => <ProductCard key={p.id} p={p} onOpen={openProduct} />)}
          </div>
        </section>
      </div>

      {/* CLOSING 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.HomePage = HomePage;