"use client";

import { useState } from "react";
import { Send, Instagram, Twitter, MessageSquare, Heart } from "lucide-react";
import Link from "next/link";

export default function Footer() {
  const [email, setEmail] = useState("");
  const [subscribed, setSubscribed] = useState(false);

  const handleSubscribe = (e: React.FormEvent) => {
    e.preventDefault();
    if (email) {
      setSubscribed(true);
      setEmail("");
      setTimeout(() => setSubscribed(false), 5000);
    }
  };

  return (
    <footer className="relative bg-[#060606] border-t border-white/5 pt-16 pb-8 overflow-hidden">
      {/* Ambient background light glows */}
      <div className="absolute top-0 left-1/4 -translate-y-1/2 w-80 h-80 rounded-full bg-accent-purple/10 blur-[80px] pointer-events-none" />
      <div className="absolute top-0 right-1/4 -translate-y-1/2 w-80 h-80 rounded-full bg-accent-pink/10 blur-[80px] pointer-events-none" />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
          {/* Brand Info */}
          <div className="space-y-4 col-span-1 md:col-span-1">
            <Link href="/" className="inline-block">
              <span className="text-2xl font-extrabold tracking-wider font-sora text-white">
                Lyts<span className="text-primary text-glow-yellow">Up</span>
              </span>
            </Link>
            <p className="text-white/60 text-sm leading-relaxed max-w-xs">
              The premier social currency app for Gen Z. Earn rewards for walking, playing, and living your best life.
            </p>
            <p className="text-primary font-semibold text-xs tracking-wider uppercase">
              Earn. Spend. Live More.
            </p>
          </div>

          {/* Site Navigation */}
          <div className="space-y-4">
            <h4 className="text-white font-bold text-sm tracking-wider uppercase font-sora">Navigate</h4>
            <ul className="space-y-2.5">
              <li>
                <a href="#earn" className="text-white/60 hover:text-primary transition-colors text-sm">Earn Points</a>
              </li>
              <li>
                <a href="#spend" className="text-white/60 hover:text-primary transition-colors text-sm">Redeem Rewards</a>
              </li>
              <li>
                <a href="#play" className="text-white/60 hover:text-primary transition-colors text-sm">Mini-Game</a>
              </li>
              <li>
                <a href="#leaderboard" className="text-white/60 hover:text-primary transition-colors text-sm">Leaderboard</a>
              </li>
            </ul>
          </div>

          {/* Corporate Links */}
          <div className="space-y-4">
            <h4 className="text-white font-bold text-sm tracking-wider uppercase font-sora">Partnerships</h4>
            <ul className="space-y-2.5">
              <li>
                <Link href="#" className="text-white/60 hover:text-primary transition-colors text-sm">Become a Partner</Link>
              </li>
              <li>
                <Link href="#" className="text-white/60 hover:text-primary transition-colors text-sm">Brands Portal</Link>
              </li>
              <li>
                <Link href="#" className="text-white/60 hover:text-primary transition-colors text-sm">API Integration</Link>
              </li>
              <li>
                <Link href="#" className="text-white/60 hover:text-primary transition-colors text-sm">Support Hub</Link>
              </li>
            </ul>
          </div>

          {/* Newsletter subscription */}
          <div className="space-y-4">
            <h4 className="text-white font-bold text-sm tracking-wider uppercase font-sora">Get Secret Drops</h4>
            <p className="text-white/60 text-xs">
              Subscribe to get notified about ultra-rare brand voucher drops.
            </p>
            <form onSubmit={handleSubscribe} className="relative flex">
              <input
                type="email"
                placeholder="your.email@gmail.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
                className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2.5 text-sm text-white focus:outline-none focus:border-primary/50 transition-colors pr-10"
              />
              <button
                type="submit"
                className="absolute right-1 top-1 bottom-1 bg-primary text-dark font-bold px-3.5 rounded-lg hover:bg-primary/95 transition-colors flex items-center justify-center cursor-pointer"
                aria-label="Subscribe"
              >
                <Send className="w-4 h-4" />
              </button>
            </form>
            {subscribed && (
              <p className="text-accent-lime text-xs font-semibold animate-pulse">
                You're in! Check your inbox for secret codes.
              </p>
            )}
          </div>
        </div>

        <hr className="border-white/5 mb-8" />

        {/* Socials & Copyright */}
        <div className="flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0">
          <div className="flex items-center space-x-2 text-xs text-white/40">
            <span>© {new Date().getFullYear()} LytsUp.com. All rights reserved.</span>
            <span className="hidden sm:inline">•</span>
            <span className="flex items-center">
              Made with <Heart className="w-3.5 h-3.5 text-accent-pink fill-current mx-1" /> for Gen Z
            </span>
          </div>

          {/* Social Icons */}
          <div className="flex space-x-4">
            <a
              href="#"
              className="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center text-white/60 hover:bg-accent-pink hover:text-white transition-all scale-95 hover:scale-100"
              aria-label="Instagram"
            >
              <Instagram className="w-4 h-4" />
            </a>
            <a
              href="#"
              className="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center text-white/60 hover:bg-accent-purple hover:text-white transition-all scale-95 hover:scale-100"
              aria-label="Twitter"
            >
              <Twitter className="w-4 h-4" />
            </a>
            <a
              href="#"
              className="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center text-white/60 hover:bg-primary hover:text-dark transition-all scale-95 hover:scale-100"
              aria-label="Discord"
            >
              <MessageSquare className="w-4 h-4" />
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}
