"use client";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { useState } from "react";
import { useToast } from "@/hooks/use-toast";
import Link from "next/link";

const Footer = () => {
  const [email, setEmail] = useState("");
  const { toast } = useToast();

  const handleNewsletterSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    if (!email) {
      toast({
        title: "Please enter your email",
        variant: "destructive",
      });
      return;
    }

    // Validate email format
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
      toast({
        title: "Invalid email format",
        variant: "destructive",
      });
      return;
    }

    // Subscribe to newsletter logic would go here
    toast({
      title: "Thank you for subscribing!",
      description: "You've been added to our newsletter.",
    });

    setEmail("");
  };

  return (
    <footer className="bg-neutral-900 text-gray-300">
      <div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-12">
          {/* About */}
          <div>
            <h3 className="text-xl font-bold text-white mb-4">
              Badagry Museum
            </h3>
            <p className="text-sm leading-relaxed mb-6">
              Preserving Nigeria's historical heritage and educating visitors
              about the transatlantic slave trade and its impact on West African
              communities.
            </p>
            <div className="flex space-x-4 text-xl">
              <a href="#" className="hover:text-white transition-colors">
                <i className="fab fa-facebook"></i>
              </a>
              <a href="#" className="hover:text-white transition-colors">
                <i className="fab fa-twitter"></i>
              </a>
              <a href="#" className="hover:text-white transition-colors">
                <i className="fab fa-instagram"></i>
              </a>
              <a href="#" className="hover:text-white transition-colors">
                <i className="fab fa-youtube"></i>
              </a>
            </div>
          </div>

          {/* Quick Links */}
          <div>
            <h3 className="text-xl font-bold text-white mb-4">Quick Links</h3>
            <ul className="space-y-2 text-sm">
              {[
                {
                  uri: "/",
                  title: "Home",
                },
                {
                  uri: "gallery",
                  title: "Gallery",
                },
                {
                  uri: "booking",
                  title: "Book a Visit",
                },
                {
                  uri: "community",
                  title: "Community",
                },
                {
                  uri: "contact",
                  title: "Contact",
                },
              ].map((item) => (
                <li key={item.uri}>
                  <Link href={`/${item.uri}`}>
                    <span className="hover:text-white cursor-pointer transition-colors">
                      {item.title}
                    </span>
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Resources */}
          <div>
            <h3 className="text-xl font-bold text-white mb-4">Resources</h3>
            <ul className="space-y-2 text-sm">
              {[
                { label: "Educational Materials", path: "/history" },
                { label: "Research Papers", path: "/history" },
                { label: "Historical Archives", path: "/gallery" },
                { label: "Volunteer Opportunities", path: "/contact" },
                { label: "Support the Museum", path: "/contact" },
              ].map((item) => (
                <li key={item.label}>
                  <Link href={item.path}>
                    <span className="hover:text-white cursor-pointer transition-colors">
                      {item.label}
                    </span>
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Newsletter */}
          <div>
            <h3 className="text-xl font-bold text-white mb-4">Newsletter</h3>
            <p className="text-sm mb-4">
              Subscribe for updates on exhibits, events, and programs.
            </p>
            <form className="space-y-3" onSubmit={handleNewsletterSubmit}>
              <Input
                type="email"
                placeholder="your.email@example.com"
                className="w-full rounded-md border border-gray-600 bg-gray-300 px-3 py-2 text-sm text-gray-950 placeholder-gray-400 focus:ring-2 focus:ring-primary"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
              <Button
                type="submit"
                className="w-full bg-primary hover:bg-primary-dark transition-all text-white font-medium py-2 rounded-md"
              >
                Subscribe
              </Button>
            </form>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="mt-16 border-t border-gray-700 pt-6 flex flex-col md:flex-row justify-between items-center text-sm">
          <p className="mb-4 md:mb-0">
            &copy; {new Date().getFullYear()} Badagry Museum. All rights
            reserved.
          </p>
          <div className="flex space-x-6">
            {[
              { label: "Privacy Policy", href: "/privacy" },
              { label: "Terms of Service", href: "/terms" },
              { label: "Accessibility", href: "/accessibility" },
            ].map((link) => (
              <Link key={link.label} href={link.href}>
                <span className="hover:text-white cursor-pointer transition-colors">
                  {link.label}
                </span>
              </Link>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;
