/**
 * EN: Typography Section - Font scales, weights, letter spacing showcase
 * VI: Typography Section - Showcase font scales, weights, letter spacing
 */
import SectionWrapper from '@/features/mood-board/components/SectionWrapper';
import ComponentShowcase from '@/features/mood-board/components/ComponentShowcase';

export default function TypographySection() {
    return (
        <SectionWrapper
            id="typography"
            title="Typography"
            description="Font scales, weights, line heights, and letter spacing from Design System"
        >
            {/* EN: Font Sizes / VI: Font Sizes */}
            <ComponentShowcase
                title="Type Scale"
                description="All font sizes from --text-xs (12px) to --text-6xl (56px)"
                code={`<h1 className="text-6xl font-extrabold">Hero Title (56px)</h1>
<h2 className="text-5xl font-bold">Page Title (44px)</h2>
<h3 className="text-4xl font-semibold">Section Header (36px)</h3>
<p className="text-base">Body Text (16px)</p>
<span className="text-xs">Caption (12px)</span>`}
            >
                <div className="space-y-4">
                    <p className="text-6xl font-extrabold text-text-primary">
                        Hero Title (--text-6xl)
                    </p>
                    <p className="text-5xl font-bold text-text-primary">
                        Page Title (--text-5xl)
                    </p>
                    <p className="text-4xl font-semibold text-text-primary">
                        Section Header (--text-4xl)
                    </p>
                    <p className="text-3xl font-semibold text-text-primary">
                        Card Header (--text-3xl)
                    </p>
                    <p className="text-2xl text-text-primary">Large Body (--text-2xl)</p>
                    <p className="text-xl text-text-primary">Emphasized (--text-xl)</p>
                    <p className="text-lg text-text-primary">Large Body (--text-lg)</p>
                    <p className="text-base text-text-primary">
                        Default Body (--text-base)
                    </p>
                    <p className="text-sm text-text-secondary">Small Text (--text-sm)</p>
                    <p className="text-xs text-text-tertiary">Caption (--text-xs)</p>
                </div>
            </ComponentShowcase>

            {/* EN: Font Weights / VI: Font Weights */}
            <ComponentShowcase
                title="Font Weights"
                description="All weight variants for typography hierarchy (100-900)"
                code={`<p className="font-thin">Thin (100)</p>
<p className="font-light">Light (300)</p>
<p className="font-normal">Normal (400)</p>
<p className="font-medium">Medium (500)</p>
<p className="font-semibold">Semibold (600)</p>
<p className="font-bold">Bold (700)</p>
<p className="font-extrabold">Extra Bold (800)</p>
<p className="font-black">Black (900)</p>`}
            >
                <div className="space-y-2 text-2xl text-text-primary">
                    <p className="font-thin">Thin (--font-thin: 100)</p>
                    <p className="font-extralight">
                        Extra Light (--font-extralight: 200)
                    </p>
                    <p className="font-light">Light (--font-light: 300)</p>
                    <p className="font-normal">Normal (--font-normal: 400)</p>
                    <p className="font-medium">Medium (--font-medium: 500)</p>
                    <p className="font-semibold">Semibold (--font-semibold: 600)</p>
                    <p className="font-bold">Bold (--font-bold: 700)</p>
                    <p className="font-extrabold">Extra Bold (--font-extrabold: 800)</p>
                    <p className="font-black">Black (--font-black: 900)</p>
                </div>
            </ComponentShowcase>

            {/* EN: Letter Spacing / VI: Letter Spacing */}
            <ComponentShowcase
                title="Letter Spacing (Tracking)"
                description="Tracking variants for clean, minimal aesthetics"
                code={`<p className="tracking-tighter">Very Tight (-0.04em)</p>
<p className="tracking-tight">Tight (-0.02em)</p>
<p className="tracking-normal">Normal (0)</p>
<p className="tracking-wide">Wide (0.02em)</p>
<p className="tracking-wider">Wider (0.04em)</p>`}
            >
                <div className="space-y-2 text-2xl text-text-primary">
                    <p className="tracking-tighter">
                        Very Tight (--tracking-tighter: -0.04em)
                    </p>
                    <p className="tracking-tight">
                        Tight (--tracking-tight: -0.02em)
                    </p>
                    <p className="tracking-normal">Normal (--tracking-normal: 0)</p>
                    <p className="tracking-wide">Wide (--tracking-wide: 0.02em)</p>
                    <p className="tracking-wider">Wider (--tracking-wider: 0.04em)</p>
                </div>
            </ComponentShowcase>
        </SectionWrapper>
    );
}
