/* Marquee.jsx — 3 stacked rows of recipe names */

const RECIPES_A = [
  "Loaded Hashbrown Casserole", "Crispy Smashed Potatoes",
  "Korean Gamja Jorim", "Pommes Anna",
  "Cheddar Bay Roasties", "Truffle Gnocchi",
  "Spicy Patatas Bravas", "Garlic Confit Mash",
  "Salt-Crusted Hasselbacks", "Aloo Gobi",
];
const RECIPES_B = [
  "Brown Butter Mash", "Skillet Rosti",
  "Miso Yaki Imo", "Smoked Paprika Wedges",
  "Tartiflette", "Curry-Leaf Bombay Potatoes",
  "Sour Cream & Chive Skins", "Furikake Fries",
  "Pierogi Ruskie", "Saag Aloo",
];
const RECIPES_C = [
  "Cheese-Pull Tots", "Hot Honey Smash",
  "Buttermilk Mashed", "Vinegar Chips, Properly",
  "Loaded Baked Sweetheart", "Chimichurri Wedges",
  "Crispy Duck-Fat Roasties", "Egg-on-Top Rösti",
  "Gochujang Wedges", "Lemon Pepper Wedges",
];

function MarqueeRow({ items, rowClass }){
  // duplicate the items so the loop is seamless
  const doubled = [...items, ...items];
  return (
    <div className={`marquee-row ${rowClass}`}>
      <div className="marquee-track">
        {doubled.map((t, i)=>(
          <span className="marquee-item" key={i}>{t}</span>
        ))}
      </div>
    </div>
  );
}

function Marquee(){
  return (
    <section className="marquee-stack" aria-hidden="true">
      <MarqueeRow items={RECIPES_A} rowClass="r1" />
      <MarqueeRow items={RECIPES_B} rowClass="r2" />
      <MarqueeRow items={RECIPES_C} rowClass="r3" />
    </section>
  );
}

Object.assign(window, { Marquee });