'use client';

import React, { useState } from 'react';
import FaqHeroBg from '@/assets/faq/hero-bg.jpg';
import Image from 'next/image';
import { motion, AnimatePresence } from 'framer-motion';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import { Plus, Minus, Search, ChevronDown, ChevronUp } from 'lucide-react';

// FAQ Data Structure
const faqCategories = [
  { id: 'general', label: 'General' },
  { id: 'features', label: 'Features' },
  { id: 'pricing', label: 'Pricing' },
  { id: 'technical', label: 'Technical' },
  { id: 'support', label: 'Support' },
];

const faqData = {
  general: [
    {
      question: "What is Dine360?",
      answer: "Dine360 is an all-in-one restaurant management platform that helps restaurants manage orders, billing, inventory, reservations, kitchen workflows, and analytics from a single system."
    },
    {
      question: "What types of restaurants can use Dine360?",
      answer: "Dine360 is designed for all restaurant formats including fast food outlets, cafés, bakeries, food trucks, ghost kitchens, fine dining restaurants, and multi-branch restaurant chains."
    },
    {
      question: "Is Dine360 suitable for small restaurants?",
      answer: "Yes. Dine360 is built to scale from small cafés and quick-service restaurants to large multi-location restaurant businesses."
    },
    {
      question: "Can Dine360 manage multiple branches?",
      answer: "Yes. Dine360 supports multi-branch restaurants with centralized dashboards, branch-wise reports, and unified operational control."
    }
  ],
  features: [
    {
      question: "What features does Dine360 offer?",
      answer: "Dine360 includes essential restaurant management tools such as POS billing, kitchen display system (KDS), table reservations, inventory management, sales analytics, CRM, purchase management, and delivery integrations."
    },
    {
      question: "Does Dine360 support kitchen display systems (KDS)?",
      answer: "Yes. Dine360 provides a real-time Kitchen Display System that sends orders directly from the POS to the kitchen screen, improving speed and reducing errors."
    },
    {
      question: "Can I manage table reservations with Dine360?",
      answer: "Yes. The table reservation system allows you to track reservations, manage walk-ins, view table availability, and control seating from a visual floor layout."
    },
    {
      question: "Does Dine360 track inventory automatically?",
      answer: "Yes. Inventory levels update automatically as orders are processed, helping you track ingredients and receive low-stock alerts."
    }
  ],
  pricing: [
    {
      question: "How much does Dine360 cost?",
      answer: "Dine360 offers flexible pricing plans designed for restaurants of different sizes. Pricing varies depending on the number of users, branches, and advanced features required."
    },
    {
      question: "Is there a free trial?",
      answer: "Yes. Dine360 offers a free trial so restaurants can explore the platform and test its features before choosing a subscription plan."
    },
    {
      question: "Are there any setup fees?",
      answer: "In most cases, there are no hidden setup costs. Our team assists with onboarding to ensure a smooth implementation."
    }
  ],
  technical: [
    {
      question: "Does Dine360 work on tablets and desktops?",
      answer: "Yes. Dine360 is cloud-based and works on desktops, tablets, and compatible POS devices."
    },
    {
      question: "Does the POS work if the internet goes down?",
      answer: "Yes. Dine360 includes offline functionality so your POS continues running even if the internet connection temporarily drops."
    },
    {
      question: "Is restaurant data secure?",
      answer: "Yes. Dine360 uses secure cloud infrastructure and encrypted data storage to protect restaurant and customer information."
    }
  ],
  support: [
    {
      question: "What kind of support does Dine360 provide?",
      answer: "Dine360 offers dedicated customer support including onboarding assistance, technical help, and system training."
    },
    {
      question: "Is training provided for staff?",
      answer: "Yes. Our onboarding team provides training to ensure your staff can quickly learn and use the system efficiently."
    },
    {
      question: "How can I contact support?",
      answer: "You can contact the Dine360 support team through email, phone, or the support portal available inside the platform."
    },
    {
      question: "Can I request a product demo?",
      answer: "Yes. You can request a live demo to see how Dine360 works and how it can improve your restaurant operations."
    }
  ]
};

