/* =====================================================================
   Mereka v2 - Flow stubs added per Design Review (Section 8 UX Flows)
   Registration (3-step, phone + BM), Enrollment confirmation,
   Certificate, Empty states, Marketplace launch/waitlist state.
   All brand-token compliant (teal primary, off-black text, Poppins headings).
   ===================================================================== */

/* ---------- shared bits ---------- */
function FlowStepper({ steps, current }) {
  return (
    <div className="flex items-center gap-2 mb-8">
      {steps.map((s, i) => (
        <React.Fragment key={s}>
          <div className="flex items-center gap-2">
            <span className={`w-7 h-7 rounded-full flex items-center justify-center text-[13px] font-bold ${i <= current ? 'bg-primary text-white' : 'bg-neutral-200 text-neutral-500'}`}>
              {i < current ? <Icon name="check" size={14} /> : i + 1}
            </span>
            <span className={`text-[13px] font-semibold ${i === current ? 'text-ink' : 'text-neutral-400'} hidden sm:inline`} style={{ fontFamily: _pp }}>{s}</span>
          </div>
          {i < steps.length - 1 && <span className="flex-1 h-px bg-neutral-200 min-w-[16px]" />}
        </React.Fragment>
      ))}
    </div>
  );
}

function FlowEmptyState({ icon = "compass", title, body, cta, to, onAction }) {
  return (
    <div className="text-center py-16 px-6 rounded-2xl border border-dashed border-neutral-300 bg-surface">
      <div className="w-16 h-16 rounded-2xl bg-primary-light text-primary-700 mx-auto flex items-center justify-center mb-4">
        <Icon name={icon} size={28} />
      </div>
      <h3 className="text-xl font-bold text-ink" style={{ fontFamily: _pp }}>{title}</h3>
      <p className="mt-2 text-[15px] text-neutral-600 max-w-md mx-auto leading-relaxed">{body}</p>
      {cta && (to
        ? <Link to={to} className="inline-flex mt-6"><Button variant="primary">{cta}</Button></Link>
        : <Button variant="primary" className="mt-6" onClick={onAction}>{cta}</Button>)}
    </div>
  );
}

