{pageTitle}

import Head from 'next/head'; import Link from 'next/link'; import { ReactNode, useState, useEffect } from 'react'; import { Menu, X, ArrowUp } from './Icons'; import type { Page } from '../types/site'; import type { SiteData } from '../lib/contentLoader'; import { Theme, getTheme } from '../styles/themes'; import SearchBar from './SearchBar'; import ThemeSwitcher from './ThemeSwitcher'; import QuickThemeToggle from './QuickThemeToggle'; import { analytics } from '../lib/analytics'; import CustomizableHeader from './CustomizableHeader'; import CustomizableFooter from './CustomizableFooter'; import AIContentGenerator from './AIContentGenerator'; import SEOAnalyzer from './SEOAnalyzer'; import PerformanceDashboard from './PerformanceDashboard'; import VisualPageBuilder from './VisualPageBuilder'; import { useCustomization } from '../hooks/useCustomization'; interface LayoutProps { children: ReactNode; siteConfig: SiteData; theme: Theme; pages: Page[]; currentPage?: Page; } export default function Layout({ children, siteConfig, theme: initialTheme, pages, currentPage }: LayoutProps) { const [baseTheme, setBaseTheme] = useState(initialTheme); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [showScrollTop, setShowScrollTop] = useState(false); const [scrollProgress, setScrollProgress] = useState(0); // Use the base theme directly const theme = baseTheme; // Apply customization settings const { animationCSS, layoutCSS, uiCSS, getFloatingElementStyle, isElementEnabled, getUIConfig, floatingElements } = useCustomization({ ui: siteConfig.ui || undefined, animations: siteConfig.animations || undefined, layout: siteConfig.layout || undefined, floatingElements: siteConfig.floatingElements || undefined }); // Handle theme changes const handleThemeChange = (themeName: string) => { const newTheme = getTheme(themeName); setBaseTheme(newTheme); // Save theme preference and track change if (typeof window !== 'undefined') { localStorage.setItem('zyros-theme', themeName); analytics.trackThemeChange(themeName); } }; // Load saved theme on mount useEffect(() => { if (typeof window !== 'undefined') { const savedTheme = localStorage.getItem('zyros-theme'); if (savedTheme) { const newTheme = getTheme(savedTheme); setBaseTheme(newTheme); } } }, []); // Handle scroll effects useEffect(() => { const handleScroll = () => { const scrollTop = window.scrollY; const docHeight = document.documentElement.scrollHeight - window.innerHeight; const scrollPercent = (scrollTop / docHeight) * 100; setScrollProgress(scrollPercent); // Use custom threshold from configuration or default to 400 const uiThreshold = getUIConfig('scrollToTop')?.threshold; const threshold = uiThreshold || 400; setShowScrollTop(scrollTop > threshold); }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, [getUIConfig]); const scrollToTop = () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }; const pageTitle = currentPage ? `${currentPage.title} | ${siteConfig.site.title}` : siteConfig.site.title; const pageDescription = currentPage?.description || siteConfig.site.description || `${siteConfig.site.title} - A static site built with zyros`; return ( <> {pageTitle} {/* Open Graph */} {/* Twitter Card */} {/* Additional SEO */} {typeof window !== 'undefined' && ( )} {/* Inject custom CSS from customization settings */} {animationCSS &&