/* ===== Category page (e.g. Clothing) ===== */
const Category = ({ go }) => {
  const [active, setActive] = React.useState("clothing");
  const cats = ["toys", "clothing", "nursery", "gear", "books", "educational"];
  const products = Array.from({length: 12}).map((_, i) => ({
    brand: ["Quince", "Jamie Kay", "Mabo", "Zara Baby", "Hanna", "La Coqueta"][i % 6],
    name: ["Ribbed romper", "Linen overalls", "Smocked dress", "Merino cardigan", "Pointelle tee", "Waffle pajamas"][i % 6],
    price: [32, 48, 58, 65, 28, 42][i % 6],
    tone: ["pink", "butter", "sage", "pink", "butter", "sage"][i % 6],
    rating: 5 - (i % 2),
    shot: "garment · lifestyle",
    badge: i === 0 ? "new" : i === 3 ? "restock" : undefined,
  }));
  return (
    <div>
      <section style={{padding: "60px 32px 30px"}}>
        <div className="container">
          <div className="eyebrow" style={{marginBottom: 20}}>Shop by category</div>
          <h1 className="display" style={{fontSize: "clamp(56px, 8vw, 128px)", margin: 0, color: "var(--navy)", textTransform: "capitalize"}}>
            {active} <span className="script" style={{color: "var(--pink-deep)"}}>picks</span>
          </h1>
          <div style={{display: "flex", gap: 8, marginTop: 30, flexWrap: "wrap"}}>
            {cats.map(c => (
              <button key={c} onClick={() => setActive(c)} className="chip" style={{
                background: active === c ? "var(--navy)" : "transparent",
                color: active === c ? "var(--cream)" : "var(--navy)",
                border: "1px solid " + (active === c ? "var(--navy)" : "var(--rule)"),
                textTransform: "capitalize", cursor: "pointer",
              }}>{c}</button>
            ))}
          </div>
        </div>
      </section>
      <section style={{padding: "40px 32px"}}>
        <div className="container">
          <div style={{display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 30, paddingBottom: 20, borderBottom: "1px solid var(--rule)"}}>
            <div className="allcaps" style={{color: "var(--ink-muted)"}}>{products.length} picks · curated Apr 2026</div>
            <div style={{display: "flex", gap: 10, fontFamily: "var(--f-ui)", fontSize: 13}}>
              <span style={{color: "var(--ink-muted)"}}>Sort —</span>
              <span style={{cursor: "pointer", fontWeight: 600}}>Rebecca's picks</span>
              <span style={{cursor: "pointer", color: "var(--ink-muted)"}}>Newest</span>
              <span style={{cursor: "pointer", color: "var(--ink-muted)"}}>Price</span>
            </div>
          </div>
          <div style={{display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32, rowGap: 50}}>
            {products.map((p, i) => <ProductCard key={i} product={p} compact/>)}
          </div>
        </div>
      </section>
    </div>
  );
};

