// PELSKIN — page components
const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP } = React;

// ---------- HOME ----------
function HomePage() {
  const { mode, navigate, addToCart, toast, openCart } = useApp();
  const [email, setEmail] = useStateP("");
  const [waitlistDone, setWaitlistDone] = useStateP(false);

  const submitWaitlist = (e) => {
    e.preventDefault();
    if (!email.includes("@")) return;
    setWaitlistDone(true);
    toast("You're on the list. Welcome to Pelskin.");
  };

  return (
    <main className="page-enter">
      {/* HERO */}
      <section className="hero">
        <div className="hero-bg" />
        <div className="hero-inner">
          <div className="smallcaps mb-24">Pelskin · Accra</div>
          <h1 className="h-display" style={{textWrap:"balance"}}>
            Great skin isn't luck.<br/>
            It's <span className="serif-italic">a system.</span>
          </h1>
          <p className="muted mt-24" style={{fontSize: 17, maxWidth: 540, margin: "24px auto 0", letterSpacing: "0.01em"}}>
            Three essential steps for stronger, healthier, glowing skin.
          </p>

          {mode === "waitlist" ? (
            <form onSubmit={submitWaitlist} className="mt-48" style={{maxWidth: 460, margin: "48px auto 0"}}>
              {waitlistDone ? (
                <div style={{padding: "24px 0"}}>
                  <div className="serif" style={{fontSize: 22}}>You're on the list.</div>
                  <p className="muted mt-12" style={{fontSize: 14}}>We'll write when the system is ready. Quietly.</p>
                </div>
              ) : (
                <>
                  <input className="input" type="email" required placeholder="your@email.com" value={email} onChange={(e)=>setEmail(e.target.value)} />
                  <button type="submit" className="btn btn-primary mt-24" style={{minWidth: 220}}>Join the waitlist</button>
                  <p className="dim mt-16" style={{fontSize: 11, letterSpacing: "0.04em"}}>
                    Launching soon. No spam, ever.
                  </p>
                </>
              )}
            </form>
          ) : (
            <div className="mt-48" style={{display:"flex", flexWrap:"wrap", gap: 16, justifyContent:"center"}}>
              <button className="btn btn-primary" onClick={() => navigate("shop")}>Shop the System</button>
              <button className="btn btn-secondary" onClick={() => navigate("quiz")}>Take the skin quiz</button>
            </div>
          )}

          <div className="mt-64" style={{display:"flex", justifyContent:"center"}}>
            <div style={{width: 120}}><div className="divider" /></div>
          </div>
          <p className="smallcaps mt-24">Clear · Even · Glowing</p>
        </div>
      </section>

      {/* THE SYSTEM (3 steps) */}
      <section className="section">
        <div className="container">
          <div className="center mb-64">
            <div className="smallcaps mb-16">The Ritual</div>
            <h2 className="h1" style={{maxWidth: 720, margin: "0 auto"}}>
              Three essentials. <span className="serif-italic">One ritual.</span>
            </h2>
            <p className="muted mt-16" style={{maxWidth: 520, margin: "16px auto 0"}}>Skin that reflects care.</p>
          </div>

          <div className="system-grid">
            {PRODUCTS.map((p, i) => (
              <article key={p.slug} className="step-card silk-reveal">
                <div className="smallcaps mb-12">Step</div>
                <div className="step-num serif mb-32">{String(i+1).padStart(2, "0")}</div>
                <div className={"product-frame " + (p.bottleTone === "frosted" ? "" : "warm")} style={{marginBottom: 24}}>
                  <Bottle type={p.bottleType} tone={p.bottleTone} sub={p.tagline} />
                </div>
                <div className="smallcaps">{p.name}</div>
                <div className="serif mt-12" style={{fontSize: 20, fontStyle: "italic"}}>{p.tagline}</div>
                <p className="muted mt-12" style={{fontSize: 14, maxWidth: 280, margin: "12px auto 0"}}>{p.subhead}</p>
                {mode === "live" && (
                  <div className="mt-24" style={{display:"flex", gap: 10, justifyContent:"center", flexWrap:"wrap"}}>
                    <button className="btn btn-primary" style={{padding: "12px 22px", fontSize: 11}} onClick={() => { addToCart(p.slug); toast(`Added to bag · ${p.name}`); openCart(); }}>Buy now · ${p.priceUSD}</button>
                    <button className="btn btn-secondary" style={{padding: "12px 22px", fontSize: 11}} onClick={() => navigate("product:"+p.slug)}>Discover</button>
                  </div>
                )}
              </article>
            ))}
          </div>

          <p className="serif center mt-64" style={{fontSize: 22, fontStyle: "italic", color: "var(--text-secondary)", maxWidth: 720, margin: "64px auto 0"}}>
            Consistency is the real secret. Three essentials. One ritual. Skin that reflects care.
          </p>
        </div>
      </section>

      {/* BUNDLE HIGHLIGHT */}
      <section className="section alt">
        <div className="container">
          <div style={{display:"grid", gridTemplateColumns: "1fr", gap: 64, alignItems: "center"}} className="bundle-grid">
            <div className="product-frame deep" style={{aspectRatio: "4/5", maxWidth: 520, margin: "0 auto", width: "100%"}}>
              <BottleTrio />
            </div>
            <div>
              <span className="tag">Best value</span>
              <h2 className="h1 mt-16">The System.<br/><span className="serif-italic">The complete ritual.</span></h2>
              <p className="muted mt-24" style={{maxWidth: 460}}>
                Cleanse. Correct. Restore. Three formulas designed to work together — not against each other. Save 10% when you buy the full system.
              </p>
              <div className="mt-32" style={{display:"flex", gap: 12, alignItems:"baseline"}}>
                <span className="serif" style={{fontSize: 32}}>$70</span>
                <span className="dim" style={{fontSize: 14, textDecoration: "line-through"}}>$78</span>
                <span className="smallcaps" style={{color: "var(--accent-taupe)"}}>Save 10%</span>
              </div>
              <div className="mt-32" style={{display:"flex", gap: 16, flexWrap:"wrap"}}>
                {mode === "live" ? (
                  <>
                    <button className="btn btn-primary" onClick={() => { addToCart("the-system"); toast("Added to bag · The System"); openCart(); }}>Buy now · $70</button>
                    <button className="btn btn-secondary" onClick={() => navigate("product:the-system")}>Read more</button>
                  </>
                ) : (
                  <button className="btn btn-secondary" onClick={() => navigate("system")}>Read the ritual</button>
                )}
              </div>
            </div>
          </div>
        </div>
        <style>{`@media (min-width: 900px) { .bundle-grid { grid-template-columns: 1fr 1fr !important; } }`}</style>
      </section>

      {/* QUIZ TEASER */}
      <section className="section">
        <div className="container-narrow center">
          <div className="smallcaps mb-16">60-second consultation</div>
          <h2 className="h1" style={{maxWidth: 720, margin: "0 auto"}}>What's your <span className="serif-italic">biggest</span> skin concern?</h2>
          <p className="muted mt-24" style={{maxWidth: 520, margin: "24px auto 0"}}>
            Get a routine built around your skin in 60 seconds. No fluff, no upsell — just the right products for what your skin needs.
          </p>
          <button className="btn btn-primary mt-32" onClick={() => navigate("quiz")}>Start the quiz <Icon.ArrowRight /></button>
        </div>
      </section>

      {/* MANIFESTO */}
      <section className="section warm">
        <div className="container">
          <div className="center mb-48">
            <p className="serif" style={{fontSize: "clamp(28px, 4vw, 44px)", lineHeight: 1.25, maxWidth: 880, margin: "0 auto"}}>
              Your skin doesn't need more.<br/>
              It needs <span className="serif-italic">the right products.</span>
            </p>
          </div>
          <div className="manifesto-row">
            {["Not more products.", "Not more steps.", "Not more pressure.", "Just balance."].map((t,i) => (
              <div key={i} className="manifesto-cell">
                <p className="serif" style={{fontSize: 18}}>{t}</p>
              </div>
            ))}
          </div>
          <div className="manifesto-row" style={{borderTop: "none"}}>
            {["Gentle cleansing.", "Targeted treatment.", "Deep repair.", "Real results."].map((t,i) => (
              <div key={i} className="manifesto-cell">
                <p className="serif" style={{fontSize: 18, fontStyle: "italic", color: "var(--text-secondary)"}}>{t}</p>
              </div>
            ))}
          </div>
          <p className="serif center mt-48" style={{fontSize: 18, fontStyle: "italic", color: "var(--text-secondary)", maxWidth: 700, margin: "48px auto 0"}}>
            When you stop overwhelming your skin, it starts working with you.
          </p>
        </div>
      </section>

      {/* INGREDIENT MARQUEE */}
      <div className="marquee">
        <div className="marquee-track">
          <span>
            {["Ceramides", "Peptides", "Panthenol", "Niacinamide", "Sodium PCA", "Ceramides", "Peptides", "Panthenol", "Niacinamide", "Sodium PCA"].map((t,i)=>(
              <React.Fragment key={i}>
                <span style={{fontStyle: i%2 ? "italic" : "normal"}}>{t}</span>
                <span className="marquee-dot" />
              </React.Fragment>
            ))}
          </span>
          <span aria-hidden="true">
            {["Ceramides", "Peptides", "Panthenol", "Niacinamide", "Sodium PCA", "Ceramides", "Peptides", "Panthenol", "Niacinamide", "Sodium PCA"].map((t,i)=>(
              <React.Fragment key={i}>
                <span style={{fontStyle: i%2 ? "italic" : "normal"}}>{t}</span>
                <span className="marquee-dot" />
              </React.Fragment>
            ))}
          </span>
        </div>
      </div>

      {/* FOUNDER NOTE TEASER */}
      <section className="section">
        <div className="container">
          <div style={{display:"grid", gridTemplateColumns: "1fr", gap: 48, alignItems:"center"}} className="founder-grid">
            <div className="product-frame" style={{aspectRatio: "4/5", maxWidth: 480, width: "100%", background: "var(--bg-warm)", padding: 0}}>
              <img src="images/founder.jpg" alt="Esther, founder" style={{width:"100%", height:"100%", objectFit:"cover"}} />
            </div>
            <div>
              <div className="smallcaps mb-16">Founder note</div>
              <h2 className="h1">A small ritual.<br/><span className="serif-italic">From Accra.</span></h2>
              <p className="muted mt-24" style={{maxWidth: 480, fontSize: 16, lineHeight: 1.8}}>
                I built Pelskin around the routine I wished existed when I was overwhelming my own skin with too many products. Three essentials, made to work with your skin — not on it.
              </p>
              <p className="serif italic mt-16" style={{fontSize: 18, color: "var(--text-secondary)"}}>— Esther</p>
              <button className="btn-ghost mt-32" onClick={() => navigate("about")}>Read her note</button>
            </div>
          </div>
        </div>
        <style>{`@media (min-width: 900px) { .founder-grid { grid-template-columns: 1fr 1fr !important; gap: 80px !important; } }`}</style>
      </section>

      {/* JOURNAL TEASER */}
      <section className="section alt">
        <div className="container">
          <div style={{display:"flex", justifyContent:"space-between", alignItems:"end", marginBottom: 48, flexWrap:"wrap", gap: 16}}>
            <div>
              <div className="smallcaps mb-12">Journal</div>
              <h2 className="h1">Notes on routine.</h2>
            </div>
            <button className="btn-ghost" onClick={() => navigate("journal")}>All articles <Icon.ArrowRight /></button>
          </div>
          <div className="system-grid">
            {[
              { title: "Common Skin Mistakes", excerpt: "Small mistakes. Big impact. Let's glow the right way.", slug: "common-skin-mistakes" },
              { title: "The Order of Operations", excerpt: "Cleanser, treatment, moisturizer — and why the order earns the result." },
              { title: "Why Your Barrier Matters", excerpt: "Healthy skin starts with a strong barrier. Here's how it works." },
            ].map((a,i) => (
              <article key={i} style={{cursor: a.slug ? "pointer" : "default", borderTop: "1px solid var(--accent-line)", paddingTop: 28}} onClick={() => a.slug && navigate("journal:"+a.slug)}>
                <div className="smallcaps">Read · 4 min</div>
                <h3 className="h3 mt-12">{a.title}</h3>
                <p className="muted mt-12" style={{fontSize: 14}}>{a.excerpt}</p>
              </article>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// ---------- THE SYSTEM (long-form) ----------
function SystemPage() {
  const { mode, navigate, addToCart, toast } = useApp();
  return (
    <main className="page-enter">
      <section className="section" style={{paddingTop: 64}}>
        <div className="container-narrow center">
          <div className="smallcaps mb-16">The Ritual</div>
          <h1 className="h-display">The <span className="serif-italic">system.</span></h1>
          <p className="muted mt-24" style={{maxWidth: 540, margin: "24px auto 0", fontSize: 17}}>
            One ritual, three essentials. Designed for stronger, healthier, glowing skin — without the overwhelm.
          </p>
        </div>
      </section>

      {PRODUCTS.map((p, i) => (
        <section key={p.slug} className={i % 2 ? "section alt" : "section"}>
          <div className="container">
            <div style={{display:"grid", gridTemplateColumns: "1fr", gap: 56, alignItems: "center"}} className={"sys-row " + (i % 2 ? "rev" : "")}>
              <div className={"product-frame " + (p.bottleTone === "frosted" ? "" : "warm")} style={{aspectRatio: "4/5", maxWidth: 460, width: "100%", margin: "0 auto"}}>
                <Bottle type={p.bottleType} tone={p.bottleTone} sub={p.tagline} />
              </div>
              <div>
                <div className="smallcaps">Step {String(i+1).padStart(2,"0")}</div>
                <div className="step-num serif mt-12 mb-24" style={{fontSize: 80}}>{String(i+1).padStart(2,"0")}</div>
                <h2 className="h1">{p.name}</h2>
                <p className="serif italic mt-12" style={{fontSize: 22, color: "var(--text-secondary)"}}>{p.tagline}</p>
                <p className="muted mt-24" style={{maxWidth: 480, fontSize: 16, lineHeight: 1.8}}>{p.description}</p>
                <div className="mt-24" style={{display:"flex", gap: 8, flexWrap: "wrap"}}>
                  {p.keyIngredients.map(k => <span key={k} className="smallcaps" style={{padding: "6px 12px", border: "1px solid var(--accent-line)"}}>{k}</span>)}
                </div>
                {mode === "live" && (
                  <button className="btn-ghost mt-32" onClick={() => navigate("product:"+p.slug)}>${p.priceUSD} · Discover</button>
                )}
              </div>
            </div>
          </div>
          <style>{`@media (min-width: 900px) { .sys-row { grid-template-columns: 1fr 1fr !important; gap: 96px !important; } .sys-row.rev > div:first-child { order: 2; } }`}</style>
        </section>
      ))}

      <section className="section warm">
        <div className="container-narrow center">
          <p className="pull-quote">
            Gentle cleansing. <span className="serif-italic">Targeted treatment.</span> Deep repair.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{display:"grid", gridTemplateColumns: "1fr", gap: 48, alignItems:"center"}} className="bundle-cta-grid">
            <div className="product-frame deep" style={{aspectRatio: "4/5", maxWidth: 520, width: "100%", margin: "0 auto"}}>
              <BottleTrio />
            </div>
            <div>
              <span className="tag">Best value</span>
              <h2 className="h1 mt-16">Get the full system <span className="serif-italic">and save.</span></h2>
              <p className="muted mt-24" style={{maxWidth: 460}}>
                Designed to work together. Built to last. Save 10% when you buy all three at once.
              </p>
              <div className="mt-32" style={{display:"flex", gap: 16, flexWrap:"wrap"}}>
                {mode === "live" ? (
                  <button className="btn btn-primary" onClick={() => { addToCart("the-system"); toast("Added to bag · The System"); }}>Get the system · $70</button>
                ) : (
                  <button className="btn btn-primary" onClick={() => navigate("waitlist")}>Join the waitlist</button>
                )}
              </div>
            </div>
          </div>
        </div>
        <style>{`@media (min-width: 900px) { .bundle-cta-grid { grid-template-columns: 1fr 1fr !important; gap: 80px !important; } }`}</style>
      </section>
    </main>
  );
}

// ---------- SHOP ----------
function ShopPage() {
  const { mode, navigate, addToCart, toast, openCart } = useApp();
  if (mode === "waitlist") {
    useEffectP(() => { navigate("home"); }, []);
    return null;
  }
  return (
    <main className="page-enter">
      <section className="section" style={{paddingTop: 64, paddingBottom: 32}}>
        <div className="container">
          <div style={{textAlign:"center", padding: "10px 16px", border: "1px solid var(--accent-line)", marginBottom: 48, fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-secondary)"}}>
            Shipping within Ghana only · Pay in GHS at checkout
          </div>
          <div className="center mb-48">
            <div className="smallcaps mb-16">Shop</div>
            <h1 className="h-display">The <span className="serif-italic">essentials.</span></h1>
          </div>

          <div className="system-grid">
            {PRODUCTS.map((p, i) => (
              <a key={p.slug} className="product-card" onClick={() => navigate("product:"+p.slug)}>
                <div className={"product-frame " + (p.bottleTone === "frosted" ? "" : "warm")}>
                  <Bottle type={p.bottleType} tone={p.bottleTone} sub={p.tagline} />
                </div>
                <div className="smallcaps mt-16">Step {String(i+1).padStart(2,"0")}</div>
                <h3 className="h3 mt-8">{p.name}</h3>
                <p className="muted" style={{fontSize: 14, fontStyle: "italic"}}>{p.tagline}</p>
                <p className="serif mt-12" style={{fontSize: 18}}>${p.priceUSD}</p>
                <button
                  className="btn btn-primary mt-16"
                  style={{padding: "12px 22px", fontSize: 11}}
                  onClick={(e) => { e.stopPropagation(); addToCart(p.slug); toast(`Added to bag · ${p.name}`); openCart(); }}
                >Buy now</button>
              </a>
            ))}
          </div>

          <div style={{marginTop: 48}}>
            <a className="product-card" onClick={() => navigate("product:the-system")} style={{display: "grid", gridTemplateColumns: "1fr", gap: 32, alignItems:"center", border: "1px solid var(--accent-line)", padding: 32, background: "var(--bg-soft)"}}>
              <div className="product-frame deep" style={{aspectRatio: "4/5", maxWidth: 360, width: "100%"}}>
                <BottleTrio />
              </div>
              <div>
                <span className="tag">Best value</span>
                <h2 className="h2 mt-16">The System</h2>
                <p className="muted" style={{fontStyle: "italic"}}>Cleanse. Correct. Restore.</p>
                <p className="muted mt-16" style={{maxWidth: 480, fontSize: 14}}>
                  All three essentials together. Save 10% versus buying separately.
                </p>
                <div className="mt-24" style={{display:"flex", gap: 12, alignItems:"baseline"}}>
                  <span className="serif" style={{fontSize: 28}}>$70</span>
                  <span className="dim" style={{fontSize: 13, textDecoration: "line-through"}}>$78</span>
                </div>
                <button
                  className="btn btn-primary mt-24"
                  onClick={(e) => { e.stopPropagation(); addToCart("the-system"); toast("Added to bag · The System"); openCart(); }}
                >Shop now · $70</button>
              </div>
            </a>
          </div>
        </div>
      </section>
    </main>
  );
}

// ---------- PRODUCT DETAIL ----------
function ProductPage({ slug }) {
  const { mode, navigate, addToCart, toast, openCart } = useApp();
  const p = productBySlug(slug);
  const [qty, setQty] = useStateP(1);
  if (!p) return <main className="page-enter section center"><p>Not found.</p></main>;
  const isBundle = p.type === "bundle";
  const price = isBundle ? p.priceUSDBundle : p.priceUSD;

  return (
    <main className="page-enter">
      <section className="section" style={{paddingTop: 56}}>
        <div className="container">
          <button className="btn-ghost mb-32" onClick={() => navigate(isBundle ? "shop" : "shop")}><Icon.ArrowLeft /> Back to shop</button>
          <div style={{display:"grid", gridTemplateColumns: "1fr", gap: 56}} className="pdp-grid">
            <div>
              <div className={"product-frame " + (isBundle ? "deep" : (p.bottleTone === "frosted" ? "" : "warm"))} style={{aspectRatio: "4/5"}}>
                {isBundle ? <BottleTrio /> : <Bottle type={p.bottleType} tone={p.bottleTone} sub={p.tagline} />}
              </div>
              <div style={{display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap: 8, marginTop: 8}}>
                {[0,1,2,3].map(i => (
                  <div key={i} className="product-frame" style={{aspectRatio: "1/1", padding: 8, background: i===0 ? "var(--bg-warm)" : "var(--bg-soft)"}}>
                    <span style={{fontFamily:"ui-monospace, monospace", fontSize: 9, color: "var(--text-muted)"}}>0{i+1}.jpg</span>
                  </div>
                ))}
              </div>
            </div>
            <div>
              {isBundle && <span className="tag">{p.badge}</span>}
              <div className="smallcaps mt-16">{isBundle ? "Bundle" : p.tagline}</div>
              <h1 className="h-display mt-12">{p.name}</h1>
              <p className="serif italic mt-12" style={{fontSize: 22, color: "var(--text-secondary)"}}>{p.subhead}</p>
              <div className="mt-24" style={{display:"flex", gap: 16, alignItems:"baseline"}}>
                <span className="serif" style={{fontSize: 30}}>${price}</span>
                {isBundle && <span className="dim" style={{textDecoration: "line-through"}}>${p.priceUSDIndividual}</span>}
                {isBundle && <span className="smallcaps" style={{color: "var(--accent-taupe)"}}>Save 10%</span>}
                {!isBundle && <span className="dim" style={{fontSize: 14}}>· {p.size}</span>}
              </div>
              <p className="muted mt-24" style={{lineHeight: 1.8, maxWidth: 460}}>{p.description}</p>

              {isBundle && (
                <div className="mt-32">
                  <div className="smallcaps mb-12">Included</div>
                  <ul style={{listStyle: "none", padding: 0, display: "flex", flexDirection: "column", gap: 8}}>
                    {p.includes.map(s => {
                      const sub = productBySlug(s);
                      return <li key={s} style={{display:"flex", justifyContent:"space-between", padding: "10px 0", borderBottom: "1px solid var(--accent-line)"}}><span className="serif" style={{fontSize: 17}}>{sub.name}</span><span className="muted" style={{fontSize: 13}}>{sub.size}</span></li>;
                    })}
                  </ul>
                </div>
              )}
              {!isBundle && (
                <div className="mt-32">
                  <div className="smallcaps mb-12">Key ingredients</div>
                  <div style={{display:"flex", gap: 8, flexWrap:"wrap"}}>
                    {p.keyIngredients.map(k => <span key={k} className="smallcaps" style={{padding: "8px 14px", border: "1px solid var(--accent-line)"}}>{k}</span>)}
                  </div>
                </div>
              )}

              {mode === "live" && (
                <div className="mt-32" style={{display: "flex", gap: 16, alignItems: "center", flexWrap: "wrap"}}>
                  <div style={{display:"flex", alignItems:"center", border:"1px solid var(--accent-line)"}}>
                    <button onClick={() => setQty(Math.max(1, qty-1))} style={{padding: "10px 14px"}}>−</button>
                    <span style={{minWidth: 32, textAlign: "center"}}>{qty}</span>
                    <button onClick={() => setQty(qty+1)} style={{padding: "10px 14px"}}>+</button>
                  </div>
                  <button className="btn btn-primary" style={{flex: "1 1 220px"}} onClick={() => { addToCart(p.slug, qty); toast(`Added to bag · ${p.name}`); openCart(); }}>Buy now · ${price * qty}</button>
                </div>
              )}
              {mode === "waitlist" && (
                <button className="btn btn-primary mt-32" onClick={() => navigate("waitlist")}>Join the waitlist</button>
              )}

              <div className="mt-48">
                <Accordion items={[
                  { q: "How to use", a: <p>{p.howToUse}</p> },
                  { q: "Full ingredients", a: <p style={{fontSize: 13, color: "var(--text-muted)"}}>Aqua, Glycerin, {(p.keyIngredients||[]).join(", ")}, Sodium Hyaluronate, Panthenol, Allantoin, Tocopherol, Citric Acid. Free from sulfates, parabens, synthetic fragrance.</p> },
                  { q: "Shipping & returns", a: <p>Shipping within Ghana only. Orders ship within 1–2 business days from Accra. 30-day satisfaction promise.</p> },
                ]} />
              </div>
            </div>
          </div>
        </div>
        <style>{`@media (min-width: 900px) { .pdp-grid { grid-template-columns: 1fr 1fr !important; gap: 80px !important; } }`}</style>
      </section>
    </main>
  );
}

// ---------- QUIZ ----------
const QUIZ_STEPS = [
  { id: "concern", question: "Which feels most like your skin right now?", options: [
    "Uneven tone or post blemish marks",
    "Dullness or tired looking skin",
    "Dryness or tightness",
    "Sensitivity or redness",
    "Breakouts or congestion",
    "Just want a simple routine",
  ]},
  { id: "skinType", question: "How does your skin usually feel by midday?", options: [
    "Tight or dry",
    "Comfortable",
    "A little oily in the T zone",
    "Oily all over",
    "Reactive or sensitive",
  ]},
  { id: "routine", question: "What does your routine look like today?", options: [
    "I don't really have one",
    "Just a cleanser",
    "Cleanser plus moisturizer",
    "Full routine with actives",
    "I'm starting from scratch",
  ]},
];

function recommend(answers) {
  const c = answers.concern;
  let slugs;
  switch (c) {
    case "Uneven tone or post blemish marks": slugs = ["silk-wash","clarity-serum","barrier-repair-cream"]; break;
    case "Dullness or tired looking skin": slugs = ["silk-wash","clarity-serum"]; break;
    case "Dryness or tightness": slugs = ["silk-wash","barrier-repair-cream"]; break;
    case "Sensitivity or redness": slugs = ["silk-wash","barrier-repair-cream"]; break;
    case "Breakouts or congestion": slugs = ["silk-wash","clarity-serum"]; break;
    case "Just want a simple routine": slugs = ["silk-wash","clarity-serum","barrier-repair-cream"]; break;
    default: slugs = ["silk-wash","clarity-serum","barrier-repair-cream"];
  }
  if (answers.skinType === "Reactive or sensitive" && !slugs.includes("barrier-repair-cream")) {
    slugs.push("barrier-repair-cream");
  }
  const heroLineMap = {
    "Uneven tone or post blemish marks": "Not brighter. Clearer. There's a difference.",
    "Dullness or tired looking skin": "Wake skin up — gently. No harsh actives.",
    "Dryness or tightness": "Restore the barrier. Comfort returns.",
    "Sensitivity or redness": "Calm first. Everything else follows.",
    "Breakouts or congestion": "Cleanse gently. Treat smartly.",
    "Just want a simple routine": "Three essentials. One ritual.",
  };
  return { slugs, heroLine: heroLineMap[c] || "Made for your skin." };
}

function QuizPage() {
  const { mode, navigate, addToCart, toast } = useApp();
  const [step, setStep] = useStateP(0); // 0 welcome, 1-3 questions, 4 email, 5 result
  const [answers, setAnswers] = useStateP({ concern: "", skinType: "", routine: "" });
  const [email, setEmail] = useStateP("");
  const [name, setName] = useStateP("");
  const [consent, setConsent] = useStateP(true);
  const [submitting, setSubmitting] = useStateP(false);

  const totalSteps = 5;
  const progress = step === 0 ? 0 : step === 5 ? 100 : (step / totalSteps) * 100;

  const setAnswer = (id, val) => setAnswers({ ...answers, [id]: val });

  const next = () => setStep(step + 1);
  const back = () => setStep(Math.max(0, step - 1));

  const submit = async () => {
    setSubmitting(true);
    await new Promise(r => setTimeout(r, 700));
    setSubmitting(false);
    setStep(5);
  };

  const result = step === 5 ? recommend(answers) : null;

  return (
    <main className="page-enter">
      <section className="section alt" style={{minHeight: "calc(100vh - 76px)"}}>
        <div className="container-narrow">
          {step > 0 && step < 5 && (
            <div className="mb-32" style={{maxWidth: 640, margin: "0 auto 32px"}}>
              <div style={{display:"flex", justifyContent:"space-between", marginBottom: 12, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-secondary)"}}>
                <span>Step {step} of {totalSteps - 1}</span>
                <span>{Math.round(progress)}%</span>
              </div>
              <div className="progress-track">
                <div className="progress-fill" style={{width: progress + "%"}} />
              </div>
            </div>
          )}

          <div className="quiz-card">
            {step === 0 && (
              <div className="center">
                <div className="smallcaps mb-16">The 60-second consultation</div>
                <h1 className="h1">What's your <span className="serif-italic">biggest</span> skin concern?</h1>
                <p className="muted mt-24" style={{maxWidth: 460, margin: "24px auto 0"}}>
                  Share with us. We'll build your routine around what your skin actually needs. Five short questions.
                </p>
                <button className="btn btn-primary mt-48" onClick={next}>Start <Icon.ArrowRight /></button>
              </div>
            )}

            {step >= 1 && step <= 3 && (() => {
              const q = QUIZ_STEPS[step - 1];
              const value = answers[q.id];
              return (
                <div>
                  <h2 className="h2 mb-32">{q.question}</h2>
                  <div className="radio-list">
                    {q.options.map(opt => (
                      <div key={opt} className={"radio-row " + (value === opt ? "selected" : "")} onClick={() => setAnswer(q.id, opt)}>
                        <span className="radio-dot" />
                        <span>{opt}</span>
                      </div>
                    ))}
                  </div>
                  <div className="mt-32" style={{display:"flex", justifyContent:"space-between", alignItems:"center"}}>
                    <button className="btn-ghost" onClick={back}><Icon.ArrowLeft /> Back</button>
                    <button className="btn btn-primary" disabled={!value} style={{opacity: value ? 1 : 0.4}} onClick={next}>Continue <Icon.ArrowRight /></button>
                  </div>
                </div>
              );
            })()}

            {step === 4 && (
              <div>
                <h2 className="h2 mb-12">Where should we send your routine?</h2>
                <p className="muted mb-32">We'll email a copy of your personalized ritual.</p>
                <div style={{display:"flex", flexDirection:"column", gap: 24}}>
                  <div>
                    <label className="smallcaps">First name (optional)</label>
                    <input className="input" value={name} onChange={(e)=>setName(e.target.value)} placeholder="Esther" />
                  </div>
                  <div>
                    <label className="smallcaps">Email</label>
                    <input className="input" type="email" required value={email} onChange={(e)=>setEmail(e.target.value)} placeholder="your@email.com" />
                  </div>
                  <label style={{display:"flex", alignItems:"center", gap: 12, fontSize: 13, color: "var(--text-secondary)"}}>
                    <input type="checkbox" checked={consent} onChange={(e)=>setConsent(e.target.checked)} style={{accentColor: "#2B1810"}} />
                    Send me product updates and skincare tips.
                  </label>
                </div>
                <div className="mt-48" style={{display:"flex", justifyContent:"space-between", alignItems:"center"}}>
                  <button className="btn-ghost" onClick={back}><Icon.ArrowLeft /> Back</button>
                  <button className="btn btn-primary" disabled={!email.includes("@") || submitting} style={{opacity: !email.includes("@") || submitting ? 0.4 : 1}} onClick={submit}>{submitting ? "Sending…" : "See my routine"} <Icon.ArrowRight /></button>
                </div>
              </div>
            )}

            {step === 5 && result && (
              <div>
                <div className="center mb-48">
                  <div className="smallcaps mb-16">Your Pelskin routine</div>
                  <h2 className="h1">{result.heroLine.split(".")[0]}.<br/><span className="serif-italic">{result.heroLine.split(".").slice(1).join(".").trim()}</span></h2>
                  <p className="muted mt-24" style={{maxWidth: 460, margin: "24px auto 0"}}>
                    Built around: <em>{answers.concern.toLowerCase()}</em>. We'll email a copy to {email || "you"}.
                  </p>
                </div>

                <div style={{display: "flex", flexDirection: "column", gap: 16}}>
                  {result.slugs.map((s, i) => {
                    const p = productBySlug(s);
                    return (
                      <div key={s} style={{display:"grid", gridTemplateColumns: "80px 1fr auto", gap: 20, alignItems:"center", padding: 16, border: "1px solid var(--accent-line)", background: "var(--bg-base)"}}>
                        <div className={"product-frame " + (p.bottleTone === "frosted" ? "" : "warm")} style={{aspectRatio: "1/1", padding: 6}}>
                          <Bottle type={p.bottleType} tone={p.bottleTone} sub={p.tagline} />
                        </div>
                        <div>
                          <div className="smallcaps">Step {String(i+1).padStart(2,"0")}</div>
                          <div className="serif" style={{fontSize: 19, marginTop: 4}}>{p.name}</div>
                          <div className="muted" style={{fontSize: 13, fontStyle: "italic"}}>{p.tagline}</div>
                        </div>
                        <div className="serif" style={{fontSize: 18}}>${p.priceUSD}</div>
                      </div>
                    );
                  })}
                </div>

                {result.slugs.length >= 2 && (
                  <div className="mt-32" style={{padding: 24, border: "1px solid var(--accent-taupe)", background: "var(--bg-warm)"}}>
                    <div style={{display:"flex", alignItems:"center", gap: 16, justifyContent:"space-between", flexWrap:"wrap"}}>
                      <div>
                        <span className="tag">Best value</span>
                        <p className="serif mt-12" style={{fontSize: 22}}>Get all 3 and <span className="serif-italic">save 10%</span></p>
                        <p className="muted" style={{fontSize: 14}}>The complete system · $70 instead of $78</p>
                      </div>
                      <button className="btn btn-primary" onClick={() => mode === "live" ? (addToCart("the-system"), toast("Added · The System"), navigate("home")) : navigate("waitlist")}>
                        {mode === "live" ? "Add the system" : "Get notified"}
                      </button>
                    </div>
                  </div>
                )}

                <div className="mt-48" style={{display:"flex", gap: 16, justifyContent:"center", flexWrap:"wrap"}}>
                  {mode === "live" ? (
                    <button className="btn btn-primary" onClick={() => {
                      result.slugs.forEach(s => addToCart(s));
                      toast("Added your routine to bag");
                      navigate("home");
                    }}>Shop your routine</button>
                  ) : (
                    <button className="btn btn-primary" onClick={() => navigate("waitlist")}>Join the waitlist for early access</button>
                  )}
                  <button className="btn-ghost" onClick={() => toast("Routine sent. Check your inbox.")}>Email me my routine</button>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>
    </main>
  );
}

// ---------- ABOUT ----------
function AboutPage() {
  return (
    <main className="page-enter">
      <section className="section">
        <div className="container-narrow center">
          <div className="smallcaps mb-16">About</div>
          <h1 className="h-display">Made simple.<br/><span className="serif-italic">Made in Ghana.</span></h1>
        </div>
      </section>
      <section className="section alt">
        <div className="container">
          <div style={{display:"grid", gridTemplateColumns: "1fr", gap: 64, alignItems:"center"}} className="founder-grid">
            <div className="product-frame warm" style={{aspectRatio: "4/5", maxWidth: 480, width: "100%", margin: "0 auto", padding: 0}}>
              <img src="images/founder.jpg" alt="Esther, founder" style={{width:"100%", height:"100%", objectFit:"cover"}} />
            </div>
            <div>
              <div className="smallcaps mb-16">Founder note</div>
              <h2 className="h1">A small ritual,<br/><span className="serif-italic">from Accra.</span></h2>
              <div className="muted mt-24" style={{maxWidth: 540, lineHeight: 1.85}}>
                <p style={{marginBottom: 16}}>Pelskin started in my bathroom. I was overwhelming my own skin — too many products, too many promises, not enough patience. The result was reactive skin and a messy shelf.</p>
                <p style={{marginBottom: 16}}>So I built the routine I wished existed: gentle cleansing, targeted treatment, deep repair. Three essentials, designed to work together. Made for skin like mine and like yours.</p>
                <p>Pelskin is for the woman who wants her skin to reflect care — not perfection.</p>
              </div>
              <p className="serif italic mt-24" style={{fontSize: 22, color: "var(--text-secondary)"}}>— Esther, founder</p>
            </div>
          </div>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div style={{display:"grid", gridTemplateColumns: "1fr", gap: 0}} className="manifesto-row" >
            {[
              ["Clear.", "Honest formulas. Honest claims."],
              ["Even.", "Tone respected, never bleached."],
              ["Glowing.", "The kind that comes from balance."],
            ].map(([h, p], i) => (
              <div key={i} className="manifesto-cell" style={{padding: "48px 24px"}}>
                <h3 className="h2">{h.replace(".", "")}<span className="serif-italic">.</span></h3>
                <p className="muted mt-12">{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// ---------- JOURNAL ----------
const JOURNAL_POSTS = [
  { slug: "common-skin-mistakes", title: "Common Skin Mistakes", excerpt: "Small mistakes. Big impact. Let's glow the right way.", read: "5 min" },
  { slug: "order-of-operations", title: "The Order of Operations", excerpt: "Cleanser, treatment, moisturizer — and why the order earns the result.", read: "4 min" },
  { slug: "barrier-101", title: "Why Your Barrier Matters", excerpt: "Healthy skin starts with a strong barrier. Here's how it works.", read: "6 min" },
];

function JournalPage() {
  const { navigate } = useApp();
  return (
    <main className="page-enter">
      <section className="section" style={{paddingTop: 64}}>
        <div className="container">
          <div className="center mb-64">
            <div className="smallcaps mb-16">Journal</div>
            <h1 className="h-display">Notes <span className="serif-italic">on routine.</span></h1>
          </div>
          <div className="system-grid">
            {JOURNAL_POSTS.map((a, i) => (
              <article key={a.slug} style={{cursor:"pointer"}} onClick={() => navigate("journal:"+a.slug)}>
                <div className="product-frame" style={{aspectRatio: "5/4", padding: 0}}>
                  <img src={`images/journal-${i+1}.jpg`} alt={a.title} style={{width:"100%", height:"100%", objectFit:"cover"}} />
                </div>
                <div className="smallcaps mt-16">Read · {a.read}</div>
                <h3 className="h3 mt-12">{a.title}</h3>
                <p className="muted mt-12" style={{fontSize: 14}}>{a.excerpt}</p>
              </article>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

function JournalPostPage({ slug }) {
  const { navigate } = useApp();
  const post = JOURNAL_POSTS.find(p => p.slug === slug);
  if (!post) return <main className="page-enter section center"><p>Article not found.</p></main>;

  if (slug === "common-skin-mistakes") {
    return (
      <main className="page-enter">
        <section className="section">
          <div className="container-narrow">
            <button className="btn-ghost mb-32" onClick={() => navigate("journal")}><Icon.ArrowLeft /> Back to journal</button>
            <div className="center mb-48">
              <div className="smallcaps mb-16">Journal · 5 min</div>
              <h1 className="h-display">Common <span className="serif-italic">skin mistakes.</span></h1>
              <p className="muted mt-24" style={{fontSize: 18, fontStyle: "italic"}}>Small mistakes. Big impact. Let's glow the right way.</p>
            </div>
            <table className="j-table">
              <thead><tr><th>The mistake</th><th>What you should do</th></tr></thead>
              <tbody>
                {[
                  ["Over Cleansing", "Cleanse Gently", "Cleanse twice a day with a gentle cleanser to maintain a healthy balance."],
                  ["Skipping Sunscreen", "Wear SPF Daily", "Apply broad spectrum SPF every day, rain or shine. It's your best anti aging step."],
                  ["Using Too Many Actives", "Keep It Simple", "Use actives wisely and build your routine around what your skin truly needs."],
                  ["Ignoring Your Pillowcase", "Keep It Clean", "Change your pillowcase regularly for clearer, healthier skin."],
                  ["Neglecting Night Care", "Nourish and Repair", "Follow a night routine that nourishes and supports your skin while you sleep."],
                ].map(([m, h, b], i) => (
                  <tr key={i}>
                    <td><strong>{m}</strong></td>
                    <td><strong>{h}</strong>{b}</td>
                  </tr>
                ))}
              </tbody>
            </table>
            <p className="serif center mt-48" style={{fontSize: 22, fontStyle: "italic", color: "var(--text-secondary)", maxWidth: 640, margin: "48px auto 0", lineHeight: 1.5}}>
              Great skin isn't about perfection. It is about consistency and care. Make better choices for your skin, every single day.
            </p>
          </div>
        </section>
      </main>
    );
  }

  return (
    <main className="page-enter section">
      <div className="container-narrow">
        <button className="btn-ghost mb-32" onClick={() => navigate("journal")}><Icon.ArrowLeft /> Back</button>
        <h1 className="h-display">{post.title}</h1>
        <p className="muted mt-24" style={{fontStyle: "italic", fontSize: 18}}>{post.excerpt}</p>
        <p className="muted mt-32">Article in progress.</p>
      </div>
    </main>
  );
}

// ---------- WAITLIST ----------
function WaitlistPage() {
  const { toast } = useApp();
  const [email, setEmail] = useStateP("");
  const [concern, setConcern] = useStateP("");
  const [done, setDone] = useStateP(false);
  const submit = (e) => {
    e.preventDefault();
    if (!email.includes("@")) return;
    setDone(true);
    toast("Welcome to Pelskin.");
  };
  return (
    <main className="page-enter">
      <section className="section alt" style={{minHeight: "calc(100vh - 76px)"}}>
        <div className="container-narrow">
          <div className="quiz-card center">
            {done ? (
              <div>
                <div className="smallcaps mb-16">You're in</div>
                <h1 className="h1">Welcome to <span className="serif-italic">Pelskin.</span></h1>
                <p className="muted mt-24">A confirmation is on its way to {email}. We'll write when the system is ready.</p>
              </div>
            ) : (
              <form onSubmit={submit}>
                <div className="smallcaps mb-16">Pelskin · Launching soon</div>
                <h1 className="h1">Be first to <span className="serif-italic">know.</span></h1>
                <p className="muted mt-16" style={{maxWidth: 420, margin: "16px auto 32px"}}>
                  Quiet emails. Early access to the system. No noise.
                </p>
                <div style={{display:"flex", flexDirection:"column", gap: 24, textAlign: "left", maxWidth: 420, margin: "0 auto"}}>
                  <div>
                    <label className="smallcaps">Email</label>
                    <input className="input" type="email" required value={email} onChange={(e)=>setEmail(e.target.value)} placeholder="your@email.com" />
                  </div>
                  <div>
                    <label className="smallcaps">Skin concern <span style={{textTransform:"none", letterSpacing: 0, color:"var(--text-muted)"}}>(optional)</span></label>
                    <select className="input" value={concern} onChange={(e)=>setConcern(e.target.value)}>
                      <option value="">Select one…</option>
                      <option>Uneven tone</option>
                      <option>Dryness</option>
                      <option>Breakouts</option>
                      <option>Sensitivity</option>
                      <option>Just curious</option>
                    </select>
                  </div>
                </div>
                <button type="submit" className="btn btn-primary mt-32" style={{minWidth: 220}}>Join the waitlist</button>
                <p className="dim mt-16" style={{fontSize: 11, letterSpacing:"0.04em"}}>Made in Accra · Shipping within Ghana at launch</p>
              </form>
            )}
          </div>
        </div>
      </section>
    </main>
  );
}

// ---------- FAQ ----------
function FaqPage() {
  return (
    <main className="page-enter">
      <section className="section">
        <div className="container-narrow">
          <div className="center mb-48">
            <div className="smallcaps mb-16">FAQ</div>
            <h1 className="h-display">Questions, <span className="serif-italic">answered.</span></h1>
          </div>
          <Accordion items={[
            { q: "Is Pelskin safe for sensitive skin?", a: <p>Yes. Every product is barrier-safe, fragrance-free in formulation, and made for daily use. If you're highly reactive, start with Silk Wash and Barrier Repair Cream first, then introduce Clarity Serum slowly.</p> },
            { q: "What's the right order to apply?", a: <p>Morning — Silk Wash, then Barrier Repair Cream. Evening — Silk Wash, then Clarity Serum, then Barrier Repair Cream. SPF over the morning step (we'll add ours soon).</p> },
            { q: "Where do you ship?", a: <p>At launch we ship within Ghana only. International shipping is on the roadmap for late 2026.</p> },
            { q: "How long until I see results?", a: <p>Most skin shows visible improvement after 4 weeks of consistent use. Tone-evening can take 8–12 weeks. Consistency is the real secret.</p> },
            { q: "Are your products tested on animals?", a: <p>Never. Pelskin is cruelty-free.</p> },
            { q: "Can I return a product?", a: <p>Yes — 30-day satisfaction promise. Email hallo@pelskin.co with your order number.</p> },
          ]} />
        </div>
      </section>
    </main>
  );
}

// ---------- CHECKOUT SUCCESS ----------
function CheckoutSuccessPage() {
  const { navigate, clearCart } = useApp();
  useEffectP(() => { clearCart(); }, []);
  return (
    <main className="page-enter section">
      <div className="container-narrow center">
        <div className="quiz-card">
          <div className="smallcaps mb-16">Order received</div>
          <h1 className="h1">Thank you. <span className="serif-italic">Your ritual is on its way.</span></h1>
          <p className="muted mt-24">A confirmation has been sent to your email. Esther will pack it personally from Accra.</p>
          <button className="btn btn-secondary mt-48" onClick={() => navigate("home")}>Back to home</button>
        </div>
      </div>
    </main>
  );
}

// ---------- SHIPPING (legal placeholder) ----------
function LegalPage({ title }) {
  return (
    <main className="page-enter section">
      <div className="container-narrow">
        <div className="smallcaps mb-16">Information</div>
        <h1 className="h1 mb-32">{title}</h1>
        <p className="muted" style={{lineHeight: 1.85}}>
          Placeholder copy. Pelskin ships within Ghana only at launch. Most orders arrive within 2–4 business days. Returns accepted within 30 days for unopened products. For questions, email hallo@pelskin.co.
        </p>
      </div>
    </main>
  );
}

Object.assign(window, {
  HomePage, SystemPage, ShopPage, ProductPage,
  QuizPage, AboutPage, JournalPage, JournalPostPage,
  WaitlistPage, FaqPage, CheckoutSuccessPage, LegalPage,
});