/* ---------- 1. Registration (max 3 steps, phone option + BM) ---------- */
function RegisterFlowPage() {
  const steps = ['Account', 'Interests', 'Confirm'];
  const [step, setStep] = React.useState(0);
  const [method, setMethod] = React.useState('phone');
  const [done, setDone] = React.useState(false);
  const interests = ['AI & Data', 'Design', 'Marketing', 'Business', 'Web Dev', 'Sustainability', 'Wellbeing', 'Finance'];
  const [picked, setPicked] = React.useState([]);
  const toggle = t => setPicked(p => p.includes(t) ? p.filter(x => x !== t) : [...p, t]);

  if (done) {
    return (
      <PublicShell route="/app/register">
        <div className="max-w-lg mx-auto px-5 py-16 text-center">
          <div className="w-20 h-20 rounded-2xl bg-primary text-white mx-auto flex items-center justify-center mb-6"><Icon name="check" size={40} /></div>
          <h1 className="text-3xl font-bold text-ink" style={{ fontFamily: _pp }}>You're all set!</h1>
          <p className="mt-3 text-neutral-600">Your Mereka account is ready. Jump into your dashboard to resume learning, browse learning paths, or find work.</p>
          <Link to="/app/dashboard/overview" className="inline-flex mt-7"><Button variant="primary" size="lg">Go to my dashboard</Button></Link>
        </div>
      </PublicShell>
    );
  }

  return (
    <PublicShell route="/app/register">
      <div className="max-w-lg mx-auto px-5 py-10">
        <div className="flex items-center justify-between mb-6">
          <div style={{ height: 30 }}><MerekaLogo /></div>
          <LangToggle />
        </div>
        <FlowStepper steps={steps} current={step} />

        {step === 0 && (
          <Card className="p-6">
            <h1 className="text-2xl font-bold text-ink mb-1" style={{ fontFamily: _pp }}>Create your account</h1>
            <p className="text-[14px] text-neutral-500 mb-5">Sign up in under a minute. No email? Use your phone number.</p>
            <div className="flex gap-2 mb-4">
              {[['phone', 'Phone number'], ['email', 'Email']].map(([k, l]) => (
                <button key={k} onClick={() => setMethod(k)} className={`flex-1 h-11 rounded-full text-sm font-semibold border transition-colors ${method === k ? 'border-primary bg-primary-light text-primary-700' : 'border-neutral-200 text-neutral-600'}`}>{l}</button>
              ))}
            </div>
            <label className="block text-[13px] font-semibold text-neutral-700 mb-1.5">{method === 'phone' ? 'Phone number' : 'Email address'}</label>
            {method === 'phone' ? (
              <div className="flex gap-2">
                <span className="h-12 px-3 inline-flex items-center rounded-xl border border-neutral-300 bg-surface text-sm font-medium text-neutral-700">🇲🇾 +60</span>
                <input inputMode="numeric" placeholder="12 345 6789" className="flex-1 h-12 px-4 rounded-xl border border-neutral-300 focus:border-primary focus:outline-none" />
              </div>
            ) : (
              <input type="email" placeholder="you@example.com" className="w-full h-12 px-4 rounded-xl border border-neutral-300 focus:border-primary focus:outline-none" />
            )}
            <p className="mt-2 text-[12px] text-neutral-400">We'll send a one-time code to verify. Standard rates may apply.</p>
            <Button variant="primary" size="lg" className="w-full mt-5 w-full" onClick={() => setStep(1)}>Continue</Button>
            <p className="mt-4 text-center text-[13px] text-neutral-500">Already have an account? <Link to="/app/login" className="text-primary-700 font-semibold">Log in</Link></p>
          </Card>
        )}

        {step === 1 && (
          <Card className="p-6">
            <h1 className="text-2xl font-bold text-ink mb-1" style={{ fontFamily: _pp }}>What do you want to learn?</h1>
            <p className="text-[14px] text-neutral-500 mb-5">Pick a few and we'll tailor your learning paths and gigs.</p>
            <div className="flex flex-wrap gap-2">
              {interests.map(t => (
                <button key={t} onClick={() => toggle(t)} className={`px-4 h-11 rounded-full text-sm font-semibold border transition-colors ${picked.includes(t) ? 'border-primary bg-primary-light text-primary-700' : 'border-neutral-200 text-neutral-600 hover:border-neutral-300'}`}>{t}</button>
              ))}
            </div>
            <div className="flex gap-2 mt-7">
              <Button variant="secondary" size="lg" onClick={() => setStep(0)}>Back</Button>
              <Button variant="primary" size="lg" className="w-full flex-1" onClick={() => setStep(2)}>Continue</Button>
            </div>
          </Card>
        )}

        {step === 2 && (
          <Card className="p-6">
            <h1 className="text-2xl font-bold text-ink mb-1" style={{ fontFamily: _pp }}>Almost there</h1>
            <p className="text-[14px] text-neutral-500 mb-5">Confirm and we'll set up your dashboard.</p>
            <div className="rounded-xl bg-surface p-4 text-sm text-neutral-700 space-y-2">
              <div className="flex justify-between"><span className="text-neutral-500">Sign-up method</span><span className="font-semibold">{method === 'phone' ? 'Phone (+60)' : 'Email'}</span></div>
              <div className="flex justify-between"><span className="text-neutral-500">Interests</span><span className="font-semibold">{picked.length ? picked.length + ' selected' : 'Skip for now'}</span></div>
              <div className="flex justify-between"><span className="text-neutral-500">Language</span><span className="font-semibold">EN / BM</span></div>
            </div>
            <label className="flex items-start gap-2 mt-4 text-[13px] text-neutral-600">
              <input type="checkbox" defaultChecked className="mt-0.5 accent-[#1FA3A6]" />
              <span>I agree to Mereka's Terms of Use and Privacy Policy.</span>
            </label>
            <div className="flex gap-2 mt-6">
              <Button variant="secondary" size="lg" onClick={() => setStep(1)}>Back</Button>
              <Button variant="primary" size="lg" className="w-full flex-1" onClick={() => setDone(true)}>Create account</Button>
            </div>
          </Card>
        )}
      </div>
    </PublicShell>
  );
}

