/* Mereka v2 — Analytics: Experience, Expertise, Course, Gig */

/* =================================================================
   EXPERIENCE ANALYTICS
   ================================================================= */
function ExperienceAnalyticsPage() {
  return (
    <AnalyticsShell active="/app/analytics/experience">
      <APageHeader title="Experience Analytics" subtitle="Event and experience performance tracking across all categories."
        action={
          <div className="flex items-center gap-2">
            <Link to="/app/analytics/experience/all"><button className="h-10 px-4 border border-neutral-300 rounded-lg text-sm font-medium hover:bg-neutral-50">View All Experiences</button></Link>
            <ExportBtn />
          </div>
        }
      />

      <FilterRow items={[
        { label: 'Programmes', value: 'All', count: 5, dot: '#22C55E' },
        { label: 'Experiences', value: 'All', count: 5, dot: '#F59E0B' },
        { label: 'Experience types', value: 'All', count: 3, dot: '#F59E0B' },
        { label: 'Results', value: 'All' },
      ]} />

      <h2 className="text-xl font-bold mb-4">Overview</h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
        <StatBox label="Active Members" value="42" delta="+12%" sub="vs last period" />
        <StatBox label="Total Attendees" value="2,847" delta="+18.4%" sub="attendees" />
        <StatBox label="Avg Rating" value="4.3 ★" delta="+0.2" sub="all time" />
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-10">
        <StatBox label="Revenue" value="RM 528K" delta="+14.2%" sub="YTD" />
        <StatBox label="Fill Rate" value="78%" delta="+4.3%" sub="avg seats sold" />
        <StatBox label="Repeat Attendance" value="34%" delta="+2.8%" sub="2+ events" />
      </div>

      <div className="bg-white border border-neutral-200 rounded-2xl p-5 mb-10">
        <div className="flex items-center gap-3 mb-5 flex-wrap">
          <h3 className="font-bold">Attendance Trends</h3>
          <button className="px-3 h-7 bg-neutral-900 text-white rounded-full text-xs font-semibold">All</button>
          {[['Events', '#92400E'], ['Workshops', '#D97706'], ['Talks', '#F59E0B'], ['Shows & Exhibitions', '#FBBF24']].map(([l, c]) => (
            <span key={l} className="px-3 h-7 inline-flex items-center bg-neutral-100 text-neutral-700 text-xs rounded-full"><span className="w-1.5 h-1.5 rounded-full mr-1.5" style={{ background: c }} />{l}</span>
          ))}
        </div>
        <AttendanceTrendChart />
      </div>

      <div className="flex items-center justify-between mb-3">
        <h3 className="font-bold">Top Experiences</h3>
        <SearchBox placeholder="Search experience" className="w-[260px]" />
      </div>
      <div className="bg-white border border-neutral-200 rounded-2xl overflow-x-auto mb-10">
        <table className="w-full text-xs">
          <thead>
            <tr className="bg-neutral-50 border-b border-neutral-100 text-neutral-500 uppercase tracking-wide">
              <th className="text-left px-5 py-3 font-semibold">Experience name</th>
              <th className="text-left px-3 py-3 font-semibold">Programmes</th>
              <th className="text-left px-3 py-3 font-semibold">Type</th>
              <th className="text-left px-3 py-3 font-semibold">Date</th>
              <th className="text-left px-3 py-3 font-semibold">Mode</th>
              <th className="text-left px-3 py-3 font-semibold">Tickets sold</th>
              <th className="text-left px-3 py-3 font-semibold">Fill rate</th>
              <th className="text-left px-3 py-3 font-semibold">Rating</th>
              <th className="text-left px-3 py-3 font-semibold">Revenue</th>
            </tr>
          </thead>
          <tbody>
            {ALL_EXPERIENCES_AN.slice(0, 6).map((e, i) => (
              <tr key={e.id + i} className="border-b border-neutral-100 last:border-0 hover:bg-neutral-50">
                <td className="px-5 py-3 font-bold">{e.name}</td>
                <td className="px-3 py-3 text-neutral-600">AI4U • AI Literacy<br/>Career Accel <span className="px-1.5 py-0.5 bg-neutral-100 text-[11px] rounded">3</span></td>
                <td className="px-3 py-3">{e.type}</td>
                <td className="px-3 py-3">{e.date}</td>
                <td className="px-3 py-3">{e.mode}</td>
                <td className="px-3 py-3 num-tabular">{e.tickets}</td>
                <td className={`px-3 py-3 num-tabular ${e.fill >= 85 ? 'text-green-600' : e.fill >= 75 ? 'text-amber-500' : 'text-red-500'}`}>{e.fill}%</td>
                <td className="px-3 py-3"><span className="inline-flex items-center gap-1">{e.rating} <Icon name="star" size={10} fill="#FBBF24" strokeWidth={0} /></span></td>
                <td className="px-3 py-3 num-tabular">{e.revenue}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-10">
        <div className="bg-white border border-neutral-200 rounded-2xl p-5">
          <h3 className="font-bold mb-4">Audience by Age Group</h3>
          {[['18-24', 28, 797], ['25-34', 42, 1196], ['35-44', 19, 540], ['45-54', 8, 228], ['55+', 3, 85]].map(([l, p, v]) => (
            <div key={l} className="grid grid-cols-1 lg:grid-cols-[60px_1fr_50px_60px] items-center gap-3 text-xs mb-2.5">
              <span>{l}</span>
              <div className="h-2.5 bg-neutral-100 rounded-full overflow-hidden"><div className="h-full bg-neutral-900 rounded-full" style={{ width: p + '%' }} /></div>
              <span className="text-right num-tabular text-neutral-500">{p}%</span>
              <span className="text-right text-blue-500 font-medium num-tabular">{v}</span>
            </div>
          ))}
        </div>
        <div className="bg-white border border-neutral-200 rounded-2xl p-5">
          <h3 className="font-bold mb-6">Attendance by Experience Type</h3>
          <div className="flex items-end gap-6 h-[180px] justify-around px-2">
            {[['Events', 820, '#92400E'], ['Workshops', 640, '#D97706'], ['Talks', 980, '#F59E0B'], ['Shows & E…', 407, '#FBBF24']].map(([l, v, c]) => (
              <div key={l} className="flex flex-col items-center gap-2 flex-1">
                <span className="text-xs font-bold">{v}</span>
                <div className="w-full max-w-[60px] rounded-t-md" style={{ height: (v / 1000) * 150 + 'px', background: c }} />
                <span className="text-xs text-neutral-500 text-center">{l}</span>
              </div>
            ))}
          </div>
          <div className="flex items-center justify-between text-xs text-neutral-400 mt-1">
            <span>0</span><span>1000</span>
          </div>
        </div>
      </div>
    </AnalyticsShell>
  );
}

function AttendanceTrendChart() {
  const months = ['Aug 2025', 'Sep 2025', 'Oct 2025', 'Nov 2025', 'Dec 2025', 'Jan 2026', 'Feb 2026', 'Mar 2026'];
  const colors = ['#FBBF24', '#F59E0B', '#D97706', '#92400E'];
  const data = months.map((m, i) => [4 + (i % 3), 6 + (i % 4), 8 + (i % 3), 6 + ((i + 1) % 4)]);
  return (
    <svg viewBox="0 0 800 240" className="w-full">
      {[0, 8, 16, 24, 32].map((v, i) => {
        const y = 220 - (v * 6);
        return <g key={v}><text x={6} y={y + 4} fontSize={10} fill="#9CA3AF">{v}</text></g>;
      })}
      {months.map((m, i) => {
        const x = 50 + i * 92;
        let cum = 0;
        return (
          <g key={m}>
            {data[i].map((v, si) => {
              const h = v * 6;
              const y = 220 - cum - h;
              cum += h;
              return <rect key={si} x={x} y={y} width={64} height={h} fill={colors[si]} />;
            })}
            <text x={x + 32} y={236} textAnchor="middle" fontSize={10} fill="#6B7280">{m}</text>
          </g>
        );
      })}
    </svg>
  );
}

/* ===== All Experiences ===== */
function AllExperiencesPage() {
  return (
    <AnalyticsShell active="/app/analytics/experience">
      <Link to="/app/analytics/experience" className="inline-flex items-center gap-2 text-sm text-neutral-700 hover:text-neutral-900 mb-4"><Icon name="chevronLeft" size={14} /> Back to analytics</Link>
      <APageHeader title="All Experiences" subtitle="Browse the full catalogue. Click any row to open details."
        action={<div className="flex gap-2"><SearchBox placeholder="Search programme by name, focus, or lead..." className="w-[320px]" /><ExportBtn /></div>}
      />
      <div className="bg-white border border-neutral-200 rounded-2xl overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-neutral-100 text-neutral-500 uppercase tracking-wide text-xs">
              <th className="text-left px-5 py-3 font-semibold">Experience</th>
              <th className="text-left px-3 py-3 font-semibold">Type</th>
              <th className="text-left px-3 py-3 font-semibold">Mode</th>
              <th className="text-left px-3 py-3 font-semibold">Date</th>
              <th className="text-left px-3 py-3 font-semibold">Location</th>
              <th className="text-left px-3 py-3 font-semibold">Tickets</th>
              <th className="text-left px-3 py-3 font-semibold">Fill rate</th>
              <th className="text-left px-3 py-3 font-semibold">Rating</th>
              <th className="text-left px-3 py-3 font-semibold">Revenue</th>
            </tr>
          </thead>
          <tbody>
            {ALL_EXPERIENCES_AN.map(e => (
              <tr key={e.id} className="border-b border-neutral-100 last:border-0 hover:bg-neutral-50 cursor-pointer">
                <td className="px-5 py-3">
                  <Link to={`/app/analytics/experience/${e.id}`} className="block">
                    <p className="font-bold">{e.name}</p>
                    <p className="text-xs text-neutral-500">{e.host}</p>
                  </Link>
                </td>
                <td className="px-3 py-3">{e.type}</td>
                <td className="px-3 py-3">{e.mode}</td>
                <td className="px-3 py-3">{e.date}</td>
                <td className="px-3 py-3 text-neutral-600 max-w-[180px]">{e.location}</td>
                <td className="px-3 py-3 num-tabular">{e.tickets}</td>
                <td className={`px-3 py-3 num-tabular ${e.fill >= 85 ? 'text-green-600' : e.fill >= 75 ? 'text-amber-500' : 'text-red-500'}`}>{e.fill}%</td>
                <td className="px-3 py-3"><span className="inline-flex items-center gap-1">{e.rating} <Icon name="star" size={10} fill="#FBBF24" strokeWidth={0} /></span></td>
                <td className="px-3 py-3 num-tabular">{e.revenue}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <div className="flex items-center justify-between px-5 py-4">
          <span className="text-sm text-neutral-500">Showing 1-6 of 6</span>
          <Pagination />
        </div>
      </div>
    </AnalyticsShell>
  );
}

/* ===== Experience Detail ===== */
function ExperienceDetailPage({ id }) {
  const e = ALL_EXPERIENCES_AN.find(x => x.id === id) || ALL_EXPERIENCES_AN[0];
  return (
    <AnalyticsShell active="/app/analytics/experience">
      <Link to="/app/analytics/experience/all" className="inline-flex items-center gap-2 text-sm text-neutral-700 hover:text-neutral-900 mb-4"><Icon name="chevronLeft" size={14} /> Back to all experiences</Link>
      <div className="flex items-start justify-between mb-2 flex-wrap gap-4">
        <div>
          <h1 className="text-3xl font-bold">{e.name.split(' ').map(w => w[0] + w.slice(1).toLowerCase()).join(' ')}</h1>
          <p className="text-sm mt-1 inline-flex items-center gap-2"><span className="w-1.5 h-1.5 rounded-full bg-amber-500" /> <span className="text-amber-600">Experience</span> <span className="text-neutral-400">•</span> Hybrid <span className="text-neutral-400">•</span> Taylor's University, Subang Jaya + Online</p>
        </div>
        <div className="flex gap-2">
          <SearchBox placeholder="Search..." className="w-[200px]" />
          <ExportBtn />
        </div>
      </div>

      <h2 className="text-xl font-bold mt-6 mb-4">Overview</h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
        <StatBox label="Tickets sold" value="284" />
        <StatBox label="Fill rate" value="85%" />
        <StatBox label="Rating" value="4.3 ★" />
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
        <StatBox label="Revenue" value="RM 38,400" />
        <div /><div />
      </div>

      <div className="bg-white border border-neutral-200 rounded-2xl p-5 mb-6">
        <h3 className="font-bold mb-2">About</h3>
        <p className="text-sm text-neutral-700 mb-4">A half-day forum exploring the ethical challenges of AI deployment in ASEAN. Features academic researchers, policymakers, and industry practitioners discussing bias, regulation, and governance frameworks for responsible AI.</p>
        <h4 className="font-bold mb-2 text-sm">Agenda</h4>
        <div className="space-y-1 text-xs text-neutral-700">
          {[
            ['09:00 AM', 'Welcome & context setting. The state of AI ethics in ASEAN.'],
            ['09:30 AM', 'Keynote: Bias in AI Systems. Emma Johnson on detecting and mitigating algorithmic bias.'],
            ['10:30 AM', 'Panel Discussion: The Future of AI Ethics. Experts debate the responsibilities of tech companies.'],
            ['11:30 AM', 'Workshop: Building Inclusive AI. Hands-on session with Sarah Lee focusing on diverse data sets.'],
            ['01:00 PM', 'Networking Lunch: Connect with peers and industry leaders over lunch.'],
          ].map(([t, d]) => (
            <div key={t} className="flex gap-3"><span className="font-mono w-20">{t}</span><span className="flex-1">{d}</span></div>
          ))}
        </div>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-6">
        <div className="bg-white border border-neutral-200 rounded-2xl p-5">
          <h3 className="font-bold mb-4">Audience Demographics</h3>
          {[['18-24', 28, 48], ['25-34', 42, 108], ['35-44', 19, 82], ['45-54', 8, 34], ['55+', 3, 12]].map(([l, p, v]) => (
            <div key={l} className="grid grid-cols-1 lg:grid-cols-[60px_1fr_50px_50px] items-center gap-3 text-xs mb-2.5">
              <span>{l}</span>
              <div className="h-2.5 bg-neutral-100 rounded-full overflow-hidden"><div className="h-full bg-neutral-900 rounded-full" style={{ width: p + '%' }} /></div>
              <span className="text-right num-tabular text-neutral-500">{p}%</span>
              <span className="text-right text-blue-500 font-medium num-tabular">{v}</span>
            </div>
          ))}
        </div>
        <div>
          <h3 className="font-bold mb-4">Speaker (2)</h3>
          <div className="space-y-3">
            <div className="bg-white border border-neutral-200 rounded-xl p-4">
              <p className="font-bold text-sm">EMMA JOHNSON</p>
              <p className="text-xs text-neutral-500">AI Strategy • RM 500/ hr</p>
            </div>
            <div className="bg-white border border-neutral-200 rounded-xl p-4">
              <p className="font-bold text-sm">PROF. AHMAD ZAKI</p>
              <p className="text-xs text-neutral-500">AI Mentor • RM 350/ hr</p>
            </div>
          </div>
        </div>
      </div>

      <FeedbackBlock avg={4.3} count={284} />
    </AnalyticsShell>
  );
}

/* =================================================================
   EXPERTISE ANALYTICS
   ================================================================= */
function ExpertiseAnalyticsPage() {
  return (
    <AnalyticsShell active="/app/analytics/expertise">
      <APageHeader title="Expertise Analytics" subtitle="Marketplace health for expert service listings, bookings, and outcomes."
        action={
          <div className="flex items-center gap-2">
            <Link to="/app/analytics/expertise/all"><button className="h-10 px-4 border border-neutral-300 rounded-lg text-sm font-medium hover:bg-neutral-50">View All Experts</button></Link>
            <ExportBtn />
          </div>
        }
      />

      <FilterRow items={[
        { label: 'Programmes', value: 'All', count: 5, dot: '#22C55E' },
        { label: 'Categories', value: 'All', count: 5, dot: '#06B6D4' },
        { label: 'Experts', value: 'All', count: 3, dot: '#06B6D4' },
        { label: 'Results', value: 'All' },
      ]} />

      <h2 className="text-xl font-bold mb-4">Overview</h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
        <StatBox label="Active Listings" value="1,247" delta="+8.4%" sub="experts" />
        <StatBox label="Total Bookings" value="892" delta="+11.2%" sub="sessions" />
        <StatBox label="Avg Hourly Rate" value="RM 250" delta="+3.1" sub="per session" />
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-10">
        <StatBox label="Revenue" value="RM 358K" delta="+9.8%" sub="YTD" />
        <StatBox label="Avg Rating" value="4.3 ★" delta="+0.1" sub="post-session" />
        <StatBox label="Repeat Client" value="42%" delta="+2.4%" sub="booked 2x+" />
      </div>

      <div className="flex items-center justify-between mb-3">
        <h3 className="font-bold">Category Distribution</h3>
        <SearchBox placeholder="Search category" className="w-[240px]" />
      </div>
      <div className="bg-white border border-neutral-200 rounded-2xl p-5 mb-6">
        {[
          ['AI & ML', 312, 272, '#06B6D4', 410],
          ['Design', 285, 198, '#06B6D4', 350],
          ['Data', 196, 145, '#06B6D4', 320],
          ['Product', 168, 128, '#06B6D4', 280],
          ['Dev', 152, 98, '#06B6D4', 220],
          ['Marketing', 134, 75, '#06B6D4', 200],
        ].map(([cat, listing, booking, color, max]) => (
          <div key={cat} className="grid grid-cols-1 lg:grid-cols-[80px_1fr_60px_80px] items-center gap-3 text-xs mb-2.5">
            <span>{cat}</span>
            <div className="h-3 rounded-full overflow-hidden" style={{ background: color + '33' }}>
              <div className="h-full" style={{ width: (listing / max) * 100 + '%', background: color }} />
            </div>
            <span className="text-right num-tabular">{listing}</span>
            <span className="text-right num-tabular text-neutral-500">{booking} ({Math.round(booking / listing * 100)}%)</span>
          </div>
        ))}
        <div className="grid grid-cols-1 lg:grid-cols-[80px_1fr_60px_80px] gap-3 text-xs text-neutral-500 mt-3">
          <span /><div className="flex justify-between px-1"><span>0</span><span>80</span><span>160</span><span>240</span><span>320</span></div><span>LISTING</span><span>BOOKING</span>
        </div>
      </div>

      <div className="flex items-center justify-between mb-3">
        <h3 className="font-bold">Supply vs Demand</h3>
        <SearchBox placeholder="Search category" className="w-[240px]" />
      </div>
      <div className="bg-white border border-neutral-200 rounded-2xl overflow-hidden mb-6">
        <table className="w-full text-xs">
          <thead>
            <tr className="bg-neutral-50 border-b border-neutral-100 text-neutral-500 uppercase tracking-wide">
              <th className="text-left px-5 py-3 font-semibold">Category</th>
              <th className="text-left px-3 py-3 font-semibold">Supply</th>
              <th className="text-left px-3 py-3 font-semibold">Demand</th>
              <th className="text-left px-3 py-3 font-semibold">Status</th>
            </tr>
          </thead>
          <tbody>
            {[
              ['AI & ML', 312, 410, 'Gap', 'text-red-500'],
              ['UI/UX DESIGN', 285, 265, 'Balanced', 'text-green-600'],
              ['DATA SCIENCE', 196, 280, 'Gap', 'text-red-500'],
              ['RESPONSIBLE AI FORUM', 196, 280, 'Gap', 'text-red-500'],
              ['PRODUCT MGMT', 168, 145, 'Surplus', 'text-amber-500'],
              ['DEVELOPMENT', 152, 198, 'Gap', 'text-red-500'],
            ].map((r, i) => (
              <tr key={i} className="border-b border-neutral-100 last:border-0 hover:bg-neutral-50">
                <td className="px-5 py-3 font-bold">{r[0]}</td>
                <td className="px-3 py-3 num-tabular">{r[1]}</td>
                <td className="px-3 py-3 num-tabular">{r[2]}</td>
                <td className={`px-3 py-3 font-medium ${r[4]}`}>{r[3]}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="flex items-center justify-between mb-3">
        <h3 className="font-bold">Expert Leaderboard</h3>
        <div className="flex gap-2">
          <SearchBox placeholder="Search leaderboard" className="w-[240px]" />
          <button className="h-10 px-3 border border-neutral-300 rounded-lg text-xs">View All</button>
        </div>
      </div>
      <div className="bg-white border border-neutral-200 rounded-2xl overflow-x-auto mb-6">
        <table className="w-full text-xs">
          <thead>
            <tr className="bg-neutral-50 border-b border-neutral-100 text-neutral-500 uppercase tracking-wide">
              <th className="text-left px-5 py-3 font-semibold">Rank</th>
              <th className="text-left px-3 py-3 font-semibold">Expert</th>
              <th className="text-left px-3 py-3 font-semibold">Programmes coached</th>
              <th className="text-left px-3 py-3 font-semibold">Expertise</th>
              <th className="text-left px-3 py-3 font-semibold">Bookings</th>
              <th className="text-left px-3 py-3 font-semibold">Rating</th>
              <th className="text-left px-3 py-3 font-semibold">Revenue</th>
              <th className="text-left px-3 py-3 font-semibold">Response time</th>
            </tr>
          </thead>
          <tbody>
            {ALL_EXPERTS.slice(0, 7).map((x, i) => (
              <tr key={x.id} className="border-b border-neutral-100 last:border-0 hover:bg-neutral-50">
                <td className="px-5 py-3"><span className="w-7 h-7 inline-flex items-center justify-center rounded-full bg-neutral-900 text-white text-xs font-bold">{i + 1}</span></td>
                <td className="px-3 py-3 font-bold">{x.name}</td>
                <td className="px-3 py-3 text-green-600">AI4U • AI Literacy <span className="px-1.5 py-0.5 bg-neutral-100 text-[11px] rounded ml-1 text-neutral-600">{i + 1}</span></td>
                <td className="px-3 py-3">{x.expertise}</td>
                <td className="px-3 py-3 num-tabular">{x.bookings}</td>
                <td className="px-3 py-3"><span className="inline-flex items-center gap-1">{x.rating} <Icon name="star" size={10} fill="#FBBF24" strokeWidth={0} /></span></td>
                <td className="px-3 py-3 num-tabular">{x.revenue}</td>
                <td className="px-3 py-3">{x.response}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <h3 className="font-bold mb-3">Client Satisfaction</h3>
      <FeedbackBlock avg={4.6} count={892} />
    </AnalyticsShell>
  );
}

/* ===== All Experts ===== */
function AllExpertsPage() {
  return (
    <AnalyticsShell active="/app/analytics/expertise">
      <Link to="/app/analytics/expertise" className="inline-flex items-center gap-2 text-sm text-neutral-700 hover:text-neutral-900 mb-4"><Icon name="chevronLeft" size={14} /> Back to expertise</Link>
      <APageHeader title="All Experts" subtitle="Browse the full catalogue. Click any row to open details."
        action={<div className="flex gap-2"><SearchBox placeholder="Search expert by name, focus, or lead..." className="w-[320px]" /><ExportBtn /></div>}
      />
      <div className="bg-white border border-neutral-200 rounded-2xl overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-neutral-100 text-neutral-500 uppercase tracking-wide text-xs">
              <th className="text-left px-5 py-3 font-semibold">Expert</th>
              <th className="text-left px-3 py-3 font-semibold">Expertise</th>
              <th className="text-left px-3 py-3 font-semibold">Rate</th>
              <th className="text-left px-3 py-3 font-semibold">Availability</th>
              <th className="text-left px-3 py-3 font-semibold">Bookings</th>
              <th className="text-left px-3 py-3 font-semibold">Rating</th>
              <th className="text-left px-3 py-3 font-semibold">Response</th>
              <th className="text-left px-3 py-3 font-semibold">Revenue</th>
            </tr>
          </thead>
          <tbody>
            {ALL_EXPERTS.map(x => (
              <tr key={x.id} className="border-b border-neutral-100 last:border-0 hover:bg-neutral-50 cursor-pointer">
                <td className="px-5 py-3"><Link to={`/app/analytics/expertise/${x.id}`} className="font-bold">{x.name}</Link></td>
                <td className="px-3 py-3 text-neutral-700">{x.expertise}</td>
                <td className="px-3 py-3 text-neutral-600">{x.rate}</td>
                <td className={`px-3 py-3 font-medium ${x.availability === 'Available' ? 'text-green-600' : 'text-amber-500'}`}>{x.availability}</td>
                <td className="px-3 py-3 num-tabular">{x.bookings}</td>
                <td className="px-3 py-3"><span className="inline-flex items-center gap-1">{x.rating} <Icon name="star" size={10} fill="#FBBF24" strokeWidth={0} /></span></td>
                <td className="px-3 py-3">{x.response}</td>
                <td className="px-3 py-3 num-tabular">{x.revenue}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <div className="flex items-center justify-between px-5 py-4">
          <span className="text-sm text-neutral-500">Showing 1-15 of 40</span>
          <Pagination />
        </div>
      </div>
    </AnalyticsShell>
  );
}

/* ===== Expert Detail ===== */
function ExpertDetailPage({ id }) {
  const x = ALL_EXPERTS.find(e => e.id === id) || ALL_EXPERTS[0];
  return (
    <AnalyticsShell active="/app/analytics/expertise">
      <Link to="/app/analytics/expertise/all" className="inline-flex items-center gap-2 text-sm text-neutral-700 hover:text-neutral-900 mb-4"><Icon name="chevronLeft" size={14} /> Back to all experts</Link>
      <div className="flex items-start justify-between mb-2 flex-wrap gap-4">
        <div className="flex items-start gap-4">
          <div className="w-12 h-12 rounded-full bg-cyan-500" />
          <div>
            <h1 className="text-3xl font-bold inline-flex items-center gap-3">{x.name.split(' ').map(w => w[0] + w.slice(1).toLowerCase()).join(' ')} <span className="text-sm font-medium text-green-600">{x.availability}</span></h1>
            <p className="text-sm mt-1 inline-flex items-center gap-2"><span className="w-1.5 h-1.5 rounded-full bg-cyan-500" /> <span className="text-cyan-600">Expert</span> <span className="text-neutral-400">•</span> {x.expertise} <span className="text-neutral-400">•</span> {x.rate}</p>
          </div>
        </div>
        <div className="flex gap-2">
          <SearchBox placeholder="Search..." className="w-[200px]" />
          <button className="h-10 px-4 border border-neutral-300 rounded-lg text-sm font-medium hover:bg-neutral-50">Bookings</button>
          <ExportBtn />
        </div>
      </div>

      <h2 className="text-xl font-bold mt-6 mb-4">Overview</h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
        <StatBox label="Bookings" value="142" />
        <StatBox label="Rating" value="4.9 ★" />
        <StatBox label="Revenue" value="RM 72,400" />
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
        <StatBox label="Avg Response Time" value="42m" />
        <StatBox label="Repeat Client" value="74%" />
        <div />
      </div>

      <div className="bg-white border border-neutral-200 rounded-2xl p-5 mb-6">
        <h3 className="font-bold mb-2">About</h3>
        <p className="text-sm text-neutral-700 mb-3">Former Google AI researcher with 15 years of experience in machine learning and AI strategy. Chris is Mereka's most-booked expert, specializing in helping organizations develop and implement AI strategies. He coaches in 2 programmes and has helped 50+ companies with AI adoption roadmaps.</p>
        <h4 className="font-bold mb-2 text-sm">Skills</h4>
        <p className="text-sm text-neutral-700">AI Strategy • Machine Learning • Deep Learning • Prompt Engineering • Product AI • AI Ethics</p>
      </div>

      <h3 className="font-bold mb-3">Programmes Coached (6)</h3>
      <div className="space-y-3 mb-8">
        <div className="bg-white border border-neutral-200 rounded-xl p-4">
          <p className="font-bold text-sm">AI4U</p>
          <p className="text-xs text-neutral-500">Cohort 3 Feb 2026 • Cohort 4 Apr 2026</p>
        </div>
        <div className="bg-white border border-neutral-200 rounded-xl p-4">
          <p className="font-bold text-sm">CAREER ACCELERATOR</p>
          <p className="text-xs text-neutral-500">Cohort 3 Feb 2026 • Cohort 4 Apr 2026</p>
        </div>
      </div>

      <h3 className="font-bold mb-3">Recent Bookings</h3>
      <div className="bg-white border border-neutral-200 rounded-2xl overflow-x-auto mb-8">
        <table className="w-full text-xs">
          <thead>
            <tr className="border-b border-neutral-100 text-neutral-500 uppercase tracking-wide">
              <th className="text-left px-5 py-3 font-semibold">Client</th>
              <th className="text-left px-3 py-3 font-semibold">Type</th>
              <th className="text-left px-3 py-3 font-semibold">Date</th>
              <th className="text-left px-3 py-3 font-semibold">Duration</th>
              <th className="text-left px-3 py-3 font-semibold">Status</th>
              <th className="text-left px-3 py-3 font-semibold">Topic</th>
            </tr>
          </thead>
          <tbody>
            {[
              ['LAYLA WONG', 'layla.wong@mereka.my', 'Programme', '22 Apr 2026', '2h', 'Completed', 'AI adoption roadmap', 'green'],
              ['RAVI KUMAR', 'ravi.kumar@outlook.com', '1:1', '15 May 2026', '1.5h', 'Pending', 'Machine Learning Basics', 'amber'],
              ['SOFIA CHEN', 'sofia.chen@gmail.com', 'Programme', '30 May 2026', '1h', 'Confirmed', 'User Experience Innovations', 'green'],
              ['LIAM JOHNSON', 'liam.johnson@example.com', 'Design Sprint', '15 June 2026', '1.5h', 'Cancelled', 'Product Design Strategy', 'red'],
              ['AVA MARTINEZ', 'ava.martinez@yahoo.com', 'Workshop', '22 July 2026', '1h', 'Confirmed', 'Interactive Prototyping', 'green'],
            ].map(([n, e, t, d, dur, s, top, tone], i) => (
              <tr key={i} className="border-b border-neutral-100 last:border-0 hover:bg-neutral-50">
                <td className="px-5 py-3"><p className="font-bold">{n}</p><p className="text-[11px] text-neutral-500">{e}</p></td>
                <td className="px-3 py-3">{t}</td>
                <td className="px-3 py-3">{d}</td>
                <td className="px-3 py-3">{dur}</td>
                <td className={`px-3 py-3 font-medium ${tone === 'green' ? 'text-green-600' : tone === 'amber' ? 'text-amber-500' : 'text-red-500'}`}>{s}</td>
                <td className="px-3 py-3">{top}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <div className="flex items-center justify-between px-5 py-4">
          <span className="text-sm text-neutral-500">Showing 1-5 of 142</span>
          <Pagination />
        </div>
      </div>

      <FeedbackBlock avg={4.3} count={284} quotes={[
        '"Chris helped us define a 3-year AI roadmap in a single 3-hour session. Worth every sen."',
        '"The best AI coach I\'ve had. Patient, knowledgeable, and genuinely invested in my growth."',
      ]} />
    </AnalyticsShell>
  );
}

/* =================================================================
   COURSE ANALYTICS
   ================================================================= */
function CourseAnalyticsPage() {
  return (
    <AnalyticsShell active="/app/analytics/courses">
      <APageHeader title="Course Analytics" subtitle="Self-paced learning modules — enrollment, completion, and cross-programme reuse"
        action={
          <div className="flex items-center gap-2">
            <Link to="/app/analytics/courses/all"><button className="h-10 px-4 border border-neutral-300 rounded-lg text-sm font-medium hover:bg-neutral-50">View All Courses</button></Link>
            <ExportBtn />
          </div>
        }
      />

      <FilterRow items={[
        { label: 'Programme', value: 'Selected', count: 3, dot: '#22C55E' },
        { label: 'Courses', value: 'All', count: 5, dot: '#EC4899' },
        { label: 'Categories', value: 'All', count: 3, dot: '#EC4899' },
        { label: 'Instructors', value: 'All', count: 7, dot: '#EC4899' },
        { label: 'Results', value: 'All' },
      ]} />

      <h2 className="text-xl font-bold mb-4">Overview</h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
        <StatBox label="Total Courses" value="42" delta="+4" sub="published this period" />
        <StatBox label="Total Enrolments" value="4,218" delta="+22.1%" sub="vs last period • deduped" />
        <StatBox label="Completion Rate" value="72%" delta="+3.4 pts" sub="modules finished" />
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-10">
        <StatBox label="Avg Rating" value="4.3 ★" delta="+0.1" sub="2,128 reviews" />
        <StatBox label="Revenue" value="RM 284K" delta="+18.8%" sub="YTD" />
        <StatBox label="Certificates Issued" value="2,148" delta="+18.2%" sub="learners" />
      </div>

      <div className="flex items-center justify-between mb-3">
        <div>
          <h3 className="font-bold">Learning Engagement & Drop-off Patterns</h3>
          <p className="text-xs text-neutral-500">Where learners stall inside a course and when they actually engage — use to retune course design</p>
        </div>
        <div className="flex items-center gap-2">
          <button className="px-3 h-7 bg-neutral-900 text-white rounded-full text-xs font-semibold">Top 5 courses</button>
          <button className="px-3 h-7 border border-neutral-300 rounded-full text-xs">By category</button>
          <button className="px-3 h-7 border border-neutral-300 rounded-full text-xs">By instructor</button>
        </div>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-5 mb-6">
        <div className="bg-white border border-neutral-200 rounded-2xl p-5">
          <p className="text-xs font-bold text-neutral-500 mb-3">MODULE-BY-MODULE RETENTION</p>
          {[
            ['Gen AI Fundamentals', '1,284 started · 1,052 certified 82%', 'Flattest curve · reference course'],
            ['Python for Data', '612 started · 453 certified 74%', 'Module 4: Pandas trend loses 13 pts — candidate for prerequisite or split'],
            ['UX Research Masterclass', '842 started · 657 certified 78%', 'Healthy · uniform ~4pt decay per module'],
            ['Responsible AI Ethics', '418 started · 284 certified 68%', 'Module 2 drops 24pt — audit content pacing'],
            ['Intro to No-code', '318 started · 153 certified 48%', 'Standalone · cumulative -52pt to end. Biggest leak on the platform.'],
          ].map((r, i) => (
            <div key={i} className="mb-4 last:mb-0">
              <div className="flex items-center justify-between mb-1">
                <span className="font-bold text-xs">{r[0]}</span>
                <span className="text-xs text-neutral-500">{r[1]}</span>
              </div>
              <div className="flex h-2 gap-1 mb-1">
                {Array.from({ length: 8 }).map((_, j) => (
                  <div key={j} className="flex-1 rounded" style={{ background: i === 4 && j > 3 ? '#FBBF24' : `oklch(0.${85 - j * 5} 0.18 ${i === 4 ? 60 : 350})` }} />
                ))}
              </div>
              <p className="text-[11px] text-neutral-500">{r[2]}</p>
            </div>
          ))}
        </div>
        <div className="bg-white border border-neutral-200 rounded-2xl p-5">
          <p className="text-xs font-bold text-neutral-500 mb-3">PEAK LEARNING TIMES (ALL COURSES)</p>
          <div className="grid grid-cols-1 lg:grid-cols-[40px_repeat(7,1fr)] gap-0.5">
            <span />
            {['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map(d => <span key={d} className="text-[11px] text-neutral-500 text-center">{d}</span>)}
            {['6a', '9a', '12p', '3p', '6p', '9p', '12a'].map((h, i) => (
              <React.Fragment key={h}>
                <span className="text-[11px] text-neutral-500 self-center">{h}</span>
                {[0, 1, 2, 3, 4, 5, 6].map(d => {
                  const v = (i === 3 || i === 4) && (d < 5) ? 0.9 :
                    (i === 1 || i === 2) ? 0.5 : 0.2;
                  return <div key={d} className="h-5 rounded" style={{ background: `oklch(0.${50 + (1 - v) * 40} 0.15 350)` }} />;
                })}
              </React.Fragment>
            ))}
          </div>
          <div className="flex items-center gap-1 mt-3 text-[11px] text-neutral-500">
            <span>Low</span>
            {[1, 2, 3, 4, 5, 6, 7].map(i => <div key={i} className="w-3 h-3 rounded" style={{ background: `oklch(0.${85 - i * 8} 0.15 350)` }} />)}
            <span>High</span>
            <span className="ml-auto">Peak: Tue–Wed, 6–9 PM</span>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-4 pt-4 border-t border-neutral-100">
            <div><p className="text-xs text-neutral-500">Avg session length</p><p className="text-xl font-bold">42 min</p></div>
            <div><p className="text-xs text-neutral-500">Resume rate</p><p className="text-xl font-bold">71%</p></div>
            <div><p className="text-xs text-neutral-500">Mobile vs desktop</p><p className="text-xl font-bold">38% / 62%</p></div>
            <div><p className="text-xs text-neutral-500">Most-rewatched module</p><p className="text-xl font-bold">GenAI · M3</p></div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-10">
        {Array.from({ length: 3 }, (_, i) => (
          <KeyInsightCard key={i} body="Members enrolled in both Programmes and Experiences show 41% higher completion rates and 28% better employment outcomes. Experiences reinforce Programme learning and create stronger career pathways." />
        ))}
      </div>

      <div className="flex items-center justify-between mb-3">
        <h3 className="font-bold">Enrolment Funnel</h3>
        <p className="text-xs text-neutral-500">Filtered to selected courses &amp; programmes</p>
      </div>
      <div className="bg-white border border-neutral-200 rounded-2xl p-5 mb-10">
        {[
          ['Catalogue views', 45200, '—'],
          ['Started preview', 12800, '-72%'],
          ['Enrolled', 6400, '-50%'],
          ['Active', 4200, '-34%'],
          ['Completed ≥1 module', 3500, '-17%'],
          ['Certified', 3180, '-11%'],
        ].map(([l, v, d]) => (
          <HBar key={l} label={l} value={v} max={45200} delta={d} color="#EC4899" />
        ))}
      </div>

      <h3 className="font-bold mb-3">Enrolment Trend</h3>
      <div className="bg-white border border-neutral-200 rounded-2xl p-5 mb-10">
        <div className="flex items-center justify-end gap-4 mb-3 text-xs">
          <span className="inline-flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-pink-500" />Program-linked</span>
          <span className="inline-flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-purple-300" />Standalone</span>
        </div>
        <svg viewBox="0 0 800 200" className="w-full">
          <polyline points="50,160 150,150 250,140 350,120 450,100 550,80 650,60 750,40" stroke="#EC4899" strokeWidth={2.5} fill="none" />
          <polyline points="50,180 150,178 250,177 350,176 450,175 550,174 650,173 750,172" stroke="#A855F7" strokeWidth={2} fill="none" opacity={0.5} />
          {['Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr'].map((m, i) => (
            <text key={m} x={50 + i * 116} y={195} textAnchor="middle" fontSize={10} fill="#6B7280">{m}</text>
          ))}
        </svg>
      </div>

      <div className="flex items-center justify-between mb-3">
        <div>
          <h3 className="font-bold">Course Catalogue</h3>
          <p className="text-xs text-neutral-500">Each course can live in 0, 1, or many programmes</p>
        </div>
        <ExportBtn />
      </div>
      <div className="bg-white border border-neutral-200 rounded-2xl overflow-x-auto mb-10">
        <table className="w-full text-xs">
          <thead>
            <tr className="bg-neutral-50 border-b border-neutral-100 text-neutral-500 uppercase tracking-wide">
              <th className="text-left px-5 py-3 font-semibold">Course name</th>
              <th className="text-left px-3 py-3 font-semibold">Programmes</th>
              <th className="text-left px-3 py-3 font-semibold">Category</th>
              <th className="text-left px-3 py-3 font-semibold">Instructor</th>
              <th className="text-left px-3 py-3 font-semibold">Enrolled</th>
              <th className="text-left px-3 py-3 font-semibold">Completion</th>
              <th className="text-left px-3 py-3 font-semibold">Rating</th>
              <th className="text-left px-3 py-3 font-semibold">Revenue</th>
            </tr>
          </thead>
          <tbody>
            {ALL_COURSES.slice(0, 6).map(c => (
              <tr key={c.id} className="border-b border-neutral-100 last:border-0 hover:bg-neutral-50">
                <td className="px-5 py-3"><p className="font-bold">{c.name}</p><p className="text-[11px] text-neutral-500">{c.meta}</p></td>
                <td className="px-3 py-3 text-green-600">AI4U • AI Literacy <span className="px-1.5 py-0.5 bg-neutral-100 text-[11px] rounded text-neutral-600">2</span></td>
                <td className="px-3 py-3">{c.category}</td>
                <td className="px-3 py-3">{c.instructor}</td>
                <td className="px-3 py-3 num-tabular">{c.enrolled.toLocaleString()}</td>
                <td className="px-3 py-3">
                  <div className="flex items-center gap-1.5">
                    <div className="w-12 h-1.5 bg-neutral-100 rounded-full overflow-hidden"><div className="h-full bg-green-500" style={{ width: c.completion + '%' }} /></div>
                    <span className="text-green-600 num-tabular">{c.completion}%</span>
                  </div>
                </td>
                <td className="px-3 py-3"><span className="inline-flex items-center gap-1">{c.rating} <Icon name="star" size={10} fill="#FBBF24" strokeWidth={0} /></span></td>
                <td className="px-3 py-3 num-tabular">{c.revenue}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-6">
        <div>
          <div className="flex items-center justify-between mb-3">
            <div><h3 className="font-bold">Course Health Leaderboard</h3><p className="text-[11px] text-neutral-500">Composite score = completion · rating · engagement · refund rate</p></div>
            <button className="text-xs">Ranked</button>
          </div>
          <div className="bg-white border border-neutral-200 rounded-2xl overflow-hidden">
            <div className="px-5 py-3 border-b border-neutral-100">
              <p className="text-xs font-bold text-neutral-700">TOP PERFORMERS</p>
            </div>
            {[
              ['1', 'GEN AI FUNDAMENTALS', 'AI & ML • 4.9★ • 92% complete', '96'],
              ['2', 'DESIGN THINKING 101', 'AI & ML • 4.9★ • 92% complete', '91'],
              ['3', 'RESPONSIBLE AI ETHICS', 'AI & ML • 4.7★ • 84% complete', '88'],
              ['4', 'PRODUCT DISCOVERY SPRINT', 'Product • 4.6★ • 81% complete', '84'],
              ['5', 'STORYTELLING FOR FOUNDERS', 'Marketing • 4.6★ • 79% complete', '81'],
            ].map(([rank, n, sub, score]) => (
              <div key={rank} className="grid grid-cols-1 lg:grid-cols-[20px_1fr_40px] gap-3 px-5 py-3 border-b border-neutral-100 last:border-0">
                <span className="text-xs font-bold">{rank}</span>
                <div><p className="text-xs font-bold">{n}</p><p className="text-[11px] text-neutral-500">{sub}</p></div>
                <span className="text-xs font-bold text-right num-tabular">{score}</span>
              </div>
            ))}
          </div>
        </div>
        <div>
          <h3 className="font-bold mb-3 invisible">Needs Attention</h3>
          <div className="bg-white border border-neutral-200 rounded-2xl overflow-hidden">
            <div className="px-5 py-3 border-b border-neutral-100">
              <p className="text-xs font-bold text-neutral-700">NEEDS ATTENTION</p>
            </div>
            {[
              ['1', 'PYTHON FOR DATA', '38% drop at Module 4 • 14% refund rate', '52', 'Re-record M4 Lab'],
              ['2', 'INTRO TO NO-CODE', 'Low engagement after M4 • stale content (2024)', '58', 'Refresh + add 2026 tools'],
              ['3', 'MARKETING ANALYTICS 101', '3.2★ rating • "too theoretical" feedback x12', '61', 'Add case-study module'],
            ].map(([rank, n, sub, score, action]) => (
              <div key={rank} className="grid grid-cols-1 lg:grid-cols-[20px_1fr_40px] gap-3 px-5 py-3 border-b border-neutral-100 last:border-0">
                <span className="text-xs font-bold">{rank}</span>
                <div><p className="text-xs font-bold">{n}</p><p className="text-[11px] text-neutral-500">{sub}</p><p className="text-[11px] text-red-500 mt-0.5">{action}</p></div>
                <span className="text-xs font-bold text-right num-tabular text-red-500">{score}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <h3 className="font-bold mb-3">Category Mix</h3>
      <div className="bg-white border border-neutral-200 rounded-2xl p-5 mb-10">
        {[
          ['AI & ML', 9, 100],
          ['Design', 6, 70],
          ['Data', 5, 60],
          ['Product', 4, 50],
          ['Dev', 3, 40],
          ['Marketing', 3, 35],
        ].map(([cat, n, max]) => (
          <div key={cat} className="grid grid-cols-1 lg:grid-cols-[80px_1fr_30px] items-center gap-3 text-xs mb-2.5">
            <span>{cat}</span>
            <div className="h-3 rounded-full overflow-hidden bg-pink-100"><div className="h-full bg-pink-500" style={{ width: max + '%' }} /></div>
            <span className="text-right num-tabular">{n}</span>
          </div>
        ))}
        <div className="grid grid-cols-1 lg:grid-cols-[80px_1fr_30px] text-[11px] text-neutral-500"><span>CATEGORY</span><span /><span>COURSES</span></div>
      </div>
    </AnalyticsShell>
  );
}

/* ===== All Courses ===== */
function AllCoursesPage() {
  return (
    <AnalyticsShell active="/app/analytics/courses">
      <Link to="/app/analytics/courses" className="inline-flex items-center gap-2 text-sm text-neutral-700 hover:text-neutral-900 mb-4"><Icon name="chevronLeft" size={14} /> Back to courses</Link>
      <APageHeader title="All courses" subtitle="Browse the full catalogue. Click any row to open details."
        action={<div className="flex gap-2"><SearchBox placeholder="Search course by name, focus, or lead..." className="w-[320px]" /><ExportBtn /></div>}
      />
      <div className="bg-white border border-neutral-200 rounded-2xl overflow-x-auto">
        <table className="w-full text-xs">
          <thead>
            <tr className="border-b border-neutral-100 text-neutral-500 uppercase tracking-wide">
              <th className="text-left px-5 py-3 font-semibold">Course</th>
              <th className="text-left px-3 py-3 font-semibold">Category</th>
              <th className="text-left px-3 py-3 font-semibold">Instructor</th>
              <th className="text-left px-3 py-3 font-semibold">Link</th>
              <th className="text-left px-3 py-3 font-semibold">Hours</th>
              <th className="text-left px-3 py-3 font-semibold">Enrolled</th>
              <th className="text-left px-3 py-3 font-semibold">Completion</th>
              <th className="text-left px-3 py-3 font-semibold">Rating</th>
              <th className="text-left px-3 py-3 font-semibold">Revenue</th>
            </tr>
          </thead>
          <tbody>
            {ALL_COURSES.map(c => (
              <tr key={c.id} className="border-b border-neutral-100 last:border-0 hover:bg-neutral-50 cursor-pointer">
                <td className="px-5 py-3">
                  <Link to={`/app/analytics/courses/${c.id}`} className="block">
                    <p className="font-bold">{c.name}</p>
                    <p className="text-[11px] text-neutral-500">{c.meta}</p>
                  </Link>
                </td>
                <td className="px-3 py-3">{c.category}</td>
                <td className="px-3 py-3">{c.instructor}</td>
                <td className={`px-3 py-3 ${c.linkTone === 'green' ? 'text-green-600' : 'text-neutral-500'}`}>{c.link}</td>
                <td className="px-3 py-3">{c.hours}</td>
                <td className="px-3 py-3 num-tabular">{c.enrolled.toLocaleString()}</td>
                <td className="px-3 py-3">
                  <div className="flex items-center gap-1.5">
                    <div className="w-12 h-1.5 bg-neutral-100 rounded-full overflow-hidden"><div className={`h-full ${c.completion >= 80 ? 'bg-green-500' : c.completion >= 70 ? 'bg-amber-500' : 'bg-red-500'}`} style={{ width: c.completion + '%' }} /></div>
                    <span className={`num-tabular ${c.completion >= 80 ? 'text-green-600' : c.completion >= 70 ? 'text-amber-500' : 'text-red-500'}`}>{c.completion}%</span>
                  </div>
                </td>
                <td className="px-3 py-3"><span className="inline-flex items-center gap-1">{c.rating} <Icon name="star" size={10} fill="#FBBF24" strokeWidth={0} /></span></td>
                <td className="px-3 py-3 num-tabular">{c.revenue}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <div className="flex items-center justify-between px-5 py-4">
          <span className="text-sm text-neutral-500">Showing 1-10 of 40</span>
          <Pagination />
        </div>
      </div>
    </AnalyticsShell>
  );
}

/* ===== Course Detail ===== */
function CourseDetailPage({ id }) {
  const c = ALL_COURSES.find(x => x.id === id) || ALL_COURSES[0];
  return (
    <AnalyticsShell active="/app/analytics/courses">
      <Link to="/app/analytics/courses/all" className="inline-flex items-center gap-2 text-sm text-neutral-700 hover:text-neutral-900 mb-4"><Icon name="chevronLeft" size={14} /> Back to all experts</Link>
      <div className="flex items-start justify-between mb-2 flex-wrap gap-4">
        <div>
          <h1 className="text-3xl font-bold inline-flex items-center gap-3">Gen AI Fundamentals <span className="text-sm font-medium text-green-600">Open</span></h1>
          <p className="text-sm mt-1 inline-flex items-center gap-2"><span className="w-1.5 h-1.5 rounded-full bg-pink-500" /> <span className="text-pink-600">Course</span> <span className="text-neutral-400">•</span> 12h <span className="text-neutral-400">•</span> 8 modules</p>
        </div>
        <div className="flex gap-2">
          <SearchBox placeholder="Search..." className="w-[200px]" />
          <button className="h-10 px-4 border border-neutral-300 rounded-lg text-sm font-medium hover:bg-neutral-50">Learners</button>
          <ExportBtn />
        </div>
      </div>

      <h2 className="text-xl font-bold mt-6 mb-4">Overview</h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
        <StatBox label="Enrolled" value="1,284" sub="view members" />
        <StatBox label="Completion" value="82%" />
        <StatBox label="Rating" value="4.9 ★" />
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
        <StatBox label="Revenue" value="RM 68,400" />
        <StatBox label="Health Score" value="96" />
        <div />
      </div>

      <div className="bg-white border border-neutral-200 rounded-2xl p-5 mb-6">
        <h3 className="font-bold mb-2">About</h3>
        <p className="text-sm text-neutral-700 mb-3">A comprehensive introduction to generative AI technologies, covering large language models, image generation, prompt engineering, and responsible deployment. Students build 4 hands-on projects including a chatbot, content generator, and AI-powered data analyst.</p>
        <h4 className="font-bold mb-2 text-sm">Skills</h4>
        <p className="text-sm text-neutral-700">AI Strategy • Machine Learning • Deep Learning • Prompt Engineering • Product AI • AI Ethics</p>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-5 mb-8">
        <div>
          <h3 className="font-bold mb-3">Instructors (2)</h3>
          <div className="space-y-3">
            {['CHRIS WALES', 'JASON BROWN'].map(n => (
              <div key={n} className="bg-white border border-neutral-200 rounded-xl p-4">
                <p className="font-bold text-sm">{n}</p>
                <p className="text-xs text-neutral-700 my-2">Former Google AI researcher with 15 years of experience in machine learning and AI strategy. Chris is Mereka's most-booked expert, specializing in helping organizations develop and implement AI strategies. He coaches in 2 programmes and has helped 50+ companies with AI adoption roadmaps.</p>
                <p className="font-bold text-xs mt-3">Skills</p>
                <p className="text-xs text-neutral-700">AI Strategy • Machine Learning • Deep Learning • Prompt Engineering • Product AI • AI Ethics</p>
              </div>
            ))}
          </div>
        </div>
        <div>
          <h3 className="font-bold mb-3">Used in</h3>
          <div className="space-y-3">
            {[['AI4U', 'Programme'], ['CAREER ACCELERATOR', 'Programme']].map(([n, t]) => (
              <div key={n} className="bg-white border border-neutral-200 rounded-xl p-4">
                <p className="font-bold text-sm inline-flex items-center gap-2">{n} <span className="w-1 h-1 rounded-full bg-green-500" /> <span className="text-green-600 text-xs">{t}</span></p>
                <p className="text-xs text-neutral-500 mt-1">Cohort 3 Feb 2026 • Cohort 4 Apr 2026</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      <h3 className="font-bold mb-3">Modules</h3>
      <div className="bg-white border border-neutral-200 rounded-2xl overflow-hidden mb-8">
        <table className="w-full text-xs">
          <thead>
            <tr className="bg-neutral-50 border-b border-neutral-100 text-neutral-500 uppercase tracking-wide">
              <th className="text-left px-5 py-3 font-semibold w-10">#</th>
              <th className="text-left px-3 py-3 font-semibold">Module</th>
              <th className="text-left px-3 py-3 font-semibold">Avg time</th>
              <th className="text-left px-3 py-3 font-semibold">Completion</th>
            </tr>
          </thead>
          <tbody>
            {[
              [1, 'INTRODUCTION TO AI', '2h', 94],
              [2, 'MACHINE LEARNING BASICS', '3h', 88],
              [3, 'DEEP LEARNING CONCEPTS', '4h', 91],
              [4, 'NATURAL LANGUAGE PROCESSING', '2.5h', 89],
              [5, 'COMPUTER VISION FUNDAMENTALS', '3.5h', 90],
              [6, 'REINFORCEMENT LEARNING STRATEGIES', '3h', 85],
              [7, 'AI ETHICS AND BIAS', '1.5h', 92],
              [8, 'AI PRODUCT', '2h', 68],
            ].map(([n, mod, t, c]) => (
              <tr key={n} className="border-b border-neutral-100 last:border-0">
                <td className="px-5 py-3">{n}</td>
                <td className="px-3 py-3 font-bold">{mod}</td>
                <td className="px-3 py-3">{t}</td>
                <td className={`px-3 py-3 num-tabular ${c >= 80 ? 'text-green-600' : c >= 70 ? 'text-amber-500' : 'text-red-500'}`}>{c}%</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <FeedbackBlock avg={4.3} count={284} quotes={[
        '"Best course I\'ve taken on AI. Chris explains complex concepts in such an accessible way. The hands-on projects made everything click."',
        '"The prompt engineering module alone was worth the entire course fee. Already applying it at work daily."',
      ]} />
    </AnalyticsShell>
  );
}

/* =================================================================
   GIG ANALYTICS
   ================================================================= */
function GigAnalyticsPage() {
  return (
    <AnalyticsShell active="/app/analytics/gig">
      <APageHeader title="Gig Analytics" subtitle="Freelance marketplace performance, REKA.ai matching, and outcomes."
        action={
          <div className="flex items-center gap-2">
            <Link to="/app/analytics/gig/all"><button className="h-10 px-4 border border-neutral-300 rounded-lg text-sm font-medium hover:bg-neutral-50">View All Gigs</button></Link>
            <ExportBtn />
          </div>
        }
      />

      <FilterRow items={[
        { label: 'Programmes', value: 'All', count: 5, dot: '#A855F7' },
        { label: 'Categories', value: 'All', count: 5, dot: '#A855F7' },
        { label: 'Status', value: 'All', count: 3, dot: '#A855F7' },
        { label: 'Results', value: 'All' },
      ]} />

      <h2 className="text-xl font-bold mb-4">Overview</h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
        <StatBox label="Open Gigs" value="386" delta="+14.2%" sub="live" />
        <StatBox label="Completed Gigs" value="1,203" delta="+9.4%" sub="this quarter" />
        <StatBox label="Total Value" value="RM 1.8M" delta="+22.1%" sub="posted" />
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-10">
        <StatBox label="Avg Time to Fill" value="4.2 days" delta="-0.8d" sub="faster" />
        <StatBox label="Freelancer Sat" value="4.4 ★" delta="+0.2" sub="post-gig" />
        <StatBox label="Close Rate" value="62%" delta="+3.1%" sub="awarded/ posted" />
      </div>

      <h3 className="font-bold mb-3">Gig Volume Trend</h3>
      <div className="bg-white border border-neutral-200 rounded-2xl p-5 mb-10">
        <svg viewBox="0 0 800 200" className="w-full">
          <path d="M50,80 Q150,70 250,75 T450,60 T650,40 T750,30 L750,180 L50,180 Z" fill="#22C55E" opacity={0.08} />
          <path d="M50,80 Q150,70 250,75 T450,60 T650,40 T750,30" stroke="#22C55E" strokeWidth={2.5} fill="none" />
          <path d="M50,140 Q150,130 250,125 T450,110 T650,90 T750,75 L750,180 L50,180 Z" fill="#3B82F6" opacity={0.08} />
          <path d="M50,140 Q150,130 250,125 T450,110 T650,90 T750,75" stroke="#3B82F6" strokeWidth={2.5} fill="none" />
          {['SEP', 'OCT', 'NOV', 'DEC', 'JAN', 'FEB', 'MAR'].map((m, i) => (
            <text key={m} x={50 + i * 116} y={195} textAnchor="middle" fontSize={10} fill="#6B7280">{m}</text>
          ))}
        </svg>
      </div>

      <div className="flex items-center justify-between mb-3">
        <h3 className="font-bold">Category Breakdown</h3>
        <SearchBox placeholder="Search category" className="w-[240px]" />
      </div>
      <div className="bg-white border border-neutral-200 rounded-2xl p-5 mb-6">
        {[
          ['AI & ML', 312, '#A855F7'],
          ['Design', 285, '#A855F7'],
          ['Data', 196, '#A855F7'],
          ['Product', 168, '#A855F7'],
          ['Dev', 152, '#A855F7'],
          ['Marketing', 134, '#A855F7'],
        ].map(([cat, n, color]) => (
          <div key={cat} className="grid grid-cols-1 lg:grid-cols-[80px_1fr_60px] items-center gap-3 text-xs mb-2.5">
            <span>{cat}</span>
            <div className="h-3 rounded-full overflow-hidden bg-purple-100">
              <div className="h-full" style={{ width: (n / 320) * 100 + '%', background: color }} />
            </div>
            <span className="text-right num-tabular">{n}</span>
          </div>
        ))}
      </div>

      <div className="flex items-center justify-between mb-3">
        <h3 className="font-bold">Category & Budget</h3>
        <SearchBox placeholder="Search category" className="w-[240px]" />
      </div>
      <div className="bg-white border border-neutral-200 rounded-2xl overflow-hidden mb-10">
        <table className="w-full text-xs">
          <thead>
            <tr className="bg-neutral-50 border-b border-neutral-100 text-neutral-500 uppercase tracking-wide">
              <th className="text-left px-5 py-3 font-semibold">Category</th>
              <th className="text-left px-3 py-3 font-semibold">Active gigs</th>
              <th className="text-left px-3 py-3 font-semibold">Avg budget</th>
            </tr>
          </thead>
          <tbody>
            {[
              ['AI & ML', 92, 'RM 12K'],
              ['UI/UX DESIGN', 78, 'RM 8K'],
              ['DATA SCIENCE', 65, 'RM 9.5K'],
              ['RESPONSIBLE AI FORUM', 58, 'RM 3.2K'],
              ['PRODUCT MGMT', 45, 'RM 5K'],
              ['DEVELOPMENT', 48, 'RM 13K'],
            ].map(r => (
              <tr key={r[0]} className="border-b border-neutral-100 last:border-0 hover:bg-neutral-50">
                <td className="px-5 py-3 font-bold">{r[0]}</td>
                <td className="px-3 py-3 num-tabular">{r[1]}</td>
                <td className="px-3 py-3 num-tabular">{r[2]}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <h3 className="font-bold mb-3">Freelancer Earnings Distribution</h3>
      <div className="bg-white border border-neutral-200 rounded-2xl overflow-hidden mb-6">
        <table className="w-full text-xs">
          <thead>
            <tr className="bg-neutral-50 border-b border-neutral-100 text-neutral-500 uppercase tracking-wide">
              <th className="text-left px-5 py-3 font-semibold">Earnings/mo</th>
              <th className="text-left px-3 py-3 font-semibold" />
              <th className="text-left px-3 py-3 font-semibold w-32">Freelancers</th>
            </tr>
          </thead>
          <tbody>
            {[
              ['< RM 2K', 28, 337],
              ['RM 2-5K', 41, 492],
              ['RM 5-10K', 22, 265],
              ['> RM 10K', 9, 108],
            ].map(([l, p, n]) => (
              <tr key={l} className="border-b border-neutral-100 last:border-0">
                <td className="px-5 py-3 font-medium">{l}</td>
                <td className="px-3 py-3">
                  <div className="h-3 rounded-full overflow-hidden bg-purple-100"><div className="h-full bg-purple-500" style={{ width: p + '%' }} /></div>
                </td>
                <td className="px-3 py-3 num-tabular">{n} ({p}%)</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </AnalyticsShell>
  );
}

/* ===== All Gigs ===== */
function AllGigsPage() {
  return (
    <AnalyticsShell active="/app/analytics/gig">
      <Link to="/app/analytics/gig" className="inline-flex items-center gap-2 text-sm text-neutral-700 hover:text-neutral-900 mb-4"><Icon name="chevronLeft" size={14} /> Back to gigs</Link>
      <APageHeader title="All gigs" subtitle="Browse the full catalogue. Click any row to open details."
        action={<div className="flex gap-2"><SearchBox placeholder="Search gig by name, focus, or lead..." className="w-[320px]" /><ExportBtn /></div>}
      />
      <div className="bg-white border border-neutral-200 rounded-2xl overflow-x-auto">
        <table className="w-full text-xs">
          <thead>
            <tr className="border-b border-neutral-100 text-neutral-500 uppercase tracking-wide">
              <th className="text-left px-5 py-3 font-semibold">Gig</th>
              <th className="text-left px-3 py-3 font-semibold">Category</th>
              <th className="text-left px-3 py-3 font-semibold">Client</th>
              <th className="text-left px-3 py-3 font-semibold">Status</th>
              <th className="text-left px-3 py-3 font-semibold">Budget</th>
              <th className="text-left px-3 py-3 font-semibold">Proposals</th>
              <th className="text-left px-3 py-3 font-semibold">Posted</th>
              <th className="text-left px-3 py-3 font-semibold">Duration</th>
            </tr>
          </thead>
          <tbody>
            {ALL_GIGS.map(g => (
              <tr key={g.id} className="border-b border-neutral-100 last:border-0 hover:bg-neutral-50 cursor-pointer">
                <td className="px-5 py-3"><Link to={`/app/analytics/gig/${g.id}`} className="font-bold">{g.name}</Link></td>
                <td className="px-3 py-3">{g.category}</td>
                <td className="px-3 py-3">{g.client}</td>
                <td className={`px-3 py-3 font-medium ${g.status === 'Open' ? 'text-green-600' : g.status === 'In progress' ? 'text-amber-500' : 'text-neutral-500'}`}>{g.status}</td>
                <td className="px-3 py-3 num-tabular">{g.budget}</td>
                <td className="px-3 py-3 num-tabular">{g.proposals}</td>
                <td className="px-3 py-3">{g.posted}</td>
                <td className="px-3 py-3">{g.duration}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <div className="flex items-center justify-between px-5 py-4">
          <span className="text-sm text-neutral-500">Showing 1-15 of 40</span>
          <Pagination />
        </div>
      </div>
    </AnalyticsShell>
  );
}

/* ===== Gig Detail ===== */
function GigDetailPage({ id }) {
  const g = ALL_GIGS.find(x => x.id === id) || ALL_GIGS[0];
  return (
    <AnalyticsShell active="/app/analytics/gig">
      <Link to="/app/analytics/gig/all" className="inline-flex items-center gap-2 text-sm text-neutral-700 hover:text-neutral-900 mb-4"><Icon name="chevronLeft" size={14} /> Back to all gigs</Link>
      <div className="flex items-start justify-between mb-2 flex-wrap gap-4">
        <div>
          <h1 className="text-3xl font-bold inline-flex items-center gap-3">{g.name.split(' ').map(w => w[0] + w.slice(1).toLowerCase()).join(' ')} <span className="text-sm font-medium text-green-600">{g.status}</span></h1>
          <p className="text-sm mt-1 inline-flex items-center gap-2"><span className="w-1.5 h-1.5 rounded-full bg-purple-500" /> <span className="text-purple-600">Gig</span> <span className="text-neutral-400">•</span> {g.category} <span className="text-neutral-400">•</span> {g.client}</p>
        </div>
        <div className="flex gap-2">
          <SearchBox placeholder="Search..." className="w-[200px]" />
          <ExportBtn />
        </div>
      </div>
      <div className="bg-white border border-neutral-200 rounded-2xl p-12 mt-6 text-center text-sm text-neutral-500">
        Proposal pipeline, contract terms, and freelancer match insights for this gig appear here once the post is published.
      </div>
    </AnalyticsShell>
  );
}

Object.assign(window, {
  ExperienceAnalyticsPage, AllExperiencesPage, ExperienceDetailPage,
  ExpertiseAnalyticsPage, AllExpertsPage, ExpertDetailPage,
  CourseAnalyticsPage, AllCoursesPage, CourseDetailPage,
  GigAnalyticsPage, AllGigsPage, GigDetailPage,
});