@jhits/plugin-website 0.0.16 → 0.0.17

package/src/views/SettingsView.tsx

@@ -1,726 +1,278 @@
 /**
  * Website Settings View
- * Main interface for managing website settings
+ * Refactored modular interface with sidebar navigation
  */
 
 'use client';
 
-import React, { useState, useEffect, useRef } from 'react';
-import { Save, RefreshCw, Globe, Globe2, Mail, Search, Settings2, Calendar, Plus, Trash2, X, Edit3 } from 'lucide-react';
-import { WebsiteSettings, SupportedLocale, LocalizedSocialLink, DomainLocaleConfig } from '../types/settings';
-import { FaFacebook, FaInstagram, FaLinkedin, FaPinterest, FaTiktok } from 'react-icons/fa';
-import { FaXTwitter } from 'react-icons/fa6';
+import React, { useState } from 'react';
+import { Save, RefreshCw, Settings2, Globe, Search, Mail, Check, Lock as LockIcon } from 'lucide-react';
+import { SettingsViewProps } from './Settings/types';
+import { useWebsiteSettings } from './Settings/hooks/useWebsiteSettings';
+import { FlagIcon } from './Settings/components/FlagIcon';
 
-const AVAILABLE_LOCALES: { code: SupportedLocale; name: string; flag: string }[] = [
-    { code: 'en', name: 'English', flag: '🇬🇧' },
-    { code: 'sv', name: 'Swedish', flag: '🇸🇪' },
-    { code: 'nl', name: 'Dutch', flag: '🇳🇱' },
-];
-
-const AVAILABLE_PLATFORMS = [
-    { name: 'Instagram', icon: <FaInstagram size={18} /> },
-    { name: 'Facebook', icon: <FaFacebook size={18} /> },
-    { name: 'Twitter', icon: <FaXTwitter size={18} /> },
-    { name: 'Pinterest', icon: <FaPinterest size={18} /> },
-    { name: 'LinkedIn', icon: <FaLinkedin size={18} /> },
-    { name: 'TikTok', icon: <FaTiktok size={18} /> },
-];
-
-export interface SettingsViewProps {
-    siteId: string;
-    locale: string;
-}
-
-// =============================================================================
 // Sub-components
