import { createFileRoute, Link } from "@tanstack/react-router";
import { GraduationCap, Users, CalendarDays, MessageSquare, FileText, Receipt } from "lucide-react";
import { Button } from "@/components/ui/button";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "School Portal" },
      { name: "description", content: "Secure portal for staff and parents — attendance, tuition, messaging, and more." },
    ],
  }),
  component: Landing,
});

function Landing() {
  const features = [
    { icon: Users, title: "Student records", desc: "Contacts, pickup list, allergies, photo release." },
    { icon: CalendarDays, title: "Attendance", desc: "Teachers mark their class. Parents see their child." },
    { icon: Receipt, title: "Tuition ledger", desc: "Monthly plan, late fees, activities — all in one place." },
    { icon: MessageSquare, title: "Messaging", desc: "Secure in-app inbox between staff and families." },
    { icon: FileText, title: "E-sign forms", desc: "Push a form, parents complete it in the portal." },
    { icon: CalendarDays, title: "School calendar", desc: "Year-at-a-glance for the whole school." },
  ];

  return (
    <div className="min-h-screen bg-background">
      <header className="border-b">
        <div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
          <div className="flex items-center gap-2 font-semibold">
            <GraduationCap className="h-6 w-6 text-primary" />
            <span>School Portal</span>
          </div>
          <div className="flex gap-2">
            <Button asChild variant="ghost"><Link to="/auth">Sign in</Link></Button>
            <Button asChild><Link to="/auth" search={{ mode: "signup" }}>Create account</Link></Button>
          </div>
        </div>
      </header>

      <section className="max-w-6xl mx-auto px-6 py-20 text-center">
        <h1 className="text-4xl md:text-5xl font-bold tracking-tight">A private portal for your school community</h1>
        <p className="mt-4 text-lg text-muted-foreground max-w-2xl mx-auto">
          One secure place for admins, teachers, and parents to manage students, attendance, tuition, and communication.
        </p>
        <div className="mt-8 flex gap-3 justify-center">
          <Button asChild size="lg"><Link to="/auth">Sign in to portal</Link></Button>
        </div>
      </section>

      <section className="max-w-6xl mx-auto px-6 pb-20 grid md:grid-cols-3 gap-6">
        {features.map((f) => (
          <div key={f.title} className="border rounded-lg p-6 bg-card">
            <f.icon className="h-6 w-6 text-primary mb-3" />
            <h3 className="font-semibold">{f.title}</h3>
            <p className="text-sm text-muted-foreground mt-1">{f.desc}</p>
          </div>
        ))}
      </section>

      <footer className="border-t py-6 text-center text-sm text-muted-foreground">
        Private parent portal · sign in required
      </footer>
    </div>
  );
}