import Link from 'next/link';
import { Contrast, Eye, Palette } from 'lucide-react';

export default function AccessibilityPage() {
  const tools = [
    {
      title: 'Contrast Checker',
      description: 'Test color combinations for WCAG 2.1 AA and AAA compliance',
      href: '/accessibility/contrast',
      icon: Contrast,
      features: ['WCAG 2.1 standards', 'AA/AAA ratings', 'Live preview'],
    },
    {
      title: 'Color Blindness Simulator',
      description: 'Simulate how colors appear with different types of color blindness',
      href: '/accessibility/colorblind',
      icon: Eye,
      features: ['Protanopia', 'Deuteranopia', 'Tritanopia'],
    },
    {
      title: 'Text Color Optimizer',
      description: 'Find the best text color for any background automatically',
      href: '/accessibility/textcolor',
      icon: Palette,
      features: ['Automatic optimization', 'WCAG guaranteed', 'Light/dark options'],
    },
  ];

  return (
    <div className="min-h-screen px-8 py-12">
      <div className="max-w-7xl mx-auto space-y-8">
        <div>
          <h1 className="text-4xl font-bold mb-2">Accessibility Tools</h1>
          <p className="text-muted-foreground">
            Ensure your colors are accessible to everyone
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {tools.map((tool) => {
            const Icon = tool.icon;
            return (
              <Link
                key={tool.href}
                href={tool.href}
                className="p-6 border rounded-lg bg-card hover:border-primary transition-colors"
              >
                <div className="flex items-start justify-between mb-4">
                  <Icon className="h-8 w-8 text-primary" />
                </div>
                <h2 className="text-xl font-semibold mb-2">{tool.title}</h2>
                <p className="text-sm text-muted-foreground mb-4">{tool.description}</p>
                <ul className="space-y-1">
                  {tool.features.map((feature) => (
                    <li key={feature} className="text-sm text-muted-foreground flex items-center">
                      <span className="mr-2">•</span>
                      {feature}
                    </li>
                  ))}
                </ul>
              </Link>
            );
          })}
        </div>

        {/* Educational Content */}
        <div className="p-6 border rounded-lg bg-card mt-8">
          <h2 className="text-xl font-semibold mb-4">About WCAG 2.1</h2>
          <div className="space-y-4 text-sm text-muted-foreground">
            <p>
              The Web Content Accessibility Guidelines (WCAG) 2.1 provide standards for making web
              content more accessible to people with disabilities.
            </p>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <h3 className="font-semibold text-foreground mb-2">Level AA (Minimum)</h3>
                <ul className="space-y-1">
                  <li>• Normal text: 4.5:1 contrast ratio</li>
                  <li>• Large text: 3:1 contrast ratio</li>
                  <li>• UI components: 3:1 contrast ratio</li>
                </ul>
              </div>
              <div>
                <h3 className="font-semibold text-foreground mb-2">Level AAA (Enhanced)</h3>
                <ul className="space-y-1">
                  <li>• Normal text: 7:1 contrast ratio</li>
                  <li>• Large text: 4.5:1 contrast ratio</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}