import { createFileRoute, Link, notFound } from "@tanstack/react-router";
import { motion } from "motion/react";
import { ArrowRight, Check } from "lucide-react";
import { PageHero } from "@/components/page-hero";
import { categories, type ServiceItem } from "@/lib/services";
import aiData from "@/assets/hero-ai-data.jpg";
import genai from "@/assets/hero-genai.jpg";
import enterprise from "@/assets/hero-enterprise.jpg";
import managed from "@/assets/hero-managed.jpg";

const images: Record<string, string> = {
  "hero-ai-data": aiData,
  "hero-genai": genai,
  "hero-enterprise": enterprise,
  "hero-managed": managed,
};

export const Route = createFileRoute("/services/$category")({
  loader: ({ params }) => {
    const cat = categories.find((c) => c.slug === params.category);
    if (!cat) throw notFound();
    return { cat };
  },
  head: ({ loaderData }) => ({
    meta: loaderData
      ? [
          { title: `${loaderData.cat.name} — CyberData` },
          { name: "description", content: loaderData.cat.intro.slice(0, 155) },
          { property: "og:title", content: `${loaderData.cat.name} — CyberData` },
          { property: "og:description", content: loaderData.cat.intro.slice(0, 155) },
        ]
      : [],
  }),
  notFoundComponent: () => (
    <div className="mx-auto max-w-3xl px-6 py-32 text-center">
      <h1 className="font-display text-4xl font-semibold">Service not found</h1>
      <p className="mt-4 text-muted-foreground">The service you're looking for doesn't exist.</p>
      <Link to="/services" className="mt-6 inline-flex items-center gap-2 text-sm" style={{ color: "var(--brand-teal-deep)" }}>
        Back to services <ArrowRight className="h-4 w-4" />
      </Link>
    </div>
  ),
  errorComponent: ({ error, reset }) => (
    <div className="mx-auto max-w-3xl px-6 py-32 text-center">
      <h1 className="font-display text-3xl font-semibold">Something went wrong</h1>
      <p className="mt-2 text-muted-foreground">{error.message}</p>
      <button onClick={reset} className="mt-6 rounded-full border border-border px-5 py-2 text-sm">Try again</button>
    </div>
  ),
  component: CategoryPage,
});

function CategoryPage() {
  const { cat } = Route.useLoaderData();
  return (
    <>
      <PageHero
        eyebrow={cat.tag}
        title={cat.name}
        subtitle={cat.intro}
        image={images[cat.hero]}
        imageAlt={cat.name}
      >
        <Link
          to="/contact"
          className="inline-flex items-center gap-2 rounded-full px-6 py-3 text-sm font-medium text-primary-foreground"
          style={{ background: "var(--gradient-accent)" }}
        >
          Discuss your project <ArrowRight className="h-4 w-4" />
        </Link>
      </PageHero>

      <section className="mx-auto max-w-7xl px-6 py-20">
        <div className="mb-12 flex flex-wrap items-end justify-between gap-6">
          <h2 className="font-display text-3xl font-semibold tracking-tight md:text-4xl text-balance">
            Capabilities inside {cat.name}
          </h2>
          <p className="max-w-md text-muted-foreground text-pretty">
            Each capability is delivered by dedicated specialists, backed by multi-layer QA and
            secure operational infrastructure.
          </p>
        </div>

        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {cat.items.map((s: ServiceItem, i: number) => (
            <motion.article
              key={s.slug}
              id={s.slug}
              initial={{ opacity: 0, y: 16 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-60px" }}
              transition={{ duration: 0.45, delay: (i % 3) * 0.06 }}
              className="group relative flex flex-col overflow-hidden rounded-2xl border border-border bg-card p-6 shadow-[var(--shadow-soft)] transition-all hover:-translate-y-1 hover:shadow-[var(--shadow-lift)]"
            >
              <div className="mb-5 flex items-center justify-between">
                <span className="text-xs font-mono text-muted-foreground">{String(i + 1).padStart(2, "0")}</span>
                <div className="h-2 w-2 rounded-full" style={{ background: "var(--brand-teal-deep)" }} />
              </div>
              <h3 className="font-display text-xl font-semibold tracking-tight">{s.name}</h3>
              <p className="mt-3 flex-1 text-sm text-muted-foreground text-pretty">{s.blurb}</p>
              <div className="mt-5 flex items-center gap-2 text-xs font-medium" style={{ color: "var(--brand-teal-deep)" }}>
                <Check className="h-3.5 w-3.5" /> HITL quality · Secure delivery
              </div>
            </motion.article>
          ))}
        </div>
      </section>

      <section className="border-t border-border bg-secondary/40">
        <div className="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-6 px-6 py-14">
          <div>
            <h3 className="font-display text-2xl font-semibold">Have a specialized need?</h3>
            <p className="mt-1 text-muted-foreground">We tailor engagements around your domain, data and delivery timeline.</p>
          </div>
          <div className="flex gap-3">
            <Link to="/contact" className="inline-flex items-center gap-2 rounded-full px-5 py-2.5 text-sm font-medium text-primary-foreground" style={{ background: "var(--gradient-accent)" }}>
              Talk to an expert <ArrowRight className="h-4 w-4" />
            </Link>
            <Link to="/services" className="inline-flex items-center gap-2 rounded-full border border-border px-5 py-2.5 text-sm font-medium">
              All services
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}