Dynamic data files

app/faq/page.tsx

@@ -2,20 +2,41 @@
 
 "use client";
 
-import { MessageCircleQuestionMark } from 'lucide-react';
-import { useState } from 'react';
+import { Loader2, MessageCircleQuestionMark } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { readJsonFile } from '../actions/jsonEditor';
 import { FAQItem } from '../components/ui/FAQItem';
 import { PageHeader } from '../components/ui/PageHeader';
 import { SectionCard } from '../components/ui/SectionCard';
-import faqData from '../data/faq.json';
 
 export default function FAQ() {
     const [openIndex, setOpenIndex] = useState<string | null>(null);
+    const [faqData, setFaqData] = useState<any[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        const loadFAQ = async () => {
+            if (navigator.onLine) {
+                const res = await readJsonFile('faq.json');
+                if (res.success && res.data) {
+                    setFaqData(res.data);
+                    localStorage.setItem('kullaberg_faq_cache', JSON.stringify(res.data));
+                }
+            } else {
+                const cachedData = localStorage.getItem('kullaberg_faq_cache');
+                if (cachedData) setFaqData(JSON.parse(cachedData));
+            }
+            setIsLoading(false);
+        };
+        loadFAQ();
+    }, []);
 
     const toggleQuestion = (index: string) => {
         setOpenIndex(openIndex === index ? null : index);
     };
 
+    if (isLoading) return <div className="flex justify-center py-20"><Loader2 className="animate-spin text-slate-teal" size={40} /></div>;
+
     return (
         <div className="w-full animate-fade-in space-y-6">
             <PageHeader
@@ -32,7 +53,7 @@ export default function FAQ() {
                         className="break-inside-avoid mb-4 inline-block w-full"
                     >
                         <div className="space-y-2">
-                            {section.questions.map((item, qIndex) => {
+                            {section.questions.map((item: any, qIndex: number) => {
                                 const id = `${sIndex}-${qIndex}`;
                                 return (
                                     <FAQItem