import { Link } from "@tanstack/react-router";
import { Mail, Phone } from "lucide-react";

export function SiteFooter() {
  return (
    <footer className="border-t border-border bg-card/40">
      <div className="mx-auto grid max-w-7xl gap-10 px-6 py-14 md:grid-cols-4">
        <div className="md:col-span-2">
          <div className="flex items-center gap-2">
            <span className="flex h-7 w-7 items-center justify-center border border-primary bg-primary/10">
              <span className="block h-2 w-2 rounded-full bg-primary" />
            </span>
            <span className="font-mono text-sm tracking-[0.25em]">
              ACE<span className="text-primary">HAZMAT</span>
            </span>
          </div>
          <p className="mt-4 max-w-md text-sm text-muted-foreground">
            Electronic simulation systems for HAZMAT and CBRNe first responder
            training. Built by former CBRNe trainers, engineers, and hazardous
            materials specialists.
          </p>
          <div className="mt-6 hazard-stripes h-1 w-32" />
        </div>

        <div>
          <h4 className="font-mono text-xs uppercase tracking-widest text-primary">Navigate</h4>
          <ul className="mt-4 space-y-2 text-sm">
            <li><Link to="/platform" className="text-muted-foreground hover:text-foreground">Platform</Link></li>
            <li><Link to="/hardware" className="text-muted-foreground hover:text-foreground">Hardware</Link></li>
            <li><Link to="/about" className="text-muted-foreground hover:text-foreground">About</Link></li>
            <li><Link to="/contact" className="text-muted-foreground hover:text-foreground">Contact</Link></li>
          </ul>
        </div>

        <div>
          <h4 className="font-mono text-xs uppercase tracking-widest text-primary">Contact</h4>
          <ul className="mt-4 space-y-3 text-sm text-muted-foreground">
            <li className="flex items-center gap-2">
              <Mail className="h-4 w-4 text-primary" />
              <a href="mailto:info@trackerwave.com" className="hover:text-foreground">info@trackerwave.com</a>
            </li>
            <li className="flex items-center gap-2">
              <Phone className="h-4 w-4 text-primary" />
              <a href="tel:+917010044935" className="hover:text-foreground">+91 70100 44935</a>
            </li>
          </ul>
        </div>
      </div>
      <div className="border-t border-border">
        <div className="mx-auto flex max-w-7xl flex-col items-start justify-between gap-2 px-6 py-4 font-mono text-[10px] uppercase tracking-widest text-muted-foreground md:flex-row">
          <span>© {new Date().getFullYear()} AceHazmat // All Systems Operational</span>
          <span>Classified · Training Use Only</span>
        </div>
      </div>
    </footer>
  );
}