/* Manifesto.jsx — three panels: recipes, points, sticker-send */

function PanelRecipes(){
  // Fanned card stack inspired by the FreeFrontend "rotating nav" pattern.
  // Five recipe cards are positioned with `data-pos="0..4"`. The "opened"
  // class on the wrapper toggles between fanned-out (default) and a tight
  // collapsed pile. Each card has its own rotation in the fan. Hover a
  // card to lift it; click anywhere on the stack to collapse / re-fan.
  const ids = [3, 8, 12, 19, 23];
  const [opened, setOpened] = React.useState(true);
  return (
    <div
      className={"recipe-stack" + (opened ? " opened" : "")}
      onClick={() => setOpened(o => !o)}
      role="button"
      tabIndex={0}
      aria-label={opened ? "Collapse the recipe stack" : "Fan out the recipe stack"}
      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setOpened(o => !o); } }}
    >
      {ids.map((id, i) => {
        const pad = String(id).padStart(3, "0");
        return (
          <div className="recipe-card" key={id} data-pos={i}>
            <img src={`assets/recipes/r${pad}.webp`} alt="" loading="lazy" />
          </div>
        );
      })}
    </div>
  );
}

function PanelPoints(){
  return (
    <div className="points-card">
      <div className="pp">Potato Points</div>
      <div className="points-num">
        <AnimatedCount from={0} to={1247} duration={1800} />
      </div>
      <div className="points-bar"><i /></div>
      <div className="points-trail">
        <span>Lv 3 · Crispy</span>
        <span>Lv 4 · Loaded</span>
      </div>
      <div className="points-foot">
        <span className="spark" />
        <span><b>+75 PP</b> for tonight's quest</span>
      </div>
    </div>
  );
}

function PanelMessage(){
  return (
    <div className="imsg">
      <div className="who">Sam · iMessage</div>
      <div className="bubble them">are you cooking again</div>
      <div className="bubble me">always</div>
      <div className="bubble sticker">
        <img src="assets/stickers/s06_lazy_spud.webp" alt="" />
      </div>
      <div className="time">delivered · just now</div>
    </div>
  );
}

function Panel({ idx, no, eyebrow, title, body, children, delay }){
  return (
    <Reveal className="panel" delay={delay} scale>
      <div>
        <div className="panel-no">{eyebrow}</div>
        <h3>{title}</h3>
        <p>{body}</p>
      </div>
      <div className="panel-visual">
        {children}
      </div>
    </Reveal>
  );
}

function Manifesto(){
  return (
    <section id="features" className="manifesto">
      <div className="shell">
        <div className="manifesto-head">
          <div>
            <span className="eyebrow">The manifesto · 01</span>
            <h2>Every potato. <br/><i>Every way.</i></h2>
          </div>
          <p className="lede reveal reveal-d-2">
            One app, obsessively scoped. Two hundred recipes that respect the spud. A points system that respects the cook. A sticker pack that respects nobody.
          </p>
        </div>

        <div className="panels">
          <Panel
            eyebrow="01 — The library"
            title="200+ recipes. Every style worth knowing."
            body="Fries, mash, baked, chips, salads, loaded plates, late-night snacks. From three-ingredient weeknights to all-day rosti projects."
            delay={1}
          >
            <PanelRecipes />
          </Panel>

          <Panel
            eyebrow="02 — The points"
            title="Earn for every cook. Level up like you mean it."
            body="Cook a recipe, log it, earn Potato Points. Six tiers from Rookie to Supreme Potato Being. Daily quests give the night some shape."
            delay={2}
          >
            <PanelPoints />
          </Panel>

          <Panel
            eyebrow="03 — The stickers"
            title="Send your favorites where it matters."
            body="Unlock characters with Potato Points. Slap them into iMessage or WhatsApp. The friend group will thank you. Or react with confusion. Either is fine."
            delay={3}
          >
            <PanelMessage />
          </Panel>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Manifesto });