import { createFileRoute } from "@tanstack/react-router";
import { PageHeader, SectionLabel } from "@/components/section-label";
import { CheckCircle2, Layers, Database, Cpu, Workflow } from "lucide-react";
import gridBg from "@/assets/grid-bg.jpg";
import architectureImg from "@/assets/platform-architecture.png";
import chemicalImg from "@/assets/chemical-warfare.avif";

export const Route = createFileRoute("/platform")({
  head: () => ({
    meta: [
      { title: "Platform — AceHazmat Electronic CBRNe Simulation" },
      { name: "description", content: "Simulation environment, trainee management, analytics, infrastructure and software integrations including ALOHA." },
      { property: "og:title", content: "AceHazmat Platform" },
      { property: "og:description", content: "An end-to-end electronic simulation platform for HAZMAT and CBRNe training." },
    ],
  }),
  component: PlatformPage,
});

const featureGroups = [
  {
    icon: Layers,
    code: "01",
    title: "Simulation Environment",
    items: [
      "Radiation hazard simulation",
      "Chemical hazard simulation",
      "Multiple simultaneous hazards",
      "Scenario creation with environmental conditions",
      "Indoor and outdoor training support",
    ],
  },
  {
    icon: Workflow,
    code: "02",
    title: "Trainee Management",
    items: [
      "Parallel multi-trainee training",
      "Trainer-centric supervision dashboard",
      "Automated drill documentation",
      "Procedural checklist validation",
    ],
  },
  {
    icon: Database,
    code: "03",
    title: "Analytics & Records",
    items: [
      "Captures every trainee action",
      "Stores granular training metrics",
      "Maintains procedural outcomes",
      "Enables post-training analysis",
    ],
  },
  {
    icon: Cpu,
    code: "04",
    title: "Infrastructure",
    items: [
      "Portable, rapid deployment",
      "Long battery life",
      "Rugged military-grade hardware",
      "Secure data architecture",
    ],
  },
];

const benefits = [
  { t: "Operational", items: ["Easy setup of training infrastructure", "Fast deployment", "Minimal supervision required", "Scalable across training sites"] },
  { t: "Safety", items: ["Risk-free simulation environment", "Reduced trainer and trainee exposure", "Eliminates dangerous live-agent handling"] },
  { t: "Technical", items: ["High precision positioning", "Long-range operation", "Configurable detector compatibility", "Secure training data"] },
  { t: "Administrative", items: ["Automated record keeping", "Performance validation", "Simplified reporting", "Training analytics"] },
];

const deployments = [
  { t: "Single-site", d: "All-in-one deployment at a single training facility." },
  { t: "Multi-campus", d: "Synchronised training across multiple sites and units." },
  { t: "User PC", d: "Lightweight install on instructor workstations." },
  { t: "Centralized data center", d: "Enterprise-grade hosting with consolidated analytics." },
];

