// ====================== HERO SLIDER ======================
const SLIDES = [
  {
    pre: "SOLUÇÕES COMPLETAS", hi: "PARA SUA EMPRESA",
    sub: "Copa, Limpeza e Escritório é na JGF!",
    cta: "VER PRODUTOS",
    bg: "assets/hero/fundo.jpg", img: "assets/hero/produtos.png",
    feats: [
      { icon: IconBox, t: "TUDO EM", s: "UM SÓ LUGAR" },
      { icon: IconMedal, t: "PRODUTOS DE", s: "QUALIDADE" },
      { icon: IconCard, t: "FATURAMENTO", s: "PARA EMPRESAS" },
    ],
    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: [
      { icon: IconBox, t: "CAFÉ E", s: "AÇÚCAR" },
      { icon: IconBottle, t: "COPOS E", s: "TALHERES" },
      { icon: IconPaperRoll, t: "HIGIENE E", s: "PAPEL" },
    ],
    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: [
      { icon: IconPen, t: "PAPELARIA", s: "COMPLETA" },
      { icon: IconDevice, t: "INFORMÁTICA", s: "E SUPRIMENTOS" },
      { icon: IconMedal, t: "GRANDES", s: "MARCAS" },
    ],
    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: [
      { icon: IconSpray, t: "ÁLCOOL 70%", s: "E DESINFETANTES" },
      { icon: IconGlove, t: "EPIs E", s: "ACESSÓRIOS" },
      { icon: IconTag, t: "MELHORES", s: "PREÇOS" },
    ],
    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) */}
      <div style={{ position: "absolute", inset: 0 }}>
        <img key={s.bg} src={s.bg} alt="" aria-hidden="true"
          style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: s.img ? "center 82%" : "right center" }} />
      </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: 47, letterSpacing: "-.01em" }}>
              <span style={{ color: "#fff", display: "block" }}>{s.pre}</span>
              <span style={{ color: "var(--yellow)", display: "block" }}>{s.hi}</span>
            </h1>
            <p style={{ color: "#dbe2f0", fontSize: 18.5, fontWeight: 500, margin: "18px 0 0", lineHeight: 1.45, maxWidth: 470 }}>{s.sub}</p>
            <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 });