import { createFileRoute, Link } from "@tanstack/react-router";
import { PageShell, PageHero } from "@/components/site/page-shell";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import {
  Search, Users, FileText, CreditCard, Calendar, BookOpen, Building2, Briefcase,
  Heart, Scale, GraduationCap, ShieldCheck, ArrowRight,
} from "lucide-react";

export const Route = createFileRoute("/services")({
  head: () => ({
    meta: [
      { title: "Court Services — 16th Judicial Circuit" },
      { name: "description", content: "Comprehensive directory of services offered by the 16th Judicial Circuit of Missouri." },
    ],
  }),
  component: ServicesPage,
});

const groups = [
  {
    title: "Case Information & Records",
    services: [
      { icon: Search, name: "Case Search (Case.net)", desc: "Statewide automated case management system." },
      { icon: FileText, name: "Court Records Requests", desc: "Order certified copies or transcripts." },
      { icon: Calendar, name: "Daily Dockets", desc: "Today's hearings across all divisions." },
    ],
  },
  {
    title: "Citizens",
    services: [
      { icon: Users, name: "Jury Service", desc: "Reporting, qualifications, and accommodations." },
      { icon: CreditCard, name: "Pay Fines & Fees", desc: "Secure online payment via Pay by Web." },
      { icon: BookOpen, name: "Self-Help Resources", desc: "Guides for representing yourself." },
      { icon: Heart, name: "Marriage Ceremonies", desc: "Request a judicial wedding ceremony." },
    ],
  },
  {
    title: "Attorneys & Bar",
    services: [
      { icon: Briefcase, name: "eFiling", desc: "Electronic case filing portal." },
      { icon: Scale, name: "Local Court Rules", desc: "16th Circuit rules and standing orders." },
      { icon: GraduationCap, name: "CLE & Training", desc: "Continuing legal education sessions." },
    ],
  },
  {
    title: "Specialty & Community Programs",
    services: [
      { icon: ShieldCheck, name: "Drug Court", desc: "Recovery-focused treatment court." },
      { icon: Heart, name: "Veterans Treatment Court", desc: "Services for justice-involved veterans." },
      { icon: Users, name: "Family Court Programs", desc: "Mediation, co-parenting, and child support." },
      { icon: Building2, name: "Civic Education", desc: "Outreach for schools and the community." },
    ],
  },
];

function ServicesPage() {
  return (
    <PageShell>
      <PageHero
        eyebrow="Court Services"
        title="Everything the public, attorneys, and partners need."
        description="From case records and jury service to specialty treatment courts, find the right service quickly."
        breadcrumb={[{ label: "Home", to: "/" }, { label: "Services" }]}
      />

      <section className="py-16 md:py-20">
        <div className="mx-auto max-w-7xl px-4 md:px-8 space-y-16">
          {groups.map((g) => (
            <div key={g.title}>
              <h2 className="font-display text-2xl md:text-3xl font-bold text-primary mb-6 pb-3 border-b-2 border-accent inline-block">
                {g.title}
              </h2>
              <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
                {g.services.map((s) => (
                  <Link key={s.name} to="/services/detail" className="group">
                    <Card className="h-full border-border hover:border-accent hover:shadow-court transition-all">
                      <CardContent className="p-6">
                        <div className="h-11 w-11 rounded-lg bg-primary/8 group-hover:bg-primary group-hover:text-accent flex items-center justify-center text-primary transition-colors">
                          <s.icon className="h-5 w-5" aria-hidden />
                        </div>
                        <h3 className="font-display font-semibold text-primary mt-4">{s.name}</h3>
                        <p className="text-sm text-muted-foreground mt-1.5 leading-relaxed">{s.desc}</p>
                        <div className="mt-4 inline-flex items-center gap-1 text-sm font-medium text-primary group-hover:gap-2 transition-all">
                          Learn more <ArrowRight className="h-3.5 w-3.5" />
                        </div>
                      </CardContent>
                    </Card>
                  </Link>
                ))}
              </div>
            </div>
          ))}

          <Card className="bg-primary text-primary-foreground border-0 shadow-elegant overflow-hidden">
            <CardContent className="p-10 md:p-14 grid lg:grid-cols-2 gap-8 items-center">
              <div>
                <h3 className="font-display text-3xl font-bold text-balance">Can't find what you need?</h3>
                <p className="mt-3 text-primary-foreground/80">Our court clerks can point you to the right office, form, or program.</p>
              </div>
              <div className="flex gap-3 lg:justify-end flex-wrap">
                <Button asChild variant="gold" size="lg"><Link to="/contact">Contact a Clerk</Link></Button>
                <Button asChild variant="court-outline" size="lg"><Link to="/forms">Browse Forms</Link></Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>
    </PageShell>
  );
}