import { createFileRoute, Link } from "@tanstack/react-router";
import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";
import { Heart, Puzzle, Utensils, Users, Sun, BookOpen, ArrowRight, Phone, Star } from "lucide-react";
import heroImg from "@/assets/hero-classroom.jpg";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "Little Stars Nursery School — Bilingual preschool in Ruimsig" },
      { name: "description", content: "A warm, welcoming nursery school in Ruimsig, Roodepoort for babies to 5 years. Small classes, daily meals, music, and gentle Christian values." },
      { property: "og:title", content: "Little Stars Nursery School" },
      { property: "og:description", content: "Where every little star begins to shine. Bilingual preschool for ages 0–5 in Ruimsig." },
    ],
  }),
  component: Home,
});

const offerings = [
  { icon: Users, iconCls: "bg-sun/25 text-sun-foreground", title: "Small classes", text: "A teacher and an assistant in every room, so every child is truly seen." },
  { icon: Utensils, iconCls: "bg-coral/15 text-coral", title: "Meals included", text: "Delicious, nourishing meals prepared fresh — nothing extra to pack." },
  { icon: Puzzle, iconCls: "bg-sky/15 text-sky", title: "Activities", text: "A mix of music, art, outdoor play and creative fun to keep little minds and bodies busy." },
  { icon: Sun, iconCls: "bg-leaf/15 text-leaf", title: "Holidays included", text: "We're open through school holidays, not including the December holiday, so working parents can breathe easy." },
  { icon: Heart, iconCls: "bg-coral/15 text-coral", title: "Christian based", text: "A gentle foundation of kindness, respect and love woven into every day." },
  { icon: BookOpen, iconCls: "bg-sky/15 text-sky", title: "Bilingual learning", text: "English and Afrikaans side by side, the way little minds learn best." },
];

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

      {/* Hero */}
      <section className="relative overflow-hidden">
        <div className="absolute -top-24 -left-24 size-72 rounded-full bg-sun/30 blur-3xl" />
        <div className="absolute top-32 -right-20 size-80 rounded-full bg-sky/20 blur-3xl" />
        <div className="mx-auto max-w-6xl px-5 py-16 md:py-24 grid lg:grid-cols-2 gap-12 items-center relative">
          <div className="space-y-7">
            <span className="inline-flex items-center gap-2 bg-leaf/15 text-leaf px-4 py-1.5 rounded-full text-xs font-semibold uppercase tracking-wider">
              <Star className="size-3.5" fill="currentColor" /> Babies to 5 years · Bilingual
            </span>
            <h1 className="font-display text-5xl md:text-6xl lg:text-7xl font-semibold leading-[1.05] text-balance">
              Where every little
              <span className="text-coral"> star </span>
              begins to <span className="text-primary">shine</span>.
            </h1>
            <p className="text-lg text-muted-foreground max-w-xl text-pretty">
              Little Stars is a warm, family-run nursery school in Ruimsig. We care for a small group of children — so every child feels safe, known, and free to explore.
            </p>
            <div className="flex flex-wrap items-center gap-4">
              <Link
                to="/contact"
                className="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"
              >
                Book a visit <ArrowRight className="size-4" />
              </Link>
              <a href="tel:0824286783" className="inline-flex items-center gap-2 text-foreground font-semibold hover:text-primary">
                <span className="size-10 rounded-full bg-sun grid place-items-center"><Phone className="size-4 text-sun-foreground" /></span>
                082 428 6783
              </a>
            </div>
          </div>

          <div className="relative">
            <div className="absolute -top-6 -left-6 size-20 rounded-3xl bg-sun rotate-12 grid place-items-center shadow-soft">
              <Star className="size-9 text-sun-foreground" fill="currentColor" />
            </div>
            <div className="absolute -bottom-6 -right-4 size-24 rounded-full bg-coral/90 grid place-items-center text-coral-foreground font-display font-semibold text-center leading-tight text-sm shadow-soft -rotate-6">
              Since<br/>2008
            </div>
            <div className="rounded-[40px] p-3 bg-card shadow-pop rotate-2">
              <img
                src={heroImg}
                alt="Children playing with wooden blocks in a sunny Little Stars classroom"
                width={1200}
                height={1400}
                className="w-full aspect-[5/6] object-cover rounded-[32px]"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Welcome */}
      <section className="mx-auto max-w-6xl px-5 py-16 text-center">
        <p className="text-sm font-semibold text-primary uppercase tracking-widest mb-3">Welcome, families</p>
        <h2 className="font-display text-3xl md:text-4xl font-semibold max-w-3xl mx-auto text-balance">
          A small school with a big heart.
        </h2>
        <p className="mt-5 text-muted-foreground max-w-2xl mx-auto text-pretty">
          We're one school in Ruimsig caring for around 40 to 50 children at a time. That means real relationships, calm classrooms, and time to focus on what matters — your child.
        </p>
      </section>

      {/* Offerings */}
      <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 offer</h2>
            <p className="mt-3 text-muted-foreground">Everything your little one needs to grow happy and curious.</p>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {offerings.map(({ icon: Icon, iconCls, title, text }) => (
              <div key={title} className="bg-card rounded-3xl p-7 shadow-soft border border-border/50 hover:-translate-y-1 transition-transform">
                <span className={`size-12 rounded-2xl grid place-items-center mb-5 ${iconCls}`}>
                  <Icon className="size-6" />
                </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>

      {/* CTA band */}
      <section className="mx-auto max-w-6xl px-5 py-20">
        <div className="bg-primary text-primary-foreground rounded-[40px] p-10 md:p-14 grid md:grid-cols-[1.4fr_1fr] gap-8 items-center shadow-pop relative overflow-hidden">
          <div className="absolute -top-10 -right-10 size-44 rounded-full bg-sun/30" />
          <div className="absolute bottom-0 -left-10 size-36 rounded-full bg-coral/30" />
          <div className="relative">
            <h2 className="font-display text-3xl md:text-4xl font-semibold mb-3">Come and meet us</h2>
            <p className="text-primary-foreground/80 max-w-md">
              Pop in for a friendly tour. Have a cup of tea with Lindy, see the classrooms, and ask anything that's on your mind.
            </p>
          </div>
          <div className="relative flex md:justify-end">
            <Link to="/contact" className="inline-flex items-center gap-2 bg-sun text-sun-foreground px-7 py-3.5 rounded-full font-semibold shadow-soft hover:scale-105 transition-transform">
              Arrange a visit <ArrowRight className="size-4" />
            </Link>
          </div>
        </div>
      </section>

      <SiteFooter />
    </div>
  );
}
