// Hero (carousel banner) + categories + benefits ticker

const HERO_SLIDES = [
  {
    id: 's1',
    eyebrow: '— Promo de la semana',
    title: 'Reservá tu espacio.',
    subtitle: 'Drop',
    swatch: 1,
    cta: 'Ver colección',
    accentBg: 'linear-gradient(120deg, #0d2a1a 0%, #1A5C38 60%, #0d2a1a 100%)',
    badge: 'BANNER 1',
    image: 'common-articles/banner.png',
  },
  {
    id: 's2',
    badge: 'BANNER 2',
    image: 'common-articles/banner-2.png',
  },
  {
    id: 's3',
    badge: 'BANNER 3',
    image: 'common-articles/banner-3.png',
  },
];

function Hero({ accent = '#2ECC71' }) {
  const slides = HERO_SLIDES;
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const timer = React.useRef(null);

  React.useEffect(() => {
    if (paused) return;
    timer.current = setInterval(() => {
      setIdx((i) => (i + 1) % slides.length);
    }, 5500);
    return () => clearInterval(timer.current);
  }, [paused, slides.length]);

  const goto = (i) => setIdx(((i % slides.length) + slides.length) % slides.length);

  return (
    <section style={{
      position: 'relative',
      background: '#111111',
      borderBottom: '1px solid rgba(255,255,255,0.06)',
    }}>
      {/* Atmospheric bg behind everything */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background:
          'radial-gradient(900px 500px at 78% 10%, rgba(46,204,113,0.12), transparent 60%),' +
          'radial-gradient(700px 400px at 10% 90%, rgba(26,92,56,0.28), transparent 60%)',
      }}/>

      <div style={{
        position: 'relative',
        maxWidth: 1320, margin: '0 auto',
        padding: '32px 32px 56px',
      }}>
        {/* === BANNER CAROUSEL === */}
        <div
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}
          style={{
            position: 'relative',
            borderRadius: 20,
            overflow: 'hidden',
            border: '1px solid rgba(46,204,113,0.18)',
            boxShadow: '0 30px 80px rgba(0,0,0,0.45)',
            aspectRatio: '21 / 9',
            minHeight: 360,
            background: '#0d0d0d',
          }}
        >
          {/* Slides */}
          {slides.map((s, i) => (
            <div
              key={s.id}
              aria-hidden={i !== idx}
              style={{
                position: 'absolute', inset: 0,
                opacity: i === idx ? 1 : 0,
                transition: 'opacity 700ms ease',
                pointerEvents: i === idx ? 'auto' : 'none',
              }}
            >
              <BannerSlide slide={s} accent={accent} active={i === idx} />
            </div>
          ))}

          {/* Prev / Next */}
          <button onClick={() => goto(idx - 1)} aria-label="Anterior" style={arrowBtnStyle('left')}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
              <polyline points="15 6 9 12 15 18" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
          <button onClick={() => goto(idx + 1)} aria-label="Siguiente" style={arrowBtnStyle('right')}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
              <polyline points="9 6 15 12 9 18" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>

          {/* Pagination */}
          <div style={{
            position: 'absolute', bottom: 18, left: 0, right: 0,
            display: 'flex', justifyContent: 'center', gap: 8, zIndex: 5,
          }}>
            {slides.map((_, i) => (
              <button
                key={i}
                onClick={() => goto(i)}
                aria-label={`Banner ${i + 1}`}
                style={{
                  height: 6,
                  width: i === idx ? 36 : 18,
                  borderRadius: 999,
                  background: i === idx ? accent : 'rgba(255,255,255,0.35)',
                  border: 'none',
                  cursor: 'pointer',
                  transition: 'all 320ms ease',
                  padding: 0,
                }}
              />
            ))}
          </div>

          {/* Slide counter */}
          <div style={{
            position: 'absolute', top: 18, right: 18, zIndex: 5,
            background: 'rgba(0,0,0,0.5)',
            backdropFilter: 'blur(8px)',
            border: '1px solid rgba(255,255,255,0.12)',
            borderRadius: 999, padding: '6px 12px',
            fontFamily: 'ui-monospace, monospace', fontSize: 11,
            color: '#fff', letterSpacing: '0.12em',
          }}>
            {String(idx + 1).padStart(2, '0')} / {String(slides.length).padStart(2, '0')}
          </div>
        </div>

        {/* === DESCRIPTION BELOW BANNER === */}
        <div style={{
          marginTop: 36,
          display: 'grid',
          gridTemplateColumns: '1.4fr 1fr',
          gap: 48,
          alignItems: 'center',
        }}>
          <div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '6px 12px', borderRadius: 999,
              background: 'rgba(46,204,113,0.08)',
              border: '1px solid rgba(46,204,113,0.3)',
              color: accent,
              fontFamily: 'ui-monospace, monospace',
              fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
              marginBottom: 16,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: accent, boxShadow: `0 0 12px ${accent}` }}/>
              Temporada 2026 · Outdoor abierta
            </div>
            <p style={{
              fontFamily: 'Inter, system-ui, sans-serif',
              fontSize: 18, lineHeight: 1.55,
              color: 'rgba(255,255,255,0.82)',
              maxWidth: 720,
              margin: '0 0 24px',
              fontWeight: 400,
            }}>
              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 style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href="#productos" style={{
                display: 'inline-flex', alignItems: 'center', gap: 10,
                background: accent, color: '#0a0a0a',
                padding: '13px 20px', borderRadius: 12,
                fontFamily: '"Sora", sans-serif', fontWeight: 600, fontSize: 14,
                textDecoration: 'none',
                boxShadow: '0 12px 40px rgba(46,204,113,0.22)',
              }}>Ver Semillas {window.Icon.arrow(15)}</a>
              <a href="#productos" style={{
                display: 'inline-flex', alignItems: 'center', gap: 10,
                background: 'rgba(255,255,255,0.04)',
                border: '1px solid rgba(255,255,255,0.18)',
                color: '#fff',
                padding: '12px 20px', borderRadius: 12,
                fontFamily: '"Sora", sans-serif', fontWeight: 500, fontSize: 14,
                textDecoration: 'none',
              }}>Ver Equipos {window.Icon.arrow(15)}</a>
            </div>
          </div>

          {/* Stats strip */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            gap: 18,
          }}>
            {[
              ['+500', 'productos en stock'],
              ['12', 'cuotas sin interés'],
              ['24h', 'envío en Santiago'],
            ].map(([n, l]) => (
              <div key={l} style={{ borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 12 }}>
                <div style={{
                  fontFamily: '"Sora", sans-serif', fontWeight: 700,
                  fontSize: 26, color: '#fff', letterSpacing: '-0.02em',
                }}>{n}</div>
                <div style={{
                  fontFamily: 'ui-monospace, monospace', fontSize: 10.5,
                  color: 'rgba(255,255,255,0.5)', letterSpacing: '0.08em',
                  marginTop: 4, textTransform: 'uppercase',
                }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function arrowBtnStyle(side) {
  return {
    position: 'absolute',
    top: '50%',
    [side]: 16,
    transform: 'translateY(-50%)',
    width: 44, height: 44, borderRadius: 999,
    background: 'rgba(0,0,0,0.45)',
    backdropFilter: 'blur(10px)',
    border: '1px solid rgba(255,255,255,0.18)',
    color: '#fff',
    display: 'grid', placeItems: 'center',
    cursor: 'pointer', zIndex: 5,
    transition: 'all 200ms',
  };
}

function BannerSlide({ slide, accent, active }) {
  if (slide.image) {
    return (
      <div style={{ position: 'absolute', inset: 0 }}>
        <img src={slide.image} alt={slide.badge} 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: 20, right: 24,
            width: 80, height: 80, borderRadius: '50%',
            border: '3px solid rgba(255,255,255,0.7)',
            boxShadow: '0 4px 24px rgba(0,0,0,0.6)',
          }}
        />
      </div>
    );
  }
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: slide.accentBg,
      overflow: 'hidden',
    }}>
      {/* Faint grid texture */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage:
          'linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),' +
          'linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)',
        backgroundSize: '48px 48px',
        maskImage: 'linear-gradient(120deg, black 30%, transparent 80%)',
        WebkitMaskImage: 'linear-gradient(120deg, black 30%, transparent 80%)',
      }}/>
      {/* Right-side decorative product glyph (placeholder for real image) */}
      <div style={{
        position: 'absolute', top: 0, right: 0, bottom: 0,
        width: '52%',
        opacity: 0.85,
        maskImage: 'linear-gradient(90deg, transparent, black 30%)',
        WebkitMaskImage: 'linear-gradient(90deg, transparent, black 30%)',
      }}>
        <window.ProductGlyph variant={slide.swatch} label="banner placeholder" />
      </div>
      {/* Placeholder marker */}
      <div style={{
        position: 'absolute', top: 18, left: 18,
        fontFamily: 'ui-monospace, "SF Mono", monospace',
        fontSize: 10, letterSpacing: '0.18em',
        color: 'rgba(255,255,255,0.55)',
        background: 'rgba(0,0,0,0.4)',
        backdropFilter: 'blur(6px)',
        border: '1px dashed rgba(255,255,255,0.25)',
        padding: '5px 9px', borderRadius: 6,
      }}>
        {slide.badge} · IMG PROMOCIONAL
      </div>

      {/* Copy block */}
      <div style={{
        position: 'absolute',
        left: 'clamp(28px, 5%, 72px)',
        top: '50%',
        transform: 'translateY(-50%)',
        maxWidth: '50%',
        zIndex: 2,
      }}>
        <div style={{
          fontFamily: 'ui-monospace, monospace',
          fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
          color: accent,
          marginBottom: 14,
          opacity: active ? 1 : 0,
          transform: active ? 'translateY(0)' : 'translateY(8px)',
          transition: 'all 600ms ease 100ms',
        }}>{slide.eyebrow}</div>
        <h2 style={{
          fontFamily: '"Sora", sans-serif',
          fontWeight: 700,
          fontSize: 'clamp(34px, 4.6vw, 64px)',
          lineHeight: 0.98,
          letterSpacing: '-0.03em',
          color: '#fff',
          margin: '0 0 12px',
          opacity: active ? 1 : 0,
          transform: active ? 'translateY(0)' : 'translateY(12px)',
          transition: 'all 700ms ease 200ms',
        }}>{slide.title}</h2>
        <div style={{
          fontFamily: 'Inter, sans-serif',
          fontSize: 16, color: 'rgba(255,255,255,0.78)',
          marginBottom: 22,
          opacity: active ? 1 : 0,
          transform: active ? 'translateY(0)' : 'translateY(12px)',
          transition: 'all 700ms ease 300ms',
        }}>{slide.subtitle}</div>
        <a href="#" style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          background: '#fff', color: '#0a0a0a',
          padding: '12px 20px', borderRadius: 10,
          fontFamily: '"Sora", sans-serif', fontWeight: 600, fontSize: 13,
          letterSpacing: '0.02em', textDecoration: 'none',
          opacity: active ? 1 : 0,
          transform: active ? 'translateY(0)' : 'translateY(12px)',
          transition: 'all 700ms ease 400ms',
        }}>{slide.cta} {window.Icon.arrow(14)}</a>
      </div>
    </div>
  );
}

