/* Mereka v2 — Program landing page (per learning path) — Figma rebuild of AI4U Program */

/* ============ Shared content ============ */
const PL_PARTNERS = [
  { name: 'AVPN', cls: 'text-[#f06a5d]' },
  { name: 'mereka', logo: true },
  { name: 'AI4U', cls: 'text-neutral-900 font-black tracking-tight' },
  { name: 'Google.org', google: true },
  { name: 'KORIKA', cls: 'text-[#d22] font-extrabold tracking-wide' },
  { name: 'ADB', cls: 'text-[#1e3a8a] font-bold' },
];

const PL_EXPERTS = [
  { name: 'Jey Bala', role: 'Chief Ecosystem Officer @ Mereka', bio: 'Expert in sustainability and business, transforming education at Mereka and impacting 100k+ with innovative workshops.', seed: 1 },
  { name: 'Rashvin Pal Singh', role: 'Group CEO @ Mereka', bio: 'Deeply passionate about inclusive & creative economies, social innovation, platform business models, music, and people.', seed: 4 },
  { name: 'Mala K', role: 'Manager, Training & Mentorship', bio: "Advocate for free, equitable education; she's trained hundreds and seeks to empower youth to pursue their passions and dreams.", seed: 0 },
  { name: 'Gurpreet T Singh', role: 'Space & Ecosystem Senior Associate', bio: 'Seasoned Project Manager skilled in strategic leadership and adaptability, excels in guiding projects to success in dynamic environments.', seed: 3 },
];

const PL_HANDS = [
  { icon: 'play', color: '#2563eb', title: 'Live Webinars & Virtual Trainings', desc: 'Master AI tools and prompt engineering with guided practice.' },
  { icon: 'user', color: '#f59e0b', title: 'In-Person Workshops', desc: 'Learn face-to-face through hands-on projects and teamwork.' },
  { icon: 'chat', color: '#16a34a', title: 'WhatsApp Community Group', desc: 'Stay connected with weekly AI hacks, discussions, and updates.' },
  { icon: 'spark', color: '#06b6d4', title: 'AI Coaching Circles', desc: 'Receive guidance and apply AI to real-world problems.' },
];

const PL_CERT_BENEFITS = ['Boost your resume or LinkedIn', 'Showcase AI literacy to employers or clients', 'Unlock deeper learning pathways'];

