import { Link } from "react-router";
import { Zap, MessageCircle, Send, Youtube, Instagram, Mail, ExternalLink } from "lucide-react";
import { useState } from "react";
import { trpc } from "@/providers/trpc";
import { toast } from "sonner";

export function Footer() {
  const [email, setEmail] = useState("");
  const subscribe = trpc.subscriber.subscribe.useMutation({
    onSuccess: (data) => {
      toast.success(data.message);
      setEmail("");
    },
    onError: (err) => toast.error(err.message),
  });

  const handleSubscribe = (e: React.FormEvent) => {
    e.preventDefault();
    if (!email) return;
    subscribe.mutate({ email });
  };

  const socialLinks = [
    { icon: MessageCircle, label: "WhatsApp Group", url: "https://chat.whatsapp.com/CAEgMqOlfcYLxv8ElniW0h" },
    { icon: Send, label: "Telegram", url: "https://t.me/teamhydrashopC" },
    { icon: MessageCircle, label: "WhatsApp Channel", url: "https://whatsapp.com/channel/0029Vb7dW7S6GcGJbE4TcC2o" },
    { icon: Youtube, label: "YouTube", url: "https://www.youtube.com/@teamhydrashops" },
    { icon: Instagram, label: "Instagram", url: "https://www.instagram.com/teamhydrashop/" },
  ];

  const productLinks = [
    "AI Tools", "Design Tools", "Streaming", "Productivity",
    "Security & VPN", "Developer Tools", "Microsoft Office",
  ];

  return (
    <footer className="pt-32 pb-10 px-4">
      <div className="max-w-6xl mx-auto">
        {/* CTA Section */}
        <div className="text-center mb-20">
          <h2 className="text-4xl md:text-6xl font-bold mb-6">
            Ready to <span className="text-gradient">upgrade?</span>
          </h2>
          <p className="text-slate-400 max-w-xl mx-auto mb-8">
            Join 10,000+ customers who trust Subscription Hero for their premium digital subscriptions.
          </p>
          <Link to="/products" className="btn-primary text-lg px-10 py-4 inline-flex items-center gap-2">
            <Zap className="w-5 h-5" />
            Start Saving Today
          </Link>
        </div>

        {/* Newsletter */}
        <div className="glass-card p-8 mb-16 max-w-xl mx-auto">
          <div className="flex items-center gap-2 mb-4 justify-center">
            <Mail className="w-5 h-5 text-[#f97316]" />
            <h3 className="font-semibold">Subscribe for Exclusive Deals</h3>
          </div>
          <form onSubmit={handleSubscribe} className="flex gap-3">
            <input
              type="email"
              placeholder="Enter your email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="flex-1 px-4 py-3 rounded-full bg-white/5 border border-white/10 text-white placeholder:text-slate-500 focus:outline-none focus:border-[#f97316] transition-colors"
            />
            <button
              type="submit"
              disabled={subscribe.isPending}
              className="btn-primary px-6 disabled:opacity-50"
            >
              {subscribe.isPending ? "..." : "Subscribe"}
            </button>
          </form>
        </div>

        {/* Footer Grid */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
          <div>
            <div className="flex items-center gap-2 mb-4">
              <Zap className="w-5 h-5 text-[#f97316]" />
              <span className="font-bold">SubscriptionHero</span>
            </div>
            <p className="text-sm text-slate-400">
              Your trusted marketplace for premium digital subscriptions at unbeatable prices.
            </p>
          </div>

          <div>
            <h4 className="font-semibold mb-4">Products</h4>
            <ul className="space-y-2">
              {productLinks.map((link) => (
                <li key={link}>
                  <Link
                    to="/products"
                    className="text-sm text-slate-400 hover:text-white transition-colors"
                  >
                    {link}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h4 className="font-semibold mb-4">Support</h4>
            <ul className="space-y-2">
              <li>
                <a href="https://wa.me/917038146526" target="_blank" rel="noopener noreferrer nofollow" className="text-sm text-slate-400 hover:text-white transition-colors flex items-center gap-1">
                  WhatsApp Support <ExternalLink className="w-3 h-3" />
                </a>
              </li>
              <li>
                <a href="https://t.me/mfatool" target="_blank" rel="noopener noreferrer nofollow" className="text-sm text-slate-400 hover:text-white transition-colors flex items-center gap-1">
                  Telegram @mfatool <ExternalLink className="w-3 h-3" />
                </a>
              </li>
              <li><span className="text-sm text-slate-400">24/7 Live Support</span></li>
              <li><span className="text-sm text-slate-400">24H Refund Policy</span></li>
            </ul>
          </div>

          <div>
            <h4 className="font-semibold mb-4">Community</h4>
            <div className="flex flex-wrap gap-2">
              {socialLinks.map((link) => (
                <a
                  key={link.label}
                  href={link.url}
                  target="_blank"
                  rel="noopener noreferrer nofollow"
                  className="p-2 rounded-full bg-white/5 hover:bg-white/10 transition-colors"
                  title={link.label}
                >
                  <link.icon className="w-4 h-4" />
                </a>
              ))}
            </div>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="border-t border-white/10 pt-6 flex flex-col md:flex-row items-center justify-between gap-4">
          <p className="text-sm text-slate-500">
            &copy; 2025 Subscription Hero. All rights reserved.
          </p>
          <div className="flex items-center gap-4 text-sm text-slate-500">
            <Link to="/products" className="hover:text-white transition-colors">Privacy Policy</Link>
            <Link to="/products" className="hover:text-white transition-colors">Terms of Service</Link>
          </div>
        </div>
      </div>
    </footer>
  );
}