// homepage/hero.jsx — 3-slide rotator. Manual + auto-advance with pause.
const { useState: uSH, useEffect: uEH, useRef: uRH } = React;

function HomeHero({ autoAdvance = true }) {
  const slides = window.HOME_DATA.heroSlides;
  const [i, setI] = uSH(0);
  const [paused, setPaused] = uSH(false);
  const total = slides.length;

  uEH(() => {
    if (!autoAdvance || paused) return;
    const t = setTimeout(() => setI(p => (p + 1) % total), 7000);
    return () => clearTimeout(t);
  }, [i, paused, autoAdvance, total]);

  return (
    <section
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      style={{
        position: 'relative', background: 'var(--ink)', color: 'var(--paper)',
        height: 'clamp(620px, 86vh, 820px)', overflow: 'hidden',
      }}>
      {/* slides — stacked, cross-fade */}
      {slides.map((s, idx) => {
        const active = idx === i;
        return (
          <div key={idx} aria-hidden={!active} style={{
            position: 'absolute', inset: 0,
            display: 'grid', gridTemplateColumns: '5fr 7fr',
            opacity: active ? 1 : 0,
            transition: 'opacity 700ms ease',
            pointerEvents: active ? 'auto' : 'none',
          }}>
            {/* left text panel */}
            <div style={{
              padding: '64px 48px 110px', display: 'flex', flexDirection: 'column',
              justifyContent: 'space-between', position: 'relative', zIndex: 2,
              background: 'linear-gradient(90deg, var(--ink) 60%, rgba(54,24,1,0) 100%)',
            }}>
              <div>
                <div className="mono" style={{
                  fontSize: 11, letterSpacing: '0.16em',
                  color: 'var(--amber)', textTransform: 'uppercase',
                  marginBottom: 28,
                  transform: active ? 'translateY(0)' : 'translateY(8px)',
                  opacity: active ? 1 : 0, transition: 'all 600ms 100ms ease',
                }}>{s.eyebrow}</div>
                <h1 className="serif-display" style={{
                  margin: 0,
                  fontSize: s.kind === 'posture' ? 84 : 116,
                  lineHeight: 0.9, fontWeight: 600, letterSpacing: '-0.04em',
                  whiteSpace: 'pre-line',
                  transform: active ? 'translateY(0)' : 'translateY(14px)',
                  opacity: active ? 1 : 0, transition: 'all 700ms 180ms ease',
                }}>{s.headline}</h1>
                <div className="serif" style={{
                  marginTop: 26, fontSize: 19, lineHeight: 1.4, opacity: 0.86, maxWidth: 460,
                  transform: active ? 'translateY(0)' : 'translateY(14px)',
                  transition: 'all 700ms 260ms ease',
                }}>{s.sub}</div>
              </div>
              <div style={{
                transform: active ? 'translateY(0)' : 'translateY(14px)',
                opacity: active ? 1 : 0, transition: 'all 700ms 340ms ease',
              }}>
                <div style={{ display: 'flex', gap: 10, marginTop: 32 }}>
                  <a href={s.ctaPrimary.href} className="mono" style={{
                    background: 'var(--amber)', color: 'var(--ink)', border: 'none',
                    padding: '15px 22px', fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase',
                    cursor: 'pointer', borderRadius: 999, textDecoration: 'none',
                  }}>{s.ctaPrimary.label}</a>
                  <a href={s.ctaSecondary.href} className="mono" style={{
                    background: 'transparent', color: 'var(--paper)', border: '1px solid var(--paper)',
                    padding: '15px 22px', fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase',
                    cursor: 'pointer', borderRadius: 999, textDecoration: 'none',
                  }}>{s.ctaSecondary.label}</a>
                </div>
                <div className="mono" style={{
                  marginTop: 24, fontSize: 10.5, letterSpacing: '0.1em',
                  color: 'rgba(241,234,230,0.7)', textTransform: 'uppercase',
                }}>{s.meta}</div>
              </div>
            </div>
            {/* right image panel */}
            <div style={{ position: 'relative', overflow: 'hidden' }}>
              {s.placeholder && (
                <div style={{
                  position: 'absolute', inset: 0, zIndex: 3,
                  background: 'repeating-linear-gradient(135deg, rgba(241,234,230,0.04) 0 20px, rgba(241,234,230,0.08) 20px 40px)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <div className="mono" style={{
                    fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
                    background: 'rgba(54,24,1,0.7)', color: 'var(--paper)',
                    padding: '6px 10px',
                  }}>Placeholder · Cassina LC4 plate to come</div>
                </div>
              )}
              <img src={s.image} alt=""
                style={{
                  position: 'absolute', inset: 0, width: '100%', height: '100%',
                  objectFit: 'cover', objectPosition: s.objectPos,
                  transform: active ? 'scale(1.04)' : 'scale(1.0)',
                  transition: 'transform 7400ms linear',
                  filter: 'brightness(0.92)',
                }} />
              <div style={{
                position: 'absolute', inset: 0,
                background: 'linear-gradient(90deg, rgba(54,24,1,0.5) 0%, rgba(54,24,1,0) 40%), linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.45) 100%)',
              }} />
              <div className="mono" style={{
                position: 'absolute', right: 22, top: 22,
                fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase',
                color: 'rgba(255,255,255,0.78)',
              }}>Slide {String(idx + 1).padStart(2, '0')} / {String(total).padStart(2, '0')}</div>
            </div>
          </div>
        );
      })}

      {/* progress + nav rail */}
      <div style={{
        position: 'absolute', left: '42%', bottom: 28, right: 48, zIndex: 5,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingLeft: 24,
      }}>
        <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
          {slides.map((_, idx) => (
            <button key={idx} onClick={() => setI(idx)} aria-label={`Go to slide ${idx+1}`}
              style={{
                background: 'transparent', border: 'none', cursor: 'pointer',
                padding: 0, display: 'flex', alignItems: 'center', gap: 8,
              }}>
              <span style={{
                width: idx === i ? 56 : 18, height: 2,
                background: idx === i ? 'var(--paper)' : 'rgba(241,234,230,0.4)',
                transition: 'all 400ms',
              }} />
              <span className="mono" style={{
                fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase',
                color: idx === i ? 'var(--paper)' : 'rgba(241,234,230,0.5)',
              }}>{String(idx+1).padStart(2,'0')}</span>
            </button>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button onClick={() => setI(p => (p - 1 + total) % total)} className="mono"
            style={{
              background: 'transparent', color: 'var(--paper)',
              border: '1px solid rgba(241,234,230,0.4)',
              padding: '8px 14px', fontSize: 11, letterSpacing: '0.1em',
              cursor: 'pointer', borderRadius: 999,
            }}>← Prev</button>
          <button onClick={() => setI(p => (p + 1) % total)} className="mono"
            style={{
              background: 'var(--paper)', color: 'var(--ink)', border: '1px solid var(--paper)',
              padding: '8px 14px', fontSize: 11, letterSpacing: '0.1em',
              cursor: 'pointer', borderRadius: 999,
            }}>Next →</button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HomeHero });