import { useState } from "react";
import { createFileRoute } from "@tanstack/react-router";
import { ArrowRight } from "lucide-react";
import { ApplicationForm } from "@/components/application-form";
import { SiteFooter } from "@/components/site-footer";
import { SiteHeader } from "@/components/site-header";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import {
  FOOTPRINT_LABEL,
  LOCATIONS,
  REGION_BLURB,
  REGIONS,
  ROLES,
  type RoleId,
} from "@/lib/careers";

export const Route = createFileRoute("/")({ component: Home });

function Home() {
  const [selectedRole, setSelectedRole] = useState<RoleId | null>(null);
  const season = new Date().getFullYear();

  return (
    <div id="top" className="min-h-dvh bg-[var(--color-bg)] text-[var(--color-fg)]">
      <SiteHeader />

      <section className="relative overflow-hidden bg-field-noise">
        <div className="pointer-events-none absolute inset-0 diamond-grid opacity-40" />
        <div className="pointer-events-none absolute -right-24 top-10 h-72 w-72 rounded-full bg-[var(--color-primary)]/15 blur-3xl" />
        <div className="relative mx-auto max-w-6xl px-4 py-14 sm:px-6 sm:py-20 lg:py-24">
          <div className="grid grid-cols-12 gap-6">
            <div className="col-span-12 space-y-6 text-center sm:text-left">
              <Badge variant="secondary" className="uppercase tracking-[0.16em]">
                {season} season · Now hiring
              </Badge>
              <h1 className="font-display text-balance text-5xl font-bold leading-[0.95] tracking-tight sm:text-6xl lg:text-7xl">
                Build game days
                <span className="block text-[var(--color-primary)]">with Perfect Game SEC</span>
              </h1>
              <p className="mx-auto max-w-3xl text-base leading-relaxed text-[var(--color-fg-muted)] sm:mx-0 sm:text-lg">
                Join the tournament staff that keeps scoreboards live, games fair, gates moving, and
                families cheered on across the Southeast Coastal footprint.
              </p>
              <div className="flex flex-col items-center gap-3 sm:flex-row sm:items-center">
                <Button asChild size="lg">
                  <a href="#apply">
                    Apply in minutes
                    <ArrowRight className="size-4" />
                  </a>
                </Button>
              </div>
              <dl className="grid grid-cols-3 gap-3 border-t border-[var(--color-border)] pt-6 sm:max-w-lg sm:mx-0 mx-auto">
                {[
                  { label: "States", value: String(REGIONS.length) },
                  { label: "Open roles", value: String(ROLES.length - 1) },
                  { label: "Markets", value: String(LOCATIONS.length) },
                ].map((stat) => (
                  <div key={stat.label}>
                    <dt className="text-[11px] font-medium uppercase tracking-[0.14em] text-[var(--color-fg-subtle)]">
                      {stat.label}
                    </dt>
                    <dd className="font-display text-3xl font-semibold tabular-nums text-[var(--color-fg)]">
                      {stat.value}
                    </dd>
                  </div>
                ))}
              </dl>
            </div>
          </div>
        </div>
      </section>

      <section className="border-y border-[var(--color-border)] bg-[var(--color-bg-elevated)]">
        <div className="mx-auto grid max-w-6xl gap-8 px-4 py-14 sm:px-6 lg:grid-cols-[0.9fr_1.1fr] lg:items-center lg:py-16">
          <div className="space-y-3">
            <p className="text-xs font-semibold uppercase tracking-[0.16em] text-[var(--color-primary)]">
              Perfect Game partner
            </p>
            <h2 className="font-display text-3xl font-semibold tracking-tight sm:text-4xl">
              Southeast Coastal operations
            </h2>
          </div>
          <p className="text-base leading-relaxed text-[var(--color-fg-muted)] sm:text-lg">
            {REGION_BLURB} We hire dependable people who love baseball weekends and take pride in a
            clean, professional fan experience.
          </p>
        </div>
      </section>

      <section id="apply" className="scroll-mt-20">
        <div className="mx-auto grid max-w-6xl gap-10 px-4 py-16 sm:px-6 sm:py-20 lg:grid-cols-[0.9fr_1.1fr] lg:gap-14">
          <div className="space-y-5 lg:sticky lg:top-24 lg:self-start">
            <Badge>Application</Badge>
            <h2 className="font-display text-3xl font-semibold tracking-tight sm:text-4xl">
              Ready for tournament weekends?
            </h2>
            <p className="text-[var(--color-fg-muted)] leading-relaxed">
              Share a few details and your preferred market. Applications go straight to the PG SEC
              hiring desk — no account required.
            </p>
            <ul className="space-y-3 text-sm text-[var(--color-fg-muted)]">
              {[
                "Takes about two minutes",
                "Age 16+ preferred for most event roles",
                "Flexible weekend availability is a plus",
              ].map((item) => (
                <li key={item} className="flex items-start gap-2.5">
                  <span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-[var(--color-primary)]" />
                  {item}
                </li>
              ))}
            </ul>
            <div className="flex items-center gap-3 rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] p-4">
              <img
                src="/images/PG-Avitar.png"
                alt="Perfect Game"
                className="size-12 rounded-full border border-[var(--color-border)] object-cover"
              />
              <div>
                <p className="text-sm font-semibold">Perfect Game SEC</p>
                <p className="text-xs text-[var(--color-fg-subtle)]">{FOOTPRINT_LABEL}</p>
              </div>
            </div>
          </div>

          <Card className="border-[var(--color-border-strong)]">
            <CardHeader className="pb-2">
              <CardTitle className="text-2xl">Job application</CardTitle>
              <CardDescription>
                {selectedRole
                  ? `Applying for ${ROLES.find((r) => r.id === selectedRole)?.title}`
                  : "All fields required"}
              </CardDescription>
            </CardHeader>
            <CardContent>
              <ApplicationForm preferredRole={selectedRole} onRoleChange={setSelectedRole} />
            </CardContent>
          </Card>
        </div>
      </section>

      <SiteFooter />
    </div>
  );
}