"use client";

import Link from "next/link";
import { useEffect, useState } from "react";

export default function Footer() {
  const [socials, setSocials] = useState<any>({});

  useEffect(() => {
    fetch("/api/public/app-setup")
      .then((r) => r.json())
      .then((d) => setSocials(d?.setup?.socials || {}))
      .catch(() => setSocials({}));
  }, []);

  return (
    <footer className="bg-gradient-to-b from-[#0b1426] to-[#050a15] text-white mt-20">
      <div className="max-w-7xl mx-auto px-6 py-16 grid md:grid-cols-4 gap-12">
        <div className="space-y-4 group">
          <div className="flex items-center gap-3 hover-lift">
            <div className="h-11 w-11 rounded-xl bg-primary text-white flex items-center justify-center text-lg font-bold shadow-glow group-hover:shadow-lg transition-all duration-300">🏛️</div>
            <div>
              <div className="font-bold text-lg">Estate Pro</div>
              <div className="text-xs text-white/60 font-semibold">Education Hub</div>
            </div>
          </div>
          <p className="text-sm text-white/80 leading-relaxed font-medium">
            Empowering families with expert knowledge to protect their legacy and secure their financial future for generations.
          </p>
        </div>

        <div className="space-y-4">
          <h3 className="font-bold text-lg flex items-center gap-2">🔗 Quick Links</h3>
          <div className="space-y-2.5 text-white/80">
            <Link href="/webinars" className="block hover:text-white hover:translate-x-1 transition-all duration-300 font-medium">→ All Webinars</Link>
            <Link href="/resources" className="block hover:text-white hover:translate-x-1 transition-all duration-300 font-medium">→ Free Resources</Link>
            <Link href="/pricing" className="block hover:text-white hover:translate-x-1 transition-all duration-300 font-medium">→ Pricing</Link>
            <Link href="/about" className="block hover:text-white hover:translate-x-1 transition-all duration-300 font-medium">→ About Us</Link>
          </div>
        </div>

        <div className="space-y-4">
          <h3 className="font-bold text-lg flex items-center gap-2">🤝 Support</h3>
          <div className="space-y-2.5 text-white/80">
            <Link href="/help" className="block hover:text-white hover:translate-x-1 transition-all duration-300 font-medium">→ Help Center</Link>
            <Link href="/contact" className="block hover:text-white hover:translate-x-1 transition-all duration-300 font-medium">→ Contact Us</Link>
            <Link href="/privacy" className="block hover:text-white hover:translate-x-1 transition-all duration-300 font-medium">→ Privacy Policy</Link>
            <Link href="/terms" className="block hover:text-white hover:translate-x-1 transition-all duration-300 font-medium">→ Terms of Service</Link>
          </div>
        </div>

        <div className="space-y-4">
          <h3 className="font-bold text-lg flex items-center gap-2">📧 Connect</h3>
          <div className="space-y-4">
            <a href="mailto:info@estateplanningedu.com" className="block text-white/80 hover:text-white hover:translate-x-1 transition-all duration-300 font-medium">📧 info@estateplanningedu.com</a>
            <div className="flex gap-4 text-2xl">
              {socials.twitter && <a href={socials.twitter} className="hover:scale-125 hover:text-blue-400 transition-all duration-300">𝕏</a>}
              {socials.linkedin && <a href={socials.linkedin} className="hover:scale-125 hover:text-blue-300 transition-all duration-300">🔗</a>}
              {socials.youtube && <a href={socials.youtube} className="hover:scale-125 hover:text-red-400 transition-all duration-300">▶</a>}
              {socials.instagram && <a href={socials.instagram} className="hover:scale-125 hover:text-pink-400 transition-all duration-300">📸</a>}
            </div>
          </div>
        </div>
      </div>

      <div className="border-t border-white/10 py-6 px-6 text-center space-y-2">
        <p className="text-xs text-white/60 font-medium">© {new Date().getFullYear()} Estate Planning Education Center. All rights reserved. 🛡️</p>
        <p className="text-xs text-white/50">Helping families build wealth and protect their legacy with confidence</p>
      </div>
    </footer>
  );
}