const { useState: useStateHero1, useEffect: useEffectHero1 } = React;

const BANNER_SLIDES = [
  { id: 1, image: "common-articles/banner.png", alt: "Compra Online · Despacho a Domicilio" },
  { id: 2, image: "common-articles/banner-2.png", alt: "Compra Online · Despacho a Domicilio" },
  { id: 3, image: "common-articles/banner-3.png", alt: "La Mejor Calidad en Bongs y Pipas" },
];

function BannerCarousel() {
  const [idx, setIdx] = useStateHero1(0);
  const [paused, setPaused] = useStateHero1(false);
  const total = BANNER_SLIDES.length;

  useEffectHero1(() => {
    if (paused) return;
    const t = setInterval(() => setIdx(i => (i + 1) % total), 5500);
    return () => clearInterval(t);
  }, [paused, total]);

  const go = (n) => setIdx(((n % total) + total) % total);

  return (
    <div
      className="banner"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
    >
      <div className="banner-track" style={{ transform: `translateX(-${idx * 100}%)` }}>
        {BANNER_SLIDES.map((s) => (
          <article key={s.id} className={"slide " + (s.bg || "slide-a")}>
            {s.image ? (
              <>
                <img src={s.image} alt={s.alt} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                <img
                  src="common-articles/Logo Grow Satindica 1.png"
                  alt="Grow Satindica"
                  style={{
                    position: "absolute", bottom: 16, right: 20,
                    width: 64, height: 64, borderRadius: "50%",
                    border: "3px solid rgba(255,255,255,0.7)",
                    boxShadow: "0 4px 20px rgba(0,0,0,0.55)",
                  }}
                />
              </>
            ) : (
              <>
                <div className="slide-tag">{s.tag}</div>
                <div className="slide-ph">
                  <div className="ph-mono">BANNER {s.id} · 1600 × 560<br/>imagen promocional</div>
                </div>
                <div className="slide-overlay">
                  <span className="slide-eyebrow">{s.eyebrow}</span>
                  <h2 className="slide-h">{s.title}</h2>
                </div>
              </>
            )}
          </article>
        ))}
      </div>

      <button className="banner-arr prev" onClick={() => go(idx - 1)} aria-label="Anterior">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M15 6l-6 6 6 6"/></svg>
      </button>
      <button className="banner-arr next" onClick={() => go(idx + 1)} aria-label="Siguiente">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M9 6l6 6-6 6"/></svg>
      </button>

      <div className="banner-dots">
        {BANNER_SLIDES.map((_, i) => (
          <button key={i} className={"dot-btn" + (i === idx ? " active" : "")} onClick={() => go(i)} aria-label={`Banner ${i + 1}`} />
        ))}
      </div>
    </div>
  );
}

function Hero1() {
  return (
    <section className="hero">
      <div className="wrap">
        <BannerCarousel />
        <div className="hero-below">
          <div className="hero-below-left">
            <div className="eyebrow">
              <span className="line"></span>
              Tienda artesanal · Pirque, Chile
            </div>
            <p className="lead">
              Semillas, sustratos, iluminación y herramientas curadas para cultivadores artesanales. Productos seleccionados a mano, probados en nuestro vivero y despachados a todo Chile en 48 horas.
            </p>
            <div className="cta-row">
              <a href="#cats" className="btn btn-primary">
                Explorar Tienda
                <span className="arr">
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                </span>
              </a>
              <a href="#" className="btn btn-ghost">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 6h18M6 6l1.5 13a2 2 0 0 0 2 1.5h5a2 2 0 0 0 2-1.5L18 6M9 10v6M15 10v6"/></svg>
                Ver ofertas del mes
              </a>
            </div>
          </div>
          <div className="hero-meta">
            {STATS_1.map(s => (
              <div key={s.lab} className="stat">
                <span className="num">{s.num}</span>
                <span className="lab">{s.lab}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero1 });