/* ===== Homepage ===== */

const Home = ({ go }) => {
  return (
    <div>
      <HomeHero go={go}/>
      <HomeStrip/>
      <HomeOccasions go={go}/>
      <HomeCurated go={go}/>
      <HomeFromRebecca/>
      <HomeByAge go={go}/>
      <HomeInstagram/>
      <HomeNewsletter/>
    </div>
  );
};

/* 1. HERO — editorial, with peeking lamb and asymmetric layout */
const HomeHero = ({ go }) => (
  <section style={{padding: "40px 32px 80px", position: "relative", overflow: "hidden"}}>
    <div className="container" style={{position: "relative"}}>
      {/* corner ornaments */}
      <div style={{position: "absolute", top: -10, right: 40, transform: "rotate(12deg)", opacity: 0.9}}>
        <Lamb size={80}/>
      </div>

      <div style={{display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 60, alignItems: "end", marginTop: 40}}>
        <div>
          <div className="eyebrow" style={{marginBottom: 30}}>
            Issue nº 14 · April 2026 <span style={{color: "var(--pink-deep)"}}>· new this week</span>
          </div>
          <h1 className="display" style={{fontSize: "clamp(56px, 8vw, 128px)", margin: 0, color: "var(--navy)"}}>
            Gifts for the <br/>
            <span style={{fontStyle: "italic"}}>little</span>
            <span className="script" style={{color: "var(--pink-deep)", fontSize: "0.85em", marginLeft: 16}}>people</span><br/>
            in your life.
          </h1>
          <p style={{maxWidth: 520, fontSize: 19, color: "var(--ink-soft)", marginTop: 36, lineHeight: 1.55}}>
            Carefully-picked toys, clothing, nursery, and "actually worth it" everyday things — curated by real parents, not an algorithm pretending to be one.
          </p>
          <div style={{display: "flex", gap: 14, marginTop: 36}}>
            <button className="btn primary arrow" onClick={() => go("finder")}>Find the perfect gift</button>
            <button className="btn arrow" onClick={() => go("gifts")}>Browse guides</button>
          </div>
        </div>

        {/* Right column: featured this-week card, stacked with sticky note */}
        <div style={{position: "relative", paddingBottom: 40}}>
          <div className="stickynote" style={{position: "absolute", top: -20, left: -30, zIndex: 3}}>
            "This is the one<br/>I bought for my niece.<br/>Honest." — Rebecca
          </div>

          <div className="polaroid" style={{transform: "rotate(2deg)", position: "relative", zIndex: 2}}>
            <div style={{aspectRatio: "4/5", borderRadius: 2, overflow: "hidden", position: "relative", background: "var(--pink-soft)"}}>
              <img src="https://images.unsplash.com/photo-1544126592-807ade215a0b?w=800&q=80" alt="baby in blush blanket" style={{width: "100%", height: "100%", objectFit: "cover", display: "block"}}/>
            </div>
            <div className="cap">pick of the week — for the new arrival</div>
          </div>

          <div style={{position: "absolute", bottom: -10, right: -20, background: "var(--cream)", border: "1px solid var(--rule)", padding: "18px 22px", borderRadius: 8, maxWidth: 220, zIndex: 4, boxShadow: "var(--shadow-soft)"}}>
            <div className="allcaps" style={{color: "var(--pink-deep)", marginBottom: 8}}>Weekly picks</div>
            <div className="display" style={{fontSize: 24, color: "var(--navy)", lineHeight: 1.1}}>12 things we're loving right now</div>
            <div style={{marginTop: 12, fontFamily: "var(--f-ui)", fontSize: 12, color: "var(--ink-muted)"}}>updated every Sunday ✦</div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* 2. Marquee / strip — categories ticker */
const HomeStrip = () => (
  <section style={{padding: "30px 0", background: "var(--navy)", color: "var(--cream)", overflow: "hidden"}}>
    <div style={{display: "flex", gap: 60, whiteSpace: "nowrap", fontFamily: "var(--f-display)", fontSize: 36, fontWeight: 300, animation: "scroll 40s linear infinite"}}>
      {Array.from({length: 3}).map((_, k) => (
        <React.Fragment key={k}>
          <span>toys</span>
          <span style={{color: "var(--pink)"}}>✦</span>
          <span style={{fontStyle: "italic"}}>clothing</span>
          <span style={{color: "var(--pink)"}}>✦</span>
          <span>nursery</span>
          <span style={{color: "var(--pink)"}}>✦</span>
          <span style={{fontStyle: "italic"}}>gear</span>
          <span style={{color: "var(--pink)"}}>✦</span>
          <span>books</span>
          <span style={{color: "var(--pink)"}}>✦</span>
          <span style={{fontStyle: "italic"}}>educational</span>
          <span style={{color: "var(--pink)"}}>✦</span>
        </React.Fragment>
      ))}
    </div>
    <style>{`@keyframes scroll { to { transform: translateX(-33.33%); } }`}</style>
  </section>
);

/* 3. Occasions — editorial tile grid */
const HomeOccasions = ({ go }) => {
  const occasions = [
    { title: "Christmas", sub: "December's picks", count: 48, emoji: "❄", img: "https://images.unsplash.com/photo-1512389142860-9c449e58a543?w=900&q=80" },
    { title: "Birthday", sub: "By age, for every year", count: 72, emoji: "✦", img: "https://images.unsplash.com/photo-1464347744102-11db6282f854?w=900&q=80" },
    { title: "Baby Shower", sub: "Thoughtful, not predictable", count: 34, emoji: "♡", img: "https://images.unsplash.com/photo-1515488042361-ee00e0ddd4e4?w=900&q=80" },
    { title: "Easter", sub: "Beyond the basket", count: 26, emoji: "✿", img: "https://images.unsplash.com/photo-1522184216316-3c25379f9760?w=900&q=80" },
    { title: "Valentine's", sub: "Small sweet things", count: 18, emoji: "♡", img: "https://images.unsplash.com/photo-1518621736915-f3b1c41bfd00?w=900&q=80" },
    { title: "Mother's Day", sub: "For the mom who has everything", count: 22, emoji: "✦", img: "https://images.unsplash.com/photo-1445633883498-7f9922d37a3f?w=900&q=80" },
  ];
  return (
    <section>
      <div className="container">
        <div style={{display: "flex", alignItems: "end", justifyContent: "space-between", marginBottom: 50, gap: 40, flexWrap: "wrap"}}>
          <div>
            <div className="eyebrow" style={{marginBottom: 16}}>By occasion</div>
            <h2 className="display" style={{fontSize: 72, margin: 0, color: "var(--navy)", maxWidth: 700}}>
              Every <span className="script" style={{color: "var(--pink-deep)", fontSize: "1em"}}>moment</span> gets a guide.
            </h2>
          </div>
          <button className="btn arrow" onClick={() => go("gifts")}>See all occasions</button>
        </div>
        <div style={{display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24}}>
          {occasions.map((o, i) => (
            <div key={o.title} onClick={() => go("guide")} style={{cursor: "pointer"}}>
              <div style={{aspectRatio: "4/3", borderRadius: 4, position: "relative", overflow: "hidden", background: "var(--bg-alt)"}}>
                <img src={o.img} alt={o.title} style={{position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover"}}/>
                <div style={{position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 40%, rgba(27,58,92,0.65))"}}/>
                <div style={{position: "absolute", top: 16, right: 18, fontSize: 28, color: "white"}}>{o.emoji}</div>
                <div style={{position: "absolute", bottom: 20, left: 20, right: 20, color: "white"}}>
                  <div className="display" style={{fontSize: 40, lineHeight: 1}}>{o.title}</div>
                  <div style={{marginTop: 8, fontFamily: "var(--f-ui)", fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase", display: "flex", justifyContent: "space-between"}}>
                    <span>{o.sub}</span>
                    <span>{o.count} picks →</span>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* 4. Curated — horizontally scrollable editorial row */
const HomeCurated = ({ go }) => {
  const items = [
    {brand: "Maileg", name: "Mouse in matchbox", price: 28, tone: "pink", shot: "heirloom plush · $28", rating: 5, badge: "editor's pick"},
    {brand: "Quince", name: "Merino baby cardigan", price: 45, tone: "butter", shot: "wardrobe · size 6–12mo", rating: 5},
    {brand: "Lovevery", name: "The Pioneer play kit", price: 90, tone: "sage", shot: "play kit · 13–15 months", rating: 4, badge: "worth it"},
    {brand: "Crane & Canopy", name: "Linen crib sheet set", price: 68, tone: "pink", shot: "nursery · blush linen", rating: 5},
    {brand: "Hape", name: "Wooden kitchen", price: 140, tone: "butter", shot: "big gift · ages 3+", rating: 5},
    {brand: "Little Unicorn", name: "Muslin swaddle trio", price: 36, tone: "sage", shot: "newborn · 3-pack", rating: 5, badge: "staff favorite"},
  ];
  return (
    <section style={{background: "var(--bg-alt)", padding: "100px 0 100px 32px"}}>
      <div style={{maxWidth: 1360, margin: "0 auto"}}>
        <div style={{display: "flex", alignItems: "end", justifyContent: "space-between", marginBottom: 40, paddingRight: 32}}>
          <div>
            <div className="eyebrow" style={{marginBottom: 16}}>This week's 12 — an edit by Rebecca</div>
            <h2 className="display" style={{fontSize: 72, margin: 0, color: "var(--navy)"}}>
              Things we're <span style={{fontStyle: "italic", color: "var(--pink-deep)"}}>actually</span> buying.
            </h2>
            <p style={{marginTop: 20, maxWidth: 560, color: "var(--ink-soft)", fontSize: 18}}>
              Tested in our own houses, on our own children, against our own patience. Updated every Sunday.
            </p>
          </div>
        </div>
      </div>
      <div style={{display: "flex", gap: 32, overflowX: "auto", paddingBottom: 30, paddingRight: 32, scrollbarWidth: "thin"}}>
        {items.map((p, i) => (
          <div key={i} style={{flex: "none", width: 280}}>
            <ProductCard product={p} compact/>
          </div>
        ))}
        <div style={{flex: "none", width: 280, display: "grid", placeItems: "center"}}>
          <button className="btn arrow" onClick={() => go("guide")}>See all 12</button>
        </div>
      </div>
    </section>
  );
};

/* 5. From Rebecca — editorial note */
const HomeFromRebecca = () => (
  <section style={{padding: "120px 32px"}}>
    <div className="container-narrow" style={{textAlign: "center", position: "relative"}}>
      <div style={{width: 120, height: 120, borderRadius: "50%", overflow: "hidden", boxShadow: "var(--shadow-soft)", border: "4px solid var(--bg)", margin: "0 auto 28px"}}>
        <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=400&q=80" alt="Rebecca" style={{width: "100%", height: "100%", objectFit: "cover"}}/>
      </div>
      <div className="eyebrow" style={{marginBottom: 30, justifyContent: "center", display: "inline-flex"}}>A note from Rebecca</div>
      <blockquote className="display" style={{fontSize: 56, lineHeight: 1.15, margin: 0, color: "var(--navy)", fontStyle: "italic", letterSpacing: "-0.02em"}}>
        "Little Lamb started because I was tired of <span style={{background: "var(--pink-soft)", padding: "0 8px", fontStyle: "normal"}}>sponsored-content slop</span> pretending to be advice. So we built the opposite."
      </blockquote>
      <div style={{marginTop: 40, display: "inline-flex"}}>
        <Signature name="Rebecca" role="Editor & mom of two" color="var(--pink)"/>
      </div>
    </div>
  </section>
);

/* 6. Shop by age — playful horizontal dials */
const HomeByAge = ({ go }) => {
  const ages = [
    { id: "newborn", label: "Newborn", sub: "0–3 months", count: 24 },
    { id: "0-12mo", label: "0–12 mo", sub: "the first year", count: 38 },
    { id: "1-2yr", label: "1–2 yr", sub: "tiny opinions", count: 42 },
    { id: "toddler", label: "Toddler", sub: "2–3 yr", count: 56 },
    { id: "3-5yr", label: "3–5 yr", sub: "preschool", count: 64 },
    { id: "6-8yr", label: "6–8 yr", sub: "big kid", count: 48 },
    { id: "9-12yr", label: "9–12 yr", sub: "tweens", count: 32 },
  ];
  return (
    <section style={{background: "var(--navy)", color: "var(--cream)"}}>
      <div className="container">
        <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "end", marginBottom: 60}}>
          <div>
            <div className="eyebrow" style={{color: "var(--pink)", marginBottom: 16}}>By age</div>
            <h2 className="display" style={{fontSize: 72, margin: 0, color: "var(--cream)"}}>
              From <span className="script" style={{color: "var(--pink)", fontSize: "0.95em"}}>hours-old</span> to almost-teen.
            </h2>
          </div>
          <p style={{fontSize: 18, opacity: 0.75, maxWidth: 500, lineHeight: 1.55}}>
            We break every guide into real age brackets — because a three-month-old and a three-year-old are not even the same <em>species</em>.
          </p>
        </div>
        <div style={{display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 14}}>
          {ages.map((a, i) => (
            <div key={a.id} onClick={() => go("guide")} style={{
              aspectRatio: "3/4",
              border: "1px solid rgba(244, 192, 209, 0.25)",
              borderRadius: 6,
              padding: 20,
              display: "flex", flexDirection: "column", justifyContent: "space-between",
              cursor: "pointer",
              transition: "all .2s ease",
              background: i === 2 ? "var(--pink)" : "transparent",
              color: i === 2 ? "var(--navy)" : "var(--cream)",
            }}
            onMouseEnter={e => {
              if (i !== 2) { e.currentTarget.style.background = "rgba(244,192,209,0.1)"; }
            }}
            onMouseLeave={e => {
              if (i !== 2) { e.currentTarget.style.background = "transparent"; }
            }}>
              <div style={{fontFamily: "var(--f-ui)", fontSize: 12, opacity: 0.7}}>{String(i+1).padStart(2,"0")}</div>
              <div>
                <div className="display" style={{fontSize: 28, lineHeight: 1}}>{a.label}</div>
                <div style={{marginTop: 4, fontFamily: "var(--f-ui)", fontSize: 11, opacity: 0.7, textTransform: "uppercase", letterSpacing: "0.1em"}}>{a.sub}</div>
                <div style={{marginTop: 16, fontSize: 12, fontFamily: "var(--f-ui)", opacity: 0.85}}>{a.count} picks →</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* 7. Instagram-style grid */
const HomeInstagram = () => {
  const posts = [
    {img: "https://images.unsplash.com/photo-1555252333-9f8e92e65df9?w=500&q=80", cap: "crib mobile · nursery story"},
    {img: "https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?w=500&q=80", cap: "first-birthday cake smash"},
    {img: "https://images.unsplash.com/photo-1596464716127-f2a82984de30?w=500&q=80", cap: "montessori shelf tour"},
    {img: "https://images.unsplash.com/photo-1522771930-78848d9293e8?w=500&q=80", cap: "linen romper · 9 months"},
    {img: "https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?w=500&q=80&sig=2", cap: "bedtime book stack"},
    {img: "https://images.unsplash.com/photo-1490818387583-1baba5e638af?w=500&q=80", cap: "Easter basket, sans candy"},
  ];
  return (
    <section>
      <div className="container">
        <div style={{display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 40, flexWrap: "wrap", gap: 20}}>
          <div>
            <div className="eyebrow" style={{marginBottom: 14}}>@littlelambboutique</div>
            <h2 className="display" style={{fontSize: 56, margin: 0, color: "var(--navy)"}}>
              On our <span className="script" style={{color: "var(--pink-deep)"}}>feed</span> this week
            </h2>
          </div>
          <div className="chip outline">17.4k followers · warm, not a content farm</div>
        </div>
        <div style={{display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 6}}>
          {posts.map((p, i) => (
            <div key={i} style={{aspectRatio: "1/1", borderRadius: 2, cursor: "pointer", position: "relative", overflow: "hidden", background: "var(--bg-alt)"}}
              onMouseEnter={e => e.currentTarget.querySelector('.ig-cap').style.opacity = 1}
              onMouseLeave={e => e.currentTarget.querySelector('.ig-cap').style.opacity = 0}>
              <img src={p.img} alt={p.cap} style={{width: "100%", height: "100%", objectFit: "cover", display: "block"}}/>
              <div className="ig-cap" style={{position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 50%, rgba(27,58,92,0.75))", display: "flex", alignItems: "flex-end", padding: 14, opacity: 0, transition: "opacity .2s", color: "white", fontFamily: "var(--f-ui)", fontSize: 11, letterSpacing: "0.06em"}}>{p.cap}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* 8. Newsletter */
const HomeNewsletter = () => {
  const [email, setEmail] = React.useState("");
  const [submitted, setSubmitted] = React.useState(false);
  return (
    <section style={{padding: "120px 32px", background: "var(--pink-soft)"}}>
      <div className="container" style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center"}}>
        <div style={{position: "relative"}}>
          <div className="stickynote" style={{position: "absolute", top: -10, right: 20, transform: "rotate(3deg)", fontSize: 16}}>
            5,200 parents<br/>subscribed ♡
          </div>
          <div className="polaroid" style={{transform: "rotate(-3deg)", maxWidth: 380}}>
            <div style={{aspectRatio: "1/1", borderRadius: 2, overflow: "hidden"}}>
              <img src="https://images.unsplash.com/photo-1476703993599-0035a21b17a9?w=800&q=80" alt="flatlay" style={{width: "100%", height: "100%", objectFit: "cover", display: "block"}}/>
            </div>
            <div className="cap">Sundays in your inbox</div>
          </div>
        </div>
        <div>
          <div className="eyebrow" style={{marginBottom: 20}}>The weekly dispatch</div>
          <h2 className="display" style={{fontSize: 64, margin: 0, color: "var(--navy)", lineHeight: 1.05}}>
            One email, <br/>
            <span style={{fontStyle: "italic"}}>twelve things</span>,<br/>
            every Sunday.
          </h2>
          <p style={{fontSize: 18, color: "var(--ink-soft)", marginTop: 24, maxWidth: 460}}>
            The guide we'd send a friend who asked "what should I get?" No affiliates we haven't actually used. No sponsored picks in disguise.
          </p>
          <form style={{display: "flex", gap: 10, marginTop: 32, maxWidth: 480}} onSubmit={e => {e.preventDefault(); setSubmitted(true);}}>
            <input type="email" placeholder="your@email.com" value={email} onChange={e => setEmail(e.target.value)}
              style={{flex: 1, padding: "16px 20px", fontFamily: "var(--f-body)", fontSize: 16, border: "1px solid var(--navy)", borderRadius: 999, background: "white", outline: "none", color: "var(--navy)"}}/>
            <button className="btn primary arrow" type="submit">{submitted ? "Welcome ♡" : "Subscribe"}</button>
          </form>
          <div style={{marginTop: 16, fontFamily: "var(--f-ui)", fontSize: 12, color: "var(--ink-muted)"}}>
            No spam. Unsubscribe with one tap. We'd never.
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Home });