import React, { useState } from 'react';
import {
  ArrowUpRight,
  Eye,
  Target,
  Compass,
  Award,
  Building,
  Laptop,
  Users,
  Video,
  MessageCircle,
  ShieldCheck,
  ChevronDown,
  ChevronUp,
  HeartHandshake,
  Cpu,
  CheckCircle2,
} from 'lucide-react';
import { Container, Eyebrow, Pill, PhotoHead, CtaBanner } from '../components/Ui';
import { Reveal, BRAND } from '../components/Brand';
import { WORKSHOP_TOPICS } from './OrganisationsPage';
import { FaqAccordion } from '../components/FaqAccordion';

const softBgs = ['bg-ocean-soft', 'bg-teal-soft', 'bg-terra-soft', 'bg-citron-soft'];
const badgeStyles = [
  'bg-ocean text-white',
  'bg-teal text-white',
  'bg-terra text-white',
  'bg-accent text-accent-foreground',
];

// 1. AWS Workshops dedicated page (/organisations/aws-workshops)
export function WorkshopsPage({ onNavigate }: { onNavigate: (path: string) => void }) {
  return (
    <div className="min-h-screen pb-16">
      <PhotoHead
        eyebrow="Organisations / AWS workshops"
        a="Hands-on AWS,"
        b="built for teams."
        block="bg-ocean"
        accent="text-ocean"
        img={
          <img
            src="https://images.fillout.com/902438/vk44zcsdgn/generated-images/jWGaj3UheweVbvaaeDG8ZM/img_k6UvBo5eoCRtrQfD.jpg"
            alt="Engineer reviewing cloud architecture"
            className="w-full h-full object-cover"
          />
        }
      >
        <p className="text-lg text-muted-foreground mt-5 max-w-lg leading-relaxed">
          Focus your team’s learning on an AWS service or operational need. Select a workshop topic below and tell us the roles involved so we can agree on scope and practical exercises.
        </p>
      </PhotoHead>

      <Container className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {WORKSHOP_TOPICS.map((topic, idx) => (
          <Reveal key={topic.id} delay={(idx % 3) * 0.05} className="h-full">
            <a
              href={`#/contact?mode=corporate&topic=${encodeURIComponent(topic.id)}`}
              onClick={(e) => {
                e.preventDefault();
                onNavigate(`/contact?mode=corporate&topic=${encodeURIComponent(topic.id)}`);
              }}
              className={`lift block rounded-3xl p-6 h-full border border-border shadow-xs ${softBgs[idx % 4]}`}
            >
              <span className={`inline-grid place-items-center h-10 px-3.5 rounded-xl font-bold text-xs uppercase ${badgeStyles[idx % 4]}`}>
                {topic.id}
              </span>
              <p className="text-xl font-bold text-foreground mt-4">{topic.id} Deep Dive</p>
              <p className="text-xs sm:text-sm text-muted-foreground mt-2 leading-relaxed">
                {topic.summary}
              </p>
              <span className="inline-flex items-center gap-1 text-xs font-bold text-foreground mt-5 hover:underline">
                Enquire about {topic.id} <ArrowUpRight className="h-3.5 w-3.5" />
              </span>
            </a>
          </Reveal>
        ))}
      </Container>

      <CtaBanner />
    </div>
  );
}

