import { Layout } from '../components/layout/Layout';
import { BookOpen, FileText, Video, Cloud } from 'lucide-react';
import { Link } from 'react-router-dom';

function Home() {
  const features = [
    {
      name: 'Riječi',
      description: 'Browse and search Croatian sign language dictionary',
      icon: BookOpen,
      href: '/dictionary',
      color: 'bg-indigo-600',
    },
    {
      name: 'Znakopis',
      description: 'Build sentences using sign language',
      icon: FileText,
      href: '/znakopis',
      color: 'bg-gray-400',
    },
    {
      name: 'Video rečenica',
      description: 'Watch and learn from video sentences',
      icon: Video,
      href: '/video-sentence',
      color: 'bg-orange-600',
    },
    {
      name: 'Oblak',
      description: 'Save and manage your documents in the cloud',
      icon: Cloud,
      href: '/cloud',
      color: 'bg-indigo-600',
    },
  ];

  return (
    <Layout>
      <div className="space-y-8">
        <div className="text-center">
          <h1 className="text-4xl font-bold text-foreground mb-4">
            Tvoj put u svijet znakovnog jezika
          </h1>
          <p className="text-lg text-muted-foreground">
            Hrvatski znakovni jezik - platforma za učenje i komunikaciju
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-12">
          {features.map((feature) => (
            <Link
              key={feature.name}
              to={feature.href}
              className="block p-6 bg-white rounded-lg shadow hover:shadow-lg transition-shadow"
            >
              <div className="flex items-center gap-4">
                <div className={`p-3 rounded-lg ${feature.color}`}>
                  <feature.icon className="h-8 w-8 text-white" />
                </div>
                <div>
                  <h3 className="text-xl font-semibold text-foreground">
                    {feature.name}
                  </h3>
                  <p className="text-muted-foreground mt-1">{feature.description}</p>
                </div>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </Layout>
  );
}

export default Home;

