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 { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Check, FileText, Calendar, MapPin, Phone, Mail, ArrowRight, AlertCircle, Download } from "lucide-react";

export const Route = createFileRoute("/services/detail")({
  head: () => ({
    meta: [
      { title: "Jury Service — 16th Judicial Circuit" },
      { name: "description", content: "Everything you need to know about jury service in the 16th Judicial Circuit." },
    ],
  }),
  component: ServiceDetailPage,
});

function ServiceDetailPage() {
  return (
    <PageShell>
      <PageHero
        eyebrow="Court Services"
        title="Jury Service"
        description="Jury service is one of the most important civic duties you can perform. The protection of rights and liberties is achieved through the teamwork of judge and jury."
        breadcrumb={[{ label: "Home", to: "/" }, { label: "Services", to: "/services" }, { label: "Jury Service" }]}
      />

      <section className="py-16">
        <div className="mx-auto max-w-7xl px-4 md:px-8 grid lg:grid-cols-12 gap-10">
          <article className="lg:col-span-8 space-y-8">
            <Alert className="border-accent/40 bg-accent/10">
              <AlertCircle className="h-4 w-4 text-accent-foreground" />
              <AlertTitle className="text-accent-foreground">Did you receive a summons?</AlertTitle>
              <AlertDescription className="text-accent-foreground/85">
                Log in to confirm your reporting date and complete the juror questionnaire.
              </AlertDescription>
            </Alert>

            <div>
              <h2 className="font-display text-2xl font-bold text-primary">Overview</h2>
              <p className="mt-3 text-foreground/85 leading-relaxed">
                You do not need any prior knowledge of the legal system to serve as a juror.
                Jurors are selected at random from voter registration and driver's license lists.
                Most jury service lasts one day or one trial.
              </p>
            </div>

            <div>
              <h2 className="font-display text-2xl font-bold text-primary">Qualifications</h2>
              <ul className="mt-4 space-y-3">
                {[
                  "Be at least 21 years of age",
                  "Be a U.S. citizen and resident of Jackson County",
                  "Be able to read, write, and understand English",
                  "Not have been convicted of a felony (unless rights restored)",
                ].map((q) => (
                  <li key={q} className="flex gap-3">
                    <Check className="h-5 w-5 text-success shrink-0 mt-0.5" aria-hidden />
                    <span className="text-foreground/85">{q}</span>
                  </li>
                ))}
              </ul>
            </div>

            <div>
              <h2 className="font-display text-2xl font-bold text-primary">Excuses & postponements</h2>
              <p className="mt-3 text-foreground/85 leading-relaxed">
                Hardship excuses and one-time postponements may be requested through the Juror
                Portal at least 7 days before your reporting date.
              </p>
            </div>

            <div>
              <h2 className="font-display text-2xl font-bold text-primary">Reporting day checklist</h2>
              <div className="grid sm:grid-cols-2 gap-3 mt-4">
                {["Photo ID", "Summons number", "Reading material", "Light snack & water"].map((c) => (
                  <Card key={c} className="border-border">
                    <CardContent className="p-4 flex items-center gap-3">
                      <div className="h-8 w-8 rounded-full bg-accent/20 text-accent-foreground flex items-center justify-center text-sm font-semibold">✓</div>
                      <span className="text-sm font-medium text-primary">{c}</span>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>
          </article>

          <aside className="lg:col-span-4 space-y-5">
            <Card className="border-border sticky top-28">
              <CardContent className="p-6">
                <h3 className="font-display font-semibold text-primary">Take action</h3>
                <div className="mt-4 space-y-2">
                  <Button asChild variant="court" className="w-full justify-start">
                    <Link to="/services"><FileText className="h-4 w-4" /> Juror Login</Link>
                  </Button>
                  <Button asChild variant="outline" className="w-full justify-start">
                    <Link to="/services"><Calendar className="h-4 w-4" /> Confirm Reporting Date</Link>
                  </Button>
                  <Button asChild variant="outline" className="w-full justify-start">
                    <Link to="/forms"><Download className="h-4 w-4" /> Download Juror Handbook</Link>
                  </Button>
                </div>
              </CardContent>
            </Card>

            <Card className="border-border bg-surface">
              <CardContent className="p-6 text-sm space-y-3">
                <h3 className="font-display font-semibold text-primary">Contact Jury Office</h3>
                <div className="flex items-start gap-2"><MapPin className="h-4 w-4 text-accent mt-0.5" /><span>415 E. 12th St., Room 511<br />Kansas City, MO 64106</span></div>
                <div className="flex items-center gap-2"><Phone className="h-4 w-4 text-accent" /><a href="tel:8168816750" className="text-primary hover:underline">(816) 881-6750</a></div>
                <div className="flex items-center gap-2"><Mail className="h-4 w-4 text-accent" /><a href="mailto:jury@16thcircuit.org" className="text-primary hover:underline">jury@16thcircuit.org</a></div>
              </CardContent>
            </Card>

            <Card className="border-border">
              <CardContent className="p-6">
                <h3 className="font-display font-semibold text-primary">Related</h3>
                <ul className="mt-3 space-y-2 text-sm">
                  <li><Link to="/services" className="text-primary hover:underline inline-flex items-center gap-1">Court calendar <ArrowRight className="h-3 w-3" /></Link></li>
                  <li><Link to="/forms" className="text-primary hover:underline inline-flex items-center gap-1">Juror forms <ArrowRight className="h-3 w-3" /></Link></li>
                  <li><Link to="/resources" className="text-primary hover:underline inline-flex items-center gap-1">Accessibility accommodations <ArrowRight className="h-3 w-3" /></Link></li>
                </ul>
              </CardContent>
            </Card>
          </aside>
        </div>
      </section>
    </PageShell>
  );
}