import { useState } from "react";
import { Plus, Minus, HelpCircle, MessageSquare } from "lucide-react";
import { motion, AnimatePresence } from "motion/react";

export default function FAQ() {
  const [openId, setOpenId] = useState<string | null>("faq-0"); // keep first open by default

  const faqs = [
    {
      id: "faq-0",
      question: "Is Lumina Convert free to use?",
      answer: "Yes! Lumina Convert is 100% free at all times with absolutely no limitations, file size restricts, or premium locks. It supports all 200+ formats straight out of the box, with zero watermark logs, offline telemetry, or sign-up gates. Our team is fully committed to keeping it a clean, accessible security asset for the global development community.",
    },
    {
      id: "faq-1",
      question: "Does my data or files get uploaded to any online server?",
      answer: "Absolutely not. Lumina Convert is configured as an 'offline-first' software. When you drop files, 100% of the conversion process occurs on your computer. Your files never leave your machine which guarantees absolute protection from leak risks, compliance audits (HIPAA/GDPR), and slow internet queues.",
    },
    {
      id: "faq-2",
      question: "Which file formats are supported?",
      answer: "We support over 200+ formats! This includes PDFs, Microsoft Office documents (DOCX, XLSX, PPTX), rich images (PNG, WebP, JPG, SVG, TIFF), high-fidelity video codecs (MP4, MOV, MKV, AVI, WebM), audio containers (MP3, WAV, FLAC, AAC), and software formats like JSON, XML, or archives.",
    },
    {
      id: "faq-3",
      question: "Is technical support available? Can I reach you on WhatsApp?",
      answer: "Yes, we offer real-time customer support! You can reach out directly via WhatsApp at +92-303-4572298 or email us anytime at bahaduralimunnabhai@gmail.com. We operate standard under 12-hour response SLAs, helping you install codecs or configure directory watchers.",
    },
  ];

  return (
    <section id="faq" className="py-24 bg-white relative">
      <div className="max-w-4xl mx-auto px-4 md:px-8">
        {/* Header */}
        <div className="text-center max-w-2xl mx-auto mb-16">
          <span className="text-xs font-bold font-mono tracking-wider text-violet-600 uppercase bg-violet-50 px-3.5 py-1.5 rounded-full">
            Frequently Asked
          </span>
          <h2 className="font-display font-bold text-3xl sm:text-4xl text-slate-900 tracking-tight mt-4 mb-4">
            Got questions? We have{" "}
            <span className="bg-gradient-to-r from-violet-600 to-indigo-600 bg-clip-text text-transparent">
              answers
            </span>
          </h2>
          <p className="text-slate-500 text-sm md:text-base font-light">
            Everything you need to know about formats, compliance standards, license activation, and local installation.
          </p>
        </div>

        {/* FAQs list accordion */}
        <div className="space-y-4" id="faq-accordion-group">
          {faqs.map((faq, index) => {
            const isOpen = openId === faq.id;
            return (
              <div
                key={faq.id}
                className={`rounded-[24px] border transition-all duration-300 overflow-hidden ${
                  isOpen
                    ? "bg-slate-50/50 border-violet-100 shadow-sm"
                    : "bg-white border-slate-100 hover:border-slate-200"
                }`}
                id={faq.id}
              >
                <button
                  onClick={() => setOpenId(isOpen ? null : faq.id)}
                  className="w-full py-5 px-6 md:px-8 flex items-center justify-between text-left focus:outline-none cursor-pointer"
                  id={`faq-btn-${faq.id}`}
                >
                  <span className="font-display font-semibold text-base text-slate-800 pr-4">
                    {faq.question}
                  </span>
                  <div
                    className={`w-8 h-8 rounded-full border border-slate-105 flex items-center justify-center transition-transform duration-300 ${
                      isOpen ? "bg-violet-600 text-white border-violet-600 rotate-185" : "text-slate-400 bg-white"
                    }`}
                  >
                    {isOpen ? (
                      <Minus className="w-4 h-4 stroke-[2.5]" />
                    ) : (
                      <Plus className="w-4 h-4 stroke-[2.5]" />
                    )}
                  </div>
                </button>

                <AnimatePresence initial={false}>
                  {isOpen && (
                    <motion.div
                      initial={{ height: 0 }}
                      animate={{ height: "auto" }}
                      exit={{ height: 0 }}
                      transition={{ duration: 0.25, ease: "easeInOut" }}
                    >
                      <div className="px-6 md:px-8 pb-6 text-sm text-slate-500 font-light leading-relaxed border-t border-slate-100/50 pt-3">
                        {faq.answer}
                      </div>
                    </motion.div>
                  )}
                </AnimatePresence>
              </div>
            );
          })}
        </div>

        {/* Floating Support Info */}
        <div className="mt-12 p-6 rounded-3xl bg-slate-50 border border-slate-100/50 flex flex-col sm:flex-row items-center justify-between gap-4 text-left">
          <div className="flex items-center space-x-3.5">
            <div className="w-10 h-10 rounded-2xl bg-white flex items-center justify-center text-violet-600 shadow-sm">
              <MessageSquare className="w-5 h-5 animate-pulse" />
            </div>
            <div>
              <h4 className="text-sm font-semibold text-slate-900">Need personal folder automation?</h4>
              <p className="text-xs text-slate-500 font-light mt-0.5">We offer custom shell triggers for business server arrays.</p>
            </div>
          </div>
          <div className="flex space-x-3 flex-wrap">
            <a
              href="https://wa.me/923034572298"
              target="_blank"
              rel="noopener noreferrer"
              id="faq-whatsapp-chat-btn"
              className="py-2 px-4 rounded-xl bg-emerald-600 text-white font-semibold text-xs shadow-sm hover:bg-emerald-700 transition"
            >
              WhatsApp Us
            </a>
            <a
              href="mailto:bahaduralimunnabhai@gmail.com"
              id="faq-email-chat-btn"
              className="py-2 px-4 rounded-xl border border-slate-205 text-slate-700 font-semibold text-xs hover:bg-slate-50 transition"
            >
              Email Specialist
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}