'use client'

import { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { SectionHeader } from '@/components/ui/SectionHeader'
import { GlassCard } from '@/components/ui/GlassCard'

type FAQItem = {
  question: string
  answer: string
}

const FAQS: FAQItem[] = [
  {
    question: 'What is Nearle?',
    answer: 'Nearle is India’s first premium managed smart hyperlocal neighbourhood platform. We map out geofenced societies and connect residents directly to verified local merchants, service technicians, and private community deals in a unified digital ecosystem.',
  },
  {
    question: 'How does hyperlocal delivery work?',
    answer: 'Once an order is placed on the Nearle Deal app, nearby partner stores receive instant geofenced alerts. Dedicated Nearle Gear riders use optimised routing navigation to collect the packed package and complete the delivery in under 15-20 minutes.',
  },
  {
    question: 'How can local businesses and shops join?',
    answer: 'Local shops, supermarkets, restaurants, and freelance service providers can apply via the Nearle Partner app. After quick boundary verification and catalog sync, they go live in the local geofenced mesh.',
  },
  {
    question: 'Which cooperative societies and communities are supported?',
    answer: 'Currently we are actively activating major societies and gated complexes in Coimbatore. If your society is not geofenced yet, you can send an onboarding request via the coordinator hub inside the Admin application.',
  },
  {
    question: 'Is delivery available 24/7?',
    answer: 'Our smart network works matching store opening timings. Most essential grocery and food categories operate from 7:00 AM to 11:00 PM, while instant peer-to-peer courier options remain active in key zones 24/7.',
  },
]

export function FAQ() {
  const [openIdx, setOpenIdx] = useState<number | null>(0) // Default expand first question

  const toggle = (idx: number) => {
    setOpenIdx(openIdx === idx ? null : idx)
  }

  return (
    <div className="py-24 sm:py-32 bg-white px-5 sm:px-8 relative overflow-hidden">
      {/* Decorative Blur BG */}
      <div className="absolute bottom-1/4 left-1/4 w-[500px] h-[500px] rounded-full bg-purple-soft/30 blur-3xl -z-10 pointer-events-none" />

      <div className="max-w-4xl mx-auto">
        <SectionHeader
          label="Help Center"
          heading={
            <>
              Frequently Asked
              <br />
              <span className="bg-gradient-purple bg-clip-text text-transparent">
                Questions
              </span>
            </>
          }
          sub="Everything you need to know about the Nearle hyperlocal platform, society geofencing, and merchant tools."
          align="center"
          className="mb-16 sm:mb-20"
        />

        <div className="flex flex-col gap-4">
          {FAQS.map((faq, idx) => {
            const isOpen = openIdx === idx
            return (
              <GlassCard
                key={idx}
                hover={false}
                className="border-purple-lavender/50 hover:border-purple-primary transition-all duration-300 p-0 overflow-hidden shadow-nearle-sm"
              >
                <button
                  onClick={() => toggle(idx)}
                  className="w-full text-left p-6 sm:p-8 flex justify-between items-center gap-4 focus:outline-none select-none group"
                >
                  <span className="font-display font-bold text-base sm:text-lg text-nearle-dark group-hover:text-purple-deep transition-colors duration-200">
                    {faq.question}
                  </span>
                  <span className={`w-8 h-8 rounded-full bg-purple-soft flex items-center justify-center text-purple-deep transition-transform duration-300 ${isOpen ? 'rotate-180' : ''}`}>
                    ↓
                  </span>
                </button>

                <AnimatePresence initial={false}>
                  {isOpen && (
                    <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 sm:px-8 sm:pb-8 font-body text-nearle-mid text-sm sm:text-base leading-relaxed border-t border-nearle-border/40 pt-4 bg-[#FCFAFD]/50">
                        {faq.answer}
                      </div>
                    </motion.div>
                  )}
                </AnimatePresence>
              </GlassCard>
            )
          })}
        </div>
      </div>
    </div>
  )
}
