import React from 'react';
import {
  ArrowRight,
  Compass,
  UserCheck,
  Briefcase,
  ShieldCheck,
  CheckCircle2,
  FileText,
  MessageSquare,
  Globe2,
} from 'lucide-react';
import { Breadcrumbs } from '../components/Breadcrumbs';

interface CareerSupportPageProps {
  onNavigate: (path: string) => void;
  onOpenEnquiry: (mode?: 'learner' | 'guidance' | 'corporate' | 'partnership' | 'advisory') => void;
}

export function CareerSupportPage({ onNavigate, onOpenEnquiry }: CareerSupportPageProps) {
  const breadcrumbs = [{ label: 'Career Support' }];

  return (
    <div className="bg-[#F6F7F2] min-h-screen">
      <Breadcrumbs items={breadcrumbs} onNavigate={onNavigate} />

      {/* Hero Section */}
      <section className="bg-white border-b border-[#E5E7DC] py-14 sm:py-20 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto">
          <div className="max-w-3xl space-y-5">
            <div className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-[#0B4035] bg-[#F3F8D3] px-3 py-1 rounded-full">
              <span>Skills to Opportunity Framework</span>
            </div>

            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-serif font-bold text-[#0B4035] tracking-tight leading-tight">
              From practical learning to career progression.
            </h1>

            <p className="text-base sm:text-lg text-stone-700 leading-relaxed">
              Learning a skill is only the first step. Knowing how to apply it, present it professionally, and continue developing it matters just as much. PANIA connects technical training with career guidance, dedicated mentorship, and real job linkages.
            </p>

            <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 pt-3">
              <button
                onClick={() => onOpenEnquiry('guidance')}
                className="inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-xl bg-[#0B4035] text-[#D5E64D] hover:bg-[#072C24] font-semibold text-sm transition-all shadow-md cursor-pointer"
              >
                <span>Ask about career support</span>
                <ArrowRight className="w-4 h-4" />
              </button>

              <button
                onClick={() => onNavigate('/programmes')}
                className="inline-flex items-center justify-center gap-2 px-5 py-3.5 rounded-xl border border-stone-300 text-stone-800 hover:bg-stone-50 font-semibold text-xs transition-colors"
              >
                <span>Browse training programmes</span>
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* The 3-Stage Career Framework (Pack 2 & 3 Spec) */}
      <section className="py-16 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {/* Stage 1 */}
          <div className="bg-white rounded-2xl p-8 border border-[#E5E7DC] shadow-xs flex flex-col justify-between">
            <div className="space-y-4">
              <div className="w-10 h-10 rounded-xl bg-[#F6F7F2] flex items-center justify-center text-[#0B4035]">
                <Globe2 className="w-5 h-5 text-[#0B4035]" />
              </div>

              <div>
                <span className="text-xs font-mono font-bold text-[#0B4035] uppercase tracking-wider block">
                  Stage 01
                </span>
                <h2 className="font-serif font-bold text-2xl text-[#0B4035] mt-0.5">
                  Online work readiness
                </h2>
              </div>

              <p className="text-sm text-stone-700 leading-relaxed">
                Build the professional habits and digital etiquette needed to work effectively with international remote clients and modern distributed teams.
              </p>

              <ul className="space-y-2 text-xs text-stone-600 pt-2 border-t border-stone-100">
                <li className="flex items-center gap-2">
                  <CheckCircle2 className="w-3.5 h-3.5 text-[#207A78]" />
                  <span>Professional written and verbal communication</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle2 className="w-3.5 h-3.5 text-[#207A78]" />
                  <span>Digital collaboration tools (Slack, Meet, Trello)</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle2 className="w-3.5 h-3.5 text-[#207A78]" />
                  <span>Proof-of-work portfolio preparation</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle2 className="w-3.5 h-3.5 text-[#207A78]" />
                  <span>Online safety and platform fraud awareness</span>
                </li>
              </ul>
            </div>

            <div className="pt-6 mt-6 border-t border-stone-100">
              <button
                onClick={() => onNavigate('/programmes/online-work-readiness')}
                className="text-xs font-bold text-[#0B4035] hover:underline inline-flex items-center gap-1"
              >
                <span>View Online Work Readiness Programme</span>
                <ArrowRight className="w-3 h-3" />
              </button>
            </div>
          </div>

          {/* Stage 2 */}
          <div className="bg-white rounded-2xl p-8 border border-[#E5E7DC] shadow-xs flex flex-col justify-between">
            <div className="space-y-4">
              <div className="w-10 h-10 rounded-xl bg-[#F6F7F2] flex items-center justify-center text-[#0B4035]">
                <Compass className="w-5 h-5 text-[#0B4035]" />
              </div>

              <div>
                <span className="text-xs font-mono font-bold text-[#0B4035] uppercase tracking-wider block">
                  Stage 02
                </span>
                <h2 className="font-serif font-bold text-2xl text-[#0B4035] mt-0.5">
                  Career guidance & mentorship
                </h2>
              </div>

              <p className="text-sm text-stone-700 leading-relaxed">
                Connect learning with a defined career pathway. Work with experienced practitioners to identify suitable roles, improve resumes, and prepare for interviews.
              </p>

              <ul className="space-y-2 text-xs text-stone-600 pt-2 border-t border-stone-100">
                <li className="flex items-center gap-2">
                  <CheckCircle2 className="w-3.5 h-3.5 text-[#207A78]" />
                  <span>Personalized career trajectory mapping</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle2 className="w-3.5 h-3.5 text-[#207A78]" />
                  <span>Resume, LinkedIn, and portfolio reviews</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle2 className="w-3.5 h-3.5 text-[#207A78]" />
                  <span>Mock technical interviews and constructive feedback</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle2 className="w-3.5 h-3.5 text-[#207A78]" />
                  <span>Ongoing mentor check-ins during training</span>
                </li>
              </ul>
            </div>

            <div className="pt-6 mt-6 border-t border-stone-100">
              <button
                onClick={() => onOpenEnquiry('guidance')}
                className="text-xs font-bold text-[#0B4035] hover:underline inline-flex items-center gap-1"
              >
                <span>Request 1-on-1 guidance</span>
                <ArrowRight className="w-3 h-3" />
              </button>
            </div>
          </div>

          {/* Stage 3 */}
          <div className="bg-white rounded-2xl p-8 border border-[#E5E7DC] shadow-xs flex flex-col justify-between">
            <div className="space-y-4">
              <div className="w-10 h-10 rounded-xl bg-[#F6F7F2] flex items-center justify-center text-[#0B4035]">
                <Briefcase className="w-5 h-5 text-[#0B4035]" />
              </div>

              <div>
                <span className="text-xs font-mono font-bold text-[#0B4035] uppercase tracking-wider block">
                  Stage 03
                </span>
                <h2 className="font-serif font-bold text-2xl text-[#0B4035] mt-0.5">
                  Job linkages & placement
                </h2>
              </div>

              <p className="text-sm text-stone-700 leading-relaxed">
                Connect prepared, assessed candidates with relevant remote contracts, internships, and corporate employment opportunities across Africa and global markets.
              </p>

              <ul className="space-y-2 text-xs text-stone-600 pt-2 border-t border-stone-100">
                <li className="flex items-center gap-2">
                  <CheckCircle2 className="w-3.5 h-3.5 text-[#207A78]" />
                  <span>Introductions to hiring partner networks</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle2 className="w-3.5 h-3.5 text-[#207A78]" />
                  <span>Freelance bidding and client onboarding support</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle2 className="w-3.5 h-3.5 text-[#207A78]" />
                  <span>Pre-screened candidate recommendations</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle2 className="w-3.5 h-3.5 text-[#207A78]" />
                  <span>First 90-day workplace transition advisory</span>
                </li>
              </ul>
            </div>

            <div className="pt-6 mt-6 border-t border-stone-100">
              <button
                onClick={() => onOpenEnquiry('corporate')}
                className="text-xs font-bold text-[#0B4035] hover:underline inline-flex items-center gap-1"
              >
                <span>Hire PANIA graduates →</span>
              </button>
            </div>
          </div>
        </div>

        {/* Ethical Non-Guarantee Transparency Callout (Pack 2 verbatim) */}
        <div className="mt-12 bg-white rounded-2xl p-6 sm:p-8 border border-[#E5E7DC] flex flex-col sm:flex-row items-start gap-5">
          <div className="w-12 h-12 rounded-xl bg-[#F3F8D3] flex items-center justify-center text-[#0B4035] shrink-0">
            <ShieldCheck className="w-6 h-6" />
          </div>

          <div className="space-y-2">
            <h3 className="font-serif font-bold text-lg text-[#0B4035]">
              Placement and Certification Integrity Policy
            </h3>
            <p className="text-xs sm:text-sm text-stone-700 leading-relaxed">
              PANIA connects learning with career guidance, mentorship and relevant job linkages. The support available depends on the specific programme, candidate readiness, and market opportunities. <strong>Participation does not guarantee employment, freelance income, or specific salary levels.</strong> External certification awards remain subject to each credentialing body’s independent examination standards.
            </p>
          </div>
        </div>
      </section>
    </div>
  );
}