// 2. Partnerships page (/organisations/partnerships)
export function PartnershipsPage({ onNavigate }: { onNavigate: (path: string) => void }) {
  const includes = [
    { label: 'Outreach', desc: 'Mobilize and screen target participants' },
    { label: 'Training', desc: 'Live online instruction with certified mentors' },
    { label: 'Work Readiness', desc: 'Freelance tools, safety, and client etiquette' },
    { label: 'Mentorship', desc: 'One-on-one portfolio review and coaching' },
    { label: 'Job Linkages', desc: 'Connecting talent with employment partners' },
  ];

  const agreedChecklist = [
    'Trainer capacity',
    'Learner support',
    'Technology access',
    'Lab costs',
    'Assessment rubrics',
    'Progress evidence',
  ];

  return (
    <div className="min-h-screen pb-16">
      <PhotoHead
        eyebrow="Organisations / Partnerships"
        a="A programme for"
        b="your cohort."
        block="bg-teal"
        accent="text-teal"
        img={
          <img
            src="https://images.fillout.com/902438/vk44zcsdgn/generated-images/mBxMcTizTQ4a35ZdNnS951/img_7yLtT4GXULk3qGCM.jpg"
            alt="Cohort of learners with laptops"
            className="w-full h-full object-cover"
          />
        }
      >
        <p className="text-lg text-muted-foreground mt-5 max-w-lg leading-relaxed">
          Build a learning programme for your community or cohort, with responsibilities and reporting agreed together.
        </p>
        <div className="mt-7">
          <Pill to="/contact?mode=partnership">Discuss a partnership</Pill>
        </div>
      </PhotoHead>

      <Container className="mt-14 space-y-12">
        <div className="bg-card rounded-3xl p-8 border border-border shadow-xs">
          <Eyebrow>What a partnership can include</Eyebrow>
          <div className="mt-5 grid grid-cols-2 sm:grid-cols-5 gap-4">
            {includes.map((item, idx) => (
              <div key={item.label} className="p-4 rounded-2xl bg-secondary/60 space-y-1">
                <span className="font-mono text-xs font-bold opacity-60">0{idx + 1}</span>
                <p className="font-bold text-sm text-foreground">{item.label}</p>
                <p className="text-[11px] text-muted-foreground">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>

        <div className="bg-secondary/60 rounded-3xl p-8 border border-border">
          <Eyebrow>Agreed before delivery</Eyebrow>
          <h3 className="text-2xl font-bold mt-2">Clear accountability</h3>
          <p className="text-sm text-muted-foreground mt-1 max-w-xl">
            Each engagement defines the target group, delivery responsibilities and reporting expectations before launch.
          </p>

          <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 mt-6">
            {agreedChecklist.map((c) => (
              <div key={c} className="flex items-center gap-2.5 p-3 rounded-xl bg-card border border-border text-xs font-semibold text-foreground">
                <CheckCircle2 className="h-4 w-4 text-teal shrink-0" />
                <span>{c}</span>
              </div>
            ))}
          </div>
        </div>
      </Container>

      <CtaBanner />
    </div>
  );
}

// 3. Career Support page (/career-support)
export function CareerSupportPage({ onNavigate }: { onNavigate: (path: string) => void }) {
  const steps = [
    {
      title: 'Training',
      desc: 'Practical online programmes that build relevant skills across cloud, AI, data and remote work.',
      bg: 'bg-ocean-soft',
      num: '01',
    },
    {
      title: 'Career guidance and mentorship',
      desc: 'Discuss your goals, identify development priorities, polish your portfolio and prepare for interviews.',
      bg: 'bg-teal-soft',
      num: '02',
    },
    {
      title: 'Placement and job linkages',
      desc: 'Prepare for relevant work opportunities through career support and direct partner employer linkages.',
      bg: 'bg-citron-soft',
      num: '03',
    },
  ];

  return (
    <div className="min-h-screen pb-16">
      <PhotoHead
        eyebrow="Career support"
        a="Learning connected to"
        b="your next step."
        block="bg-accent"
        accent="text-teal"
        img={
          <img
            src="https://images.fillout.com/902438/vk44zcsdgn/generated-images/waKxS5qYL1bdB58R2mwXMx/img_vPZeEM3Mzv01jXJp.jpg"
            alt="Learner in an online mentoring session"
            className="w-full h-full object-cover"
          />
        }
      >
        <p className="text-lg text-muted-foreground mt-5 max-w-lg leading-relaxed">
          Our individual pathway connects training with career guidance, mentorship and relevant job linkages.
        </p>
      </PhotoHead>

      <Container className="mt-14">
        <div className="grid gap-6 md:grid-cols-3">
          {steps.map((st) => (
            <div key={st.title} className={`rounded-3xl p-8 border border-border shadow-xs flex flex-col justify-between ${st.bg}`}>
              <div>
                <span className="font-mono text-xs font-bold px-2 py-0.5 rounded bg-card/80 text-foreground">
                  STAGE {st.num}
                </span>
                <h3 className="text-2xl font-bold mt-4 text-foreground">{st.title}</h3>
                <p className="text-sm text-muted-foreground mt-2 leading-relaxed">{st.desc}</p>
              </div>

              <div className="pt-6 mt-6 border-t border-border/60">
                <a
                  href="#/contact?mode=guidance"
                  onClick={(e) => {
                    e.preventDefault();
                    onNavigate('/contact?mode=guidance');
                  }}
                  className="text-xs font-bold text-foreground hover:underline inline-flex items-center gap-1"
                >
                  Ask about career guidance <ArrowUpRight className="h-3 w-3" />
                </a>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-10 bg-card rounded-3xl p-6 md:p-8 border border-border shadow-xs flex items-start gap-4">
          <ShieldCheck className="h-6 w-6 text-teal shrink-0 mt-0.5" />
          <div className="space-y-1">
            <h4 className="font-bold text-sm text-foreground">Integrity Policy</h4>
            <p className="text-xs text-muted-foreground leading-relaxed">
              PANIA connects learning with career guidance and placement support. Participation does not guarantee employment or freelance income; opportunities depend on employer requirements and candidate performance.
            </p>
          </div>
        </div>
      </Container>

      <CtaBanner />
    </div>
  );
}

// 4. About PANIA page (/about)
export function AboutPage({ onNavigate }: { onNavigate: (path: string) => void }) {
  const values = [
    { title: 'Customer obsession', desc: 'We place learner and client needs at the centre of decisions and programme design.' },
    { title: 'Accountability', desc: 'We take ownership of commitments, quality and continuous improvement.' },
    { title: 'Integrity', desc: 'We build trust through honest communication, transparent terms and professional conduct.' },
    { title: 'Tech-savviness', desc: 'We embrace responsible innovation, emerging technology and continuous learning.' },
    { title: 'Ubuntu', desc: 'We grow through inclusion, collaboration, mentorship and shared learning.' },
  ];

  return (
    <div className="min-h-screen pb-16">
      <PhotoHead
        eyebrow="About PANIA"
        a="Practical learning."
        b="Purposeful progress."
        block="bg-accent"
        accent="text-teal"
        img={
          <img
            src="https://images.fillout.com/902438/vk44zcsdgn/generated-images/uteGWhHScxfTQrVcWbgT9p/img_LCW8ChsAM1I7LXZw.jpg"
            alt="Learner studying online"
            className="w-full h-full object-cover"
          />
        }
      >
        <p className="text-lg text-muted-foreground mt-5 max-w-lg 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>
      </PhotoHead>

      <Container className="mt-14 space-y-12">
        {/* Swahili Meaning */}
        <div className="bg-card rounded-3xl p-8 md:p-12 border border-border shadow-xs">
          <span className="font-serif italic text-2xl text-teal">Pania</span>
          <h2 className="text-3xl font-bold mt-2">A Swahili word meaning to be determined to accomplish a purpose.</h2>
          <p className="text-sm text-muted-foreground mt-3 max-w-2xl leading-relaxed">
            Our purpose is to connect digital skills with meaningful employment and practical workplace capability. We help businesses take learning from a test environment into practical application in a live environment.
          </p>
        </div>

        {/* Vision, Mission, Purpose, Brand Promise */}
        <div className="grid gap-4 md:grid-cols-2">
          <div className="bg-ocean-soft rounded-3xl p-8 space-y-2">
            <p className="text-xs tracking-widest text-muted-foreground uppercase font-bold">01 · Vision</p>
            <h3 className="text-xl font-bold text-foreground">Africa’s borderless academy</h3>
            <p className="text-xs sm:text-sm text-muted-foreground leading-relaxed">
              To become Africa’s leading borderless digital skilling organization, empowering talent and transforming lives through technology.
            </p>
          </div>

          <div className="bg-teal-soft rounded-3xl p-8 space-y-2">
            <p className="text-xs tracking-widest text-muted-foreground uppercase font-bold">02 · Mission</p>
            <h3 className="text-xl font-bold text-foreground">Industry-relevant mentorship</h3>
            <p className="text-xs sm:text-sm text-muted-foreground leading-relaxed">
              Accessible, industry-relevant digital training and mentorship that equips individuals and organizations with practical skills for meaningful employment and career growth.
            </p>
          </div>

          <div className="bg-terra-soft rounded-3xl p-8 space-y-2">
            <p className="text-xs tracking-widest text-muted-foreground uppercase font-bold">03 · Purpose</p>
            <h3 className="text-xl font-bold text-foreground">Bridge the digital divide</h3>
            <p className="text-xs sm:text-sm text-muted-foreground leading-relaxed">
              To bridge Africa’s digital skills gap and expand access to meaningful employment and global work opportunities.
            </p>
          </div>

          <div className="bg-citron-soft rounded-3xl p-8 space-y-2">
            <p className="text-xs tracking-widest text-muted-foreground uppercase font-bold">04 · Brand Promise</p>
            <h3 className="text-xl font-bold text-foreground">Future-ready competence</h3>
            <p className="text-xs sm:text-sm text-muted-foreground leading-relaxed">
              Empowering every learner with practical, future-ready digital skills that unlock real opportunities.
            </p>
          </div>
        </div>

        {/* Founder Section */}
        <div className="bg-card rounded-3xl p-8 md:p-12 border border-border shadow-xs grid lg:grid-cols-12 gap-8 items-center">
          <div className="lg:col-span-4 text-center">
            <img
              src={BRAND.ceo}
              alt="James Omego, Founder and CEO"
              className="w-48 h-48 sm:w-60 sm:h-60 rounded-3xl object-cover object-top mx-auto shadow-md border-2 border-border"
            />
          </div>
          <div className="lg:col-span-8 space-y-3">
            <Eyebrow>Founder & Leadership</Eyebrow>
            <h3 className="text-3xl font-bold">James Omego</h3>
            <p className="text-xs font-semibold text-teal uppercase tracking-wider">Founder and CEO</p>
            <p className="text-sm text-muted-foreground 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 direction, programme development, client engagement and quality oversight.
            </p>
            <p className="text-xs text-muted-foreground opacity-80 pt-1">
              PANIA’s delivery model allows trainers, mentors and subject specialists to contribute to defined engagements under shared quality standards.
            </p>
          </div>
        </div>

        {/* Values */}
        <div className="bg-secondary/60 rounded-3xl p-8 border border-border">
          <Eyebrow>Core commitments</Eyebrow>
          <h3 className="text-2xl font-bold mt-1">Our values</h3>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-6">
            {values.map((v) => (
              <div key={v.title} className="p-5 rounded-2xl bg-card border border-border shadow-xs space-y-1">
                <p className="font-bold text-sm text-foreground">{v.title}</p>
                <p className="text-xs text-muted-foreground leading-relaxed">{v.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </Container>

      <CtaBanner />
    </div>
  );
}

export function LearningPage({ onNavigate }: { onNavigate: (path: string) => void }) {
  const channels = [
    { name: 'Zoom', desc: 'Live, interactive classes and code-alongs', bg: 'bg-ocean-soft', iconBg: 'bg-ocean text-white' },
    { name: 'Google Meet', desc: 'Sessions, break-outs and mentoring', bg: 'bg-teal-soft', iconBg: 'bg-teal text-white' },
    { name: 'WhatsApp', desc: 'Daily updates and group peer support', bg: 'bg-citron-soft', iconBg: 'bg-accent text-accent-foreground' },
  ];

  return (
    <div className="min-h-screen pb-16">
      <PhotoHead
        eyebrow="Learning online"
        a="Learn from"
        b="wherever you are."
        block="bg-teal"
        accent="text-teal"
        img={
          <img
            src="https://images.fillout.com/902438/vk44zcsdgn/generated-images/tyyNPhupLGVx73ijQegrNK/img_B1rJ0RM9ZsyI96ij.jpg"
            alt="Desk set up for online learning"
            className="w-full h-full object-cover"
          />
        }
      >
        <p className="text-lg text-muted-foreground mt-5 max-w-lg leading-relaxed">
          Learn online with guided instruction and practical work. Your joining information explains the channels used for your course, the schedule and what you need to prepare.
        </p>
      </PhotoHead>

      <Container className="mt-14 space-y-12">
        {/* 3 Channels */}
        <div className="grid gap-4 md:grid-cols-3">
          {channels.map((ch) => (
            <div key={ch.name} className={`rounded-3xl p-7 border border-border shadow-xs space-y-3 ${ch.bg}`}>
              <span className={`h-12 w-12 rounded-2xl grid place-items-center ${ch.iconBg}`}>
                <Video className="h-6 w-6" />
              </span>
              <h3 className="text-xl font-bold text-foreground">{ch.name}</h3>
              <p className="text-xs sm:text-sm text-muted-foreground">{ch.desc}</p>
            </div>
          ))}
        </div>

        {/* Formats Table */}
        <div className="bg-card rounded-3xl p-8 border border-border shadow-xs">
          <Eyebrow>Formats & Schedule</Eyebrow>
          <h3 className="text-2xl font-bold mt-1">Programme formats</h3>
          <div className="overflow-x-auto mt-6">
            <table className="w-full text-left text-sm">
              <thead className="bg-secondary text-foreground text-xs uppercase font-semibold">
                <tr>
                  <th className="p-4 rounded-l-xl">Format</th>
                  <th className="p-4">Indicative duration</th>
                  <th className="p-4 rounded-r-xl">Approach</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-border/60">
                <tr>
                  <td className="p-4 font-bold text-foreground">Short courses</td>
                  <td className="p-4 text-muted-foreground">1 to 3 days</td>
                  <td className="p-4 text-muted-foreground">Focused technical workshops and service-specific learning.</td>
                </tr>
                <tr>
                  <td className="p-4 font-bold text-foreground">Bootcamps</td>
                  <td className="p-4 text-muted-foreground">2 weeks</td>
                  <td className="p-4 text-muted-foreground">Intensive live online learning with exercises and applied assignments.</td>
                </tr>
                <tr>
                  <td className="p-4 font-bold text-foreground">Masterclasses</td>
                  <td className="p-4 text-muted-foreground">3 weeks</td>
                  <td className="p-4 text-muted-foreground">Expert-led specialisation for learners with relevant prerequisites.</td>
                </tr>
                <tr>
                  <td className="p-4 font-bold text-foreground">Professional programmes</td>
                  <td className="p-4 text-muted-foreground">12 weeks</td>
                  <td className="p-4 text-muted-foreground">Structured cohort learning with progressive assignments and capstone work.</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        {/* Interactive Searchable FAQs */}
        <FaqAccordion onNavigate={onNavigate} />
      </Container>

      <CtaBanner />
    </div>
  );
}

// 6. Services page (/services)
export function ServicesPage({ onNavigate }: { onNavigate: (path: string) => void }) {
  const services = [
    {
      title: 'Certification preparation',
      icon: Award,
      to: '/programmes?subject=cloud',
      desc: 'Preparation for AWS, Google Cloud and Microsoft Azure pathways.',
    },
    {
      title: 'Corporate training',
      icon: Building,
      to: '/organisations',
      desc: 'Workshops, role-based upskilling and tailored programmes for teams.',
    },
    {
      title: 'Online work readiness',
      icon: Laptop,
      to: '/programmes/online-work-readiness',
      desc: 'Get ready for freelance and remote work with digital client habits.',
    },
    {
      title: 'Technology advisory',
      icon: Compass,
      to: '/contact?mode=corporate',
      desc: 'Practical guidance on cloud capability assessment and training needs.',
    },
    {
      title: 'Bootcamps and masterclasses',
      icon: Award,
      to: '/programmes',
      desc: 'Focused instructor-led programmes for applied technical specialisation.',
    },
    {
      title: 'Career guidance and placement',
      icon: Users,
      to: '/career-support',
      desc: 'Career planning, technical coaching, portfolio review and job linkages.',
    },
  ];

  return (
    <div className="min-h-screen pb-16">
      <PhotoHead
        eyebrow="Services"
        a="Six ways we"
        b="help you grow."
        block="bg-terra"
        accent="text-terra"
        img={
          <img
            src="https://images.fillout.com/902438/vk44zcsdgn/generated-images/tRvSZ66Xk5GsWAJgT2tmTb/img_AAHfJ7TiUYZ8kYxc.jpg"
            alt="Advisor helping someone over a video call"
            className="w-full h-full object-cover"
          />
        }
      >
        <p className="text-lg text-muted-foreground mt-5 max-w-lg leading-relaxed">
          From certification prep to customized corporate workshops and cohort partnerships.
        </p>
      </PhotoHead>

      <Container className="mt-14 grid gap-4 md:grid-cols-3">
        {services.map((srv, idx) => {
          const Icon = srv.icon;
          return (
            <Reveal key={srv.title} delay={idx * 0.04} className="h-full">
              <a
                href={`#${srv.to}`}
                onClick={(e) => {
                  e.preventDefault();
                  onNavigate(srv.to);
                }}
                className={`lift group rounded-3xl p-6 min-h-[220px] h-full flex flex-col justify-between border border-border shadow-xs ${softBgs[idx % 4]}`}
              >
                <span className={`h-12 w-12 rounded-2xl grid place-items-center rotate-[-4deg] shadow-xs ${badgeStyles[idx % 4]}`}>
                  <Icon className="h-6 w-6" />
                </span>

                <div>
                  <p className="text-xl font-bold flex items-center gap-1 text-foreground group-hover:text-primary transition-colors">
                    <span>{srv.title}</span>
                    <ArrowUpRight className="h-4 w-4" />
                  </p>
                  <p className="text-xs text-muted-foreground mt-2 leading-relaxed">{srv.desc}</p>
                </div>
              </a>
            </Reveal>
          );
        })}
      </Container>

      <CtaBanner />
    </div>
  );
}