/* ============ Per-path data ============ */
const PROGRAM_LANDINGS = {
  ai4u: {
    name: 'AI4U Program', welcome: 'Welcome to', accent: '#1a1623',
    desc: 'AI4U is a FREE program dedicated to equipping 10,000 Malaysians and Indonesians with practical, real-world AI skills to boost employability, entrepreneurship, and digital resilience.',
    primaryCta: 'Join Program', freeCta: true,
    details: [
      ['Duration', '12 weeks'], ['Format', 'Hybrid'],
      ['Location', 'Lot 1C, Level G1 (A4 Entrance) Publika Shopping Gallery, KL'],
      ['This program is for', 'Undergraduates\nEarly Career'], ['Certificates included', '4'],
    ],
    includesTitle: 'AI4U Program Includes',
    includesIntro: 'Learn the essential concepts of artificial intelligence, including its history, various AI types, and the transformative potential of AI across industries. Gain insights into how AI enhances workplace efficiency.',
    modules: ['Explore Generative AI', 'Internet Search & Beyond', 'Explore Generative AI', 'Unlock Creative Potential', 'Transform Design Processes', 'Enhance User Engagement'],
    experiences: ['Image Gen Crash Course', 'Advanced AI Prompting', 'Understanding AI Gen'],
    expertise: ['Image Gen Crash Course', 'Advanced AI Prompting', 'Understanding AI Gen'],
    outcomes: ['Understand prompt basics', 'Write clear, effective prompts', 'Personalise prompts', 'Use prompting techniques to save time', 'Apply prompts for work, creativity, and problem-solving', 'Automate simple tasks with AI tools', 'Evaluate & refine AI responses'],
    pricing: {
      primary: { title: '1-Day AI Fundamentals', price: 'RM8,000.00', old: 'RM16,000', features: ['Full access for up to 10 employees', '+RM1,000 for extra employees', 'Lifetime access to course materials', 'Certificate of completion'] },
      secondary: { title: 'Customised Training', sub: 'Get in touch with our team', features: ['Free business consultation', 'Dedicated account manager', 'Packaged pricing', 'Custom AI prompt templates for your business'] },
    },
    faqs: ['What is AI4U?', 'Is it free to join AI4U?', 'When will the self-paced micro-learning courses be released?', 'How can I get updates about upcoming events?', 'Are the courses relevant to me?', 'Do I need a technical background to join?', 'How long will I have access to the courses?', 'What kind of AI tools will I learn about?', 'Will there be certificates for course completion?', 'How can I partner or collaborate with AI4U?'],
    footnote: 'This programme is part of the AI Opportunity Fund: Asia-Pacific, in collaboration with AVPN and supported by Google.org and the Asian Development Bank.',
  },
  dynamous: {
    name: 'Dynamous AI Mastery', welcome: 'Welcome to', accent: '#1a1623',
    desc: 'Dynamous AI Mastery is an applied programme that helps finance and operations teams use AI to increase the accuracy of projections, automate data analysis, and build reliable reporting and tracking workflows.',
    primaryCta: 'Join Program',
    details: [
      ['Duration', '8 weeks'], ['Format', 'Online, self-paced'],
      ['Location', 'Fully remote · live sessions on Zoom'],
      ['This program is for', 'Finance teams\nOperations & Analysts'], ['Certificates included', '3'],
    ],
    includesTitle: 'Dynamous AI Mastery Includes',
    includesIntro: 'Go deep on applying AI to financial workflows — from forecasting and scenario modelling to automated reporting. Learn to build dependable, auditable pipelines that your whole team can trust.',
    modules: ['Forecasting with AI', 'Automating Data Analysis', 'Scenario Modelling', 'Reporting Pipelines', 'Financial Tracking', 'Risk & Accuracy Checks'],
    experiences: ['Forecasting Crash Course', 'Spreadsheet Automation', 'Dashboards with AI'],
    expertise: ['Financial Modelling', 'Data Pipeline Design', 'Reporting Automation'],
    outcomes: ['Increase forecast accuracy', 'Automate repetitive analysis', 'Build live reporting dashboards', 'Model multiple scenarios fast', 'Track financial KPIs continuously', 'Audit and validate AI outputs', 'Communicate insights clearly'],
    pricing: {
      primary: { title: 'Annual Team Plan', price: 'RM749.90', old: 'RM1,200', unit: '/ year', features: ['Full access for up to 5 seats', '+RM150 per extra seat', 'Lifetime access to recordings', 'Certificate of completion'] },
      secondary: { title: 'Enterprise Rollout', sub: 'Get in touch with our team', features: ['Free needs assessment', 'Dedicated account manager', 'Volume pricing', 'Custom financial AI templates'] },
    },
    faqs: ['What is Dynamous AI Mastery?', 'Who is this programme for?', 'Do I need a finance background?', 'What tools will I use?', 'How are the live sessions scheduled?', 'Is there a team plan?', 'How long will I have access?', 'Will I get a certificate?', 'Can my whole department join?', 'How do I request an invoice?'],
    footnote: 'Dynamous AI Mastery is delivered by Mereka in partnership with industry finance mentors across the region.',
  },
  fluency: {
    name: 'AI Fluency for Beginners', welcome: 'Welcome to', accent: '#1a1623',
    desc: 'AI Fluency for Beginners is a FREE, beginner-friendly programme that teaches you to embed AI in everyday project and support workflows — turning tickets into tasks and generating clear, useful reports.',
    primaryCta: 'Join Program', freeCta: true,
    details: [
      ['Duration', '6 weeks'], ['Format', 'Online, self-paced'],
      ['Location', 'Fully remote'],
      ['This program is for', 'Complete beginners\nCareer switchers'], ['Certificates included', '2'],
    ],
    includesTitle: 'AI Fluency for Beginners Includes',
    includesIntro: 'Start from zero. Build a confident, practical understanding of how AI works and how to apply it to your daily tasks — no technical background required.',
    modules: ['AI Foundations', 'Prompting Basics', 'Everyday Automations', 'Working with AI Assistants', 'Turning Tickets into Tasks', 'Generating Reports'],
    experiences: ['Hello, AI Crash Course', 'Prompting Playground', 'First Automation'],
    expertise: ['AI Foundations', 'Practical Prompting', 'Workflow Basics'],
    outcomes: ['Understand what AI can and cannot do', 'Write your first effective prompts', 'Automate small repetitive tasks', 'Convert tickets into clear tasks', 'Generate simple reports', 'Use AI assistants confidently', 'Keep your data safe'],
    pricing: {
      primary: { title: 'Always Free', price: 'FREE', features: ['Full access to all 6 modules', 'Community WhatsApp group', 'Lifetime access to materials', 'Certificate of completion'] },
      secondary: { title: 'Team Onboarding', sub: 'Get in touch with our team', features: ['Free onboarding session', 'Dedicated facilitator', 'Group progress tracking', 'Custom beginner pathways'] },
    },
    faqs: ['What is AI Fluency for Beginners?', 'Is it really free?', 'Do I need any prior experience?', 'How much time should I commit each week?', 'Is it fully online?', 'Will I get a certificate?', 'Can I learn at my own pace?', 'What AI tools will I try?', 'Is there community support?', 'What can I do after finishing?'],
    footnote: 'AI Fluency for Beginners is a community programme by Mereka, open to all learners at no cost.',
  },
  pm: {
    name: 'Project Manager Mastery', welcome: 'Welcome to', accent: '#1a1623',
    desc: 'Project Manager Mastery helps PMs embed AI across delivery workflows — converting support tickets into tasks, generating status reports, and keeping projects on track with less manual effort.',
    primaryCta: 'Join Program',
    details: [
      ['Duration', '10 weeks'], ['Format', 'Hybrid'],
      ['Location', 'Publika Shopping Gallery, KL + remote'],
      ['This program is for', 'Project Managers\nTeam Leads'], ['Certificates included', '4'],
    ],
    includesTitle: 'Project Manager Mastery Includes',
    includesIntro: 'Lead delivery with AI on your side. Learn to automate the busywork of project management so you can focus on people, priorities, and outcomes.',
    modules: ['AI for Planning', 'Tickets to Tasks', 'Automated Status Reports', 'Risk & Dependency Tracking', 'Stakeholder Comms', 'Retrospectives with AI'],
    experiences: ['PM Automation Crash Course', 'Reporting with AI', 'Stand-up Assistant'],
    expertise: ['Delivery Automation', 'Reporting Systems', 'Stakeholder Management'],
    outcomes: ['Plan projects faster with AI', 'Convert tickets into actionable tasks', 'Auto-generate status reports', 'Track risks and dependencies', 'Summarise stakeholder updates', 'Run smarter retrospectives', 'Keep delivery on schedule'],
    pricing: {
      primary: { title: 'Professional', price: 'RM1,680', old: 'RM2,400', features: ['Full access for one PM', 'Team add-ons available', 'Lifetime access to materials', 'Certificate of completion'] },
      secondary: { title: 'Team & Org Plan', sub: 'Get in touch with our team', features: ['Free delivery assessment', 'Dedicated account manager', 'Volume pricing', 'Custom PM AI templates'] },
    },
    faqs: ['What is Project Manager Mastery?', 'Who should join?', 'Do I need a PM certification first?', 'Which PM tools are covered?', 'How are sessions delivered?', 'Is there a team rate?', 'How long will I have access?', 'Will I get a certificate?', 'Can I expense this?', 'How do I get an invoice?'],
    footnote: 'Project Manager Mastery is delivered by Mereka with experienced delivery leads and ecosystem partners.',
  },
  "creative-ai": {
    name: "Creative AI for Designers", welcome: "Welcome to", accent: "#1a1623",
    desc: "Creative AI for Designers is a hands-on programme that brings generative AI into every stage of the design process, from ideation and moodboarding to image generation, iteration and production-ready assets.",
    primaryCta: "Join Program",
    details: [["Duration", "6 weeks"], ["Format", "Online, self-paced"], ["Location", "Fully remote"], ["This program is for", "Designers\nCreatives"], ["Certificates included", "3"]],
    includesTitle: "Creative AI for Designers Includes",
    includesIntro: "Master generative image tools and prompt craft, then weave them into a real design workflow that ships faster without losing your creative voice.",
    modules: ["Generative Image Foundations", "Prompting for Visual Style", "Moodboards & Concepting with AI", "Iterating Designs Fast", "AI in the Production Pipeline", "Ethics & Licensing for AI Art"],
    experiences: ["Midjourney Crash Course", "AI Moodboard Lab", "From Prompt to Poster"],
    expertise: ["Visual Style Systems", "AI Art Direction", "Asset Production"],
    outcomes: ["Generate on-brief visuals with AI", "Write prompts for a consistent style", "Build moodboards in minutes", "Iterate designs 10x faster", "Prepare production-ready assets", "Navigate licensing and ethics", "Blend AI into your design stack"],
    pricing: { primary: {"title": "Designer Plan", "price": "RM1,290", "old": "RM1,800", "features": ["Full access to all 6 courses", "3 hands-on experiences", "Lifetime access to materials", "Certificate of completion"]}, secondary: {"title": "Studio Plan", "sub": "Get in touch with our team", "features": ["Seats for your whole team", "Dedicated account manager", "Volume pricing", "Custom asset templates"]} },
    faqs: ["What is Creative AI for Designers?", "Do I need design experience?", "Which AI tools will I use?", "Will I build a portfolio piece?", "How long will I have access?", "Is there a certificate?", "Can my studio join?", "How do payments work?"],
    footnote: "Creative AI for Designers is delivered by Mereka in partnership with working art directors across the region.",
  },
  "data-storytelling": {
    name: "Data Storytelling & Dashboards", welcome: "Welcome to", accent: "#1a1623",
    desc: "Data Storytelling & Dashboards teaches you to turn raw numbers into clear narratives and live dashboards your stakeholders actually use, with AI helping at every step and no heavy coding required.",
    primaryCta: "Join Program",
    details: [["Duration", "6 weeks"], ["Format", "Online, self-paced"], ["Location", "Fully remote"], ["This program is for", "Analysts\nOps & Marketing"], ["Certificates included", "2"]],
    includesTitle: "Data Storytelling & Dashboards Includes",
    includesIntro: "Learn to choose the right chart, design dashboards people trust, and tell the story behind the numbers so decisions get made faster.",
    modules: ["Data Foundations", "Choosing the Right Chart", "Building Dashboards", "Narrative & Insight", "Automating Reports", "Presenting to Stakeholders"],
    experiences: ["Dashboard Build Sprint", "Chart Critique Lab", "Insight Storytelling"],
    expertise: ["Dashboard Design", "KPI Frameworks", "Reporting Automation"],
    outcomes: ["Clean and shape messy data", "Pick the right chart every time", "Build dashboards stakeholders trust", "Find and frame the key insight", "Automate recurring reports", "Present numbers persuasively", "Set up a KPI framework"],
    pricing: { primary: {"title": "Analyst Plan", "price": "RM980", "old": "RM1,400", "features": ["Full access to all 6 courses", "3 hands-on experiences", "Lifetime access to materials", "Certificate of completion"]}, secondary: {"title": "Team Plan", "sub": "Get in touch with our team", "features": ["Seats for your whole team", "Dedicated account manager", "Volume pricing", "Custom dashboard templates"]} },
    faqs: ["What is Data Storytelling & Dashboards?", "Do I need to know SQL?", "Which tools will I use?", "Will I build a real dashboard?", "How long will I have access?", "Is there a certificate?", "Can my team join?", "How do payments work?"],
    footnote: "Data Storytelling & Dashboards is delivered by Mereka with analytics leads from across industry.",
  },
  "growth-marketing-ai": {
    name: "AI-Powered Growth Marketing", welcome: "Welcome to", accent: "#1a1623",
    desc: "AI-Powered Growth Marketing helps you run full-funnel campaigns with AI in the loop, from copy and creative to segmentation, automation and experiments designed to actually convert.",
    primaryCta: "Join Program",
    details: [["Duration", "7 weeks"], ["Format", "Online, self-paced"], ["Location", "Fully remote"], ["This program is for", "Marketers\nFounders"], ["Certificates included", "3"]],
    includesTitle: "AI-Powered Growth Marketing Includes",
    includesIntro: "Build a repeatable growth engine — generate creative at scale, segment audiences sharply, and run experiments that compound.",
    modules: ["Funnel Foundations", "AI Copy & Creative", "Audience Segmentation", "Campaign Automation", "Experiment Design", "Attribution & ROI"],
    experiences: ["Ad Copy Sprint", "Funnel Teardown Lab", "Growth Experiment Jam"],
    expertise: ["Performance Marketing", "Lifecycle Automation", "Growth Analytics"],
    outcomes: ["Map a full-funnel strategy", "Generate ad copy and creative with AI", "Segment audiences that convert", "Automate lifecycle campaigns", "Design valid experiments", "Measure true ROI", "Build a growth dashboard"],
    pricing: { primary: {"title": "Marketer Plan", "price": "RM1,480", "old": "RM2,000", "features": ["Full access to all 6 courses", "3 hands-on experiences", "Lifetime access to materials", "Certificate of completion"]}, secondary: {"title": "Agency Plan", "sub": "Get in touch with our team", "features": ["Seats for your whole team", "Dedicated account manager", "Volume pricing", "Custom campaign templates"]} },
    faqs: ["What is AI-Powered Growth Marketing?", "Do I need marketing experience?", "Which tools will I use?", "Will I launch a real campaign?", "How long will I have access?", "Is there a certificate?", "Can my team join?", "How do payments work?"],
    footnote: "AI-Powered Growth Marketing is delivered by Mereka with growth leads from high-scale teams.",
  },
  "no-code-builder": {
    name: "No-Code App Builder", welcome: "Welcome to", accent: "#1a1623",
    desc: "No-Code App Builder takes you from idea to a deployed product without writing code, covering data modelling, interfaces, logic, automations and integrations.",
    primaryCta: "Join Program",
    details: [["Duration", "6 weeks"], ["Format", "Online, self-paced"], ["Location", "Fully remote"], ["This program is for", "Operators\nFounders"], ["Certificates included", "2"]],
    includesTitle: "No-Code App Builder Includes",
    includesIntro: "Design data, build interfaces, wire up logic and integrations, and launch a working app your team can actually use.",
    modules: ["No-Code Foundations", "Data Modelling", "Building Interfaces", "Logic & Automations", "Integrations & APIs", "Launch & Maintain"],
    experiences: ["First App in a Day", "Automation Lab", "Internal Tool Sprint"],
    expertise: ["App Architecture", "Workflow Automation", "Integration Setup"],
    outcomes: ["Model data for an app", "Build clean interfaces", "Add logic and automations", "Connect external tools and APIs", "Deploy and maintain your app", "Automate manual workflows", "Ship an internal tool"],
    pricing: { primary: {"title": "Builder Plan", "price": "RM1,150", "old": "RM1,600", "features": ["Full access to all 6 courses", "3 hands-on experiences", "Lifetime access to materials", "Certificate of completion"]}, secondary: {"title": "Team Plan", "sub": "Get in touch with our team", "features": ["Seats for your whole team", "Dedicated account manager", "Volume pricing", "Custom app templates"]} },
    faqs: ["What is No-Code App Builder?", "Do I need to know how to code?", "Which platforms will I use?", "Will I deploy a real app?", "How long will I have access?", "Is there a certificate?", "Can my team join?", "How do payments work?"],
    footnote: "No-Code App Builder is delivered by Mereka with builders who ship internal tools at scale.",
  },
  "customer-success-ai": {
    name: "AI for Customer Success", welcome: "Welcome to", accent: "#1a1623",
    desc: "AI for Customer Success is a free programme that shows support and CS teams how to deflect tickets, personalise outreach and turn churn signals into retention wins with AI.",
    primaryCta: "Join Program", freeCta: true,
    details: [["Duration", "5 weeks"], ["Format", "Online, self-paced"], ["Location", "Fully remote"], ["This program is for", "Support & CS teams"], ["Certificates included", "1"]],
    includesTitle: "AI for Customer Success Includes",
    includesIntro: "Scale great support with AI — build knowledge bases that deflect tickets, spot churn early, and personalise outreach without burning out.",
    modules: ["CS Foundations", "AI-Assisted Support", "Knowledge Bases that Scale", "Churn Signals & Health Scores", "Personalised Outreach"],
    experiences: ["Support Bot Crash Course", "Help Center Lab", "Churn Playbook Jam"],
    expertise: ["Support Automation", "Retention Strategy", "CS Analytics"],
    outcomes: ["Deflect repetitive tickets with AI", "Build a self-serve knowledge base", "Score account health", "Spot churn signals early", "Personalise outreach at scale", "Measure CS impact", "Design a retention playbook"],
    pricing: { primary: {"title": "Always Free", "price": "FREE", "features": ["Full access to all 5 courses", "3 hands-on experiences", "Community WhatsApp group", "Certificate of completion"]}, secondary: {"title": "Team Enablement", "sub": "Get in touch with our team", "features": ["Onboarding for your CS team", "Dedicated account manager", "Custom playbooks", "Priority support"]} },
    faqs: ["What is AI for Customer Success?", "Is it really free?", "Which tools will I use?", "Will I build a real playbook?", "How long will I have access?", "Is there a certificate?", "Can my team join?", "How do I get updates?"],
    footnote: "AI for Customer Success is offered free by Mereka to help service teams adopt AI responsibly.",
  },
  "founders-ai": {
    name: "AI for Founders & Startups", welcome: "Welcome to", accent: "#1a1623",
    desc: "AI for Founders & Startups helps you build, validate and scale faster with AI across product, growth and operations, from first MVP to a fundraising-ready company.",
    primaryCta: "Join Program",
    details: [["Duration", "8 weeks"], ["Format", "Online, self-paced"], ["Location", "Fully remote"], ["This program is for", "Founders\nEarly teams"], ["Certificates included", "3"]],
    includesTitle: "AI for Founders & Startups Includes",
    includesIntro: "Go from idea to MVP, plug AI into product and growth, tighten operations, and get your fundraising toolkit ready.",
    modules: ["Idea to MVP", "AI in Product", "Lean Growth with AI", "Ops & Automation", "Fundraising Toolkit", "Scaling Responsibly"],
    experiences: ["MVP Build Weekend", "Pitch Deck Lab", "Growth Sprint"],
    expertise: ["Product Strategy", "Fundraising", "Ops Automation"],
    outcomes: ["Validate an idea fast", "Ship an AI-enabled MVP", "Run lean growth experiments", "Automate startup operations", "Build a fundraising toolkit", "Pitch with a strong deck", "Scale without breaking"],
    pricing: { primary: {"title": "Founder Plan", "price": "RM2,400", "old": "RM3,200", "features": ["Full access to all 6 courses", "3 hands-on experiences", "Lifetime access to materials", "Certificate of completion"]}, secondary: {"title": "Accelerator Plan", "sub": "Get in touch with our team", "features": ["Seats for your founding team", "Dedicated mentor", "Volume pricing", "Investor intro support"]} },
    faqs: ["What is AI for Founders & Startups?", "Do I need a startup already?", "Which tools will I use?", "Will I build an MVP?", "How long will I have access?", "Is there a certificate?", "Can my co-founders join?", "How do payments work?"],
    footnote: "AI for Founders & Startups is delivered by Mereka with operators and investors from the regional ecosystem.",
  },
  "content-creator": {
    name: "Content Creator Accelerator", welcome: "Welcome to", accent: "#1a1623",
    desc: "Content Creator Accelerator helps you plan, produce and grow a real content engine across video, social and newsletters, with AI speeding up every step.",
    primaryCta: "Join Program",
    details: [["Duration", "6 weeks"], ["Format", "Online, self-paced"], ["Location", "Fully remote"], ["This program is for", "Creators\nMarketers"], ["Certificates included", "2"]],
    includesTitle: "Content Creator Accelerator Includes",
    includesIntro: "Build a content system that runs — script with AI, produce short-form video, repurpose at scale, grow an audience and monetise.",
    modules: ["Content Strategy", "Scripting with AI", "Short-form Video", "Repurposing at Scale", "Audience Growth", "Monetisation"],
    experiences: ["Reels Crash Course", "Script-to-Screen Lab", "Newsletter Jam"],
    expertise: ["Content Systems", "Video Production", "Audience Growth"],
    outcomes: ["Plan a content strategy", "Script faster with AI", "Produce short-form video", "Repurpose across channels", "Grow your audience", "Monetise your content", "Run a content calendar"],
    pricing: { primary: {"title": "Creator Plan", "price": "RM890", "old": "RM1,200", "features": ["Full access to all 6 courses", "3 hands-on experiences", "Lifetime access to materials", "Certificate of completion"]}, secondary: {"title": "Brand Plan", "sub": "Get in touch with our team", "features": ["Seats for your content team", "Dedicated account manager", "Volume pricing", "Custom content templates"]} },
    faqs: ["What is Content Creator Accelerator?", "Do I need to be on camera?", "Which tools will I use?", "Will I publish real content?", "How long will I have access?", "Is there a certificate?", "Can my team join?", "How do payments work?"],
    footnote: "Content Creator Accelerator is delivered by Mereka with creators who have grown large audiences.",
  },
  "cyber-aware": {
    name: "Cybersecurity Essentials", welcome: "Welcome to", accent: "#1a1623",
    desc: "Cybersecurity Essentials is a free, practical programme on protecting yourself and your team, covering threat awareness, good security habits and safe AI and data use.",
    primaryCta: "Join Program", freeCta: true,
    details: [["Duration", "5 weeks"], ["Format", "Online, self-paced"], ["Location", "Fully remote"], ["This program is for", "Everyone at work"], ["Certificates included", "1"]],
    includesTitle: "Cybersecurity Essentials Includes",
    includesIntro: "Build everyday security habits — spot phishing, lock down accounts, handle data and AI safely, and know what to do when something goes wrong.",
    modules: ["Security Foundations", "Phishing & Social Engineering", "Passwords & MFA", "Safe AI & Data Handling", "Device & Network Basics"],
    experiences: ["Phishing Spotting Lab", "Password Hygiene Sprint", "Incident Drill"],
    expertise: ["Security Awareness", "Data Protection", "Policy Setup"],
    outcomes: ["Spot phishing and scams", "Use strong passwords and MFA", "Handle data and AI safely", "Secure your devices", "Recognise social engineering", "Respond to an incident", "Build basic security policies"],
    pricing: { primary: {"title": "Always Free", "price": "FREE", "features": ["Full access to all 5 courses", "3 hands-on experiences", "Community WhatsApp group", "Certificate of completion"]}, secondary: {"title": "Team Training", "sub": "Get in touch with our team", "features": ["Roll out to your whole org", "Dedicated account manager", "Custom policies", "Reporting dashboard"]} },
    faqs: ["What is Cybersecurity Essentials?", "Is it really free?", "Do I need a technical background?", "Will I practise on real scenarios?", "How long will I have access?", "Is there a certificate?", "Can my team join?", "How do I get updates?"],
    footnote: "Cybersecurity Essentials is offered free by Mereka to raise everyday security awareness at work.",
  },
};

