const { useState: useStateHero2, useEffect: useEffectHero2 } = React;

const BANNER_SLIDES_2 = [
  { 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 BannerCarousel2() {
  const [idx, setIdx] = useStateHero2(0);
  const [paused, setPaused] = useStateHero2(false);
  const total = BANNER_SLIDES_2.length;

  useEffectHero2(() => {
    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 style={{ position: 'relative', borderRadius: 12, overflow: 'hidden', marginBottom: 28 }}
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
    >
      <div style={{ display: 'flex', transition: 'transform 600ms ease', transform: `translateX(-${idx * 100}%)` }}>
        {BANNER_SLIDES_2.map((s) => (
          <div key={s.id} style={{ minWidth: '100%', position: 'relative' }}>
            <img src={s.image} alt={s.alt} style={{ width: '100%', display: 'block' }} />
            <img
              src="common-articles/Logo Grow Satindica 1.png"
              alt="Grow Satindica"
              style={{
                position: 'absolute', bottom: 14, right: 18,
                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>
        ))}
      </div>
      <button onClick={() => go(idx - 1)} aria-label="Anterior" style={{ position: 'absolute', top: '50%', left: 12, transform: 'translateY(-50%)', background: 'rgba(0,0,0,0.45)', border: '1px solid rgba(255,255,255,0.18)', borderRadius: '50%', width: 36, height: 36, cursor: 'pointer', color: '#fff', display: 'grid', placeItems: 'center' }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 6l-6 6 6 6"/></svg>
      </button>
      <button onClick={() => go(idx + 1)} aria-label="Siguiente" style={{ position: 'absolute', top: '50%', right: 12, transform: 'translateY(-50%)', background: 'rgba(0,0,0,0.45)', border: '1px solid rgba(255,255,255,0.18)', borderRadius: '50%', width: 36, height: 36, cursor: 'pointer', color: '#fff', display: 'grid', placeItems: 'center' }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 6l6 6-6 6"/></svg>
      </button>
      <div style={{ position: 'absolute', bottom: 10, left: 0, right: 0, display: 'flex', justifyContent: 'center', gap: 6 }}>
        {BANNER_SLIDES_2.map((_, i) => (
          <button key={i} onClick={() => go(i)} aria-label={`Banner ${i + 1}`} style={{ width: i === idx ? 28 : 8, height: 8, borderRadius: 999, background: i === idx ? '#C9A84C' : 'rgba(255,255,255,0.4)', border: 'none', cursor: 'pointer', transition: 'all 300ms', padding: 0 }} />
        ))}
      </div>
    </div>
  );
}

function HeroAside({ kind }) {
  if (kind === "specs") {
    return (
      <div className="hero__aside">
        <div style={{ position: "absolute", inset: 0, padding: 28, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
          <div>
            <div style={{ fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--ink-dim)" }}>Spec Sheet · 04 / 26</div>
            <div style={{ fontFamily: "Anton, sans-serif", fontSize: 42, lineHeight: 0.9, textTransform: "uppercase", marginTop: 12 }}>
              Drop <em style={{ fontStyle: "normal", color: "var(--neon)" }}>04</em><br/>Critical<br/>Kush
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase" }}>
            <div><div style={{ color: "var(--ink-dim)" }}>THC</div><div style={{ color: "var(--neon)", fontFamily: "Anton", fontSize: 26 }}>22%</div></div>
            <div><div style={{ color: "var(--ink-dim)" }}>Flora</div><div style={{ color: "var(--neon)", fontFamily: "Anton", fontSize: 26 }}>56d</div></div>
            <div><div style={{ color: "var(--ink-dim)" }}>Yield</div><div style={{ color: "var(--neon)", fontFamily: "Anton", fontSize: 26 }}>650g</div></div>
            <div><div style={{ color: "var(--ink-dim)" }}>Tipo</div><div style={{ color: "var(--neon)", fontFamily: "Anton", fontSize: 26 }}>Indica</div></div>
          </div>
        </div>
        <div className="hero__aside__tag">DROP 04</div>
      </div>
    );
  }
  if (kind === "stack") {
    const tags = ["GROW CULTURE", "INDOOR ONLY", "SHIPS CHILE", "PREMIUM SEEDS", "QUALITY GENETICS", "EST. 2019"];
    return (
      <div className="hero__aside" style={{ background: "#000", display: "flex", flexDirection: "column", justifyContent: "center", padding: 28, gap: 8 }}>
        {tags.map((t, i) => (
          <div key={i} style={{
            border: "1px solid var(--neon)",
            padding: "12px 16px",
            fontFamily: "Anton, sans-serif",
            fontSize: 28,
            letterSpacing: "0.02em",
            textTransform: "uppercase",
            color: i % 2 ? "var(--neon)" : "var(--ink)",
            background: i === 2 ? "var(--neon)" : "transparent",
            ...(i === 2 ? { color: "#000" } : {}),
            transform: `translateX(${i * 4}px)`
          }}>{t}</div>
        ))}
      </div>
    );
  }
  return (
    <div className="hero__aside">
      <Placeholder label="Hero Plant Shot" />
      <div className="hero__aside__corner">DROP 04</div>
      <div className="hero__aside__cap">REF · ST-CK / 04 — 26</div>
    </div>
  );
}

function Hero({ headlineMode, asideKind }) {
  const wordClass = (i) => {
    if (headlineMode === "all-solid") return "";
    if (headlineMode === "all-stroke") return "out";
    return ["out", "", "accent", "out"][i] || "";
  };
  return (
    <section className="hero">
      <div className="container">
        <BannerCarousel2 />
        <div className="hero__meta">
          <div><b>★ EST. 2019</b> · Santiago de Chile</div>
          <div><b>Drop</b> · 04 / 26 — Critical Drop</div>
          <div><b>Envíos</b> · 24-48h a todo Chile</div>
          <div style={{ textAlign: "right" }}><b className="neon">●</b> 1.482 growers online</div>
        </div>
        <h1 className="hero__headline">
          <div><span className={wordClass(0)}>Cultiva</span></div>
          <div><span className={wordClass(1)}>Tu</span> <span className={wordClass(2)}>Mundo</span></div>
        </h1>
        <div className="hero__row">
          <div>
            <p className="hero__sub">
              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="hero__cta-row" style={{ marginTop: 28 }}>
              <button className="btn btn--neon">Shop el Drop <span className="arrow">→</span></button>
              <button className="btn btn--ghost">Ver Catálogo</button>
              <span style={{ fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--ink-dim)" }}>
                ★ 4.9 / 5 — 2.143 reviews
              </span>
            </div>
          </div>
          <HeroAside kind={asideKind} />
        </div>
        <div className="hero__stats">
          <div className="hero__stat"><div className="hero__stat__num">12K+</div><div className="hero__stat__label">Growers en la red</div></div>
          <div className="hero__stat"><div className="hero__stat__num">340+</div><div className="hero__stat__label">Genéticas catalogadas</div></div>
          <div className="hero__stat"><div className="hero__stat__num">24h</div><div className="hero__stat__label">Despacho · stock CL</div></div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });