import { Link } from "@tanstack/react-router";
import { Eye, Mail, Shield, FileText, HelpCircle } from "lucide-react";

export function SiteFooter() {
  return (
    <footer className="w-full border-t border-border bg-navy text-navy-foreground">
      {/* Disclaimer Banner */}
      <div className="border-b border-white/10 bg-accent/10">
        <div className="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
          <div className="flex items-start gap-3">
            <Shield className="mt-0.5 h-5 w-5 shrink-0 text-accent" />
            <p className="text-sm leading-relaxed text-navy-foreground/90">
              <strong className="text-accent">Important Safety Notice:</strong>{" "}
              SafeSight is a driver assistance tool only. It does not prevent accidents and is not a substitute for attentive driving. Drivers remain fully responsible for vehicle operation and any accidents. SafeSight is not liable for any damages or injuries resulting from distracted driving.
            </p>
          </div>
        </div>
      </div>

      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
        <div className="grid gap-8 md:grid-cols-4">
          {/* Brand */}
          <div className="md:col-span-1">
            <Link to="/" className="flex items-center gap-2">
              <Eye className="h-6 w-6 text-accent" />
              <span className="text-lg font-bold">SafeSight</span>
            </Link>
            <p className="mt-3 text-sm text-navy-foreground/70">
              Keeping your eyes on the road. Real-time distraction alerts for safer driving.
            </p>
          </div>

          {/* Product */}
          <div>
            <h4 className="text-sm font-semibold uppercase tracking-wider text-navy-foreground/90">Product</h4>
            <ul className="mt-4 space-y-2">
              <li>
                <Link to="/how-it-works" className="text-sm text-navy-foreground/70 hover:text-accent transition-colors">
                  How It Works
                </Link>
              </li>
              <li>
                <Link to="/why-safesight" className="text-sm text-navy-foreground/70 hover:text-accent transition-colors">
                  Why SafeSight
                </Link>
              </li>
              <li>
                <Link to="/pricing" className="text-sm text-navy-foreground/70 hover:text-accent transition-colors">
                  Pricing
                </Link>
              </li>
              <li>
                <Link to="/download" className="text-sm text-navy-foreground/70 hover:text-accent transition-colors">
                  Download
                </Link>
              </li>
            </ul>
          </div>

          {/* Company */}
          <div>
            <h4 className="text-sm font-semibold uppercase tracking-wider text-navy-foreground/90">Company</h4>
            <ul className="mt-4 space-y-2">
              <li>
                <Link to="/about" className="text-sm text-navy-foreground/70 hover:text-accent transition-colors">
                  About Us
                </Link>
              </li>
              <li>
                <Link to="/contact" className="text-sm text-navy-foreground/70 hover:text-accent transition-colors">
                  Contact
                </Link>
              </li>
            </ul>
          </div>

          {/* Legal */}
          <div>
            <h4 className="text-sm font-semibold uppercase tracking-wider text-navy-foreground/90">Legal</h4>
            <ul className="mt-4 space-y-2">
              <li>
                <Link to="/privacy" className="text-sm text-navy-foreground/70 hover:text-accent transition-colors flex items-center gap-1.5">
                  <FileText className="h-3.5 w-3.5" />
                  Privacy Policy
                </Link>
              </li>
              <li>
                <Link to="/terms" className="text-sm text-navy-foreground/70 hover:text-accent transition-colors flex items-center gap-1.5">
                  <Shield className="h-3.5 w-3.5" />
                  Terms & Disclaimer
                </Link>
              </li>
            </ul>
            <div className="mt-4">
              <a
                href="https://instagram.com/safesightdriving"
                className="text-sm text-navy-foreground/70 hover:text-accent transition-colors flex items-center gap-1.5"
              >
                <Mail className="h-3.5 w-3.5" />
                @safesightdriving
              </a>
            </div>
          </div>
        </div>

        <div className="mt-10 border-t border-white/10 pt-6 text-center text-sm text-navy-foreground/50">
          © {new Date().getFullYear()} SafeSight. All rights reserved.
        </div>
      </div>
    </footer>
  );
}