/* Mereka v2 — Explore Courses (Mereka Academy)
   Figma: 5280-39032 (browse), 5280-41642 (category filter), 5280-40730 (course detail) */

const CO_CATEGORIES = ['All categories', 'Soft skills', 'Developer', 'Data & analytics', 'Digital marketing', 'Project management', 'Personal branding'];
const CO_CHIPS = ['AI Skills', 'Productivity', 'For HR Managers', 'Beginner Friendly', 'Digital Literacy', 'Intermediate'];

const COURSES = [
  {"slug": "strategic-thinking", "title": "Strategic Thinking for Modern Leaders", "hub": "Biji-Biji Initiative", "cat": "Soft skills", "desc": "Frameworks for clearer decisions — for leaders, founders and senior operators.", "modules": 9, "vis": "Public", "status": {"type": "enrolled", "progress": 40, "done": 2, "total": 9}, "seed": 4},
  {"slug": "freelancing-101", "title": "Freelancing 101", "hub": "Biji-Biji Initiative", "cat": "Personal branding", "desc": "Land your first clients, price your work and run a freelance business with confidence.", "modules": 5, "vis": "Public", "status": {"type": "price", "label": "RM 550"}, "seed": 1},
  {"slug": "developer-foundations", "title": "Developer Foundations", "hub": "Biji-Biji Initiative", "cat": "Developer", "desc": "The core of modern web development — HTML, CSS, JavaScript and shipping your first app.", "modules": 8, "vis": "Public", "status": {"type": "members", "label": "42 Members"}, "seed": 7},
  {"slug": "ai-fluency", "title": "AI Fluency for Beginners", "hub": "Biji-Biji Initiative", "cat": "Data & analytics", "desc": "Use everyday AI tools to work faster — prompting, automation and safe, useful outputs.", "modules": 6, "vis": "Public", "status": {"type": "free", "label": "FREE"}, "seed": 3},
  {"slug": "digital-marketing", "title": "Digital Marketing Essentials", "hub": "Biji-Biji Initiative", "cat": "Digital marketing", "desc": "Build full-funnel campaigns with AI — audience research, copy, creative and tracking.", "modules": 6, "vis": "Public", "status": {"type": "price", "label": "RM 420"}, "seed": 5},
  {"slug": "ux-design-fundamentals", "title": "UX Design Fundamentals", "hub": "Pixel House", "cat": "Design", "desc": "Design products people love — research, wireframes, prototypes and usability testing.", "modules": 7, "vis": "Public", "status": {"type": "price", "label": "RM 480"}, "seed": 2},
  {"slug": "data-spreadsheets", "title": "Data Analysis with Spreadsheets", "hub": "Biji-Biji Initiative", "cat": "Data & analytics", "desc": "Turn messy data into clear answers using formulas, pivots and charts — no coding.", "modules": 6, "vis": "Public", "status": {"type": "price", "label": "RM 360"}, "seed": 6},
  {"slug": "public-speaking", "title": "Public Speaking & Storytelling", "hub": "Biji-Biji Initiative", "cat": "Soft skills", "desc": "Speak with confidence and tell stories that land — for talks, pitches and meetings.", "modules": 5, "vis": "Public", "status": {"type": "price", "label": "RM 300"}, "seed": 0},
  {"slug": "personal-finance", "title": "Personal Finance & Investing", "hub": "Biji-Biji Initiative", "cat": "Business", "desc": "Take control of your money — budgeting, saving and the basics of investing.", "modules": 6, "vis": "Public", "status": {"type": "free", "label": "FREE"}, "seed": 3},
  {"slug": "product-management", "title": "Product Management Foundations", "hub": "Biji-Biji Initiative", "cat": "Project management", "desc": "Discover, prioritise and ship products — from problem to launch with real frameworks.", "modules": 8, "vis": "Public", "status": {"type": "price", "label": "RM 640"}, "seed": 4},
  {"slug": "video-editing", "title": "Video Editing for Creators", "hub": "Frame & Field", "cat": "Design", "desc": "Edit scroll-stopping short-form video — cuts, sound, captions and a fast workflow.", "modules": 6, "vis": "Public", "status": {"type": "price", "label": "RM 390"}, "seed": 5},
  {"slug": "cybersecurity-basics", "title": "Cybersecurity Basics", "hub": "Biji-Biji Initiative", "cat": "Developer", "desc": "Protect yourself and your team — passwords, phishing, safe data and AI use.", "modules": 5, "vis": "Public", "status": {"type": "free", "label": "FREE"}, "seed": 7},
];

function CourseMetaChip({ children, tone = 'outline' }) {
  const tones = { outline: 'border border-neutral-200 text-neutral-600', enrolled: 'bg-[#ECECFF] text-[#5b53d6] border border-transparent' };
  return <span className={`inline-flex items-center px-2.5 py-1 rounded-full text-[12px] font-semibold tracking-wide uppercase whitespace-nowrap ${tones[tone]}`} style={{ fontFamily: _la }}>{children}</span>;
}

function CourseCard({ c }) {
  const enrolled = c.status.type === 'enrolled';
  return (
    <Link to={'/web/courses/' + c.slug} className="group flex flex-col text-left">
      <ImageBlock aspect="16/10" seed={c.seed} className="w-full" />
      <h3 className="mt-3.5 text-[17px] font-bold text-neutral-900 leading-snug group-hover:text-purple-700 transition-colors" style={{ fontFamily: _pp }}>{c.title}</h3>
      <span className="mt-1.5 inline-flex items-center w-fit px-2 py-0.5 rounded bg-neutral-100 text-[11px] font-bold uppercase tracking-wide text-neutral-500">{c.hub}</span>
      <p className="mt-2 text-[14px] text-neutral-500 leading-snug" style={{ fontFamily: _la }}>{c.desc}</p>
      {enrolled && (
        <div className="mt-3">
          <Progress value={c.status.progress} tone="dark" />
          <div className="mt-1.5 flex items-center justify-between">
            <span className="text-xs font-medium text-[#5b53d6]" style={{ fontFamily: _la }}>{c.status.done} of {c.status.total} modules complete</span>
            <span className="text-sm font-bold text-neutral-700 num-tabular">{c.status.progress}%</span>
          </div>
        </div>
      )}
      <div className="mt-3 flex flex-wrap items-center gap-2">
        <CourseMetaChip>{c.modules} Modules</CourseMetaChip>
        <CourseMetaChip>{c.vis}</CourseMetaChip>
        {enrolled ? <CourseMetaChip tone="enrolled">Enrolled</CourseMetaChip> : <CourseMetaChip>{c.status.label}</CourseMetaChip>}
      </div>
    </Link>
  );
}

