// HeroCarousel.jsx — affiche "coverflow" carousel
// Faithful re-creation of AlfaBeth's VerticalPostCarousel (Whilehaus/whilehaus
// apps/alfabeth): center poster full-size, side posters peek at 55% offset,
// scale 0.85, blur 2px, opacity 0.7 with inset shadow. Auto-advance 4s, pause
// on hover, swipe/drag, ←/→ keys, click a side poster to go there, dots.
// Data-driven: just add more entries to POSTERS to grow the deck.

const POSTERS = [
  { src: 'assets/hero-pieza-1.png', alt: 'Pieza conceptual — café' },
  { src: 'assets/hero-pieza-2.png', alt: 'Pieza conceptual — fotografía' },
  { src: 'assets/hero-pieza-3.png', alt: 'Pieza conceptual — escritorio' },
];

// Card geometry (4:5 affiche)
const CARD_W = 468;
const CARD_H = 585;
const EASE = 'cubic-bezier(0.32, 0.72, 0, 1)';

function HeroCarousel({ posters = POSTERS }) {
  const n = posters.length;
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const drag = React.useRef({ active: false, x0: 0, dx: 0 });

  const next = React.useCallback(() => setIdx(i => (i + 1) % n), [n]);
  const prev = React.useCallback(() => setIdx(i => (i - 1 + n) % n), [n]);

  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(next, 4000);
    return () => clearInterval(t);
  }, [paused, next]);

  React.useEffect(() => {
    const onKey = e => {
      if (e.key === 'ArrowLeft') prev();
      if (e.key === 'ArrowRight') next();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [next, prev]);

  // position of a slide relative to current: center / left / right / hidden
  const positionOf = i => {
    const diff = (i - idx + n) % n;
    if (diff === 0) return 'center';
    if (diff === 1 || diff === -(n - 1)) return 'right';
    if (diff === n - 1 || diff === -1) return 'left';
    return 'hidden';
  };

  const styleFor = pos => {
    const base = {
      position: 'absolute', inset: 0, width: CARD_W, height: CARD_H,
      borderRadius: 16, overflow: 'hidden', cursor: 'pointer',
      transition: `transform .7s ${EASE}, opacity .7s ${EASE}, filter .7s ${EASE}, box-shadow .7s ${EASE}`,
      willChange: 'transform, opacity, filter',
    };
    const map = {
      center: { transform: 'translateX(0) scale(1)', opacity: 1, zIndex: 3, filter: 'blur(0px)',
                boxShadow: 'var(--shadow-image)' },
      left:   { transform: 'translateX(-55%) scale(0.85)', opacity: 0.7, zIndex: 2, filter: 'blur(2px)',
                boxShadow: 'inset 8px 0 16px rgba(0,0,0,0.3), inset 2px 0 8px rgba(0,0,0,0.2)' },
      right:  { transform: 'translateX(55%) scale(0.85)', opacity: 0.7, zIndex: 2, filter: 'blur(2px)',
                boxShadow: 'inset -8px 0 16px rgba(0,0,0,0.3), inset -2px 0 8px rgba(0,0,0,0.2)' },
      hidden: { transform: 'translateX(0) scale(0.8)', opacity: 0, zIndex: 0, filter: 'blur(0px)' },
    };
    return { ...base, ...map[pos] };
  };

  // pointer drag / swipe on the center card
  const onDown = e => { drag.current = { active: true, x0: e.clientX, dx: 0 }; setPaused(true); };
  const onMove = e => { if (drag.current.active) drag.current.dx = e.clientX - drag.current.x0; };
  const onUp = () => {
    if (!drag.current.active) return;
    const dx = drag.current.dx;
    drag.current.active = false;
    setPaused(false);
    if (dx > 50) prev();
    else if (dx < -50) next();
  };

  return (
    <div
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => { setPaused(false); drag.current.active = false; }}
      style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 34 }}>
      <div style={{
        position: 'relative', width: CARD_W, height: CARD_H,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}
        onPointerDown={onDown} onPointerMove={onMove} onPointerUp={onUp}>
        {posters.map((p, i) => {
          const pos = positionOf(i);
          return (
            <div key={i} style={styleFor(pos)}
              onClick={() => { if (pos === 'left') prev(); else if (pos === 'right') next(); }}>
              <img src={p.src} alt={p.alt} draggable={false} style={{
                width: '100%', height: '100%', objectFit: 'cover', borderRadius: 16,
                userSelect: 'none', pointerEvents: 'none', background: 'var(--white)',
              }} />
            </div>
          );
        })}
      </div>

      <div style={{ display: 'flex', gap: 10, zIndex: 4 }}>
        {posters.map((_, i) => (
          <button key={i} onClick={() => setIdx(i)} aria-label={`Ir a la pieza ${i + 1}`} style={{
            width: i === idx ? 32 : 10, height: 10, borderRadius: 999, border: 'none',
            cursor: 'pointer', padding: 0,
            background: i === idx ? 'var(--peach)' : 'rgba(245,218,170,0.4)',
            transition: `all .3s ${EASE}`,
          }} />
        ))}
      </div>
    </div>
  );
}
window.HeroCarousel = HeroCarousel;