import { Link } from "@tanstack/react-router";
import { Mail, Phone, MapPin, Facebook, Twitter, Instagram, Linkedin, Youtube, MessageCircle } from "lucide-react";

// TikTok icon (not in lucide-react)
function TikTokIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.89-2.89 2.89 2.89 0 0 1 2.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 0 0-.79-.05 6.34 6.34 0 0 0-6.34 6.34 6.34 6.34 0 0 0 6.34 6.34 6.34 6.34 0 0 0 6.33-6.34V8.69a8.16 8.16 0 0 0 4.77 1.52V6.76a4.85 4.85 0 0 1-1-.07z"/>
    </svg>
  );
}

// Threads icon
function ThreadsIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.689-2.046 1.417-1.513 1.364-3.368 1.211-4.982-.016-.173-.03-.346-.043-.516-.017-.176-.033-.353-.047-.529C18.574 14.96 18 15.3 17.347 15.5c-.637.195-1.335.27-2.09.22-1.755-.11-3.118-.657-4.054-1.627-.9-.934-1.319-2.21-1.211-3.638.11-1.44.701-2.626 1.71-3.424.97-.765 2.269-1.14 3.855-1.114 1.245.02 2.254.258 3.043.714.765.443 1.396 1.097 1.856 1.96.158.3.296.614.412.938l1.964-.547c-.17-.56-.392-1.084-.67-1.567-.617-1.1-1.497-1.98-2.614-2.614-1.105-.628-2.455-.974-4.02-1.002-2.015-.033-3.7.47-5.002 1.493-1.345 1.055-2.132 2.575-2.273 4.392-.14 1.807.369 3.39 1.47 4.567 1.14 1.218 2.846 1.927 4.952 2.058.564.036 1.085-.017 1.543-.156.508-.155.963-.42 1.35-.8.01.117.02.235.03.354.147 1.555.36 4.183-1.585 6.28-1.485 1.59-3.73 2.422-6.867 2.443z"/>
    </svg>
  );
}


const socials = [
  { label: "Facebook", href: "https://www.facebook.com/share/14YrXpzokyn/", Icon: Facebook },
  { label: "Instagram", href: "https://www.instagram.com/downsyndromeghana", Icon: Instagram },
  { label: "Threads", href: "https://www.threads.net/@downsyndromeghana", Icon: ThreadsIcon },
  { label: "TikTok", href: "https://www.tiktok.com/@downsyndromeghana", Icon: TikTokIcon },
  { label: "X (Twitter)", href: "https://x.com/downsyndromeGH", Icon: Twitter },
  { label: "LinkedIn", href: "https://www.linkedin.com/company/down-syndrome-ghana/", Icon: Linkedin },
  { label: "YouTube", href: "https://youtube.com/@downsyndromeghana", Icon: Youtube },
  { label: "WhatsApp", href: "https://wa.me/233207405343", Icon: MessageCircle },
];

export function SiteFooter() {
  return (
    <footer className="bg-primary-dark text-primary-foreground mt-24">
      <div className="max-w-7xl mx-auto px-6 py-16 grid gap-10 lg:grid-cols-4">
        <div>
          <div className="flex items-center gap-3 mb-4">
            <div className="h-11 w-11 rounded-full bg-accent text-accent-foreground flex items-center justify-center font-bold text-xs">DSAG</div>
            <div>
              <div className="font-display font-bold">Down Syndrome</div>
              <div className="text-xs opacity-80">Association of Ghana</div>
            </div>
          </div>
          <p className="text-sm opacity-85 leading-relaxed">
            Raising awareness, advocating for inclusion, and supporting individuals with Down syndrome
            and their families across Ghana since 2020.
          </p>
          <div className="flex flex-wrap gap-2 mt-5">
            {socials.map(({ label, href, Icon }) => (
              <a
                key={label}
                href={href}
                target="_blank"
                rel="noopener noreferrer"
                aria-label={label}
                className="h-9 w-9 rounded-full bg-white/10 hover:bg-accent hover:text-accent-foreground flex items-center justify-center transition"
              >
                <Icon className="h-4 w-4" />
              </a>
            ))}
          </div>
        </div>
        <div>
          <h4 className="font-display font-bold mb-4">Who We Are</h4>
          <ul className="space-y-2 text-sm opacity-90">
            <li><Link to="/about" className="hover:text-accent">About Us</Link></li>
            <li><Link to="/causes" className="hover:text-accent">Our Causes</Link></li>
            <li><Link to="/about-down-syndrome" className="hover:text-accent">About Down Syndrome</Link></li>
            <li><Link to="/about-down-syndrome" className="hover:text-accent">FAQs</Link></li>
          </ul>
        </div>
        <div>
          <h4 className="font-display font-bold mb-4">What We Do</h4>
          <ul className="space-y-2 text-sm opacity-90">
            <li><Link to="/initiatives" className="hover:text-accent">Initiatives</Link></li>
            <li><Link to="/projects" className="hover:text-accent">Projects</Link></li>
            <li><Link to="/impact" className="hover:text-accent">Our Impact</Link></li>
            <li><Link to="/events" className="hover:text-accent">Events</Link></li>
            <li><Link to="/news" className="hover:text-accent">Latest News</Link></li>
            <li><Link to="/resources" className="hover:text-accent">Resources</Link></li>
          </ul>
        </div>
        <div>
          <h4 className="font-display font-bold mb-4">Get In Touch</h4>
          <ul className="space-y-3 text-sm opacity-90">
            <li className="flex items-start gap-2"><MapPin className="h-4 w-4 mt-0.5 shrink-0" />Accra, Ghana</li>
            <li className="flex items-start gap-2"><Phone className="h-4 w-4 mt-0.5 shrink-0" />+233 (0) 20 740 5343</li>
            <li className="flex items-start gap-2"><MessageCircle className="h-4 w-4 mt-0.5 shrink-0" /><a href="https://wa.me/233207405343" target="_blank" rel="noopener noreferrer" className="hover:text-accent">WhatsApp us</a></li>
            <li className="flex items-start gap-2"><Mail className="h-4 w-4 mt-0.5 shrink-0" />info@downsyndromeghana.org</li>
            <li className="pt-2 flex gap-3">
              <Link to="/volunteer" className="text-accent font-semibold hover:underline">Volunteer</Link>
              <Link to="/donate" className="text-accent font-semibold hover:underline">Donate</Link>
            </li>
          </ul>
        </div>
      </div>
      <div className="border-t border-white/10">
        <div className="max-w-7xl mx-auto px-6 py-5 text-xs flex flex-col sm:flex-row justify-between gap-2 opacity-80">
          <span>© {new Date().getFullYear()} Down Syndrome Association of Ghana. All rights reserved.</span>
          <span>Building a more inclusive Ghana — one child at a time.</span>
        </div>
      </div>
    </footer>
  );
}
