/* global React, I, S */
/* Pamp — Client (User) portal */

const U_NAV = [
  { key: "dashboard", label: "Home", icon: I.dashboard },
  { key: "discover", label: "Discover", icon: I.sparkle },
  { key: "bookings", label: "My bookings", icon: I.bookings, badge: "3" },
  { key: "favorites", label: "Favorites", icon: I.heart },
  { key: "notifications", label: "Notifications", icon: I.bell, badge: "3" },
  { key: "wallet", label: "Wallet", icon: I.wallet },
  { key: "plan", label: "My plan", icon: I.crown },
  { key: "influencer", label: "Pamp Program", icon: I.gift },
  { key: "reports", label: "Reports", icon: I.chart },
  { section: "Account" },
  { key: "support", label: "Help & support", icon: I.help },
  { key: "settings", label: "Settings", icon: I.settings },
];

function UserApp({ collapsed, onToggle, onTheme, theme, onExit, session, onNavigate, currentPage }) {
  const page = currentPage || "dashboard";
  const setPage = onNavigate;
  return (
    <div className="shell" data-sidebar={collapsed ? "collapsed" : "expanded"}>
      <S.Sidebar
        items={U_NAV}
        current={page}
        onNav={setPage}
        collapsed={collapsed}
        footer={
          <button className="nav-item" onClick={onExit} style={{ width: "100%" }} data-tip="Sign out">
            <span className="ni-icon"><I.logout size={18} /></span>
            <span className="ni-label">Sign out</span>
          </button>
        }
      />
      <div className="main-col">
        <S.Topbar
          onToggleSidebar={onToggle}
          onTheme={onTheme}
          theme={theme}
          search="Search vendors, services, locations…"
          right={<>
            <S.IconBtn title="Messages" style={{ position: "relative" }}>
              <I.mail size={18} />
              <span style={{
                position: "absolute", top: 7, right: 7, width: 7, height: 7, borderRadius: "50%",
                background: "var(--accent)", boxShadow: "0 0 0 2px var(--bg)",
              }} />
            </S.IconBtn>
            <S.IconBtn title="Calendar"><I.calendar size={18} /></S.IconBtn>
          </>}
        />
        <main className="main-scroll">
          {page === "dashboard" && <UserHome />}
          {page === "discover" && <UserDiscover />}
          {page === "bookings" && <UserBookings />}
          {page === "wallet" && <UserWallet />}
          {page === "plan" && <UserPlan />}
          {page === "favorites" && <UserFavorites />}
          {page === "influencer" && <UserInfluencer />}
          {page === "reports" && <UserReports />}
          {page === "notifications" && <UserNotifications />}
          {page === "support" && <window.SupportPage kind="client" />}
          {page === "settings" && <UserSettings />}
        </main>
      </div>
    </div>
  );
}

/* ====================================================================
   USER — HOME
   ==================================================================== */