/* ---------- 2. Enrollment confirmation ---------- */
function EnrollConfirmPage({ slug }) {
  const name = (slug || 'ai-fundamentals').replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
  const isCourse = typeof COURSES !== 'undefined' && COURSES.some(c => c.slug === slug);
  const homeTo = isCourse ? '/app/dashboard/courses' : '/app/dashboard/learning paths';
  const [enrolled, setEnrolled] = React.useState(false);
  return (
    <PublicShell route={'/app/enroll/' + slug}>
      <div className="max-w-xl mx-auto px-5 py-12">
        {!enrolled ? (
          <Card className="p-7">
            <PillarTag name={name} className="mb-3" />
            <h1 className="text-2xl font-bold text-ink" style={{ fontFamily: _pp }}>{name}</h1>
            <p className="mt-2 text-[15px] text-neutral-600">Confirm your enrollment. You'll get access to all modules, office hours, and a certificate on completion.</p>
            <div className="rounded-xl bg-surface p-4 mt-5 space-y-2 text-sm">
              <div className="flex justify-between"><span className="text-neutral-500">Format</span><span className="font-semibold text-ink">Self-paced + live office hours</span></div>
              <div className="flex justify-between"><span className="text-neutral-500">Duration</span><span className="font-semibold text-ink">2 weeks</span></div>
              <div className="flex justify-between"><span className="text-neutral-500">Certificate</span><span className="font-semibold text-ink">Yes, on completion</span></div>
              <div className="flex justify-between"><span className="text-neutral-500">Price</span><span className="font-semibold text-primary-700">FREE (sponsored)</span></div>
            </div>
            <Button variant="primary" size="lg" className="w-full mt-6 w-full" onClick={() => setEnrolled(true)}>Join this learning path</Button>
            <p className="mt-3 text-center text-[12px] text-neutral-400">"Join" adds this to your dashboard. No payment required.</p>
          </Card>
        ) : (
          <div className="text-center">
            <div className="w-20 h-20 rounded-2xl bg-primary text-white mx-auto flex items-center justify-center mb-6"><Icon name="check" size={40} /></div>
            <h1 className="text-3xl font-bold text-ink" style={{ fontFamily: _pp }}>You're enrolled!</h1>
            <p className="mt-3 text-neutral-600 max-w-md mx-auto">{name} is now in your dashboard. Start module 1 whenever you're ready. Your certificate unlocks when you finish.</p>
            <div className="flex gap-2 justify-center mt-7 flex-wrap">
              <Link to={homeTo}><Button variant="primary" size="lg">Start learning</Button></Link>
              <Link to="/app/dashboard/overview"><Button variant="secondary" size="lg">Go to dashboard</Button></Link>
            </div>
          </div>
        )}
      </div>
    </PublicShell>
  );
}

