// site-band.jsx — full-bleed parallax statement band with a drop-in image slot.
// Empty state looks intentional (navy + dot-grid + statement); when the user
// drops a photo it shows through a navy duotone tint. Exports ImageBand.

function ImageBand({ c, accent, tint = 'Balanced' }) {
  const wrapRef = React.useRef(null);
  const imgRef = React.useRef(null);
  const b = c.band;

  // parallax: drift the image layer slower than the page scroll
  React.useEffect(() => {
    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) return;
    let raf = 0;
    const update = () => {
      raf = 0;
      const wrap = wrapRef.current, img = imgRef.current;
      if (!wrap || !img) return;
      const r = wrap.getBoundingClientRect();
      const vh = window.innerHeight || 800;
      // progress: -1 (band just below viewport) → 1 (just above)
      const progress = (r.top + r.height / 2 - vh / 2) / (vh / 2 + r.height / 2);
      const shift = Math.max(-1, Math.min(1, progress)) * 60; // px
      img.style.transform = `translate3d(0, ${shift.toFixed(1)}px, 0) scale(1.18)`;
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    update();
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, []);

  const tintMap = {
    Strong: `linear-gradient(180deg, rgba(7,29,74,.92), rgba(7,29,74,.82))`,
    Balanced: `linear-gradient(180deg, rgba(7,29,74,.86) 0%, rgba(10,42,107,.66) 55%, rgba(7,29,74,.88) 100%)`,
    Subtle: `linear-gradient(180deg, rgba(7,29,74,.74) 0%, rgba(10,42,107,.46) 50%, rgba(7,29,74,.78) 100%)`,
  };
  const tintBg = tintMap[tint] || tintMap.Balanced;

  return (
    <section id="band" style={{ position: 'relative', height: 'clamp(380px, 52vh, 520px)', overflow: 'hidden', background: T.navyDeep }}>
      {/* base texture (always visible — keeps empty state intentional) */}
      <div style={{ position: 'absolute', inset: 0, zIndex: 0, backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 0)', backgroundSize: '28px 28px', opacity: .6 }} />

      {/* parallax image layer */}
      <div ref={wrapRef} style={{ position: 'absolute', inset: 0, zIndex: 1 }}>
        <div ref={imgRef} style={{ position: 'absolute', left: 0, right: 0, top: '-9%', height: '118%', willChange: 'transform', transform: 'scale(1.18)' }}>
          <img src="/assets/band.webp" alt=""
            style={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>
      </div>

      {/* navy duotone tint */}
      <div style={{ position: 'absolute', inset: 0, zIndex: 2, background: tintBg, pointerEvents: 'none' }} />
      {/* hairlines top/bottom */}
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 1, zIndex: 2, background: 'rgba(255,255,255,.12)' }} />
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 1, zIndex: 2, background: 'rgba(255,255,255,.12)' }} />

      {/* content */}
      <div style={{ position: 'relative', zIndex: 3, height: '100%', maxWidth: 1180, margin: '0 auto', padding: '0 clamp(20px,5vw,40px)', display: 'flex', flexDirection: 'column', justifyContent: 'center', pointerEvents: 'none' }}>
        <Reveal>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, marginBottom: 22 }}>
            <span style={{ width: 7, height: 7, background: accent, borderRadius: 2 }} />
            <span style={{ fontFamily: T.sans, fontSize: 12.5, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase', color: accent }}>{b.eyebrow}</span>
          </div>
        </Reveal>
        <Reveal delay={90}>
          <h2 style={{ fontFamily: T.serif, fontSize: 'clamp(28px, 4vw, 50px)', lineHeight: 1.12, fontWeight: 500, letterSpacing: -0.6, color: '#fff', margin: 0, maxWidth: 880 }}>{b.statement}</h2>
        </Reveal>
        <Reveal delay={160}>
          <p style={{ fontFamily: T.sans, fontSize: 16, color: 'rgba(255,255,255,.66)', margin: '20px 0 0' }}>{b.caption}</p>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { ImageBand });