import { createFileRoute } from "@tanstack/react-router";
import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";
import { Phone, MapPin, Mail, Clock } from "lucide-react";
import { useState } from "react";

export const Route = createFileRoute("/contact")({
  head: () => ({
    meta: [
      { title: "Contact & Enrollment — Little Stars Nursery School" },
      { name: "description", content: "Get in touch with Lindy at Little Stars in Ruimsig. Call 082 428 6783 or send an enquiry to arrange a visit." },
      { property: "og:title", content: "Contact Little Stars" },
      { property: "og:description", content: "Arrange a visit or ask about enrollment at our Ruimsig nursery school." },
    ],
  }),
  component: Contact,
});

function Contact() {
  const [sent, setSent] = useState(false);
  return (
    <div className="min-h-screen flex flex-col">
      <SiteHeader />

      <section className="mx-auto max-w-6xl px-5 py-16 md:py-20 text-center">
        <span className="inline-block bg-leaf/15 text-leaf px-4 py-1.5 rounded-full text-xs font-semibold uppercase tracking-wider mb-5">
          We'd love to hear from you
        </span>
        <h1 className="font-display text-5xl md:text-6xl font-semibold leading-tight text-balance">
          Come visit, or just say <span className="text-coral">hello</span>.
        </h1>
        <p className="mt-5 text-lg text-muted-foreground max-w-2xl mx-auto text-pretty">
          The easiest way to know if Little Stars is right for your family is to pop in. Lindy will gladly show you around.
        </p>
      </section>

      <section className="mx-auto max-w-6xl px-5 pb-20 grid lg:grid-cols-[1fr_1.2fr] gap-8">
        {/* Info card */}
        <div className="bg-primary text-primary-foreground rounded-[32px] p-8 md:p-10 shadow-pop relative overflow-hidden">
          <div className="absolute -top-10 -right-10 size-40 rounded-full bg-sun/25" />
          <div className="relative space-y-7">
            <div>
              <p className="text-primary-foreground/70 text-xs uppercase tracking-widest font-semibold mb-1">Speak to</p>
              <p className="font-display text-3xl font-semibold">Lindy</p>
            </div>
            <div className="space-y-5 text-sm">
              <a href="tel:0824286783" className="flex items-start gap-4 group">
                <span className="size-11 rounded-2xl bg-sun grid place-items-center shrink-0">
                  <Phone className="size-5 text-sun-foreground" />
                </span>
                <div>
                  <p className="text-primary-foreground/70 text-xs uppercase tracking-wider">Call</p>
                  <p className="text-lg font-semibold group-hover:underline">082 428 6783</p>
                </div>
              </a>
              <a href="mailto:lscrous@gmail.com" className="flex items-start gap-4 group">
                <span className="size-11 rounded-2xl bg-coral grid place-items-center shrink-0">
                  <Mail className="size-5 text-coral-foreground" />
                </span>
                <div>
                  <p className="text-primary-foreground/70 text-xs uppercase tracking-wider">Email</p>
                  <p className="text-lg font-semibold group-hover:underline">lscrous@gmail.com</p>
                </div>
              </a>
              <div className="flex items-start gap-4">
                <span className="size-11 rounded-2xl bg-leaf grid place-items-center shrink-0">
                  <MapPin className="size-5 text-leaf-foreground" />
                </span>
                <div>
                  <p className="text-primary-foreground/70 text-xs uppercase tracking-wider">Visit</p>
                  <p className="text-base font-semibold leading-snug">447 Ann Road<br/>Ruimsig, Roodepoort</p>
                </div>
              </div>
              <div className="flex items-start gap-4">
                <span className="size-11 rounded-2xl bg-sky grid place-items-center shrink-0">
                  <Clock className="size-5 text-sky-foreground" />
                </span>
                <div>
                  <p className="text-primary-foreground/70 text-xs uppercase tracking-wider">Hours</p>
                  <p className="text-base font-semibold">Mon – Fri · 6:30 – 17:30</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Form */}
        <div className="bg-card rounded-[32px] p-8 md:p-10 shadow-soft border border-border/60">
          <h2 className="font-display text-2xl font-semibold mb-1">Send us a quick message</h2>
          <p className="text-sm text-muted-foreground mb-6">We usually reply within a day.</p>

          {sent ? (
            <div className="bg-leaf/10 text-leaf rounded-2xl p-6 text-center">
              <p className="font-semibold">Thank you! 🌟</p>
              <p className="text-sm mt-1">We've got your message and will be in touch soon.</p>
            </div>
          ) : (
            <form
              onSubmit={(e) => { e.preventDefault(); setSent(true); }}
              className="space-y-4"
            >
              <div className="grid sm:grid-cols-2 gap-4">
                <label className="block">
                  <span className="text-xs font-semibold text-foreground/70 uppercase tracking-wider">YOUR NAME AND SURNAME&nbsp;</span>
                  <input required type="text" className="mt-1.5 w-full bg-background border border-border rounded-2xl px-4 py-3 outline-none focus:ring-2 focus:ring-primary/40" />
                </label>
                <label className="block">
                  <span className="text-xs font-semibold text-foreground/70 uppercase tracking-wider">Phone</span>
                  <input required type="tel" className="mt-1.5 w-full bg-background border border-border rounded-2xl px-4 py-3 outline-none focus:ring-2 focus:ring-primary/40" />
                </label>
              </div>
              <label className="block">
                <span className="text-xs font-semibold text-foreground/70 uppercase tracking-wider">Email</span>
                <input required type="email" className="mt-1.5 w-full bg-background border border-border rounded-2xl px-4 py-3 outline-none focus:ring-2 focus:ring-primary/40" />
              </label>
              <label className="block">
                <span className="text-xs font-semibold text-foreground/70 uppercase tracking-wider">Child's age</span>
                <input type="text" placeholder="e.g. 2 years" className="mt-1.5 w-full bg-background border border-border rounded-2xl px-4 py-3 outline-none focus:ring-2 focus:ring-primary/40" />
              </label>
              <label className="block">
                <span className="text-xs font-semibold text-foreground/70 uppercase tracking-wider">Message</span>
                <textarea rows={4} className="mt-1.5 w-full bg-background border border-border rounded-2xl px-4 py-3 outline-none focus:ring-2 focus:ring-primary/40 resize-none" />
              </label>
              <button type="submit" className="w-full bg-primary text-primary-foreground py-3.5 rounded-full font-semibold shadow-pop hover:scale-[1.01] transition-transform">
                Send message
              </button>
            </form>
          )}
        </div>
      </section>

      <SiteFooter />
    </div>
  );
}
