import { createFileRoute, Link } from "@tanstack/react-router";
import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";
import { Heart, Sparkles, Shield, ArrowRight } from "lucide-react";
import classroomImg from "@/assets/gallery-classroom.jpg";

export const Route = createFileRoute("/about")({
  head: () => ({
    meta: [
      { title: "About Little Stars Nursery School — Ruimsig" },
      { name: "description", content: "Meet the warm, family-run nursery school in Ruimsig. Small groups, bilingual care, and a gentle Christian foundation." },
      { property: "og:title", content: "About Little Stars" },
      { property: "og:description", content: "A small, family-run nursery school in Ruimsig caring for 40-50 children." },
    ],
  }),
  component: About,
});

const values = [
  { icon: Heart, title: "Loving care", text: "We treat every child like one of our own. Hugs, encouragement and patience come first." },
  { icon: Shield, title: "Safe and small", text: "A single, well-loved campus with about 40 to 50 children — no big crowds, no rush." },
  { icon: Sparkles, title: "Joyful learning", text: "Play, music and storytime are how little minds grow. We make every day feel special." },
];

function About() {
  return (
    <div className="min-h-screen flex flex-col">
      <SiteHeader />

      <section className="mx-auto max-w-6xl px-5 py-16 md:py-24">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          <div>
            <span className="inline-block bg-sun/30 text-sun-foreground px-4 py-1.5 rounded-full text-xs font-semibold uppercase tracking-wider mb-5">
              About our school
            </span>
            <h1 className="font-display text-5xl md:text-6xl font-semibold leading-tight text-balance mb-6">
              A second home for your <span className="text-coral">little one</span>.
            </h1>
            <p className="text-lg text-muted-foreground text-pretty">
              Little Stars Nursery School is a single, family-run preschool in the heart of Ruimsig, Roodepoort. We've spent years building a calm, joyful space where babies and young children can grow at their own pace.
            </p>
          </div>
          <div className="rounded-[40px] p-3 bg-card shadow-pop -rotate-2">
            <img src={classroomImg} alt="A bright Little Stars classroom" loading="lazy" width={900} height={900} className="w-full aspect-square object-cover rounded-[32px]" />
          </div>
        </div>
      </section>

      <section className="bg-secondary/50 py-20">
        <div className="mx-auto max-w-6xl px-5">
          <div className="text-center mb-12">
            <h2 className="font-display text-3xl md:text-4xl font-semibold">What we believe</h2>
          </div>
          <div className="grid md:grid-cols-3 gap-6">
            {values.map(({ icon: Icon, title, text }) => (
              <div key={title} className="bg-card rounded-3xl p-8 shadow-soft border border-border/50 text-center">
                <span className="size-14 rounded-2xl bg-coral/15 grid place-items-center mx-auto mb-5">
                  <Icon className="size-6 text-coral" />
                </span>
                <h3 className="font-display text-xl font-semibold mb-2">{title}</h3>
                <p className="text-sm text-muted-foreground leading-relaxed">{text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-3xl px-5 py-20 text-center">
        <h2 className="font-display text-3xl md:text-4xl font-semibold mb-4">Meet Lindy</h2>
        <p className="text-muted-foreground text-pretty">
          Little Stars is led by Lindy, who personally knows every child by name. She and her team welcome English and Afrikaans speaking families — and there's always a friendly face at the gate.
        </p>
        <Link to="/contact" className="mt-8 inline-flex items-center gap-2 bg-primary text-primary-foreground px-7 py-3.5 rounded-full font-semibold shadow-pop hover:scale-105 transition-transform">
          Say hello <ArrowRight className="size-4" />
        </Link>
      </section>

      <SiteFooter />
    </div>
  );
}
