import React from 'react';
import {
  ArrowRight,
  Target,
  Sparkles,
  HeartHandshake,
  ShieldCheck,
  Cpu,
  Users2,
  MapPin,
  CheckCircle2,
} from 'lucide-react';
import { Breadcrumbs } from '../components/Breadcrumbs';

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

export function AboutPage({ onNavigate, onOpenEnquiry }: AboutPageProps) {
  const breadcrumbs = [{ label: 'About PANIA' }];

  const values = [
    {
      title: 'Customer Obsession',
      description: 'We place learner and client needs at the centre of decisions and programme design.',
      expression: 'Help visitors identify an appropriate course and receive a relevant next step.',
      icon: Users2,
    },
    {
      title: 'Accountability',
      description: 'We take ownership of commitments, instructional quality and continuous improvement.',
      expression: 'State clear learning expectations and explain transparently how enquiries and cohorts are handled.',
      icon: CheckCircle2,
    },
    {
      title: 'Integrity',
      description: 'We build trust through honest communication, transparent terms and professional conduct.',
      expression: 'Use accurate course descriptions and clearly distinguish preparation from external certification.',
      icon: ShieldCheck,
    },
    {
      title: 'Tech-savviness',
      description: 'We embrace responsible innovation, emerging technology and continuous learning.',
      expression: 'Demonstrate practical technology learning through modern cloud, AI, and developer tools.',
      icon: Cpu,
    },
    {
      title: 'Ubuntu',
      description: 'We grow through inclusion, collaboration, mentorship and shared learning.',
      expression: 'Present learning, mentorship and shared progress as connected community activities.',
      icon: HeartHandshake,
    },
  ];

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

      {/* Header */}
      <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-4">
            <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>Nairobi, Kenya · Founded 2026</span>
            </div>

            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-serif font-bold text-[#0B4035] tracking-tight leading-tight">
              Determined to accomplish a purpose.
            </h1>

            <p className="text-base sm:text-lg text-stone-700 leading-relaxed">
              <strong className="text-[#0B4035]">PANIA</strong> is a Swahili word meaning to be determined to accomplish a purpose. That idea shapes our entire approach: develop useful skills, practise them in real scenarios, and connect learning directly with career progression and workplace performance.
            </p>
          </div>
        </div>
      </section>

      {/* 1. Who We Are & Why PANIA Exists (Pack 2 Section 5 verbatim) */}
      <section className="py-16 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
          <div className="bg-white rounded-2xl p-8 border border-[#E5E7DC] shadow-xs space-y-4">
            <span className="text-xs font-bold uppercase tracking-wider text-[#0B4035]">
              Who We Are
            </span>
            <h2 className="text-2xl font-serif font-bold text-[#0B4035]">
              Connecting skills with practical capability
            </h2>
            <p className="text-sm text-stone-700 leading-relaxed">
              PANIA Digital Academy is a Nairobi-based institution focused on digital skills, career development and corporate capability. Founded in 2026, we connect practical learning with the next steps people and organisations want to take.
            </p>
            <p className="text-sm text-stone-700 leading-relaxed">
              Our delivery is 100% online through Zoom, Google Meet and WhatsApp, enabling talent across Kenya, East Africa, and beyond to learn from industry practitioners without geographic constraints.
            </p>
          </div>

          <div className="bg-white rounded-2xl p-8 border border-[#E5E7DC] shadow-xs space-y-4">
            <span className="text-xs font-bold uppercase tracking-wider text-[#0B4035]">
              Why PANIA Exists
            </span>
            <h2 className="text-2xl font-serif font-bold text-[#0B4035]">
              Closing the gap to meaningful work
            </h2>
            <p className="text-sm text-stone-700 leading-relaxed">
              Learning a skill is one step. Knowing how to apply it, present it and continue developing it matters too. PANIA brings training, career guidance and mentorship together to help learners prepare for meaningful opportunities.
            </p>
            <p className="text-sm text-stone-700 leading-relaxed">
              For businesses and institutional partners, we bridge the gap between classroom theory and production environments through supported practice before applying skills to live work.
            </p>
          </div>
        </div>

        {/* Vision, Mission, Purpose, Brand Promise Grid (Pack 2 Section 1) */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mt-8">
          <div className="bg-[#0B4035] text-white p-6 rounded-2xl">
            <span className="text-xs font-bold text-[#D5E64D] uppercase tracking-wider block mb-1">
              01 · Vision
            </span>
            <h3 className="font-serif font-bold text-lg text-white mb-2">Borderless Skilling</h3>
            <p className="text-xs text-stone-200 leading-relaxed">
              Africa’s leading borderless digital skilling organization, empowering talent and transforming lives through technology.
            </p>
          </div>

          <div className="bg-[#0B4035] text-white p-6 rounded-2xl">
            <span className="text-xs font-bold text-[#D5E64D] uppercase tracking-wider block mb-1">
              02 · Mission
            </span>
            <h3 className="font-serif font-bold text-lg text-white mb-2">Accessible Training</h3>
            <p className="text-xs text-stone-200 leading-relaxed">
              Accessible, industry-relevant digital training and mentorship that equips individuals and organizations with practical skills for employment and growth.
            </p>
          </div>

          <div className="bg-[#0B4035] text-white p-6 rounded-2xl">
            <span className="text-xs font-bold text-[#D5E64D] uppercase tracking-wider block mb-1">
              03 · Purpose
            </span>
            <h3 className="font-serif font-bold text-lg text-white mb-2">Bridge the Gap</h3>
            <p className="text-xs text-stone-200 leading-relaxed">
              To bridge Africa’s digital skills gap and expand access to meaningful employment and global work opportunities.
            </p>
          </div>

          <div className="bg-[#0B4035] text-white p-6 rounded-2xl">
            <span className="text-xs font-bold text-[#D5E64D] uppercase tracking-wider block mb-1">
              04 · Brand Promise
            </span>
            <h3 className="font-serif font-bold text-lg text-white mb-2">Practical Skills</h3>
            <p className="text-xs text-stone-200 leading-relaxed">
              Empowering every learner with practical, future-ready digital skills that unlock real opportunities.
            </p>
          </div>
        </div>
      </section>

      {/* 2. Founder and CEO Section (#founder) */}
      <section id="founder" className="py-16 bg-white border-y border-[#E5E7DC]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
            {/* Founder Portrait (Preserved exact supplied image asset) */}
            <div className="lg:col-span-5 text-center">
              <div className="relative inline-block mx-auto">
                <div className="w-64 h-64 sm:w-80 sm:h-80 rounded-2xl overflow-hidden border-4 border-[#0B4035] shadow-xl mx-auto">
                  <img
                    src="/assets/aistudio/James_Omego-_CEO_071d2539.png"
                    alt="James Omego, Founder and CEO of PANIA Digital Academy"
                    className="w-full h-full object-cover object-top"
                  />
                </div>
                <div className="absolute -bottom-3 -right-3 bg-[#D5E64D] text-[#0B4035] px-3.5 py-1.5 rounded-lg text-xs font-bold shadow-md">
                  Founder & CEO
                </div>
              </div>
            </div>

            {/* Founder Bio */}
            <div className="lg:col-span-7 space-y-5">
              <div>
                <span className="text-xs font-bold uppercase tracking-wider text-[#0B4035] bg-[#F3F8D3] px-3 py-1 rounded-full">
                  Executive Leadership
                </span>
                <h2 className="text-3xl sm:text-4xl font-serif font-bold text-[#0B4035] mt-2">
                  James Omego
                </h2>
                <span className="text-sm font-semibold text-stone-600 block mt-0.5">
                  Founder and CEO · PANIA Digital Academy
                </span>
              </div>

              <p className="text-sm sm:text-base text-stone-700 leading-relaxed">
                James founded PANIA Digital Academy to connect digital learning with practical capability and meaningful employment. His background spans project management, computer science, cloud architecture, and cybersecurity. He leads the Academy’s strategic direction, programme development, client engagement, and quality oversight.
              </p>

              {/* Core domains */}
              <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 pt-2">
                <div className="p-3 bg-[#F6F7F2] rounded-xl border border-[#E5E7DC] text-center">
                  <span className="font-serif font-bold text-xs text-[#0B4035] block">
                    Project Management
                  </span>
                </div>
                <div className="p-3 bg-[#F6F7F2] rounded-xl border border-[#E5E7DC] text-center">
                  <span className="font-serif font-bold text-xs text-[#0B4035] block">
                    Computer Science
                  </span>
                </div>
                <div className="p-3 bg-[#F6F7F2] rounded-xl border border-[#E5E7DC] text-center">
                  <span className="font-serif font-bold text-xs text-[#0B4035] block">
                    Cloud Architecture
                  </span>
                </div>
                <div className="p-3 bg-[#F6F7F2] rounded-xl border border-[#E5E7DC] text-center">
                  <span className="font-serif font-bold text-xs text-[#0B4035] block">
                    Cybersecurity
                  </span>
                </div>
              </div>

              <div className="p-4 bg-[#F6F7F2] rounded-xl border-l-4 border-[#0B4035] text-xs text-stone-600 leading-relaxed">
                PANIA’s delivery model allows trainers, mentors and subject specialists across the continent to contribute to defined engagements under centralized quality oversight.
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 3. Our Commitments / Core Values (Pack 2 Section 1 & 5 verbatim) */}
      <section className="py-16 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center max-w-2xl mx-auto mb-12">
          <span className="text-xs font-semibold uppercase tracking-wider text-[#0B4035]">
            Our Guiding Philosophy
          </span>
          <h2 className="text-3xl font-serif font-bold text-[#0B4035] mt-1">
            Core values expressed through action
          </h2>
          <p className="text-sm text-stone-600 mt-2">
            These commitments guide how we design learning, interact with participants, and partner with organisations.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6">
          {values.map((val) => {
            const Icon = val.icon;
            return (
              <div
                key={val.title}
                className="bg-white rounded-2xl p-6 border border-[#E5E7DC] shadow-xs flex flex-col justify-between"
              >
                <div className="space-y-3">
                  <div className="w-9 h-9 rounded-xl bg-[#F6F7F2] text-[#0B4035] flex items-center justify-center">
                    <Icon className="w-5 h-5 text-[#0B4035]" />
                  </div>

                  <h3 className="font-serif font-bold text-lg text-[#0B4035]">
                    {val.title}
                  </h3>

                  <p className="text-xs text-stone-600 leading-relaxed">
                    {val.description}
                  </p>
                </div>

                <div className="mt-4 pt-3 border-t border-stone-100 text-[11px] text-[#207A78] font-medium leading-normal">
                  {val.expression}
                </div>
              </div>
            );
          })}
        </div>
      </section>
    </div>
  );
}