import { createFileRoute } from "@tanstack/react-router";
import { PageHeader, SectionLabel } from "@/components/section-label";
import detectorImg from "@/assets/product-reader.avif";
import simulatorImg from "@/assets/product-hardware.avif";
import productPlatform from "@/assets/product-platform.avif";
import productHardware from "@/assets/product-hardware.avif";
import productReader from "@/assets/product-reader.avif";
import product4 from "@/assets/product-4.avif";
import product5 from "@/assets/product-5.avif";
import { Radio, Wifi, Bluetooth, Cpu, Battery, Shield } from "lucide-react";

export const Route = createFileRoute("/hardware")({
  head: () => ({
    meta: [
      { title: "Hardware — AceHazmat Simulators & Mock Detectors" },
      { name: "description", content: "Electronic simulators and programmable mock detectors with eInk displays, 3D-printed handles and multi-protocol communication." },
      { property: "og:title", content: "AceHazmat Hardware" },
      { property: "og:description", content: "Rugged simulators and mock detectors built for indoor and outdoor CBRNe training." },
      { property: "og:image", content: detectorImg },
    ],
  }),
  component: HardwarePage,
});

const protocols = [
  { icon: Radio, t: "UWB", d: "Ultra-wideband for ≤ 10 cm location precision." },
  { icon: Bluetooth, t: "BLE", d: "Low-power device coordination and beacons." },
  { icon: Wifi, t: "Wi-Fi", d: "High-bandwidth backhaul for live telemetry." },
];

const simFeatures = [
  "Indoor and outdoor deployment",
  "Multi-hazard support",
  "Radiation simulation",
  "Chemical simulation",
  "Simultaneous hazard training",
  "Precision location capability",
];

const detFeatures = [
  "eInk programmable displays",
  "3D printed ergonomic handles",
  "Realistic device appearance",
  "Multiple communication protocols",
];