/* ---------- 3. Certificate / achievement ---------- */
function CertificatePage({ id }) {
  const program = (id || 'ai-fundamentals').replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
  return (
    <PublicShell route={'/app/certificate/' + id}>
      <div className="max-w-3xl mx-auto px-5 py-12">
        <div className="rounded-2xl border-2 border-primary p-8 lg:p-12 bg-white relative overflow-hidden">
          <div className="absolute -top-16 -right-16 w-56 h-56 rounded-full bg-primary-xlight" />
          <div className="relative">
            <div className="flex items-center justify-between mb-8">
              <div style={{ height: 34 }}><MerekaLogo /></div>
              <PillarTag name={program} />
            </div>
            <p className="text-[13px] font-bold uppercase tracking-[0.18em] text-primary-700" style={{ fontFamily: _pp }}>Certificate of Completion</p>
            <p className="mt-6 text-[15px] text-neutral-500">This certifies that</p>
            <h1 className="mt-1 text-4xl font-bold text-ink" style={{ fontFamily: _pp }}>Faiz Fadhillah</h1>
            <p className="mt-4 text-[15px] text-neutral-500">has successfully completed</p>
            <h2 className="mt-1 text-2xl font-bold text-ink" style={{ fontFamily: _pp }}>{program}</h2>
            <div className="flex flex-wrap gap-8 mt-8 pt-6 border-t border-neutral-200 text-sm">
              <div><p className="text-neutral-400 text-[12px] uppercase tracking-wide">Issued</p><p className="font-semibold text-ink">28 July 2026</p></div>
              <div><p className="text-neutral-400 text-[12px] uppercase tracking-wide">Credential ID</p><p className="font-semibold text-ink num-tabular">MRK-{(id || 'AIF').slice(0, 3).toUpperCase()}-2026-0417</p></div>
              <div><p className="text-neutral-400 text-[12px] uppercase tracking-wide">Verify at</p><p className="font-semibold text-primary-700">mereka.io/verify</p></div>
            </div>
          </div>
        </div>
        <div className="flex gap-2 justify-center mt-6 flex-wrap">
          <Button variant="primary" leftIcon="download">Download PDF</Button>
          <Button variant="secondary" leftIcon="external">Share to LinkedIn</Button>
          {typeof SeekPassButton === 'function' && <SeekPassButton credential={program + ' — Certificate of Completion'} />}
        </div>
      </div>
    </PublicShell>
  );
}

/* ---------- 4. New-user empty dashboard ---------- */
function NewUserStartPage() {
  return (
    <UserShell route="/app/dashboard/start" title="Welcome to Mereka">
      <div className="max-w-3xl">
        <FlowEmptyState
          icon="spark"
          title="Let's get you started"
          body="You haven't enrolled in anything yet. Browse learning paths to build in-demand skills, or explore gigs to start earning."
          cta="Browse learning paths" to="/web/programs" />
        <div className="grid sm:grid-cols-3 gap-4 mt-6">
          {[['book', 'Explore courses', '/web/courses'], ['briefcase', 'Find work', '/web/jobs'], ['user', 'Complete your profile', '/app/dashboard/settings']].map(([ic, t, to]) => (
            <Link key={t} to={to} className="p-5 rounded-2xl border border-neutral-200 hover:border-primary hover:shadow-md transition-all">
              <div className="w-10 h-10 rounded-xl bg-primary-light text-primary-700 flex items-center justify-center mb-3"><Icon name={ic} size={20} /></div>
              <p className="font-bold text-ink" style={{ fontFamily: _pp }}>{t}</p>
            </Link>
          ))}
        </div>
      </div>
    </UserShell>
  );
}

/* ---------- 5. Talent marketplace launch / waitlist ---------- */
function TalentWaitlistPage() {
  const [joined, setJoined] = React.useState(false);
  return (
    <PublicShell route="/web/talent">
      <div className="max-w-2xl mx-auto px-5 py-16 text-center">
        <span className="inline-flex items-center gap-1.5 px-3 h-7 rounded-full bg-primary-light text-primary-700 text-[12px] font-bold uppercase tracking-wide mb-5">Coming soon</span>
        <h1 className="text-4xl font-bold text-ink" style={{ fontFamily: _pp }}>The Mereka Talent Marketplace</h1>
        <p className="mt-4 text-lg text-neutral-600">Hire vetted Malaysian talent for projects and gigs, or list your own services. We're onboarding our first cohort of experts now.</p>
        {!joined ? (
          <div className="mt-8 flex gap-2 max-w-md mx-auto">
            <input placeholder="Your email or phone" className="flex-1 h-12 px-4 rounded-full border border-neutral-300 focus:border-primary focus:outline-none" />
            <Button variant="primary" size="lg" onClick={() => setJoined(true)}>Join waitlist</Button>
          </div>
        ) : (
          <div className="mt-8 inline-flex items-center gap-2 px-5 h-12 rounded-full bg-primary-light text-primary-700 font-semibold"><Icon name="check" size={18} /> You're on the list. We'll be in touch.</div>
        )}
        <p className="mt-6 text-[13px] text-neutral-400">Already an expert with Mereka? <Link to="/app/onboarding/expert/welcome" className="text-primary-700 font-semibold">Set up your profile</Link></p>
      </div>
    </PublicShell>
  );
}

