fix update Section Block

apps/website/src/app/layout.tsx

@@ -4,16 +4,18 @@ import Navbar from '../components/Navbar';
 import Footer from '../components/Footer';
 import ClientProviders from '../components/ClientProviders';
 import { API_BASE } from '../lib/api';
+import type { MegaMenuPayload } from '../components/navigation/menuTypes';
+import type { MenuItem, StoreSettings } from '@homaroma/types';
 
 export const metadata: Metadata = {
   title: 'HomAroma',
   description: 'Pure Origins, Artisan Craft, Zero Compromise',
 };
 
-// Fetch categories for Navbar and Footer on the server
+// Fetch categories for Navbar and Footer on the server (lang=all for client-side switching)
 async function getCategories() {
   try {
-    const res = await fetch(`${API_BASE}/categories`, { next: { revalidate: 3600 } });
+    const res = await fetch(`${API_BASE}/categories?lang=all`, { next: { revalidate: 3600 } });
     if (!res.ok) return [];
     return await res.json();
   } catch (error) {
@@ -22,22 +24,80 @@ async function getCategories() {
   }
 }
 
+// Fetch mega menu on the server — eliminates client-side flash
+async function getMegaMenu(): Promise<MegaMenuPayload[]> {
+  try {
+    const res = await fetch(`${API_BASE}/menus/main`, { next: { revalidate: 300 } });
+    if (!res.ok) return [];
+    const data = await res.json() as { payload?: MegaMenuPayload[] };
+    return Array.isArray(data.payload) ? data.payload : [];
+  } catch (error) {
+    console.error('Failed to fetch mega menu in layout', error);
+    return [];
+  }
+}
+
+// Fetch footer menus (explore + support) on the server
+async function getFooterMenus(): Promise<{ exploreMenu: MenuItem[]; supportMenu: MenuItem[] }> {
+  const fetchMenu = async (slug: string): Promise<MenuItem[]> => {
+    try {
+      const res = await fetch(`${API_BASE}/menus/${slug}`, { next: { revalidate: 300 } });
+      if (!res.ok) return [];
+      const data = await res.json() as { items?: MenuItem[] };
+      return Array.isArray(data.items)
+        ? data.items.sort((a, b) => a.order - b.order)
+        : [];
+    } catch {
+      return [];
+    }
+  };
+
+  const [exploreMenu, supportMenu] = await Promise.all([
+    fetchMenu('footer-explore'),
+    fetchMenu('footer-support'),
+  ]);
+
+  return { exploreMenu, supportMenu };
+}
+
+// Fetch store settings (social links, footer texts) on the server
+async function getStoreSettings(): Promise<StoreSettings | null> {
+  try {
+    const res = await fetch(`${API_BASE}/settings`, { next: { revalidate: 600 } });
+    if (!res.ok) return null;
+    return await res.json() as StoreSettings;
+  } catch (error) {
+    console.error('Failed to fetch store settings in layout', error);
+    return null;
+  }
+}
+
 export default async function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const categories = await getCategories();
+  const [categories, initialMenu, footerMenus, settings] = await Promise.all([
+    getCategories(),
+    getMegaMenu(),
+    getFooterMenus(),
+    getStoreSettings(),
+  ]);
 
   return (
     <html lang="th" className="scroll-smooth">
       <body className="min-h-screen bg-pop-bg text-pop-black font-sans antialiased">
         <ClientProviders>
-          <Navbar categories={categories} />
+          <Navbar categories={categories} initialMenu={initialMenu} />
           <main className="pt-[72px]">
             {children}
           </main>
-          <Footer categories={categories} />
+          <Footer
+            categories={categories}
+            exploreMenu={footerMenus.exploreMenu}
+            supportMenu={footerMenus.supportMenu}
+            settings={settings}
+          />
         </ClientProviders>
       </body>
     </html>