/* ---- category filter dropdown (5280-41642) ---- */
function CategoryDropdown() {
  const [open, setOpen] = useState(false);
  const [sel, setSel] = useState(new Set(['All categories']));
  const ref = useRef(null);
  useEffect(() => {
    if (!open) return;
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('click', h); return () => document.removeEventListener('click', h);
  }, [open]);
  const toggle = (o) => setSel(s => { const n = new Set(s); n.has(o) ? n.delete(o) : n.add(o); return n; });
  return (
    <div className="relative" ref={ref}>
      <button onClick={() => setOpen(o => !o)} className="h-10 px-4 min-w-[160px] rounded-lg border border-neutral-200 bg-white flex items-center justify-between gap-3 text-sm text-neutral-700 hover:border-neutral-400 transition-colors" style={{ fontFamily: _la }}>
        All Categories <Icon name="chevronDown" size={15} className={`text-neutral-400 transition-transform ${open ? 'rotate-180' : ''}`} />
      </button>
      {open && (
        <div className="absolute left-0 top-[calc(100%+6px)] w-60 bg-white rounded-2xl border border-neutral-100 py-2 z-30" style={{ boxShadow: '0 12px 32px rgba(0,0,0,0.14)' }}>
          {CO_CATEGORIES.map(o => (
            <button key={o} onClick={() => toggle(o)} className="w-full flex items-center justify-between px-4 py-2.5 text-[15px] text-neutral-800 hover:bg-neutral-50" style={{ fontFamily: _la }}>
              {o}
              <span className={`w-5 h-5 rounded border flex items-center justify-center ${sel.has(o) ? 'bg-neutral-900 border-neutral-900 text-white' : 'border-neutral-300'}`}>{sel.has(o) && <Icon name="check" size={12} strokeWidth={3} />}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function CoursesHero({ onBrowse }) {
  const [active, setActive] = useState(null);
  return (
    <section className="bg-white">
      <div className="max-w-[min(1960px,90vw)] mx-auto px-5 lg:px-8 pt-14 pb-10 text-center">
        <p className="text-sm font-semibold text-[#5b53d6] tracking-wide mb-3" style={{ fontFamily: _la }}>＋ Mereka Academy ＋</p>
        <h1 className="text-5xl lg:text-[60px] font-bold text-neutral-900 leading-[1.05] tracking-tight" style={{ fontFamily: _pp }}>
          Train teams that can ship what<br />Southeast Asia needs next.
        </h1>
        <p className="mt-6 max-w-2xl mx-auto text-lg text-neutral-500 leading-relaxed" style={{ fontFamily: _la }}>
          Strategy-grade learning journeys, hands-on pathways, and industry mentors — built for operators, creators, and curious builders across the region.
        </p>
        <div className="mt-8 max-w-3xl mx-auto">
          <div className="h-14 px-5 rounded-full border border-neutral-200 bg-white flex items-center gap-3 hover:border-neutral-300 focus-within:border-neutral-400 transition-colors">
            <Icon name="search" size={20} className="text-neutral-700 flex-shrink-0" />
            <input placeholder="Search for a course" className="flex-1 bg-transparent text-base text-neutral-900 placeholder:text-neutral-400 focus:outline-none" style={{ fontFamily: _la }} />
          </div>
        </div>
        <div className="mt-5 flex flex-wrap items-center justify-center gap-3">
          {CO_CHIPS.map(c => {
            const on = active === c;
            return <button key={c} onClick={() => setActive(on ? null : c)} className={`px-5 py-2.5 rounded-xl text-[15px] font-semibold border transition-colors ${on ? 'bg-neutral-900 text-white border-neutral-900' : 'bg-white text-neutral-900 border-neutral-200 hover:border-neutral-400'}`} style={{ fontFamily: _la }}>{c}</button>;
          })}
        </div>
        <div className="mt-9 flex flex-col items-center gap-3">
          <button className="inline-flex items-center gap-3 h-14 pl-7 pr-2.5 rounded-full bg-[#1a1623] text-white text-lg font-semibold hover:bg-black transition-colors" style={{ fontFamily: _la }}>
            Join the Community
            <span className="w-10 h-10 rounded-full bg-[#2563eb] flex items-center justify-center"><Icon name="arrowUpRight" size={18} className="text-white" /></span>
          </button>
          <button onClick={onBrowse} className="text-[15px] font-semibold text-[#2563eb] hover:underline" style={{ fontFamily: _la }}>Browse all courses</button>
        </div>
      </div>
    </section>
  );
}

function CoursesPopular() {
  return (
    <section className="bg-white pb-8">
      <div className="max-w-[min(2560px,95vw)] mx-auto px-5 lg:px-8">
        <h2 className="text-3xl lg:text-4xl font-bold text-neutral-900 text-center mb-10" style={{ fontFamily: _pp }}>Popular Courses</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-x-5 gap-y-10">
          {COURSES.slice(0, 5).map(c => <CourseCard key={c.slug} c={c} />)}
        </div>
      </div>
    </section>
  );
}

function CoursesAll({ anchorRef }) {
  const [query, setQuery] = useState('');
  const [cat, setCat] = useState('All');
  const [sort, setSort] = useState('Popularity');
  const q = query.trim().toLowerCase();
  const cats = ['All', ...Array.from(new Set(COURSES.map(c => c.cat)))];
  const priceNum = (c) => { if (c.status.type === 'free') return 0; const m = (c.status.label || '').match(/[\d,]+/); return m ? parseInt(m[0].replace(/,/g, ''), 10) : 1e9; };
  let results = COURSES.filter(c =>
    (cat === 'All' || c.cat === cat) &&
    (q === '' || (c.title + ' ' + c.cat + ' ' + c.desc + ' ' + c.hub).toLowerCase().includes(q))
  );
  if (sort === 'Title: A-Z') results = [...results].sort((a, b) => a.title.localeCompare(b.title));
  else if (sort === 'Price: low to high') results = [...results].sort((a, b) => priceNum(a) - priceNum(b));
  else if (sort === 'Price: high to low') results = [...results].sort((a, b) => priceNum(b) - priceNum(a));
  else if (sort === 'Most modules') results = [...results].sort((a, b) => b.modules - a.modules);
  const reset = () => { setQuery(''); setCat('All'); setSort('Popularity'); };
  const selCls = "h-10 px-4 rounded-lg border border-neutral-200 bg-white text-sm text-neutral-700 hover:border-neutral-400 transition-colors";
  return (
    <section ref={anchorRef} className="bg-white py-12 scroll-mt-24">
      <div className="max-w-[min(2560px,95vw)] mx-auto px-5 lg:px-8">
        <h2 className="text-3xl lg:text-4xl font-bold text-neutral-900 mb-6" style={{ fontFamily: _pp }}>All Courses</h2>
        <div className="flex flex-wrap items-center gap-3 mb-6">
          <div className="relative flex-1 min-w-[220px] max-w-md">
            <Icon name="search" size={16} className="absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400" />
            <input value={query} onChange={e => setQuery(e.target.value)} placeholder="Search courses by title, category or hub..."
              className="w-full h-10 pl-11 pr-4 rounded-lg border border-neutral-200 bg-white text-sm focus:outline-none focus:border-neutral-400" style={{ fontFamily: _la }} />
          </div>
          <select value={cat} onChange={e => setCat(e.target.value)} className={selCls} style={{ fontFamily: _la }}>
            {cats.map(o => <option key={o} value={o}>{o === 'All' ? 'All Categories' : o}</option>)}
          </select>
          <select value={sort} onChange={e => setSort(e.target.value)} className={selCls} style={{ fontFamily: _la }}>
            {['Popularity', 'Title: A-Z', 'Price: low to high', 'Price: high to low', 'Most modules'].map(o => <option key={o} value={o}>Sort by: {o}</option>)}
          </select>
          <button onClick={reset} className="h-10 px-3 inline-flex items-center gap-1.5 text-sm font-medium text-[#2563eb] hover:underline" style={{ fontFamily: _la }}><Icon name="refresh" size={15} /> Reset</button>
        </div>
        <p className="text-sm text-neutral-500 mb-6" style={{ fontFamily: _la }}>{results.length} course{results.length === 1 ? '' : 's'}{cat !== 'All' ? ` in ${cat}` : ''}</p>
        {results.length === 0 ? (
          <div className="py-16 text-center">
            <div className="w-14 h-14 rounded-full bg-neutral-100 grid place-items-center mx-auto mb-4"><Icon name="search" size={24} className="text-neutral-400" /></div>
            <h3 className="text-lg font-bold text-zinc-900" style={{ fontFamily: _la }}>No courses found</h3>
            <p className="text-sm text-neutral-500 mt-1" style={{ fontFamily: _la }}>Try a different search or category.</p>
          </div>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-12">
            {results.map(c => <CourseCard key={c.slug} c={c} />)}
          </div>
        )}
      </div>
    </section>
  );
}

function WebCoursesPage() {
  const allRef = useRef(null);
  const onBrowse = () => { const el = allRef.current; if (!el) return; window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' }); };
  return (
    <div className="min-h-screen flex flex-col bg-white" style={{ fontFamily: _la }} data-screen-label="Explore Courses">
      <HomeHeader />
      <main className="flex-1">
        <CoursesHero onBrowse={onBrowse} />
        <CoursesPopular />
        <CoursesAll anchorRef={allRef} />
        <LPFaq />
        <LPCta />
      </main>
      <HomeFooter />
    </div>
  );
}

/* ============ COURSE DETAIL (5280-40730) ============ */
const COURSE_DETAILS = {
  'strategic-thinking': {
    cat: 'Soft skills', title: 'Strategic thinking for modern leaders',
    sub: 'Frameworks for clearer decisions — for leaders, founders, and senior operators.',
    rating: '4.9', reviews: '1,034 reviews', learners: '6,300 learners',
    price: 'RM 540', old: 'RM 718', save: 'Save RM 178 · Limited seats',
    about: 'Frameworks for clearer decisions — for leaders, founders, and senior operators.',
    details: [['Duration', '12 weeks'], ['Format', 'Hybrid'], ['Location', 'Publika Shopping Gallery, KL\nLot 1C, Level G1 (A4 Entrance)'], ['This program is for', 'Undergraduates,\nEarly Career'], ['Certificates Included', '4']],
    learn: [
      'Translate vague business goals into testable strategic bets',
      'Use frameworks to compare options under real constraints',
      'Build a 30/60/90-day strategy plan for your team',
      'Spot when the market is moving against you — early',
      'Communicate strategy so it actually lands',
      'Decide when to pivot versus double down',
    ],
    grading: { intro: 'Your final grade is calculated from three weighted assessments. Pass mark is 70%.',
      rows: [['Assessment 1 – Diagnostic Quiz', 'Module 1 · multiple choice', '30%'], ['Assessment 2 – Market-Mapping Worksheet', 'Module 3 · spot snapshot', '40%'], ['Assessment 3 – Capstone Strategic Memo', 'Module 4 · capstone', '30%']],
      total: '100%', pass: '70%' },
    outline: [
      { m: 'Module 1.1', t: 'Foundations', open: true, units: [['Welcome & course overview', '10 min Video'], ['What strategy is (and isn\'t) – reading', '8 min Read'], ['Diagnostic – where you are today', '10 min Quiz']] },
      { m: 'Module 1.2', t: 'Seeing the market clearly' },
      { m: 'Module 1.3', t: 'Frameworks for ambiguity' },
      { m: 'Module 1.4', t: 'Strategic communication' },
    ],
    faqs: ['What is this course about?', 'Is it free to enroll?', 'Do I need prior experience?', 'How long do I have access?', 'Will I get a certificate?', 'Are the sessions live or self-paced?'],
    footnote: 'This course is delivered by Mereka in partnership with industry mentors across the region.',
  },
  "freelancing-101": {"cat": "Personal branding", "title": "Freelancing 101", "sub": "Everything you need to start earning as a freelancer — clients, pricing and delivery.", "rating": "4.8", "reviews": "612 reviews", "learners": "3,100 learners", "price": "RM 550", "old": "RM 800", "save": "Save RM 800 · limited seats", "about": "Everything you need to start earning as a freelancer — clients, pricing and delivery.", "details": [["Duration", "5 weeks"], ["Format", "Online, self-paced"], ["Location", "Fully remote"], ["This program is for", "Aspiring freelancers"], ["Certificates Included", "1"]], "learn": ["Define a profitable niche", "Build a portfolio that wins work", "Price projects without undercharging", "Write proposals that convert", "Manage clients and scope", "Get paid on time, every time"], "grading": {"intro": "Your final grade is calculated from three weighted assessments. Pass mark is 70%.", "rows": [["Assessment 1 – Knowledge Check", "Early module · multiple choice", "30%"], ["Assessment 2 – Applied Worksheet", "Mid course · practical", "40%"], ["Assessment 3 – Capstone Project", "Final module · capstone", "30%"]], "total": "100%", "pass": "70%"}, "outline": [{"m": "Module 1.1", "t": "Finding your niche", "open": true, "units": [["Welcome & course overview", "10 min Video"], ["Freelancing 101 – what to expect", "8 min Read"], ["Diagnostic – where you are today", "10 min Quiz"]]}, {"m": "Module 1.2", "t": "Portfolio & positioning"}, {"m": "Module 1.3", "t": "Pricing & proposals"}, {"m": "Module 1.4", "t": "Clients & delivery"}], "faqs": ["What is Freelancing 101?", "Do I need prior experience?", "Is it free to enrol?", "How long will I have access?", "Will I get a certificate?", "Are the sessions live or self-paced?"], "footnote": "Freelancing 101 is delivered by Mereka in partnership with industry mentors across the region."},
  "developer-foundations": {"cat": "Developer", "title": "Developer Foundations", "sub": "Go from zero to building and deploying your first real web application.", "rating": "4.7", "reviews": "980 reviews", "learners": "5,400 learners", "price": "RM 0", "old": "RM 0", "save": "Enrol free · limited seats", "about": "Go from zero to building and deploying your first real web application.", "details": [["Duration", "8 weeks"], ["Format", "Online, self-paced"], ["Location", "Fully remote"], ["This program is for", "Aspiring developers"], ["Certificates Included", "1"]], "learn": ["Structure pages with semantic HTML", "Style responsive layouts with CSS", "Add interactivity with JavaScript", "Work with APIs and data", "Use Git and GitHub", "Deploy a live app"], "grading": {"intro": "Your final grade is calculated from three weighted assessments. Pass mark is 70%.", "rows": [["Assessment 1 – Knowledge Check", "Early module · multiple choice", "30%"], ["Assessment 2 – Applied Worksheet", "Mid course · practical", "40%"], ["Assessment 3 – Capstone Project", "Final module · capstone", "30%"]], "total": "100%", "pass": "70%"}, "outline": [{"m": "Module 1.1", "t": "Web fundamentals", "open": true, "units": [["Welcome & course overview", "10 min Video"], ["Developer Foundations – what to expect", "8 min Read"], ["Diagnostic – where you are today", "10 min Quiz"]]}, {"m": "Module 1.2", "t": "JavaScript essentials"}, {"m": "Module 1.3", "t": "Working with data"}, {"m": "Module 1.4", "t": "Ship & deploy"}], "faqs": ["What is Developer Foundations?", "Do I need prior experience?", "Is it free to enrol?", "How long will I have access?", "Will I get a certificate?", "Are the sessions live or self-paced?"], "footnote": "Developer Foundations is delivered by Mereka in partnership with industry mentors across the region."},
  "ai-fluency": {"cat": "Data & analytics", "title": "AI Fluency for Beginners", "sub": "Build practical AI habits you can use at work from day one.", "rating": "4.9", "reviews": "2,140 reviews", "learners": "11,200 learners", "price": "FREE", "old": "FREE", "save": "Enrol free · limited seats", "about": "Build practical AI habits you can use at work from day one.", "details": [["Duration", "6 weeks"], ["Format", "Online, self-paced"], ["Location", "Fully remote"], ["This program is for", "Everyone at work"], ["Certificates Included", "1"]], "learn": ["Write clear, effective prompts", "Pick the right AI tool for a task", "Automate repetitive work", "Check and refine AI outputs", "Use AI safely with data", "Apply AI to your role"], "grading": {"intro": "Your final grade is calculated from three weighted assessments. Pass mark is 70%.", "rows": [["Assessment 1 – Knowledge Check", "Early module · multiple choice", "30%"], ["Assessment 2 – Applied Worksheet", "Mid course · practical", "40%"], ["Assessment 3 – Capstone Project", "Final module · capstone", "30%"]], "total": "100%", "pass": "70%"}, "outline": [{"m": "Module 1.1", "t": "AI foundations", "open": true, "units": [["Welcome & course overview", "10 min Video"], ["AI Fluency for Beginners – what to expect", "8 min Read"], ["Diagnostic – where you are today", "10 min Quiz"]]}, {"m": "Module 1.2", "t": "Prompting basics"}, {"m": "Module 1.3", "t": "Everyday automations"}, {"m": "Module 1.4", "t": "Working safely"}], "faqs": ["What is AI Fluency for Beginners?", "Do I need prior experience?", "Is it free to enrol?", "How long will I have access?", "Will I get a certificate?", "Are the sessions live or self-paced?"], "footnote": "AI Fluency for Beginners is delivered by Mereka in partnership with industry mentors across the region."},
  "digital-marketing": {"cat": "Digital marketing", "title": "Digital Marketing Essentials", "sub": "Run campaigns that find the right audience and actually convert.", "rating": "4.8", "reviews": "1,205 reviews", "learners": "7,800 learners", "price": "RM 420", "old": "RM 600", "save": "Save RM 600 · limited seats", "about": "Run campaigns that find the right audience and actually convert.", "details": [["Duration", "6 weeks"], ["Format", "Online, self-paced"], ["Location", "Fully remote"], ["This program is for", "Marketers & founders"], ["Certificates Included", "1"]], "learn": ["Map a marketing funnel", "Research audiences with data", "Write copy and creative with AI", "Run paid and organic channels", "Set up tracking and UTMs", "Read and act on metrics"], "grading": {"intro": "Your final grade is calculated from three weighted assessments. Pass mark is 70%.", "rows": [["Assessment 1 – Knowledge Check", "Early module · multiple choice", "30%"], ["Assessment 2 – Applied Worksheet", "Mid course · practical", "40%"], ["Assessment 3 – Capstone Project", "Final module · capstone", "30%"]], "total": "100%", "pass": "70%"}, "outline": [{"m": "Module 1.1", "t": "Funnel foundations", "open": true, "units": [["Welcome & course overview", "10 min Video"], ["Digital Marketing Essentials – what to expect", "8 min Read"], ["Diagnostic – where you are today", "10 min Quiz"]]}, {"m": "Module 1.2", "t": "Channels & content"}, {"m": "Module 1.3", "t": "Paid & organic"}, {"m": "Module 1.4", "t": "Measure & optimise"}], "faqs": ["What is Digital Marketing Essentials?", "Do I need prior experience?", "Is it free to enrol?", "How long will I have access?", "Will I get a certificate?", "Are the sessions live or self-paced?"], "footnote": "Digital Marketing Essentials is delivered by Mereka in partnership with industry mentors across the region."},
  "ux-design-fundamentals": {"cat": "Design", "title": "UX Design Fundamentals", "sub": "Learn the end-to-end UX process and build a portfolio-ready case study.", "rating": "4.9", "reviews": "742 reviews", "learners": "4,050 learners", "price": "RM 480", "old": "RM 720", "save": "Save RM 720 · limited seats", "about": "Learn the end-to-end UX process and build a portfolio-ready case study.", "details": [["Duration", "7 weeks"], ["Format", "Online, self-paced"], ["Location", "Fully remote"], ["This program is for", "Designers & PMs"], ["Certificates Included", "1"]], "learn": ["Run lightweight user research", "Turn insights into flows", "Wireframe and prototype", "Apply visual hierarchy", "Test usability with real users", "Present a UX case study"], "grading": {"intro": "Your final grade is calculated from three weighted assessments. Pass mark is 70%.", "rows": [["Assessment 1 – Knowledge Check", "Early module · multiple choice", "30%"], ["Assessment 2 – Applied Worksheet", "Mid course · practical", "40%"], ["Assessment 3 – Capstone Project", "Final module · capstone", "30%"]], "total": "100%", "pass": "70%"}, "outline": [{"m": "Module 1.1", "t": "Research & discovery", "open": true, "units": [["Welcome & course overview", "10 min Video"], ["UX Design Fundamentals – what to expect", "8 min Read"], ["Diagnostic – where you are today", "10 min Quiz"]]}, {"m": "Module 1.2", "t": "Flows & wireframes"}, {"m": "Module 1.3", "t": "Prototyping"}, {"m": "Module 1.4", "t": "Testing & handoff"}], "faqs": ["What is UX Design Fundamentals?", "Do I need prior experience?", "Is it free to enrol?", "How long will I have access?", "Will I get a certificate?", "Are the sessions live or self-paced?"], "footnote": "UX Design Fundamentals is delivered by Mereka in partnership with industry mentors across the region."},
  "data-spreadsheets": {"cat": "Data & analytics", "title": "Data Analysis with Spreadsheets", "sub": "Become the person on your team who can actually read the numbers.", "rating": "4.7", "reviews": "888 reviews", "learners": "6,100 learners", "price": "RM 360", "old": "RM 520", "save": "Save RM 520 · limited seats", "about": "Become the person on your team who can actually read the numbers.", "details": [["Duration", "6 weeks"], ["Format", "Online, self-paced"], ["Location", "Fully remote"], ["This program is for", "Analysts & ops"], ["Certificates Included", "1"]], "learn": ["Clean and shape data", "Master key formulas", "Build pivot tables", "Create clear charts", "Automate with simple scripts", "Tell a story with data"], "grading": {"intro": "Your final grade is calculated from three weighted assessments. Pass mark is 70%.", "rows": [["Assessment 1 – Knowledge Check", "Early module · multiple choice", "30%"], ["Assessment 2 – Applied Worksheet", "Mid course · practical", "40%"], ["Assessment 3 – Capstone Project", "Final module · capstone", "30%"]], "total": "100%", "pass": "70%"}, "outline": [{"m": "Module 1.1", "t": "Spreadsheet foundations", "open": true, "units": [["Welcome & course overview", "10 min Video"], ["Data Analysis with Spreadsheets – what to expect", "8 min Read"], ["Diagnostic – where you are today", "10 min Quiz"]]}, {"m": "Module 1.2", "t": "Formulas & functions"}, {"m": "Module 1.3", "t": "Pivots & analysis"}, {"m": "Module 1.4", "t": "Charts & reporting"}], "faqs": ["What is Data Analysis with Spreadsheets?", "Do I need prior experience?", "Is it free to enrol?", "How long will I have access?", "Will I get a certificate?", "Are the sessions live or self-paced?"], "footnote": "Data Analysis with Spreadsheets is delivered by Mereka in partnership with industry mentors across the region."},
  "public-speaking": {"cat": "Soft skills", "title": "Public Speaking & Storytelling", "sub": "Beat the nerves and deliver talks people remember.", "rating": "4.8", "reviews": "534 reviews", "learners": "2,900 learners", "price": "RM 300", "old": "RM 450", "save": "Save RM 450 · limited seats", "about": "Beat the nerves and deliver talks people remember.", "details": [["Duration", "5 weeks"], ["Format", "Online, self-paced"], ["Location", "Fully remote"], ["This program is for", "Anyone who presents"], ["Certificates Included", "1"]], "learn": ["Structure a talk that flows", "Open and close with impact", "Use stories to make points stick", "Manage nerves and body language", "Design simple, clear slides", "Handle Q&A with confidence"], "grading": {"intro": "Your final grade is calculated from three weighted assessments. Pass mark is 70%.", "rows": [["Assessment 1 – Knowledge Check", "Early module · multiple choice", "30%"], ["Assessment 2 – Applied Worksheet", "Mid course · practical", "40%"], ["Assessment 3 – Capstone Project", "Final module · capstone", "30%"]], "total": "100%", "pass": "70%"}, "outline": [{"m": "Module 1.1", "t": "Message & structure", "open": true, "units": [["Welcome & course overview", "10 min Video"], ["Public Speaking & Storytelling – what to expect", "8 min Read"], ["Diagnostic – where you are today", "10 min Quiz"]]}, {"m": "Module 1.2", "t": "Storytelling"}, {"m": "Module 1.3", "t": "Delivery & presence"}, {"m": "Module 1.4", "t": "Slides & Q&A"}], "faqs": ["What is Public Speaking & Storytelling?", "Do I need prior experience?", "Is it free to enrol?", "How long will I have access?", "Will I get a certificate?", "Are the sessions live or self-paced?"], "footnote": "Public Speaking & Storytelling is delivered by Mereka in partnership with industry mentors across the region."},
  "personal-finance": {"cat": "Business", "title": "Personal Finance & Investing", "sub": "Build healthy money habits and a simple plan for the long term.", "rating": "4.9", "reviews": "1,760 reviews", "learners": "9,400 learners", "price": "FREE", "old": "FREE", "save": "Enrol free · limited seats", "about": "Build healthy money habits and a simple plan for the long term.", "details": [["Duration", "6 weeks"], ["Format", "Online, self-paced"], ["Location", "Fully remote"], ["This program is for", "Everyone"], ["Certificates Included", "1"]], "learn": ["Build a budget that sticks", "Set up an emergency fund", "Understand debt and interest", "Learn investing fundamentals", "Plan for big goals", "Avoid common money traps"], "grading": {"intro": "Your final grade is calculated from three weighted assessments. Pass mark is 70%.", "rows": [["Assessment 1 – Knowledge Check", "Early module · multiple choice", "30%"], ["Assessment 2 – Applied Worksheet", "Mid course · practical", "40%"], ["Assessment 3 – Capstone Project", "Final module · capstone", "30%"]], "total": "100%", "pass": "70%"}, "outline": [{"m": "Module 1.1", "t": "Money foundations", "open": true, "units": [["Welcome & course overview", "10 min Video"], ["Personal Finance & Investing – what to expect", "8 min Read"], ["Diagnostic – where you are today", "10 min Quiz"]]}, {"m": "Module 1.2", "t": "Saving & debt"}, {"m": "Module 1.3", "t": "Investing basics"}, {"m": "Module 1.4", "t": "Planning ahead"}], "faqs": ["What is Personal Finance & Investing?", "Do I need prior experience?", "Is it free to enrol?", "How long will I have access?", "Will I get a certificate?", "Are the sessions live or self-paced?"], "footnote": "Personal Finance & Investing is delivered by Mereka in partnership with industry mentors across the region."},
  "product-management": {"cat": "Project management", "title": "Product Management Foundations", "sub": "Learn the PM craft and run a product from discovery to launch.", "rating": "4.8", "reviews": "1,012 reviews", "learners": "5,200 learners", "price": "RM 640", "old": "RM 900", "save": "Save RM 900 · limited seats", "about": "Learn the PM craft and run a product from discovery to launch.", "details": [["Duration", "8 weeks"], ["Format", "Online, self-paced"], ["Location", "Fully remote"], ["This program is for", "Aspiring & new PMs"], ["Certificates Included", "1"]], "learn": ["Discover real user problems", "Write clear product specs", "Prioritise with frameworks", "Work with engineering & design", "Define and track metrics", "Plan and run a launch"], "grading": {"intro": "Your final grade is calculated from three weighted assessments. Pass mark is 70%.", "rows": [["Assessment 1 – Knowledge Check", "Early module · multiple choice", "30%"], ["Assessment 2 – Applied Worksheet", "Mid course · practical", "40%"], ["Assessment 3 – Capstone Project", "Final module · capstone", "30%"]], "total": "100%", "pass": "70%"}, "outline": [{"m": "Module 1.1", "t": "Discovery", "open": true, "units": [["Welcome & course overview", "10 min Video"], ["Product Management Foundations – what to expect", "8 min Read"], ["Diagnostic – where you are today", "10 min Quiz"]]}, {"m": "Module 1.2", "t": "Specs & prioritisation"}, {"m": "Module 1.3", "t": "Delivery"}, {"m": "Module 1.4", "t": "Metrics & launch"}], "faqs": ["What is Product Management Foundations?", "Do I need prior experience?", "Is it free to enrol?", "How long will I have access?", "Will I get a certificate?", "Are the sessions live or self-paced?"], "footnote": "Product Management Foundations is delivered by Mereka in partnership with industry mentors across the region."},
  "video-editing": {"cat": "Design", "title": "Video Editing for Creators", "sub": "Produce polished short-form videos with a repeatable editing workflow.", "rating": "4.7", "reviews": "690 reviews", "learners": "3,650 learners", "price": "RM 390", "old": "RM 560", "save": "Save RM 560 · limited seats", "about": "Produce polished short-form videos with a repeatable editing workflow.", "details": [["Duration", "6 weeks"], ["Format", "Online, self-paced"], ["Location", "Fully remote"], ["This program is for", "Creators & marketers"], ["Certificates Included", "1"]], "learn": ["Set up an editing project", "Cut for pace and retention", "Add music and sound design", "Create captions and motion", "Colour and clean up footage", "Export for every platform"], "grading": {"intro": "Your final grade is calculated from three weighted assessments. Pass mark is 70%.", "rows": [["Assessment 1 – Knowledge Check", "Early module · multiple choice", "30%"], ["Assessment 2 – Applied Worksheet", "Mid course · practical", "40%"], ["Assessment 3 – Capstone Project", "Final module · capstone", "30%"]], "total": "100%", "pass": "70%"}, "outline": [{"m": "Module 1.1", "t": "Editing foundations", "open": true, "units": [["Welcome & course overview", "10 min Video"], ["Video Editing for Creators – what to expect", "8 min Read"], ["Diagnostic – where you are today", "10 min Quiz"]]}, {"m": "Module 1.2", "t": "Pace & sound"}, {"m": "Module 1.3", "t": "Captions & motion"}, {"m": "Module 1.4", "t": "Finish & export"}], "faqs": ["What is Video Editing for Creators?", "Do I need prior experience?", "Is it free to enrol?", "How long will I have access?", "Will I get a certificate?", "Are the sessions live or self-paced?"], "footnote": "Video Editing for Creators is delivered by Mereka in partnership with industry mentors across the region."},
  "cybersecurity-basics": {"cat": "Developer", "title": "Cybersecurity Basics", "sub": "Build everyday security habits that keep you and your team safe.", "rating": "4.8", "reviews": "1,330 reviews", "learners": "7,000 learners", "price": "FREE", "old": "FREE", "save": "Enrol free · limited seats", "about": "Build everyday security habits that keep you and your team safe.", "details": [["Duration", "5 weeks"], ["Format", "Online, self-paced"], ["Location", "Fully remote"], ["This program is for", "Everyone at work"], ["Certificates Included", "1"]], "learn": ["Spot phishing and scams", "Use strong passwords and MFA", "Handle data and AI safely", "Secure your devices", "Recognise social engineering", "Respond to an incident"], "grading": {"intro": "Your final grade is calculated from three weighted assessments. Pass mark is 70%.", "rows": [["Assessment 1 – Knowledge Check", "Early module · multiple choice", "30%"], ["Assessment 2 – Applied Worksheet", "Mid course · practical", "40%"], ["Assessment 3 – Capstone Project", "Final module · capstone", "30%"]], "total": "100%", "pass": "70%"}, "outline": [{"m": "Module 1.1", "t": "Security foundations", "open": true, "units": [["Welcome & course overview", "10 min Video"], ["Cybersecurity Basics – what to expect", "8 min Read"], ["Diagnostic – where you are today", "10 min Quiz"]]}, {"m": "Module 1.2", "t": "Phishing & passwords"}, {"m": "Module 1.3", "t": "Safe data & AI"}, {"m": "Module 1.4", "t": "Devices & response"}], "faqs": ["What is Cybersecurity Basics?", "Do I need prior experience?", "Is it free to enrol?", "How long will I have access?", "Will I get a certificate?", "Are the sessions live or self-paced?"], "footnote": "Cybersecurity Basics is delivered by Mereka in partnership with industry mentors across the region."},
};

function CourseDetailHero({ D }) {
  return (
    <section className="bg-white">
      <div className="max-w-[900px] mx-auto px-5 lg:px-8 pt-4 pb-10 text-center">
        <p className="text-sm font-semibold text-neutral-500 mb-2" style={{ fontFamily: _la }}>{D.cat}</p>
        <h1 className="text-5xl lg:text-[56px] font-black text-neutral-900 leading-[1.05] tracking-tight" style={{ fontFamily: _pp }}>{D.title}</h1>
        <p className="mt-5 max-w-2xl mx-auto text-lg text-neutral-600" style={{ fontFamily: _la }}>{D.sub}</p>
        <div className="mt-5 flex items-center justify-center gap-3 text-sm text-neutral-600 flex-wrap">
          <span className="inline-flex items-center gap-1.5"><Stars n={5} size={15} /> <span className="font-semibold">{D.rating}</span> ({D.reviews})</span>
          <span className="text-neutral-300">•</span><span>{D.learners}</span>
          <span className="text-neutral-300">•</span><span>Certificate included</span>
        </div>
        <div className="mt-4 flex items-center justify-center gap-2">
          <div className="flex -space-x-2">{[25, 220, 290, 170].map((h, i) => <div key={i} className="w-7 h-7 rounded-full border-2 border-white" style={{ background: `linear-gradient(135deg, oklch(0.78 0.13 ${h}), oklch(0.62 0.18 ${h + 30}))` }} />)}</div>
          <span className="text-sm text-neutral-500">Trusted by 20k+ professionals</span>
        </div>
        <div className="mt-7 flex items-center justify-center gap-3 flex-wrap">
          <button className="h-12 px-7 rounded-full bg-[#1a1623] text-base font-semibold text-white hover:bg-black transition-colors inline-flex items-center gap-2">Enroll now <Icon name="arrowRight" size={16} /></button>
          <button className="h-12 px-6 rounded-full border border-neutral-300 bg-white text-base font-semibold text-neutral-900 hover:bg-neutral-50 inline-flex items-center gap-2"><Icon name="send" size={16} /> Share</button>
          <button className="h-12 px-6 rounded-full border border-neutral-300 bg-white text-base font-semibold text-neutral-900 hover:bg-neutral-50 inline-flex items-center gap-2"><Icon name="eye" size={16} /> View sample certificate</button>
        </div>
      </div>
    </section>
  );
}

function CourseEnrollCard({ D, to }) {
  const items = ['6 hours of video', '12 readings & worksheets', '3 quizzes + a capstone', 'Mastery-first Quiz', 'Certificate on completion', 'Lifetime access'];
  return (
    <div className="lg:sticky lg:top-24 bg-white border border-neutral-200 rounded-2xl overflow-hidden">
      <ImageBlock aspect="16/10" seed={4} className="!rounded-none w-full" />
      <div className="p-5">
        <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-orange-50 text-orange-600 text-[12px] font-bold"><Icon name="clock" size={12} /> Cohort closes in 3d 17h</span>
        <div className="mt-3 flex items-baseline gap-2">
          <span className="text-sm text-neutral-400 line-through">{D.old}</span>
          <span className="text-2xl font-bold text-neutral-900">{D.price}</span>
        </div>
        <p className="text-xs text-green-600 font-semibold mt-0.5">{D.save}</p>
        {to
          ? <Link to={to} className="mt-3 w-full h-11 rounded-full bg-[#1a1623] text-white text-sm font-semibold hover:bg-black inline-flex items-center justify-center gap-2"><Icon name="send" size={14} /> Enroll now</Link>
          : <button className="mt-3 w-full h-11 rounded-full bg-[#1a1623] text-white text-sm font-semibold hover:bg-black inline-flex items-center justify-center gap-2"><Icon name="send" size={14} /> Enroll now</button>}
        <div className="mt-3 flex items-center gap-2">
          <button className="flex-1 h-9 rounded-lg border border-neutral-200 text-[13px] font-semibold inline-flex items-center justify-center gap-1.5"><Icon name="play" size={12} fill="currentColor" strokeWidth={0} /> Preview</button>
          <button className="flex-1 h-9 rounded-lg border border-neutral-200 text-[13px] font-semibold inline-flex items-center justify-center gap-1.5"><Icon name="bookmark" size={13} /> Re-Learn</button>
        </div>
        <p className="mt-4 text-xs font-bold text-neutral-500 uppercase tracking-wide">Overview</p>
        <ul className="mt-2 space-y-2">
          {items.map((it, i) => (
            <li key={i} className="flex items-center gap-2.5 text-[13px] text-neutral-700"><Icon name="check" size={14} strokeWidth={2.5} className="text-green-600 flex-shrink-0" /> {it}</li>
          ))}
        </ul>
        <a className="mt-3 block text-[13px] text-[#2563eb] font-semibold">Got a promo code?</a>
        <div className="mt-3 pt-3 border-t border-neutral-100 flex items-center gap-2 text-xs text-neutral-500"><Icon name="shield" size={14} /> 30-day money-back guarantee</div>
      </div>
    </div>
  );
}

function CourseDetailBody({ D }) {
  const [open, setOpen] = useState(0);
  return (
    <section className="bg-white">
      <div className="max-w-[min(2100px,92vw)] mx-auto px-5 lg:px-8 py-8 grid lg:grid-cols-[1fr_340px] gap-10 items-start">
        <div className="min-w-0">
          {/* About */}
          <h2 className="text-2xl font-black text-neutral-900" style={{ fontFamily: _pp }}>About this course</h2>
          <p className="mt-2 text-[15px] text-neutral-600 leading-relaxed">{D.about}</p>

          {/* Program details */}
          <h2 className="mt-9 text-2xl font-black text-neutral-900" style={{ fontFamily: _pp }}>Program Details</h2>
          <div className="mt-4 grid sm:grid-cols-2 gap-2.5">
            {D.details.map(([k, v], i) => (
              <div key={i} className="bg-neutral-100 rounded-xl px-4 py-3">
                <p className="text-[12px] font-semibold uppercase tracking-wide text-neutral-500">{k}</p>
                <p className="text-[14px] font-semibold text-neutral-900 whitespace-pre-line mt-0.5">{v}</p>
              </div>
            ))}
          </div>

          {/* What you'll learn */}
          <h2 className="mt-9 text-2xl font-black text-neutral-900" style={{ fontFamily: _pp }}>What you'll learn</h2>
          <div className="mt-4 grid sm:grid-cols-2 gap-x-8 gap-y-3">
            {D.learn.map((l, i) => (
              <div key={i} className="flex items-start gap-2.5"><span className="w-6 h-6 rounded-full bg-[#2563eb] text-white flex items-center justify-center flex-shrink-0 mt-0.5"><Icon name="check" size={13} strokeWidth={3} /></span><span className="text-[15px] text-neutral-800">{l}</span></div>
            ))}
          </div>
          <p className="mt-4 text-[15px] font-medium text-neutral-700">And more!</p>

          {/* How you're graded */}
          <h2 className="mt-9 text-2xl font-black text-neutral-900" style={{ fontFamily: _pp }}>How you're graded</h2>
          <p className="mt-2 text-[15px] text-neutral-600">{D.grading.intro}</p>
          <div className="mt-4 border border-neutral-200 rounded-2xl overflow-hidden">
            {D.grading.rows.map((r, i) => (
              <div key={i} className="flex items-center justify-between gap-4 px-5 py-4 border-b border-neutral-100">
                <div><p className="text-[13px] font-bold uppercase tracking-wide text-neutral-800">{r[0]}</p><p className="text-xs text-neutral-500 mt-0.5">{r[1]}</p></div>
                <span className="text-base font-bold text-neutral-900">{r[2]}</span>
              </div>
            ))}
            <div className="flex items-center justify-between gap-4 px-5 py-4 bg-neutral-50">
              <p className="text-[13px] font-bold uppercase tracking-wide text-neutral-800">Total Weighting</p>
              <span className="text-sm font-bold text-neutral-900">{D.grading.total} &nbsp; <span className="text-neutral-500">PASS MARK {D.grading.pass}</span></span>
            </div>
          </div>

          {/* Course outline */}
          <h2 className="mt-9 text-2xl font-black text-neutral-900" style={{ fontFamily: _pp }}>Course outline</h2>
          <p className="mt-2 text-[15px] text-neutral-600">Complete all required units to earn your certificate.</p>
          <div className="mt-4 space-y-2.5">
            {D.outline.map((mod, i) => {
              const isOpen = open === i;
              return (
                <div key={i} className="border border-neutral-200 rounded-xl overflow-hidden">
                  <button onClick={() => setOpen(isOpen ? -1 : i)} className="w-full flex items-center gap-3 px-5 py-4 text-left">
                    <span className="text-[11px] font-bold text-neutral-500 bg-neutral-100 rounded px-2 py-1">{mod.m}</span>
                    <span className="font-bold text-[15px] flex-1">{mod.t}</span>
                    <Icon name="chevronDown" size={16} className={`text-neutral-500 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
                  </button>
                  {isOpen && mod.units && (
                    <div className="px-5 pb-3">
                      {mod.units.map((u, j) => (
                        <div key={j} className="flex items-center gap-3 py-2.5 border-t border-neutral-100">
                          <Icon name="play" size={14} className="text-neutral-400" />
                          <span className="text-sm flex-1">{u[0]}</span>
                          <span className="text-xs text-[#2563eb] font-medium">{u[1]}</span>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
          <div className="mt-6">
            <button className="inline-flex items-center gap-3 h-12 pl-7 pr-2.5 rounded-full bg-[#1a1623] text-white text-base font-semibold hover:bg-black transition-colors">
              Get Started <span className="w-9 h-9 rounded-full bg-[#2563eb] flex items-center justify-center"><Icon name="arrowUpRight" size={16} className="text-white" /></span>
            </button>
          </div>

          {/* Instructors */}
          <h2 className="mt-12 text-2xl font-black text-neutral-900" style={{ fontFamily: _pp }}>Meet your instructors</h2>
          <p className="mt-1.5 text-[15px] text-neutral-500">This course is co-taught by three practitioners. Each instructor below contributes specific modules.</p>
          <div className="mt-5 grid sm:grid-cols-3 gap-5">
            {PL_EXPERTS.slice(0, 3).map((e, i) => (
              <div key={i}>
                <div className="relative"><ImageBlock aspect="4/3" seed={e.seed} className="!rounded-2xl w-full" /><span className="absolute top-3 right-3 w-8 h-8 rounded-full bg-white/90 flex items-center justify-center text-neutral-500"><Icon name="heart" size={15} /></span></div>
                <h3 className="mt-3 text-[15px] font-bold text-neutral-900" style={{ fontFamily: _pp }}>{e.name}</h3>
                <p className="text-[13px] font-semibold text-neutral-700">{e.role}</p>
                <p className="mt-1 text-[13px] text-neutral-500 leading-snug">{e.bio}</p>
              </div>
            ))}
          </div>
        </div>

        <CourseEnrollCard D={D} />
      </div>
    </section>
  );
}

function WebCourseDetailPage({ slug }) {
  const D = COURSE_DETAILS[slug] || COURSE_DETAILS['strategic-thinking'];
  return (
    <div className="min-h-screen flex flex-col bg-white" style={{ fontFamily: _la }} data-screen-label={'Course · ' + D.title}>
      <HomeHeader />
      <main className="flex-1">
        <PLPartnerStrip />
        <CourseDetailHero D={D} />
        <CourseDetailBody D={D} />
        <PLHandsOn P={{ primaryCta: 'Join Programme' }} />
        <PLFaq P={{ faqs: D.faqs, footnote: D.footnote }} />
      </main>
      <HomeFooter />
    </div>
  );
}

Object.assign(window, { WebCoursesPage, WebCourseDetailPage, COURSES, COURSE_DETAILS });

/* ============ PROGRAMME DETAIL (5280-40124) ============ */
function pgHours(i) { return ['2h', '2h', '1.5h', '4.5h', '2h', '2h', '3h', '1h'][i % 8]; }
function pgSlug(s) { return String(s).toLowerCase().replace(/&/g,'and').replace(/[^a-z0-9]+/g,'-').replace(/^-+|-+$/g,''); }

function ProgIncludesCard({ title, count, items, accent, hours, base }) {
  const [open, setOpen] = useState(true);
  return (
    <div className="border border-neutral-200 rounded-xl overflow-hidden">
      <button onClick={() => setOpen(o => !o)} className="w-full flex items-center gap-2 px-5 py-3.5 text-left">
        <h3 className="font-bold text-[15px]" style={{ fontFamily: _pp }}>{title}</h3>
        <span className="w-5 h-5 rounded-full text-white text-[12px] font-bold flex items-center justify-center" style={{ background: accent }}>{count}</span>
        <span className="flex-1" />
        <Icon name="chevronUp" size={16} className={`text-neutral-500 transition-transform ${open ? '' : 'rotate-180'}`} />
      </button>
      {open && (
        <ul>
          {items.map((it, i) => (
            <li key={i} className="border-t border-neutral-100">
              <Link to={(base || '/web/courses') + '/' + pgSlug(it)}
                className="group flex items-center gap-3 px-5 py-2.5 hover:bg-neutral-50 transition-colors cursor-pointer">
                <span className="w-6 h-6 rounded flex-shrink-0" style={{ background: `linear-gradient(135deg, oklch(0.5 0.12 255), oklch(0.35 0.1 270))` }} />
                <span className="text-[13px] font-semibold uppercase tracking-wide text-neutral-600 flex-1 group-hover:text-neutral-900 transition-colors">{it}</span>
                {hours && <span className="inline-flex items-center gap-1 text-[12px] font-semibold text-[#2563eb]"><span className="w-1.5 h-1.5 rounded-full bg-[#2563eb]" /> {pgHours(i)}</span>}
                <Icon name="chevronRight" size={15} className="text-neutral-300 group-hover:text-[#2563eb] transition-colors flex-shrink-0" />
              </Link>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

function ProgrammeDetailHero({ P }) {
  return (
    <section className="bg-white">
      <div className="max-w-[900px] mx-auto px-5 lg:px-8 pt-4 pb-8 text-center">
        <p className="text-base font-semibold text-neutral-500" style={{ fontFamily: _la }}>{P.welcome}</p>
        <h1 className="mt-1 text-5xl lg:text-[60px] font-black text-neutral-900 leading-[1.03] tracking-tight" style={{ fontFamily: _pp }}>{P.name}</h1>
        <p className="mt-5 max-w-2xl mx-auto text-lg text-neutral-600" style={{ fontFamily: _la }}>{P.desc}</p>
        <div className="mt-4 flex items-center justify-center gap-2 text-sm text-neutral-600">
          <Stars n={5} size={15} /> <span className="font-semibold">4.8</span> <span className="text-neutral-400">(12k+)</span>
        </div>
        <div className="mt-3 flex items-center justify-center gap-2">
          <div className="flex -space-x-2">{[25, 220, 290, 170].map((h, i) => <div key={i} className="w-7 h-7 rounded-full border-2 border-white" style={{ background: `linear-gradient(135deg, oklch(0.78 0.13 ${h}), oklch(0.62 0.18 ${h + 30}))` }} />)}</div>
          <span className="text-sm text-neutral-500">Trusted by 20k+ professionals</span>
        </div>
        <div className="mt-6 flex flex-col items-center gap-2">
          <Link to="/app/program/admin/overview/learner"><button className="h-12 px-8 rounded-full bg-[#1a1623] text-base font-semibold text-white hover:bg-black transition-colors inline-flex items-center gap-2">Enroll now <Icon name="arrowRight" size={16} /></button></Link>
          <button className="text-[15px] font-semibold text-[#2563eb] hover:underline">Learn more</button>
        </div>
      </div>
    </section>
  );
}

function ProgrammeDetailBody({ P }) {
  return (
    <section className="bg-white">
      <div className="max-w-[min(2100px,92vw)] mx-auto px-5 lg:px-8 py-6 grid lg:grid-cols-[1fr_340px] gap-10 items-start">
        <div className="min-w-0">
          <h2 className="text-2xl font-black text-neutral-900" style={{ fontFamily: _pp }}>About this Programme</h2>
          <p className="mt-2 text-[15px] text-neutral-600 leading-relaxed">{P.desc}</p>

          <h2 className="mt-9 text-2xl font-black text-neutral-900" style={{ fontFamily: _pp }}>Program Details</h2>
          <div className="mt-4 grid sm:grid-cols-2 gap-2.5">
            {P.details.map(([k, v], i) => (
              <div key={i} className="bg-neutral-100 rounded-xl px-4 py-3">
                <p className="text-[12px] font-semibold uppercase tracking-wide text-neutral-500">{k}</p>
                <p className="text-[14px] font-semibold text-neutral-900 whitespace-pre-line mt-0.5">{v}</p>
              </div>
            ))}
          </div>

          <h2 className="mt-9 text-2xl font-black text-neutral-900" style={{ fontFamily: _pp }}>By the end of the program, you learn to</h2>
          <div className="mt-4 bg-neutral-50 rounded-2xl p-6 grid sm:grid-cols-2 gap-x-8 gap-y-3.5">
            {P.outcomes.map((o, i) => (
              <div key={i} className="flex items-start gap-2.5"><span className="w-6 h-6 rounded-full bg-[#2563eb] text-white flex items-center justify-center flex-shrink-0 mt-0.5"><Icon name="check" size={13} strokeWidth={3} /></span><span className="text-[15px] text-neutral-800">{o}</span></div>
            ))}
          </div>
          <p className="mt-3 text-[15px] font-medium text-neutral-700">And more!</p>

          <h2 className="mt-9 text-2xl font-black text-neutral-900" style={{ fontFamily: _pp }}>{P.includesTitle}</h2>
          <p className="mt-2 text-[15px] text-neutral-600 leading-relaxed">{P.includesIntro}</p>
          <div className="mt-5 space-y-4">
            <ProgIncludesCard title="Course Modules" count={P.modules.length} items={P.modules} accent="#2563eb" hours base="/web/courses" />
            <ProgIncludesCard title="Experiences" count={P.experiences.length} items={P.experiences} accent="#f59e0b" base="/web/experiences" />
            <ProgIncludesCard title="Expertise" count={P.expertise.length} items={P.expertise} accent="#16a34a" base="/web/expertise" />
          </div>
          <div className="mt-6">
            <Link to="/app/program/admin/overview/learner"><button className="inline-flex items-center gap-3 h-12 pl-7 pr-2.5 rounded-full bg-[#1a1623] text-white text-base font-semibold hover:bg-black transition-colors">
              {P.freeCta ? 'Get Started for FREE' : 'Get Started'} <span className="w-9 h-9 rounded-full bg-[#2563eb] flex items-center justify-center"><Icon name="arrowUpRight" size={16} className="text-white" /></span>
            </button></Link>
          </div>
        </div>

        <CourseEnrollCard to="/app/program/admin/overview/learner" D={{ old: 'RM 718', price: 'RM 540', save: 'Save RM 178 · Limited seats' }} />
      </div>
    </section>
  );
}

function WebProgrammeDetailPage({ slug }) {
  const P = (typeof PROGRAM_LANDINGS !== 'undefined' && PROGRAM_LANDINGS[slug]) || (typeof PROGRAM_LANDINGS !== 'undefined' && PROGRAM_LANDINGS.ai4u);
  if (!P) return null;
  return (
    <div className="min-h-screen flex flex-col bg-white" style={{ fontFamily: _la }} data-screen-label={'Programme · ' + P.name}>
      <HomeHeader />
      <main className="flex-1">
        <PLPartnerStrip />
        <ProgrammeDetailHero P={P} />
        <ProgrammeDetailBody P={P} />
        <PLHandsOn P={P} />
        <PLExperts />
        <PLFaq P={P} />
      </main>
      <HomeFooter />
    </div>
  );
}

Object.assign(window, { WebProgrammeDetailPage });