import { createFileRoute } from "@tanstack/react-router";
import { Link } from "@tanstack/react-router";
import { ArrowRight, Radio, ShieldCheck, Activity, Cpu, Users, MapPin } from "lucide-react";
import heroImg from "@/assets/hero-responder.jpg";
import gridBg from "@/assets/grid-bg.jpg";
import trainingImg from "@/assets/training-scene.jpg";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "AceHazmat — Electronic CBRNe & HAZMAT Training Simulation" },
      { name: "description", content: "Risk-free electronic simulation for hazmat and CBRNe first responder training. UWB precision, IoT detectors, multi-trainee drills." },
      { property: "og:title", content: "AceHazmat — CBRNe Training Simulation" },
      { property: "og:description", content: "Replace risky live-agent drills with electronic simulation. 15 trainees, 10 km range, 10 cm precision." },
    ],
  }),
  component: Index,
});

const stats = [
  { v: "15", l: "Trainees / drill" },
  { v: "10 km", l: "Operational range" },
  { v: "10 cm", l: "Positioning precision" },
  { v: "0", l: "Live-agent exposure" },
];

const capabilities = [
  { icon: Radio, t: "Multi-Hazard Simulation", d: "Radiation, chemical and simultaneous CBRNe hazards rendered through electronic sources — no real agents required." },
  { icon: MapPin, t: "Indoor + Outdoor", d: "UWB, BLE, Wi-Fi and geo-positioning deliver centimetre-grade location across complex environments." },
  { icon: Users, t: "Up to 15 Trainees", d: "Parallel exercises with trainer-centric supervision, automated documentation and procedural checklists." },
  { icon: Activity, t: "Analytics & Records", d: "Every action, reading and decision captured for post-drill review, validation and reporting." },
  { icon: Cpu, t: "IoT Hardware", d: "Rugged, military-grade simulators and mock detectors with eInk displays and long battery life." },
  { icon: ShieldCheck, t: "Secure by Design", d: "Hardened data architecture with single-site, multi-campus and centralized deployment options." },
];

