import { Link } from 'react-router-dom'
import { ModalExample } from '../context/modals/ModalExample'
import { ToastExample } from '../context/toasts/ToastExample'

export function Home() {
  return (
    <div className="space-y-12">
      <div className="text-center py-12">
        <h1 className="text-5xl font-bold text-white mb-4">
          Welcome to Crafting Shop
        </h1>
        <p className="text-xl text-gray-300 mb-8">
          Your one-stop shop for premium crafting supplies
        </p>
        <Link
          to="/products"
          className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg text-lg font-medium transition-colors inline-block"
        >
          Browse Products
        </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">Quality Products</h3>
          <p className="text-gray-400">Premium crafting supplies for all your projects</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">Fast Delivery</h3>
          <p className="text-gray-400">Quick and reliable shipping to your doorstep</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">Secure Payments</h3>
          <p className="text-gray-400">Safe and secure payment processing</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>
  )
}