import { Link } from "@tanstack/react-router";
import { Mail, MapPin, Phone } from "lucide-react";
import { org } from "@/lib/site";
import { Logo } from "./Logo";
import { Newsletter } from "./Newsletter";

export function Footer() {
  return (
    <footer className="bg-gradient-deep text-primary-foreground">
      <div className="container-page grid gap-12 py-16 md:grid-cols-2 lg:grid-cols-4">
        <div className="space-y-4">
          <Logo light />
          <p className="text-sm text-primary-foreground/70">
            Helping vulnerable women and children build safe, healthy and hopeful futures.
          </p>
          <div className="flex flex-wrap gap-2">
            {org.socials.map((s) => (
              <a key={s.label} href={s.href} target="_blank" rel="noreferrer" className="rounded-full border border-primary-foreground/20 px-3 py-1 text-xs hover:bg-primary-foreground/10">
                {s.label}
              </a>
            ))}
          </div>
        </div>
        <div>
          <h3 className="mb-4 font-display text-lg text-gold">Explore</h3>
          <ul className="space-y-2 text-sm text-primary-foreground/75">
            <li><Link to="/about" className="hover:text-gold">About us</Link></li>
            <li><Link to="/programs" className="hover:text-gold">Programs</Link></li>
            <li><Link to="/campaigns" className="hover:text-gold">Campaigns</Link></li>
            <li><Link to="/impact" className="hover:text-gold">Latest impact</Link></li>
            <li><Link to="/transparency" className="hover:text-gold">Financial reports</Link></li>
          </ul>
        </div>
        <div>
          <h3 className="mb-4 font-display text-lg text-gold">Contact</h3>
          <ul className="space-y-3 text-sm text-primary-foreground/75">
            <li className="flex gap-2"><Mail className="size-4 shrink-0 text-gold" /> {org.email}</li>
            <li className="flex gap-2"><Phone className="size-4 shrink-0 text-gold" /> {org.phone}</li>
            <li className="flex gap-2"><MapPin className="size-4 shrink-0 text-gold" /> {org.address}</li>
          </ul>
        </div>
        <div>
          <h3 className="mb-4 font-display text-lg text-gold">Stay in touch</h3>
          <p className="mb-3 text-sm text-primary-foreground/70">Stories from the field, once a month.</p>
          <Newsletter dark />
        </div>
      </div>
      <div className="border-t border-primary-foreground/10">
        <div className="container-page flex flex-col gap-3 py-6 text-xs text-primary-foreground/60 md:flex-row md:items-center md:justify-between">
          <p>© {new Date().getFullYear()} {org.name}. All rights reserved.</p>
          <div className="flex gap-5">
            <Link to="/privacy" className="hover:text-gold">Privacy policy</Link>
            <Link to="/donation-policy" className="hover:text-gold">Donation policy</Link>
            <Link to="/terms" className="hover:text-gold">Terms of service</Link>
          </div>
        </div>
      </div>
    </footer>
  );
}