const PL_HUB = { slug: 'biji-biji', name: 'Biji-Biji' };

/* ============ Pieces ============ */
function PLPartnerStrip() {
  return (
    <div className="bg-white">
      <div className="max-w-[min(2100px,92vw)] mx-auto px-5 lg:px-8 py-9">
        <div className="flex flex-wrap items-center justify-center gap-x-12 gap-y-5 opacity-90">
          {PL_PARTNERS.map((p, i) => (
            <span key={i} className="text-2xl font-bold flex items-center gap-2" style={{ fontFamily: _pp }}>
              {p.logo ? <span className="inline-flex items-center"><img src="/mereka-logo.svg" alt="mereka" style={{ height: 26 }} /></span>
                : p.google ? <span><span className="text-[#4285F4]">G</span><span className="text-[#EA4335]">o</span><span className="text-[#FBBC05]">o</span><span className="text-[#4285F4]">g</span><span className="text-[#34A853]">l</span><span className="text-[#EA4335]">e</span><span className="text-neutral-500 font-normal">.org</span></span>
                : <span className={p.cls}>{p.name}</span>}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

function PLHero({ P }) {
  return (
    <section className="bg-white">
      <div className="max-w-[900px] mx-auto px-5 lg:px-8 pt-6 pb-14 text-center">
        <p className="text-xl font-bold text-neutral-900" style={{ fontFamily: _pp }}>{P.welcome}</p>
        <h1 className="mt-1 text-6xl lg:text-[80px] font-black text-neutral-900 leading-[1.02] tracking-tight" style={{ fontFamily: _pp }}>
          {P.name}
        </h1>
        <p className="mt-6 max-w-2xl mx-auto text-lg text-neutral-600 leading-relaxed">{P.desc}</p>
        <div className="mt-3 text-sm">
          <span className="text-neutral-500">Offered by </span>
          <Link to={'/web/hubs/' + PL_HUB.slug} className="font-semibold text-[#2563eb] hover:underline">{PL_HUB.name}</Link>
        </div>
        <div className="mt-8 flex items-center justify-center gap-3">
          <button className="h-12 px-7 rounded-full border border-neutral-300 bg-white text-base font-semibold text-neutral-900 hover:bg-neutral-50 transition-colors">Learn More</button>
          <button className="h-12 px-7 rounded-full bg-[#1a1623] text-base font-semibold text-white hover:bg-black transition-colors">{P.primaryCta}</button>
        </div>
      </div>
    </section>
  );
}

function PLDetails({ P }) {
  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-2 gap-12 items-start">
        <div>
          <h2 className="text-4xl font-black text-neutral-900 mb-6" style={{ fontFamily: _pp }}>Program Details</h2>
          <div className="space-y-2.5">
            {P.details.map(([k, v], i) => (
              <div key={i} className="flex gap-4 bg-neutral-100 rounded-xl px-5 py-4">
                <span className="w-40 flex-shrink-0 text-[13px] font-semibold uppercase tracking-wide text-neutral-500 self-center">{k}</span>
                <span className="text-[15px] font-semibold text-neutral-900 whitespace-pre-line">{v}</span>
              </div>
            ))}
          </div>
          <button className="mt-6 h-12 px-9 rounded-full bg-[#1a1623] text-base font-semibold text-white hover:bg-black transition-colors">Sign Up</button>
        </div>
        <div className="relative min-h-[420px]">
          <ImageBlock aspect="4/3" seed={1} className="!rounded-2xl absolute top-0 left-0 w-[58%]" />
          <ImageBlock aspect="1/1" seed={4} className="!rounded-2xl absolute top-[30%] right-0 w-[42%]" />
          <ImageBlock aspect="4/3" seed={0} className="!rounded-2xl absolute bottom-0 left-[14%] w-[48%]" />
          <div className="absolute top-[14%] right-[6%] w-12 h-12 rounded-xl bg-[#dbeafe] flex items-center justify-center text-[#2563eb] shadow-sm"><Icon name="trending" size={22} /></div>
          <div className="absolute bottom-[18%] left-0 w-12 h-12 rounded-xl bg-[#e0e7ff] flex items-center justify-center text-[#4f46e5] shadow-sm"><Icon name="spark" size={22} /></div>
        </div>
      </div>
    </section>
  );
}

function PLOutcomes({ P }) {
  return (
    <section className="bg-white py-14">
      <div className="max-w-[min(1960px,90vw)] mx-auto px-5 lg:px-8 text-center">
        <h2 className="text-4xl lg:text-5xl font-black text-neutral-900" style={{ fontFamily: _pp }}>By the end of the program, you learn to</h2>
        <div className="mt-9 flex flex-wrap items-center justify-center gap-3.5 max-w-4xl mx-auto">
          {P.outcomes.map((o, i) => (
            <span key={i} className="inline-flex items-center gap-2.5 pl-1.5 pr-5 py-1.5 rounded-full border border-neutral-200 bg-white">
              <span className="w-7 h-7 rounded-full bg-[#2563eb] text-white flex items-center justify-center flex-shrink-0"><Icon name="check" size={15} strokeWidth={3} /></span>
              <span className="text-[15px] font-medium text-neutral-800">{o}</span>
            </span>
          ))}
        </div>
        <p className="mt-6 text-base font-medium text-neutral-700">And more!</p>
      </div>
    </section>
  );
}

function PLIncludesCol({ title, count, items, accent }) {
  return (
    <div className="bg-white rounded-2xl border border-neutral-100 p-6">
      <div className="flex items-center gap-2 mb-4">
        <h3 className="text-lg font-bold text-neutral-900" style={{ fontFamily: _pp }}>{title}</h3>
        <span className="w-6 h-6 rounded-full text-white text-xs font-bold flex items-center justify-center" style={{ background: accent }}>{count}</span>
      </div>
      <ul className="space-y-3">
        {items.map((it, i) => (
          <li key={i} className="flex items-center gap-3">
            <span className="w-6 h-6 rounded-md 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-500">{it}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function PLIncludes({ P }) {
  return (
    <section className="bg-[#eef3fb] py-16">
      <div className="max-w-[min(2100px,92vw)] mx-auto px-5 lg:px-8">
        <h2 className="text-4xl lg:text-5xl font-black text-neutral-900 text-center" style={{ fontFamily: _pp }}>{P.includesTitle}</h2>
        <p className="mt-5 max-w-3xl mx-auto text-center text-base text-neutral-600 leading-relaxed">{P.includesIntro}</p>
        <div className="mt-9 grid md:grid-cols-3 gap-5">
          <PLIncludesCol title="Course Modules" count={P.modules.length} items={P.modules} accent="#ec4899" />
          <PLIncludesCol title="Experiences" count={P.experiences.length} items={P.experiences} accent="#a855f7" />
          <PLIncludesCol title="Expertise" count={P.expertise.length} items={P.expertise} accent="#a855f7" />
        </div>
        <div className="mt-10 flex justify-center">
          <button className="inline-flex items-center gap-3 h-14 pl-8 pr-2.5 rounded-full bg-[#1a1623] text-white text-lg font-semibold hover:bg-black transition-colors">
            {P.freeCta ? 'Get Started for FREE' : 'Get Started'}
            <span className="w-10 h-10 rounded-full bg-[#2563eb] flex items-center justify-center"><Icon name="arrowRight" size={18} className="text-white" /></span>
          </button>
        </div>
      </div>
    </section>
  );
}

function PLHandsOn({ P }) {
  return (
    <section className="bg-[#eef3fb] pb-16">
      <div className="max-w-[min(2100px,92vw)] mx-auto px-5 lg:px-8">
        <h2 className="text-4xl lg:text-5xl font-black text-neutral-900 text-center pt-2" style={{ fontFamily: _pp }}>Access Hands-On Learning &amp; Certification</h2>
        <p className="mt-4 max-w-2xl mx-auto text-center text-base text-neutral-500">Gain real-world skills through expert-led sessions and community support; designed to help you learn, apply, and get certified.</p>
        <div className="mt-9 grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
          {PL_HANDS.map((h, i) => (
            <div key={i} className="bg-white rounded-2xl border border-neutral-100 p-6">
              <div className="w-12 h-12 rounded-xl flex items-center justify-center mb-5" style={{ background: h.color + '1a', color: h.color }}><Icon name={h.icon} size={24} /></div>
              <h3 className="text-lg font-bold text-neutral-900 leading-snug" style={{ fontFamily: _pp }}>{h.title}</h3>
              <p className="mt-2 text-[15px] text-neutral-500 leading-snug">{h.desc}</p>
            </div>
          ))}
        </div>

        <div className="mt-6 bg-white rounded-3xl border border-neutral-100 p-8 lg:p-12">
          <div className="grid lg:grid-cols-2 gap-8 items-center">
            <div>
              <h3 className="text-3xl lg:text-4xl font-black text-neutral-900" style={{ fontFamily: _pp }}>
                Get certified by <span><span className="text-[#4285F4]">G</span><span className="text-[#EA4335]">o</span><span className="text-[#FBBC05]">o</span><span className="text-[#4285F4]">g</span><span className="text-[#34A853]">l</span><span className="text-[#EA4335]">e</span><span className="text-neutral-500">.org</span></span>
              </h3>
              <div className="mt-7 grid sm:grid-cols-3 gap-5">
                {PL_CERT_BENEFITS.map((b, i) => (
                  <div key={i} className="flex items-start gap-2.5">
                    <span className="w-6 h-6 rounded-full bg-neutral-900 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-700 leading-snug">{b}</span>
                  </div>
                ))}
              </div>
              <div className="mt-7 inline-flex items-center gap-2 h-12 px-6 rounded-full border border-neutral-200 text-base font-medium text-neutral-700">
                Get certified by <span><span className="text-[#4285F4]">G</span><span className="text-[#EA4335]">o</span><span className="text-[#FBBC05]">o</span><span className="text-[#4285F4]">g</span><span className="text-[#34A853]">l</span><span className="text-[#EA4335]">e</span><span className="text-neutral-500">.org</span></span>
              </div>
            </div>
            <div className="flex justify-center lg:justify-end">
              <div className="relative w-[260px] h-[300px]">
                <div className="absolute right-2 bottom-2 w-[200px] h-[260px] rounded-lg bg-[#bfdbfe]" />
                <div className="absolute left-2 top-2 w-[200px] h-[260px] rounded-lg bg-[#eff6ff] border border-[#dbeafe] p-7 flex flex-col gap-3">
                  {[80, 95, 70, 88, 60].map((w, i) => <div key={i} className="h-2 rounded bg-[#4f46e5]/70" style={{ width: w + '%' }} />)}
                  <div className="mt-auto self-end text-[#16a34a]"><Icon name="trending" size={34} /></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="mt-12 text-center">
          <h3 className="text-2xl lg:text-3xl font-black text-neutral-900" style={{ fontFamily: _pp }}>Start your journey today!</h3>
          <p className="mt-2 text-base text-neutral-600">Gain practical skills, get certified, and lead the future of work.</p>
          <button className="mt-6 h-12 px-9 rounded-full bg-[#1a1623] text-base font-semibold text-white hover:bg-black transition-colors">{P.primaryCta}</button>
        </div>
      </div>
    </section>
  );
}

function PLExperts() {
  const railRef = useRef(null);
  const scroll = (dir) => { const el = railRef.current; if (el) el.scrollBy({ left: dir * 360, behavior: 'smooth' }); };
  return (
    <section className="bg-white py-16">
      <div className="max-w-[min(2560px,95vw)] mx-auto px-5 lg:px-8">
        <h2 className="text-3xl lg:text-4xl font-black text-neutral-900 mb-8" style={{ fontFamily: _pp }}>Learn From Experts In Their Field</h2>
        <div className="relative">
          <button onClick={() => scroll(-1)} className="hidden lg:flex absolute -left-5 top-[150px] z-10 w-11 h-11 rounded-full bg-white border border-neutral-200 shadow items-center justify-center hover:bg-neutral-50"><Icon name="chevronLeft" size={18} /></button>
          <button onClick={() => scroll(1)} className="hidden lg:flex absolute -right-5 top-[150px] z-10 w-11 h-11 rounded-full bg-white border border-neutral-200 shadow items-center justify-center hover:bg-neutral-50"><Icon name="chevronRight" size={18} /></button>
          <div ref={railRef} className="flex gap-5 overflow-x-auto scrollbar-thin pb-2 -mx-1 px-1">
            {PL_EXPERTS.map((e, i) => (
              <div key={i} className="flex-shrink-0 w-[290px]">
                <ImageBlock person={e.name} aspect="1/1" seed={e.seed} className="!rounded-2xl w-full" />
                <h3 className="mt-3 text-lg font-bold text-neutral-900" style={{ fontFamily: _pp }}>{e.name}</h3>
                <p className="text-[15px] font-semibold text-neutral-800">{e.role}</p>
                <p className="mt-1.5 text-[14px] text-neutral-500 leading-snug">{e.bio}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function PLPricing({ P }) {
  const pr = P.pricing;
  return (
    <section className="bg-white pb-8">
      <div className="max-w-[min(2100px,92vw)] mx-auto px-5 lg:px-8">
        <h2 className="text-3xl lg:text-4xl font-black text-neutral-900 mb-8" style={{ fontFamily: _pp }}>Simple, Transparent Pricing</h2>
        <div className="grid md:grid-cols-2 gap-6">
          <div className="bg-[#eff4ff] rounded-2xl p-8">
            <h3 className="text-2xl font-black text-neutral-900" style={{ fontFamily: _pp }}>{pr.primary.title}</h3>
            <div className="mt-2 flex items-baseline gap-2">
              <span className="text-xl font-bold text-[#2563eb]">{pr.primary.price}</span>
              {pr.primary.unit && <span className="text-sm text-neutral-500">{pr.primary.unit}</span>}
              {pr.primary.old && <span className="text-base text-neutral-400 line-through">{pr.primary.old}</span>}
            </div>
            <p className="mt-6 text-[15px] font-medium text-neutral-500">What's included:</p>
            <ul className="mt-3 space-y-2.5">
              {pr.primary.features.map((f, i) => (
                <li key={i} className="flex items-start gap-2.5 text-[15px] text-neutral-800"><span className="w-1.5 h-1.5 rounded-full bg-[#2563eb] mt-2 flex-shrink-0" />{f}</li>
              ))}
            </ul>
            <button className="mt-7 w-full h-12 rounded-full bg-[#2563eb] text-white text-base font-semibold hover:bg-[#1d4fd7] transition-colors">Get Started</button>
          </div>
          <div className="bg-[#f7f8fa] rounded-2xl p-8">
            <h3 className="text-2xl font-black text-neutral-900" style={{ fontFamily: _pp }}>{pr.secondary.title}</h3>
            <p className="mt-2 text-base text-neutral-700">{pr.secondary.sub}</p>
            <p className="mt-6 text-[15px] font-medium text-neutral-500">What's included:</p>
            <ul className="mt-3 space-y-2.5">
              {pr.secondary.features.map((f, i) => (
                <li key={i} className="flex items-start gap-2.5 text-[15px] text-neutral-800"><span className="w-1.5 h-1.5 rounded-full bg-[#2563eb] mt-2 flex-shrink-0" />{f}</li>
              ))}
            </ul>
            <button className="mt-7 w-full h-12 rounded-full border border-[#2563eb] text-[#2563eb] text-base font-semibold hover:bg-[#2563eb]/5 transition-colors">Contact Us</button>
          </div>
        </div>
      </div>
    </section>
  );
}

function PLFaq({ P }) {
  const [open, setOpen] = useState(null);
  const answer = "Reach out any time — our team is happy to walk you through the details. This programme is built to be flexible, beginner-friendly, and genuinely useful for your day-to-day work.";
  return (
    <section className="bg-[#eef3fb] py-16">
      <div className="max-w-[920px] mx-auto px-5 lg:px-8">
        <h2 className="text-4xl font-black text-neutral-900 text-center mb-9" style={{ fontFamily: _pp }}>FAQ</h2>
        <div className="space-y-3">
          {P.faqs.map((q, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className="bg-white rounded-2xl overflow-hidden">
                <button onClick={() => setOpen(isOpen ? null : i)} className="w-full flex items-center justify-between gap-4 px-6 py-5 text-left">
                  <span className="text-base font-bold text-neutral-900">{q}</span>
                  <Icon name={isOpen ? 'close' : 'plus'} size={18} className="text-neutral-700 flex-shrink-0" />
                </button>
                {isOpen && <div className="px-6 pb-5 -mt-1 text-[15px] text-neutral-600 leading-relaxed">{answer}</div>}
              </div>
            );
          })}
        </div>
        <div className="mt-9 text-center">
          <button className="h-12 px-9 rounded-full bg-[#1a1623] text-white text-base font-semibold hover:bg-black transition-colors">Sign Up Today</button>
          <p className="mt-6 max-w-2xl mx-auto text-xs text-neutral-400 leading-relaxed">{P.footnote}</p>
        </div>
      </div>
    </section>
  );
}

/* ============ Page ============ */
function WebProgramLandingPage({ slug }) {
  const P = PROGRAM_LANDINGS[slug] || PROGRAM_LANDINGS.ai4u;
  return (
    <div className="min-h-screen flex flex-col bg-white" style={{ fontFamily: _la }} data-screen-label={'Program landing · ' + P.name}>
      <HomeHeader />
      <main className="flex-1">
        <PLPartnerStrip />
        <PLHero P={P} />
        <PLDetails P={P} />
        <PLOutcomes P={P} />
        <PLIncludes P={P} />
        <PLHandsOn P={P} />
        <PLExperts />
        <PLPricing P={P} />
        <PLFaq P={P} />
      </main>
      <HomeFooter />
    </div>
  );
}

Object.assign(window, { WebProgramLandingPage, PROGRAM_LANDINGS });
