// ====================== HERO SLIDER ======================
const SLIDES = [
  {
    pre: "SUPRIMENTOS CORPORATIVOS", hi: "PARA SUA EMPRESA",
    sub: "Especialista em Material de Escritório,\nLimpeza e Copa.",
    cta: "VER PRODUTOS",
    bg: "assets/hero/banner-geral.png", fit: "contain", scale: 1.24,
    feats: [],
    slot: "Foto dos produtos: galão Audax 5L, frasco 1L, spray, copos, café Santa Clara, esponjas e panos sobre bancada de madeira",
  },
  {
    pre: "COPA E COZINHA", hi: "ABASTECIDA",
    sub: "Café, açúcar, copos, talheres e higiene para o dia a dia da empresa.",
    cta: "VER COPA E COZINHA", href: "Copa e Cozinha.html",
    bg: "assets/hero/copa-banner.png",
    feats: [],
    slot: "Foto da linha de copa e cozinha",
  },
  {
    pre: "ABASTEÇA SEU", hi: "ESCRITÓRIO",
    sub: "Papelaria, informática e materiais com pedido mínimo facilitado.",
    cta: "VER ESCRITÓRIO", href: "Materiais de Escritorio.html",
    bg: "assets/hero/escritorio-banner.png",
    feats: [],
    slot: "Foto de materiais de escritório: porta-canetas, papéis, canetas e organizadores",
  },
  {
    pre: "LINHA DE LIMPEZA", hi: "PROFISSIONAL",
    sub: "Álcool 70%, desinfetantes e muito mais com preço de distribuidor.",
    cta: "VER LIMPEZA", href: "Produtos de Limpeza.html",
    bg: "assets/hero/limpeza-banner.png",
    feats: [],
    slot: "Foto da linha Audax: galões e frascos de álcool 70% e desinfetantes",
  },
];

