import Image from "next/image";
import Link from "next/link";
import type { Metadata } from "next";
import Header from "../components/Header";
import Footer from "../components/Footer";

export const metadata: Metadata = {
  title: "Our Programs",
  description:
    "Explore Vido International Home School's curricula, learning formats, and stages — from early years through A-Level, tailored to every learner.",
};

const curricula = [
  {
    name: "KNEC",
    logo: "/vido_galary/KNEC.png",
    description:
      "Kenya's Competency Based Curriculum, taught the way it was designed - focused on life skills, creativity, and real-world problem solving. Our KNEC-trained tutors guide learners from Pre-Primary through Junior Secondary.",
  },
  {
    name: "IGCSE",
    logo: "/vido_galary/IGCSE.png",
    description:
      "The world's most popular international qualification for 14 to 16 year-olds. Cambridge IGCSE builds critical thinking, strong English, and subject mastery - opening doors to A-Levels, the IB Diploma, and competitive university applications worldwide.",
  },
  {
    name: "GED",
    logo: "/vido_galary/GED.jpg",
    description:
      "An internationally recognized high school equivalency programme that prepares learners for university, vocational training, and careers by building strong critical thinking, problem-solving, and communication skills.",
  },
  {
    name: "Pearson Edexcel",
    logo: "/vido_galary/pearson.png",
    description:
      "The British A-Level pathway trusted by leading universities worldwide. Pearson Edexcel offers deep subject specialisation with clear, structured assessment - ideal for learners targeting medicine, engineering, or business courses abroad.",
  },
];

const skills = [
  {
    title: "Coding & Programming",
    description:
      "From first lines of code to deployed apps, learners build their own websites, games, and useful tools while picking up the problem-solving mindset behind every modern product — from Instagram to M-PESA. By the end of the program they can publish a working app and explain how it was built.",
    tools: ["Scratch", "Python", "JavaScript", "Web Development"],
    image: "/vido_galary/coding.png",
  },
  {
    title: "Artificial Intelligence",
    description:
      "Demystify the technology behind ChatGPT, voice assistants, and Netflix recommendations. Learners discover how AI actually works, train simple machine-learning models on real data, and learn to use today's AI tools to write, design, and solve problems faster — responsibly and ethically.",
    tools: [
      "AI Foundations",
      "Machine Learning",
      "Prompt Engineering",
      "Responsible AI",
    ],
    image: "/vido_galary/AI.png",
  },
  {
    title: "Robotics",
    description:
      "Bring ideas to life with motors, sensors, and code. Learners design robots that line-follow, sort objects, and react to their surroundings — the same engineering thinking that powers self-driving cars, delivery drones, and modern factory automation. Every project ends with a working prototype to show off.",
    tools: ["Lego Mindstorms", "Arduino", "Circuit Design", "Problem Solving"],
    image: "/vido_galary/robotics.png",
  },
  {
    title: "Digital Creativity",
    description:
      "Turn a story or idea into eye-catching posters, branded videos, and scroll-stopping social content. Learners master the same tools used by today's designers, YouTubers, and marketers — from Canva graphics and Figma mockups to polished short films — and build a portfolio they can be proud of.",
    tools: ["Canva", "Figma", "Video Editing", "Storytelling"],
    image: "/vido_galary/digital.png",
  },
];

const stages = [
  {
    label: "iPrimary",
    range: "Year 1 - Year 6",
    description:
      "A strong foundation in literacy, numeracy, and core skills, encouraging curiosity and a love for learning.",
  },
  {
    label: "Lower Secondary",
    range: "Year 7 - Year 9",
    description:
      "Broad subject learning with growing specialization, developing critical thinking and study skills.",
  },
  {
    label: "IGCSE",
    range: "Year 10 - Year 11",
    description:
      "Exam-focused preparation with subject depth, mentorship, and readiness for advanced studies.",
  },
  {
    label: "A Level",
    range: "Year 12 - Year 13",
    description:
      "Advanced subject specialization preparing learners for university and higher education pathways.",
  },
];

