import { Home as HomeIcon, Settings, Calendar, BarChart3, Leaf } from 'lucide-react'
import Link from 'next/link'

export default function Home() {
  const menuItems = [
    {
      title: 'انتخاب دستگاه',
      description: 'اتصال به دستگاه گلخانه',
      href: '/devices',
      icon: Settings,
      color: 'from-blue-500 to-blue-600',
      iconColor: 'text-blue-500'
    },
    {
      title: 'تقویم',
      description: 'مشاهده داده‌های ماهانه',
      href: '/calendar?deviceId=1',
      icon: Calendar,
      color: 'from-green-500 to-green-600',
      iconColor: 'text-green-500'
    },
    {
      title: 'جزئیات روز',
      description: 'داده‌های روزانه',
      href: '/day-details?deviceId=1&year=1403&month=1',
      icon: BarChart3,
      color: 'from-purple-500 to-purple-600',
      iconColor: 'text-purple-500'
    },
    {
      title: 'داده‌های تله‌متری',
      description: 'مشاهده داده‌های لحظه‌ای',
      href: '/telemetry?deviceId=1',
      icon: Leaf,
      color: 'from-orange-500 to-orange-600',
      iconColor: 'text-orange-500'
    }
  ]

  return (
    <main className="min-h-screen p-4 md:p-8">
      <div className="max-w-6xl mx-auto">
        {/* Header */}
        <div className="text-center mb-12 mt-8">
          <div className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-green-500 to-green-600 rounded-2xl shadow-lg mb-4">
            <HomeIcon className="w-10 h-10 text-white" />
          </div>
          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-3">GreenHome</h1>
          <p className="text-lg text-gray-600">مدیریت هوشمند گلخانه</p>
        </div>

        {/* Menu Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {menuItems.map((item) => {
            const Icon = item.icon
            return (
              <Link
                key={item.href}
                href={item.href}
                className="group relative bg-white rounded-2xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100"
              >
                <div className="p-6">
                  <div className="flex items-start gap-4">
                    <div className={`flex-shrink-0 w-14 h-14 rounded-xl bg-gradient-to-br ${item.color} flex items-center justify-center shadow-md group-hover:scale-110 transition-transform duration-300`}>
                      <Icon className="w-7 h-7 text-white" />
                    </div>
                    <div className="flex-1">
                      <h3 className="text-xl font-semibold text-gray-900 mb-1 group-hover:text-green-600 transition-colors">
                        {item.title}
                      </h3>
                      <p className="text-sm text-gray-500">{item.description}</p>
                    </div>
                  </div>
                </div>
                <div className={`absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r ${item.color} transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300`} />
              </Link>
            )
          })}
        </div>

        {/* Footer Info */}
        <div className="mt-12 text-center">
          <p className="text-sm text-gray-500">
            سیستم مدیریت و مانیتورینگ گلخانه هوشمند
          </p>
        </div>
      </div>
    </main>
  )
}