import { Link } from 'react-router-dom';
import { ModalExample } from '../context/modals/ModalExample';
import { ToastExample } from '../context/toasts/ToastExample';
import { LoaderExample } from '../context/loaders/LoaderExample';
import { TaskboardLogo } from '../components/TaskboardLogo';

export function Home() {
  return (
    <div className="space-y-12">
      <div className="text-center py-12">
        <div className="flex justify-center mb-6">
          <TaskboardLogo className="h-16 w-auto" />
        </div>
        <h1 className="text-5xl font-bold text-white mb-4">Welcome to Taskboard</h1>
        <p className="text-xl text-gray-300 mb-8">
          Organize your projects and boost productivity with powerful task management
        </p>
        <Link
          to="/boards"
          className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg text-lg font-medium transition-colors inline-block"
        >
          View Boards
        </Link>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
          <h3 className="text-xl font-semibold text-white mb-2">Visual Workflow</h3>
          <p className="text-gray-400">Drag and drop cards to manage your tasks efficiently</p>
        </div>
        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
          <h3 className="text-xl font-semibold text-white mb-2">Personal Organization</h3>
          <p className="text-gray-400">Your personal space to organize and track your tasks</p>
        </div>
        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
          <h3 className="text-xl font-semibold text-white mb-2">Customizable Boards</h3>
          <p className="text-gray-400">Create and organize boards to fit your workflow</p>
        </div>
      </div>

      <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
        <h2 className="text-2xl font-semibold text-white mb-4">Modal System Demo</h2>
        <p className="text-gray-400 mb-6">
          Test our modal system with this interactive example. The modal uses React Context for
          state management.
        </p>
        <ModalExample />
      </div>

      <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
        <h2 className="text-2xl font-semibold text-white mb-4">Toast System Demo</h2>
        <p className="text-gray-400 mb-6">
          Test our toast notification system with this interactive example. The toast uses React
          Context for state management.
        </p>
        <ToastExample />
      </div>

      <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
        <h2 className="text-2xl font-semibold text-white mb-4">Loader System Demo</h2>
        <p className="text-gray-400 mb-6">
          Test our global loading system with this interactive example. The loader uses React
          Context for state management.
        </p>
        <LoaderExample />
      </div>
    </div>
  );
}