'use client';

import Link from 'next/link';
import { WebsiteData } from '@/lib/hbfc-data';
import { Instagram, Facebook, Mail, Phone, MapPin, Heart, ArrowUp, Shield } from 'lucide-react';
import { motion } from 'motion/react';

interface FooterProps {
  data: WebsiteData;
  onNavigate?: (sectionId: string) => void;
  onOpenWalkathonModal?: () => void;
}

export function Footer({
  data,
  onNavigate,
  onOpenWalkathonModal,
}: FooterProps) {
  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const navLinks = [
    { href: '/home', label: 'Home' },
    { href: '/about', label: 'About' },
    { href: '/events', label: 'Events' },
    { href: '/membership', label: 'Membership' },
    { href: '/gallery', label: 'Gallery' },
    { href: '/contact', label: 'Contact' },
  ];

  return (
    <footer className="bg-black text-neutral-400 border-t border-neutral-900 pt-16 pb-12 relative overflow-hidden">
      {/* Subtle background glow accents */}
      <div className="absolute top-0 left-1/4 w-96 h-96 bg-emerald-950/20 rounded-full blur-3xl pointer-events-none" />
      <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-amber-950/15 rounded-full blur-3xl pointer-events-none" />

      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-10 mb-12">
          {/* Column 1: Brand & Identity */}
          <div className="lg:col-span-4 space-y-4">
            <div className="flex items-center gap-3">
              <div className="w-11 h-11 rounded-xl bg-black border border-amber-400/60 overflow-hidden flex items-center justify-center shadow-lg shadow-amber-950/20 shrink-0">
                <img
                  src="/hbfc-logo.jpg"
                  alt="Healthy Billionaires Official Logo"
                  className="w-full h-full object-contain p-0.5"
                  referrerPolicy="no-referrer"
                />
              </div>
              <div>
                <span className="text-base font-black text-white uppercase tracking-tight block">
                  HEALTHY BILLIONAIRES
                </span>
                <span className="text-xs text-emerald-400 font-bold tracking-wide">
                  FITNESS CLUB
                </span>
              </div>
            </div>

            <p className="text-xs text-neutral-400 leading-relaxed max-w-sm">
              Building healthier people, stronger communities and meaningful connections through fitness, adventure and impact. Founded in 2019 in Calabar, Cross River State, Nigeria.
            </p>

            <p className="text-xs font-bold uppercase tracking-widest text-amber-400">
              Motto: &ldquo;{data.brand.motto}&rdquo;
            </p>

            {/* Social Icons */}
            <div className="flex items-center gap-3 pt-2">
              <motion.a
                whileHover={{ scale: 1.08, y: -2 }}
                whileTap={{ scale: 0.95 }}
                href={data.brand.instagram}
                target="_blank"
                rel="noopener noreferrer"
                className="w-9 h-9 rounded-lg bg-neutral-900 border border-neutral-800 hover:border-amber-400/70 flex items-center justify-center text-neutral-300 hover:text-white transition-all shadow-xs"
                aria-label="Instagram"
              >
                <Instagram className="w-4 h-4 text-pink-400" />
              </motion.a>

              <motion.a
                whileHover={{ scale: 1.08, y: -2 }}
                whileTap={{ scale: 0.95 }}
                href={data.brand.facebook}
                target="_blank"
                rel="noopener noreferrer"
                className="w-9 h-9 rounded-lg bg-neutral-900 border border-neutral-800 hover:border-amber-400/70 flex items-center justify-center text-neutral-300 hover:text-white transition-all shadow-xs"
                aria-label="Facebook"
              >
                <Facebook className="w-4 h-4 text-blue-400" />
              </motion.a>
            </div>
          </div>

          {/* Column 2: Quick Links */}
          <div className="lg:col-span-3 space-y-3">
            <h4 className="text-xs font-bold uppercase tracking-widest text-white">
              Navigation
            </h4>
            <ul className="space-y-2 text-xs">
              {navLinks.map((item) => (
                <li key={item.href}>
                  <Link
                    href={item.href}
                    className="text-neutral-400 hover:text-amber-400 transition-colors uppercase tracking-wider text-[11px] font-semibold text-left inline-block"
                  >
                    {item.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Column 3: Membership & Events */}
          <div className="lg:col-span-2 space-y-3">
            <h4 className="text-xs font-bold uppercase tracking-widest text-white">
              Participation
            </h4>
            <ul className="space-y-2 text-xs">
              <li>
                <Link
                  href="/events"
                  className="text-amber-400/90 hover:text-amber-300 transition-colors font-semibold"
                >
                  Walkathon Highlights
                </Link>
              </li>
              <li>
                <Link
                  href="/events"
                  className="text-neutral-400 hover:text-white transition-colors"
                >
                  OMR Expedition Details
                </Link>
              </li>
              <li>
                <Link
                  href="/membership"
                  className="text-neutral-400 hover:text-white transition-colors"
                >
                  Join & Volunteer
                </Link>
              </li>
              <li>
                <Link
                  href="/privacy"
                  className="text-neutral-400 hover:text-white transition-colors"
                >
                  Privacy Policy
                </Link>
              </li>
              <li>
                <Link
                  href="/terms"
                  className="text-neutral-400 hover:text-white transition-colors"
                >
                  Terms & Waiver
                </Link>
              </li>
              <li>
                <Link
                  href="/admin"
                  className="text-neutral-500 hover:text-amber-400 transition-colors flex items-center gap-1.5 mt-3 pt-2 border-t border-neutral-900"
                >
                  <Shield className="w-3.5 h-3.5 text-amber-500" />
                  <span>Admin Control Console</span>
                </Link>
              </li>
            </ul>
          </div>

          {/* Column 4: Contact Information */}
          <div className="lg:col-span-3 space-y-3 text-xs">
            <h4 className="text-xs font-bold uppercase tracking-widest text-white">
              Headquarters
            </h4>
            <p className="flex items-start gap-2 text-neutral-400">
              <MapPin className="w-4 h-4 text-emerald-400 shrink-0 mt-0.5" />
              <span>{data.brand.location}</span>
            </p>
            <p className="flex items-center gap-2 text-neutral-400">
              <Phone className="w-4 h-4 text-emerald-400 shrink-0" />
              <a href={`tel:${data.brand.phone.replace(/\s+/g, '')}`} className="hover:text-white transition-colors">
                {data.brand.phone}
              </a>
            </p>
            <p className="flex items-center gap-2 text-neutral-400">
              <Mail className="w-4 h-4 text-emerald-400 shrink-0" />
              <a href={`mailto:${data.brand.email}`} className="hover:text-white truncate transition-colors">
                {data.brand.email}
              </a>
            </p>
          </div>
        </div>

        {/* Bottom Bar - strictly one line horizontal */}
        <div className="pt-8 border-t border-neutral-900 flex flex-row items-center justify-between text-xs text-neutral-400 gap-3 sm:gap-6 whitespace-nowrap overflow-x-auto sm:overflow-visible scrollbar-none">
          <p className="text-neutral-400 text-left shrink-0 truncate text-[11px] sm:text-xs">
            &copy; {new Date().getFullYear()} <span className="text-neutral-200 font-semibold">Healthy Billionaires (HBFC)</span>. All rights reserved.
          </p>

          <div className="flex flex-row items-center gap-2 sm:gap-3 shrink-0">
            <div className="inline-flex items-center gap-1.5 sm:gap-2 px-2.5 sm:px-3 py-1 rounded-full bg-neutral-900/90 border border-neutral-800 text-[10px] sm:text-[11px] font-medium text-amber-400 shadow-xs shrink-0">
              <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
              <span>Health is Wealth</span>
              <span className="text-neutral-600 hidden sm:inline">•</span>
              <span className="text-neutral-400 hidden sm:inline">Est. 2019</span>
            </div>

            <motion.button
              whileHover={{ scale: 1.05, y: -2 }}
              whileTap={{ scale: 0.95 }}
              onClick={scrollToTop}
              className="px-2.5 sm:px-3 py-1 rounded-xl bg-neutral-900 hover:bg-neutral-800 text-neutral-300 hover:text-white border border-neutral-800 hover:border-amber-400/40 transition-all shadow-sm flex items-center gap-1.5 cursor-pointer group shrink-0"
              title="Back to top"
              aria-label="Back to top"
            >
              <span className="text-[10px] sm:text-[11px] font-bold uppercase tracking-wider text-neutral-400 group-hover:text-amber-300 transition-colors">Top</span>
              <ArrowUp className="w-3.5 h-3.5 text-neutral-400 group-hover:text-amber-300 group-hover:-translate-y-0.5 transition-transform" />
            </motion.button>
          </div>
        </div>
      </div>
    </footer>
  );
}

export default Footer;