import { Button } from '../components/Button';
import { Card } from '../components/Card';

/**
 * Style Test Page
 * Use this page to verify all Tailwind colors and components are working
 * Navigate to: http://localhost:3004/test-styles
 */
export default function TestStyles() {
  return (
    <div className="min-h-screen bg-neutral-50 py-12">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 className="text-4xl font-bold text-neutral-900 mb-8">
          Tailwind Styles Test Page
        </h1>
        
        {/* Primary Color Palette */}
        <section className="mb-12">
          <h2 className="text-2xl font-bold text-neutral-900 mb-4">
            Primary Colors (Sky Blue)
          </h2>
          <div className="grid grid-cols-11 gap-2">
            <div className="bg-primary-50 h-20 rounded flex items-end justify-center pb-2 text-xs">50</div>
            <div className="bg-primary-100 h-20 rounded flex items-end justify-center pb-2 text-xs">100</div>
            <div className="bg-primary-200 h-20 rounded flex items-end justify-center pb-2 text-xs">200</div>
            <div className="bg-primary-300 h-20 rounded flex items-end justify-center pb-2 text-xs">300</div>
            <div className="bg-primary-400 h-20 rounded flex items-end justify-center pb-2 text-xs text-white">400</div>
            <div className="bg-primary-500 h-20 rounded flex items-end justify-center pb-2 text-xs text-white">500</div>
            <div className="bg-primary-600 h-20 rounded flex items-end justify-center pb-2 text-xs text-white">600</div>
            <div className="bg-primary-700 h-20 rounded flex items-end justify-center pb-2 text-xs text-white">700</div>
            <div className="bg-primary-800 h-20 rounded flex items-end justify-center pb-2 text-xs text-white">800</div>
            <div className="bg-primary-900 h-20 rounded flex items-end justify-center pb-2 text-xs text-white">900</div>
            <div className="bg-primary-950 h-20 rounded flex items-end justify-center pb-2 text-xs text-white">950</div>
          </div>
        </section>
        
        {/* Neutral Color Palette */}
        <section className="mb-12">
          <h2 className="text-2xl font-bold text-neutral-900 mb-4">
            Neutral Colors (Gray)
          </h2>
          <div className="grid grid-cols-11 gap-2">
            <div className="bg-neutral-50 h-20 rounded flex items-end justify-center pb-2 text-xs border border-neutral-200">50</div>
            <div className="bg-neutral-100 h-20 rounded flex items-end justify-center pb-2 text-xs">100</div>
            <div className="bg-neutral-200 h-20 rounded flex items-end justify-center pb-2 text-xs">200</div>
            <div className="bg-neutral-300 h-20 rounded flex items-end justify-center pb-2 text-xs">300</div>
            <div className="bg-neutral-400 h-20 rounded flex items-end justify-center pb-2 text-xs text-white">400</div>
            <div className="bg-neutral-500 h-20 rounded flex items-end justify-center pb-2 text-xs text-white">500</div>
            <div className="bg-neutral-600 h-20 rounded flex items-end justify-center pb-2 text-xs text-white">600</div>
            <div className="bg-neutral-700 h-20 rounded flex items-end justify-center pb-2 text-xs text-white">700</div>
            <div className="bg-neutral-800 h-20 rounded flex items-end justify-center pb-2 text-xs text-white">800</div>
            <div className="bg-neutral-900 h-20 rounded flex items-end justify-center pb-2 text-xs text-white">900</div>
            <div className="bg-neutral-950 h-20 rounded flex items-end justify-center pb-2 text-xs text-white">950</div>
          </div>
        </section>
        
        {/* Semantic Colors */}
        <section className="mb-12">
          <h2 className="text-2xl font-bold text-neutral-900 mb-4">
            Semantic Colors
          </h2>
          <div className="grid grid-cols-4 gap-4">
            <div className="bg-success h-20 rounded flex items-center justify-center text-white font-semibold">Success</div>
            <div className="bg-warning h-20 rounded flex items-center justify-center text-white font-semibold">Warning</div>
            <div className="bg-error h-20 rounded flex items-center justify-center text-white font-semibold">Error</div>
            <div className="bg-info h-20 rounded flex items-center justify-center text-white font-semibold">Info</div>
          </div>
        </section>
        
        {/* Button Variants */}
        <section className="mb-12">
          <h2 className="text-2xl font-bold text-neutral-900 mb-4">
            Button Components
          </h2>
          <div className="space-y-4">
            <div className="flex flex-wrap gap-4">
              <Button variant="primary" size="sm">Primary Small</Button>
              <Button variant="primary" size="md">Primary Medium</Button>
              <Button variant="primary" size="lg">Primary Large</Button>
            </div>
            <div className="flex flex-wrap gap-4">
              <Button variant="secondary" size="md">Secondary</Button>
              <Button variant="outline" size="md">Outline</Button>
              <Button variant="ghost" size="md">Ghost</Button>
            </div>
            <div>
              <Button variant="primary" size="md" fullWidth>Full Width Button</Button>
            </div>
          </div>
        </section>
        
        {/* Card Components */}
        <section className="mb-12">
          <h2 className="text-2xl font-bold text-neutral-900 mb-4">
            Card Components
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <Card padding="sm">
              <h3 className="text-lg font-bold text-neutral-900 mb-2">Small Padding</h3>
              <p className="text-neutral-600">This card has small padding</p>
            </Card>
            <Card padding="md" hover>
              <h3 className="text-lg font-bold text-neutral-900 mb-2">Medium Padding + Hover</h3>
              <p className="text-neutral-600">Hover over this card!</p>
            </Card>
            <Card padding="lg">
              <h3 className="text-lg font-bold text-neutral-900 mb-2">Large Padding</h3>
              <p className="text-neutral-600">This card has large padding</p>
            </Card>
          </div>
        </section>
        
        {/* Typography */}
        <section className="mb-12">
          <h2 className="text-2xl font-bold text-neutral-900 mb-4">
            Typography
          </h2>
          <div className="space-y-4">
            <h1 className="text-4xl font-bold text-neutral-900">Heading 1 - text-4xl</h1>
            <h2 className="text-3xl font-bold text-neutral-900">Heading 2 - text-3xl</h2>
            <h3 className="text-2xl font-bold text-neutral-900">Heading 3 - text-2xl</h3>
            <h4 className="text-xl font-bold text-neutral-900">Heading 4 - text-xl</h4>
            <p className="text-lg text-neutral-600">Large paragraph text - text-lg</p>
            <p className="text-base text-neutral-600">Base paragraph text - text-base</p>
            <p className="text-sm text-neutral-500">Small text - text-sm</p>
          </div>
        </section>
        
        {/* Gradients */}
        <section className="mb-12">
          <h2 className="text-2xl font-bold text-neutral-900 mb-4">
            Gradients
          </h2>
          <div className="space-y-4">
            <div className="bg-gradient-to-r from-primary-600 to-primary-700 h-24 rounded-lg flex items-center justify-center text-white font-semibold">
              Horizontal Gradient (Primary 600 → 700)
            </div>
            <div className="bg-gradient-to-br from-primary-50 via-white to-primary-100 h-24 rounded-lg flex items-center justify-center text-neutral-900 font-semibold border border-primary-200">
              Diagonal Gradient (Light)
            </div>
            <div className="bg-gradient-to-br from-primary-400 to-primary-600 h-24 rounded-lg flex items-center justify-center text-white font-semibold">
              Diagonal Gradient (Primary 400 → 600)
            </div>
          </div>
        </section>
        
        {/* Shadows */}
        <section className="mb-12">
          <h2 className="text-2xl font-bold text-neutral-900 mb-4">
            Shadows
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div className="bg-white shadow-sm h-24 rounded-lg flex items-center justify-center">
              shadow-sm
            </div>
            <div className="bg-white shadow-md h-24 rounded-lg flex items-center justify-center">
              shadow-md
            </div>
            <div className="bg-white shadow-lg h-24 rounded-lg flex items-center justify-center">
              shadow-lg
            </div>
            <div className="bg-white shadow-xl h-24 rounded-lg flex items-center justify-center">
              shadow-xl
            </div>
          </div>
        </section>
        
        <div className="mt-12 pt-8 border-t border-neutral-200">
          <a 
            href="/"
            className="inline-flex items-center text-primary-600 hover:text-primary-700 font-semibold"
          >
            ← Back to Home
          </a>
        </div>
      </div>
    </div>
  );
}