import { createFileRoute, Link } from "@tanstack/react-router";
import { motion } from "motion/react";
import { ArrowRight } from "lucide-react";
import { PageHero } from "@/components/page-hero";
import { categories } 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";
import heroImg from "@/assets/hero-home.jpg";

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

export const Route = createFileRoute("/services")({
  head: () => ({
    meta: [
      { title: "Services — CyberData" },
      { name: "description", content: "Explore CyberData's services: AI Data, Generative AI, Enterprise Data and Managed Operations — end-to-end capabilities for AI-ready data." },
      { property: "og:title", content: "Services — CyberData" },
      { property: "og:description", content: "AI Data, Generative AI, Enterprise Data and Managed Operations." },
    ],
  }),
  component: Services,
});

function Services() {
  return (
    <>
      <PageHero
        eyebrow="Services"
        title={<>Four practices that cover the <span style={{ background: "var(--gradient-accent)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>entire data lifecycle</span>.</>}
        subtitle="From strategic collection and annotation to generative AI evaluation, enterprise digitization and fully managed AI operations."
        image={heroImg}
        imageAlt="Services overview"
      />

      <section className="mx-auto max-w-7xl px-6 py-20 space-y-20">
        {categories.map((cat, idx) => (
          <motion.div
            key={cat.slug}
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, margin: "-100px" }}
            transition={{ duration: 0.6 }}
            className={`grid gap-10 lg:grid-cols-2 lg:items-center ${idx % 2 === 1 ? "lg:[&>div:first-child]:order-2" : ""}`}
          >
            <div className="relative overflow-hidden rounded-3xl border border-border shadow-[var(--shadow-soft)]">
              <img src={images[cat.hero]} alt={cat.name} loading="lazy" width={1600} height={900} className="w-full" />
              <span className="absolute left-5 top-5 rounded-full bg-background/85 px-3 py-1 text-[10px] font-semibold uppercase tracking-widest backdrop-blur">
                {cat.tag}
              </span>
            </div>
            <div>
              <h2 className="font-display text-3xl font-semibold tracking-tight md:text-4xl text-balance">{cat.name}</h2>
              <p className="mt-4 text-lg text-muted-foreground text-pretty">{cat.intro}</p>
              <ul className="mt-6 grid gap-2 sm:grid-cols-2">
                {cat.items.map((s) => (
                  <li key={s.slug}>
                    <Link
                      to="/services/$category"
                      params={{ category: cat.slug }}
                      hash={s.slug}
                      className="group flex items-center justify-between rounded-xl border border-border bg-card px-4 py-3 text-sm transition-colors hover:border-[var(--brand-teal-deep)]"
                    >
                      <span>{s.name}</span>
                      <ArrowRight className="h-3.5 w-3.5 opacity-0 -translate-x-1 transition-all group-hover:opacity-100 group-hover:translate-x-0" />
                    </Link>
                  </li>
                ))}
              </ul>
              <Link
                to="/services/$category"
                params={{ category: cat.slug }}
                className="mt-6 inline-flex items-center gap-2 text-sm font-medium"
                style={{ color: "var(--brand-teal-deep)" }}
              >
                Explore {cat.name} <ArrowRight className="h-4 w-4" />
              </Link>
            </div>
          </motion.div>
        ))}
      </section>
    </>
  );
}