"use client";

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

interface FaqItem {
  question: string;
  answer: string;
}

export default function FooterFAQ() {
  const [openFaq, setOpenFaq] = useState<number | null>(null);
  const [email, setEmail] = useState("");
  const [subscribed, setSubscribed] = useState(false);

  const faqItems: FaqItem[] = [
    {
      question: "How do I sync my walk steps to earn LYTs?",
      answer: "LytsUp requests standard health API permissions during app registration. It automatically reads your daily distance in the background and converts every 500 steps taken into 1 LYT coin. You don't need to keep the app open!",
    },
    {
      question: "Are there any fees or hidden charges?",
      answer: "No, LytsUp is 100% free for users. Our partner brands sponsor the cashback rewards and vouchers to encourage physical activity, foot traffic, and community engagement.",
    },
    {
      question: "How do I redeem my vouchers at partner stores?",
      answer: "When you click 'Redeem' on a voucher card in the marketplace, LytsUp validates your balance, deducts the points, and generates an active checkout code. Copy the code and apply it during checkout on the partner brand's site.",
    },
    {
      question: "Can I transfer LYT coins to my friends?",
      answer: "Yes! The mobile app contains a peer-to-peer wallet system where you can send coins to friends to pool assets, complete squad challenges, or gift rewards.",
    },
  ];

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

  const toggleFaq = (idx: number) => {
    setOpenFaq((prev) => (prev === idx ? null : idx));
  };

  return (
    <section className="bg-[#050505] border-t border-white/5 relative overflow-hidden">
      {/* Glow lights */}
      <div className="absolute top-0 left-1/4 -translate-y-1/2 w-90 h-90 rounded-full bg-accent-purple/5 blur-[120px] pointer-events-none" />
      <div className="absolute top-0 right-1/4 -translate-y-1/2 w-90 h-90 rounded-full bg-accent-pink/5 blur-[120px] pointer-events-none" />

      {/* Part 1: FAQ Accordions */}
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-20 border-b border-white/5">
        <div className="text-center max-w-2xl mx-auto mb-12 space-y-4">
          <span className="text-accent-lime font-extrabold text-xs tracking-widest uppercase">
            Support Hub
          </span>
          <h3 className="text-2xl sm:text-4xl font-extrabold font-sora text-white">
            Frequently Asked <span className="text-glow-yellow text-primary">Questions</span>
          </h3>
        </div>

        <div className="space-y-4">
          {faqItems.map((faq, idx) => {
            const isOpen = openFaq === idx;
            return (
              <div
                key={idx}
                className="bg-white/3 border border-white/5 rounded-2xl overflow-hidden transition-all duration-300"
              >
                <button
                  onClick={() => toggleFaq(idx)}
                  className="w-full p-5 text-left flex justify-between items-center font-semibold font-sora text-sm text-white hover:bg-white/5 transition-colors cursor-pointer"
                >
                  <span>{faq.question}</span>
                  <ChevronDown
                    className={`w-4.5 h-4.5 text-white/50 transition-transform duration-300 shrink-0 ml-4 ${
                      isOpen ? "transform rotate-180 text-primary" : ""
                    }`}
                  />
                </button>
                
                {isOpen && (
                  <div className="p-5 border-t border-white/5 text-xs text-white/60 leading-relaxed bg-[#070707] animate-in slide-in-from-top-2 duration-300">
                    {faq.answer}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>

      {/* Part 2: Footer layout */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-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">
            <Link href="/" className="flex items-center space-x-2.5">
              <img src="/images/lytsup_app.png" alt="LytsUp Logo" className="h-8 w-auto object-contain rounded-lg" />
              <span className="text-xl 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-xs 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-[10px] tracking-widest uppercase">
              Earn. Spend. Live More.
            </p>
          </div>

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

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

          {/* Newsletter subscription */}
          <div className="space-y-4">
            <h4 className="text-white font-bold text-xs tracking-wider uppercase font-sora">Get Secret Drops</h4>
            <p className="text-white/60 text-xs leading-relaxed">
              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 text-xs 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 rounded-lg hover:bg-primary/95 transition-colors flex items-center justify-center cursor-pointer"
                aria-label="Subscribe"
              >
                <Send className="w-3.5 h-3.5" />
              </button>
            </form>
            {subscribed && (
              <p className="text-accent-lime text-[10px] 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-[10px] 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 h-3 text-accent-pink fill-current mx-1" /> for Gen Z
            </span>
          </div>

          {/* Social Icons */}
          <div className="flex space-x-4">
            <a
              href="#"
              className="w-7 h-7 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-3.5 h-3.5" />
            </a>
            <a
              href="#"
              className="w-7 h-7 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-3.5 h-3.5" />
            </a>
            <a
              href="#"
              className="w-7 h-7 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-3.5 h-3.5" />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}
