/* Mereka v2 — Hub dashboard pages */

/* ============ HUB OVERVIEW ============ */
function HubOverviewPage() {
  return (
    <HubShell route="/app/hub/overview" withSidebar>
      <div className="flex items-start justify-between gap-6 mb-8 flex-wrap">
        <div>
          <h1 className="text-[28px] lg:text-[32px] font-bold text-neutral-900 leading-tight">
            Welcome to your dashboard,
          </h1>
          <div className="flex items-center gap-4 mt-1">
            <span className="text-[28px] lg:text-[32px] font-bold">Kraf KL Studio</span>
            <Link to="/app/hub/settings/account" className="text-primary text-sm font-medium hover:underline inline-flex items-center gap-1">
              View profile <Icon name="arrowUpRight" size={14} />
            </Link>
          </div>
        </div>

        <Card className="flex items-center gap-5 min-w-[300px]">
          <div className="w-14 h-14 bg-neutral-100 rounded-xl flex items-center justify-center text-neutral-700">
            <Icon name="dollar" size={22} />
          </div>
          <div className="flex-1">
            <p className="text-sm text-neutral-500">Earned with Mereka</p>
            <p className="text-2xl font-bold num-tabular">RM 24,860</p>
            <Link to="/app/hub/settings/transactions" className="text-primary text-xs font-medium hover:underline">Manage →</Link>
          </div>
        </Card>
      </div>

      <section className="mb-10">
        <div className="flex items-center justify-between mb-5">
          <h2 className="text-lg font-semibold">Setup your profile</h2>
          <div className="flex items-center gap-2">
            <button className="w-9 h-9 rounded-full border border-neutral-200 flex items-center justify-center hover:bg-neutral-50"><Icon name="chevronLeft" size={14} /></button>
            <button className="w-9 h-9 rounded-full border border-neutral-200 flex items-center justify-center hover:bg-neutral-50"><Icon name="chevronRight" size={14} /></button>
          </div>
        </div>
        <div className="grid lg:grid-cols-2 gap-4">
          {[
            { t: 'Add work experience', d: 'Showcase what your hub has shipped. Clients love specifics.', cta: 'Add experience', tone: 'amber' },
            { t: 'Verify your identity', d: 'Verified hubs get 4× more bookings on average.', cta: 'Verify now', tone: 'blue' },
          ].map((p, i) => (
            <Card key={i} className="relative">
              <button className="absolute top-3 right-3 text-neutral-400 hover:text-neutral-600"><Icon name="close" size={16} /></button>
              <div className="flex gap-4">
                <div className={`w-24 h-24 rounded-xl flex items-center justify-center ${p.tone === 'amber' ? 'bg-amber-100' : 'bg-blue-100'}`}>
                  <Icon name={i === 0 ? 'briefcase' : 'shield'} size={32} className={p.tone === 'amber' ? 'text-amber-700' : 'text-blue-700'} />
                </div>
                <div className="flex-1">
                  <h3 className="font-bold mb-1">{p.t}</h3>
                  <p className="text-sm text-neutral-500 mb-4 leading-relaxed">{p.d}</p>
                  <Button variant="secondary" size="sm">{p.cta}</Button>
                </div>
              </div>
            </Card>
          ))}
        </div>
        <Progress value={50} className="mt-5" />
      </section>

      <section className="mb-10">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-lg font-semibold">My listings</h2>
          <Link to="/app/onboarding/experience/select-type">
            <Button variant="dark" size="sm" leftIcon="plus">Add new listing</Button>
          </Link>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {[
            { c: 14, label: 'Expertise', icon: 'briefcase', bg: 'bg-neutral-100' },
            { c: 8, label: 'Experiences', icon: 'compass', bg: 'bg-blue-50', accent: true },
            { c: 6, label: 'Chats open', icon: 'message', bg: 'bg-purple-50' },
            { c: 0, label: 'Programs', icon: 'building', bg: 'bg-neutral-100', locked: true },
          ].map((l, i) => (
            <Card key={i} className={l.locked ? 'opacity-60 relative' : 'relative'}>
              <div className="flex items-center gap-4">
                <div className={`w-12 h-12 rounded-lg flex items-center justify-center ${l.bg}`}>
                  <Icon name={l.icon} size={20} className={l.accent ? 'text-blue-600' : 'text-neutral-600'} />
                </div>
                <div>
                  <p className="text-2xl font-bold num-tabular">{l.c}</p>
                  <p className="text-sm text-neutral-500">{l.label}</p>
                </div>
              </div>
              {l.locked && <span className="absolute bottom-2 right-2 px-2 py-1 bg-neutral-900 text-white text-[11px] font-medium rounded">Unlock</span>}
            </Card>
          ))}
        </div>
      </section>

      <section className="mb-10">
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-3">
            <h2 className="text-lg font-semibold">Active orders</h2>
            <div className="flex items-center gap-2 px-3 py-1 border border-neutral-200 rounded-full">
              <span className="w-5 h-5 bg-teal-500 text-white text-xs font-bold rounded flex items-center justify-center">7</span>
              <span className="text-sm font-medium">RM 12,640</span>
            </div>
          </div>
          <Link to="/app/hub/bookings">
            <Button variant="secondary" size="sm" rightIcon="arrowUpRight">Manage orders</Button>
          </Link>
        </div>

        <Card padding="p-0" className="mb-3">
          <div className="px-5 py-3 flex items-center gap-2 font-semibold text-sm">
            <Icon name="chevronDown" size={14} className="text-neutral-500" />
            Service requests
          </div>
          <table className="w-full text-sm">
            <thead>
              <tr className="bg-neutral-50 border-y border-neutral-100 text-xs uppercase tracking-wide text-neutral-500">
                <th className="text-left px-5 py-2.5 font-semibold">Contact</th>
                <th className="text-left px-5 py-2.5 font-semibold">Expertise</th>
                <th className="text-left px-5 py-2.5 font-semibold">Date &amp; time</th>
                <th className="text-left px-5 py-2.5 font-semibold">Mode</th>
                <th className="text-left px-5 py-2.5 font-semibold">Paid amount</th>
                <th className="text-left px-5 py-2.5 font-semibold">Actions</th>
              </tr>
            </thead>
            <tbody>
              {[
                { n: 'Aisyah Lim', e: 'aisyah@lumi.co', s: 'Brand Identity Sprint', dt: 'May 25 · 3:00 PM', m: 'Online', a: 'RM 2,800' },
                { n: 'Jeff Cheong', e: 'jeff@hauz.capital', s: 'UX Audit', dt: 'May 27 · 11:00 AM', m: 'Online', a: 'RM 1,260' },
                { n: 'Priya Naidu', e: 'priya@green.io', s: 'ESG Setup', dt: 'Jun 02 · 2:00 PM', m: 'Hybrid', a: 'RM 6,000' },
              ].map((r, i) => (
                <tr key={i} className="border-b border-neutral-100 last:border-0">
                  <td className="px-5 py-3">
                    <div className="flex items-center gap-3">
                      <Avatar name={r.n} size={32} />
                      <div>
                        <div className="font-medium">{r.n}</div>
                        <div className="text-xs text-neutral-500">{r.e}</div>
                      </div>
                    </div>
                  </td>
                  <td className="px-5 py-3">{r.s}</td>
                  <td className="px-5 py-3">{r.dt}</td>
                  <td className="px-5 py-3">{r.m}</td>
                  <td className="px-5 py-3 font-medium num-tabular">{r.a}</td>
                  <td className="px-5 py-3"><a className="text-primary font-medium hover:underline cursor-pointer">View</a></td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>

        <Card padding="p-0">
          <div className="px-5 py-3 flex items-center gap-2 font-semibold text-sm">
            <Icon name="chevronDown" size={14} className="text-neutral-500" />
            Experience bookings
          </div>
          <table className="w-full text-sm">
            <thead>
              <tr className="bg-neutral-50 border-y border-neutral-100 text-xs uppercase tracking-wide text-neutral-500">
                <th className="text-left px-5 py-2.5 font-semibold">Listing</th>
                <th className="text-left px-5 py-2.5 font-semibold">Status</th>
                <th className="text-left px-5 py-2.5 font-semibold">Last booked</th>
                <th className="text-left px-5 py-2.5 font-semibold">Tickets</th>
                <th className="text-left px-5 py-2.5 font-semibold">Profit</th>
                <th className="text-left px-5 py-2.5 font-semibold">Actions</th>
              </tr>
            </thead>
            <tbody>
              {EXPERIENCES.slice(0, 3).map((e, i) => (
                <tr key={e.id} className="border-b border-neutral-100 last:border-0">
                  <td className="px-5 py-3">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-lg ph-grad flex-shrink-0" />
                      <span className="font-medium">{e.title}</span>
                    </div>
                  </td>
                  <td className="px-5 py-3"><Badge tone="success">Active</Badge></td>
                  <td className="px-5 py-3">2 days ago</td>
                  <td className="px-5 py-3 num-tabular">{12 - i * 3}</td>
                  <td className="px-5 py-3 font-medium num-tabular">RM {((12 - i * 3) * 180).toLocaleString()}</td>
                  <td className="px-5 py-3"><a className="text-primary font-medium hover:underline cursor-pointer">View</a></td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
      </section>

      <section className="rounded-2xl overflow-hidden bg-gradient-to-br from-primary via-[#2d2348] to-primary p-12 text-center relative">
        <div className="absolute inset-0 overflow-hidden">
          <div className="absolute top-0 left-1/4 w-96 h-96 bg-purple-500/15 rounded-full blur-3xl" />
          <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-blue-500/15 rounded-full blur-3xl" />
        </div>
        <div className="relative">
          <h2 className="text-3xl font-bold text-white mb-3">Resources</h2>
          <p className="text-white/80 mb-6">Access relevant resources for creative and digital economy growth.</p>
          <Button variant="secondary" size="lg">Discover Academy</Button>
        </div>
      </section>
    </HubShell>
  );
}

/* ============ HUB CALENDAR ============ */
function HubCalendarPage() {
  const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
  const hours = Array.from({ length: 10 }, (_, i) => i + 8); // 8am-5pm
  const events = [
    { d: 0, s: 9, e: 10.5, t: 'Standup', tone: 'bg-blue-100 text-blue-800 border-blue-200' },
    { d: 1, s: 14, e: 15, t: 'UX Audit · Jeff', tone: 'bg-purple-100 text-purple-800 border-purple-200' },
    { d: 2, s: 10, e: 12, t: 'Brand Sprint · Aisyah', tone: 'bg-green-100 text-green-800 border-green-200' },
    { d: 3, s: 13, e: 14, t: 'Mentoring · Priya', tone: 'bg-amber-100 text-amber-800 border-amber-200' },
    { d: 5, s: 10, e: 13, t: 'Batik Workshop · 6 ppl', tone: 'bg-rose-100 text-rose-800 border-rose-200' },
    { d: 5, s: 14, e: 17, t: 'Sourdough Class · 8 ppl', tone: 'bg-orange-100 text-orange-800 border-orange-200' },
  ];
  return (
    <HubShell route="/app/hub/calendar" title="Calendar"
      action={
        <div className="flex items-center gap-2">
          <Button variant="secondary" size="sm" leftIcon="chevronLeft">Prev</Button>
          <Button variant="secondary" size="sm">Today</Button>
          <Button variant="secondary" size="sm" rightIcon="chevronRight">Next</Button>
          <Button variant="dark" size="sm" leftIcon="plus">Add event</Button>
        </div>
      }>
      <Card padding="p-0" className="overflow-hidden">
        <div className="px-5 py-3 border-b border-neutral-200 flex items-center justify-between">
          <div>
            <div className="font-semibold">May 18 – 24, 2026</div>
            <div className="text-xs text-neutral-500">Week 21</div>
          </div>
          <div className="flex bg-neutral-100 rounded-full p-1">
            {['Day', 'Week', 'Month'].map((v, i) => (
              <button key={v} className={`px-4 py-1 text-xs font-medium rounded-full ${v === 'Week' ? 'bg-white shadow-sm' : 'text-neutral-500'}`}>{v}</button>
            ))}
          </div>
        </div>
        <div className="grid grid-cols-1 lg:grid-cols-[60px_repeat(7,_1fr)] border-b border-neutral-200">
          <div />
          {days.map((d, i) => (
            <div key={d} className={`text-center py-2 text-xs font-semibold ${i === 0 ? 'text-primary' : 'text-neutral-700'}`}>
              {d} <span className="text-neutral-400 ml-1 font-normal">{18 + i}</span>
            </div>
          ))}
        </div>
        <div className="relative grid grid-cols-1 lg:grid-cols-[60px_repeat(7,_1fr)]">
          <div className="border-r border-neutral-200">
            {hours.map(h => (
              <div key={h} className="h-14 text-xs text-neutral-400 text-right pr-2 pt-1 border-b border-neutral-100">
                {h}:00
              </div>
            ))}
          </div>
          {days.map((_, di) => (
            <div key={di} className="relative border-r border-neutral-200 last:border-0">
              {hours.map(h => <div key={h} className="h-14 border-b border-neutral-100" />)}
              {events.filter(e => e.d === di).map((e, i) => {
                const top = (e.s - 8) * 56;
                const height = (e.e - e.s) * 56;
                return (
                  <div key={i} className={`absolute left-1 right-1 rounded-md border ${e.tone} px-2 py-1 text-[11px] font-semibold`}
                       style={{ top: top + 'px', height: height + 'px' }}>
                    {e.t}
                  </div>
                );
              })}
            </div>
          ))}
        </div>
      </Card>
    </HubShell>
  );
}

/* ============ HUB BOOKINGS ============ */
function HubBookingsPage() {
  const bookings = [
    { id: 'BK-3019', client: 'Aisyah Lim', item: 'Brand Identity Sprint — Milestone 1', date: 'May 25 · 3:00 PM', amount: 'RM 2,800', status: 'In progress' },
    { id: 'BK-3018', client: 'Jeff Cheong', item: 'UX Audit — Initial call', date: 'May 27 · 11:00 AM', amount: 'RM 1,260', status: 'Scheduled' },
    { id: 'BK-3017', client: 'Priya Naidu', item: 'ESG Setup — Kickoff', date: 'Jun 2 · 2:00 PM', amount: 'RM 6,000', status: 'Scheduled' },
    { id: 'BK-3016', client: 'Marcus Ooi', item: 'Growth Diagnostic — Workshop', date: 'May 20 · 9:00 AM', amount: 'RM 1,200', status: 'In progress' },
    { id: 'BK-3015', client: 'Tasha Lim', item: 'Content Playbook — Session 2', date: 'May 14 · 4:00 PM', amount: 'RM 800', status: 'Completed' },
    { id: 'BK-3014', client: 'Sara Daud', item: 'Brand Workshop (group of 6)', date: 'May 10 · 10:00 AM', amount: 'RM 3,400', status: 'Completed' },
  ];
  const statusTone = { 'In progress': 'info', 'Scheduled': 'warning', 'Completed': 'success' };
  return (
    <HubShell route="/app/hub/bookings" title="Bookings"
      action={<div className="flex gap-2">
        <Button variant="secondary" size="sm" leftIcon="download">Export</Button>
        <Button variant="dark" size="sm" leftIcon="plus">Add booking</Button>
      </div>}>
      <Tabs items={[
        { value: 'all', label: 'All', count: 6 },
        { value: 'scheduled', label: 'Scheduled', count: 2 },
        { value: 'progress', label: 'In progress', count: 2 },
        { value: 'completed', label: 'Completed', count: 2 },
        { value: 'cancelled', label: 'Cancelled', count: 0 },
      ]} value="all" onChange={() => {}} className="mb-4" />
      <div className="flex items-center gap-2 mb-4 flex-wrap">
        <SearchInput placeholder="Search bookings or clients…" size="sm" className="max-w-xs" />
        <Chip>Service requests</Chip>
        <Chip>Experience bookings</Chip>
        <div className="flex-1" />
        <select className="text-sm border border-neutral-300 rounded-full px-4 py-1.5 bg-white">
          <option>Newest first</option><option>Oldest first</option><option>Highest amount</option>
        </select>
      </div>
      <Card padding="p-0">
        <table className="w-full text-sm">
          <thead>
            <tr className="bg-neutral-50 border-b border-neutral-200 text-xs uppercase tracking-wide text-neutral-500">
              <th className="text-left px-5 py-3 font-semibold">Reference</th>
              <th className="text-left px-5 py-3 font-semibold">Client</th>
              <th className="text-left px-5 py-3 font-semibold">Item</th>
              <th className="text-left px-5 py-3 font-semibold">Date</th>
              <th className="text-right px-5 py-3 font-semibold">Amount</th>
              <th className="text-left px-5 py-3 font-semibold">Status</th>
              <th />
            </tr>
          </thead>
          <tbody>
            {bookings.map(b => (
              <tr key={b.id} className="border-b border-neutral-100 last:border-0 hover:bg-neutral-50">
                <td className="px-5 py-3 font-mono text-xs text-neutral-500">{b.id}</td>
                <td className="px-5 py-3">
                  <div className="flex items-center gap-2">
                    <Avatar name={b.client} size={28} />
                    <span className="font-medium">{b.client}</span>
                  </div>
                </td>
                <td className="px-5 py-3">{b.item}</td>
                <td className="px-5 py-3 text-neutral-600">{b.date}</td>
                <td className="px-5 py-3 text-right font-semibold num-tabular">{b.amount}</td>
                <td className="px-5 py-3"><Badge tone={statusTone[b.status]}>{b.status}</Badge></td>
                <td className="px-5 py-3"><Icon name="chevronRight" size={14} className="text-neutral-400" /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </HubShell>
  );
}

/* ============ HUB CHATS ============ */
function HubChatsPage() {
  // Reuse the user chats look but in hub shell
  return (
    <HubShell route="/app/hub/chats" title="Chats">
      <Card padding="p-0" className="overflow-hidden h-[680px] flex">
        <div className="w-[320px] border-r border-neutral-200 flex flex-col">
          <div className="p-3 border-b border-neutral-200 space-y-2">
            <SearchInput placeholder="Search clients & bookings…" size="sm" />
            <div className="flex gap-1">
              <Chip active>All</Chip><Chip>Unread</Chip><Chip>Booked</Chip>
            </div>
          </div>
          <div className="flex-1 overflow-y-auto scrollbar-thin">
            {[
              { id: 1, n: 'Aisyah Lim', l: 'Sharing the brand brief now.', t: '12m', u: 2 },
              { id: 2, n: 'Jeff Cheong', l: 'Sounds good — confirm tomorrow.', t: '1h', u: 0 },
              { id: 3, n: 'Priya Naidu', l: 'I\'ve attached the ESG data.', t: '3h', u: 1 },
              { id: 4, n: 'Marcus Ooi', l: 'Looking forward to Monday!', t: '1d', u: 0 },
              { id: 5, n: 'Tasha Lim', l: 'Thanks for the playbook 🙌', t: '2d', u: 0 },
              { id: 6, n: 'Sara Daud', l: 'Receipt received — all good.', t: '4d', u: 0 },
            ].map((t, i) => (
              <button key={t.id} className={`w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-50 text-left border-b border-neutral-100 ${i === 0 ? 'bg-neutral-50' : ''}`}>
                <Avatar name={t.n} size={40} />
                <div className="flex-1 min-w-0">
                  <div className="flex items-center justify-between">
                    <span className="text-sm font-semibold truncate">{t.n}</span>
                    <span className="text-xs text-neutral-400">{t.t}</span>
                  </div>
                  <div className="flex items-center justify-between mt-0.5">
                    <span className="text-xs text-neutral-500 truncate pr-2">{t.l}</span>
                    {t.u > 0 && <span className="w-5 h-5 bg-primary text-white text-[11px] rounded-full flex items-center justify-center">{t.u}</span>}
                  </div>
                </div>
              </button>
            ))}
          </div>
        </div>

        <div className="flex-1 flex flex-col">
          <div className="px-5 py-3 border-b border-neutral-200 flex items-center gap-3">
            <Avatar name="Aisyah Lim" size={36} />
            <div className="flex-1">
              <div className="text-sm font-semibold">Aisyah Lim</div>
              <div className="text-xs text-neutral-500">Brand Identity Sprint · In progress</div>
            </div>
            <Button variant="secondary" size="sm">View booking</Button>
          </div>
          <div className="flex-1 overflow-y-auto p-5 space-y-3 bg-neutral-50">
            <MsgBubble side="them" name="Aisyah Lim">Hi! Excited to kick off next week.</MsgBubble>
            <MsgBubble side="me">Same here — I'm sending over the discovery questionnaire shortly.</MsgBubble>
            <MsgBubble side="them" name="Aisyah Lim">Got it, will fill it in tonight.</MsgBubble>
            <MsgBubble side="them" name="Aisyah Lim">Sharing the brand brief now.</MsgBubble>
            <div className="flex items-center gap-2 mx-auto py-2 px-3 bg-white rounded-lg border border-neutral-200 text-xs text-neutral-600 max-w-xs">
              <Icon name="paperclip" size={14} /> brand-brief-v1.pdf · 2.4 MB
            </div>
          </div>
          <div className="p-3 border-t border-neutral-200 flex items-center gap-2">
            <button className="p-2 text-neutral-500"><Icon name="paperclip" size={18} /></button>
            <input className="flex-1 h-10 px-4 rounded-full bg-neutral-100 text-sm focus:outline-none" placeholder="Reply to Aisyah…" />
            <button className="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center"><Icon name="send" size={16} /></button>
          </div>
        </div>
      </Card>
    </HubShell>
  );
}

/* ============ HUB ANALYTICS ============ */
function HubAnalyticsPage() {
  // Build a simple SVG bar chart for revenue & line for visits
  return (
    <HubShell route="/app/hub/analytics" title="Analytics"
      action={
        <div className="flex items-center gap-2">
          <select className="text-sm border border-neutral-300 rounded-full px-4 py-1.5 bg-white">
            <option>Last 30 days</option><option>Last 90 days</option><option>This year</option>
          </select>
          <Button variant="secondary" size="sm" leftIcon="download">Export</Button>
        </div>
      }>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <Metric label="Revenue" value="RM 24,860" delta="+18%" trend="up" />
        <Metric label="Bookings" value="34" delta="+6" trend="up" />
        <Metric label="Avg. order value" value="RM 731" delta="-3%" trend="down" />
        <Metric label="Repeat rate" value="42%" delta="+4%" trend="up" />
      </div>

      <div className="grid lg:grid-cols-3 gap-6 mb-6">
        <Card className="lg:col-span-2">
          <div className="flex items-center justify-between mb-4">
            <h3 className="font-semibold">Revenue by week</h3>
            <Tabs items={[{ value: 'rev', label: 'Revenue' }, { value: 'b', label: 'Bookings' }, { value: 'v', label: 'Visits' }]} value="rev" onChange={() => {}} />
          </div>
          <BarChart />
        </Card>
        <Card>
          <h3 className="font-semibold mb-4">Top listings</h3>
          <div className="space-y-3">
            {EXPERIENCES.slice(0, 4).map((e, i) => {
              const pct = [82, 64, 48, 26][i];
              return (
                <div key={e.id}>
                  <div className="flex items-center justify-between text-sm mb-1">
                    <span className="truncate pr-2">{e.title}</span>
                    <span className="font-semibold num-tabular">{pct}%</span>
                  </div>
                  <Progress value={pct} tone="purple" />
                </div>
              );
            })}
          </div>
        </Card>
      </div>

      <div className="grid lg:grid-cols-2 gap-6">
        <Card>
          <h3 className="font-semibold mb-4">Where bookings come from</h3>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            {[
              { src: 'Direct', n: '42%' }, { src: 'Search', n: '28%' },
              { src: 'Programs', n: '18%' }, { src: 'Referral', n: '12%' },
            ].map(s => (
              <div key={s.src} className="p-4 rounded-lg bg-neutral-50">
                <div className="text-xs text-neutral-500">{s.src}</div>
                <div className="text-2xl font-bold mt-1 num-tabular">{s.n}</div>
              </div>
            ))}
          </div>
        </Card>
        <Card>
          <h3 className="font-semibold mb-4">Reviews this month</h3>
          <div className="flex items-center gap-4">
            <div className="text-5xl font-bold num-tabular">4.9</div>
            <div className="flex-1 space-y-1">
              {[5, 4, 3, 2, 1].map(n => (
                <div key={n} className="flex items-center gap-2 text-xs">
                  <span className="w-4 text-neutral-500">{n}★</span>
                  <Progress value={n === 5 ? 80 : n === 4 ? 16 : n === 3 ? 4 : 0} tone="dark" className="flex-1" />
                  <span className="w-8 text-right num-tabular">{n === 5 ? 24 : n === 4 ? 5 : n === 3 ? 1 : 0}</span>
                </div>
              ))}
            </div>
          </div>
        </Card>
      </div>
    </HubShell>
  );
}

function Metric({ label, value, delta, trend }) {
  return (
    <Card>
      <div className="text-sm text-neutral-500">{label}</div>
      <div className="text-2xl font-bold mt-1 num-tabular">{value}</div>
      <div className={`text-xs mt-1 inline-flex items-center gap-1 ${trend === 'up' ? 'text-green-600' : 'text-red-600'}`}>
        <Icon name={trend === 'up' ? 'trending' : 'trending'} size={12} className={trend === 'down' ? 'rotate-180' : ''} /> {delta}
      </div>
    </Card>
  );
}

function BarChart() {
  const weeks = ['W14', 'W15', 'W16', 'W17', 'W18', 'W19', 'W20', 'W21'];
  const values = [4200, 5800, 5400, 7100, 6300, 8400, 7800, 9200];
  const max = Math.max(...values);
  return (
    <div className="h-56 flex items-end gap-3 pt-4">
      {weeks.map((w, i) => {
        const h = (values[i] / max) * 100;
        return (
          <div key={w} className="flex-1 flex flex-col items-center gap-2">
            <div className="w-full bg-primary rounded-t-lg hover:bg-primary/80 transition-colors relative group" style={{ height: h + '%' }}>
              <div className="absolute -top-7 left-1/2 -translate-x-1/2 px-2 py-0.5 bg-neutral-900 text-white text-[11px] rounded opacity-0 group-hover:opacity-100 whitespace-nowrap">
                RM {values[i].toLocaleString()}
              </div>
            </div>
            <span className="text-[11px] text-neutral-500">{w}</span>
          </div>
        );
      })}
    </div>
  );
}

/* ============ HUB NOTIFICATIONS ============ */
function HubNotificationsPage() {
  return (
    <HubShell route="/app/hub/notifications" title="Notifications">
      <Card padding="p-0">
        {[
          { ic: 'briefcase', t: 'New booking', d: 'Aisyah Lim booked Brand Identity Sprint — RM 2,800.', time: '5m', unread: true },
          { ic: 'chat', t: 'Message from Jeff Cheong', d: '"Confirming our 11am call on Wed."', time: '1h', unread: true },
          { ic: 'star', t: 'New review', d: 'Tasha Lim left a 5★ review on Content Playbook.', time: '4h' },
          { ic: 'dollar', t: 'Payout sent', d: 'RM 4,200 sent to Maybank •••• 2891.', time: '1d' },
          { ic: 'spark', t: 'Listing milestone', d: 'Batik Workshop hit 50 bookings — share it.', time: '2d' },
        ].map((n, i) => (
          <div key={i} className={`flex items-start gap-3 px-5 py-4 border-b border-neutral-100 last:border-0 ${n.unread ? 'bg-primary/5' : ''}`}>
            <div className="w-9 h-9 rounded-full bg-neutral-100 flex items-center justify-center flex-shrink-0">
              <Icon name={n.ic} size={16} />
            </div>
            <div className="flex-1">
              <div className="flex items-center gap-2">
                <span className="text-sm font-semibold">{n.t}</span>
                {n.unread && <span className="w-1.5 h-1.5 bg-primary rounded-full" />}
              </div>
              <p className="text-sm text-neutral-600 mt-0.5">{n.d}</p>
              <p className="text-xs text-neutral-400 mt-1">{n.time} ago</p>
            </div>
          </div>
        ))}
      </Card>
    </HubShell>
  );
}

/* ============ SERVICES — EXPERIENCES ============ */
function HubServicesExperiencesPage() {
  return (
    <HubShell route="/app/hub/services/experiences" title="Experiences"
      action={
        <Link to="/app/onboarding/experience/select-type">
          <Button variant="dark" leftIcon="plus">Add experience</Button>
        </Link>
      }>
      <div className="flex items-center gap-2 mb-4">
        <Link to="/app/hub/services/experiences" className="px-3 py-1.5 rounded-full text-sm font-medium bg-neutral-900 text-white">Experiences (8)</Link>
        <Link to="/app/hub/services/expertise" className="px-3 py-1.5 rounded-full text-sm font-medium text-neutral-600 hover:bg-neutral-100">Expertise (14)</Link>
      </div>
      <div className="flex items-center gap-2 mb-4">
        <SearchInput placeholder="Search experiences…" size="sm" className="max-w-xs" />
        <Chip>All</Chip><Chip>Live</Chip><Chip>Draft</Chip><Chip>Archived</Chip>
        <div className="flex-1" />
        <select className="text-sm border border-neutral-300 rounded-full px-4 py-1.5 bg-white">
          <option>Most booked</option><option>Recently added</option>
        </select>
      </div>
      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
        {EXPERIENCES.slice(0, 6).map((e, i) => (
          <Card key={e.id} padding="p-0" className="overflow-hidden hover:border-neutral-900 transition-colors">
            <div className="relative">
              <ImageBlock aspect="4/3" seed={i + 2} className="!rounded-none" />
              <Badge tone={i % 3 === 2 ? 'warning' : 'success'} className="absolute top-3 left-3">{i % 3 === 2 ? 'Draft' : 'Live'}</Badge>
              <button className="absolute top-3 right-3 w-8 h-8 rounded-full bg-white/90 flex items-center justify-center"><Icon name="more" size={14} /></button>
            </div>
            <div className="p-4">
              <h3 className="font-semibold text-sm line-clamp-2">{e.title}</h3>
              <p className="text-xs text-neutral-500 mt-1">{e.duration} · {e.location}</p>
              <div className="mt-3 pt-3 border-t border-neutral-100 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 text-xs">
                <div><div className="text-neutral-500">Bookings</div><div className="font-bold num-tabular">{20 - i * 2}</div></div>
                <div><div className="text-neutral-500">Revenue</div><div className="font-bold num-tabular">RM {((20 - i * 2) * 180).toLocaleString()}</div></div>
                <div><div className="text-neutral-500">Rating</div><div className="font-bold num-tabular flex items-center gap-1">{e.rating}<Icon name="star" size={10} fill="currentColor" strokeWidth={0} /></div></div>
              </div>
            </div>
          </Card>
        ))}
      </div>
    </HubShell>
  );
}

/* ============ SERVICES — EXPERTISE ============ */
function HubServicesExpertisePage() {
  return (
    <HubShell route="/app/hub/services/expertise" title="Expertise"
      action={<Button variant="dark" leftIcon="plus">Add expertise</Button>}>
      <div className="flex items-center gap-2 mb-4">
        <Link to="/app/hub/services/experiences" className="px-3 py-1.5 rounded-full text-sm font-medium text-neutral-600 hover:bg-neutral-100">Experiences (8)</Link>
        <Link to="/app/hub/services/expertise" className="px-3 py-1.5 rounded-full text-sm font-medium bg-neutral-900 text-white">Expertise (14)</Link>
      </div>
      <Card padding="p-0">
        <table className="w-full text-sm">
          <thead>
            <tr className="bg-neutral-50 border-b border-neutral-200 text-xs uppercase tracking-wide text-neutral-500">
              <th className="text-left px-5 py-3 font-semibold">Service</th>
              <th className="text-left px-5 py-3 font-semibold">Category</th>
              <th className="text-left px-5 py-3 font-semibold">Status</th>
              <th className="text-left px-5 py-3 font-semibold">Bookings</th>
              <th className="text-right px-5 py-3 font-semibold">Price</th>
              <th />
            </tr>
          </thead>
          <tbody>
            {EXPERTISE.map((p, i) => (
              <tr key={p.id} className="border-b border-neutral-100 last:border-0 hover:bg-neutral-50">
                <td className="px-5 py-3">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-lg ph-grad" />
                    <div>
                      <div className="font-semibold">{p.title}</div>
                      <div className="text-xs text-neutral-500">{p.delivery}</div>
                    </div>
                  </div>
                </td>
                <td className="px-5 py-3"><Badge tone="purple">{p.category}</Badge></td>
                <td className="px-5 py-3"><Badge tone={i === 4 ? 'warning' : 'success'}>{i === 4 ? 'Draft' : 'Live'}</Badge></td>
                <td className="px-5 py-3 num-tabular">{[12, 6, 3, 9, 0, 5][i]}</td>
                <td className="px-5 py-3 text-right font-semibold num-tabular">{p.price}</td>
                <td className="px-5 py-3"><Icon name="more" size={14} className="text-neutral-400" /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </HubShell>
  );
}

/* ============ JOBS — POSTS ============ */
function HubJobsPostsPage() {
  return (
    <HubShell route="/app/hub/jobs/posts" title="Job posts"
      action={
        <Link to="/app/onboarding/job/details">
          <Button variant="dark" leftIcon="plus">Post a job</Button>
        </Link>
      }>
      <div className="flex items-center gap-2 mb-4">
        <Link to="/app/hub/jobs/posts" className="px-3 py-1.5 rounded-full text-sm font-medium bg-neutral-900 text-white">Posts (4)</Link>
        <Link to="/app/hub/jobs/applications" className="px-3 py-1.5 rounded-full text-sm font-medium text-neutral-600 hover:bg-neutral-100">Applications (12)</Link>
      </div>
      <div className="space-y-3">
        {JOBS.map(j => (
          <Card key={j.id}>
            <div className="flex items-start justify-between gap-4">
              <div className="flex-1">
                <div className="flex items-center gap-2 mb-2">
                  <Badge tone={j.type === 'Fixed' ? 'info' : 'purple'}>{j.type}</Badge>
                  <Badge tone="success">Open</Badge>
                </div>
                <h3 className="font-semibold">{j.title}</h3>
                <p className="text-sm text-neutral-500 mt-1">{j.budget} · {j.duration} · Posted {j.posted}</p>
                <div className="mt-3 flex flex-wrap gap-1.5">
                  {j.skills.map(s => <Badge key={s} tone="neutral">{s}</Badge>)}
                </div>
              </div>
              <div className="text-right flex-shrink-0">
                <div className="text-2xl font-bold num-tabular">{j.proposals}</div>
                <div className="text-xs text-neutral-500">proposals</div>
                <Button variant="secondary" size="sm" className="mt-3" rightIcon="arrowRight">Review</Button>
              </div>
            </div>
          </Card>
        ))}
      </div>
    </HubShell>
  );
}

/* ============ JOBS — APPLICATIONS ============ */
function HubJobsApplicationsPage() {
  const apps = [
    { id: 'AP-201', job: 'Brand Identity for D2C Skincare Launch', client: 'Lumi Botanicals', status: 'Shortlisted', sub: 'May 16' },
    { id: 'AP-200', job: 'Frontend Developer (Angular)', client: 'Hauz Capital', status: 'Under review', sub: 'May 14' },
    { id: 'AP-198', job: 'Investor Deck — Series A', client: 'Stealth (FoodTech)', status: 'Interview', sub: 'May 12' },
    { id: 'AP-195', job: 'Video Producer Docu-Series', client: 'Yayasan Hijau', status: 'Awarded', sub: 'May 6' },
    { id: 'AP-192', job: 'Growth Consultant Retainer', client: 'Tumbuh App', status: 'Rejected', sub: 'May 2' },
  ];
  const tone = { Shortlisted: 'info', 'Under review': 'warning', Interview: 'purple', Awarded: 'success', Rejected: 'error' };
  return (
    <HubShell route="/app/hub/jobs/applications" title="Applications">
      <div className="flex items-center gap-2 mb-4">
        <Link to="/app/hub/jobs/posts" className="px-3 py-1.5 rounded-full text-sm font-medium text-neutral-600 hover:bg-neutral-100">Posts (4)</Link>
        <Link to="/app/hub/jobs/applications" className="px-3 py-1.5 rounded-full text-sm font-medium bg-neutral-900 text-white">Applications (12)</Link>
      </div>
      <Card padding="p-0">
        <table className="w-full text-sm">
          <thead>
            <tr className="bg-neutral-50 border-b border-neutral-200 text-xs uppercase tracking-wide text-neutral-500">
              <th className="text-left px-5 py-3 font-semibold">Ref</th>
              <th className="text-left px-5 py-3 font-semibold">Job</th>
              <th className="text-left px-5 py-3 font-semibold">Client</th>
              <th className="text-left px-5 py-3 font-semibold">Submitted</th>
              <th className="text-left px-5 py-3 font-semibold">Status</th>
              <th />
            </tr>
          </thead>
          <tbody>
            {apps.map(a => (
              <tr key={a.id} className="border-b border-neutral-100 last:border-0 hover:bg-neutral-50">
                <td className="px-5 py-3 font-mono text-xs text-neutral-500">{a.id}</td>
                <td className="px-5 py-3 font-medium">{a.job}</td>
                <td className="px-5 py-3">{a.client}</td>
                <td className="px-5 py-3 text-neutral-600">{a.sub}</td>
                <td className="px-5 py-3"><Badge tone={tone[a.status]}>{a.status}</Badge></td>
                <td className="px-5 py-3 text-right"><a className="text-primary font-medium hover:underline">View →</a></td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </HubShell>
  );
}

/* ============ SETTINGS — ACCOUNT ============ */
function HubSettingsAccountPage() {
  return (
    <HubSettingsShell active="/app/hub/settings/account" title="Hub profile">
      <Card>
        <div className="flex items-start gap-5 mb-6 pb-6 border-b border-neutral-100">
          <Avatar name="Kraf KL" size={96} />
          <div className="flex-1">
            <h3 className="font-semibold">Logo &amp; banner</h3>
            <p className="text-sm text-neutral-500 mt-1">Square JPG or PNG, at least 400×400.</p>
            <div className="mt-3 flex gap-2">
              <Button variant="secondary" size="sm" leftIcon="upload">Upload logo</Button>
              <Button variant="ghost" size="sm">Upload banner</Button>
            </div>
          </div>
        </div>
        <div className="grid sm:grid-cols-2 gap-4">
          <Field label="Hub name" value="Kraf KL Studio" />
          <Field label="Type" value="Heritage Crafts Studio" />
          <Field label="Country" value="Malaysia" />
          <Field label="City" value="Kuala Lumpur" />
          <Field label="Contact email" value="hello@krafkl.com" />
          <Field label="Phone" value="+60 3 2284 8800" />
          <div className="sm:col-span-2">
            <Field label="Tagline" value="A working batik studio + maker space in Bangsar." />
          </div>
          <div className="sm:col-span-2">
            <Field label="About" textarea value="Kraf KL is a heritage-led studio dedicated to keeping batik, songket and resist-dye traditions alive. We host workshops, run residencies, and collaborate with brands on sustainable craft." />
          </div>
        </div>
        <div className="mt-6 flex gap-2">
          <Button variant="primary">Save profile</Button>
          <Button variant="ghost">Cancel</Button>
        </div>
      </Card>
    </HubSettingsShell>
  );
}

/* ============ SETTINGS — MEMBERS ============ */
function HubSettingsMembersPage() {
  return (
    <HubSettingsShell active="/app/hub/settings/members" title="Team members">
      <div className="flex items-center justify-between mb-4">
        <div>
          <p className="text-sm text-neutral-500">4 members · 2 owners · 1 invited</p>
        </div>
        <Button variant="dark" size="sm" leftIcon="plus">Invite member</Button>
      </div>
      <Card padding="p-0">
        <table className="w-full text-sm">
          <thead>
            <tr className="bg-neutral-50 border-b border-neutral-200 text-xs uppercase tracking-wide text-neutral-500">
              <th className="text-left px-5 py-3 font-semibold">Member</th>
              <th className="text-left px-5 py-3 font-semibold">Role</th>
              <th className="text-left px-5 py-3 font-semibold">Last active</th>
              <th />
            </tr>
          </thead>
          <tbody>
            {[
              { n: 'Faiz Fadhillah', e: 'faiz.fadhillah@example.com', role: 'Owner', last: 'Just now', tone: 'dark' },
              { n: 'Nadia Hasan', e: 'nadia@krafkl.com', role: 'Owner', last: '2h ago', tone: 'dark' },
              { n: 'Iqbal Ramli', e: 'iqbal@krafkl.com', role: 'Manager', last: '1d ago', tone: 'info' },
              { n: 'Liyana Othman', e: 'liyana@krafkl.com', role: 'Editor', last: '3d ago', tone: 'purple' },
              { n: 'Pending: amir@studio.id', e: 'Invited 2d ago', role: 'Editor', last: '—', tone: 'warning' },
            ].map((m, i) => (
              <tr key={i} className="border-b border-neutral-100 last:border-0 hover:bg-neutral-50">
                <td className="px-5 py-3">
                  <div className="flex items-center gap-3">
                    <Avatar name={m.n} size={32} />
                    <div>
                      <div className="font-medium">{m.n}</div>
                      <div className="text-xs text-neutral-500">{m.e}</div>
                    </div>
                  </div>
                </td>
                <td className="px-5 py-3"><Badge tone={m.tone}>{m.role}</Badge></td>
                <td className="px-5 py-3 text-neutral-600">{m.last}</td>
                <td className="px-5 py-3 text-right"><Icon name="more" size={14} className="text-neutral-400" /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>

      <h3 className="font-semibold mt-8 mb-3">Roles &amp; permissions</h3>
      <Card padding="p-0">
        <table className="w-full text-sm">
          <thead>
            <tr className="bg-neutral-50 border-b border-neutral-200 text-xs uppercase tracking-wide text-neutral-500">
              <th className="text-left px-5 py-3 font-semibold">Permission</th>
              <th className="text-center px-5 py-3 font-semibold">Owner</th>
              <th className="text-center px-5 py-3 font-semibold">Manager</th>
              <th className="text-center px-5 py-3 font-semibold">Editor</th>
              <th className="text-center px-5 py-3 font-semibold">Viewer</th>
            </tr>
          </thead>
          <tbody>
            {[
              ['View dashboard', true, true, true, true],
              ['Manage bookings', true, true, true, false],
              ['Manage listings', true, true, true, false],
              ['Manage team', true, true, false, false],
              ['Manage payouts', true, false, false, false],
              ['Delete hub', true, false, false, false],
            ].map((row, i) => (
              <tr key={i} className="border-b border-neutral-100 last:border-0">
                <td className="px-5 py-3 font-medium">{row[0]}</td>
                {row.slice(1).map((v, j) => (
                  <td key={j} className="px-5 py-3 text-center">
                    {v ? <Icon name="check" size={14} className="inline text-green-600" /> : <span className="text-neutral-300">—</span>}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </HubSettingsShell>
  );
}

/* ============ SETTINGS — TRANSACTIONS ============ */
function HubSettingsTransactionsPage() {
  const txns = [
    { id: 'TX-9201', desc: 'Brand Identity Sprint · Milestone 1 — Aisyah Lim', date: 'May 18', amt: 'RM 2,800', net: 'RM 2,576', status: 'Paid' },
    { id: 'TX-9197', desc: 'Sourdough Class · 6 tickets', date: 'May 14', amt: 'RM 1,260', net: 'RM 1,159', status: 'Paid' },
    { id: 'TX-9182', desc: 'UX Audit — Jeff Cheong', date: 'May 12', amt: 'RM 1,260', net: 'RM 1,159', status: 'Paid' },
    { id: 'TX-9173', desc: 'Batik Workshop · 8 tickets', date: 'May 9', amt: 'RM 1,440', net: 'RM 1,324', status: 'Paid' },
    { id: 'TX-9166', desc: 'Payout to Maybank •••• 2891', date: 'May 8', amt: '-RM 4,200', net: '—', status: 'Payout' },
  ];
  return (
    <HubSettingsShell active="/app/hub/settings/transactions" title="Transactions">
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
        <Metric label="This month" value="RM 12,860" delta="+22%" trend="up" />
        <Metric label="Net (after fee)" value="RM 11,830" delta="+22%" trend="up" />
        <Metric label="Next payout" value="RM 4,640" delta="May 28" trend="up" />
      </div>
      <Card padding="p-0">
        <div className="px-5 py-3 border-b border-neutral-200 flex items-center justify-between">
          <h3 className="font-semibold text-sm">Recent</h3>
          <Button variant="secondary" size="sm" leftIcon="download">Export CSV</Button>
        </div>
        <table className="w-full text-sm">
          <thead>
            <tr className="text-xs uppercase tracking-wide text-neutral-500 border-b border-neutral-100">
              <th className="text-left px-5 py-3 font-semibold">Ref</th>
              <th className="text-left px-5 py-3 font-semibold">Description</th>
              <th className="text-left px-5 py-3 font-semibold">Date</th>
              <th className="text-right px-5 py-3 font-semibold">Gross</th>
              <th className="text-right px-5 py-3 font-semibold">Net</th>
              <th className="text-left px-5 py-3 font-semibold">Status</th>
            </tr>
          </thead>
          <tbody>
            {txns.map(t => (
              <tr key={t.id} className="border-b border-neutral-100 last:border-0 hover:bg-neutral-50">
                <td className="px-5 py-3 font-mono text-xs text-neutral-500">{t.id}</td>
                <td className="px-5 py-3">{t.desc}</td>
                <td className="px-5 py-3 text-neutral-600">{t.date}</td>
                <td className="px-5 py-3 text-right font-semibold num-tabular">{t.amt}</td>
                <td className="px-5 py-3 text-right font-medium num-tabular">{t.net}</td>
                <td className="px-5 py-3"><Badge tone={t.status === 'Paid' ? 'success' : 'info'}>{t.status}</Badge></td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </HubSettingsShell>
  );
}

/* ============ SETTINGS — SUBSCRIPTION ============ */
function HubSettingsSubscriptionPage() {
  const plans = [
    { name: 'Starter', price: 'Free', desc: 'For new hubs testing the platform.', items: ['Up to 3 listings', 'Standard bookings', '8% transaction fee'], cur: false },
    { name: 'Pro', price: 'RM 99 / mo', desc: 'For growing hubs running regular workshops.', items: ['Unlimited listings', 'Team members & roles', '5% transaction fee', 'Priority support'], cur: true },
    { name: 'Enterprise', price: 'Custom', desc: 'For organisations and academic partners.', items: ['Programs builder', 'Custom contracts & SLAs', '3% transaction fee', 'Dedicated success manager'], cur: false },
  ];
  return (
    <HubSettingsShell active="/app/hub/settings/subscription" title="Subscription">
      <Card className="mb-6 bg-primary text-white !border-primary">
        <div className="flex items-center justify-between gap-4">
          <div>
            <Badge tone="purple" className="mb-2">Current plan</Badge>
            <h3 className="text-xl font-bold">Mereka Pro</h3>
            <p className="text-sm text-white/70 mt-1">Renews May 28, 2026 — RM 99/mo</p>
          </div>
          <div className="flex gap-2">
            <Button variant="secondary" size="md">Manage billing</Button>
            <Button variant="ghost" size="md" className="!text-white hover:!bg-white/10">Cancel plan</Button>
          </div>
        </div>
      </Card>

      <h3 className="font-semibold mb-3">Switch plan</h3>
      <div className="grid md:grid-cols-3 gap-4">
        {plans.map(p => (
          <Card key={p.name} className={p.cur ? 'border-2 !border-primary' : ''}>
            <div className="flex items-center justify-between mb-1">
              <h4 className="font-semibold text-lg">{p.name}</h4>
              {p.cur && <Badge tone="primaryLight">Current</Badge>}
            </div>
            <div className="text-2xl font-bold mb-1 num-tabular">{p.price}</div>
            <p className="text-sm text-neutral-500 mb-4">{p.desc}</p>
            <ul className="space-y-2 text-sm">
              {p.items.map(i => (
                <li key={i} className="flex items-start gap-2"><Icon name="check" size={14} className="text-green-600 mt-0.5 flex-shrink-0" /><span>{i}</span></li>
              ))}
            </ul>
            <Button variant={p.cur ? 'secondary' : 'primary'} size="sm" className="w-full mt-5" disabled={p.cur}>
              {p.cur ? 'Current plan' : `Switch to ${p.name}`}
            </Button>
          </Card>
        ))}
      </div>
    </HubSettingsShell>
  );
}

/* ============ SETTINGS — NOTIFICATIONS ============ */
function HubSettingsNotifsPage() {
  const cats = [
    { t: 'Bookings & orders', rows: ['New booking received', 'Booking cancellations', 'Payment received', 'Refunds'] },
    { t: 'Reviews', rows: ['New review', 'Review responses', 'Low-rating alerts'] },
    { t: 'Team', rows: ['Member invited', 'Member joined', 'Permission changes'] },
    { t: 'Platform', rows: ['Feature releases', 'Maintenance windows', 'Policy updates'] },
  ];
  return (
    <HubSettingsShell active="/app/hub/settings/notifications" title="Notification settings">
      <Card padding="p-0">
        <div className="grid grid-cols-1 lg:grid-cols-[1fr_auto_auto_auto] px-5 py-3 border-b border-neutral-200 text-xs uppercase tracking-wide font-semibold text-neutral-500">
          <span>Type</span>
          <span className="w-20 text-center px-3">Email</span>
          <span className="w-20 text-center px-3">In-app</span>
          <span className="w-20 text-center px-3">Slack</span>
        </div>
        {cats.map(c => (
          <div key={c.t} className="border-b border-neutral-100 last:border-0">
            <div className="px-5 py-2 bg-neutral-50 text-xs font-semibold text-neutral-700 uppercase tracking-wide">{c.t}</div>
            {c.rows.map(r => (
              <div key={r} className="grid grid-cols-1 lg:grid-cols-[1fr_auto_auto_auto] items-center px-5 py-2.5 text-sm">
                <span>{r}</span>
                <span className="w-20 text-center"><input type="checkbox" defaultChecked /></span>
                <span className="w-20 text-center"><input type="checkbox" defaultChecked /></span>
                <span className="w-20 text-center"><input type="checkbox" /></span>
              </div>
            ))}
          </div>
        ))}
      </Card>
    </HubSettingsShell>
  );
}

/* ============ SETTINGS — REVIEWS ============ */
function HubSettingsReviewsPage() {
  return (
    <HubSettingsShell active="/app/hub/settings/reviews" title="Reviews">
      <div className="grid lg:grid-cols-3 gap-6 mb-6">
        <Card className="lg:col-span-1">
          <div className="text-center py-4">
            <div className="text-5xl font-bold num-tabular">4.9</div>
            <div className="flex justify-center mt-1">
              {[...Array(5)].map((_, i) => <Icon key={i} name="star" size={16} fill="#fbbf24" strokeWidth={0} />)}
            </div>
            <div className="text-sm text-neutral-500 mt-1">128 reviews</div>
          </div>
          <div className="space-y-1.5 mt-4 pt-4 border-t border-neutral-100">
            {[
              [5, 102], [4, 18], [3, 5], [2, 2], [1, 1]
            ].map(([n, c]) => (
              <div key={n} className="flex items-center gap-2 text-xs">
                <span className="w-4">{n}★</span>
                <Progress value={(c / 128) * 100} tone="dark" className="flex-1" />
                <span className="w-8 text-right num-tabular text-neutral-500">{c}</span>
              </div>
            ))}
          </div>
        </Card>
        <div className="lg:col-span-2 space-y-3">
          {[
            { n: 'Sara Daud', t: 'Brand Workshop', r: 5, txt: 'Such a calm, well-paced session. Everyone walked away with clarity.', d: '2d ago' },
            { n: 'Jeff Cheong', t: 'UX Audit', r: 5, txt: 'Crisp, focused and shipped me a clean roadmap.', d: '1w ago' },
            { n: 'Priya Naidu', t: 'ESG Workshop', r: 5, txt: 'Loved the practical templates. Saved us weeks.', d: '2w ago' },
            { n: 'Marcus Ooi', t: 'Growth Diagnostic', r: 4, txt: 'Great content. Slight pacing issue on day 2 but recovered.', d: '3w ago' },
          ].map((r, i) => (
            <Card key={i}>
              <div className="flex items-start justify-between gap-4">
                <div className="flex items-start gap-3">
                  <Avatar name={r.n} size={36} />
                  <div>
                    <div className="flex items-center gap-2">
                      <span className="text-sm font-semibold">{r.n}</span>
                      <span className="text-xs text-neutral-500">· {r.t}</span>
                    </div>
                    <div className="flex items-center gap-1 mt-1">
                      {[...Array(5)].map((_, j) => <Icon key={j} name="star" size={11} fill={j < r.r ? '#fbbf24' : '#e5e7eb'} strokeWidth={0} />)}
                      <span className="text-xs text-neutral-400 ml-1">{r.d}</span>
                    </div>
                    <p className="text-sm text-neutral-700 mt-2">{r.txt}</p>
                  </div>
                </div>
                <Button variant="ghost" size="sm">Reply</Button>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </HubSettingsShell>
  );
}

/* ============ SETTINGS — ENGAGEMENT ============ */
function HubSettingsEngagementPage() {
  return (
    <HubSettingsShell active="/app/hub/settings/engagement" title="Engagement">
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <Metric label="Profile views" value="3,412" delta="+18%" trend="up" />
        <Metric label="Followers" value="284" delta="+12" trend="up" />
        <Metric label="Message response" value="96%" delta="+2%" trend="up" />
        <Metric label="Avg. reply time" value="2h 14m" delta="-22m" trend="up" />
      </div>
      <Card className="mb-6">
        <h3 className="font-semibold mb-4">Profile views — last 30 days</h3>
        <BarChart />
      </Card>
      <Card>
        <h3 className="font-semibold mb-4">Recent followers</h3>
        <div className="grid sm:grid-cols-2 gap-3">
          {[...EXPERTS.slice(0, 6)].map(x => (
            <div key={x.id} className="flex items-center gap-3 p-3 rounded-lg border border-neutral-100">
              <Avatar name={x.name} size={40} />
              <div className="flex-1">
                <div className="text-sm font-medium">{x.name}</div>
                <div className="text-xs text-neutral-500">{x.role}</div>
              </div>
              <Button variant="secondary" size="sm">View</Button>
            </div>
          ))}
        </div>
      </Card>
    </HubSettingsShell>
  );
}

Object.assign(window, {
  HubOverviewPage, HubCalendarPage, HubBookingsPage, HubChatsPage,
  HubAnalyticsPage, HubNotificationsPage,
  HubServicesExperiencesPage, HubServicesExpertisePage,
  HubJobsPostsPage, HubJobsApplicationsPage,
  HubSettingsAccountPage, HubSettingsMembersPage, HubSettingsTransactionsPage,
  HubSettingsSubscriptionPage, HubSettingsNotifsPage, HubSettingsReviewsPage,
  HubSettingsEngagementPage,
});