function HardwarePage() {
  return (
    <>
      <PageHeader
        eyebrow="SYS://HARDWARE"
        title="Field-ready hardware engineered for prolonged CBRNe operations."
        intro="Electronic simulators replicate hazardous sources without exposure. Programmable mock detectors look, feel and respond like the real thing."
      />

      {/* SIMULATORS */}
      <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>
            <SectionLabel code="01" label="Electronic Simulators" />
            <h2 className="mt-4 text-4xl font-semibold tracking-tight md:text-5xl">
              Replicate hazardous sources <span className="text-primary">safely</span>.
            </h2>
            <p className="mt-4 text-muted-foreground">
              Compact, rugged simulators that emit electronic signatures representing
              radiation, chemical and combined hazards — picked up by mock detectors
              just like real-world sources.
            </p>
            <ul className="mt-8 grid gap-3 sm:grid-cols-2">
              {simFeatures.map((f) => (
                <li key={f} className="border border-border bg-card/40 p-4 text-sm">
                  <span className="font-mono text-[10px] uppercase tracking-widest text-primary">FEAT</span>
                  <div className="mt-1 text-foreground">{f}</div>
                </li>
              ))}
            </ul>
          </div>
          <div className="relative">
            <div className="tech-corners relative border border-border bg-card/40 p-2">
              <img
                src={simulatorImg}
                alt="AceHazmat electronic simulator unit"
                loading="lazy"
                className="w-full object-cover"
              />
              <div className="absolute left-6 top-6 font-mono text-[10px] uppercase tracking-widest text-primary">
                // SIMULATOR.UNIT.A1
              </div>
              <div className="absolute bottom-6 right-6 font-mono text-[10px] uppercase tracking-widest text-muted-foreground">
                Multi-hazard · IP67
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* DETECTORS */}
      <section className="border-b border-border py-24">
        <div className="mx-auto grid max-w-7xl gap-12 px-6 lg:grid-cols-2 lg:items-center">
          <div className="order-2 lg:order-1">
            <img
              src={detectorImg}
              alt="Mock CBRNe detector with eInk display"
              loading="lazy"
              width={1400}
              height={1000}
              className="tech-corners w-full border border-border object-cover"
            />
          </div>
          <div className="order-1 lg:order-2">
            <SectionLabel code="02" label="Mock Detectors" />
            <h2 className="mt-4 text-4xl font-semibold tracking-tight md:text-5xl">
              Programmable. Realistic. Reusable.
            </h2>
            <p className="mt-4 text-muted-foreground">
              eInk displays and 3D-printed enclosures give trainees the exact look
              and feel of real instrumentation — without the cost or risk.
            </p>
            <ul className="mt-8 space-y-3">
              {detFeatures.map((f) => (
                <li key={f} className="flex items-center gap-3 border-b border-border pb-3 text-foreground">
                  <span className="h-1.5 w-1.5 bg-primary" />
                  {f}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* PROTOCOLS */}
      <section className="border-b border-border py-24">
        <div className="mx-auto max-w-7xl px-6">
          <SectionLabel code="03" label="Supported Protocols" />
          <h2 className="mt-4 max-w-3xl text-4xl font-semibold tracking-tight md:text-5xl">
            Multi-protocol mesh — pick the right signal for the environment.
          </h2>
          <div className="mt-12 grid gap-px bg-border md:grid-cols-3">
            {protocols.map(({ icon: Icon, t, d }) => (
              <div key={t} className="bg-background p-8">
                <Icon className="h-7 w-7 text-primary" />
                <div className="mt-6 font-mono text-xs uppercase tracking-widest text-muted-foreground">PROTOCOL</div>
                <h3 className="mt-1 text-3xl font-semibold">{t}</h3>
                <p className="mt-3 text-sm text-muted-foreground">{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SPECS */}
      <section className="py-24">
        <div className="mx-auto max-w-7xl px-6">
          <SectionLabel code="04" label="Engineered For Field" />
          <div className="mt-12 grid gap-6 md:grid-cols-3">
            {[
              { i: Battery, t: "Long Battery Life", d: "Designed for prolonged training sessions in remote sites." },
              { i: Shield, t: "Military-Grade", d: "Rugged enclosures built for harsh operating environments." },
              { i: Cpu, t: "Configurable", d: "Detector profiles and scenarios fully programmable per drill." },
            ].map(({ i: Icon, t, d }) => (
              <div key={t} className="tech-corners border border-border bg-card/40 p-6">
                <Icon className="h-6 w-6 text-primary" />
                <h3 className="mt-4 text-lg font-semibold">{t}</h3>
                <p className="mt-2 text-sm text-muted-foreground">{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PRODUCT GALLERY */}
      <section className="border-t border-border py-24">
        <div className="mx-auto max-w-7xl px-6">
          <SectionLabel code="05" label="Product Range" />
          <h2 className="mt-4 max-w-3xl text-4xl font-semibold tracking-tight md:text-5xl">
            The full AceHazmat hardware stack.
          </h2>
          <div className="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {[
              { src: productPlatform, t: "Simulation Platform", c: "PRD/01" },
              { src: productHardware, t: "Hazard Simulator", c: "PRD/02" },
              { src: productReader, t: "Mock Detector", c: "PRD/03" },
              { src: product4, t: "Field Unit", c: "PRD/04" },
              { src: product5, t: "Training Accessory", c: "PRD/05" },
            ].map((p) => (
              <figure key={p.t} className="tech-corners border border-border bg-card/40 p-3">
                <img src={p.src} alt={p.t} loading="lazy" className="aspect-[4/3] w-full object-cover" />
                <figcaption className="flex items-center justify-between px-2 pt-4 pb-2">
                  <span className="font-mono text-[10px] uppercase tracking-widest text-primary">{p.c}</span>
                  <span className="text-sm font-semibold">{p.t}</span>
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}