import { Link } from "@tanstack/react-router";
import { Facebook, Instagram, Linkedin, Youtube, Mail, Phone, MapPin } from "lucide-react";
import logo from "@/assets/classic-paints-logo.png";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { toast } from "sonner";

const links = [
  { to: "/about", l: "About" },
  { to: "/products", l: "Products" },
  { to: "/projects", l: "Projects" },
  { to: "/dealers", l: "Dealer Network" },
  { to: "/gallery", l: "Color Gallery" },
  { to: "/contact", l: "Contact" },
];

export function Footer() {
  return (
    <footer className="section-dark relative border-t border-border overflow-hidden">
      <div className="absolute inset-0 bg-gradient-hero opacity-30 pointer-events-none" />
      <div className="container-regent relative py-20 grid gap-12 lg:grid-cols-12">
        <div className="lg:col-span-5">
          <div className="flex items-center">
            <img
              src={logo}
              alt="Classic Paints — It's an Art"
              className="h-12 w-auto object-contain"
            />
          </div>
          <div className="eyebrow mt-4">Classic Chemical Industries Ltd.</div>
          <p className="mt-6 text-sm text-muted-foreground leading-relaxed extralight max-w-md">
            Established in 2021 by Jamuna Spacetech Joint Venture Ltd., Classic Paints
            engineers premium decorative and industrial coatings for a more colorful,
            protected Bangladesh.
          </p>
          <div className="mt-8 space-y-3 text-sm extralight">
            <div className="flex items-start gap-3"><MapPin className="h-4 w-4 mt-0.5 text-brand-red shrink-0" strokeWidth={1.25} /><span>Rupayan Golden Age, Gulshan Avenue, Dhaka-1212, Bangladesh</span></div>
            <div className="flex items-center gap-3"><Phone className="h-4 w-4 text-brand-red shrink-0" strokeWidth={1.25} /><span>+880 1700 000 000</span></div>
            <div className="flex items-center gap-3"><Mail className="h-4 w-4 text-brand-red shrink-0" strokeWidth={1.25} /><span>hello@classicpaints.com.bd</span></div>
          </div>
        </div>

        <div className="lg:col-span-3">
          <div className="eyebrow mb-6">Quick Links</div>
          <ul className="space-y-3 text-sm extralight">
            {links.map((l) => (
              <li key={l.to}><Link to={l.to} className="hover:text-brand-red transition-colors">{l.l}</Link></li>
            ))}
          </ul>
        </div>

        <div className="lg:col-span-4">
          <div className="eyebrow mb-6">Stay in the loop</div>
          <p className="text-sm text-muted-foreground extralight mb-4 leading-relaxed">Color trends, product launches and dealer news.</p>
          <form
            onSubmit={(e) => { e.preventDefault(); toast.success("Subscribed!"); (e.currentTarget as HTMLFormElement).reset(); }}
            className="flex gap-2"
          >
            <Input type="email" required placeholder="you@email.com" className="bg-card border-border" />
            <Button type="submit" className="bg-brand-red hover:bg-brand-red/90 text-white border-0 rounded-none">Join</Button>
          </form>

          <div className="mt-8 flex gap-3">
            {[
              { icon: Facebook, label: "Facebook" },
              { icon: Instagram, label: "Instagram" },
              { icon: Linkedin, label: "LinkedIn" },
              { icon: Youtube, label: "YouTube" },
            ].map(({ icon: Icon, label }) => (
              <a key={label} href="#" aria-label={label} className="h-10 w-10 grid place-items-center border border-border hover:border-brand-red hover:text-brand-red transition-colors">
                <Icon className="h-4 w-4" strokeWidth={1.25} />
              </a>
            ))}
          </div>
        </div>
      </div>

      <div className="relative border-t border-border">
        <div className="container-regent py-6 text-[11px] uppercase tracking-wider-x text-muted-foreground flex flex-col md:flex-row gap-2 justify-between">
          <span>© {new Date().getFullYear()} Classic Chemical Industries Limited</span>
          <span>A Jamuna Spacetech Joint Venture Ltd. company</span>
          <span>
            Website designed &amp; developed by{" "}
            <a href="https://ngital.com" target="_blank" rel="noopener noreferrer" className="hover:text-brand-red transition-colors">
              Ngital
            </a>
          </span>
        </div>
      </div>
    </footer>
  );
}