import { createFileRoute } from "@tanstack/react-router";
import { PageHeader, SectionLabel } from "@/components/section-label";
import trainingImg from "@/assets/training-scene.jpg";
import { Target, Eye, Award } from "lucide-react";

export const Route = createFileRoute("/about")({
  head: () => ({
    meta: [
      { title: "About — AceHazmat | Built by CBRNe Specialists" },
      { name: "description", content: "Former CBRNe trainers, engineers and hazardous materials specialists building safer, smarter first-responder training." },
      { property: "og:title", content: "About AceHazmat" },
      { property: "og:description", content: "A decade of CBRNe expertise, engineered into electronic simulation systems." },
    ],
  }),
  component: AboutPage,
});

const differentiators = [
  { t: "Infrastructure Deployment", d: "Simplified setup of training environments — drop-in, switch on, drill." },
  { t: "Performance Metrics", d: "Easy validation and analysis of trainee performance, drill by drill." },
  { t: "Detector Design", d: "Portable, realistic mock detectors purpose-built for training." },
  { t: "Data Security", d: "Secure storage and handling of all training records and telemetry." },
  { t: "Long Duration Operations", d: "Electronic sensors engineered for prolonged training sessions." },
  { t: "Software Integration", d: "Compatible with industry tools including ALOHA." },
];

const orgs = ["Singapore Civil Defence Force", "Indian Army"];
const segments = [
  "First responders",
  "Military organizations",
  "Hazmat response teams",
  "Emergency preparedness organizations",
  "Civil defense agencies",
];

function AboutPage() {
  return (
    <>
      <PageHeader
        eyebrow="SYS://COMPANY"
        title="Built by the people who once trained the hard way."
        intro="AceHazmat is a team of former CBRNe trainers, engineers and hazardous materials specialists with a decade of experience in emergency response training."
      />

      {/* MISSION / VISION */}
      <section className="border-b border-border py-24">
        <div className="mx-auto grid max-w-7xl gap-px bg-border px-0 md:grid-cols-2">
          <div className="bg-background p-10 md:p-14">
            <Target className="h-7 w-7 text-primary" />
            <div className="mt-6 font-mono text-[11px] uppercase tracking-[0.3em] text-primary">Mission</div>
            <p className="mt-4 text-2xl font-semibold leading-snug">
              “To minimize trainee and trainer injuries and prolonged exposure
              during training sessions through applications of cutting-edge
              technology.”
            </p>
          </div>
          <div className="bg-background p-10 md:p-14">
            <Eye className="h-7 w-7 text-primary" />
            <div className="mt-6 font-mono text-[11px] uppercase tracking-[0.3em] text-primary">Vision</div>
            <p className="mt-4 text-2xl font-semibold leading-snug">
              “Immersive hazmat training modules for trainees for the best
              performance in real world scenarios.”
            </p>
          </div>
        </div>
      </section>

      {/* EXPERTISE */}
      <section className="relative overflow-hidden border-b border-border py-24">
        <div className="absolute inset-0">
          <img
            src={trainingImg}
            alt="Hazmat responders in coordinated training exercise"
            loading="lazy"
            width={1600}
            height={900}
            className="h-full w-full object-cover opacity-25"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-background to-background/40" />
        </div>
        <div className="relative mx-auto max-w-7xl px-6">
          <SectionLabel code="01" label="Expertise" />
          <h2 className="mt-4 max-w-3xl text-4xl font-semibold tracking-tight md:text-5xl">
            A decade of operational CBRNe and emergency-response experience.
          </h2>
          <div className="mt-12 grid gap-px bg-border md:grid-cols-3">
            {[
              "Hazardous materials",
              "CBRNe simulation",
              "Emergency response training",
            ].map((t, i) => (
              <div key={t} className="bg-background/90 p-8">
                <div className="font-mono text-[10px] uppercase tracking-widest text-muted-foreground">DOMAIN/0{i + 1}</div>
                <div className="mt-3 text-2xl font-semibold">{t}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* DIFFERENTIATORS */}
      <section className="border-b border-border py-24">
        <div className="mx-auto max-w-7xl px-6">
          <SectionLabel code="02" label="Differentiators" />
          <h2 className="mt-4 max-w-3xl text-4xl font-semibold tracking-tight md:text-5xl">
            What sets AceHazmat apart.
          </h2>
          <div className="mt-12 grid gap-px bg-border md:grid-cols-2 lg:grid-cols-3">
            {differentiators.map((d, i) => (
              <div key={d.t} className="bg-background p-8">
                <div className="font-mono text-[10px] uppercase tracking-widest text-muted-foreground">0{i + 1}</div>
                <h3 className="mt-3 text-lg font-semibold text-primary">{d.t}</h3>
                <p className="mt-2 text-sm text-muted-foreground">{d.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* USERS */}
      <section className="py-24">
        <div className="mx-auto grid max-w-7xl gap-12 px-6 lg:grid-cols-2">
          <div>
            <SectionLabel code="03" label="Who We Serve" />
            <h2 className="mt-4 text-4xl font-semibold tracking-tight md:text-5xl">
              Agencies and units operating at the edge.
            </h2>
            <ul className="mt-8 space-y-3">
              {segments.map((s) => (
                <li key={s} className="flex items-center gap-3 border-b border-border pb-3 text-foreground">
                  <span className="h-1.5 w-1.5 bg-primary" />
                  {s}
                </li>
              ))}
            </ul>
          </div>
          <div className="tech-corners border border-border bg-card/40 p-8">
            <Award className="h-7 w-7 text-primary" />
            <div className="mt-4 font-mono text-[10px] uppercase tracking-widest text-muted-foreground">Trusted By</div>
            <ul className="mt-6 space-y-4">
              {orgs.map((o) => (
                <li key={o} className="border-l-2 border-primary pl-4 text-xl font-semibold">
                  {o}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>
    </>
  );
}