faq 1st one always open updated

src/app/about-antalya-restaurant/AboutContent.tsx

@@ -38,6 +38,17 @@ export default function AboutContent() {
     const [loading, setLoading] = useState(true);
     const [expandedReview, setExpandedReview] = useState<number | null>(null);
     const [swiperInstance, setSwiperInstance] = useState<any>(null);
+    const [openFaqIndex, setOpenFaqIndex] = useState<number | null>(0);
+
+    // Ensure first FAQ is open on mount with a small delay
+    useEffect(() => {
+        if (aboutFaqData.length > 0) {
+            const timer = setTimeout(() => {
+                setOpenFaqIndex(0);
+            }, 100);
+            return () => clearTimeout(timer);
+        }
+    }, []);
 
     // Auto-collapse expanded review after 10 seconds and handle autoplay
     useEffect(() => {
@@ -429,7 +440,13 @@ export default function AboutContent() {
                         </p>
                         <div className={styles.faqAccordion}>
                             {aboutFaqData.map((faq, index) => (
-                                <FaqItem key={index} question={faq.q} answer={faq.a} />
+                                <FaqItem
+                                    key={index}
+                                    question={faq.q}
+                                    answer={faq.a}
+                                    isOpen={openFaqIndex === index}
+                                    onToggle={() => setOpenFaqIndex(openFaqIndex === index ? null : index)}
+                                />
                             ))}
                         </div>
                     </motion.div>
@@ -488,14 +505,22 @@ export default function AboutContent() {
 }
 
 // FAQ Item Component
-function FaqItem({ question, answer }: { question: string; answer: string }) {
+function FaqItem({
-    const [isOpen, setIsOpen] = useState(false);
+    question,
-
+    answer,
+    isOpen,
+    onToggle
+}: {
+    question: string;
+    answer: string;
+    isOpen: boolean;
+    onToggle: () => void;
+}) {
     return (
         <div className={styles.faqItem}>
             <button
                 className={`${styles.faqQuestion} ${isOpen ? styles.faqQuestionActive : ''}`}
-                onClick={() => setIsOpen(!isOpen)}
+                onClick={onToggle}
             >
                 <span>{question}</span>
                 <span className={styles.faqIcon}>{isOpen ? '−' : '+'}</span>

src/components/FAQ/FAQ.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import styles from './FAQ.module.css';
 
 interface FAQItem {
@@ -13,7 +13,16 @@ interface FAQProps {
 }
 
 export default function FAQ({ faqs }: FAQProps) {
-    const [openIndex, setOpenIndex] = useState<number | null>(null);
+    const [openIndex, setOpenIndex] = useState<number | null>(0);
+
+    useEffect(() => {
+        if (faqs.length > 0) {
+            const timer = setTimeout(() => {
+                setOpenIndex(0);
+            }, 100);
+            return () => clearTimeout(timer);
+        }
+    }, [faqs.length]);
 
     const toggleFAQ = (index: number) => {
         setOpenIndex(openIndex === index ? null : index);