// PhotoStrip — replaces the State Library hero illustration with a horizontal
// strip of four polaroid-style scanned photos that pan from right to left as
// the user scrolls. Once all four have been revealed, the strip continues to
// drift left/fade so the date parallax beat reads cleanly.
//
//   progress 0.00         → first photo enters from the right
//   progress 0.55         → fourth photo fully on-screen, strip framed centred
//   progress 0.55 → 1.00  → strip drifts up & fades, ceding the stage to the
//                           envelope reveal that follows
//
// The photos are rendered as polaroids — slight rotation each, deckled white
// border, soft drop shadow — so the black-and-white scans feel intentional
// rather than stock product imagery.

const STRIP_PHOTOS = [
  { src: 'assets/scan-1.png', tilt: -3.2, lift:  -8 },
  { src: 'assets/scan-2.png', tilt:  2.4, lift:  10 },
  { src: 'assets/scan-3.png', tilt: -2.0, lift:  -4 },
  { src: 'assets/scan-4.png', tilt:  3.0, lift:   6 },
];

function PhotoStrip({ progress = 0 }) {
  // Pan progress 0..1 across the photo phase (0.00 → 0.55 of hero).
  const pan  = Math.max(0, Math.min(1, progress / 0.55));
  // After the strip is fully shown, drift up + fade gently.
  const exit = Math.max(0, Math.min(1, (progress - 0.55) / 0.20));

  // The strip's overall horizontal translation. We start with the LEFT edge of
  // the strip pushed past the right edge of the viewport (110vw) and pan it
  // left so the strip's RIGHT edge ends roughly centred at pan=1.
  // Strip is ~4 photos × 28vw each plus gaps ≈ 130vw wide.
  const stripWidth = 132; // vw
  const startX = 110;     // vw — entirely off-screen right
  const endX   = (100 - stripWidth) / 2; // centre the strip horizontally

  const tx = startX + (endX - startX) * easeOutCubic(pan);
  const ty = -exit * 40;
  const op = 1 - exit * 0.55;

  return (
    <div
      className="photo-strip"
      style={{
        transform: `translate(${tx}vw, ${ty}px)`,
        opacity: op,
      }}
    >
      {STRIP_PHOTOS.map((p, i) => (
        <figure
          key={i}
          className="photo-strip-card"
          style={{
            transform: `rotate(${p.tilt}deg) translateY(${p.lift}px)`,
          }}
        >
          <img src={p.src} alt="" draggable="false" />
        </figure>
      ))}
    </div>
  );
}

function easeOutCubic(t) {
  return 1 - Math.pow(1 - t, 3);
}

window.PhotoStrip = PhotoStrip;