/* Worlds.jsx — the 12 potato worlds (the library, redesigned) */

const WORLDS = [
  { key:"classics",   img:"assets/world_classics.webp",        name:"Classics",        line:"The all-timers. Bake. Mash. Fry. Salt. Repeat.",          count:38, tone:"warm",  bg:"#E8B33C", fg:"#3A2310" },
  { key:"crispy",     img:"assets/world_crispy_things.webp",   name:"Crispy Things",   line:"Edges so brown they hum. The crunch you remember.",       count:32, tone:"warm",  bg:"#F0C74D", fg:"#3A2310" },
  { key:"cozy",       img:"assets/world_cozy_comforts.webp",   name:"Cozy Comforts",   line:"Soft mountains. Cheddar weather. Blanket potatoes.",      count:24, tone:"dark",  bg:"#9C4A1F", fg:"#FFFBF1" },
  { key:"cheese",     img:"assets/world_cheese_alert.webp",    name:"Cheese Alert",    line:"Cheese-pull territory. Witnesses encouraged.",            count:21, tone:"warm",  bg:"#E8B33C", fg:"#5C3A1E" },
  { key:"fancy",      img:"assets/world_fancyish.webp",        name:"Fancy-ish",       line:"Truffle, dauphinoise, pommes anna. Light a candle.",      count:18, tone:"warm",  bg:"#D9A23F", fg:"#3A2310" },
  { key:"lazy",       img:"assets/world_lazy_potatoes.webp",   name:"Lazy Potatoes",   line:"Three-ingredient nights. The fork-mash genre.",            count:22, tone:"warm",  bg:"#F2D684", fg:"#5C3A1E" },
  { key:"midnight",   img:"assets/world_midnight_trip.webp",   name:"Midnight Trip",   line:"1 a.m. cooking, no witnesses, no apologies.",              count:14, tone:"night", bg:"#1A1E47", fg:"#F5C45F" },
  { key:"party",      img:"assets/world_party_mode.webp",      name:"Party Mode",      line:"Tots, wedges, loaded skins. The crowd-feeders.",           count:19, tone:"hot",   bg:"#DA5E1B", fg:"#FFFBF1" },
  { key:"spicy",      img:"assets/world_spicy_energy.webp",    name:"Spicy Energy",    line:"Gochujang. Harissa. Hot honey. Pain optional.",            count:17, tone:"hot",   bg:"#E04918", fg:"#FFFBF1" },
  { key:"vegan",      img:"assets/world_vegan_shelter.webp",   name:"Vegan Shelter",   line:"Plant-based, herb-forward, deeply satisfying.",            count:16, tone:"green", bg:"#2E7138", fg:"#FFFBF1" },
  { key:"vegetarian", img:"assets/world_vegetarian_club.webp", name:"Vegetarian Club", line:"No-meat midweek wins. Cukes, peas, glory.",                count:14, tone:"green", bg:"#9DCB35", fg:"#3A2310" },
  { key:"weird",      img:"assets/world_weird_but_works.webp", name:"Weird But Works", line:"Chocolate-fries territory. Trust the spud.",               count:11, tone:"plum",  bg:"#4E2B66", fg:"#F5C45F" },
];

function WorldCard({ w, large }){
  return (
    <Reveal
      as="article"
      className={"world-card " + (large ? "is-large" : "")}
      delay={1}
      style={{ "--w-bg": w.bg, "--w-fg": w.fg }}
      data-tone={w.tone}
    >
      <div className="world-media">
        <img src={w.img} alt="" loading="lazy" />
      </div>
      <div className="world-body">
        <div className="world-row">
          <span className="world-no">No. {(WORLDS.indexOf(w)+1).toString().padStart(2,"0")}</span>
          <span className="world-count">{w.count} recipes</span>
        </div>
        <h3 className="world-name">{w.name}</h3>
        <p className="world-line">{w.line}</p>
        <div className="world-foot">
          <span>Enter the world</span>
          <span className="world-arrow" aria-hidden="true">→</span>
        </div>
      </div>
    </Reveal>
  );
}

function Worlds(){
  return (
    <section id="worlds" className="worlds">
      <div className="shell">
        <div className="worlds-head">
          <div className="worlds-head-l">
            <span className="eyebrow">The library · 02</span>
            <h2 className="worlds-h">
              Twelve <i>potato worlds.</i><br/>
              One vegetable to rule them all.
            </h2>
          </div>
          <div className="worlds-head-r">
            <p className="lede reveal reveal-d-2">
              The library isn't sorted by ingredient. It's sorted by mood. Pick the world that matches the night you're having — we'll handle the rest.
            </p>
            <div className="worlds-stats reveal reveal-d-3">
              <div><b>12</b><span>worlds</span></div>
              <div><b>200+</b><span>recipes</span></div>
              <div><b>6</b><span>level tiers</span></div>
            </div>
          </div>
        </div>

        <div className="worlds-grid">
          {WORLDS.map(w => <WorldCard key={w.key} w={w} />)}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Worlds });