/* Bento.jsx — feature bento grid with micro-illustrations */

function PantryCell(){
  const [on, setOn] = React.useState([true, true, false, true]);
  const items = [
    { name:"Russet potatoes", have:"in pantry" },
    { name:"Olive oil",       have:"in pantry" },
    { name:"Smoked paprika",  have:"out" },
    { name:"Flaky salt",      have:"in pantry" },
  ];
  return (
    <div className="cell c-pantry">
      <div>
        <span className="cell-tag">Feature · 01</span>
        <h3>Cook with what I have.</h3>
        <p>Check what's in your kitchen. We surface recipes you can make tonight without a grocery run.</p>
      </div>
      <div className="pantry-list">
        {items.map((it, i)=>(
          <button
            key={i}
            className={"pantry-row " + (on[i] ? "on":"")}
            onClick={()=> setOn(on.map((v,j)=> j===i ? !v : v))}
            type="button"
          >
            <span className="chk" aria-hidden="true" />
            <span>{it.name}</span>
            <span className="have">{on[i] ? "have" : "need"}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

function ShopCell(){
  return (
    <Reveal className="cell c-shop" delay={1}>
      <div>
        <span className="cell-tag">Feature · 02</span>
        <h3>Smart shopping list.</h3>
        <p>Add five recipes. We de-dupe the ingredients into one tidy list, in store order.</p>
      </div>
      <div className="chips-wrap">
        <div className="chips-row">
          <span className="chip"><span>Russets</span><span className="x">×3</span></span>
          <span className="chip"><span>Russets</span><span className="x">×2</span></span>
          <span className="chip"><span>Heavy cream</span><span className="x">½ cup</span></span>
          <span className="chip"><span>Heavy cream</span><span className="x">¼ cup</span></span>
          <span className="chip"><span>Garlic</span></span>
          <span className="chip"><span>Garlic</span></span>
        </div>
        <div className="arrow-down" aria-hidden="true">↓</div>
        <div className="chips-row">
          <span className="chip merged"><span>Russets</span><span className="x">×5</span></span>
          <span className="chip merged"><span>Heavy cream</span><span className="x">¾ cup</span></span>
          <span className="chip merged"><span>Garlic</span><span className="x">×2</span></span>
        </div>
      </div>
    </Reveal>
  );
}

function SyncCell(){
  return (
    <Reveal className="cell c-sync" delay={2}>
      <div>
        <span className="cell-tag">Premium · iCloud</span>
        <h3>Sync, quietly.</h3>
        <p>Your private container. We never see it.</p>
      </div>
      <div className="sync-stage">
        <div className="mini-phone"><div className="scr" /></div>
        <div className="sync-arc"><i /></div>
        <div className="cloud-badge" aria-hidden="true">☁</div>
        <div className="sync-arc"><i style={{ animationDelay:"-1.1s" }} /></div>
        <div className="mini-phone"><div className="scr" /></div>
      </div>
    </Reveal>
  );
}

function NotesCell(){
  return (
    <Reveal className="cell c-notes" delay={3}>
      <div>
        <span className="cell-tag">Premium · Notes</span>
        <h3>Recipe notes.</h3>
      </div>
      <div className="note">
        "<span className="writ">Less butter than they say.</span><br/>
        <span className="writ">Mom was right about the cream.</span>"
      </div>
    </Reveal>
  );
}

function QuestCell(){
  return (
    <Reveal className="cell c-quest" delay={4}>
      <div>
        <span className="cell-tag">Feature · 03</span>
        <h3>The daily quest.</h3>
      </div>
      <div className="quest-card">
        <span className="badge">Tonight only</span>
        <h4>Make something crispy with what you have.</h4>
        <div className="reward">
          <span>30 min</span>
          <span><b>+75 PP</b></span>
        </div>
      </div>
    </Reveal>
  );
}

const LEVELS = [
  { n:1, name:"Rookie" },
  { n:2, name:"Spud"   },
  { n:3, name:"Crispy" },
  { n:4, name:"Loaded" },
  { n:5, name:"Royal"  },
  { n:6, name:"Supreme"},
];

function LevelCell(){
  const [ref, shown] = useReveal(true);
  return (
    <div ref={ref} className={"cell c-level cell-dark " + (shown ? "is-in" : "")}>
      <div className="lv-head">
        <div>
          <span className="cell-tag">Feature · 04</span>
          <h3>Six levels. Earn the title.</h3>
          <p>From Rookie to Supreme Potato Being. Cook to climb. Stickers unlock at every tier.</p>
        </div>
        <div className="lv-you">
          <span className="cell-tag">You</span>
          <div className="lv-you-num">Lv 3</div>
        </div>
      </div>
      <div className="levels-rail">
        <div className="levels-bar"><i /></div>
        <div className="levels-list">
          {LEVELS.map((l, i)=>(
            <div key={l.n} className={"lvl " + (i < 3 ? "on" : "")}>
              <div className="pip">{l.n}</div>
              <div className="name">{l.name}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Bento(){
  return (
    <section className="bento" id="features">
      <div className="shell">
        <div className="bento-head">
          <div>
            <span className="eyebrow">The features · 03</span>
            <h2>Built for people who <i>actually cook.</i></h2>
          </div>
          <p className="lede reveal reveal-d-2">
            A small, deeply considered toolkit. Nothing here is filler. Everything earns its tile.
          </p>
        </div>
        <div className="bento-grid">
          <PantryCell />
          <ShopCell />
          <SyncCell />
          <NotesCell />
          <QuestCell />
          <LevelCell />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Bento });