import { createFileRoute } from "@tanstack/react-router";
import { PageShell, PageHero } from "@/components/site/page-shell";
import { Card, CardContent } from "@/components/ui/card";
import {
  Landmark,
  Gavel,
  BookOpen,
  ScrollText,
  FileSearch,
  UserX,
  ArrowRight,
  ExternalLink,
} from "lucide-react";

export const Route = createFileRoute("/resources")({
  head: () => ({
    meta: [
      { title: "Court Records & Resources — 16th Judicial Circuit of Missouri" },
      {
        name: "description",
        content:
          "Public court records, orders, rules, jury verdicts, probate records, and reference resources for the 16th Judicial Circuit of Missouri.",
      },
    ],
  }),
  component: ResourcesPage,
});

const resources = [
  {
    icon: Landmark,
    title: "Delinquent Land Tax",
    desc: "Notices and information regarding delinquent land tax proceedings in Jackson County.",
  },
  {
    icon: Gavel,
    title: "Jury Verdicts",
    desc: "Recent jury verdict reports issued by the Court.",
  },
  {
    icon: BookOpen,
    title: "Library & References",
    desc: "Legal research resources and library services for the bar and public.",
  },
  {
    icon: ScrollText,
    title: "Orders and Rules",
    desc: "Administrative orders, local court rules, and standing orders of the Circuit.",
  },
  {
    icon: FileSearch,
    title: "Probate Records",
    desc: "Search and request public probate records held by the Court.",
  },
  {
    icon: UserX,
    title: "Stricken and Inactive Lawyers",
    desc: "List of attorneys whose privileges to practice in the Circuit are stricken or inactive.",
  },
];

function ResourcesPage() {
  return (
    <PageShell>
      <PageHero
        eyebrow="Court Records & Resources"
        title="Public records, orders, rules, and references"
        description="The Court maintains a wide range of public records and reference resources for parties, attorneys, researchers, and the people of Jackson County."
        breadcrumb={[{ label: "Home", to: "/" }, { label: "Court Records & Resources" }]}
      />

      <section className="py-16 md:py-20">
        <div className="mx-auto max-w-7xl px-4 md:px-8">
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {resources.map((r) => (
              <Card key={r.title} className="border-border hover:border-accent hover:shadow-court transition-all group">
                <CardContent className="p-6">
                  <div className="flex items-start justify-between">
                    <div className="h-11 w-11 rounded-lg gradient-hero text-accent flex items-center justify-center">
                      <r.icon className="h-5 w-5" aria-hidden />
                    </div>
                    <ArrowRight className="h-4 w-4 text-accent opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all" />
                  </div>
                  <h3 className="font-display font-semibold text-primary mt-4 text-lg">{r.title}</h3>
                  <p className="text-sm text-muted-foreground mt-2 leading-relaxed">{r.desc}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      <section className="py-12 md:py-16 bg-surface">
        <div className="mx-auto max-w-7xl px-4 md:px-8 grid md:grid-cols-2 gap-6">
          <Card className="border-border">
            <CardContent className="p-8">
              <div className="text-[11px] uppercase tracking-[0.22em] text-accent font-semibold mb-3">
                Case Lookup
              </div>
              <h3 className="font-display text-2xl font-bold text-primary">
                Search cases on Case.net
              </h3>
              <p className="mt-3 text-muted-foreground leading-relaxed">
                Case.net is Missouri’s online case management system. Look up cases, hearings, and
                court documents across all Missouri circuits.
              </p>
              <a
                href="https://www.courts.mo.gov/casenet/"
                target="_blank"
                rel="noreferrer"
                className="inline-flex items-center gap-2 mt-5 text-primary font-semibold hover:underline"
              >
                Open Case.net <ExternalLink className="h-4 w-4" />
              </a>
            </CardContent>
          </Card>

          <Card className="border-border bg-primary text-primary-foreground">
            <CardContent className="p-8">
              <div className="text-[11px] uppercase tracking-[0.22em] text-accent font-semibold mb-3">
                Records Requests
              </div>
              <h3 className="font-display text-2xl font-bold">
                Request a court record
              </h3>
              <p className="mt-3 text-primary-foreground/80 leading-relaxed">
                Submit a request for certified or non‑certified copies of court records. Fees may
                apply and processing times vary by record type.
              </p>
              <a
                href="/contact"
                className="inline-flex items-center gap-2 mt-5 text-accent font-semibold hover:underline"
              >
                Contact the Records Office <ArrowRight className="h-4 w-4" />
              </a>
            </CardContent>
          </Card>
        </div>
      </section>
    </PageShell>
  );
}