function UserHome() {
  return (
    <div className="page-enter">
      <window.DemoBanner feature="home dashboard" />
      <div className="row between" style={{ marginBottom: 28, alignItems: "flex-end" }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 8 }}>Sunday · February 2</div>
          <h1 className="h1">Welcome back, Amelia.</h1>
          <div className="muted" style={{ marginTop: 6, fontSize: 14 }}>Your next appointment is in 4 hours. Tea before you go.</div>
        </div>
        <div className="row" style={{ gap: 8 }}>
          <S.Btn variant="outline" size="sm" icon={<I.location size={14} />}>London, UK</S.Btn>
          <S.Btn variant="primary" size="sm" icon={<I.plus size={14} />}>Book a service</S.Btn>
        </div>
      </div>

      <div className="grid-12">
        {/* hero appointment */}
        <div className="card" style={{ gridColumn: "span 7", position: "relative", overflow: "hidden", background: "var(--ink)", color: "var(--bg)", borderColor: "transparent" }}>
          <div style={{
            position: "absolute", inset: 0, opacity: 0.7,
            background: "radial-gradient(circle at 80% 20%, var(--accent) 0%, transparent 50%), radial-gradient(circle at 20% 80%, oklch(50% 0.16 320) 0%, transparent 50%)",
            filter: "blur(40px)",
          }} />
          <div style={{ position: "relative", zIndex: 1 }}>
            <div className="row between">
              <div className="eyebrow" style={{ color: "oklch(80% 0.04 290)" }}>Next appointment · in 4h 12m</div>
              <S.Chip tone="accent" icon={<span className="dot" style={{ background: "var(--accent)" }} />}>Confirmed</S.Chip>
            </div>
            <div className="display" style={{ fontSize: 44, letterSpacing: "-0.035em", lineHeight: 1.05, margin: "16px 0 12px", color: "var(--bg)" }}>
              Maison Color & Co.<br />
              <span style={{ opacity: 0.6 }}>Full color &amp; cut</span>
            </div>
            <div className="row" style={{ gap: 24, marginTop: 20, color: "oklch(80% 0.04 290)", fontSize: 13 }}>
              <div className="row-tight"><I.clock size={14} /> 2:30 PM · 90 min</div>
              <div className="row-tight"><I.location size={14} /> 21 Mott St, London</div>
              <div className="row-tight"><I.users size={14} /> Stylist: Léa M.</div>
            </div>

            <div className="row" style={{ marginTop: 24, gap: 8 }}>
              <S.Btn variant="primary" style={{ background: "white", color: "var(--ink)" }} icon={<I.location size={14} />}>Directions</S.Btn>
              <S.Btn variant="ghost" style={{ color: "var(--bg)", background: "oklch(100% 0 0 / 0.10)" }}>Reschedule</S.Btn>
              <S.Btn variant="ghost" style={{ color: "var(--bg)", background: "oklch(100% 0 0 / 0.10)" }}>Cancel</S.Btn>
            </div>

            {/* timeline */}
            <div style={{ marginTop: 32, paddingTop: 24, borderTop: "1px solid oklch(100% 0 0 / 0.10)" }}>
              <div className="eyebrow" style={{ color: "oklch(75% 0.02 290)", marginBottom: 14 }}>Today’s timeline</div>
              <div className="row" style={{ gap: 0, alignItems: "stretch" }}>
                {[
                  { t: "10:00", lbl: "Wake", done: true },
                  { t: "12:30", lbl: "Pickup tea", done: true },
                  { t: "14:00", lbl: "Leave home", soon: true },
                  { t: "14:30", lbl: "Pamp · color", active: true },
                  { t: "16:30", lbl: "Coffee w/ Mia" },
                  { t: "19:00", lbl: "Dinner" },
                ].map((s, i) => (
                  <div key={i} style={{ flex: 1, position: "relative", paddingTop: 18 }}>
                    <div style={{
                      position: "absolute", top: 0, left: 0, right: 0, height: 2,
                      background: s.done ? "var(--accent)" : "oklch(100% 0 0 / 0.16)",
                    }} />
                    <div style={{
                      width: 10, height: 10, borderRadius: 999,
                      background: s.active ? "var(--accent)" : s.done ? "var(--accent)" : "oklch(100% 0 0 / 0.24)",
                      boxShadow: s.active ? "0 0 0 6px oklch(60% 0.13 290 / 0.30)" : undefined,
                      position: "absolute", top: -4,
                    }} />
                    <div className="mono tiny" style={{ color: s.active ? "white" : "oklch(75% 0.02 290)", marginTop: 4 }}>{s.t}</div>
                    <div style={{ fontSize: 12, color: s.active ? "white" : "oklch(85% 0.02 290)", fontWeight: s.active ? 600 : 400 }}>{s.lbl}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* stats column */}
        <div className="col" style={{ gridColumn: "span 5", gap: 20 }}>
          <div className="grid-2">
            <div className="card" style={{ padding: 20 }}>
              <div className="eyebrow">Wallet</div>
              <div className="display" style={{ fontSize: 32, marginTop: 8 }}>$248.40</div>
              <div className="muted tiny">Credit balance</div>
              <div className="row" style={{ marginTop: 14, gap: 8 }}>
                <S.Btn variant="primary" size="sm" style={{ flex: 1 }}>Top up</S.Btn>
                <S.IconBtn><I.arrowR size={14} /></S.IconBtn>
              </div>
            </div>
            <div className="card" style={{ padding: 20 }}>
              <div className="eyebrow">Loyalty</div>
              <div className="display" style={{ fontSize: 32, marginTop: 8 }}>Gold</div>
              <div className="muted tiny">3 more visits to Platinum</div>
              <div className="bar" style={{ marginTop: 12 }}><span style={{ width: "82%" }} /></div>
            </div>
          </div>

          <div className="card">
            <div className="row between" style={{ marginBottom: 14 }}>
              <div className="h3">Recommended for you</div>
              <S.IconBtn><I.chevR size={14} /></S.IconBtn>
            </div>
            <div className="col" style={{ gap: 10 }}>
              {[
                { name: "Forest Spa", svc: "60-min deep tissue", price: 142, rating: 4.9, dist: "0.8 mi", cat: "Massage" },
                { name: "Glow Skin Studio", svc: "HydraFacial · signature", price: 178, rating: 4.9, dist: "1.2 mi", cat: "Facial" },
                { name: "Atelier Nails", svc: "Builder gel manicure", price: 64, rating: 4.8, dist: "0.4 mi", cat: "Nails" },
              ].map((v) => (
                <div key={v.name} className="row" style={{ gap: 12, padding: 10, border: "1px solid var(--border)", borderRadius: 12 }}>
                  <div className="placeholder-img" style={{ width: 48, height: 48, borderRadius: 10, fontSize: 9 }}>{v.cat}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{v.name}</div>
                    <div className="muted tiny">{v.svc}</div>
                  </div>
                  <div style={{ textAlign: "right" }}>
                    <div className="mono" style={{ fontSize: 13, fontWeight: 500 }}>${v.price}</div>
                    <div className="row-tight tiny muted"><I.star size={10} color="var(--warn)" />{v.rating} · {v.dist}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* upcoming bookings */}
        <div className="card" style={{ gridColumn: "span 7" }}>
          <div className="row between" style={{ marginBottom: 18 }}>
            <div>
              <div className="h3">Upcoming</div>
              <div className="muted tiny" style={{ marginTop: 4 }}>3 bookings · next 14 days</div>
            </div>
            <S.Btn variant="ghost" size="sm">See all</S.Btn>
          </div>
          <div className="col" style={{ gap: 10 }}>
            {[
              { d: "TODAY", date: "2 Feb", v: "Maison Color & Co.", svc: "Full color · 90 min", t: "2:30 PM", tone: "accent" },
              { d: "WED", date: "12 Feb", v: "Forest Spa", svc: "Deep tissue · 60 min", t: "10:00 AM", tone: "info" },
              { d: "FRI", date: "21 Feb", v: "Atelier Nails", svc: "Gel manicure", t: "4:15 PM", tone: "pos" },
            ].map((b, i) => (
              <div key={i} className="row" style={{ padding: 14, border: "1px solid var(--border)", borderRadius: 14 }}>
                <div style={{ width: 56, textAlign: "center", marginRight: 16 }}>
                  <div className="mono tiny muted" style={{ letterSpacing: "0.08em" }}>{b.d}</div>
                  <div className="display" style={{ fontSize: 22, marginTop: 2 }}>{b.date.split(" ")[0]}</div>
                  <div className="muted tiny">{b.date.split(" ")[1]}</div>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 500 }}>{b.v}</div>
                  <div className="muted tiny" style={{ marginTop: 2 }}>{b.svc} · {b.t}</div>
                </div>
                <S.Chip tone={b.tone}>Confirmed</S.Chip>
                <S.IconBtn><I.chevR size={14} /></S.IconBtn>
              </div>
            ))}
          </div>
        </div>

        {/* favorite vendors */}
        <div className="card" style={{ gridColumn: "span 5" }}>
          <div className="row between" style={{ marginBottom: 18 }}>
            <div className="h3">Saved vendors</div>
            <S.Btn variant="ghost" size="sm">Manage</S.Btn>
          </div>
          <div className="grid-2" style={{ gap: 10 }}>
            {[
              { n: "Maison Color & Co.", t: "Hair · Paris", v: "★ 4.9", c: "var(--accent-soft)" },
              { n: "Forest Spa", t: "Spa · Reykjavík", v: "★ 4.9", c: "var(--pos-soft)" },
              { n: "Atelier Nails", t: "Nails · Brooklyn", v: "★ 4.8", c: "var(--info-soft)" },
              { n: "Cut & Co", t: "Barber · Berlin", v: "★ 4.7", c: "var(--warn-soft)" },
            ].map((f, i) => (
              <div key={i} style={{ padding: 12, border: "1px solid var(--border)", borderRadius: 12 }}>
                <div className="placeholder-img" style={{ height: 48, borderRadius: 8, marginBottom: 8, fontSize: 9 }}>image</div>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{f.n}</div>
                <div className="row between">
                  <span className="muted tiny">{f.t}</span>
                  <span className="tiny" style={{ color: "var(--warn)" }}>{f.v}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ====================================================================
   USER — DISCOVER
   ==================================================================== */
function UserDiscover() {
  const cats = ["All", "Hair", "Nails", "Spa & massage", "Facials", "Brows & lashes", "Barber", "Wellness", "Fitness"];
  const [cat, setCat] = React.useState("All");
  // multi-step booking flow:
  //   { step: "select" | "calendar" | "details" | "success",
  //     vendor, services, staff, date, time }
  const [flow, setFlow] = React.useState(null);
  const closeFlow = () => setFlow(null);
  return (
    <div className="page-enter">
      <window.DemoBanner feature="vendor discovery" />
      <S.PageHead eyebrow="2,418 vendors near London" title="Discover" sub="Curated for what you love. Updated this morning." />

      <div className="card" style={{ marginBottom: 20, padding: 16 }}>
        <div className="row" style={{ gap: 10, flexWrap: "wrap" }}>
          <S.Input icon={<I.search size={15} />} placeholder="Search a service, vendor, or vibe…" style={{ flex: 1, minWidth: 240 }} />
          <S.Btn variant="outline" size="sm" iconRight={<I.chevD size={12} />}>Near London</S.Btn>
          <S.Btn variant="outline" size="sm" iconRight={<I.chevD size={12} />}>Any day</S.Btn>
          <S.Btn variant="outline" size="sm" iconRight={<I.chevD size={12} />}>$ – $$$$</S.Btn>
          <S.Btn variant="primary" size="sm" icon={<I.filter size={14} />}>Refine</S.Btn>
        </div>
      </div>

      <div className="row" style={{ gap: 8, marginBottom: 24, overflowX: "auto", paddingBottom: 4 }}>
        {cats.map((c) => (
          <button key={c} onClick={() => setCat(c)}
            className={cat === c ? "btn btn-primary btn-sm" : "btn btn-outline btn-sm"}
          >{c}</button>
        ))}
      </div>

      <div className="grid-3">
        {DISCOVER.map((v) => (
          <div key={v.name} className="card" style={{ padding: 0, overflow: "hidden" }}>
            <div className="placeholder-img" style={{ height: 160, borderRadius: 0 }}>vendor photo</div>
            <div style={{ padding: 18 }}>
              <div className="row between">
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="row-tight">
                    <S.Chip tone={v.cat === "Hair" ? "accent" : v.cat === "Spa" ? "info" : v.cat === "Nails" ? "warn" : "pos"}>{v.cat}</S.Chip>
                    <span className="tiny muted">· {v.dist}</span>
                  </div>
                  <div style={{ fontWeight: 500, marginTop: 8 }}>{v.name}</div>
                  <div className="muted tiny">{v.tagline}</div>
                </div>
                <S.IconBtn><I.heart size={16} /></S.IconBtn>
              </div>
              <div className="divider" style={{ margin: "14px 0" }} />
              <div className="row between">
                <div className="row-tight tiny">
                  <I.star size={12} color="var(--warn)" /> <span className="mono">{v.rating}</span>
                  <span className="muted">({v.reviews})</span>
                </div>
                <div className="row-tight tiny muted"><I.clock size={12} /> Next: {v.next}</div>
              </div>
              <div className="row between" style={{ marginTop: 14 }}>
                <span className="mono" style={{ fontSize: 14, fontWeight: 500 }}>from ${v.from}</span>
                <S.Btn size="sm" iconRight={<I.arrowR size={12} />} onClick={() => setFlow({ step: "select", vendor: v })}>Book</S.Btn>
              </div>
            </div>
          </div>
        ))}
      </div>

      <window.M.BookingModal
        open={flow?.step === "select"}
        vendor={flow?.vendor}
        onClose={closeFlow}
        onContinue={({ services, staff }) =>
          setFlow((f) => ({ ...f, step: "calendar", services, staff }))
        }
      />

      <window.M.BookingCalendarModal
        open={flow?.step === "calendar"}
        vendor={flow?.vendor}
        services={flow?.services || []}
        staff={flow?.staff}
        onClose={closeFlow}
        onBack={() => setFlow((f) => ({ ...f, step: "select" }))}
        onContinue={({ date, time }) =>
          setFlow((f) => ({ ...f, step: "details", date, time }))
        }
      />

      <window.M.BookingDetailsModal
        open={flow?.step === "details"}
        vendor={flow?.vendor}
        services={flow?.services || []}
        staff={flow?.staff}
        date={flow?.date}
        time={flow?.time}
        onClose={closeFlow}
        onBack={() => setFlow((f) => ({ ...f, step: "calendar" }))}
        onPay={() => setFlow((f) => ({ ...f, step: "success" }))}
      />

      <window.M.BookingSuccessModal
        open={flow?.step === "success"}
        vendor={flow?.vendor}
        services={flow?.services || []}
        staff={flow?.staff}
        date={flow?.date}
        time={flow?.time}
        onClose={closeFlow}
        onView={closeFlow}
      />
    </div>
  );
}

const DISCOVER = [
  { name: "Maison Color & Co.", cat: "Hair", tagline: "Color specialists, editorial finish", rating: 4.9, reviews: 1842, dist: "0.4 mi", next: "Today 4 PM", from: 84,
    gallery: ["Salon interior · 1/4", "Color station · 2/4", "Editorial work · 3/4", "Lounge · 4/4"],
    services: [
      { name: "Full color & cut", price: 184, duration: "90 min", desc: "Single-process color, gloss, blow-dry" },
      { name: "Balayage", price: 240, duration: "2h 30m", desc: "Hand-painted lightening, toner included" },
      { name: "Cut & style", price: 84, duration: "45 min", desc: "Precision cut and finish" },
      { name: "Gloss treatment", price: 64, duration: "30 min", desc: "Shine boost, refreshes tone between visits" },
    ],
    staff: [
      { name: "Léa Marchand", role: "Senior colorist" },
      { name: "Nina Park", role: "Master stylist" },
      { name: "Sam Okafor", role: "Color specialist" },
      { name: "Mia Russo", role: "Stylist" },
    ],
  },
  { name: "Forest Spa", cat: "Spa", tagline: "Deep tissue, hot stone, lymphatic", rating: 4.9, reviews: 982, dist: "0.8 mi", next: "Tomorrow 10 AM", from: 95,
    gallery: ["Treatment room · 1/3", "Steam lounge · 2/3", "Garden suite · 3/3"],
    services: [
      { name: "Deep tissue", price: 142, duration: "60 min", desc: "Firm pressure targeting knots and tension" },
      { name: "Hot stone", price: 168, duration: "75 min", desc: "Heated basalt stones, full body" },
      { name: "Lymphatic drainage", price: 124, duration: "50 min", desc: "Gentle, detoxifying rhythmic strokes" },
    ],
    staff: [
      { name: "Ingrid Holm", role: "Lead therapist" },
      { name: "Yuki Sato", role: "Massage therapist" },
      { name: "Tomás Vega", role: "Bodywork specialist" },
    ],
  },
  { name: "Atelier Nails", cat: "Nails", tagline: "Builder gel & extension specialists", rating: 4.8, reviews: 1420, dist: "0.4 mi", next: "Today 6 PM", from: 48,
    gallery: ["Nail bar · 1/3", "Art gallery · 2/3", "Studio · 3/3"],
    services: [
      { name: "Builder gel manicure", price: 64, duration: "60 min", desc: "Hard-wearing gel, glossy finish" },
      { name: "Gel extensions", price: 96, duration: "90 min", desc: "Sculpted gel tips, full set" },
      { name: "Express manicure", price: 38, duration: "30 min", desc: "Shape, cuticle, polish" },
    ],
    staff: [
      { name: "Priya Shah", role: "Nail artist" },
      { name: "Jade Lin", role: "Gel specialist" },
      { name: "Olivia Bennett", role: "Nail technician" },
      { name: "Camille Roux", role: "Senior artist" },
    ],
  },
  { name: "Glow Skin Studio", cat: "Facials", tagline: "Med-grade facials, results-led", rating: 4.9, reviews: 820, dist: "1.2 mi", next: "Wed 11 AM", from: 120,
    gallery: ["Treatment room · 1/3", "Reception · 2/3", "Product wall · 3/3"],
    services: [
      { name: "Signature HydraFacial", price: 178, duration: "60 min", desc: "Cleanse, exfoliate, hydrate — visibly glowy" },
      { name: "Microneedling", price: 240, duration: "75 min", desc: "Collagen induction, results over weeks" },
      { name: "Express glow", price: 120, duration: "30 min", desc: "Quick reset facial for busy days" },
    ],
    staff: [
      { name: "Dr. Anya Patel", role: "Lead aesthetician" },
      { name: "Hannah Cole", role: "Skin therapist" },
      { name: "Rosa Diaz", role: "Facialist" },
    ],
  },
  { name: "Cut & Co Barber", cat: "Hair", tagline: "Classic cuts, hot-towel shaves", rating: 4.7, reviews: 2100, dist: "1.1 mi", next: "Today 5 PM", from: 32,
    gallery: ["Shop floor · 1/3", "Chair · 2/3", "Tools · 3/3"],
    services: [
      { name: "Cut & style", price: 38, duration: "35 min", desc: "Tailored to your hair type and head shape" },
      { name: "Hot-towel shave", price: 48, duration: "40 min", desc: "Steam, lather, straight-razor finish" },
      { name: "Beard trim", price: 28, duration: "20 min", desc: "Line up, shape, conditioning oil" },
    ],
    staff: [
      { name: "Marco Bianchi", role: "Head barber" },
      { name: "Theo Kane", role: "Master barber" },
      { name: "Jonas Weiss", role: "Barber" },
      { name: "Eli Brooks", role: "Apprentice" },
    ],
  },
  { name: "Brow Bar London", cat: "Lashes", tagline: "Brow lamination & lash lifts", rating: 4.8, reviews: 612, dist: "1.6 mi", next: "Thu 2 PM", from: 56,
    gallery: ["Studio · 1/3", "Brow chart · 2/3", "Lash station · 3/3"],
    services: [
      { name: "Brow lamination", price: 78, duration: "45 min", desc: "Smooth, lifted brows for 6–8 weeks" },
      { name: "Lash lift & tint", price: 92, duration: "60 min", desc: "Natural lift with optional tint" },
      { name: "Brow shape & tint", price: 56, duration: "30 min", desc: "Wax, thread, and colour" },
    ],
    staff: [
      { name: "Iris Bell", role: "Brow stylist" },
      { name: "Maya Khan", role: "Lash technician" },
      { name: "Chloe Wright", role: "Brow artist" },
    ],
  },
];

/* ====================================================================
   USER — BOOKINGS
   ==================================================================== */
function UserBookings() {
  const [tab, setTab] = React.useState("upcoming");
  return (
    <div className="page-enter">
      <window.DemoBanner feature="client bookings" />
      <S.PageHead eyebrow="3 upcoming · 24 past" title="My bookings" sub="Everything you’ve scheduled, completed, or cancelled." />

      <div className="row" style={{ gap: 0, borderBottom: "1px solid var(--border)", marginBottom: 20 }}>
        {[{ k: "upcoming", l: "Upcoming", n: 3 }, { k: "past", l: "Past", n: 24 }, { k: "cancelled", l: "Cancelled", n: 2 }].map(t => (
          <button key={t.k} onClick={() => setTab(t.k)}
            style={{
              padding: "12px 18px", fontSize: 13, fontWeight: 500,
              color: tab === t.k ? "var(--ink)" : "var(--ink-3)",
              borderBottom: `2px solid ${tab === t.k ? "var(--ink)" : "transparent"}`,
            }}>
            {t.l} <span className="mono tiny muted">{t.n}</span>
          </button>
        ))}
      </div>

      <div className="col" style={{ gap: 14 }}>
        {[
          { v: "Maison Color & Co.", svc: "Full color & cut", d: "Today · 2:30 PM", price: 184, status: "Confirmed", tone: "pos", upc: true },
          { v: "Forest Spa", svc: "Deep tissue · 60 min", d: "Wed Feb 12 · 10:00 AM", price: 142, status: "Confirmed", tone: "pos", upc: true },
          { v: "Atelier Nails", svc: "Gel manicure", d: "Fri Feb 21 · 4:15 PM", price: 64, status: "Pending vendor", tone: "warn", upc: true },
          { v: "Cut & Co Barber", svc: "Beard trim", d: "Jan 24 · 3:30 PM", price: 38, status: "Completed", tone: "info", upc: false },
        ].map((b, i) => (
          <div key={i} className="card row" style={{ gap: 16 }}>
            <div className="placeholder-img" style={{ width: 80, height: 80, borderRadius: 12, fontSize: 9 }}>vendor</div>
            <div style={{ flex: 1 }}>
              <div className="row-tight">
                <S.Chip tone={b.tone}>{b.status}</S.Chip>
                <span className="muted tiny">{b.d}</span>
              </div>
              <div style={{ fontSize: 16, fontWeight: 500, marginTop: 8 }}>{b.v}</div>
              <div className="muted" style={{ fontSize: 13 }}>{b.svc}</div>
            </div>
            <div style={{ textAlign: "right" }}>
              <div className="display" style={{ fontSize: 22 }}>${b.price}</div>
              <div className="muted tiny">total</div>
            </div>
            <div className="col" style={{ gap: 6 }}>
              {b.upc ? <>
                <S.Btn variant="outline" size="sm">Reschedule</S.Btn>
                <S.Btn variant="ghost" size="sm">Details</S.Btn>
              </> : <>
                <S.Btn variant="outline" size="sm">Rebook</S.Btn>
                <S.Btn variant="ghost" size="sm">Review</S.Btn>
              </>}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ====================================================================
   USER — WALLET
   ==================================================================== */
function UserWallet() {
  return (
    <div className="page-enter">
      <window.DemoBanner feature="client wallet" />
      <S.PageHead eyebrow="Money" title="Wallet" sub="Credit, gift cards, payment methods, and history." />

      <div className="grid-12" style={{ marginBottom: 20 }}>
        <div className="card" style={{ gridColumn: "span 5", background: "var(--ink)", color: "var(--bg)", borderColor: "transparent", position: "relative", overflow: "hidden" }}>
          <div style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 80% 20%, var(--accent) 0%, transparent 50%)", opacity: 0.5 }} />
          <div style={{ position: "relative" }}>
            <div className="eyebrow" style={{ color: "oklch(75% 0.02 145)" }}>Available balance</div>
            <div className="display" style={{ fontSize: 56, color: "var(--bg)", letterSpacing: "-0.035em", marginTop: 8 }}>$248.40</div>
            <div className="muted tiny" style={{ color: "oklch(75% 0.02 145)" }}>≈ 4 average bookings</div>
            <div className="row" style={{ marginTop: 28, gap: 8 }}>
              <S.Btn variant="primary" icon={<I.plus size={14} />}>Top up</S.Btn>
              <S.Btn variant="ghost" style={{ color: "var(--bg)", background: "oklch(100% 0 0 / 0.10)" }} icon={<I.download size={14} />}>Withdraw</S.Btn>
            </div>
          </div>
        </div>

        <div className="card" style={{ gridColumn: "span 4", padding: 24, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
          <div>
            <div className="eyebrow">Spent this year</div>
            <div className="display" style={{ fontSize: 36, marginTop: 10 }}>$1,824</div>
            <div className="row-tight" style={{ marginTop: 8 }}>
              <S.Chip tone="pos">+12%</S.Chip>
              <span className="muted tiny">vs last year</span>
            </div>
          </div>
          <div style={{ marginTop: 14 }}>
            <S.Spark data={[2, 3, 4, 3, 5, 4, 6, 5, 7, 8, 9, 8]} width={300} height={56} />
            <div className="row between" style={{ marginTop: 8 }}>
              <span className="muted tiny">Jan</span>
              <span className="muted tiny">Dec</span>
            </div>
          </div>
        </div>

        <div className="card" style={{ gridColumn: "span 3", padding: 22, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
          <div>
            <div className="eyebrow">Loyalty</div>
            <div className="display" style={{ fontSize: 36, marginTop: 10 }}>Gold</div>
            <div className="muted tiny" style={{ marginTop: 4 }}>3 visits to Platinum</div>
          </div>
          <div className="bar" style={{ marginTop: 18 }}><span style={{ width: "82%" }} /></div>
        </div>
      </div>

      <div className="card card-flush">
        <div className="row between" style={{ padding: "22px 22px 14px" }}>
          <div className="h3">Recent activity</div>
          <S.Btn variant="outline" size="sm" icon={<I.download size={12} />}>Export</S.Btn>
        </div>
        <table className="tbl">
          <thead><tr><th>Date</th><th>Detail</th><th>Method</th><th className="col-num">Amount</th></tr></thead>
          <tbody>
            {[
              { d: "Feb 2", t: "Maison Color & Co. — Full color", m: "Visa ····2118", a: -184, tone: "neg" },
              { d: "Feb 1", t: "Top-up", m: "Apple Pay", a: 100, tone: "pos" },
              { d: "Jan 28", t: "Forest Spa — Deep tissue", m: "Wallet", a: -142, tone: "neg" },
              { d: "Jan 24", t: "Cut & Co Barber", m: "Visa ····2118", a: -38, tone: "neg" },
              { d: "Jan 18", t: "Loyalty bonus", m: "Pamp credit", a: 25, tone: "pos" },
            ].map((r, i) => (
              <tr key={i}>
                <td className="mono muted">{r.d}</td>
                <td>{r.t}</td>
                <td className="muted">{r.m}</td>
                <td className="col-num mono" style={{ color: r.a < 0 ? "var(--ink)" : "var(--pos)", fontWeight: 500 }}>
                  {r.a > 0 ? "+" : "−"}${Math.abs(r.a).toLocaleString()}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

/* Card-style payment method tiles */
function PaymentCardTile({ brand, num, name, exp, tone = "ink", isDefault, onMakeDefault }) {
  const palettes = {
    ink: { bg: "var(--ink)", fg: "white", accent: "var(--accent)" },
    accent: { bg: "linear-gradient(135deg, oklch(38% 0.05 145) 0%, oklch(28% 0.08 145) 100%)", fg: "white", accent: "var(--accent)" },
  };
  const p = palettes[tone];
  return (
    <div className="card" style={{ padding: 0, overflow: "hidden", display: "flex", flexDirection: "column" }}>
      <div style={{
        background: p.bg, color: p.fg, padding: 20, position: "relative", minHeight: 170,
        display: "flex", flexDirection: "column", justifyContent: "space-between",
      }}>
        <div style={{
          position: "absolute", top: -40, right: -40, width: 200, height: 200, borderRadius: "50%",
          background: `radial-gradient(circle, ${tone === "accent" ? "var(--accent)" : "oklch(72% 0.14 145 / 0.18)"} 0%, transparent 60%)`,
        }} />
        <div className="row between" style={{ position: "relative" }}>
          <div style={{ display: "flex", gap: 4 }}>
            <span style={{ width: 28, height: 20, borderRadius: 4, background: "oklch(100% 0 0 / 0.20)" }} />
            <span style={{ width: 28, height: 20, borderRadius: 4, background: "oklch(100% 0 0 / 0.10)" }} />
          </div>
          {isDefault && <S.Chip tone="accent" style={{ background: "oklch(100% 0 0 / 0.16)", color: p.accent, borderColor: "transparent" }}>Default</S.Chip>}
        </div>
        <div style={{ position: "relative" }}>
          <div className="mono" style={{ fontSize: 15, letterSpacing: "0.05em", marginBottom: 14 }}>{num}</div>
          <div className="row between">
            <div>
              <div className="mono tiny" style={{ opacity: 0.6, letterSpacing: "0.10em" }}>CARDHOLDER</div>
              <div style={{ fontSize: 12, marginTop: 2 }}>{name}</div>
            </div>
            <div>
              <div className="mono tiny" style={{ opacity: 0.6, letterSpacing: "0.10em", textAlign: "right" }}>EXPIRES</div>
              <div className="mono" style={{ fontSize: 12, marginTop: 2 }}>{exp}</div>
            </div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 16, fontWeight: 600, letterSpacing: "0.04em", color: p.accent }}>{brand}</div>
          </div>
        </div>
      </div>
      <div className="row between" style={{ padding: "12px 16px" }}>
        {!isDefault ? (
          <button onClick={onMakeDefault} className="btn btn-ghost btn-sm">Make default</button>
        ) : <span className="muted tiny">Primary card</span>}
        <S.IconBtn><I.ellipsis size={16} /></S.IconBtn>
      </div>
    </div>
  );
}
function ApplePayTile({ isDefault, onMakeDefault }) {
  return (
    <div className="card" style={{ padding: 0, overflow: "hidden", display: "flex", flexDirection: "column" }}>
      <div style={{
        background: "var(--surface)", border: "1px solid var(--border)",
        padding: 20, minHeight: 170, display: "flex", flexDirection: "column", justifyContent: "space-between",
        position: "relative",
      }}>
        <div className="row between">
          <div style={{
            width: 44, height: 44, borderRadius: 12,
            background: "var(--ink)", color: "var(--surface)",
            display: "flex", alignItems: "center", justifyContent: "center",
            fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600,
          }}></div>
          {isDefault && <S.Chip tone="accent">Default</S.Chip>}
        </div>
        <div>
          <div style={{ fontSize: 16, fontWeight: 500 }}>Apple Pay</div>
          <div className="muted tiny" style={{ marginTop: 4 }}>iPhone 15 Pro · Touch ID</div>
          <div className="row" style={{ marginTop: 14, gap: 6 }}>
            <S.Chip>Touch ID</S.Chip>
            <S.Chip>Auto-fill</S.Chip>
          </div>
        </div>
      </div>
      <div className="row between" style={{ padding: "12px 16px" }}>
        {!isDefault ? (
          <button onClick={onMakeDefault} className="btn btn-ghost btn-sm">Make default</button>
        ) : <span className="muted tiny">Primary method</span>}
        <S.IconBtn><I.ellipsis size={16} /></S.IconBtn>
      </div>
    </div>
  );
}

/* ====================================================================
   USER — FAVORITES + NOTIFICATIONS
   ==================================================================== */
function UserFavorites() {
  return (
    <div className="page-enter">
      <window.DemoBanner feature="favorites" />
      <S.PageHead eyebrow="14 saved · 4 lists" title="Favorites" sub="Pinned vendors and services, organized your way." />
      <div className="grid-3">
        {[
          { n: "Maison Color & Co.", c: "Hair", r: "4.9" },
          { n: "Forest Spa", c: "Spa", r: "4.9" },
          { n: "Atelier Nails", c: "Nails", r: "4.8" },
          { n: "Cut & Co Barber", c: "Barber", r: "4.7" },
          { n: "Glow Skin Studio", c: "Facials", r: "4.9" },
          { n: "Brow Bar London", c: "Lashes", r: "4.8" },
        ].map((v, i) => (
          <div key={i} className="card" style={{ padding: 0, overflow: "hidden" }}>
            <div className="placeholder-img" style={{ height: 120, borderRadius: 0 }}>vendor</div>
            <div style={{ padding: 16 }}>
              <div className="row between">
                <S.Chip>{v.c}</S.Chip>
                <I.heart size={16} fill="var(--accent)" stroke="var(--accent)" />
              </div>
              <div style={{ marginTop: 12, fontWeight: 500 }}>{v.n}</div>
              <div className="row between" style={{ marginTop: 8 }}>
                <span className="row-tight tiny"><I.star size={12} color="var(--warn)" />{v.r}</span>
                <S.Btn size="sm" variant="outline">Book</S.Btn>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function UserNotifications() {
  const [filter, setFilter] = React.useState("all");
  const [items, setItems] = React.useState(NOTIFS);
  const counts = React.useMemo(() => {
    const c = { all: items.length };
    items.forEach(n => { c[n.cat] = (c[n.cat] || 0) + 1; });
    c.unread = items.filter(n => !n.read).length;
    return c;
  }, [items]);
  const filtered = items.filter(n => filter === "all" || n.cat === filter);
  const groups = filtered.reduce((acc, n) => { (acc[n.bucket] = acc[n.bucket] || []).push(n); return acc; }, {});
  const markAllRead = () => setItems(items.map(n => ({ ...n, read: true })));

  return (
    <div className="page-enter">
      <window.DemoBanner feature="user notifications" />
      <S.PageHead
        eyebrow={`${counts.unread} unread · ${counts.all} total`}
        title="Notifications"
        sub="Booking updates, perks, receipts and reminders — all in one place."
        right={<>
          <S.Btn variant="outline" size="sm" icon={<I.check size={14} />} onClick={markAllRead}>Mark all read</S.Btn>
          <S.Btn variant="ghost" size="sm" icon={<I.settings size={14} />}>Preferences</S.Btn>
        </>}
      />

      {/* unread hero strip */}
      {counts.unread > 0 && (
        <div className="card" style={{
          padding: 22, marginBottom: 20,
          background: "var(--accent-soft)", color: "var(--accent-ink)", borderColor: "transparent",
          display: "flex", alignItems: "center", gap: 18,
        }}>
          <div style={{
            width: 48, height: 48, borderRadius: 14, background: "var(--accent)",
            color: "oklch(20% 0.10 145)", display: "flex", alignItems: "center", justifyContent: "center",
          }}>
            <I.bell size={22} />
          </div>
          <div style={{ flex: 1 }}>
            <div className="display" style={{ fontSize: 22, color: "var(--accent-ink)" }}>{counts.unread} unread notifications</div>
            <div className="muted tiny" style={{ marginTop: 2, color: "var(--accent-ink)", opacity: 0.7 }}>
              Including 1 booking confirmation and 1 perk you can use today.
            </div>
          </div>
          <S.Btn variant="ink" size="sm" iconRight={<I.arrowR size={12} />} onClick={() => setFilter("bookings")}>
            See bookings
          </S.Btn>
        </div>
      )}

      {/* filter chips */}
      <div className="row" style={{ gap: 8, marginBottom: 20, overflowX: "auto", paddingBottom: 4 }}>
        {[
          { k: "all", l: "All", c: counts.all },
          { k: "bookings", l: "Bookings", c: counts.bookings || 0 },
          { k: "money", l: "Money & receipts", c: counts.money || 0 },
          { k: "perks", l: "Perks & rewards", c: counts.perks || 0 },
          { k: "messages", l: "Messages", c: counts.messages || 0 },
          { k: "system", l: "System", c: counts.system || 0 },
        ].map((f) => (
          <button key={f.k} onClick={() => setFilter(f.k)}
            className={`btn btn-sm ${filter === f.k ? "btn-primary" : "btn-outline"}`}
          >
            {f.l}
            <span className="mono tiny" style={{
              marginLeft: 4, opacity: filter === f.k ? 0.75 : 0.55,
              padding: "1px 7px", borderRadius: 999,
              background: filter === f.k ? "oklch(0% 0 0 / 0.10)" : "var(--surface-3)",
            }}>{f.c}</span>
          </button>
        ))}
      </div>

      {Object.keys(groups).length === 0 ? (
        <div className="card" style={{ padding: 60, textAlign: "center" }}>
          <div style={{
            width: 56, height: 56, borderRadius: 16, background: "var(--surface-3)",
            display: "inline-flex", alignItems: "center", justifyContent: "center",
            color: "var(--ink-3)", marginBottom: 14,
          }}><I.bell size={24} /></div>
          <div className="h3">All caught up</div>
          <div className="muted" style={{ fontSize: 13, marginTop: 6 }}>Nothing in this filter right now.</div>
        </div>
      ) : (
        Object.entries(groups).map(([bucket, list]) => (
          <div key={bucket} style={{ marginBottom: 20 }}>
            <div className="row between" style={{ marginBottom: 10 }}>
              <div className="eyebrow">{bucket}</div>
              <span className="muted tiny">{list.length} {list.length === 1 ? "notification" : "notifications"}</span>
            </div>
            <div className="card card-flush">
              {list.map((n, i) => (
                <NotifRow key={n.id} n={n} isLast={i === list.length - 1} />
              ))}
            </div>
          </div>
        ))
      )}
    </div>
  );
}

function NotifRow({ n, isLast }) {
  const tone = n.tone || "info";
  return (
    <div className="row" style={{
      padding: "18px 20px",
      borderBottom: isLast ? "none" : "1px solid var(--border)",
      gap: 16, position: "relative",
      background: n.read ? "transparent" : "var(--surface-2)",
    }}>
      {!n.read && <span style={{
        position: "absolute", left: 8, top: "50%", transform: "translateY(-50%)",
        width: 6, height: 6, borderRadius: "50%", background: "var(--accent)",
      }} />}
      <div style={{
        width: 42, height: 42, borderRadius: 12, flexShrink: 0,
        background: `var(--${tone === "accent" ? "accent" : tone}-soft)`,
        color: tone === "accent" ? "var(--accent-ink)" : `var(--${tone})`,
        display: "flex", alignItems: "center", justifyContent: "center",
      }}>{React.cloneElement(n.icon, { size: 18 })}</div>

      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="row between" style={{ alignItems: "flex-start" }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: n.read ? 400 : 500, color: "var(--ink)" }}>{n.title}</div>
            <div className="muted" style={{ fontSize: 13, marginTop: 4, lineHeight: 1.5 }}>{n.body}</div>
          </div>
          <div style={{ textAlign: "right", marginLeft: 14 }}>
            <div className="muted tiny" style={{ whiteSpace: "nowrap" }}>{n.time}</div>
          </div>
        </div>
        {n.actions && (
          <div className="row" style={{ marginTop: 12, gap: 6 }}>
            {n.actions.map((a, i) => (
              <S.Btn key={i} variant={i === 0 ? "primary" : "outline"} size="sm" iconRight={i === 0 ? <I.arrowR size={12} /> : null}>{a}</S.Btn>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

const NOTIFS = [
  {
    id: 1, bucket: "Today", cat: "bookings", tone: "pos", read: false,
    icon: <I.check />,
    title: "Maison Color & Co. confirmed your appointment",
    body: "Today at 2:30 PM · Full color & cut · 90 min with Léa M.",
    time: "2h ago",
    actions: ["View booking", "Add to calendar"],
  },
  {
    id: 2, bucket: "Today", cat: "perks", tone: "accent", read: false,
    icon: <I.coupon />,
    title: "10% off your next spa booking",
    body: "Use code FORESTLOVE at Forest Spa. Valid for 30 days. Limit 1 per client.",
    time: "5h ago",
    actions: ["Browse spas", "Copy code"],
  },
  {
    id: 3, bucket: "Today", cat: "messages", tone: "info", read: false,
    icon: <I.mail />,
    title: "Léa Marchand replied to your message",
    body: "“Looking forward to seeing you tomorrow ✨ Bring the reference photos when you can.”",
    time: "8h ago",
    actions: ["Open chat"],
  },
  {
    id: 4, bucket: "Yesterday", cat: "money", tone: "info", read: true,
    icon: <I.card />,
    title: "Receipt · Cut & Co Barber",
    body: "$38.00 charged to Visa ····2118 — invoice PB-28349 attached.",
    time: "Jan 24",
    actions: ["Download receipt"],
  },
  {
    id: 5, bucket: "Yesterday", cat: "perks", tone: "warn", read: true,
    icon: <I.crown />,
    title: "You earned 200 loyalty points",
    body: "You’re 3 visits away from Platinum tier. Platinum unlocks 15% off facials.",
    time: "Jan 24",
  },
  {
    id: 6, bucket: "Earlier this week", cat: "bookings", tone: "info", read: true,
    icon: <I.calendar />,
    title: "Booking reminder for tomorrow",
    body: "Forest Spa · Deep tissue at 10:00 AM. Arrive 10 minutes early to fill out the wellness form.",
    time: "Jan 20",
  },
  {
    id: 7, bucket: "Earlier this week", cat: "system", tone: "info", read: true,
    icon: <I.settings />,
    title: "New device signed in",
    body: "MacBook Pro · Safari · London, UK. If this wasn’t you, secure your account.",
    time: "Jan 18",
    actions: ["Review activity"],
  },
];

window.UserApp = UserApp;

/* ====================================================================
   USER — PAMP PROGRAM (rewards: invite friends + discount codes + payouts)
   ==================================================================== */
function UserInfluencer() {
  return (
    <div className="page-enter">
      <window.DemoBanner feature="Pamp Influencer program" />
      <S.PageHead
        eyebrow="Rewards · invite-only ambassadors"
        title="Pamp Program"
        sub="Invite friends, redeem codes, and earn for every booking you drive."
        right={<S.Btn variant="primary" size="sm" icon={<I.sparkle size={14} />}>View payout</S.Btn>}
      />

      {/* hero */}
      <div className="card" style={{
        padding: 36, marginBottom: 28, position: "relative", overflow: "hidden",
        background: "var(--ink)", color: "var(--surface)", borderColor: "transparent",
        display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 32, alignItems: "center",
      }}>
        <div style={{
          position: "absolute", inset: 0, opacity: 0.6,
          background: "radial-gradient(circle at 85% 20%, var(--accent) 0%, transparent 50%), radial-gradient(circle at 15% 80%, var(--accent) 0%, transparent 50%)",
          filter: "blur(40px)",
        }} />
        <div style={{ position: "relative" }}>
          <S.Chip tone="accent" style={{ background: "var(--accent)", color: "oklch(20% 0.10 145)" }}>Status · Gold ambassador</S.Chip>
          <div className="display" style={{ fontSize: 48, lineHeight: 1.05, letterSpacing: "-0.035em", marginTop: 18, color: "var(--surface)" }}>
            $1,248.40 <span style={{ opacity: 0.4, fontSize: 18 }}>earned this year</span>
          </div>
          <div style={{ color: "oklch(85% 0.02 145)", fontSize: 14, maxWidth: 480, marginTop: 10 }}>
            Your link drove 84 bookings across 12 vendors. Next tier (<strong style={{ color: "var(--accent)" }}>Platinum</strong>) unlocks 15% rev share + early access.
          </div>
          <div className="row" style={{ marginTop: 24, gap: 8 }}>
            <S.Btn variant="primary" style={{ background: "white", color: "var(--ink)" }} icon={<I.export size={14} />}>Share link</S.Btn>
            <S.Btn variant="ghost" style={{ color: "var(--surface)", background: "oklch(100% 0 0 / 0.12)" }}>How payouts work</S.Btn>
          </div>
        </div>
        <div style={{ position: "relative" }}>
          <div className="eyebrow" style={{ color: "var(--accent)", marginBottom: 16 }}>Tier progress</div>
          {[
            { tier: "Silver", at: 0, done: true },
            { tier: "Gold", at: 50, done: true, current: true },
            { tier: "Platinum", at: 80 },
            { tier: "Diamond", at: 100 },
          ].map((t, i) => (
            <div key={t.tier} className="row" style={{ gap: 14, padding: "10px 0" }}>
              <div style={{
                width: 32, height: 32, borderRadius: 10,
                background: t.current ? "var(--accent)" : t.done ? "oklch(100% 0 0 / 0.16)" : "oklch(100% 0 0 / 0.06)",
                color: t.current ? "oklch(20% 0.10 145)" : t.done ? "var(--accent)" : "oklch(60% 0 0)",
                display: "flex", alignItems: "center", justifyContent: "center",
                fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 600,
              }}>{t.done ? "✓" : i + 1}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 500, color: t.current ? "var(--accent)" : "var(--surface)" }}>{t.tier}</div>
                <div className="bar" style={{ marginTop: 4, background: "oklch(100% 0 0 / 0.10)" }}>
                  <span style={{ width: `${t.at}%`, background: t.current ? "var(--accent)" : "oklch(100% 0 0 / 0.40)" }} />
                </div>
              </div>
              <span className="mono tiny" style={{ color: "oklch(75% 0.02 145)" }}>{t.at}%</span>
            </div>
          ))}
        </div>
      </div>

      {/* ───────────── SECTION 1 · Invite friends ───────────── */}
      <PampSectionHead num="01" title="Invite friends" sub="Refer a friend. They get $15 off their first booking, you get $15 in credit." />
      <div className="grid-12" style={{ marginBottom: 32 }}>
        <div className="card" style={{ gridColumn: "span 7" }}>
          <div className="grid-3" style={{ marginBottom: 22 }}>
            <InviteStat label="Earned" value="$45" />
            <InviteStat label="Joined" value="3" />
            <InviteStat label="Booked" value="2" />
          </div>
          <div className="eyebrow" style={{ marginBottom: 8 }}>Your invite link</div>
          <div className="row" style={{ gap: 8, marginBottom: 18 }}>
            <S.Input value="pamp.app/i/amelia-7k2" style={{ flex: 1 }} />
            <S.Btn variant="outline" icon={<I.export size={12} />}>Copy</S.Btn>
            <S.Btn variant="primary" icon={<I.mail size={12} />}>Email</S.Btn>
          </div>
          <div className="eyebrow" style={{ marginBottom: 8 }}>Or send directly</div>
          <div className="row" style={{ gap: 8 }}>
            <S.Input icon={<I.mail size={14} />} placeholder="friend@example.com" style={{ flex: 1 }} />
            <S.Btn variant="primary">Send invite</S.Btn>
          </div>
        </div>

        <div className="card card-flush" style={{ gridColumn: "span 5" }}>
          <div className="row between" style={{ padding: "22px 22px 14px" }}>
            <div className="h3">Invite tracking</div>
            <span className="muted tiny">Last 30 days</span>
          </div>
          <div className="col" style={{ gap: 0 }}>
            {[
              { e: "mia@hey.com", s: "Booked", st: "pos", date: "Jan 14" },
              { e: "alex@gmail.com", s: "Joined", st: "info", date: "Jan 9" },
              { e: "sarah@me.com", s: "Pending", st: "warn", date: "Jan 4" },
              { e: "noah@hey.com", s: "Pending", st: "warn", date: "Dec 28" },
            ].map((r, i, a) => (
              <div key={r.e} className="row between" style={{
                padding: "14px 22px",
                borderBottom: i === a.length - 1 ? "none" : "1px solid var(--border)",
              }}>
                <span style={{ fontSize: 13 }}>{r.e}</span>
                <span className="row-tight" style={{ gap: 10 }}>
                  <span className="muted tiny">{r.date}</span>
                  <S.Chip tone={r.st}>{r.s}</S.Chip>
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* ───────────── SECTION 2 · Discount codes ───────────── */}
      <PampSectionHead num="02" title="Discount codes" sub="Redeem promotional codes and track what's active on your account." />
      <div className="grid-12" style={{ marginBottom: 32 }}>
        <div className="card" style={{ gridColumn: "span 5" }}>
          <div className="eyebrow" style={{ marginBottom: 8 }}>Redeem a code</div>
          <div className="row" style={{ gap: 8, marginBottom: 16 }}>
            <S.Input icon={<I.coupon size={14} />} placeholder="Enter code" style={{ flex: 1 }} />
            <S.Btn variant="primary">Apply</S.Btn>
          </div>
          <div style={{
            padding: 14, borderRadius: 12,
            background: "var(--accent-soft)", color: "var(--accent-ink)",
            fontSize: 12.5, lineHeight: 1.5,
          }}>
            Codes apply to your next eligible booking. Some codes are vendor-specific — usage details show below.
          </div>
        </div>

        <div className="card card-flush" style={{ gridColumn: "span 7" }}>
          <div className="row between" style={{ padding: "22px 22px 12px" }}>
            <div>
              <div className="h3">Active codes</div>
              <div className="muted tiny" style={{ marginTop: 2 }}>2 active · 1 expiring soon</div>
            </div>
            <S.Btn variant="ghost" size="sm">See all</S.Btn>
          </div>
          <div className="col" style={{ gap: 0 }}>
            {[
              { code: "WELCOME10", desc: "10% off your first booking", exp: "Expires Mar 30", uses: "1 / 1 use" },
              { code: "PAMPGOLD", desc: "Gold-tier · 15% off facials", exp: "Always active", uses: "4 / unlimited" },
              { code: "FORESTLOVE", desc: "10% off Forest Spa", exp: "Expires Feb 24", uses: "0 / 1 use" },
            ].map((c, i, a) => (
              <div key={c.code} className="row" style={{
                padding: "16px 22px", gap: 14,
                borderBottom: i === a.length - 1 ? "none" : "1px solid var(--border)",
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 10, background: "var(--accent-soft)",
                  color: "var(--accent-ink)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
                }}><I.coupon size={18} /></div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="row-tight" style={{ gap: 10 }}>
                    <span className="mono" style={{ fontSize: 14, fontWeight: 600 }}>{c.code}</span>
                    <span className="muted tiny">· {c.uses}</span>
                  </div>
                  <div className="muted tiny" style={{ marginTop: 4 }}>{c.desc}</div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div className="tiny muted">{c.exp}</div>
                  <button style={{ fontSize: 12, color: "var(--accent-ink)", fontWeight: 500, marginTop: 4 }}>Remove</button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* ───────────── SECTION 3 · Ambassador (payouts, link, perks) ───────────── */}
      <PampSectionHead num="03" title="Ambassador earnings" sub="Track clicks, sign-ups and payouts from your share link." />

      {/* metric strip */}
      <div className="grid-4" style={{ marginBottom: 20 }}>
        <S.Metric label="Total clicks" value="3,418" delta="+24%" />
        <S.Metric label="Sign-ups" value="142" delta="+12%" />
        <S.Metric label="Bookings driven" value="84" delta="+18%" />
        <S.Metric label="Avg. payout / booking" value="$14.86" delta="+$1.40" />
      </div>

      {/* perks + link */}
      <div className="grid-12">
        <div className="card" style={{ gridColumn: "span 7" }}>
          <div className="h3" style={{ marginBottom: 14 }}>Your share link</div>
          <div className="row" style={{ gap: 8, marginBottom: 22 }}>
            <S.Input value="pamp.app/i/amelia-7k2" style={{ flex: 1 }} />
            <S.Btn variant="outline" icon={<I.export size={12} />}>Copy</S.Btn>
            <S.Btn variant="primary" icon={<I.sparkle size={12} />}>Custom slug</S.Btn>
          </div>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Share-ready assets</div>
          <div className="grid-3" style={{ gap: 10 }}>
            {["Story · 9:16", "Post · 1:1", "Banner · 16:9"].map((s) => (
              <div key={s} className="placeholder-img" style={{ height: 110, fontSize: 11 }}>{s}</div>
            ))}
          </div>
        </div>

        <div className="card" style={{ gridColumn: "span 5" }}>
          <div className="h3" style={{ marginBottom: 14 }}>Gold ambassador perks</div>
          <div className="col" style={{ gap: 14 }}>
            {[
              { i: <I.crown />, t: "10% revenue share on every booking" },
              { i: <I.sparkle />, t: "Early access to new vendors & launches" },
              { i: <I.heart />, t: "$15 credit for the friend you invite" },
              { i: <I.star />, t: "Featured slot in the Discover feed monthly" },
            ].map((p, i) => (
              <div key={i} className="row-tight" style={{ gap: 12 }}>
                <span style={{ width: 32, height: 32, borderRadius: 8, background: "var(--accent-soft)", color: "var(--accent-ink)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                  {React.cloneElement(p.i, { size: 16 })}
                </span>
                <div style={{ fontSize: 13 }}>{p.t}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="card card-flush" style={{ gridColumn: "span 12" }}>
          <div className="row between" style={{ padding: "22px 22px 14px" }}>
            <div className="h3">Recent payouts</div>
            <S.Btn variant="ghost" size="sm">Statements</S.Btn>
          </div>
          <table className="tbl">
            <thead>
              <tr><th>Date</th><th>Period</th><th>Bookings driven</th><th>Method</th><th>Status</th><th className="col-num">Amount</th></tr>
            </thead>
            <tbody>
              {[
                { d: "Feb 1", p: "Jan 2026", n: 14, m: "Pamp credit", s: "Paid", st: "pos", a: 184.20 },
                { d: "Jan 1", p: "Dec 2025", n: 18, m: "PayPal ····42", s: "Paid", st: "pos", a: 248.80 },
                { d: "Dec 1", p: "Nov 2025", n: 12, m: "Pamp credit", s: "Paid", st: "pos", a: 156.40 },
              ].map((r, i) => (
                <tr key={i}>
                  <td className="mono">{r.d}</td>
                  <td className="muted">{r.p}</td>
                  <td className="mono">{r.n}</td>
                  <td className="muted">{r.m}</td>
                  <td><S.Chip tone={r.st}>{r.s}</S.Chip></td>
                  <td className="col-num mono" style={{ fontWeight: 500 }}>${r.a.toFixed(2)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function PampSectionHead({ num, title, sub }) {
  return (
    <div className="row" style={{ gap: 14, alignItems: "flex-end", marginBottom: 16, marginTop: 8 }}>
      <span className="mono" style={{
        fontSize: 11, letterSpacing: "0.12em", color: "var(--ink-3)",
        padding: "4px 9px", borderRadius: 6, background: "var(--surface-3)",
      }}>{num}</span>
      <div>
        <div className="h3" style={{ lineHeight: 1.1 }}>{title}</div>
        {sub && <div className="muted tiny" style={{ marginTop: 4 }}>{sub}</div>}
      </div>
    </div>
  );
}

function InviteStat({ label, value }) {
  return (
    <div style={{
      padding: "14px 16px", borderRadius: 12,
      background: "var(--surface-2)", border: "1px solid var(--border)",
    }}>
      <div className="eyebrow">{label}</div>
      <div className="display" style={{ fontSize: 24, marginTop: 4, lineHeight: 1 }}>{value}</div>
    </div>
  );
}

/* ====================================================================
   USER — SETTINGS
   ==================================================================== */
function UserSettings() {
  const [confirm, setConfirm] = React.useState(null);
  const sections = [
    { key: "profile", label: "Profile", icon: I.users, render: () => <window.ProfileSection kind="client" /> },
    { key: "email", label: "Change email", icon: I.mail, render: () => <window.EmailSection current="amelia@hey.com" /> },
    { key: "password", label: "Change password", icon: I.settings, render: () => <window.PasswordSection /> },
    { key: "notifications", label: "Notifications", icon: I.bell, render: () => <window.NotificationsSection kind="client" /> },
    { divider: true, label: "Legal", key: "_legal" },
    { key: "privacy", label: "Privacy Policy", icon: I.help, link: "https://pamp.app/legal/privacy" },
    { key: "terms-use", label: "Terms of Use", icon: I.help, link: "https://pamp.app/legal/terms-of-use" },
    { key: "terms-service", label: "Terms of Service", icon: I.help, link: "https://pamp.app/legal/terms-of-service" },
    { divider: true, label: "Account", key: "_danger" },
    { key: "danger", label: "Danger zone", icon: I.x, render: () => <window.DangerSection kind="client" openConfirm={setConfirm} /> },
  ];
  return <>
    <window.SettingsShell sections={sections} />
    <window.M.ConfirmModal
      open={!!confirm}
      onClose={() => setConfirm(null)}
      onConfirm={() => setConfirm(null)}
      title={confirm?.title}
      body={confirm?.body}
      confirmLabel={confirm?.cta}
      icon={confirm?.icon}
      danger={confirm?.tone === "danger"}
    />
  </>;
}

window.UserInfluencer = UserInfluencer;
window.UserSettings = UserSettings;

/* ====================================================================
   USER — REPORTS
   ==================================================================== */
function UserReports() {
  const [range, setRange] = React.useState("12m");
  return (
    <div className="page-enter">
      <window.DemoBanner feature="user reports" />
      <S.PageHead
        eyebrow="Your year on Pamp"
        title="Reports"
        sub="Where your time and money go — and what you can do with it."
        right={<>
          <div className="row-tight" style={{ background: "var(--surface-3)", padding: 3, borderRadius: 999 }}>
            {[{ k: "3m", l: "3 mo" }, { k: "6m", l: "6 mo" }, { k: "12m", l: "Year" }, { k: "all", l: "All time" }].map(r => (
              <button key={r.k} onClick={() => setRange(r.k)}
                className={`btn btn-sm ${range === r.k ? "btn-primary" : "btn-ghost"}`}
              >{r.l}</button>
            ))}
          </div>
          <S.Btn variant="outline" size="sm" icon={<I.download size={14} />}>Export PDF</S.Btn>
        </>}
      />

      <div className="grid-4" style={{ marginBottom: 20 }}>
        <S.Metric hero label="Total spent" value="$1,824" delta="+12% YoY" />
        <S.Metric label="Bookings" value="24" delta="+6 vs last year" />
        <S.Metric label="Vendors visited" value="9" />
        <S.Metric label="Avg. per visit" value="$76" delta="−$4" deltaTone="pos" />
      </div>

      <div className="grid-12">
        <div className="card" style={{ gridColumn: "span 8" }}>
          <div className="row between" style={{ marginBottom: 18 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 4 }}>Spend by month</div>
              <div className="h3">How you treat yourself</div>
            </div>
            <S.Btn variant="ghost" size="sm" iconRight={<I.chevD size={12} />}>By category</S.Btn>
          </div>
          <S.LineChart
            height={260}
            currency
            labels={["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan"]}
            series={[
              { color: "var(--accent)", data: [120, 142, 168, 154, 198, 184, 162, 218, 184, 142, 168, 184] },
              { color: "var(--ink-3)", data: [80, 110, 110, 142, 142, 154, 142, 168, 154, 142, 142, 142], dashed: true },
            ]}
          />
        </div>

        <div className="card" style={{ gridColumn: "span 4" }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>Categories</div>
          <div className="row" style={{ justifyContent: "center", marginBottom: 14 }}>
            <S.Ring value={68} size={140} stroke={14} label="9" sub="categories" />
          </div>
          <div className="col" style={{ gap: 10 }}>
            {[
              { l: "Hair & color", v: 42, n: "$762", c: "var(--accent)" },
              { l: "Spa & massage", v: 24, n: "$438", c: "var(--ink)" },
              { l: "Nails", v: 18, n: "$328", c: "var(--info)" },
              { l: "Facials", v: 12, n: "$218", c: "var(--warn)" },
              { l: "Other", v: 4, n: "$78", c: "var(--ink-3)" },
            ].map((r, i) => (
              <div key={i} className="row" style={{ gap: 10 }}>
                <span className="dot" style={{ background: r.c }} />
                <span style={{ flex: 1, fontSize: 13 }}>{r.l}</span>
                <span className="mono tiny muted">{r.v}%</span>
                <span className="mono" style={{ fontSize: 12, width: 48, textAlign: "right" }}>{r.n}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="card" style={{ gridColumn: "span 6" }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>Top vendors · this year</div>
          <div className="col" style={{ gap: 10 }}>
            {[
              { name: "Maison Color & Co.", visits: 8, spent: 624, fav: true },
              { name: "Forest Spa", visits: 5, spent: 380 },
              { name: "Atelier Nails", visits: 6, spent: 284 },
              { name: "Glow Skin Studio", visits: 3, spent: 218 },
            ].map((v, i) => (
              <div key={i} className="row" style={{ padding: 12, border: "1px solid var(--border)", borderRadius: 10 }}>
                <span style={{ width: 28, textAlign: "center", color: "var(--ink-4)" }} className="mono tiny">{String(i + 1).padStart(2, "0")}</span>
                <S.Avatar name={v.name} size="sm" />
                <div style={{ flex: 1, marginLeft: 4 }}>
                  <div className="row-tight" style={{ fontSize: 13, fontWeight: 500 }}>
                    {v.name} {v.fav && <I.heart size={12} color="var(--accent)" />}
                  </div>
                  <div className="muted tiny">{v.visits} visits</div>
                </div>
                <div className="mono" style={{ fontWeight: 500 }}>${v.spent}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="card" style={{ gridColumn: "span 6" }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>When you book</div>
          <div className="row" style={{ gap: 24, alignItems: "center", marginBottom: 18 }}>
            <div>
              <div className="display" style={{ fontSize: 32 }}>Saturday</div>
              <div className="muted tiny">Your favorite day</div>
            </div>
            <div>
              <div className="display" style={{ fontSize: 32 }}>2 PM</div>
              <div className="muted tiny">Most-booked time</div>
            </div>
          </div>
          <S.BarChart
            data={[2, 1, 3, 4, 3, 8, 3]}
            labels={["S", "M", "T", "W", "T", "F", "S"]}
            activeIndex={5}
            height={130}
          />
        </div>

        <div className="card" style={{ gridColumn: "span 12", padding: 28, background: "var(--ink)", color: "var(--bg)", borderColor: "transparent", position: "relative", overflow: "hidden" }}>
          <div style={{ position: "absolute", inset: 0, opacity: 0.6, background: "radial-gradient(circle at 90% 30%, var(--accent) 0%, transparent 50%)" }} />
          <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1fr auto", gap: 24, alignItems: "center" }}>
            <div>
              <div className="eyebrow" style={{ color: "var(--accent)", marginBottom: 8 }}>Insight · personal</div>
              <div className="display" style={{ fontSize: 32, lineHeight: 1.1, letterSpacing: "-0.025em", color: "var(--surface)", maxWidth: 720 }}>
                You spent <strong style={{ color: "var(--accent)" }}>32% less</strong> in winter than summer — and your color appointments cluster every 6 weeks like clockwork.
              </div>
              <div className="muted tiny" style={{ marginTop: 10, color: "oklch(80% 0.02 145)" }}>
                Based on 24 bookings across 9 vendors in 2025.
              </div>
            </div>
            <S.Btn variant="primary" iconRight={<I.arrowR size={14} />}>Get more insights</S.Btn>
          </div>
        </div>
      </div>
    </div>
  );
}

window.UserReports = UserReports;

/* ====================================================================
   USER — MY PLAN
   ==================================================================== */
function UserPlan() {
  return (
    <div className="page-enter">
      <window.DemoBanner feature="subscription plan" />
      <S.PageHead
        eyebrow="Subscription · active"
        title="My plan"
        sub="Your Pamp membership, billing cycle, and member perks."
        right={<>
          <S.Btn variant="outline" size="sm" icon={<I.download size={14} />}>Invoices</S.Btn>
          <S.Btn variant="primary" size="sm" iconRight={<I.arrowR size={14} />}>Upgrade plan</S.Btn>
        </>}
      />

      <div className="grid-12" style={{ marginBottom: 20 }}>
        {/* Hero plan card */}
        <div className="card" style={{ gridColumn: "span 8", background: "var(--ink)", color: "var(--bg)", borderColor: "transparent", position: "relative", overflow: "hidden", padding: 32 }}>
          <div style={{
            position: "absolute", inset: 0, opacity: 0.6,
            background: "radial-gradient(circle at 85% 15%, var(--accent) 0%, transparent 45%), radial-gradient(circle at 20% 90%, oklch(55% 0.16 320) 0%, transparent 50%)",
            filter: "blur(40px)",
          }} />
          <div style={{ position: "relative", zIndex: 1 }}>
            <div className="row between">
              <div className="eyebrow" style={{ color: "oklch(80% 0.04 290)" }}>Current plan</div>
              <S.Chip tone="accent" icon={<span className="dot" style={{ background: "var(--accent)" }} />}>Active</S.Chip>
            </div>
            <div className="display" style={{ fontSize: 56, letterSpacing: "-0.035em", lineHeight: 1, margin: "18px 0 4px", color: "var(--bg)" }}>
              Pamp Gold
            </div>
            <div className="muted" style={{ color: "oklch(82% 0.02 145)", fontSize: 14 }}>
              $24<span style={{ opacity: 0.6 }}> / month</span> · billed monthly · auto-renews
            </div>

            <div className="row" style={{ gap: 32, marginTop: 32 }}>
              <div>
                <div className="muted tiny" style={{ color: "oklch(75% 0.02 145)" }}>Billing cycle</div>
                <div style={{ fontSize: 18, marginTop: 6, fontWeight: 500 }}>Monthly</div>
              </div>
              <div style={{ width: 1, background: "oklch(100% 0 0 / 0.12)" }} />
              <div>
                <div className="muted tiny" style={{ color: "oklch(75% 0.02 145)" }}>Member since</div>
                <div style={{ fontSize: 18, marginTop: 6, fontWeight: 500 }}>Mar 14, 2024</div>
              </div>
              <div style={{ width: 1, background: "oklch(100% 0 0 / 0.12)" }} />
              <div>
                <div className="muted tiny" style={{ color: "oklch(75% 0.02 145)" }}>Renews on</div>
                <div style={{ fontSize: 18, marginTop: 6, fontWeight: 500 }}>Mar 14, 2026</div>
              </div>
            </div>

            <div className="row" style={{ marginTop: 32, gap: 8 }}>
              <S.Btn variant="primary" style={{ background: "white", color: "var(--ink)" }} iconRight={<I.arrowR size={14} />}>Upgrade to Platinum</S.Btn>
              <S.Btn variant="ghost" style={{ color: "var(--bg)", background: "oklch(100% 0 0 / 0.10)" }}>Manage billing</S.Btn>
              <S.Btn variant="ghost" style={{ color: "var(--bg)", background: "oklch(100% 0 0 / 0.10)" }}>Cancel</S.Btn>
            </div>
          </div>
        </div>

        {/* Side stats */}
        <div className="col" style={{ gridColumn: "span 4", gap: 20 }}>
          <div className="card">
            <div className="eyebrow" style={{ marginBottom: 8 }}>Next payment</div>
            <div className="display" style={{ fontSize: 32, letterSpacing: "-0.02em" }}>$24.00</div>
            <div className="muted tiny" style={{ marginTop: 6 }}>Mar 14, 2026 · Visa ····4821</div>
            <div className="divider" style={{ margin: "16px 0" }} />
            <div className="row between">
              <span className="tiny muted">Days remaining</span>
              <span style={{ fontWeight: 500 }}>18 days</span>
            </div>
            <div className="bar" style={{ marginTop: 10 }}><span style={{ width: "40%" }} /></div>
          </div>
          <div className="card">
            <div className="eyebrow" style={{ marginBottom: 8 }}>Member savings</div>
            <div className="display" style={{ fontSize: 32, letterSpacing: "-0.02em" }}>$184</div>
            <div className="muted tiny" style={{ marginTop: 6 }}>Saved on appointments this year</div>
            <div className="row-tight" style={{ marginTop: 14 }}>
              <S.Chip tone="pos">+$42 vs last year</S.Chip>
            </div>
          </div>
        </div>
      </div>

      {/* Perks + comparison */}
      <div className="grid-12" style={{ marginBottom: 20 }}>
        <div className="card" style={{ gridColumn: "span 8" }}>
          <div className="row between" style={{ marginBottom: 18 }}>
            <div>
              <div className="h3">What's included</div>
              <div className="muted tiny" style={{ marginTop: 4 }}>Your Gold member benefits at every booking.</div>
            </div>
            <S.Chip tone="accent">5 perks active</S.Chip>
          </div>
          <div className="grid-2" style={{ gap: 12 }}>
            {[
              { i: <I.sparkle size={16} />, t: "10% off all bookings", d: "Auto-applied at checkout, every vendor." },
              { i: <I.clock size={16} />, t: "Priority booking windows", d: "See peak slots 24h before non-members." },
              { i: <I.heart size={16} />, t: "Unlimited favorites", d: "Save as many studios as you'd like." },
              { i: <I.bell size={16} />, t: "Cancellation flexibility", d: "Reschedule free up to 4h before." },
              { i: <I.wallet size={16} />, t: "$5 monthly wallet credit", d: "Stacks if unused. Currently $15." },
              { i: <I.crown size={16} />, t: "Gold concierge", d: "Chat support, 4-min median response." },
            ].map((p, i) => (
              <div key={i} className="row" style={{ gap: 12, padding: 14, border: "1px solid var(--border)", borderRadius: 12 }}>
                <span style={{
                  width: 36, height: 36, borderRadius: 10, flexShrink: 0,
                  background: "var(--accent-soft)", color: "var(--accent-ink)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                }}>{p.i}</span>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontWeight: 500, fontSize: 13.5 }}>{p.t}</div>
                  <div className="muted tiny" style={{ marginTop: 2 }}>{p.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="card" style={{ gridColumn: "span 4" }}>
          <div className="eyebrow" style={{ marginBottom: 6 }}>Compare</div>
          <div className="h3" style={{ marginBottom: 18 }}>Upgrade to Platinum</div>
          <div className="display" style={{ fontSize: 32, letterSpacing: "-0.02em" }}>$49<span className="muted" style={{ fontSize: 14, fontWeight: 400 }}> / mo</span></div>
          <div className="muted tiny" style={{ marginTop: 6 }}>Or $480/year — save $108.</div>
          <div className="divider" style={{ margin: "18px 0" }} />
          <div className="col" style={{ gap: 10 }}>
            {[
              "Everything in Gold",
              "20% off every booking",
              "$25 monthly wallet credit",
              "Free same-day reschedule",
              "Member-only events",
            ].map((f, i) => (
              <div key={i} className="row-tight" style={{ fontSize: 13 }}>
                <span style={{ color: "var(--accent)", display: "inline-flex" }}><I.check size={14} /></span>{f}
              </div>
            ))}
          </div>
          <S.Btn variant="primary" iconRight={<I.arrowR size={14} />} style={{ width: "100%", marginTop: 20 }}>Upgrade now</S.Btn>
        </div>
      </div>

      {/* Billing history */}
      <div className="card card-flush">
        <div className="row between" style={{ padding: "22px 22px 14px" }}>
          <div>
            <div className="h3">Billing history</div>
            <div className="muted tiny" style={{ marginTop: 4 }}>All payments and invoices.</div>
          </div>
          <S.Btn variant="ghost" size="sm" icon={<I.download size={12} />}>Download all</S.Btn>
        </div>
        <table className="tbl">
          <thead><tr><th>Date</th><th>Description</th><th>Method</th><th>Status</th><th className="col-num">Amount</th><th /></tr></thead>
          <tbody>
            {[
              { d: "Feb 14, 2026", desc: "Pamp Gold · monthly", m: "Visa ····4821", s: "Paid", n: 24 },
              { d: "Jan 14, 2026", desc: "Pamp Gold · monthly", m: "Visa ····4821", s: "Paid", n: 24 },
              { d: "Dec 14, 2025", desc: "Pamp Gold · monthly", m: "Visa ····4821", s: "Paid", n: 24 },
              { d: "Nov 14, 2025", desc: "Pamp Gold · monthly", m: "Visa ····4821", s: "Paid", n: 24 },
              { d: "Oct 14, 2025", desc: "Pamp Gold · monthly", m: "Visa ····4821", s: "Paid", n: 24 },
            ].map((r, i) => (
              <tr key={i}>
                <td className="mono">{r.d}</td>
                <td>{r.desc}</td>
                <td className="muted">{r.m}</td>
                <td><S.Chip tone="pos">{r.s}</S.Chip></td>
                <td className="col-num mono" style={{ fontWeight: 500 }}>${r.n.toFixed(2)}</td>
                <td><S.IconBtn title="Download invoice"><I.download size={14} /></S.IconBtn></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}