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: "About Us",
  description:
    "Since 2011, Vido International Home School has helped learners across Nairobi and abroad reach their academic potential through personalised home schooling.",
};

const values = [
  {
    title: "Individual attention",
    description:
      "One-on-one tutoring at home or in our well-thought-out learning centers — every child gets focused, undivided support.",
  },
  {
    title: "Holistic development",
    description:
      "Programs that lift academic results while nurturing character, confidence, and life skills along the way.",
  },
  {
    title: "Flexible pathways",
    description:
      "From iPrimary to A-Level, we adapt the pace and format so every learner can move forward with confidence.",
  },
];

export default function AboutPage() {
  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/futureleaders.jpg"
            alt="Vido learners and tutors"
            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 md:max-w-4xl lg:max-w-5xl text-center">
              <span className="inline-flex items-center gap-2 sm:gap-2.5 rounded-full bg-white px-4 sm:px-5 py-2 sm:py-2.5 text-xs sm:text-sm md:text-base font-bold uppercase tracking-[0.14em] text-[#132b87] shadow-lg ring-2 ring-amber-400/70">
                <svg
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth={2.5}
                  className="h-4 w-4 sm:h-5 sm:w-5 text-amber-500"
                  aria-hidden="true"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                  />
                </svg>
                MoE Registered · No. 342001547
              </span>
              <h1 className="mt-5 sm:mt-6 text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight text-white leading-tight drop-shadow-sm md:whitespace-nowrap">
                Personalised home schooling that helps learners thrive.
              </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">
                Since 2011, families across Nairobi and abroad have trusted Vido
                to nurture confident, capable young learners.
              </p>
            </div>
          </div>
        </section>

        {/* About Us */}
        <section className="mt-8 md:mt-10">
          <div className="max-w-2xl">
            <span className="text-[11px] font-semibold uppercase tracking-[0.22em] text-[#1f3fb8]">
              About us
            </span>
            <h2 className="mt-3 text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight text-[#132b87]">
              A home school built for every learner
            </h2>
          </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 lg:grid-cols-[1.2fr_1fr] gap-8 lg:gap-12 items-start">
              <div className="space-y-4 text-sm md:text-base leading-relaxed text-[#334c72]">
                <p>
                  The Educational psychology of VIDO International School,
                  focuses on creating independent learners. We have high
                  academic expectations of the pupils who are given
                  opportunities to lead and achieve in different areas of
                  learning.
                </p>
                <p>
                  VIDO International School offers the British National
                  Curriculum, i.e. Cambridge and Pearson Edexcel providing
                  students with access to leading universities both locally and
                  globally. Students’ progress through internationally
                  recognized qualifications, culminating in IGCSE and GCE
                  examinations. Our Sixth Form offers A-Level pathways tailored
                  to individual aspirations.
                </p>
                <p>
                  We also offer the GED (General Education Development) which is
                  a high school equivalency test that allows individuals to earn
                  a diploma equivalent by passing four subject tests: Math,
                  Science, Social Studies, and Reasoning through Language Arts.
                </p>
                <p>
                  Excellence defines who we are and what we deliver. We are
                  committed to helping every student reach their full potential
                  in a safe, supportive, and academically rigorous environment
                  and maintaining the standards.
                </p>
              </div>

              <ul className="space-y-5">
                {values.map((value) => (
                  <li key={value.title}>
                    <h3 className="text-base font-semibold text-[#132b87]">
                      {value.title}
                    </h3>
                    <p className="mt-1.5 text-sm text-[#5a688d] leading-relaxed">
                      {value.description}
                    </p>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </section>

        {/* Our Teachers */}
        <section className="mt-8 md:mt-10">
          <div className="max-w-2xl">
            <span className="text-[11px] font-semibold uppercase tracking-[0.22em] text-[#1f3fb8]">
              Our teachers
            </span>
            <h2 className="mt-3 text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight text-[#132b87]">
              Dedicated tutors, individual attention
            </h2>
          </div>

          <div className="mt-6 md:mt-8 grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 items-stretch">
            <div className="relative overflow-hidden rounded-2xl aspect-4/3">
              <Image
                src="/vido_galary/teachers.png"
                alt="A Vido tutor working with a student"
                fill
                sizes="(min-width: 768px) 45vw, 92vw"
                className="object-cover"
              />
            </div>

            <div className="rounded-2xl border border-[#e9eefc] bg-white p-5 sm:p-6 md:p-10 flex flex-col justify-center">
              <div className="space-y-4 text-sm md:text-base leading-relaxed text-[#334c72]">
                <p>
                  We have dedicated and professional tutors who provide
                  individual attention and a true one-on-one approach to your
                  child — at the comfort of their home, or in one of our
                  well-thought-out centers built for focused learning.
                </p>
                <p>
                  Our programs improve not just academic results, but the
                  child&apos;s holistic development — with steady guidance and
                  hands-on assistance every step of the way.
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* Our Aim */}
        <section className="mt-8 md:mt-10">
          <div className="rounded-2xl bg-[#1f3fb8] p-6 sm:p-8 md:p-12 text-center">
            <span className="text-[11px] font-semibold uppercase tracking-[0.22em] text-white/80">
              Our aim
            </span>
            <h2 className="mt-3 text-xl sm:text-2xl md:text-3xl font-bold tracking-tight text-white leading-tight">
              Helping every child reach their full academic potential.
            </h2>
            <p className="mt-4 text-sm md:text-base text-white/85 leading-relaxed max-w-2xl mx-auto">
              Get in touch to schedule an online or in-person meeting — we would
              love to learn about your child and how we can support their
              journey.
            </p>
            <div className="mt-7 flex flex-wrap items-center justify-center gap-4">
              <Link
                href="/contact"
                className="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"
              >
                Contact us
                <span aria-hidden="true">→</span>
              </Link>
              <Link
                href="/admissions"
                className="text-sm font-semibold text-white hover:text-white/80 transition"
              >
                Apply for admission
              </Link>
            </div>
          </div>
        </section>
      </main>

      <Footer />
    </div>
  );
}