Footer Description

updateSetting('footer', 'description', e.target.value)}
                                    className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                                />
                            </div>
                            <div className="space-y-1.5">
                                <Label>Copyright Text</Label>
                                <Input
                                    value={getSetting('footer', 'copyright')?.value ?? ''}
                                    onChange={(e) => updateSetting('footer', 'copyright', e.target.value)}
                                    placeholder="Use {year} for dynamic year"
                                />
                                <p className="text-xs text-slate-400">Use <code>{'{year}'}</code> to auto-insert current year.</p>
                            </div>
                            <div className="grid gap-4 sm:grid-cols-3">
                                <div className="space-y-1.5">
                                    <Label>Facebook URL</Label>
                                    <Input
                                        value={getSetting('footer', 'facebook')?.value ?? ''}
                                        onChange={(e) => updateSetting('footer', 'facebook', e.target.value)}
                                        placeholder="https://facebook.com/..."
                                    />
                                </div>
                                <div className="space-y-1.5">
                                    <Label>Instagram URL</Label>
                                    <Input
                                        value={getSetting('footer', 'instagram')?.value ?? ''}
                                        onChange={(e) => updateSetting('footer', 'instagram', e.target.value)}
                                        placeholder="https://instagram.com/..."
                                    />
                                </div>
                                <div className="space-y-1.5">
                                    <Label>YouTube URL</Label>
                                    <Input
                                        value={getSetting('footer', 'youtube')?.value ?? ''}
                                        onChange={(e) => updateSetting('footer', 'youtube', e.target.value)}
                                        placeholder="https://youtube.com/..."
                                    />
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                )}

{/* Pages */}
                {activeTab === 'pages' && (
                    <div className="space-y-4">
                        <Card>
                            <CardHeader><CardTitle className="text-base">Page Visibility</CardTitle></CardHeader>
                            <CardContent className="space-y-4">
                                <div className="flex items-center justify-between rounded-xl border border-slate-200 p-4">
                                    <div>
                                        <p className="font-medium text-slate-800">About Us Page</p>
                                        <p className="text-sm text-slate-500">Show or hide the /about page and its nav link</p>
                                    </div>
                                    <ToggleSwitch
                                        checked={getSetting('pages', 'show_about')?.value === '1'}
                                        onChange={(v) => updateSetting('pages', 'show_about', v ? '1' : '0')}
                                    />
                                </div>
                                <div className="flex items-center justify-between rounded-xl border border-slate-200 p-4">
                                    <div>
                                        <p className="font-medium text-slate-800">Blog Page</p>
                                        <p className="text-sm text-slate-500">Show or hide the /blog page and its nav link</p>
                                    </div>
                                    <ToggleSwitch
                                        checked={getSetting('pages', 'show_blog')?.value === '1'}
                                        onChange={(v) => updateSetting('pages', 'show_blog', v ? '1' : '0')}
                                    />
                                </div>
                            </CardContent>
                        </Card>

<Card>
                            <CardHeader>
                                <div className="flex items-center justify-between">
                                    <CardTitle className="text-base">About Us Content</CardTitle>
                                    <a href="/about" target="_blank" className="flex items-center gap-1 text-xs text-indigo-600 hover:underline">
                                        <Eye size={13} /> Preview
                                    </a>
                                </div>
                            </CardHeader>
                            <CardContent>
                                <textarea
                                    rows={8}
                                    value={getSetting('pages', 'about_content')?.value ?? ''}
                                    onChange={(e) => updateSetting('pages', 'about_content', e.target.value)}
                                    className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                                    placeholder="Write your about us content here. Use new lines for paragraphs."
                                />
                            </CardContent>
                        </Card>
                    </div>
                )}

<Button type="submit" className="bg-indigo-600 hover:bg-indigo-700" disabled={processing}>
                    {processing ? 'Saving…' : 'Save Settings'}
                </Button>
            </form>
        </AdminLayout>
    );
}