export default function ProgramsPage() {
  return (
    <div className="min-h-screen bg-white font-sans text-[#222]">
      <Header />

      <main className="site-container py-2 md:py-3 pb-14">
        {/* Hero */}
        <section className="relative overflow-hidden rounded-2xl">
          <Image
            src="/vido_galary/kidslearning.png"
            alt="Vido students learning"
            width={1600}
            height={760}
            className="h-60 sm:h-75 md:h-105 w-full object-cover"
            priority
          />
          <div
            aria-hidden="true"
            className="absolute inset-0 bg-linear-to-t from-black/65 via-black/45 to-black/20"
          />
          <div className="absolute inset-0 flex items-center justify-center">
            <div className="px-4 sm:px-6 md:px-10 max-w-2xl text-center">
              <h1 className="text-xl sm:text-2xl md:text-4xl font-bold tracking-tight text-white leading-tight drop-shadow-sm">
                Programs that fit every learner.
              </h1>
              <p className="mt-4 sm:mt-6 text-sm sm:text-base md:text-lg text-white/90 leading-relaxed max-w-xl mx-auto">
                Curricula, stages, and learning formats designed around your
                child&apos;s pace, strengths, and ambitions.
              </p>
            </div>
          </div>
        </section>

        {/* Curricula */}
        <section className="mt-8 md:mt-10">
          <div className="max-w-2xl">
            <span className="text-[11px] font-semibold uppercase tracking-[0.22em] text-[#1f3fb8]">
              Curricula
            </span>
            <h2 className="mt-3 text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight text-[#132b87]">
              Internationally recognised pathways
            </h2>
            <p className="mt-3 text-[#5a688d] leading-relaxed">
              We support local and international curricula so families can
              choose the route that best suits their learner.
            </p>
          </div>

          <div className="mt-6 md:mt-8 rounded-2xl border border-[#e9eefc] bg-white p-5 sm:p-6 md:p-10">
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8 md:gap-10">
              {curricula.map((item) => (
                <article key={item.name}>
                  <div className="flex h-12 items-center">
                    <Image
                      src={item.logo}
                      alt={`${item.name} logo`}
                      width={120}
                      height={48}
                      className="h-12 w-auto object-contain"
                    />
                  </div>
                  <h3 className="mt-4 text-base font-semibold text-[#132b87]">
                    {item.name}
                  </h3>
                  <p className="mt-2 text-sm text-[#5a688d] leading-relaxed">
                    {item.description}
                  </p>
                </article>
              ))}
            </div>
          </div>
        </section>

        {/* On-Demand Skills */}
        <section className="mt-8 md:mt-10">
          <div className="max-w-2xl">
            <span className="text-[11px] font-semibold uppercase tracking-[0.22em] text-[#1f3fb8]">
              On-demand skills
            </span>
            <h2 className="mt-3 text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight text-[#132b87]">
              Future-ready skills for today&apos;s learners
            </h2>
            <p className="mt-3 text-[#5a688d] leading-relaxed">
              Alongside core academics, we offer specialised programs that build
              the digital and creative skills employers and universities value
              most.
            </p>
          </div>

          <div className="mt-6 md:mt-12 space-y-8 sm:space-y-12 md:space-y-20">
            {skills.map((skill, idx) => {
              const imageRight = idx % 2 === 0;
              return (
                <article
                  key={skill.title}
                  className="grid grid-cols-1 md:grid-cols-2 gap-5 md:gap-12 items-center"
                >
                  <div
                    className={`relative overflow-hidden rounded-2xl aspect-4/3 bg-white ${
                      imageRight ? "md:order-2" : "md:order-1"
                    }`}
                  >
                    <Image
                      src={skill.image}
                      alt={skill.title}
                      fill
                      sizes="(min-width: 768px) 45vw, 92vw"
                      className="object-contain"
                    />
                  </div>

                  <div className={imageRight ? "md:order-1" : "md:order-2"}>
                    <span className="text-[11px] font-semibold tracking-[0.22em] text-[#1f3fb8]">
                      {String(idx + 1).padStart(2, "0")}
                    </span>
                    <h3 className="mt-3 text-xl sm:text-2xl md:text-3xl font-bold tracking-tight text-[#132b87] leading-tight">
                      {skill.title}
                    </h3>
                    <p className="mt-3 sm:mt-4 text-sm sm:text-base text-[#5a688d] leading-relaxed">
                      {skill.description}
                    </p>
                    <ul className="mt-5 flex flex-wrap gap-2">
                      {skill.tools.map((tool) => (
                        <li
                          key={tool}
                          className="rounded-full border border-[#d6e1ff] bg-[#f6f8ff] px-3 py-1 text-xs font-medium text-[#1f3fb8]"
                        >
                          {tool}
                        </li>
                      ))}
                    </ul>
                  </div>
                </article>
              );
            })}
          </div>
        </section>

        {/* Stages */}
        <section className="mt-8 md:mt-10">
          <div className="max-w-2xl">
            <span className="text-[11px] font-semibold uppercase tracking-[0.22em] text-[#1f3fb8]">
              Stages
            </span>
            <h2 className="mt-3 text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight text-[#132b87]">
              From iPrimary to A-Level
            </h2>
          </div>

          <div className="mt-6 md:mt-8 rounded-2xl border border-[#e9eefc] bg-white p-5 sm:p-6 md:p-10">
            <ul className="divide-y divide-[#eef1fb]">
              {stages.map((stage) => (
                <li
                  key={stage.label}
                  className="grid grid-cols-1 md:grid-cols-[1fr_1fr_2fr] gap-1 md:gap-8 py-4 sm:py-5 first:pt-0 last:pb-0"
                >
                  <h3 className="text-base font-semibold text-[#132b87]">
                    {stage.label}
                  </h3>
                  <p className="text-sm font-medium text-[#1f3fb8]">
                    {stage.range}
                  </p>
                  <p className="text-sm text-[#5a688d] leading-relaxed">
                    {stage.description}
                  </p>
                </li>
              ))}
            </ul>
          </div>
        </section>

        {/* CTA */}
        <section className="mt-8 md:mt-10">
          <div className="rounded-2xl bg-[#1f3fb8] p-6 sm:p-8 md:p-12 text-center">
            <h2 className="text-xl sm:text-2xl md:text-3xl font-bold tracking-tight text-white leading-tight">
              Ready to start your child&apos;s Vido journey?
            </h2>
            <p className="mt-3 text-sm md:text-base text-white/85 leading-relaxed max-w-xl mx-auto">
              Apply today and our admissions team will help you choose the right
              curriculum, stage, and format.
            </p>
            <Link
              href="/admissions"
              className="mt-7 inline-flex items-center gap-2 px-6 py-3 bg-white text-[#1f3fb8] text-sm font-semibold rounded-full hover:bg-white/90 transition"
            >
              Apply for admission
              <span aria-hidden="true">→</span>
            </Link>
          </div>
        </section>
      </main>

      <Footer />
    </div>
  );
}