// variant-bigyear.jsx — Giant year backdrop, photo crossfade, confetti

function VariantBigYear({ items }) {
  const wrapRef = React.useRef(null);
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    const onScroll = () => {
      const el = wrapRef.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const total = el.offsetHeight - vh;
      const scrolled = Math.min(Math.max(-rect.top, 0), total);
      setProgress(total > 0 ? scrolled / total : 0);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, []);

  const n = items.length;
  const float = progress * (n - 1);
  const idx = Math.max(0, Math.min(n - 1, Math.round(float)));
  const current = items[idx];
  const blend = float - idx; // -.5 .. .5 ish

  const bg = current.bg || '#FFF5D6';

  return (
    <section ref={wrapRef} style={{ height: `${n * 80}vh`, position: 'relative' }}>
      <div style={{
        position: 'sticky', top: 0, height: '100vh',
        overflow: 'hidden',
        background: `radial-gradient(1200px 800px at 30% 30%, ${hexA(bg,0.7)} 0%, var(--cream) 70%)`,
        transition: 'background .6s ease',
      }}>

        {/* Giant year backdrop */}
        <div style={{
          position: 'absolute', inset: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          pointerEvents: 'none',
        }}>
          <div className="h-display" style={{
            fontSize: 'clamp(280px, 52vw, 780px)',
            color: current.fg || 'var(--ink)',
            opacity: .12,
            letterSpacing: '-.05em',
            transform: `translateY(${blend * -30}px)`,
            transition: 'color .6s ease',
          }}>{current.year}</div>
        </div>

        {/* Confetti dots */}
        <Confetti seed={current.year} bg={bg} fg={current.fg} />

        {/* Center photo */}
        <div style={{
          position: 'absolute', inset: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: '0 24px',
        }}>
          <div style={{ position: 'relative', width: 'min(560px, 82vw)', aspectRatio: '4/5' }}>
            {items.map((it, i) => {
              const d = i - float;
              const abs = Math.abs(d);
              if (abs > 1.2) return null;
              const op = Math.max(0, 1 - abs * 1.2);
              return (
                <div key={i} style={{
                  position: 'absolute', inset: 0,
                  opacity: op,
                  transform: `translateY(${d * 40}px) scale(${1 - abs * 0.06})`,
                  containerType: 'inline-size',
                  borderRadius: 14, overflow: 'hidden',
                  boxShadow: '0 30px 60px -20px rgba(42,24,16,.35)',
                }}>
                  {it.real ? (
                    <div className="ph" data-real>
                      <img src={it.real} alt={String(it.year)} />
                    </div>
                  ) : (
                    <div className="ph" style={{ '--bg': it.bg, '--fg': it.fg }}>
                      {it.placeholderText ? (
                        <span className="ph-year" style={{
                          fontSize: 'clamp(22px, 7cqw, 64px)', lineHeight: 1.1,
                          padding: '0 8cqw', textAlign: 'center',
                          fontFamily: 'var(--hand)', fontWeight: 700,
                        }}>{it.placeholderText}</span>
                      ) : (
                        <span className="ph-year">{it.year}</span>
                      )}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>

        {/* Title overlay */}
        <div style={{
          position: 'absolute', left: '50%', bottom: 'clamp(36px, 6vh, 80px)',
          transform: 'translateX(-50%)',
          textAlign: 'center', maxWidth: '40ch',
          padding: '0 24px',
        }}>
          <div className="h-hand" style={{ fontSize: 42, color: 'var(--coral-deep)', lineHeight: 1 }}>
            {current.age} {czechYears(current.age)}
          </div>
          <div className="h-display" style={{ fontSize: 'clamp(28px, 3.6vw, 52px)', marginTop: 4 }}>
            {current.title}
          </div>
          <div style={{ marginTop: 8, color: 'var(--ink-soft)' }}>{current.caption}</div>
        </div>

        {/* Progress dots, right side — hidden on narrow screens (collide with photo) */}
        <div className="bigyear-dots" style={{
          position: 'absolute', right: 'clamp(16px, 2vw, 32px)', top: '50%',
          transform: 'translateY(-50%)',
          display: 'flex', flexDirection: 'column', gap: 6,
        }}>
          {items.map((_, i) => (
            <div key={i} style={{
              width: 6, height: 6, borderRadius: 999,
              background: i === idx ? 'var(--ink)' : 'rgba(42,24,16,.18)',
              transform: i === idx ? 'scale(1.6)' : 'scale(1)',
              transition: 'transform .3s, background .3s',
            }} />
          ))}
        </div>
      </div>
    </section>
  );
}

function Confetti({ seed, bg, fg }) {
  // deterministic dots per seed
  const dots = React.useMemo(() => {
    const arr = [];
    let s = seed;
    const rand = () => {
      s = (s * 9301 + 49297) % 233280;
      return s / 233280;
    };
    for (let i = 0; i < 28; i++) {
      arr.push({
        x: rand() * 100,
        y: rand() * 100,
        r: 4 + rand() * 8,
        rot: rand() * 360,
        c: i % 3 === 0 ? 'var(--coral)' : i % 3 === 1 ? 'var(--orange)' : 'var(--yellow)',
        shape: i % 4,
      });
    }
    return arr;
  }, [seed]);
  return (
    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
      {dots.map((d, i) => (
        <div key={i} style={{
          position: 'absolute',
          left: `${d.x}%`, top: `${d.y}%`,
          width: d.r * 2, height: d.r * 2,
          background: d.c,
          borderRadius: d.shape === 0 ? '999px' : d.shape === 1 ? '2px' : '4px',
          transform: `rotate(${d.rot}deg)` + (d.shape === 3 ? ' skewX(20deg)' : ''),
          opacity: .7,
        }} />
      ))}
    </div>
  );
}

window.VariantBigYear = VariantBigYear;