import React from 'react';
import {
  ShieldCheck,
  CheckCircle2,
  Terminal,
  Video,
  FileCheck,
  Users,
  Compass,
  ArrowRight,
  Info,
} from 'lucide-react';
import { Container, Eyebrow } from './Ui';

interface TestimonialsProps {
  onNavigate?: (path: string) => void;
  categoryFilter?: 'cloud' | 'ai' | 'security' | 'work';
  title?: string;
  subtitle?: string;
}

export function Testimonials({
  onNavigate,
  title = 'Learning evidence & academic standards.',
  subtitle = 'Discover how PANIA combines structured curriculum, live practitioner coaching, and applied portfolio execution.',
}: TestimonialsProps) {
  const learningEvidence = [
    {
      icon: Terminal,
      title: 'Production Portfolio Capstones',
      desc: 'Learners do not just watch slides. Every programme culminates in a verified capstone project—architecting real cloud infrastructure, deploying containerized workflows, or completing structured data pipelines.',
      deliverable: 'Verified Git Repository & Technical Runbook',
    },
    {
      icon: Video,
      title: 'Live Instructor Masterclasses',
      desc: 'Programmes are delivered 100% online through live Zoom and Google Meet sessions led by experienced African tech practitioners, featuring interactive code walkthroughs and real-time terminal troubleshooting.',
      deliverable: 'Weekly Live Video Labs + Replay Access',
    },
    {
      icon: Users,
      title: 'Cohort Pods & Daily Mentor Guidance',
      desc: 'Learners collaborate in structured cohort groups on WhatsApp with peers and mentors. Questions on lab exercises, CLI errors, and cloud console configurations are addressed collaboratively.',
      deliverable: 'Direct Instructor & Peer Support Channels',
    },
    {
      icon: FileCheck,
      title: 'Ethical Curriculum Alignment',
      desc: 'Our modules are continuously updated against official AWS, Google Cloud, Microsoft Azure, Cisco, and Linux examination blueprints. Candidates receive comprehensive preparation aligned to industry standards.',
      deliverable: 'PANIA Certificate of Completion & Blueprint Checklists',
    },
  ];

  return (
    <section aria-labelledby="learning-evidence-heading" className="py-14 bg-secondary/50 border-y border-border">
      <Container className="space-y-10">
        {/* Header */}
        <div className="max-w-2xl space-y-2">
          <Eyebrow>Educational Integrity & Evidence</Eyebrow>
          <h2 id="learning-evidence-heading" className="text-3xl sm:text-4xl font-bold tracking-tight text-foreground">
            {title}
          </h2>
          <p className="text-muted-foreground text-sm sm:text-base leading-relaxed">
            {subtitle}
          </p>
        </div>

        {/* Evidence Grid */}
        <div className="grid gap-6 md:grid-cols-2">
          {learningEvidence.map((item, idx) => {
            const Icon = item.icon;
            return (
              <div
                key={idx}
                className="bg-card rounded-3xl p-6 sm:p-7 border border-border flex flex-col justify-between shadow-xs space-y-4 hover:border-primary/30 transition-all"
              >
                <div className="space-y-3">
                  <div className="flex items-center gap-3">
                    <span className="h-10 w-10 rounded-2xl bg-teal-soft text-teal grid place-items-center">
                      <Icon className="w-5 h-5" aria-hidden="true" />
                    </span>
                    <h3 className="font-bold text-base sm:text-lg text-foreground">
                      {item.title}
                    </h3>
                  </div>

                  <p className="text-xs sm:text-sm text-muted-foreground leading-relaxed">
                    {item.desc}
                  </p>
                </div>

                <div className="pt-3 border-t border-border/60 flex items-center gap-2 text-xs font-semibold text-teal">
                  <CheckCircle2 className="w-4 h-4 shrink-0" />
                  <span>{item.deliverable}</span>
                </div>
              </div>
            );
          })}
        </div>

        {/* Academic Disclosure Banner */}
        <div className="p-5 rounded-2xl bg-card border border-border/80 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 text-xs">
          <div className="flex items-start gap-3 text-muted-foreground">
            <ShieldCheck className="w-5 h-5 text-teal shrink-0 mt-0.5" />
            <p className="leading-relaxed">
              <strong className="text-foreground">Ethical Credential Notice:</strong> PANIA Digital Academy prepares learners for official industry certification exams. Independent certification authorities (e.g. AWS, Google Cloud, Microsoft, Cisco) administer and award formal credentials. PANIA does not make unverified job placement or salary guarantees.
            </p>
          </div>

          {onNavigate && (
            <button
              onClick={() => onNavigate('/about')}
              className="font-bold text-primary hover:underline shrink-0 cursor-pointer inline-flex items-center gap-1"
            >
              <span>Our Academy Values</span>
              <ArrowRight className="w-3.5 h-3.5" />
            </button>
          )}
        </div>
      </Container>
    </section>
  );
}