refactor: Dynamically load FAQ page content including categories, questions, and support details from CMS, and introduce new CMS types for FAQ structure.

src/app/faq/page.tsx

@@ -1,11 +1,13 @@
 'use client';
 
 import Image from 'next/image';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { CommonHeader } from '@/components/layout/CommonHeader';
 import { Footer } from '@/components/layout/Footer';
+import { cmsService } from '@/services/cms.service';
+import { FaqContent, FaqCategoryItem, FaqItem, CmsContentRecord } from '@/types/cms';
 
-const categories = [
+const defaultCategories: FaqCategoryItem[] = [
   { id: 'all', label: 'All Questions' },
   { id: 'agent', label: 'Agent Resources' },
   { id: 'buying', label: 'Buying a Home' },
@@ -13,7 +15,7 @@ const categories = [
   { id: 'platform', label: 'Platform & Account' },
 ];
 
-const faqs = [
+const defaultFaqs: FaqItem[] = [
   {
     id: 1,
     icon: '/assets/icons/home-icon.svg',
@@ -58,10 +60,54 @@ const faqs = [
   },
 ];
 
+const defaultPageTitle = 'Frequently Asked Questions ?';
+const defaultSupportTitle = 'Still Need Help ?';
+const defaultSupportDescription = 'Our Support Team Is Available\nMon-Fri, 9am-6pm IST';
+
 export default function FAQPage() {
   const [activeCategory, setActiveCategory] = useState('all');
   const [expandedFaq, setExpandedFaq] = useState<number | null>(1);
 
+  const [pageTitle, setPageTitle] = useState(defaultPageTitle);
+  const [categories, setCategories] = useState<FaqCategoryItem[]>(defaultCategories);
+  const [faqs, setFaqs] = useState<FaqItem[]>(defaultFaqs);
+  const [supportTitle, setSupportTitle] = useState(defaultSupportTitle);
+  const [supportDescription, setSupportDescription] = useState(defaultSupportDescription);
+
+  useEffect(() => {
+    async function loadCmsContent() {
+      try {
+        const records: CmsContentRecord[] = await cmsService.getPageContent('faq');
+        const faqRecord = records.find((r) => r.sectionKey === 'faqContent');
+        if (faqRecord) {
+          const content = faqRecord.content as FaqContent;
+          if (content.pageTitle) {
+            setPageTitle(content.pageTitle);
+          }
+          if (content.categories && content.categories.length > 0) {
+            // Always prepend "All Questions" category
+            const hasAll = content.categories.some((c) => c.id === 'all');
+            const cmsCategories = hasAll ? content.categories : [{ id: 'all', label: 'All Questions' }, ...content.categories];
+            setCategories(cmsCategories);
+          }
+          if (content.faqs && content.faqs.length > 0) {
+            setFaqs(content.faqs);
+            setExpandedFaq(content.faqs[0]?.id ?? null);
+          }
+          if (content.supportTitle) {
+            setSupportTitle(content.supportTitle);
+          }
+          if (content.supportDescription) {
+            setSupportDescription(content.supportDescription);
+          }
+        }
+      } catch {
+        // Keep defaults on error
+      }
+    }
+    loadCmsContent();
+  }, []);
+
   const filteredFaqs = activeCategory === 'all'
     ? faqs
     : faqs.filter(faq => faq.category === activeCategory);
@@ -124,7 +170,7 @@ export default function FAQPage() {
           <div className="flex-1">
             {/* Title */}
             <h1 className="font-fractul font-bold text-[24px] text-[#00293d] mb-6">
-              Frequently Asked Questions ?
+              {pageTitle}
             </h1>
 
             {/* FAQ Accordion */}
@@ -140,12 +186,24 @@ export default function FAQPage() {
                     onClick={() => toggleFaq(faq.id)}
                     className="w-full px-6 py-5 flex items-center gap-4 text-left"
                   >
-                    <Image
+                    {faq.icon && (
-                      src={faq.icon}
+                      faq.icon.startsWith('/') ? (
-                      alt=""
+                        <Image
-                      width={28}
+                          src={faq.icon}
-                      height={28}
+                          alt=""
-                    />
+                          width={28}
+                          height={28}
+                        />
+                      ) : (
+                        <img
+                          src={faq.icon}
+                          alt=""
+                          width={28}
+                          height={28}
+                          className="w-7 h-7 object-contain"
+                        />
+                      )
+                    )}
                     <span className="flex-1 font-fractul font-semibold text-[18px] text-[#00293d]">
                       {faq.question}
                     </span>
@@ -176,11 +234,10 @@ export default function FAQPage() {
               <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6">
                 <div>
                   <h3 className="font-fractul font-bold text-[20px] text-[#00293d] mb-2">
-                    Still Need Help ?
+                    {supportTitle}
                   </h3>
-                  <p className="font-serif text-[16px] text-[#00293d]">
+                  <p className="font-serif text-[16px] text-[#00293d] whitespace-pre-line">
-                    Our Support Team Is Available<br />
+                    {supportDescription}
-                    Mon-Fri, 9am-6pm IST
                   </p>
                 </div>
 

src/types/cms.ts

@@ -103,6 +103,27 @@ export interface AboutCtaContent {
   buttonText: string;
 }
 
+export interface FaqCategoryItem {
+  id: string;
+  label: string;
+}
+
+export interface FaqItem {
+  id: number;
+  icon: string;
+  question: string;
+  answer: string;
+  category: string;
+}
+
+export interface FaqContent {
+  pageTitle: string;
+  categories: FaqCategoryItem[];
+  faqs: FaqItem[];
+  supportTitle: string;
+  supportDescription: string;
+}
+
 export interface CmsContentRecord {
   id: string;
   pageSlug: string;