import { createFileRoute, Link } from "@tanstack/react-router";
import { motion } from "motion/react";
import { ArrowRight, Sparkles, ShieldCheck, Layers, Users2, Play } from "lucide-react";
import { PageHero } from "@/components/page-hero";
import { categories } from "@/lib/services";
import hero from "@/assets/hero-home.jpg";
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("/")({
  component: Index,
});

function Index() {
  return (
    <>
      <PageHero
        eyebrow="AI Data · Generative AI · Enterprise · Managed Ops"
        title={
          <>
            Data that makes<br />
            <span style={{ background: "var(--gradient-accent)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>
              intelligent systems
            </span>{" "}
            actually work.
          </>
        }
        subtitle="CyberData builds high-quality, AI-ready datasets and runs managed operations for foundation models, autonomous systems, and enterprise AI — across text, vision, speech, and multimodal data."
        image={hero}
        imageAlt="Abstract AI data network"
        height="lg"
      >
        <div className="flex flex-wrap gap-3">
          <Link
            to="/contact"
            className="inline-flex items-center gap-2 rounded-full px-6 py-3 text-sm font-medium text-primary-foreground shadow-[var(--shadow-lift)] transition-transform hover:scale-[1.02]"
            style={{ background: "var(--gradient-accent)" }}
          >
            Start a project <ArrowRight className="h-4 w-4" />
          </Link>
          <Link
            to="/services"
            className="inline-flex items-center gap-2 rounded-full border border-border bg-background/70 px-6 py-3 text-sm font-medium backdrop-blur hover:bg-background transition-colors"
          >
            <Play className="h-3.5 w-3.5" /> Explore services
          </Link>
        </div>
        <div className="mt-12 flex flex-wrap gap-x-10 gap-y-4 text-sm text-muted-foreground">
          {[
            ["10M+", "Documents processed"],
            ["120+", "Languages & dialects"],
            ["99.4%", "Annotation accuracy"],
            ["24/7", "Managed delivery"],
          ].map(([n, l]) => (
            <div key={l} className="flex items-baseline gap-2">
              <span className="font-display text-2xl font-semibold text-foreground">{n}</span>
              <span>{l}</span>
            </div>
          ))}
        </div>
      </PageHero>

      {/* Marquee-ish strip */}
      <section className="border-y border-border bg-background/60 py-6">
        <div className="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-x-12 gap-y-2 px-6 text-xs uppercase tracking-[0.24em] text-muted-foreground">
          <span>Foundation Models</span>
          <span className="opacity-40">◆</span>
          <span>Autonomous Systems</span>
          <span className="opacity-40">◆</span>
          <span>Healthcare AI</span>
          <span className="opacity-40">◆</span>
          <span>Retail Intelligence</span>
          <span className="opacity-40">◆</span>
          <span>Publishing</span>
          <span className="opacity-40">◆</span>
          <span>Enterprise Search</span>
        </div>
      </section>

      {/* Services grid */}
      <section className="mx-auto max-w-7xl px-6 py-24">
        <div className="mb-16 grid gap-8 lg:grid-cols-[1fr_1.4fr] lg:items-end">
          <div>
            <p className="mb-4 text-xs font-semibold uppercase tracking-[0.24em]" style={{ color: "var(--brand-teal-deep)" }}>
              What we do
            </p>
            <h2 className="font-display text-4xl font-semibold tracking-tight md:text-5xl text-balance">
              Four practices. One accountable partner.
            </h2>
          </div>
          <p className="text-lg text-muted-foreground text-pretty">
            From the raw data that trains a model to the operations that keep it accurate in
            production — we cover the full lifecycle with domain-specific expertise, secure
            workflows, and human-in-the-loop quality.
          </p>
        </div>

        <div className="grid gap-6 md:grid-cols-2">
          {categories.map((cat, i) => (
            <motion.div
              key={cat.slug}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-80px" }}
              transition={{ duration: 0.5, delay: i * 0.08 }}
            >
              <Link
                to="/services/$category"
                params={{ category: cat.slug }}
                className="group relative flex h-full flex-col overflow-hidden rounded-3xl border border-border bg-card shadow-[var(--shadow-soft)] transition-all hover:shadow-[var(--shadow-lift)] hover:-translate-y-1"
              >
                <div className="relative h-56 overflow-hidden">
                  <img
                    src={images[cat.hero]}
                    alt={cat.name}
                    loading="lazy"
                    width={1600}
                    height={900}
                    className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-card via-card/20 to-transparent" />
                  <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 className="flex flex-1 flex-col p-7">
                  <h3 className="font-display text-2xl font-semibold tracking-tight">{cat.name}</h3>
                  <p className="mt-3 text-sm text-muted-foreground text-pretty">{cat.intro}</p>
                  <div className="mt-5 flex flex-wrap gap-1.5">
                    {cat.items.slice(0, 4).map((s) => (
                      <span key={s.slug} className="rounded-full border border-border bg-secondary/60 px-2.5 py-1 text-[11px] font-medium text-foreground/75">
                        {s.name}
                      </span>
                    ))}
                    {cat.items.length > 4 && (
                      <span className="rounded-full px-2.5 py-1 text-[11px] font-medium" style={{ color: "var(--brand-teal-deep)" }}>
                        +{cat.items.length - 4} more
                      </span>
                    )}
                  </div>
                  <div className="mt-6 flex items-center gap-2 text-sm font-medium" style={{ color: "var(--brand-teal-deep)" }}>
                    Explore practice
                    <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
                  </div>
                </div>
              </Link>
            </motion.div>
          ))}
        </div>
      </section>

      {/* Value pillars */}
      <section className="border-t border-border bg-secondary/40">
        <div className="mx-auto grid max-w-7xl gap-10 px-6 py-24 lg:grid-cols-2">
          <div>
            <p className="mb-4 text-xs font-semibold uppercase tracking-[0.24em]" style={{ color: "var(--brand-teal-deep)" }}>
              Why teams choose CyberData
            </p>
            <h2 className="font-display text-4xl font-semibold tracking-tight md:text-5xl text-balance">
              Precision engineering for the data behind AI.
            </h2>
            <p className="mt-6 text-lg text-muted-foreground text-pretty">
              We combine skilled specialists, secure infrastructure, and multi-layer quality control
              to deliver datasets and operations you can trust in production.
            </p>
          </div>
          <div className="grid gap-4 sm:grid-cols-2">
            {[
              { icon: Sparkles, t: "HITL Quality", d: "Multi-layer human review paired with automated validation for enterprise-grade accuracy." },
              { icon: ShieldCheck, t: "Secure by design", d: "SOC-aligned workflows, secure delivery centers and regulatory compliance built in." },
              { icon: Layers, t: "Full lifecycle", d: "Collection, annotation, generation, evaluation, digitization and managed ops." },
              { icon: Users2, t: "Domain expertise", d: "Linguists, clinicians, engineers and reviewers matched to your problem space." },
            ].map(({ icon: Icon, t, d }) => (
              <div key={t} className="rounded-2xl border border-border bg-card p-6">
                <div className="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-xl" style={{ background: "var(--gradient-accent)" }}>
                  <Icon className="h-5 w-5 text-primary-foreground" />
                </div>
                <h3 className="font-display text-lg font-semibold">{t}</h3>
                <p className="mt-2 text-sm text-muted-foreground text-pretty">{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="mx-auto max-w-7xl px-6 py-24">
        <div className="relative overflow-hidden rounded-3xl border border-border p-10 md:p-16" style={{ background: "var(--gradient-accent)" }}>
          <div className="absolute inset-0 opacity-30 mix-blend-overlay"
            style={{ backgroundImage: "radial-gradient(circle at 20% 20%, white, transparent 40%), radial-gradient(circle at 80% 80%, white, transparent 40%)" }}
          />
          <div className="relative grid gap-10 lg:grid-cols-[1.4fr_1fr] lg:items-center">
            <div>
              <h2 className="font-display text-4xl font-semibold tracking-tight text-primary-foreground md:text-5xl text-balance">
                Ready to build AI on data you can trust?
              </h2>
              <p className="mt-4 max-w-xl text-primary-foreground/85 text-pretty">
                Tell us about your model, your domain, and your data challenge — we'll respond with a
                tailored plan within 24 hours.
              </p>
            </div>
            <div className="flex flex-wrap gap-3 lg:justify-end">
              <Link
                to="/contact"
                className="inline-flex items-center gap-2 rounded-full bg-background px-6 py-3 text-sm font-medium text-foreground transition-transform hover:scale-[1.02]"
              >
                Talk to our team <ArrowRight className="h-4 w-4" />
              </Link>
              <Link
                to="/services"
                className="inline-flex items-center gap-2 rounded-full border border-primary-foreground/40 px-6 py-3 text-sm font-medium text-primary-foreground hover:bg-primary-foreground/10 transition-colors"
              >
                See all services
              </Link>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}