/* ---------- Freelancer: submit a proposal for a gig ---------- */
function JobProposalPage({ id }) {
  const j = (typeof JOBS !== 'undefined' && JOBS.find(x => x.id === id)) || (typeof JOBS !== 'undefined' && JOBS[0]) || { title: 'this project', client: 'the client', budget: 'RM 5,000' };
  const [sent, setSent] = React.useState(false);
  if (sent) {
    return (
      <PublicShell route="/web/jobs">
        <div className="max-w-lg mx-auto px-5 py-16 text-center">
          <div className="w-20 h-20 rounded-2xl bg-primary text-white mx-auto flex items-center justify-center mb-6"><Icon name="check" size={40} /></div>
          <h1 className="text-3xl font-bold text-ink" style={{ fontFamily: _pp }}>Proposal sent!</h1>
          <p className="mt-3 text-neutral-600">Your proposal for <span className="font-semibold text-ink">{j.title}</span> is with {j.client}. You'll get a notification when they respond — track it under Proposals in your dashboard.</p>
          <div className="flex gap-2 justify-center mt-7 flex-wrap">
            <Link to="/app/dashboard/gigs"><Button variant="primary" size="lg">View my proposals</Button></Link>
            <Link to="/web/jobs"><Button variant="secondary" size="lg">Browse more work</Button></Link>
          </div>
        </div>
      </PublicShell>
    );
  }
  return (
    <PublicShell route="/web/jobs">
      <div className="max-w-2xl mx-auto px-5 py-8">
        <Link to={'/web/jobs/' + id} className="inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-900 mb-4"><Icon name="chevronLeft" size={14} /> Back to gig</Link>
        <h1 className="text-2xl lg:text-3xl font-bold text-ink" style={{ fontFamily: _pp }}>Submit a proposal</h1>
        <p className="mt-1 text-neutral-500">for <span className="font-semibold text-ink">{j.title}</span> · Budget {j.budget}</p>
        <Card className="p-6 mt-6 space-y-5">
          <div>
            <label className="block text-[13px] font-semibold text-neutral-700 mb-1.5">Cover note</label>
            <textarea rows={5} placeholder="Introduce yourself, why you're a fit, and your approach." className="w-full px-4 py-3 rounded-xl border border-neutral-300 focus:border-primary focus:outline-none text-[15px]" />
          </div>
          <div className="grid sm:grid-cols-2 gap-4">
            <div>
              <label className="block text-[13px] font-semibold text-neutral-700 mb-1.5">Your bid (MYR)</label>
              <input inputMode="numeric" placeholder="5,000" className="w-full h-12 px-4 rounded-xl border border-neutral-300 focus:border-primary focus:outline-none" />
            </div>
            <div>
              <label className="block text-[13px] font-semibold text-neutral-700 mb-1.5">Availability</label>
              <select className="w-full h-12 px-4 rounded-xl border border-neutral-300 focus:border-primary focus:outline-none bg-white">
                <option>Immediately</option><option>Within 1 week</option><option>Within 2 weeks</option><option>Flexible</option>
              </select>
            </div>
          </div>
          <div>
            <label className="block text-[13px] font-semibold text-neutral-700 mb-1.5">Portfolio link (optional)</label>
            <input placeholder="https://" className="w-full h-12 px-4 rounded-xl border border-neutral-300 focus:border-primary focus:outline-none" />
          </div>
          <button className="flex items-center gap-2 text-sm font-semibold text-primary-700"><Icon name="paperclip" size={16} /> Attach a file</button>
          <Button variant="primary" size="lg" className="w-full w-full" onClick={() => setSent(true)}>Send proposal</Button>
          <p className="text-[12px] text-neutral-400 text-center">Mereka takes no fee from freelancers. You'll agree scope and milestones with the client before any work starts.</p>
        </Card>
      </div>
    </PublicShell>
  );
}