/* ===== About page ===== */
const About = ({ go }) => (
  <div>
    <section style={{padding: "80px 32px 60px"}}>
      <div className="container-narrow">
        <div className="eyebrow" style={{marginBottom: 30}}>About the boutique</div>
        <h1 className="display" style={{fontSize: "clamp(48px, 7vw, 104px)", margin: 0, color: "var(--navy)", lineHeight: 1}}>
          Recommendations <br/>that feel like a <span className="script" style={{color: "var(--pink-deep)"}}>note from a friend.</span>
        </h1>
      </div>
    </section>
    <section style={{padding: "40px 32px"}}>
      <div className="container-narrow" style={{fontSize: 20, lineHeight: 1.7, color: "var(--ink-soft)"}}>
        <p style={{fontSize: 24, color: "var(--navy)", fontStyle: "italic"}}>
          Little Lamb Boutique is the family corner of the HowTo Network. It is not a store. It is the place you come when your sister-in-law texts at 11pm asking what to get her niece for Christmas and you want to send back something better than an Amazon link.
        </p>
        <p>
          Every guide on this site is written by a real human — Rebecca or Priya — who has put these products through real houses and real children. When something is sponsored, we say so. When we haven't used it, we say that too.
        </p>
        <p>
          We built Little Lamb as a warmer, slower corner of the internet for parents. Less scroll. Less content-farm SEO. More "here is the thing I'd actually buy, and here is why."
        </p>
      </div>
    </section>
    <section style={{padding: "60px 32px"}}>
      <div className="container">
        <h2 className="display" style={{fontSize: 48, color: "var(--navy)", marginBottom: 50}}>The people writing these.</h2>
        <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60}}>
          {[
            {name: "Rebecca", role: "Editor · parent voice", img: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=700&q=80", bio: "Mom of two (ages 5 and 8), former editor at a parenting magazine, now writes the weekly dispatch. Believes the best gift is usually a book, and that no toddler needs a singing plastic Ferris wheel.", sig: "Honest. Been there. Wants you to save your money for the thing that matters."},
            {name: "Priya", role: "Kid voice · gift guides", img: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=700&q=80", bio: "Auntie to seven, age-specific guide lead, champion of the weird little gift that becomes a favorite. Writes the gift-giver guides — the 'what do I get my friend's five-year-old?' ones.", sig: "Playful. Specific. Knows what a five-year-old actually wants."},
          ].map(p => (
            <div key={p.name}>
              <div style={{aspectRatio: "4/5", borderRadius: 4, marginBottom: 24, overflow: "hidden", background: "var(--bg-alt)"}}>
                <img src={p.img} alt={p.name} style={{width: "100%", height: "100%", objectFit: "cover", display: "block"}}/>
              </div>
              <div className="script" style={{fontSize: 42, color: "var(--navy)"}}>{p.name}</div>
              <div className="allcaps" style={{color: "var(--ink-muted)", marginTop: 4}}>{p.role}</div>
              <p style={{fontSize: 17, lineHeight: 1.6, color: "var(--ink-soft)", marginTop: 20}}>{p.bio}</p>
              <div style={{marginTop: 20, padding: "16px 20px", background: "var(--bg-alt)", borderRadius: 6, fontStyle: "italic", color: "var(--navy)"}}>{p.sig}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
    <section style={{background: "var(--pink-soft)", padding: "80px 32px"}}>
      <div className="container-narrow">
        <div className="eyebrow" style={{marginBottom: 20}}>Our rules</div>
        <h2 className="display" style={{fontSize: 48, color: "var(--navy)", margin: "0 0 40px"}}>Four promises we made to ourselves.</h2>
        <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 30}}>
          {[
            ["No affiliate we haven't used.", "If it's on the list, we've held it, worn it, or been hit in the face with it."],
            ["No sponsored picks in disguise.", "Sponsored = labeled. Always. Above the pick, not in a grey footnote."],
            ["No infinite grid.", "A guide is 8–12 things. That's the whole point of curation."],
            ["We tell you what we'd actually buy.", "Every guide ends with 'the one I'd buy' — the honest answer."],
          ].map(([h, p], i) => (
            <div key={i} style={{display: "flex", gap: 20}}>
              <div style={{fontFamily: "var(--f-display)", fontStyle: "italic", fontSize: 56, color: "var(--pink-deep)", lineHeight: 1}}>0{i+1}</div>
              <div>
                <div className="display" style={{fontSize: 24, color: "var(--navy)"}}>{h}</div>
                <p style={{color: "var(--ink-soft)", marginTop: 8}}>{p}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  </div>
);

/* ===== Gift Finder (URL builder) ===== */
const Finder = ({ go }) => {
  const [step, setStep] = React.useState(0);
  const [occasion, setOccasion] = React.useState(null);
  const [age, setAge] = React.useState(null);
  const [price, setPrice] = React.useState(null);

  const occasions = [
    {id: "christmas", label: "Christmas", emoji: "❄"},
    {id: "birthday", label: "Birthday", emoji: "✦"},
    {id: "baby-shower", label: "Baby shower", emoji: "♡"},
    {id: "easter", label: "Easter", emoji: "✿"},
    {id: "valentines", label: "Valentine's", emoji: "♡"},
    {id: "mothers-day", label: "Mother's Day", emoji: "✧"},
    {id: "any", label: "Just because", emoji: "⋆"},
  ];
  const ages = [
    {id: "newborn", label: "Newborn", sub: "0–3 mo"},
    {id: "0-12mo", label: "0–12 mo", sub: "first year"},
    {id: "1-2yr", label: "1–2 yr", sub: "tiny opinions"},
    {id: "toddler", label: "Toddler", sub: "2–3 yr"},
    {id: "3-5yr", label: "3–5 yr", sub: "preschool"},
    {id: "6-8yr", label: "6–8 yr", sub: "big kid"},
    {id: "9-12yr", label: "9–12 yr", sub: "tween"},
  ];
  const prices = [
    {id: "under-25", label: "Under $25", sub: "stocking-stuffer"},
    {id: "under-50", label: "Under $50", sub: "solid main gift"},
    {id: "under-100", label: "Under $100", sub: "a real splurge"},
    {id: "splurge", label: "Splurge", sub: "no budget"},
  ];
  const selections = [occasion, age, price];
  const done = selections.every(Boolean);
  const url = done ? `/gifts/${occasion}/${age}/${price}` : `/gifts/${occasion || "___"}/${age || "___"}/${price || "___"}`;

  return (
    <section style={{padding: "80px 32px 140px", minHeight: "80vh"}}>
      <div className="container-narrow">
        <div className="eyebrow" style={{marginBottom: 30}}>Gift finder</div>
        <h1 className="display" style={{fontSize: "clamp(48px, 6.5vw, 96px)", margin: 0, color: "var(--navy)", lineHeight: 1}}>
          Three questions, <br/>
          one <span className="script" style={{color: "var(--pink-deep)"}}>perfect</span> guide.
        </h1>

        {/* Live URL preview */}
        <div style={{marginTop: 50, padding: "18px 22px", border: "1px dashed var(--rule)", borderRadius: 999, fontFamily: "var(--f-mono)", fontSize: 14, color: "var(--ink-soft)", display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap"}}>
          <span style={{color: "var(--ink-muted)"}}>thelittlelambboutique.com</span>
          <span style={{color: "var(--navy)", fontWeight: 600}}>{url}</span>
          {done && <span style={{marginLeft: "auto", color: "var(--pink-deep)", fontFamily: "var(--f-ui)", fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase"}}>✓ ready</span>}
        </div>

        <div style={{marginTop: 60}}>
          <FinderStep n={1} label="The occasion" active={step >= 0}>
            <div style={{display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12}}>
              {occasions.map(o => (
                <button key={o.id} onClick={() => {setOccasion(o.id); setStep(Math.max(step, 1));}}
                  style={pickBtn(occasion === o.id)}>
                  <span style={{fontSize: 28, marginBottom: 4}}>{o.emoji}</span>
                  <span className="display" style={{fontSize: 22, color: "var(--navy)"}}>{o.label}</span>
                </button>
              ))}
            </div>
          </FinderStep>

          <FinderStep n={2} label="How old is the little one?" active={step >= 1}>
            <div style={{display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12}}>
              {ages.map(a => (
                <button key={a.id} onClick={() => {setAge(a.id); setStep(Math.max(step, 2));}}
                  style={pickBtn(age === a.id)}>
                  <span className="display" style={{fontSize: 22, color: "var(--navy)"}}>{a.label}</span>
                  <span className="allcaps" style={{color: "var(--ink-muted)", fontSize: 10}}>{a.sub}</span>
                </button>
              ))}
            </div>
          </FinderStep>

          <FinderStep n={3} label="What's the budget?" active={step >= 2}>
            <div style={{display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12}}>
              {prices.map(p => (
                <button key={p.id} onClick={() => setPrice(p.id)} style={pickBtn(price === p.id)}>
                  <span className="display" style={{fontSize: 22, color: "var(--navy)"}}>{p.label}</span>
                  <span className="allcaps" style={{color: "var(--ink-muted)", fontSize: 10}}>{p.sub}</span>
                </button>
              ))}
            </div>
          </FinderStep>
        </div>

        {done && (
          <div style={{marginTop: 60, padding: 40, background: "var(--pink-soft)", borderRadius: 12, display: "flex", alignItems: "center", gap: 30, flexWrap: "wrap"}}>
            <Lamb size={60}/>
            <div style={{flex: 1, minWidth: 240}}>
              <div className="eyebrow">Your guide is ready</div>
              <div className="display" style={{fontSize: 32, color: "var(--navy)", marginTop: 6}}>Let's build this now.</div>
            </div>
            <button className="btn primary arrow" onClick={() => go("guide")}>Open guide</button>
          </div>
        )}
      </div>
    </section>
  );
};

const pickBtn = (active) => ({
  display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 6,
  padding: "20px 20px", cursor: "pointer",
  border: "1px solid " + (active ? "var(--navy)" : "var(--rule)"),
  background: active ? "var(--pink-soft)" : "transparent",
  borderRadius: 8,
  transition: "all .15s",
  textAlign: "left",
});

const FinderStep = ({ n, label, active, children }) => (
  <div style={{marginBottom: 50, opacity: active ? 1 : 0.35, transition: "opacity .3s"}}>
    <div style={{display: "flex", alignItems: "center", gap: 14, marginBottom: 20}}>
      <div style={{width: 32, height: 32, borderRadius: "50%", background: "var(--navy)", color: "var(--cream)", display: "grid", placeItems: "center", fontFamily: "var(--f-ui)", fontWeight: 600, fontSize: 13}}>{n}</div>
      <div className="display" style={{fontSize: 32, color: "var(--navy)"}}>{label}</div>
    </div>
    {children}
  </div>
);

Object.assign(window, { Category, About, Finder });