import { Button, Card, Input, ProgressBar } from '@veza/design-system';

/**
 * Demo page to showcase Kōdō Design System components
 * This page demonstrates the integration of the design system in V1
 */
export default function DesignSystemDemoPage() {
  return (
    <div className="min-h-screen bg-kodo-void text-kodo-primary p-8">
      <div className="max-w-6xl mx-auto space-y-12">
        {/* Header */}
        <header className="text-center space-y-4">
          <h1 className="text-5xl font-display font-bold text-white">
            Kōdō Design System
          </h1>
          <p className="text-xl text-kodo-secondary">
            Spectre Astral • Premium Components
          </p>
        </header>

        {/* Buttons Section */}
        <section className="space-y-6">
          <h2 className="text-3xl font-heading font-bold text-white border-b border-kodo-steel pb-2">
            Buttons
          </h2>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            <Button variant="primary">Primary</Button>
            <Button variant="secondary">Secondary</Button>
            <Button variant="ghost">Ghost</Button>
            <Button variant="gaming">Premium</Button>
            <Button variant="terminal">Terminal</Button>
            <Button variant="nature">Success</Button>
            <Button variant="primary" size="sm">
              Small
            </Button>
            <Button variant="primary" size="lg">
              Large
            </Button>
          </div>
        </section>

        {/* Cards Section */}
        <section className="space-y-6">
          <h2 className="text-3xl font-heading font-bold text-white border-b border-kodo-steel pb-2">
            Cards
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <Card variant="default">
              <h3 className="text-lg font-bold text-white mb-2">
                Default Card
              </h3>
              <p className="text-kodo-secondary text-sm">
                Standard card with subtle borders
              </p>
            </Card>
            <Card variant="manga">
              <h3 className="text-lg font-bold text-white mb-2">
                Creative Card
              </h3>
              <p className="text-kodo-secondary text-sm">
                Gradient background with magenta accent
              </p>
            </Card>
            <Card variant="gaming">
              <h3 className="text-lg font-bold text-white mb-2">Tech Card</h3>
              <p className="text-kodo-secondary text-sm">
                Cyan accent for technical content
              </p>
            </Card>
            <Card variant="glass">
              <h3 className="text-lg font-bold text-white mb-2">Glass Card</h3>
              <p className="text-kodo-secondary text-sm">
                Glassmorphism with backdrop blur
              </p>
            </Card>
          </div>
        </section>

        {/* Inputs Section */}
        <section className="space-y-6">
          <h2 className="text-3xl font-heading font-bold text-white border-b border-kodo-steel pb-2">
            Inputs
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <Input label="Username" placeholder="Enter your username" />
            <Input label="Email" type="email" placeholder="your@email.com" />
          </div>
        </section>

        {/* Progress Bars Section */}
        <section className="space-y-6">
          <h2 className="text-3xl font-heading font-bold text-white border-b border-kodo-steel pb-2">
            Progress Bars
          </h2>
          <div className="space-y-4">
            <ProgressBar
              value={75}
              color="cyan"
              labelLeft="Cyan"
              labelRight="75%"
            />
            <ProgressBar
              value={60}
              color="magenta"
              labelLeft="Magenta"
              labelRight="60%"
            />
            <ProgressBar
              value={90}
              color="lime"
              labelLeft="Lime"
              labelRight="90%"
            />
            <ProgressBar
              value={45}
              color="gold"
              variant="gaming"
              labelLeft="XP Progress"
              labelRight="Level 42"
            />
          </div>
        </section>

        {/* Colors Palette */}
        <section className="space-y-6">
          <h2 className="text-3xl font-heading font-bold text-white border-b border-kodo-steel pb-2">
            Color Palette
          </h2>
          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
            <div className="space-y-2">
              <div className="h-20 bg-kodo-void rounded-lg border border-kodo-steel"></div>
              <p className="text-xs text-center">Void</p>
            </div>
            <div className="space-y-2">
              <div className="h-20 bg-kodo-ink rounded-lg border border-kodo-steel"></div>
              <p className="text-xs text-center">Ink</p>
            </div>
            <div className="space-y-2">
              <div className="h-20 bg-kodo-graphite rounded-lg"></div>
              <p className="text-xs text-center">Graphite</p>
            </div>
            <div className="space-y-2">
              <div className="h-20 bg-kodo-slate rounded-lg"></div>
              <p className="text-xs text-center">Slate</p>
            </div>
            <div className="space-y-2">
              <div className="h-20 bg-kodo-cyan rounded-lg"></div>
              <p className="text-xs text-center">Cyan</p>
            </div>
            <div className="space-y-2">
              <div className="h-20 bg-kodo-magenta rounded-lg"></div>
              <p className="text-xs text-center">Magenta</p>
            </div>
            <div className="space-y-2">
              <div className="h-20 bg-kodo-lime rounded-lg"></div>
              <p className="text-xs text-center">Lime</p>
            </div>
            <div className="space-y-2">
              <div className="h-20 bg-kodo-gold rounded-lg"></div>
              <p className="text-xs text-center">Gold</p>
            </div>
            <div className="space-y-2">
              <div className="h-20 bg-kodo-red rounded-lg"></div>
              <p className="text-xs text-center">Red</p>
            </div>
          </div>
        </section>

        {/* Animations */}
        <section className="space-y-6">
          <h2 className="text-3xl font-heading font-bold text-white border-b border-kodo-steel pb-2">
            Animations
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <Card variant="gaming" className="animate-float">
              <p className="text-center text-white font-bold">
                Float Animation
              </p>
            </Card>
            <Card variant="manga" className="animate-fadeIn">
              <p className="text-center text-white font-bold">Fade In</p>
            </Card>
            <Card variant="glass" className="animate-pulse-glow">
              <p className="text-center text-white font-bold">Pulse Glow</p>
            </Card>
          </div>
        </section>
      </div>
    </div>
  );
}
