import { createFileRoute, Link } from "@tanstack/react-router";
import { ClipboardList, CalendarDays, FileCheck2, GraduationCap, ArrowRight } from "lucide-react";
import { PageHero } from "@/components/layout/PageHero";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

export const Route = createFileRoute("/admissions")({
  head: () => ({
    meta: [
      { title: "Admissions 2026-27 | Nasheman Urdu Secondary School" },
      {
        name: "description",
        content:
          "Admissions are open for 2026-27 at Nasheman Urdu Secondary School. Learn about the process, important dates, and required documents.",
      },
      { property: "og:title", content: "Admissions 2026-27 | Nasheman Urdu Secondary School" },
      {
        property: "og:description",
        content: "Apply now — admissions open for the 2026-27 academic year.",
      },
    ],
  }),
  component: AdmissionsPage,
});

const steps = [
  { icon: ClipboardList, title: "1. Enquiry & Form", desc: "Submit an enquiry or collect the admission form from the school office." },
  { icon: FileCheck2, title: "2. Submit Documents", desc: "Provide the completed form along with required documents for verification." },
  { icon: CalendarDays, title: "3. Interaction", desc: "Attend a brief interaction or assessment as per the applicable grade." },
  { icon: GraduationCap, title: "4. Confirmation", desc: "Receive your admission confirmation and complete the enrolment process." },
];

const documents = [
  "Completed admission form",
  "Birth certificate (copy)",
  "Previous school transfer certificate",
  "Latest report card / marksheet",
  "Passport-size photographs",
  "Address and ID proof of parent/guardian",
];

function AdmissionsPage() {
  return (
    <>
      <PageHero
        title="Admissions 2026-27"
        subtitle="Begin your child's journey towards excellence. Admissions are now open."
      />

      {/* Process */}
      <section className="bg-background py-16 sm:py-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6">
          <div className="mx-auto max-w-2xl text-center">
            <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
              Admission Process
            </h2>
            <p className="mt-3 text-muted-foreground">
              A simple, transparent process to welcome your child to our family.
            </p>
          </div>
          <div className="mt-12 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {steps.map((s) => (
              <Card key={s.title} className="border-border">
                <CardContent className="p-6">
                  <span className="grid h-12 w-12 place-items-center rounded-full bg-primary text-primary-foreground">
                    <s.icon className="h-6 w-6" />
                  </span>
                  <h3 className="mt-4 text-base font-bold text-foreground">{s.title}</h3>
                  <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{s.desc}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Documents + Dates */}
      <section className="bg-surface py-16 sm:py-20">
        <div className="mx-auto grid max-w-7xl grid-cols-1 gap-10 px-4 sm:px-6 lg:grid-cols-2">
          <div>
            <h2 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
              Documents Required
            </h2>
            <ul className="mt-6 space-y-3">
              {documents.map((d) => (
                <li key={d} className="flex items-center gap-3 rounded-lg border border-border bg-card p-4">
                  <FileCheck2 className="h-5 w-5 shrink-0 text-primary" />
                  <span className="text-sm font-medium text-foreground">{d}</span>
                </li>
              ))}
            </ul>
          </div>
          <div>
            <h2 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
              Important Dates
            </h2>
            <div className="mt-6 overflow-hidden rounded-lg border border-border bg-card">
              {[
                ["Application Opens", "1 December 2025"],
                ["Application Deadline", "28 February 2026"],
                ["Interaction / Assessment", "March 2026"],
                ["Results & Confirmation", "April 2026"],
                ["Session Begins", "June 2026"],
              ].map(([label, date], i) => (
                <div
                  key={label}
                  className={cnRow(i)}
                >
                  <span className="text-sm font-semibold text-foreground">{label}</span>
                  <span className="text-sm text-muted-foreground">{date}</span>
                </div>
              ))}
            </div>
            <div className="mt-8 rounded-lg bg-primary p-6 text-center">
              <h3 className="text-lg font-bold text-primary-foreground">Have Questions?</h3>
              <p className="mt-2 text-sm text-primary-foreground/85">
                Our admissions team is happy to help you with the process.
              </p>
              <Button asChild variant="hero" className="mt-4">
                <Link to="/contact">
                  Contact Us <ArrowRight className="h-4 w-4" />
                </Link>
              </Button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function cnRow(i: number) {
  return [
    "flex items-center justify-between gap-4 px-5 py-4",
    i % 2 === 1 ? "bg-surface" : "bg-card",
    "border-b border-border last:border-b-0",
  ].join(" ");
}