/**
 * EN: Mood Board - Design System Showcase
 * VI: Mood Board - Showcase Design System
 *
 * A comprehensive showcase of all UI components and design tokens
 * Một trang showcase toàn diện cho tất cả UI components và design tokens
 */
import { Metadata } from 'next';
import { ThemeToggle } from '@/features/theme/components/theme-toggle-enhanced';
import TypographySection from './sections/TypographySection';
import ColorPaletteSection from './sections/ColorPaletteSection';
import SpacingSection from './sections/SpacingSection';
import GlassEffectsSection from './sections/GlassEffectsSection';
import ButtonsSection from './sections/ButtonsSection';

export const metadata: Metadata = {
    title: 'Mood Board | Design System Showcase',
    description: 'Comprehensive showcase of all UI components and design tokens',
};

export default function MoodBoardPage() {
    return (
        <div className="min-h-screen bg-bg-primary">
            {/* EN: Header with sticky navigation / VI: Header với navigation sticky */}
            <header className="glass-nav sticky top-0 z-50 p-6">
                <div className="container-responsive flex items-center justify-between">
                    <div>
                        <h1 className="text-4xl font-extrabold tracking-tight text-text-primary">
                            Mood Board
                        </h1>
                        <p className="text-text-secondary mt-2">
                            Design System Showcase - All Components & Tokens
                        </p>
                    </div>

                    {/* EN: Theme Toggle / VI: Theme Toggle */}
                    <ThemeToggle />
                </div>
            </header>

            {/* EN: Main content with all sections / VI: Nội dung chính với tất cả sections */}
            <main className="container-responsive py-12 space-y-16">
                <TypographySection />
                <ColorPaletteSection />
                <SpacingSection />
                <GlassEffectsSection />
                <ButtonsSection />
            </main>

            {/* EN: Footer / VI: Footer */}
            <footer className="border-t border-border-primary p-6 text-center text-text-tertiary">
                <p>Design System v1.0.0 - X.ai Minimalist Theme</p>
            </footer>
        </div>
    );
}