function PlatformPage() {
  return (
    <>
      <PageHeader
        eyebrow="SYS://PLATFORM"
        title="A complete electronic simulation platform for CBRNe training."
        intro="Electronic simulators, mock detector devices, IoT communication infrastructure, training management software and analytics — engineered as one cohesive ecosystem."
      />

      {/* PLATFORM ARCHITECTURE */}
      <section className="border-b border-border py-24">
        <div className="mx-auto max-w-7xl px-6">
          <SectionLabel code="00" label="Platform Architecture" />
          <h2 className="mt-4 max-w-3xl text-4xl font-semibold tracking-tight md:text-5xl">
            One ecosystem. Hardware, software, analytics.
          </h2>
          <p className="mt-4 max-w-3xl text-muted-foreground">
            Simulators, mock detectors and IoT infrastructure feed live telemetry into the
            trainer dashboard and analytics layer — a closed loop from field to record.
          </p>
          <figure className="tech-corners mt-12 border border-border bg-card/40 p-4">
            <img
              src={architectureImg}
              alt="AceHazmat platform architecture diagram"
              loading="lazy"
              className="w-full object-contain"
            />
          </figure>
        </div>
      </section>

      {/* FEATURE GROUPS */}
      <section className="border-b border-border py-24">
        <div className="mx-auto max-w-7xl px-6">
          <SectionLabel code="01" label="Core Features" />
          <div className="mt-12 grid gap-px bg-border md:grid-cols-2">
            {featureGroups.map(({ icon: Icon, code, title, items }) => (
              <div key={title} className="bg-background p-8 md:p-10">
                <div className="flex items-center justify-between">
                  <Icon className="h-7 w-7 text-primary" />
                  <span className="font-mono text-[10px] uppercase tracking-widest text-muted-foreground">{code}</span>
                </div>
                <h3 className="mt-6 text-2xl font-semibold">{title}</h3>
                <ul className="mt-6 space-y-3">
                  {items.map((it) => (
                    <li key={it} className="flex items-start gap-3 text-sm text-muted-foreground">
                      <CheckCircle2 className="mt-0.5 h-4 w-4 flex-shrink-0 text-primary" />
                      <span>{it}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>

          {/* CHEMICAL HAZARD VISUAL */}
          <div className="mt-16 grid gap-8 lg:grid-cols-2 lg:items-center">
            <figure className="tech-corners border border-border bg-card/40 p-3">
              <img
                src={chemicalImg}
                alt="Chemical warfare hazard simulation scenario"
                loading="lazy"
                className="aspect-[4/3] w-full object-cover"
              />
            </figure>
            <div>
              <SectionLabel code="01.A" label="Chemical Hazard Scenarios" />
              <h3 className="mt-4 text-3xl font-semibold tracking-tight md:text-4xl">
                Train against chemical warfare threats — without the agent.
              </h3>
              <p className="mt-4 text-muted-foreground">
                Programmable electronic sources simulate chemical release patterns, plume
                dispersion and detector response curves so trainees experience realistic
                CBRNe incidents with zero exposure risk.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* SOFTWARE INTEGRATION */}
      <section className="relative overflow-hidden border-b border-border py-24">
        <div
          className="absolute inset-0 opacity-20"
          style={{ backgroundImage: `url(${gridBg})`, backgroundSize: "cover" }}
        />
        <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="Software Integration" />
          <h2 className="mt-4 max-w-3xl text-4xl font-semibold tracking-tight md:text-5xl">
            Compatible with the environmental simulation tools you already use.
          </h2>
          <div className="mt-10 flex flex-wrap gap-4">
            <div className="tech-corners border border-border bg-card/70 px-8 py-6 backdrop-blur-sm">
              <div className="font-mono text-[10px] uppercase tracking-widest text-muted-foreground">Integrated With</div>
              <div className="mt-2 text-2xl font-semibold text-primary">ALOHA</div>
            </div>
          </div>
        </div>
      </section>

      {/* BENEFITS */}
      <section className="border-b border-border py-24">
        <div className="mx-auto max-w-7xl px-6">
          <SectionLabel code="03" label="Benefits" />
          <h2 className="mt-4 max-w-3xl text-4xl font-semibold tracking-tight md:text-5xl">
            Built for the operators, instructors and administrators.
          </h2>
          <div className="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
            {benefits.map((b) => (
              <div key={b.t} className="tech-corners border border-border bg-card/40 p-6">
                <div className="font-mono text-xs uppercase tracking-widest text-primary">{b.t}</div>
                <ul className="mt-4 space-y-2 text-sm text-muted-foreground">
                  {b.items.map((it) => (
                    <li key={it} className="flex items-start gap-2">
                      <span className="mt-1.5 h-1 w-1 flex-shrink-0 bg-primary" />
                      <span>{it}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* DEPLOYMENT */}
      <section className="py-24">
        <div className="mx-auto max-w-7xl px-6">
          <SectionLabel code="04" label="Architecture" />
          <h2 className="mt-4 max-w-3xl text-4xl font-semibold tracking-tight md:text-5xl">
            Secure, robust, scalable and extensible.
          </h2>
          <div className="mt-12 grid gap-px bg-border md:grid-cols-2 lg:grid-cols-4">
            {deployments.map((d, i) => (
              <div key={d.t} className="bg-background p-8">
                <div className="font-mono text-[10px] uppercase tracking-widest text-muted-foreground">DEPLOY/0{i + 1}</div>
                <h3 className="mt-4 text-lg font-semibold">{d.t}</h3>
                <p className="mt-2 text-sm text-muted-foreground">{d.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}