-// =============================================================================
+import { SeoIdentitySection } from './Settings/components/SeoIdentitySection';
+import { LocalizedContentSection } from './Settings/components/LocalizedContentSection';
+import { LocalesManagementCard } from './Settings/components/LocalesManagementCard';
+import { StatusSection } from './Settings/components/StatusSection';
+import { LaunchDateSection } from './Settings/components/LaunchDateSection';
+import { DomainLanguagesCard } from './Settings/components/DomainLanguagesCard';
+import { DomainLanguagesModal } from './Settings/components/DomainLanguagesModal';
+
+type SettingsTab = 'general' | 'localization' | 'seo' | 'contact';
+
+export function SettingsView({ siteId }: SettingsViewProps) {
+    const [currentTab, setCurrentTab] = useState<SettingsTab>('general');
+
+    const {
+        settings,
+        isLoading,
+        isSaving,
+        isDirty,
+        showSuccess,
+        activeTab,
+        setActiveTab,
+        activeLocales,
+        showDomainModal,
+        setShowDomainModal,
+        handleUpdateSettings,
+        handleUpdateLocalizedIdentity,
+        handleUpdateLocalizedContact,
+        handleAddLocalizedSocial,
+        handleUpdateLocalizedSocial,
+        handleRemoveLocalizedSocial,
+        handleUpdateLocales,
+        handleSave,
+        handleReset,
+        saveDomainConfigAndClose
+    } = useWebsiteSettings(siteId);
 
-interface DomainLanguagesCardProps {
-    config: DomainLocaleConfig[];
-    onEdit: () => void;
-}
-
-function DomainLanguagesCard({ config, onEdit }: DomainLanguagesCardProps) {
-    return (
-        <section className="bg-dashboard-bg p-6 rounded-3xl border border-dashboard-border">
-            <div className="flex items-center justify-between border-b border-dashboard-border pb-4 mb-4">
-                <div className="flex items-center gap-2 font-bold text-dashboard-text">
-                    <Globe2 size={18} className="text-primary" />
-                    Domain Languages
+    if (isLoading) {
+        return (
+            <div className="h-full w-full bg-dashboard-card text-dashboard-text flex items-center justify-center">
+                <div className="text-center">
+                    <RefreshCw className="w-8 h-8 animate-spin text-primary mx-auto mb-4" />
+                    <p className="text-sm text-dashboard-text-secondary">Loading settings...</p>
                 </div>
             </div>
-            <div className="space-y-2">
-                {config && config.length > 0 ? (
-                    <div className="flex flex-wrap gap-2">
-                        {config.map((entry, index) => (
-                            <div key={index} className="inline-flex items-center gap-2 px-3 py-1.5 bg-dashboard-card rounded-full border border-dashboard-border text-xs">
-                                <span className="font-medium text-dashboard-text">{entry.domain}</span>
-                                <span className="text-dashboard-text-secondary">→</span>
-                                <span>{AVAILABLE_LOCALES.find(l => l.code === entry.locale)?.flag}</span>
-                                <span className="text-dashboard-text-secondary">
-                                    {entry.allowUserOverride ? '' : '🔒'}
-                                </span>
-                            </div>
-                        ))}
-                    </div>
-                ) : (
-                    <p className="text-xs text-dashboard-text-secondary">
-                        No domain languages configured.
-                    </p>
-                )}
-            </div>
-            <button
-                onClick={onEdit}
-                className="mt-4 w-full flex items-center justify-center gap-2 px-4 py-2 bg-primary text-white rounded-xl text-xs font-bold uppercase tracking-wider hover:bg-primary/90 transition-colors"
-            >
-                <Edit3 size={14} />
-                {config?.length ? 'Edit Domains' : 'Add Domains'}
-            </button>
-        </section>
-    );
-}
-
-interface DomainLanguagesModalProps {
-    isOpen: boolean;
-    config: DomainLocaleConfig[];
-    onSave: (config: DomainLocaleConfig[]) => void;
-    onClose: () => void;
-    onSaveAndClose: (config: DomainLocaleConfig[]) => void;
-    isSaving?: boolean;
-}
-
-function DomainLanguagesModal({ isOpen, config, onSave, onClose, onSaveAndClose, isSaving = false }: DomainLanguagesModalProps) {
-    const [tempConfig, setTempConfig] = useState<DomainLocaleConfig[]>(config);
-    const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
-
-    useEffect(() => {
-        setTempConfig(config);
-        setExpandedIndex(null);
-    }, [config, isOpen]);
-
-    if (!isOpen) return null;
-
-    const handleAdd = () => {
-        setTempConfig([...tempConfig, { domain: '', locale: 'en', allowUserOverride: true }]);
-        setExpandedIndex(tempConfig.length);
-    };
+        );
+    }
 
-    const handleUpdate = (index: number, field: keyof DomainLocaleConfig, value: any) => {
-        const updated = [...tempConfig];
-        updated[index] = { ...updated[index], [field]: value };
-        setTempConfig(updated);
-    };
+    const hasLocales = settings.supportedLocales && settings.supportedLocales.length > 0;
 
-    const handleRemove = (index: number) => {
-        setTempConfig(tempConfig.filter((_, i) => i !== index));
-        if (expandedIndex === index) setExpandedIndex(null);
-    };
+    const navigationItems = [
+        { id: 'general', label: 'General', icon: Settings2, description: 'Status & Launch Date', localized: false },
+        { id: 'localization', label: 'Localization', icon: Globe, description: 'Languages & Domains', localized: false },
+        { id: 'seo', label: 'Identity & SEO', icon: Search, description: 'Site Name & Meta', localized: true },
+        { id: 'contact', label: 'Contact & Social', icon: Mail, description: 'Address & Links', localized: true },
+    ];
 
-    const toggleExpand = (index: number) => {
-        setExpandedIndex(expandedIndex === index ? null : index);
-    };
-
-    return (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-            <div className="bg-dashboard-bg rounded-3xl border border-dashboard-border w-full max-w-lg max-h-[80vh] overflow-hidden flex flex-col">
-                <div className="flex items-center justify-between p-6 border-b border-dashboard-border">
-                    <h2 className="text-xl font-bold text-dashboard-text">Domain Languages</h2>
-                    <button onClick={onClose} className="p-2 text-dashboard-text-secondary hover:text-dashboard-text transition-colors">
-                        <X size={20} />
-                    </button>
+    const renderMissingLocalesState = () => (
+        <div className="h-full flex items-center justify-center p-12">
+            <div className="max-w-md w-full text-center space-y-8">
+                <div className="size-24 bg-primary/15 rounded-[2rem] flex items-center justify-center mx-auto shadow-2xl shadow-primary/10 border border-primary/30">
+                    <Globe size={48} className="text-primary animate-pulse" />
                 </div>
-                <div className="flex-1 overflow-y-auto p-6 space-y-4">
-                    {/* Existing entries - collapsed by default */}
-                    {tempConfig.length > 0 && (
-                        <div className="space-y-2">
-                            <p className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-wider">Current Config</p>
-                            {tempConfig.map((entry, index) => (
-                                <div key={index} className="bg-dashboard-card rounded-xl border border-dashboard-border overflow-hidden">
-                                    <div
-                                        onClick={() => toggleExpand(index)}
-                                        className="w-full flex items-center justify-between p-3 text-left hover:bg-dashboard-border/50 transition-colors cursor-pointer"
-                                    >
-                                        <div className="flex items-center gap-2">
-                                            <span className="font-medium text-dashboard-text">{entry.domain || '(no domain)'}</span>
-                                            <span className="text-dashboard-text-secondary">→</span>
-                                            <span>{AVAILABLE_LOCALES.find(l => l.code === entry.locale)?.flag}</span>
-                                            {entry.allowUserOverride === false && <span className="text-dashboard-text-secondary">🔒</span>}
-                                        </div>
-                                        <div className="flex items-center gap-2">
-                                            <button
-                                                onClick={(e) => { e.stopPropagation(); handleRemove(index); }}
-                                                className="p-1 text-red-500 hover:bg-red-500/10 rounded transition-colors"
-                                                title="Remove"
-                                            >
-                                                <Trash2 size={14} />
-                                            </button>
-                                            <span className="text-dashboard-text-secondary text-xs">
-                                                {expandedIndex === index ? '▲' : '▼'}
-                                            </span>
-                                        </div>
-                                    </div>
-                                    {expandedIndex === index && (
-                                        <div className="p-3 pt-0 space-y-3 border-t border-dashboard-border">
-                                            <div className="space-y-1">
-                                                <label className="text-[10px] font-bold text-dashboard-text-secondary uppercase tracking-wider">Domain</label>
-                                                <input
-                                                    type="text"
-                                                    value={entry.domain}
-                                                    onChange={(e) => handleUpdate(index, 'domain', e.target.value)}
-                                                    placeholder="example.com"
-                                                    className="w-full px-3 py-2 bg-dashboard-bg border border-dashboard-border rounded-lg outline-none focus:ring-2 focus:ring-primary text-dashboard-text text-sm"
-                                                />
-                                            </div>
-                                            <div className="flex items-center gap-2">
-                                                <div className="flex-1 space-y-1">
-                                                    <label className="text-[10px] font-bold text-dashboard-text-secondary uppercase tracking-wider">Language</label>
-                                                    <select
-                                                        value={entry.locale}
-                                                        onChange={(e) => handleUpdate(index, 'locale', e.target.value)}
-                                                        className="w-full px-3 py-2 bg-dashboard-bg border border-dashboard-border rounded-lg outline-none focus:ring-2 focus:ring-primary text-dashboard-text text-sm"
-                                                    >
-                                                        {AVAILABLE_LOCALES.map(loc => (<option key={loc.code} value={loc.code}>{loc.flag} {loc.name}</option>))}
-                                                    </select>
-                                                </div>
-                                            </div>
-                                            <div className="flex items-center justify-between">
-                                                <label className="text-[10px] text-dashboard-text-secondary">Allow user to change</label>
-                                                <button
-                                                    onClick={() => handleUpdate(index, 'allowUserOverride', !entry.allowUserOverride)}
-                                                    className={`relative w-10 h-5 rounded-full transition-colors ${entry.allowUserOverride ? 'bg-primary' : 'bg-neutral-300 dark:bg-neutral-600'}`}
-                                                >
-                                                    <div className={`absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full transition-transform duration-200 ${entry.allowUserOverride ? 'translate-x-5' : 'translate-x-0'}`} />
-                                                </button>
-                                            </div>
-                                        </div>
-                                    )}
-                                </div>
-                            ))}
-                        </div>
-                    )}
-
-                    {/* Add new domain - always visible */}
-                    <div className="border-t border-dashboard-border pt-4">
-                        <p className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-wider mb-3">Add New Domain</p>
-                        <button 
-                            onClick={handleAdd} 
-                            className="w-full flex items-center justify-center gap-2 px-4 py-3 border-2 border-dashed border-dashboard-border text-dashboard-text-secondary hover:border-primary hover:text-primary rounded-xl transition-colors"
-                        >
-                            <Plus size={16} />
-                            Add Domain
-                        </button>
-                    </div>
-                    
-                    <p className="text-[10px] text-dashboard-text-secondary text-center pt-2">
-                        Configure which language to use per domain. E.g., botanicsandyou.nl → Dutch, botanicsandyou.se → Swedish.
+                <div className="space-y-4">
+                    <h3 className="text-3xl font-bold text-dashboard-text tracking-tight">Configuration Required</h3>
+                    <p className="text-sm text-dashboard-text-secondary font-medium leading-relaxed opacity-80">
+                        To manage localized content like site names and contact info, you first need to define which languages your website supports.
                     </p>
                 </div>
-                <div className="flex gap-3 p-6 border-t border-dashboard-border">
-                    <button onClick={onClose} className="flex-1 px-4 py-2 bg-dashboard-card text-dashboard-text rounded-xl text-sm font-bold hover:bg-dashboard-border transition-colors">
-                        Cancel
-                    </button>
-                    <button 
-                        onClick={() => onSaveAndClose(tempConfig)} 
-                        disabled={isSaving}
-                        className="flex-1 px-4 py-2 bg-primary text-white rounded-xl text-sm font-bold hover:bg-primary/90 transition-colors disabled:opacity-50"
-                    >
-                        {isSaving ? 'Saving...' : 'Save'}
-                    </button>
-                </div>
+                <button
+                    onClick={() => setCurrentTab('localization')}
+                    className="inline-flex items-center gap-3 px-8 py-4 bg-primary text-white rounded-2xl text-xs font-bold uppercase tracking-wider hover:bg-primary/90 transition-all shadow-lg shadow-primary/25 active:scale-95"
+                >
+                    Setup Languages Now
+                </button>
             </div>
         </div>
     );
-}
-
-// =============================================================================
-// Main Component
-// =============================================================================
-
-export function SettingsView({ siteId, locale }: SettingsViewProps) {
-    const [isLoading, setIsLoading] = useState(true);
-    const [isSaving, setIsSaving] = useState(false);
-    const [showSuccess, setShowSuccess] = useState(false);
-    const [activeTab, setActiveTab] = useState<SupportedLocale>('en');
-    const [showDomainModal, setShowDomainModal] = useState(false);
-    const [settings, setSettings] = useState<WebsiteSettings>({
-        identifier: 'site_config',
-        siteName: '',
-        siteTagline: '',
-        siteDescription: '',
-        keywords: '',
-        contactEmail: '',
-        phoneNumber: '',
-        physicalAddress: '',
-        smtpUser: '',
-        maintenanceMode: false,
-        launch_date: '',
-        socials: [],
-        localizedContactInfo: {
-            en: { physicalAddress: '', phoneNumber: '' },
-            sv: { physicalAddress: '', phoneNumber: '' },
-            nl: { physicalAddress: '', phoneNumber: '' },
-        },
-        localizedSocials: {
-            en: [],
-            sv: [],
-            nl: [],
-        },
-        domainLocaleConfig: [],
-    });
 
-    // Fetch settings on load
-    useEffect(() => {
-        const fetchSettings = async () => {
-            try {
-                setIsLoading(true);
-                const response = await fetch('/api/plugin-website/settings', { credentials: 'include' });
-                if (!response.ok) throw new Error('Failed to fetch settings');
-                const data = await response.json();
-                
-                if (data.siteName !== undefined) {
-                    let launchDate = '';
-                    if (data.launch_date) {
-                        const date = new Date(data.launch_date);
-                        if (!isNaN(date.getTime())) {
-                            const year = date.getFullYear();
-                            const month = String(date.getMonth() + 1).padStart(2, '0');
-                            const day = String(date.getDate()).padStart(2, '0');
-                            const hours = String(date.getHours()).padStart(2, '0');
-                            const minutes = String(date.getMinutes()).padStart(2, '0');
-                            launchDate = `${year}-${month}-${day}T${hours}:${minutes}`;
-                        }
-                    }
-
-                    setSettings({
-                        identifier: 'site_config',
-                        siteName: data.siteName || '',
-                        siteTagline: data.siteTagline || '',
-                        siteDescription: data.siteDescription || '',
-                        keywords: data.keywords || '',
-                        contactEmail: data.contactEmail || '',
-                        phoneNumber: data.phoneNumber || '',
-                        physicalAddress: data.physicalAddress || '',
-                        smtpUser: data.smtpUser || '',
-                        maintenanceMode: data.maintenanceMode ?? false,
-                        launch_date: launchDate,
-                        socials: data.socials || [],
-                        localizedContactInfo: data.localizedContactInfo || {
-                            en: { physicalAddress: '', phoneNumber: '' },
-                            sv: { physicalAddress: '', phoneNumber: '' },
-                            nl: { physicalAddress: '', phoneNumber: '' },
-                        },
-                        localizedSocials: data.localizedSocials || { en: [], sv: [], nl: [] },
-                        domainLocaleConfig: data.domainLocaleConfig || [],
-                    });
-                }
-            } catch (error) {
-                console.error('Failed to load settings:', error);
-            } finally {
-                setIsLoading(false);
-            }
-        };
-        fetchSettings();
-    }, []);
-
-    // Use ref to always get latest state
-    const settingsRef = useRef(settings);
-    useEffect(() => { settingsRef.current = settings; }, [settings]);
-
-    // Save settings
-    const handleSave = async () => {
-        try {
-            setIsSaving(true);
-            const currentSettings = settingsRef.current;
-            const settingsToSave: any = { ...currentSettings };
-            
-            if (currentSettings.launch_date && currentSettings.launch_date.trim() !== '') {
-                settingsToSave.launch_date = currentSettings.launch_date;
-            } else {
-                delete settingsToSave.launch_date;
-            }
-
-            const response = await fetch('/api/plugin-website/settings', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                credentials: 'include',
-                body: JSON.stringify(settingsToSave),
-            });
-
-            if (!response.ok) {
-                const error = await response.json();
-                throw new Error(error.error || 'Failed to save settings');
-            }
-
-            setShowSuccess(true);
-            setTimeout(() => setShowSuccess(false), 3000);
-        } catch (error: any) {
-            console.error('Failed to save settings:', error);
-            alert(error.message || 'Failed to save settings');
-        } finally {
-            setIsSaving(false);
+    const renderContent = () => {
+        // If trying to access localized tab without locales, show prompt
+        const activeItem = navigationItems.find(i => i.id === currentTab);
+        if (activeItem?.localized && !hasLocales) {
+            return renderMissingLocalesState();
         }
-    };
 
-    // Update localized contact info
-    const handleUpdateLocalizedContact = (field: 'physicalAddress' | 'phoneNumber', value: string) => {
-        setSettings({
-            ...settings,
-            localizedContactInfo: {
-                ...settings.localizedContactInfo,
-                [activeTab]: { ...settings.localizedContactInfo?.[activeTab], [field]: value },
-            },
-        });
-    };
-
-    // Social links handlers
-    const handleAddLocalizedSocial = () => {
-        const currentSocials = settings.localizedSocials?.[activeTab] || [];
-        const newId = currentSocials.length ? Math.max(...currentSocials.map(s => s.id)) + 1 : 1;
-        setSettings({
-            ...settings,
-            localizedSocials: {
-                ...settings.localizedSocials,
-                [activeTab]: [...currentSocials, { id: newId, platform: '', url: '' }],
-            },
-        });
-    };
-
-    const handleUpdateLocalizedSocial = (id: number, field: 'platform' | 'url', value: string) => {
-        const currentSocials = settings.localizedSocials?.[activeTab] || [];
-        setSettings({
-            ...settings,
-            localizedSocials: {
-                ...settings.localizedSocials,
-                [activeTab]: currentSocials.map(s => s.id === id ? { ...s, [field]: value } : s),
-            },
-        });
-    };
-
-    const handleRemoveLocalizedSocial = (id: number) => {
-        const currentSocials = settings.localizedSocials?.[activeTab] || [];
-        setSettings({
-            ...settings,
-            localizedSocials: {
-                ...settings.localizedSocials,
-                [activeTab]: currentSocials.filter(s => s.id !== id),
-            },
-        });
-    };
-
-    // Domain locale handlers
-    const openDomainModal = () => setShowDomainModal(true);
-    const closeDomainModal = () => setShowDomainModal(false);
-    const saveDomainConfig = (config: DomainLocaleConfig[]) => {
-        setSettings({ ...settings, domainLocaleConfig: config });
-        setShowDomainModal(false);
-    };
-    const saveDomainConfigAndClose = async (config: DomainLocaleConfig[]) => {
-        setSettings({ ...settings, domainLocaleConfig: config });
-        setShowDomainModal(false);
-        
-        // Immediately save to API
-        try {
-            const response = await fetch('/api/plugin-website/settings', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                credentials: 'include',
-                body: JSON.stringify({ ...settings, domainLocaleConfig: config }),
-            });
-            if (response.ok) {
-                setShowSuccess(true);
-                setTimeout(() => setShowSuccess(false), 3000);
-            }
-        } catch (error) {
-            console.error('Failed to save domain config:', error);
+        switch (currentTab) {
+            case 'general':
+                return (
+                    <div className="space-y-10 max-w-3xl">
+                        <StatusSection settings={settings} onUpdate={handleUpdateSettings} />
+                        <LaunchDateSection settings={settings} onUpdate={handleUpdateSettings} />
+                    </div>
+                );
+            case 'localization':
+                return (
+                    <div className="space-y-10 max-w-3xl">
+                        <LocalesManagementCard supportedLocales={settings.supportedLocales} onUpdate={handleUpdateLocales} />
+                        <DomainLanguagesCard config={settings.domainLocaleConfig || []} onEdit={() => setShowDomainModal(true)} />
+                    </div>
+                );
+            case 'seo':
+                return (
+                    <div className="max-w-3xl">
+                        <SeoIdentitySection
+                            settings={settings}
+                            activeTab={activeTab}
+                            onUpdateLocalized={handleUpdateLocalizedIdentity}
+                        />
+                    </div>
+                );
+            case 'contact':
+                return (
+                    <div className="max-w-3xl">
+                        <LocalizedContentSection
+                            settings={settings}
+                            activeTab={activeTab}
+                            onUpdateContact={handleUpdateLocalizedContact}
+                            onAddSocial={handleAddLocalizedSocial}
+                            onUpdateSocial={handleUpdateLocalizedSocial}
+                            onRemoveSocial={handleRemoveLocalizedSocial}
+                        />
+                    </div>
+                );
+            default:
+                return null;
         }
     };
 
-    if (isLoading) {
-        return (
-            <div className="h-full w-full bg-dashboard-card text-dashboard-text flex items-center justify-center">
-                <div className="text-center">
-                    <RefreshCw className="w-8 h-8 animate-spin text-primary mx-auto mb-4" />
-                    <p className="text-sm text-dashboard-text-secondary">Loading settings...</p>
-                </div>
-            </div>
-        );
-    }
-
     return (
-        <div className="h-full w-full rounded-[2.5rem] bg-dashboard-card p-8 overflow-y-auto">
-            <div className="max-w-6xl mx-auto">
-                {/* Header */}
-                <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
-                    <div>
-                        <h1 className="text-3xl font-black text-dashboard-text uppercase tracking-tighter mb-2">
-                            Website Settings
-                        </h1>
-                        <p className="text-sm text-dashboard-text-secondary">
-                            Manage your website identity, contact information, and social links
+        <div className="absolute inset-0 w-full flex overflow-hidden bg-dashboard-bg/50">
+            {/* Sidebar Navigation */}
+            <aside className="w-80 bg-dashboard-card/40 backdrop-blur-2xl border-r border-dashboard-border/60 flex flex-col p-6 flex-shrink-0 h-full">
+                <div className="mb-12 px-2 shrink-0 pt-8">
+                    <h1 className="text-3xl font-bold text-dashboard-text tracking-tight flex items-center gap-3">
+                        <div className="size-8 bg-primary rounded-lg flex items-center justify-center shadow-lg shadow-primary/20">
+                            <Settings2 size={18} className="text-white" />
+                        </div>
+                        Settings
+                    </h1>
+                    <div className="flex items-center gap-2 mt-3 ml-11">
+                        <p className="text-[10px] font-bold text-primary/80 uppercase tracking-widest">
+                            Website Engine
                         </p>
+                        {isDirty && (
+                            <span className="flex size-2 rounded-full bg-amber-500 animate-pulse shadow-[0_0_8px_rgba(245,158,11,0.5)]" title="Unsaved changes" />
+                        )}
                     </div>
+                </div>
+
+                <nav className="space-y-2 flex-1 overflow-y-auto custom-scrollbar pr-2">
+                    {navigationItems.map((item) => {
+                        const Icon = item.icon;
+                        const isActive = currentTab === item.id;
+                        const isLocked = item.localized && !hasLocales;
+
+                        return (
+                            <button
+                                key={item.id}
+                                onClick={() => !isLocked && setCurrentTab(item.id as SettingsTab)}
+                                className={`w-full flex items-center gap-4 p-4 rounded-2xl transition-all text-left group relative ${isActive
+                                    ? 'bg-primary text-white shadow-xl shadow-primary/25 border border-primary/20'
+                                    : 'hover:bg-primary/8 text-dashboard-text-secondary hover:text-primary border border-transparent'
+                                    } ${isLocked ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}`}
+                            >
+                                <div className={`flex items-center justify-center shrink-0 transition-transform duration-300 ${isActive ? 'scale-110' : 'group-hover:scale-110'}`}>
+                                    <Icon size={20} className={isActive ? 'text-white' : 'text-primary/60 group-hover:text-primary'} />
+                                </div>
+                                <div className="flex-1 min-w-0">
+                                    <div className="flex items-center justify-between">
+                                        <span className={`block text-sm font-semibold tracking-tight truncate ${isActive ? 'text-white' : 'text-dashboard-text'}`}>
+                                            {item.label}
+                                        </span>
+                                        {isLocked && <LockIcon size={12} className="text-dashboard-text-secondary opacity-50" />}
+                                    </div>
+                                    <span className={`text-[10px] font-medium opacity-70 truncate block mt-0.5 ${isActive ? 'text-white/80' : 'text-dashboard-text-secondary'}`}>
+                                        {item.description}
+                                    </span>
+                                </div>
+                            </button>
+                        );
+                    })}
+                </nav>
+
+                <div className="mt-auto space-y-4 pt-8 border-t border-dashboard-border/40">
+                    {isDirty && (
+                        <button
+                            onClick={handleReset}
+                            className="w-full py-3 rounded-xl text-xs font-bold text-dashboard-text-secondary hover:text-dashboard-text hover:bg-dashboard-card/60 transition-all active:scale-[0.98]"
+                        >
+                            Discard Changes
+                        </button>
+                    )}
                     <button
                         onClick={handleSave}
                         disabled={isSaving}
-                        className={`inline-flex items-center gap-2 px-6 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-all shadow-lg shadow-primary/20 ${
-                            isSaving ? 'bg-neutral-400 text-white cursor-not-allowed' :
-                            showSuccess ? 'bg-green-600 text-white' :
-                            'bg-primary text-white hover:bg-primary/90'
-                        }`}
+                        className={`w-full flex items-center justify-center gap-3 py-4 rounded-2xl text-sm font-bold transition-all active:scale-[0.98] ${isSaving ? 'bg-neutral-200 dark:bg-neutral-800 text-neutral-400 cursor-not-allowed' :
+                            showSuccess ? 'bg-emerald-500 text-white shadow-lg shadow-emerald-500/20' :
+                                isDirty ? 'bg-primary text-white hover:bg-primary/90 shadow-xl shadow-primary/30' :
+                                    'bg-neutral-100 dark:bg-neutral-800/40 text-dashboard-text-secondary opacity-40 cursor-not-allowed'
+                            }`}
                     >
-                        {isSaving ? <><RefreshCw className="w-4 h-4 animate-spin" /> Saving...</> :
-                         showSuccess ? <><Settings2 className="w-4 h-4" /> Saved!</> :
-                         <><Save className="w-4 h-4" /> Save Settings</>}
+                        {isSaving ? <RefreshCw className="w-4 h-4 animate-spin" /> :
+                            showSuccess ? <Check className="w-4 h-4" /> :
+                                <Save className="w-4 h-4" />}
+                        {isSaving ? 'Saving...' : showSuccess ? 'Saved!' : 'Save Changes'}
                     </button>
                 </div>
+            </aside>
 
-                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-                    {/* Main Content */}
-                    <div className="lg:col-span-2 space-y-8">
-                        {/* SEO & Website Identity */}
-                        <section className="bg-dashboard-bg p-8 rounded-3xl border border-dashboard-border">
-                            <div className="flex items-center gap-2 font-bold text-dashboard-text border-b border-dashboard-border pb-4 mb-6">
-                                <Search size={20} className="text-primary" />
-                                Website Identity & SEO
-                            </div>
-                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                                <div className="space-y-2">
-                                    <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest">Website Name</label>
-                                    <input
-                                        type="text"
-                                        value={settings.siteName || ''}
-                                        onChange={(e) => setSettings({ ...settings, siteName: e.target.value })}
-                                        placeholder="e.g., Botanics & You"
-                                        className="w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text"
-                                    />
-                                </div>
-                                <div className="space-y-2">
-                                    <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest">Website Tagline</label>
-                                    <input
-                                        type="text"
-                                        value={settings.siteTagline || ''}
-                                        onChange={(e) => setSettings({ ...settings, siteTagline: e.target.value })}
-                                        placeholder="e.g., Sharing my knowledge with you"
-                                        className="w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text"
-                                    />
-                                </div>
-                            </div>
-                            <div className="mt-6 space-y-2">
-                                <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest">Website Description</label>
-                                <textarea
-                                    value={settings.siteDescription || ''}
-                                    onChange={(e) => setSettings({ ...settings, siteDescription: e.target.value })}
-                                    placeholder="A brief description of your website"
-                                    rows={3}
-                                    className="w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text resize-none"
-                                />
-                            </div>
-                            <div className="mt-6 space-y-2">
-                                <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest">Keywords (comma-separated)</label>
-                                <input
-                                    type="text"
-                                    value={settings.keywords || ''}
-                                    onChange={(e) => setSettings({ ...settings, keywords: e.target.value })}
-                                    placeholder="keyword1, keyword2, keyword3"
-                                    className="w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text"
-                                />
-                            </div>
-                        </section>
-
-                        {/* Contact Information */}
-                        <section className="bg-dashboard-bg p-8 rounded-3xl border border-dashboard-border">
-                            <div className="flex items-center gap-2 font-bold text-dashboard-text border-b border-dashboard-border pb-4 mb-6">
-                                <Mail size={20} className="text-primary" />
-                                Contact Information
-                            </div>
-                            <div className="flex gap-2 mb-6">
-                                {AVAILABLE_LOCALES.map((loc) => (
-                                    <button
-                                        key={loc.code}
-                                        onClick={() => setActiveTab(loc.code)}
-                                        className={`px-4 py-2 rounded-full text-xs font-bold uppercase tracking-widest transition-all ${
-                                            activeTab === loc.code ? 'bg-primary text-white' : 'bg-dashboard-card text-dashboard-text-secondary hover:bg-dashboard-border'
-                                        }`}
-                                    >
-                                        <span className="mr-1">{loc.flag}</span>
-                                        {loc.code.toUpperCase()}
-                                    </button>
-                                ))}
-                            </div>
-                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                                <div className="space-y-2">
-                                    <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest">Contact Email (global)</label>
-                                    <input
-                                        type="email"
-                                        value={settings.contactEmail || ''}
-                                        onChange={(e) => setSettings({ ...settings, contactEmail: e.target.value })}
-                                        placeholder="contact@example.com"
-                                        className="w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text"
-                                    />
-                                </div>
-                                <div className="space-y-2">
-                                    <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest">Phone Number ({activeTab.toUpperCase()})</label>
-                                    <input
-                                        type="tel"
-                                        value={settings.localizedContactInfo?.[activeTab]?.phoneNumber || settings.phoneNumber || ''}
-                                        onChange={(e) => handleUpdateLocalizedContact('phoneNumber', e.target.value)}
-                                        placeholder="+31 6 12345678"
-                                        className="w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text"
-                                    />
-                                </div>
-                            </div>
-                            <div className="mt-6 space-y-2">
-                                <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest">Physical Address ({activeTab.toUpperCase()})</label>
-                                <textarea
-                                    value={settings.localizedContactInfo?.[activeTab]?.physicalAddress || settings.physicalAddress || ''}
-                                    onChange={(e) => handleUpdateLocalizedContact('physicalAddress', e.target.value)}
-                                    placeholder="Street address, City, Country"
-                                    rows={2}
-                                    className="w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text resize-none"
-                                />
-                            </div>
-                        </section>
-
-                        {/* Social Links (Localized) */}
-                        <section className="bg-dashboard-bg p-8 rounded-3xl border border-dashboard-border">
-                            <div className="flex items-center justify-between border-b border-dashboard-border pb-4 mb-6">
-                                <div className="flex items-center gap-2 font-bold text-dashboard-text">
-                                    <Globe size={20} className="text-primary" />
-                                    Social Links ({activeTab.toUpperCase()})
-                                </div>
-                                <button onClick={handleAddLocalizedSocial} className="px-4 py-2 text-xs font-bold uppercase tracking-widest bg-primary text-white rounded-full hover:bg-primary/90 transition-all">
-                                    Add Social
-                                </button>
-                            </div>
-                            <div className="flex gap-2 mb-6">
-                                {AVAILABLE_LOCALES.map((loc) => (
-                                    <button
-                                        key={loc.code}
-                                        onClick={() => setActiveTab(loc.code)}
-                                        className={`px-4 py-2 rounded-full text-xs font-bold uppercase tracking-widest transition-all ${
-                                            activeTab === loc.code ? 'bg-primary text-white' : 'bg-dashboard-card text-dashboard-text-secondary hover:bg-dashboard-border'
-                                        }`}
-                                    >
-                                        <span className="mr-1">{loc.flag}</span>
-                                        {loc.code.toUpperCase()}
-                                    </button>
-                                ))}
-                            </div>
-                            <div className="space-y-4">
-                                {(() => {
-                                    const currentSocials = settings.localizedSocials?.[activeTab] || [];
-                                    return currentSocials.length > 0 ? (
-                                        currentSocials.map((social) => {
-                                            const platform = AVAILABLE_PLATFORMS.find(p => p.name === social.platform);
-                                            return (
-                                                <div key={social.id} className="flex items-center gap-4 p-4 bg-dashboard-card rounded-2xl border border-dashboard-border">
-                                                    <div className="flex-shrink-0 text-dashboard-text-secondary">
-                                                        {platform?.icon || <Globe size={18} />}
-                                                    </div>
-                                                    <select
-                                                        value={social.platform}
-                                                        onChange={(e) => handleUpdateLocalizedSocial(social.id, 'platform', e.target.value)}
-                                                        className="flex-1 px-4 py-2 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text"
-                                                    >
-                                                        <option value="">Select Platform</option>
-                                                        {AVAILABLE_PLATFORMS.map(p => (<option key={p.name} value={p.name}>{p.name}</option>))}
-                                                    </select>
-                                                    <input
-                                                        type="url"
-                                                        value={social.url}
-                                                        onChange={(e) => handleUpdateLocalizedSocial(social.id, 'url', e.target.value)}
-                                                        placeholder="https://..."
-                                                        className="flex-1 px-4 py-2 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text"
-                                                    />
-                                                    <button onClick={() => handleRemoveLocalizedSocial(social.id)} className="px-4 py-2 text-xs font-bold text-red-500 hover:text-red-700 transition-colors">
-                                                        Remove
-                                                    </button>
-                                                </div>
-                                            );
-                                        })
-                                    ) : (
-                                        <p className="text-sm text-dashboard-text-secondary text-center py-8">
-                                            No social links added for {activeTab.toUpperCase()}. Click "Add Social" to get started.
-                                        </p>
-                                    );
-                                })()}
-                            </div>
-                        </section>
+            {/* Main Content Area */}
+            <main className="flex-1 flex flex-col min-w-0 bg-transparent">
+                {/* Header */}
+                <div className="h-24 px-12 flex items-center justify-between shrink-0 z-10 bg-dashboard-bg/20 backdrop-blur-sm border-b border-dashboard-border/30">
+                    <div className="flex items-center gap-6">
+                        <div className="h-10 w-1.5 bg-primary rounded-full shadow-[0_0_10px_rgba(var(--color-primary),0.3)]" />
+                        <div>
+                            <h2 className="text-2xl font-bold text-dashboard-text tracking-tight leading-none mb-1.5">
+                                {navigationItems.find(i => i.id === currentTab)?.label}
+                            </h2>
+                            <p className="text-xs font-medium text-dashboard-text-secondary opacity-80">
+                                {navigationItems.find(i => i.id === currentTab)?.description}
+                            </p>
+                        </div>
                     </div>
 
-                    {/* Sidebar */}
-                    <div className="space-y-8">
-                        {/* Maintenance Mode */}
-                        <section className="bg-dashboard-bg p-6 rounded-3xl border border-dashboard-border">
-                            <div className="flex items-center gap-2 font-bold text-dashboard-text border-b border-dashboard-border pb-4 mb-6">
-                                <Settings2 size={18} className="text-primary" />
-                                Maintenance
-                            </div>
-                            <div className="flex items-center justify-between">
-                                <div>
-                                    <label className="text-xs font-bold text-dashboard-text block mb-1">Maintenance Mode</label>
-                                    <p className="text-[10px] text-dashboard-text-secondary">Show maintenance page to visitors</p>
-                                </div>
+                    {/* Global Language Switcher - Only visible for localized tabs */}
+                    {(currentTab === 'seo' || currentTab === 'contact') && (
+                        <div className="flex gap-1.5 p-1.5 bg-dashboard-card/50 backdrop-blur-md rounded-2xl border border-dashboard-border/40 shadow-sm">
+                            {activeLocales.map((loc) => (
                                 <button
-                                    onClick={() => setSettings({ ...settings, maintenanceMode: !settings.maintenanceMode })}
-                                    className={`relative w-12 h-6 rounded-full transition-colors ${settings.maintenanceMode ? 'bg-primary' : 'bg-neutral-200 dark:bg-neutral-700'}`}
+                                    key={loc.code}
+                                    onClick={() => setActiveTab(loc.code)}
+                                    className={`px-4 py-2 rounded-xl text-xs font-bold transition-all flex items-center gap-2.5 ${activeTab === loc.code
+                                        ? 'bg-primary text-white shadow-md'
+                                        : 'text-dashboard-text-secondary hover:text-dashboard-text hover:bg-dashboard-card/80'
+                                        }`}
                                 >
-                                    <div className={`absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform duration-200 ${settings.maintenanceMode ? 'translate-x-6' : 'translate-x-0'}`} />
+                                    <FlagIcon code={loc.code} countryCode={loc.countryCode} />
+                                    {loc.code.toUpperCase()}
                                 </button>
-                            </div>
-                        </section>
-
-                        {/* Launch Date */}
-                        <section className="bg-dashboard-bg p-6 rounded-3xl border border-dashboard-border">
-                            <div className="flex items-center gap-2 font-bold text-dashboard-text border-b border-dashboard-border pb-4 mb-6">
-                                <Calendar size={18} className="text-primary" />
-                                Launch Date
-                            </div>
-                            <div className="space-y-4">
-                                <div className="space-y-2">
-                                    <label className="text-xs font-bold text-dashboard-text block">Date</label>
-                                    <input
-                                        type="date"
-                                        value={settings.launch_date ? settings.launch_date.split('T')[0] : ''}
-                                        onChange={(e) => {
-                                            const dateValue = e.target.value;
-                                            const currentTime = settings.launch_date?.includes('T') ? settings.launch_date.split('T')[1] : '00:00';
-                                            setSettings(prev => ({ ...prev, launch_date: dateValue ? `${dateValue}T${currentTime}` : '' }));
-                                        }}
-                                        className="w-full px-4 py-2 bg-dashboard-card border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text"
-                                    />
-                                </div>
-                                <div className="space-y-2">
-                                    <label className="text-xs font-bold text-dashboard-text block">Time (24-hour format)</label>
-                                    <input
-                                        type="time"
-                                        step="60"
-                                        value={settings.launch_date?.includes('T') ? settings.launch_date.split('T')[1] : '00:00'}
-                                        onChange={(e) => {
-                                            const timeValue = e.target.value;
-                                            const currentDate = settings.launch_date?.includes('T') ? settings.launch_date.split('T')[0] : new Date().toISOString().split('T')[0];
-                                            setSettings(prev => ({ ...prev, launch_date: timeValue ? `${currentDate}T${timeValue}` : '' }));
-                                        }}
-                                        className="w-full px-4 py-2 bg-dashboard-card border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text"
-                                    />
-                                </div>
-                                <p className="text-[10px] text-dashboard-text-secondary">Used for countdown timers.</p>
-                            </div>
-                        </section>
+                            ))}
+                        </div>
+                    )}
+                </div>
 
-                        {/* Domain Languages Card */}
-                        <DomainLanguagesCard config={settings.domainLocaleConfig || []} onEdit={openDomainModal} />
+                {/* Content */}
+                <div className="flex-1 overflow-y-auto px-12 pb-12 pt-6 custom-scrollbar">
+                    <div className="max-w-4xl">
+                        {renderContent()}
                     </div>
                 </div>
-            </div>
+            </main>
+
 
-            {/* Domain Languages Modal */}
+            {/* Modals */}
             <DomainLanguagesModal
                 isOpen={showDomainModal}
                 config={settings.domainLocaleConfig || []}
-                onSave={saveDomainConfig}
+                supportedLocales={activeLocales}
+                onClose={() => setShowDomainModal(false)}
                 onSaveAndClose={saveDomainConfigAndClose}
-                onClose={closeDomainModal}
                 isSaving={isSaving}
             />
         </div>