/* ---------- Client: post a gig ---------- */
function PostGigPage() {
  const [posted, setPosted] = React.useState(false);
  const cats = ['Design', 'Branding', 'Marketing', 'Web & Dev', 'Content', 'Video', 'Data', 'Strategy'];
  if (posted) {
    return (
      <PublicShell route="/web/jobs">
        <div className="max-w-lg mx-auto px-5 py-16 text-center">
          <div className="w-20 h-20 rounded-2xl bg-primary text-white mx-auto flex items-center justify-center mb-6"><Icon name="check" size={40} /></div>
          <h1 className="text-3xl font-bold text-ink" style={{ fontFamily: _pp }}>Your gig is live!</h1>
          <p className="mt-3 text-neutral-600">We're AI-matching your gig to relevant Mereka talent now. Proposals will start arriving in your dashboard — you can review, message and shortlist from there.</p>
          <div className="flex gap-2 justify-center mt-7 flex-wrap">
            <Link to="/app/hub/jobs/posts"><Button variant="primary" size="lg">Manage my gigs</Button></Link>
            <Link to="/web/jobs"><Button variant="secondary" size="lg">See live gigs</Button></Link>
          </div>
        </div>
      </PublicShell>
    );
  }
  return (
    <PublicShell route="/web/jobs">
      <div className="max-w-2xl mx-auto px-5 py-8">
        <Link to="/web" className="inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-900 mb-4"><Icon name="chevronLeft" size={14} /> Back</Link>
        <h1 className="text-2xl lg:text-3xl font-bold text-ink" style={{ fontFamily: _pp }}>Post a gig</h1>
        <p className="mt-1 text-neutral-500">Describe your project and we'll match it to vetted Mereka talent.</p>
        <Card className="p-6 mt-6 space-y-5">
          <div>
            <label className="block text-[13px] font-semibold text-neutral-700 mb-1.5">Project title</label>
            <input placeholder="e.g. Brand identity for a new skincare label" className="w-full h-12 px-4 rounded-xl border border-neutral-300 focus:border-primary focus:outline-none" />
          </div>
          <div>
            <label className="block text-[13px] font-semibold text-neutral-700 mb-1.5">Category</label>
            <div className="flex flex-wrap gap-2">
              {cats.map(c => <span key={c} className="px-3.5 h-9 inline-flex items-center rounded-full border border-neutral-200 text-sm font-semibold text-neutral-600 hover:border-primary hover:text-primary-700 cursor-pointer">{c}</span>)}
            </div>
          </div>
          <div className="grid sm:grid-cols-2 gap-4">
            <div>
              <label className="block text-[13px] font-semibold text-neutral-700 mb-1.5">Budget (MYR)</label>
              <input inputMode="numeric" placeholder="8,000" className="w-full h-12 px-4 rounded-xl border border-neutral-300 focus:border-primary focus:outline-none" />
            </div>
            <div>
              <label className="block text-[13px] font-semibold text-neutral-700 mb-1.5">Timeline</label>
              <select className="w-full h-12 px-4 rounded-xl border border-neutral-300 focus:border-primary focus:outline-none bg-white">
                <option>Under 1 month</option><option>1–3 months</option><option>3+ months</option>
              </select>
            </div>
          </div>
          <div>
            <label className="block text-[13px] font-semibold text-neutral-700 mb-1.5">Project brief</label>
            <textarea rows={5} placeholder="Goals, deliverables, and anything talent should know." className="w-full px-4 py-3 rounded-xl border border-neutral-300 focus:border-primary focus:outline-none text-[15px]" />
          </div>
          <Button variant="primary" size="lg" className="w-full w-full" onClick={() => setPosted(true)}>Post gig & get matches</Button>
          <p className="text-[12px] text-neutral-400 text-center">Posting is free. You only pay when you hire and approve a milestone.</p>
        </Card>
      </div>
    </PublicShell>
  );
}

