/* ===== Generated Gift Guide page (hybrid editorial) ===== */

const Guide = ({ go }) => {
  const [generating, setGenerating] = React.useState(false);
  const [stage, setStage] = React.useState(0);

  // Simulate Iris generating the page on first render if triggered
  const triggerGen = () => {
    setGenerating(true); setStage(0);
    [800, 1600, 2400].forEach((t, i) => setTimeout(() => setStage(i+1), t));
    setTimeout(() => setGenerating(false), 3200);
  };

  const picks = [
    {brand: "Maileg", name: "Mouse in matchbox", price: 28, tone: "pink", shot: "plush · heirloom", rating: 5, blurb: "A tiny mouse tucked into a matchbox bed. It's the kind of thing they'll still have at 14.", rank: 1},
    {brand: "Hape", name: "Wooden baking set", price: 42, tone: "butter", shot: "wooden · pretend play", rating: 5, blurb: "Fourteen pieces, real heft, no plastic clang. My daughter bakes cakes for the dog.", rank: 2},
    {brand: "Lovevery", name: "The Enthusiast kit", price: 90, tone: "sage", shot: "play kit · ages 2", rating: 4, blurb: "Pricey, I know. But my two-year-old hasn't asked for anything else in a month.", rank: 3},
    {brand: "Tegu", name: "Magnetic blocks", price: 68, tone: "pink", shot: "blocks · magnetic", rating: 5, blurb: "Satisfying snap. Holds up to aggressive toddler construction physics.", rank: 4},
    {brand: "Melissa & Doug", name: "Latches board", price: 35, tone: "butter", shot: "wooden · fine motor", rating: 5, blurb: "Ten latches. She will open and close them for the entire dinner party. You're welcome.", rank: 5},
    {brand: "Plan Toys", name: "Rocket ship stacker", price: 32, tone: "sage", shot: "stacker · ages 2+", rating: 4, blurb: "It's a stacker, it's a rocket, it's sustainably-sourced rubberwood. A lot of wins.", rank: 6},
    {brand: "Goldie Blox", name: "Spinning machine", price: 45, tone: "pink", shot: "STEM · ages 3+", rating: 4, blurb: "More for 3+ honestly, but she watches her brother build and has opinions.", rank: 7},
    {brand: "Grimm's", name: "Rainbow stacker", price: 48, tone: "butter", shot: "wooden · open-ended", rating: 5, blurb: "The one you see on every aesthetic Instagram shelf. Deserved. It's beautiful.", rank: 8},
  ];

  const hero = picks[0];
  const rest = picks.slice(1);

  return (
    <div>
      {generating && <GeneratingOverlay stage={stage}/>}

      {/* Breadcrumb with URL */}
      <section style={{padding: "32px 32px 0"}}>
        <div className="container">
          <div style={{fontFamily: "var(--f-mono)", fontSize: 12, color: "var(--ink-muted)", display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap"}}>
            <span onClick={() => go("home")} style={{cursor: "pointer"}}>littlelamb</span>
            <span>/</span>
            <span onClick={() => go("gifts")} style={{cursor: "pointer"}}>gifts</span>
            <span>/</span>
            <span>christmas</span>
            <span>/</span>
            <span>2-year-old</span>
            <span>/</span>
            <span style={{color: "var(--navy)", fontWeight: 600}}>under-50</span>
            <button onClick={triggerGen} style={{marginLeft: "auto", fontFamily: "var(--f-ui)", fontSize: 11, border: "1px solid var(--rule)", padding: "4px 10px", borderRadius: 999, cursor: "pointer", background: "transparent", color: "var(--ink-soft)"}}>↻ regenerate</button>
          </div>
        </div>
      </section>

      {/* Editorial header */}
      <section style={{padding: "40px 32px 60px"}}>
        <div className="container">
          <div style={{display: "grid", gridTemplateColumns: "1.3fr 0.9fr", gap: 60, alignItems: "end"}}>
            <div>
              <Badge variant="pink">Christmas · Ages 1–2 · Under $50</Badge>
              <h1 className="display" style={{fontSize: "clamp(48px, 6.5vw, 104px)", margin: "24px 0 0", color: "var(--navy)", lineHeight: 1}}>
                Christmas gifts for your <br/>
                <span className="script" style={{color: "var(--pink-deep)"}}>two-year-old</span>, under $50.
              </h1>
              <div style={{display: "flex", gap: 40, marginTop: 40, flexWrap: "wrap"}}>
                <Signature name="Rebecca" role="Mom of two · editor"/>
                <div style={{color: "var(--ink-muted)", fontFamily: "var(--f-ui)", fontSize: 13}}>
                  <div>Updated Apr 14, 2026</div>
                  <div>8 picks · 6 min read</div>
                </div>
              </div>
            </div>
            <div style={{background: "var(--pink-soft)", padding: 30, borderRadius: 8, borderLeft: "3px solid var(--pink-deep)"}}>
              <div className="script" style={{fontSize: 22, color: "var(--navy)", marginBottom: 10}}>In this guide —</div>
              <p style={{fontSize: 16, lineHeight: 1.55, color: "var(--ink-soft)", margin: 0}}>
                Two is the year of fierce opinions and real play. This is the list I'd send a sister-in-law at 11pm on Dec 22nd. Heirloom picks, most under $50. One splurge you can share with grandparents.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* HERO PICK — the one I'd actually buy */}
      <section style={{background: "var(--bg-alt)", padding: "80px 32px"}}>
        <div className="container">
          <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "center"}}>
            <div style={{position: "relative"}}>
              <div style={{position: "absolute", top: -30, left: -20, zIndex: 3}}>
                <div style={{background: "var(--navy)", color: "var(--cream)", padding: "12px 18px", borderRadius: 999, fontFamily: "var(--f-ui)", fontSize: 12, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase", display: "inline-flex", alignItems: "center", gap: 10}}>
                  <span style={{width: 8, height: 8, borderRadius: "50%", background: "var(--pink)"}}/>
                  The one I'd actually buy
                </div>
              </div>
              <div className={"ph " + hero.tone} style={{aspectRatio: "4/5", borderRadius: 4, position: "relative"}}>
                <div className="ph-label">hero product shot · {hero.shot}</div>
              </div>
            </div>
            <div>
              <div className="allcaps" style={{color: "var(--pink-deep)", marginBottom: 10}}>{hero.brand} · pick nº 01</div>
              <h2 className="display" style={{fontSize: 64, margin: 0, color: "var(--navy)", lineHeight: 1.05}}>{hero.name}</h2>
              <div style={{display: "flex", gap: 16, alignItems: "center", marginTop: 14}}>
                <span style={{fontFamily: "var(--f-ui)", fontSize: 20, color: "var(--navy)", fontWeight: 600}}>${hero.price}</span>
                <Stars filled={hero.rating}/>
                <span className="chip">free returns</span>
              </div>
              <p style={{fontSize: 20, lineHeight: 1.6, color: "var(--ink-soft)", marginTop: 28}}>
                {hero.blurb} I bought mine when my oldest turned two and we still have it five years later — a little loved around the edges, which is the whole point of an heirloom toy.
              </p>
              <div className="stickynote" style={{marginTop: 30, transform: "rotate(-1deg)"}}>
                Add a matchbox of tiny <br/>
                clothes — $8, same brand.<br/>
                Makes it a set. —R
              </div>
              <div style={{display: "flex", gap: 12, marginTop: 30}}>
                <button className="btn primary arrow">Shop at Maileg</button>
                <button className="btn">View similar</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Rest of grid */}
      <section>
        <div className="container">
          <div style={{display: "flex", alignItems: "end", justifyContent: "space-between", marginBottom: 40}}>
            <div>
              <div className="eyebrow" style={{marginBottom: 14}}>The rest of the list</div>
              <h2 className="display" style={{fontSize: 48, margin: 0, color: "var(--navy)"}}>Seven more, ranked.</h2>
            </div>
            <div style={{display: "flex", gap: 8}}>
              <button className="btn tiny">Grid</button>
              <button className="btn tiny" style={{opacity: 0.5}}>List</button>
            </div>
          </div>
          <div style={{display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 40, rowGap: 60}}>
            {rest.map((p, i) => (
              <div key={i} style={{position: "relative"}}>
                <div style={{position: "absolute", top: -20, left: -10, fontFamily: "var(--f-display)", fontSize: 80, fontStyle: "italic", color: "var(--pink)", lineHeight: 1, zIndex: 1}}>{String(p.rank).padStart(2, "0")}</div>
                <div style={{position: "relative", zIndex: 2, paddingLeft: 20}}>
                  <ProductCard product={p}/>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Related guides */}
      <section style={{background: "var(--navy)", color: "var(--cream)"}}>
        <div className="container">
          <h3 className="display" style={{fontSize: 48, margin: "0 0 40px", color: "var(--cream)"}}>
            If you liked this, <span style={{color: "var(--pink)", fontStyle: "italic"}}>try —</span>
          </h3>
          <div style={{display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24}}>
            {[
              {title: "3-year-old · under $50", url: "/gifts/birthday/3-year-old/under-50"},
              {title: "Toddler · Easter basket", url: "/gifts/easter/toddler/under-25"},
              {title: "Splurge: a first-birthday gift", url: "/gifts/birthday/1-year-old/splurge"},
            ].map((g, i) => (
              <div key={i} onClick={() => go("guide")} style={{border: "1px solid rgba(255,255,255,0.2)", padding: 30, borderRadius: 4, cursor: "pointer"}}>
                <div style={{fontFamily: "var(--f-mono)", fontSize: 11, opacity: 0.6}}>{g.url}</div>
                <div className="display" style={{fontSize: 28, marginTop: 14}}>{g.title}</div>
                <div className="allcaps" style={{marginTop: 16, color: "var(--pink)"}}>Open →</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

const GeneratingOverlay = ({ stage }) => {
  const steps = [
    "Gathering 2-year-old favorites from our archive…",
    "Filtering by Christmas + under $50…",
    "Asking Rebecca to write an intro…",
    "Laying out the page…",
  ];
  return (
    <div style={{position: "fixed", inset: 0, background: "rgba(251, 246, 241, 0.94)", zIndex: 200, display: "flex", alignItems: "center", justifyContent: "center"}}>
      <div style={{textAlign: "center", maxWidth: 500}}>
        <div style={{animation: "pulse 1.2s ease-in-out infinite"}}>
          <Lamb size={72}/>
        </div>
        <div className="eyebrow" style={{marginTop: 30, justifyContent: "center", display: "inline-flex"}}>Iris is building your guide</div>
        <div className="display" style={{fontSize: 32, color: "var(--navy)", marginTop: 20, lineHeight: 1.2, minHeight: 90}}>
          {steps[Math.min(stage, steps.length - 1)]}
        </div>
        <div style={{marginTop: 30, display: "flex", gap: 6, justifyContent: "center"}}>
          {steps.map((_, i) => (
            <div key={i} style={{width: 30, height: 2, borderRadius: 2, background: i <= stage ? "var(--pink-deep)" : "var(--rule)"}}/>
          ))}
        </div>
        <style>{`@keyframes pulse { 0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1} }`}</style>
      </div>
    </div>
  );
};

Object.assign(window, { Guide });