function CategoryGrid() {
  const cats = window.CATEGORIES;
  const [hover, setHover] = React.useState(null);
  return (
    <section style={{
      background: '#111111',
      padding: '80px 0',
      borderBottom: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '0 32px' }}>
        <div style={{
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
          marginBottom: 40, gap: 24, flexWrap: 'wrap',
        }}>
          <div>
            <div style={{
              fontFamily: 'ui-monospace, monospace', fontSize: 11,
              color: '#2ECC71', letterSpacing: '0.2em', textTransform: 'uppercase',
              marginBottom: 14,
            }}>— 01 / Categorías</div>
            <h2 style={{
              fontFamily: '"Sora", sans-serif', fontWeight: 700,
              fontSize: 'clamp(32px, 4vw, 48px)', lineHeight: 1,
              color: '#fff', letterSpacing: '-0.02em', margin: 0,
            }}>Todo el ciclo, una tienda.</h2>
          </div>
          <a href="#" style={{
            color: 'rgba(255,255,255,0.7)', textDecoration: 'none',
            fontFamily: '"Sora", sans-serif', fontSize: 14, fontWeight: 500,
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '10px 16px', borderRadius: 10,
            border: '1px solid rgba(255,255,255,0.12)',
          }}>Ver todas las categorías {window.Icon.arrow(15)}</a>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 16,
        }}>
          {cats.map((c, i) => (
            <a
              key={c.id}
              href="#"
              onMouseEnter={() => setHover(c.id)}
              onMouseLeave={() => setHover(null)}
              style={{
                position: 'relative',
                background: hover === c.id ? '#1A5C38' : '#1C1C1C',
                border: '1px solid ' + (hover === c.id ? 'rgba(46,204,113,0.5)' : 'rgba(255,255,255,0.06)'),
                borderRadius: 16, padding: 22,
                textDecoration: 'none', color: '#fff',
                transition: 'all 280ms ease',
                cursor: 'pointer',
                minHeight: 180,
                display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                overflow: 'hidden',
              }}
            >
              <div style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
              }}>
                <div style={{
                  width: 52, height: 52, borderRadius: 12,
                  background: hover === c.id ? 'rgba(46,204,113,0.18)' : 'rgba(255,255,255,0.04)',
                  border: '1px solid ' + (hover === c.id ? 'rgba(46,204,113,0.4)' : 'rgba(255,255,255,0.08)'),
                  display: 'grid', placeItems: 'center',
                  color: hover === c.id ? '#2ECC71' : 'rgba(255,255,255,0.85)',
                  transition: 'all 260ms ease',
                }}>
                  {window.Icon.cat[c.id]}
                </div>
                <span style={{
                  fontFamily: 'ui-monospace, monospace',
                  fontSize: 11, color: 'rgba(255,255,255,0.45)',
                  letterSpacing: '0.08em',
                }}>0{i+1}</span>
              </div>
              <div>
                <div style={{
                  fontFamily: '"Sora", sans-serif', fontWeight: 600,
                  fontSize: 20, color: '#fff', letterSpacing: '-0.01em',
                  marginBottom: 4,
                }}>{c.name}</div>
                <div style={{
                  fontFamily: 'Inter, sans-serif', fontSize: 13,
                  color: hover === c.id ? 'rgba(255,255,255,0.85)' : 'rgba(255,255,255,0.5)',
                  marginBottom: 12,
                }}>{c.desc}</div>
                <div style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  fontFamily: 'ui-monospace, monospace', fontSize: 11,
                  color: 'rgba(255,255,255,0.5)', letterSpacing: '0.08em',
                  paddingTop: 12, borderTop: '1px solid rgba(255,255,255,0.08)',
                }}>
                  <span>{c.count} productos</span>
                  <span style={{
                    color: hover === c.id ? '#2ECC71' : 'rgba(255,255,255,0.5)',
                    transform: hover === c.id ? 'translateX(2px)' : 'none',
                    transition: 'transform 240ms',
                  }}>→</span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function BenefitsTicker() {
  const items = [
    'CULTIVO INDOOR · OUTDOOR · INVERNADERO',
    'GENÉTICAS PREMIUM',
    'ENVÍO 24H EN SANTIAGO',
    'ASESORÍA CON CULTIVADORES',
    'EMPAQUE DISCRETO',
    '+500 PRODUCTOS',
  ];
  const list = [...items, ...items, ...items];
  return (
    <section style={{
      background: '#1A5C38',
      borderTop: '1px solid rgba(46,204,113,0.3)',
      borderBottom: '1px solid rgba(46,204,113,0.3)',
      overflow: 'hidden',
      padding: '18px 0',
    }}>
      <div style={{
        display: 'flex', gap: 64, whiteSpace: 'nowrap',
        animation: 'sat-marquee 50s linear infinite',
        width: 'max-content',
      }}>
        {list.map((t, i) => (
          <span key={i} style={{
            fontFamily: '"Sora", sans-serif', fontWeight: 700,
            fontSize: 18, letterSpacing: '0.18em',
            color: '#fff',
            display: 'inline-flex', alignItems: 'center', gap: 64,
          }}>
            {t}
            <span style={{
              width: 8, height: 8, transform: 'rotate(45deg)',
              background: '#2ECC71',
            }}/>
          </span>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Hero, CategoryGrid, BenefitsTicker });