function Index() {
  return (
    <>
      {/* HERO */}
      <section className="relative overflow-hidden border-b border-border">
        <div className="absolute inset-0">
          <img
            src={heroImg}
            alt="CBRNe responder with handheld detector in simulated hazard environment"
            width={1920}
            height={1080}
            className="h-full w-full object-cover opacity-60"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-background via-background/80 to-background/30" />
          <div className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-background/40" />
        </div>

        <div className="relative mx-auto grid max-w-7xl gap-12 px-6 py-24 md:py-32 lg:grid-cols-12">
          <div className="lg:col-span-7">
            <div className="flex items-center gap-3 font-mono text-[11px] uppercase tracking-[0.3em] text-primary">
              <span className="h-px w-8 bg-primary" />
              SYS://CBRNe.TRAINING.OS
            </div>
            <h1 className="mt-6 text-5xl font-semibold leading-[1.05] tracking-tight md:text-7xl">
              Train for the worst.<br />
              <span className="text-primary text-glow">Without the risk.</span>
            </h1>
            <p className="mt-6 max-w-xl text-lg text-muted-foreground">
              AceHazmat replaces hazardous live-agent drills with electronic
              simulation systems — purpose-built for HAZMAT and CBRNe first
              responders, military units and civil defence agencies.
            </p>
            <div className="mt-10 flex flex-wrap items-center gap-4">
              <Link
                to="/contact"
                className="group inline-flex items-center gap-2 border border-primary bg-primary px-6 py-3 font-mono text-xs uppercase tracking-widest text-primary-foreground transition-all hover:shadow-[var(--shadow-glow)]"
              >
                Request a Demo
                <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
              </Link>
              <Link
                to="/platform"
                className="inline-flex items-center gap-2 border border-border px-6 py-3 font-mono text-xs uppercase tracking-widest text-foreground transition-colors hover:border-primary hover:text-primary"
              >
                Explore Platform
              </Link>
            </div>
          </div>

          <div className="lg:col-span-5">
            <div className="tech-corners border border-border bg-card/60 p-6 backdrop-blur-sm">
              <div className="flex items-center justify-between font-mono text-[10px] uppercase tracking-widest text-muted-foreground">
                <span>// LIVE.OPS.METRICS</span>
                <span className="flex items-center gap-1.5">
                  <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-primary" />
                  ONLINE
                </span>
              </div>
              <div className="mt-6 grid grid-cols-2 gap-x-6 gap-y-8">
                {stats.map((s) => (
                  <div key={s.l} className="border-l-2 border-primary pl-3">
                    <div className="font-display text-3xl font-semibold text-foreground md:text-4xl">
                      {s.v}
                    </div>
                    <div className="mt-1 font-mono text-[10px] uppercase tracking-widest text-muted-foreground">
                      {s.l}
                    </div>
                  </div>
                ))}
              </div>
              <div className="mt-8 hazard-stripes h-1.5 w-full" />
            </div>
          </div>
        </div>
      </section>

      {/* CAPABILITIES */}
      <section className="border-b border-border py-24">
        <div className="mx-auto max-w-7xl px-6">
          <SectionLabel code="01" label="Capabilities" />
          <h2 className="mt-4 max-w-3xl text-4xl font-semibold tracking-tight md:text-5xl">
            A complete simulation ecosystem for CBRNe readiness.
          </h2>
          <p className="mt-4 max-w-2xl text-muted-foreground">
            Electronic simulators, mock detectors, IoT communication and a training
            management suite — engineered to deploy fast and scale across sites.
          </p>

          <div className="mt-14 grid gap-px bg-border md:grid-cols-2 lg:grid-cols-3">
            {capabilities.map(({ icon: Icon, t, d }) => (
              <div key={t} className="group relative bg-background p-8 transition-colors hover:bg-card">
                <Icon className="h-6 w-6 text-primary" />
                <h3 className="mt-6 text-lg font-semibold text-foreground">{t}</h3>
                <p className="mt-2 text-sm text-muted-foreground">{d}</p>
                <div className="absolute right-6 top-6 font-mono text-[10px] uppercase tracking-widest text-muted-foreground/60">
                  0{capabilities.indexOf(capabilities.find(c => c.t === t)!) + 1}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TECH STRIP */}
      <section className="relative overflow-hidden border-b border-border py-24">
        <div
          className="absolute inset-0 opacity-30"
          style={{ backgroundImage: `url(${gridBg})`, backgroundSize: "cover", backgroundPosition: "center" }}
        />
        <div className="absolute inset-0 bg-gradient-to-b from-background via-transparent to-background" />
        <div className="relative mx-auto max-w-7xl px-6">
          <SectionLabel code="02" label="Deep Tech Stack" />
          <h2 className="mt-4 max-w-3xl text-4xl font-semibold tracking-tight md:text-5xl">
            UWB precision. IoT scale. Field-proven hardware.
          </h2>
          <div className="mt-14 grid gap-4 md:grid-cols-3 lg:grid-cols-6">
            {["UWB", "BLE", "Wi-Fi", "Geo-Positioning", "eInk Displays", "IoT"].map((t) => (
              <div
                key={t}
                className="tech-corners border border-border bg-background/70 p-5 text-center backdrop-blur-sm"
              >
                <div className="font-mono text-xs uppercase tracking-widest text-primary">{t}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* USE CASES */}
      <section className="border-b border-border py-24">
        <div className="mx-auto grid max-w-7xl gap-12 px-6 lg:grid-cols-2">
          <div className="relative">
            <img
              src={trainingImg}
              alt="Hazmat responders coordinating during a night training exercise"
              loading="lazy"
              width={1600}
              height={900}
              className="tech-corners w-full border border-border object-cover"
            />
          </div>
          <div>
            <SectionLabel code="03" label="Use Cases" />
            <h2 className="mt-4 text-4xl font-semibold tracking-tight md:text-5xl">
              From single-trainee drills to multi-campus exercises.
            </h2>
            <ul className="mt-8 space-y-4">
              {[
                "Hazardous material response training",
                "Chemical warfare simulations",
                "Radiation response simulations",
                "Indoor and outdoor emergency response drills",
                "Multi-trainee coordinated exercises",
              ].map((u, i) => (
                <li key={u} className="flex items-start gap-4 border-b border-border pb-4">
                  <span className="font-mono text-xs text-primary">0{i + 1}</span>
                  <span className="text-foreground">{u}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-24">
        <div className="mx-auto max-w-5xl px-6">
          <div className="tech-corners relative overflow-hidden border border-border bg-card p-10 md:p-16">
            <div className="absolute inset-0 bg-radar opacity-60" />
            <div className="relative">
              <SectionLabel code="04" label="Deploy" />
              <h2 className="mt-4 text-4xl font-semibold tracking-tight md:text-5xl">
                Ready to modernise your CBRNe training programme?
              </h2>
              <p className="mt-4 max-w-2xl text-muted-foreground">
                Talk to our team — former CBRNe trainers and engineers — about
                deploying AceHazmat at your facility.
              </p>
              <Link
                to="/contact"
                className="mt-8 inline-flex items-center gap-2 border border-primary bg-primary px-6 py-3 font-mono text-xs uppercase tracking-widest text-primary-foreground transition-all hover:shadow-[var(--shadow-glow)]"
              >
                Initiate Contact
                <ArrowRight className="h-4 w-4" />
              </Link>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function SectionLabel({ code, label }: { code: string; label: string }) {
  return (
    <div className="flex items-center gap-3 font-mono text-[11px] uppercase tracking-[0.3em] text-primary">
      <span className="border border-primary px-2 py-0.5">{code}</span>
      <span className="h-px w-8 bg-primary/50" />
      {label}
    </div>
  );
}