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

export const metadata: Metadata = {
  title: "Admissions",
  description:
    "Apply to Vido International Home School. Learn about our admissions process, programs, and start your child's personalised learning journey today.",
};

const steps = [
  {
    number: "01",
    title: "Submit Application",
    description:
      "Complete the online admissions form with your child's details and program of interest.",
  },
  {
    number: "02",
    title: "Discovery Call",
    description:
      "Our admissions team reaches out within 1 - 2 working days to understand your goals.",
  },
  {
    number: "03",
    title: "Placement Assessment",
    description:
      "A friendly assessment helps us design the right Individual Study Plan.",
  },
  {
    number: "04",
    title: "Welcome Onboard",
    description:
      "Confirm enrolment, meet your tutors, and begin a personalised learning journey.",
  },
];

export default function AdmissionsPage() {
  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 — image with text overlay */}
        <section className="relative overflow-hidden rounded-2xl">
          <Image
            src="/vido_galary/admissions1.png"
            alt="Vido learners ready for school"
            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">
                Begin your child&apos;s Vido journey.
              </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">
                A simple, personal admissions process designed to match every
                learner with the right tutors, program, and pace.
              </p>
            </div>
          </div>
        </section>

        {/* Process — clean editorial timeline */}
        <section id="process" className="mt-8 md:mt-10">
          <div className="max-w-2xl">
            <span className="text-[11px] font-semibold uppercase tracking-[0.22em] text-[#1f3fb8]">
              How it works
            </span>
            <h2 className="mt-3 text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight text-[#132b87]">
              Four steps to joining Vido
            </h2>
          </div>

          <div className="mt-6 md:mt-8 rounded-2xl border border-[#e9eefc] bg-white p-5 sm:p-6 md:p-10">
            <ol className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-10">
              {steps.map((step) => (
                <li key={step.number} className="relative">
                  <div className="text-xs font-semibold tracking-[0.18em] text-[#1f3fb8]">
                    {step.number}
                  </div>
                  <div className="mt-3 h-px w-10 bg-[#1f3fb8]/40" />
                  <h3 className="mt-4 text-lg font-semibold text-[#132b87] leading-snug">
                    {step.title}
                  </h3>
                  <p className="mt-2 text-sm text-[#5a688d] leading-relaxed">
                    {step.description}
                  </p>
                </li>
              ))}
            </ol>
          </div>
        </section>

        {/* Form */}
        <section id="apply" className="mt-8 md:mt-10">
          <div className="max-w-3xl">
            <span className="text-[11px] font-semibold uppercase tracking-[0.22em] text-[#1f3fb8]">
              Apply online
            </span>
            <h2 className="mt-3 text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight text-[#132b87]">
              Application form
            </h2>
            <p className="mt-3 text-[#5a688d] leading-relaxed">
              Required fields are marked with{" "}
              <span className="text-[#1f3fb8] font-semibold">*</span>.
            </p>
          </div>

          <div className="mt-6 md:mt-8">
            <AdmissionsForm />
          </div>
        </section>
      </main>

      <Footer />
    </div>
  );
}