import React from 'react';
import { MessagesSquare, Twitter, Youtube, ArrowUp, MessageCircle } from 'lucide-react';
import { YOUR_DISCORD_URL, YOUR_WHATSAPP_URL, YOUR_X_URL, YOUR_YOUTUBE_URL } from '../config';
import coinImg from '../assets/images/bm_connect_coin_1787085516443.jpg';

export const Footer: React.FC = () => {
  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const navLinks = [
    { name: 'Home', href: '#' },
    { name: 'How to Buy', href: '#how-to-buy' },
    { name: 'Community', href: '#community' },
    { name: 'Token', href: '#token' },
  ];

  return (
    <footer id="footer" className="bg-slate-100 dark:bg-[#0a0c14] border-t border-slate-200 dark:border-white/10 pt-16 pb-12 relative transition-colors duration-300">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* Top Footer Row */}
        <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-8 pb-12 border-b border-slate-200 dark:border-white/5">
          
          {/* Brand Info */}
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 rounded-full p-[1.5px] bg-gradient-to-tr from-[#FF8C32] to-[#00D7FF] shrink-0 shadow-[0_0_15px_rgba(255,140,50,0.3)]">
              <div className="w-full h-full bg-white dark:bg-[#0a0c14] rounded-full overflow-hidden flex items-center justify-center">
                <img src={coinImg} alt="BM Alpha" className="w-full h-full object-cover" />
              </div>
            </div>
            <div>
              <div className="flex items-center gap-2">
                <span className="font-display font-black text-xl text-slate-900 dark:text-white">BM Alpha</span>
                <span className="text-xs font-mono font-bold text-[#FF8C32] px-2 py-0.5 rounded-full bg-[#FF8C32]/15 border border-[#FF8C32]/30">
                  $BMALPHA
                </span>
              </div>
              <p className="text-xs text-slate-600 dark:text-gray-400 mt-0.5 font-medium">
                The community-powered meme coin from <span className="text-slate-900 dark:text-gray-200 font-semibold">BirthdayMessaging</span>
              </p>
            </div>
          </div>

          {/* Quick Nav Links */}
          <nav className="flex flex-wrap items-center gap-6 sm:gap-8">
            {navLinks.map((link) => (
              <a
                key={link.name}
                href={link.href}
                className="text-xs sm:text-sm font-semibold text-slate-600 dark:text-gray-400 hover:text-slate-900 dark:hover:text-white transition-colors"
              >
                {link.name}
              </a>
            ))}
          </nav>

          {/* Social Icons & Back to Top */}
          <div className="flex items-center gap-3">
            <a
              id="footer-whatsapp"
              href={YOUR_WHATSAPP_URL}
              target="_blank"
              rel="noopener noreferrer"
              aria-label="WhatsApp Channel"
              className="w-10 h-10 rounded-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 hover:border-emerald-500 hover:bg-emerald-500/10 text-slate-600 dark:text-gray-300 hover:text-emerald-500 dark:hover:text-emerald-400 flex items-center justify-center transition-all shadow-sm"
            >
              <MessageCircle className="w-4 h-4" />
            </a>
            <a
              id="footer-discord"
              href={YOUR_DISCORD_URL}
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Discord Server"
              className="w-10 h-10 rounded-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 hover:border-[#5865F2] hover:bg-[#5865F2]/10 text-slate-600 dark:text-gray-300 hover:text-[#5865F2] flex items-center justify-center transition-all shadow-sm"
            >
              <MessagesSquare className="w-4 h-4" />
            </a>
            <a
              id="footer-x"
              href={YOUR_X_URL}
              target="_blank"
              rel="noopener noreferrer"
              aria-label="X / Twitter"
              className="w-10 h-10 rounded-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 hover:border-[#FF8C32] hover:bg-[#FF8C32]/10 text-slate-600 dark:text-gray-300 hover:text-[#FF8C32] flex items-center justify-center transition-all shadow-sm"
            >
              <Twitter className="w-4 h-4" />
            </a>
            <a
              id="footer-youtube"
              href={YOUR_YOUTUBE_URL}
              target="_blank"
              rel="noopener noreferrer"
              aria-label="YouTube"
              className="w-10 h-10 rounded-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 hover:border-red-500 hover:bg-red-500/10 text-slate-600 dark:text-gray-300 hover:text-red-500 flex items-center justify-center transition-all shadow-sm"
            >
              <Youtube className="w-4 h-4" />
            </a>
            <button
              id="back-to-top-btn"
              onClick={scrollToTop}
              aria-label="Back to top"
              className="w-10 h-10 rounded-full bg-white dark:bg-white/10 border border-slate-200 dark:border-white/15 hover:bg-[#FF8C32] hover:border-[#FF8C32] text-slate-700 dark:text-gray-300 hover:text-black flex items-center justify-center transition-all ml-2 cursor-pointer shadow-sm"
            >
              <ArrowUp className="w-4 h-4" />
            </button>
          </div>

        </div>

        {/* Disclaimer & Copyright */}
        <div className="mt-8 flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
          <p
            id="footer-disclaimer"
            className="text-[11px] sm:text-xs text-slate-500 dark:text-gray-400 max-w-3xl leading-relaxed font-normal"
          >
            <strong className="text-slate-700 dark:text-gray-300">Disclaimer: </strong>
            BM Alpha is a community meme coin. Nothing on this website constitutes financial or investment advice. Always do your own research and verify official links before interacting with any token or wallet.
          </p>

          <p className="text-[11px] sm:text-xs text-slate-500 dark:text-gray-400 whitespace-nowrap font-medium">
            © 2026 BirthdayMessaging. All rights reserved.
          </p>
        </div>

      </div>
    </footer>
  );
};
