// PhotoStrip.jsx — auto-scrolling food photo strip between Story and Contact
function PhotoStrip() {
  const photos = [
    { src: IMG.spitPaper,       alt: "Mad Plant Spit on branded paper" },
    { src: IMG.flatbreadDuo,    alt: "Loaded flatbreads top-down" },
    { src: IMG.flatbreadBricks, alt: "Two loaded flatbreads on brick surface" },
    { src: IMG.pizzaCloseup,    alt: "Pizza with Mad Plant Crumble close-up" },
    { src: IMG.pizzaScissors,   alt: "Pizza with scissors top-down" },
  ];

  // Triple the photos so the loop is seamless — same technique as the text marquee
  const run = [...photos, ...photos, ...photos];

  return (
    <div className="nm-strip-outer">
      <div className="nm-strip-track">
        {run.map(({ src, alt }, i) => (
          <img key={i} src={src} alt={alt} className="nm-strip-img" />
        ))}
      </div>
      <style>{`
        .nm-strip-outer {
          overflow: hidden;
          background: var(--ink);
          line-height: 0;
          border-top: 1px solid var(--border-dark);
          border-bottom: 1px solid var(--border-dark);
        }
        .nm-strip-track {
          display: flex;
          gap: 4px;
          width: max-content;
          animation: nm-strip 55s linear infinite;
        }
        .nm-strip-img {
          height: 360px;
          width: auto;
          display: block;
          object-fit: cover;
        }
        @keyframes nm-strip {
          from { transform: translateX(0) }
          to   { transform: translateX(-33.333%) }
        }
        @media (max-width: 860px) {
          .nm-strip-img { height: 220px; }
        }
        @media (prefers-reduced-motion: reduce) {
          .nm-strip-track { animation: none; }
        }
      `}</style>
    </div>
  );
}
window.PhotoStrip = PhotoStrip;