import Link from 'next/link';

export default function Home() {
  return (
    <div className="container mx-auto px-4">
      <div className="max-w-2xl mx-auto py-16">
        <h1 className="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-8">
          Welcome to ShortURL Analytics
        </h1>
        <div className="grid gap-6">
          <Link
            href="/dashboard"
            className="block p-6 bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-shadow"
          >
            <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
              Dashboard
            </h2>
            <p className="text-gray-600 dark:text-gray-400">
              View your overall analytics and key metrics
            </p>
          </Link>
          <Link
            href="/events"
            className="block p-6 bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-shadow"
          >
            <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
              Events
            </h2>
            <p className="text-gray-600 dark:text-gray-400">
              Track and analyze event data
            </p>
          </Link>
          <Link
            href="/analytics/geo"
            className="block p-6 bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-shadow"
          >
            <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
              Geographic Analysis
            </h2>
            <p className="text-gray-600 dark:text-gray-400">
              Explore visitor locations and geographic patterns
            </p>
          </Link>
          <Link
            href="/analytics/devices"
            className="block p-6 bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-shadow"
          >
            <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
              Device Analytics
            </h2>
            <p className="text-gray-600 dark:text-gray-400">
              Understand how users access your links
            </p>
          </Link>
        </div>
      </div>
    </div>
  );
}