/**
 * EN: Glass Effects Section - All glassmorphism utilities
 * VI: Glass Effects Section - Tất cả glassmorphism utilities
 */
import SectionWrapper from '@/features/mood-board/components/SectionWrapper';
import ComponentShowcase from '@/features/mood-board/components/ComponentShowcase';

export default function GlassEffectsSection() {
    return (
        <SectionWrapper
            id="glass-effects"
            title="Glassmorphism Effects"
            description="All glass utilities from glass.css (X.ai Minimal Style)"
        >
            {/* EN: Glass Card / VI: Glass Card */}
            <ComponentShowcase
                title="Glass Card"
                description="Default glass card with subtle blur and border"
                code={`<div className="glass-card p-6">
  <h3 className="text-xl font-semibold">Glass Card</h3>
  <p>Ultra-minimal glassmorphism effect</p>
</div>`}
                darkBg
            >
                <div className="glass-card p-6 max-w-md">
                    <h3 className="text-xl font-semibold text-text-primary mb-2">
                        Glass Card
                    </h3>
                    <p className="text-text-secondary">
                        Ultra-minimal glassmorphism effect with 4% opacity background and 8px
                        blur.
                    </p>
                </div>
            </ComponentShowcase>

            {/* EN: Glass Variants / VI: Glass Variants */}
            <ComponentShowcase
                title="Glass Variants"
                description="Different glass effect intensities"
                code={`<div className="glass-subtle">Subtle (1% bg, 4px blur)</div>
<div className="glass-card">Default (4% bg, 8px blur)</div>
<div className="glass-strong">Strong (5% bg, 12px blur)</div>`}
                darkBg
            >
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div className="glass-subtle p-6 rounded-lg border border-glass-border-subtle">
                        <h4 className="font-semibold text-text-primary mb-2">
                            Glass Subtle
                        </h4>
                        <p className="text-sm text-text-secondary">
                            1% bg, 4px blur
                        </p>
                    </div>
                    <div className="glass-card p-6">
                        <h4 className="font-semibold text-text-primary mb-2">
                            Glass Card (Default)
                        </h4>
                        <p className="text-sm text-text-secondary">
                            4% bg, 8px blur
                        </p>
                    </div>
                    <div className="glass-strong p-6 rounded-lg">
                        <h4 className="font-semibold text-text-primary mb-2">
                            Glass Strong
                        </h4>
                        <p className="text-sm text-text-secondary">
                            5% bg, 12px blur
                        </p>
                    </div>
                </div>
            </ComponentShowcase>

            {/* EN: Glass Button / VI: Glass Button */}
            <ComponentShowcase
                title="Glass Button"
                description="Interactive glass button with hover/active states"
                code={`<button className="glass-button">
  Click Me
</button>`}
                darkBg
            >
                <div className="flex gap-4 flex-wrap">
                    <button className="glass-button">Default Button</button>
                    <button className="glass-button" disabled>
                        Disabled Button
                    </button>
                    <button className="glass-button px-6 py-3">Larger Button</button>
                </div>
            </ComponentShowcase>

            {/* EN: Glass Input / VI: Glass Input */}
            <ComponentShowcase
                title="Glass Input"
                description="Glass input with focus states"
                code={`<input
  type="text"
  placeholder="Enter text..."
  className="glass-input w-full rounded-md px-4 py-2"
/>`}
                darkBg
            >
                <div className="space-y-4 max-w-md">
                    <input
                        type="text"
                        placeholder="Glass input..."
                        className="glass-input w-full rounded-md px-4 py-2 text-text-primary"
                    />
                    <input
                        type="email"
                        placeholder="Email address..."
                        className="glass-input w-full rounded-md px-4 py-2 text-text-primary"
                    />
                </div>
            </ComponentShowcase>

            {/* EN: Glass Badge / VI: Glass Badge */}
            <ComponentShowcase
                title="Glass Badge"
                description="Small glass badges for tags and labels"
                code={`<span className="glass-badge">Design</span>
<span className="glass-badge">Development</span>`}
                darkBg
            >
                <div className="flex gap-2 flex-wrap">
                    <span className="glass-badge">Design</span>
                    <span className="glass-badge">Development</span>
                    <span className="glass-badge">X.ai Minimal</span>
                    <span className="glass-badge">Glassmorphism</span>
                </div>
            </ComponentShowcase>
        </SectionWrapper>
    );
}