function Hero({ onCta }) {
  const [i, setI] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const n = SLIDES.length;
  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setI((p) => (p + 1) % n), 5500);
    return () => clearInterval(t);
  }, [paused, n]);
  const go = (d) => setI((p) => (p + d + n) % n);
  const s = SLIDES[i];

  const arrow = { position: "absolute", top: "50%", transform: "translateY(-50%)", zIndex: 20, width: 44, height: 44, borderRadius: "50%", background: "rgba(15,29,57,.55)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", backdropFilter: "blur(3px)", transition: "background .15s" };

  return (
    <div onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}
      className="jgf-hero"
      style={{ position: "relative", height: 432, overflow: "hidden", background: "var(--navy)" }}>
      {/* full-bleed background (per-slide banner) — todos pré-carregados, crossfade por opacidade */}
      <div style={{ position: "absolute", inset: 0 }}>
        {SLIDES.map((sl, k) => (
          <img key={sl.bg} src={sl.bg} alt="" aria-hidden="true" decoding="async"
            style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: sl.fit || "cover", objectPosition: sl.img ? "center 82%" : "right center", transform: sl.scale ? `scale(${sl.scale})` : "none", transformOrigin: "right center", opacity: k === i ? 1 : 0, transition: "opacity .45s ease" }} />
        ))}
      </div>
      {/* diagonal navy overlay (left) */}
      <div className="jgf-hero-ov1" style={{ position: "absolute", inset: 0, background: "linear-gradient(105deg, var(--navy-3) 0%, var(--navy) 42%, transparent 70%)", clipPath: "polygon(0 0, 60% 0, 46% 100%, 0 100%)" }} />
      <div className="jgf-hero-ov2" style={{ position: "absolute", inset: 0, background: "linear-gradient(105deg, var(--navy-2) 0%, transparent 55%)", opacity: .5, clipPath: "polygon(0 0, 66% 0, 52% 100%, 0 100%)" }} />

      <div style={{ position: "relative", height: "100%", display: "flex", justifyContent: "center" }}>
        <div className="jgf-hero-inner" style={{ position: "relative", width: "100%", maxWidth: 1320, padding: "0 26px", height: "100%" }}>
          {/* PRODUCT IMAGE (cutout) — only on slides that provide one */}
          {s.img && (
            <img src={s.img} alt="Produtos JGF: álcool, copa, limpeza e escritório"
              className="jgf-hero-img"
              style={{ position: "absolute", right: 6, bottom: 4, height: "96%", width: "auto", maxWidth: "56%", objectFit: "contain", objectPosition: "right bottom", zIndex: 2, pointerEvents: "none", filter: "drop-shadow(0 14px 20px rgba(0,0,0,.28))" }} />
          )}
          {/* TEXT */}
          <div key={i} className="jgf-hero-text" style={{ position: "relative", zIndex: 3, height: "100%", display: "flex", flexDirection: "column", justifyContent: "center", maxWidth: 560, paddingBottom: 46, opacity: 1, animation: "heroUp .5s ease both" }}>
            <h1 className="jgf-hero-title" style={{ margin: 0, lineHeight: 1.07, fontWeight: 800, fontSize: 41, letterSpacing: "-.01em" }}>
              <span style={{ color: "#fff", display: "block", whiteSpace: "nowrap" }}>{s.pre}</span>
              <span style={{ color: "var(--yellow)", display: "block", whiteSpace: "nowrap" }}>{s.hi}</span>
            </h1>
            <p style={{ color: "#dbe2f0", fontSize: 18.5, fontWeight: 500, margin: "18px 0 0", lineHeight: 1.45, maxWidth: 470, whiteSpace: "pre-line" }}>{s.sub}</p>
            {s.feats.length > 0 && (
            <div className="jgf-hero-feats" style={{ display: "flex", gap: 24, margin: "30px 0 0" }}>
              {s.feats.map((f, k) => (
                <div key={k} style={{ display: "flex", alignItems: "center", gap: 11 }}>
                  <span style={{ color: "var(--yellow)", display: "flex" }}><f.icon size={30} stroke={1.7} /></span>
                  <div style={{ lineHeight: 1.15 }}>
                    <div style={{ color: "#fff", fontWeight: 700, fontSize: 12.5, letterSpacing: ".02em" }}>{f.t}</div>
                    <div style={{ color: "#aeb9d0", fontWeight: 500, fontSize: 11.5 }}>{f.s}</div>
                  </div>
                </div>
              ))}
            </div>
            )}
            <button onClick={() => { if (s.href) { window.location.href = s.href; } else { onCta(); } }}
              style={{ background: "var(--yellow)", color: "var(--navy)", fontWeight: 800, fontSize: 15, letterSpacing: ".03em", padding: "15px 34px", borderRadius: 30, alignSelf: "flex-start", marginTop: 30, boxShadow: "0 10px 26px rgba(245,168,0,.35)", transition: "transform .15s, box-shadow .15s" }}
              onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "0 14px 32px rgba(245,168,0,.45)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "0 10px 26px rgba(245,168,0,.35)"; }}>
              {s.cta}
            </button>
          </div>
          {/* PRODUCT IMAGE (above) */}
        </div>
      </div>

      {/* arrows */}
      <button onClick={() => go(-1)} aria-label="Anterior" style={{ ...arrow, left: 18 }}
        onMouseEnter={(e) => (e.currentTarget.style.background = "rgba(245,168,0,.9)")}
        onMouseLeave={(e) => (e.currentTarget.style.background = "rgba(15,29,57,.55)")}>
        <IconChevronL size={22} stroke={2.4} />
      </button>
      <button onClick={() => go(1)} aria-label="Próximo" style={{ ...arrow, right: 18 }}
        onMouseEnter={(e) => (e.currentTarget.style.background = "rgba(245,168,0,.9)")}
        onMouseLeave={(e) => (e.currentTarget.style.background = "rgba(15,29,57,.55)")}>
        <IconChevronR size={22} stroke={2.4} />
      </button>

      {/* dots */}
      <div style={{ position: "absolute", bottom: 18, left: "50%", transform: "translateX(-50%)", display: "flex", gap: 9, zIndex: 20 }}>
        {SLIDES.map((_, k) => (
          <button key={k} onClick={() => setI(k)} aria-label={`Slide ${k + 1}`}
            style={{ width: k === i ? 26 : 9, height: 9, borderRadius: 6, background: k === i ? "var(--yellow)" : "rgba(255,255,255,.45)", transition: "all .25s" }} />
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Hero });