import React, { useState } from 'react';
import {
  ArrowRight,
  Globe,
  Video,
  MessageSquare,
  CheckCircle2,
  ChevronDown,
  ChevronUp,
  Laptop,
  HelpCircle,
} from 'lucide-react';
import { FAQS, LEARNING_STEPS, PROGRAMME_FORMATS } from '../data/faqs';
import { Breadcrumbs } from '../components/Breadcrumbs';

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

export function LearningPage({ onNavigate, onOpenEnquiry }: LearningPageProps) {
  const [openFaq, setOpenFaq] = useState<string | null>('faq-availability');

  const toggleFaq = (id: string) => {
    setOpenFaq((prev) => (prev === id ? null : id));
  };

  const breadcrumbs = [{ label: 'Learning Experience' }];

  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>Interactive Online Delivery</span>
            </div>

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

            <p className="text-base sm:text-lg text-stone-700 leading-relaxed">
              Learn online with guided instruction and practical work. PANIA programmes use Zoom, Google Meet and WhatsApp. Your joining information explains the channels used for your course, the schedule and what you need to prepare.
            </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>Get course guidance</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>Explore all 22 programmes</span>
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* 1. Fully Online Delivery Channels Breakdown */}
      <section className="py-14 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center max-w-2xl mx-auto mb-10">
          <span className="text-xs font-semibold uppercase tracking-wider text-[#0B4035]">
            Delivery Architecture
          </span>
          <h2 className="text-3xl font-serif font-bold text-[#0B4035] mt-1">
            Where and how you learn
          </h2>
          <p className="text-sm text-stone-600 mt-2">
            No physical campus travel required. Access instructor-led rooms and mentor feedback from anywhere in Kenya or across the continent.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="bg-white rounded-2xl p-6 border border-[#E5E7DC] shadow-xs space-y-3">
            <div className="w-10 h-10 rounded-xl bg-[#2D8CFF]/10 text-[#2D8CFF] flex items-center justify-center">
              <Video className="w-5 h-5" />
            </div>
            <h3 className="font-serif font-bold text-lg text-[#0B4035]">
              Zoom Live Classrooms
            </h3>
            <p className="text-xs sm:text-sm text-stone-600 leading-relaxed">
              Interactive video sessions, instructor screen sharing, real-time code-alongs, and structured break-out rooms for collaborative exercises.
            </p>
          </div>

          <div className="bg-white rounded-2xl p-6 border border-[#E5E7DC] shadow-xs space-y-3">
            <div className="w-10 h-10 rounded-xl bg-[#00AC47]/10 text-[#00AC47] flex items-center justify-center">
              <Laptop className="w-5 h-5" />
            </div>
            <h3 className="font-serif font-bold text-lg text-[#0B4035]">
              Google Meet Workspaces
            </h3>
            <p className="text-xs sm:text-sm text-stone-600 leading-relaxed">
              One-on-one mentorship reviews, technical coaching check-ins, mock interviews, and group project presentations with Google Workspace integration.
            </p>
          </div>

          <div className="bg-white rounded-2xl p-6 border border-[#E5E7DC] shadow-xs space-y-3">
            <div className="w-10 h-10 rounded-xl bg-[#25D366]/10 text-[#25D366] flex items-center justify-center">
              <MessageSquare className="w-5 h-5" />
            </div>
            <h3 className="font-serif font-bold text-lg text-[#0B4035]">
              WhatsApp Cohort Hub
            </h3>
            <p className="text-xs sm:text-sm text-stone-600 leading-relaxed">
              Daily scheduling updates, rapid mentor Q&A, peer assistance, announcements, and asynchronous micro-learning prompts.
            </p>
          </div>
        </div>
      </section>

      {/* 2. The 5-Stage Learning Pathway (Discover, Learn, Apply, Validate, Advance) */}
      <section 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="mb-12">
            <span className="text-xs font-semibold uppercase tracking-wider text-[#0B4035]">
              The Structured Pathway
            </span>
            <h2 className="text-3xl font-serif font-bold text-[#0B4035] mt-1">
              Discover, Learn, Apply, Validate, Advance
            </h2>
            <p className="text-sm text-stone-600 mt-2 max-w-2xl">
              Our five-stage instructional rhythm ensures every learner transitions from initial concept discovery to demonstrable competence and career advancement.
            </p>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6">
            {LEARNING_STEPS.map((step) => (
              <div
                key={step.number}
                className="bg-[#F6F7F2] p-6 rounded-2xl border border-[#E5E7DC] flex flex-col justify-between"
              >
                <div>
                  <span className="text-xs font-mono font-bold text-[#0B4035] bg-white px-2 py-0.5 rounded-sm shadow-2xs">
                    {step.number}
                  </span>
                  <h3 className="font-serif font-bold text-xl text-[#0B4035] mt-3">
                    {step.name}
                  </h3>
                  <span className="text-xs font-semibold text-[#207A78] block mt-0.5">
                    {step.tagline}
                  </span>
                  <p className="text-xs text-stone-600 mt-2.5 leading-relaxed">
                    {step.description}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 3. Indicative Programme Formats Table (Pack 2 verbatim) */}
      <section className="py-16 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="mb-8">
          <span className="text-xs font-semibold uppercase tracking-wider text-[#0B4035]">
            Schedules & Formats
          </span>
          <h2 className="text-3xl font-serif font-bold text-[#0B4035] mt-1">
            Programme formats
          </h2>
          <p className="text-sm text-stone-600 mt-2">
            Each syllabus confirms instructional hours, prerequisites, assessments and exact intake dates.
          </p>
        </div>

        <div className="bg-white rounded-2xl border border-[#E5E7DC] shadow-xs overflow-hidden">
          <div className="overflow-x-auto">
            <table className="w-full text-left text-xs sm:text-sm">
              <thead className="bg-[#0B4035] text-white">
                <tr>
                  <th className="py-3.5 px-6 font-semibold">Format</th>
                  <th className="py-3.5 px-6 font-semibold">Indicative Duration</th>
                  <th className="py-3.5 px-6 font-semibold">Approach</th>
                  <th className="py-3.5 px-6 font-semibold">Best Suited For</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-stone-100">
                {PROGRAMME_FORMATS.map((fmt, idx) => (
                  <tr key={idx} className="hover:bg-stone-50/80 transition-colors">
                    <td className="py-4 px-6 font-bold text-[#0B4035]">{fmt.format}</td>
                    <td className="py-4 px-6 font-medium text-stone-700 whitespace-nowrap">{fmt.duration}</td>
                    <td className="py-4 px-6 text-stone-600 leading-relaxed">{fmt.approach}</td>
                    <td className="py-4 px-6 text-stone-500 text-xs">{fmt.idealFor}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div className="p-4 bg-[#F6F7F2] border-t border-[#E5E7DC] text-xs text-stone-500">
            *These are indicative formats. Certification preparation follows external exam requirements. Self-paced Essentials remain a planned future offering.
          </div>
        </div>
      </section>

      {/* 4. Common Questions / FAQs (Pack 2 Section 7 verbatim) */}
      <section className="py-16 bg-white border-t border-[#E5E7DC]">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-10">
            <span className="text-xs font-semibold uppercase tracking-wider text-[#0B4035]">
              Have questions?
            </span>
            <h2 className="text-3xl font-serif font-bold text-[#0B4035] mt-1">
              Common questions
            </h2>
            <p className="text-sm text-stone-600 mt-2">
              Clear answers regarding availability, delivery channels, prerequisites, certifications and commercial terms.
            </p>
          </div>

          <div className="space-y-3">
            {FAQS.map((faq) => {
              const isOpen = openFaq === faq.id;
              return (
                <div
                  key={faq.id}
                  className="rounded-xl border border-[#E5E7DC] bg-[#F6F7F2] overflow-hidden transition-colors"
                >
                  <button
                    onClick={() => toggleFaq(faq.id)}
                    className="w-full text-left p-4 sm:p-5 flex items-center justify-between gap-4 font-serif font-bold text-base text-[#0B4035] hover:text-[#072C24]"
                    aria-expanded={isOpen}
                  >
                    <span>{faq.question}</span>
                    {isOpen ? (
                      <ChevronUp className="w-4 h-4 text-stone-500 shrink-0" />
                    ) : (
                      <ChevronDown className="w-4 h-4 text-stone-500 shrink-0" />
                    )}
                  </button>

                  {isOpen && (
                    <div className="px-4 sm:px-5 pb-5 pt-1 text-xs sm:text-sm text-stone-700 leading-relaxed border-t border-stone-200/50">
                      {faq.answer}
                    </div>
                  )}
                </div>
              );
            })}
          </div>

          <div className="mt-12 text-center p-6 bg-[#F6F7F2] rounded-2xl border border-[#E5E7DC] space-y-3">
            <h3 className="font-serif font-bold text-lg text-[#0B4035]">
              Still have a specific question about your situation?
            </h3>
            <p className="text-xs text-stone-600">
              Our team responds directly with advice tailored to your background.
            </p>
            <button
              onClick={() => onOpenEnquiry('guidance')}
              className="px-5 py-2.5 rounded-xl bg-[#0B4035] text-[#D5E64D] hover:bg-[#072C24] font-bold text-xs"
            >
              Get course guidance
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}