/* ---------- FOB / Corporate training catalogue (on-platform) ----------
   Real Mereka Academy courses (corporate.mereka.io/academy/all-courses).
   Course delivery lives on the Academy; cards deep-link out to each course.
   LMS_URL is the Mereka LMS (Open edX) for the organizer / back-of-house. */
const LMS_URL = 'https://lms.mereka.io';
const FOB_ACADEMY = 'https://corporate.mereka.io/academy/course/';
const FOB_COURSES = [
  { t: 'AI Embedding in Your Team', mod: 8, price: 'From RM 24,000', img: '/home/dash/course-1.jpg', slug: 'ai-embedding-in-your-team', claim: true },
  { t: 'AI Adaptation in Your Team', mod: 8, price: 'From RM 16,000', img: '/home/dash/prog-1.jpg', slug: 'ai-adaptation-in-your-team', claim: true },
  { t: 'AI Foundation for Your Team', mod: 5, price: 'From RM 8,000', img: '/home/dash/course-4.jpg', slug: 'ai-foundation-for-your-team', claim: true },
  { t: 'Mastering Analytics with Power BI', mod: 5, price: 'From RM 8,000', img: '/home/dash/course-2.jpg', slug: 'mastering-analytics-with-power-bi-financial-learner-data-insights', claim: true },
  { t: 'Sales & Marketing Essentials with AI', mod: 5, price: 'From RM 8,000', img: '/home/dash/prog-2.jpg', slug: 'sales-and-marketing-essentials-with-ai', claim: true },
  { t: 'AI Skilling for Workforce', mod: 4, price: 'From RM 8,000', img: '/home/dash/prog-3.jpg', slug: 'ai-skilling-for-workforce', claim: true },
  { t: 'ESG Fundamentals: Principles & Practices', mod: 5, price: 'RM 619', img: '/home/dash/exp-3.jpg', slug: 'esg-fundamentals-principles-and-practices', claim: false },
  { t: 'ChatGPT for Job Search & Career Development', mod: 7, price: 'RM 399', img: '/home/dash/course-3.jpg', slug: 'harnessing-the-power-of-chat-gpt-for-job-search-and-career-development', claim: false },
  { t: 'Boosting Sales & Productivity with ChatGPT', mod: 7, price: 'RM 399', img: '/home/dash/xp-2.jpg', slug: 'creating-sales-opportunities-and-boosting-productivity-with-chatgpt', claim: false },
  { t: 'Personal Branding', mod: 5, price: 'RM 399', img: '/home/dash/xp-1.jpg', slug: 'personal-branding', claim: false },
];