const FAQPage = () => {
  const [activeCategory, setActiveCategory] = useState('general');
  const [openQuestionIndex, setOpenQuestionIndex] = useState<number | null>(0);

  const toggleQuestion = (index: number) => {
    setOpenQuestionIndex(openQuestionIndex === index ? null : index);
  };

  return (
    <div className="relative min-h-screen bg-black text-white font-sans selection:bg-rose-100 selection:text-rose-900">
      <Navbar />

      {/* Hero Section with Background Image */}
      <section className="relative h-[60vh] min-h-75 flex items-center justify-center overflow-hidden bg-zinc-900 pt-20">
        <div className="absolute inset-0 z-0">
          <Image
            src={FaqHeroBg}
            alt="FAQ Background"
            fill
            className="object-cover opacity-70"
          />
          <div className="absolute inset-0 bg-linear-to-b from-black/40 via-black/20 to-black" />
        </div>

        <div className="relative z-10 text-center px-4 max-w-4xl mx-auto">
          <motion.h1 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="text-4xl md:text-6xl font-black text-white mb-6 tracking-tight"
          >
            Frequently Asked Questions
          </motion.h1>
          <motion.p 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.1 }}
            className="text-zinc-300 text-lg md:text-xl max-w-2xl mx-auto"
          >
            Find answers to common questions about Dine360’s features, setup, pricing, and support to help you get started quickly.
          </motion.p>
        </div>
      </section>

      {/* Content Section */}
      <section className="px-4 sm:px-6 lg:px-8 max-w-4xl mx-auto mt-10 relative z-20 pb-24">
        
        {/* Category Tabs - Hidden if only one category */}
        {faqCategories.length > 1 && (
          <div className="flex flex-wrap justify-center gap-2 mb-12">
            {faqCategories.map((category) => (
              <button
                key={category.id}
                onClick={() => {
                  setActiveCategory(category.id);
                  setOpenQuestionIndex(null); 
                }}
                className={`px-6 py-2.5 rounded-full text-sm font-bold transition-all duration-300 shadow-md ${
                  activeCategory === category.id
                    ? 'bg-rose-600 text-white shadow-lg shadow-rose-600/30'
                    : 'bg-white text-zinc-900 hover:bg-zinc-100 border border-zinc-200'
                }`}
              >
                {category.label}
              </button>
            ))}
          </div>
        )}

        {/* Accordion Questions */}
        <div className="space-y-4">
          <AnimatePresence mode="wait">
            <motion.div
              key={activeCategory}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              transition={{ duration: 0.3 }}
            >
              {(faqData[activeCategory as keyof typeof faqData] || []).map((item, index) => (
                <div 
                  key={index} 
                  className="mb-4 rounded-2xl overflow-hidden bg-white border border-zinc-200 transition-all duration-300 hover:border-zinc-300 shadow-sm"
                >
                  <button
                    onClick={() => toggleQuestion(index)}
                    className="w-full flex items-center justify-between p-6 text-left focus:outline-none group"
                  >
                    <span 
                      className={`text-base md:text-lg font-bold transition-colors duration-300 ${
                        openQuestionIndex === index ? 'text-rose-600' : 'text-zinc-900 group-hover:text-zinc-700'
                      }`}
                    >
                      {item.question}
                    </span>
                    <div 
                      className={`shrink-0 ml-4 w-8 h-8 rounded-full flex items-center justify-center transition-all duration-300 ${
                        openQuestionIndex === index ? 'bg-rose-600 text-white rotate-180' : 'bg-zinc-100 text-zinc-600 group-hover:bg-zinc-200'
                      }`}
                    >
                       <ChevronDown className="w-5 h-5" />
                    </div>
                  </button>

                  <AnimatePresence>
                    {openQuestionIndex === index && (
                      <motion.div
                        initial={{ height: 0, opacity: 0 }}
                        animate={{ height: 'auto', opacity: 1 }}
                        exit={{ height: 0, opacity: 0 }}
                        transition={{ duration: 0.3, ease: 'easeInOut' }}
                      >
                        <div className="px-6 pb-6 text-zinc-600 text-sm md:text-base leading-relaxed border-t border-zinc-100 pt-4">
                          {item.answer}
                        </div>
                      </motion.div>
                    )}
                  </AnimatePresence>
                </div>
              ))}
            </motion.div>
          </AnimatePresence>
        </div>

        {/* Contact CTA */}
        <div className="mt-16 text-center">
            <p className="text-zinc-400 mb-4">Can't find what you're looking for?</p>
            <a href="/contact" className="inline-flex items-center justify-center px-8 py-3 bg-rose-600 text-white font-bold rounded-xl hover:bg-rose-700 transition-colors shadow-lg shadow-rose-600/20">
                Contact Support
            </a>
        </div>
      </section>

      <Footer />
    </div>
  );
};

export default FAQPage;