function WebCorporatePage() {
  return (
    <PublicShell route="/web/corporate">
      {/* Hero */}
      <section className="relative overflow-hidden" style={{ background: 'linear-gradient(135deg, #1A1623 0%, #241d33 55%, #0a3d3e 100%)' }}>
        <div className="absolute -top-32 -right-32 w-[420px] h-[420px] rounded-full blur-[220px] bg-fob/40" />
        <div className="absolute -bottom-40 -left-24 w-[420px] h-[420px] rounded-full blur-[220px] bg-primary/25" />
        <div className="relative max-w-[min(1400px,92vw)] mx-auto px-5 lg:px-16 py-16 lg:py-20">
          <span className="inline-flex items-center gap-1.5 px-3 h-7 rounded-full bg-white/10 text-white text-[12px] font-bold uppercase tracking-wide mb-5">Mereka for Business · FOB</span>
          <h1 className="text-4xl lg:text-[52px] font-bold text-white leading-[1.05] max-w-3xl" style={{ fontFamily: _pp }}>Upskill your team with HRD Corp-claimable training</h1>
          <p className="mt-5 text-lg text-white/80 max-w-2xl leading-relaxed">Practical, AI-forward learning paths designed for Malaysian teams and SMEs — delivered by Mereka Academy, claimable under HRD Corp, and tailored to your workforce.</p>
          <div className="mt-8 flex flex-wrap gap-3">
            <a href="https://corporate.mereka.io/contact" target="_blank" rel="noreferrer"><Button variant="primary" size="lg" rightIcon="arrowRight">Talk to our team</Button></a>
            <a href={LMS_URL} target="_blank" rel="noreferrer" className="inline-flex items-center gap-2 h-12 px-6 rounded-full border border-white/25 text-white font-semibold hover:bg-white/10 transition-colors">
              <Icon name="settings" size={18} /> Organizer portal (Mereka LMS) <Icon name="arrowUpRight" size={16} />
            </a>
          </div>
        </div>
      </section>

      {/* Course catalogue */}
      <section className="max-w-[min(1400px,92vw)] mx-auto px-5 lg:px-16 py-12 lg:py-14">
        <div className="flex items-end justify-between gap-4 flex-wrap mb-6">
          <div>
            <h2 className="text-2xl lg:text-3xl font-bold text-ink" style={{ fontFamily: _pp }}>Corporate courses</h2>
            <p className="text-neutral-500 mt-1">{FOB_COURSES.length} learning paths from Mereka Academy · most HRD Corp claimable.</p>
          </div>
          <a href="https://corporate.mereka.io/academy/all-courses" target="_blank" rel="noreferrer" className="text-sm font-semibold text-primary-700 hover:underline inline-flex items-center gap-1">View full catalogue <Icon name="arrowUpRight" size={14} /></a>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {FOB_COURSES.map(c => (
            <a key={c.slug} href={FOB_ACADEMY + c.slug} target="_blank" rel="noreferrer" className="group bg-white border border-neutral-200 rounded-2xl overflow-hidden hover:border-fob hover:shadow-md transition-all flex flex-col">
              <div className="aspect-[16/9] relative bg-neutral-100">
                <img src={c.img} alt="" loading="lazy" className="absolute inset-0 w-full h-full object-cover" onError={e => { e.currentTarget.style.display = 'none'; }} />
                <span className="absolute top-3 left-3 inline-flex items-center gap-1 px-2.5 h-6 rounded-full bg-fob-light text-fob text-[11px] font-bold uppercase tracking-wide"><span className="w-1.5 h-1.5 rounded-full bg-fob" /> FOB</span>
                {c.claim && <span className="absolute top-3 right-3 px-2.5 h-6 inline-flex items-center rounded-full bg-white/90 text-[10px] font-bold uppercase tracking-wide text-neutral-700">HRD Corp Claimable</span>}
              </div>
              <div className="p-5 flex-1 flex flex-col">
                <h3 className="font-bold text-base text-ink leading-snug group-hover:text-fob transition-colors">{c.t}</h3>
                <p className="text-xs text-neutral-500 mt-1">Mereka Academy · {c.mod} modules</p>
                <div className="mt-4 flex items-center justify-between pt-3 border-t border-neutral-100">
                  <span className="font-bold text-sm text-ink">{c.price}</span>
                  <span className="text-sm font-semibold text-fob inline-flex items-center gap-1">View course <Icon name="arrowUpRight" size={14} /></span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </section>

      {/* Organizer band */}
      <section className="bg-surface border-t border-neutral-200">
        <div className="max-w-[min(1400px,92vw)] mx-auto px-5 lg:px-16 py-12 grid lg:grid-cols-[1fr_auto] items-center gap-6">
          <div>
            <h2 className="text-2xl font-bold text-ink" style={{ fontFamily: _pp }}>Run a learning path with Mereka</h2>
            <p className="text-neutral-600 mt-2 max-w-2xl">Learning Path organizers create cohorts, manage participants, upload content and issue certificates in the Mereka LMS.</p>
          </div>
          <a href={LMS_URL} target="_blank" rel="noreferrer"><Button variant="primary" size="lg" rightIcon="arrowUpRight">Open Organizer portal</Button></a>
        </div>
      </section>
    </PublicShell>
  );
}

Object.assign(window, {
  FlowStepper, FlowEmptyState,
  RegisterFlowPage, EnrollConfirmPage, CertificatePage, NewUserStartPage, TalentWaitlistPage,
  JobProposalPage, PostGigPage, WebCorporatePage,
});