import Link from 'next/link'
import { getAllPosts } from '@/lib/markdown'
import { formatDate } from '@/lib/utils'

export default async function HomePage() {
  const allPosts = await getAllPosts()
  const featuredPosts = allPosts.slice(0, 3)

  return (
    <div className="space-y-12">
      <section className="text-center py-12">
        <h1 className="text-5xl font-bold mb-4">Bun venit pe Blog</h1>
        <p className="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
          Explorează articole despre dezvoltare web, design și tehnologie.
          Învață din experiențe practice și tutoriale detaliate.
        </p>
        <div className="mt-8 space-x-4">
          <Link href="/blog" className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition">
            Vezi toate articolele
          </Link>
          <Link href="/about" className="inline-block px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition">
            Despre mine
          </Link>
        </div>
      </section>

      <section>
        <h2 className="text-3xl font-bold mb-8">Articole Recente</h2>
        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
          {featuredPosts.map((post) => (
            <article key={post.slug} className="border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:shadow-lg transition">
              {post.frontmatter.image && (
                <img src={post.frontmatter.image} alt={post.frontmatter.title} className="w-full h-48 object-cover rounded-lg mb-4" />
              )}
              <h3 className="text-xl font-semibold mb-2">
                <Link href={`/blog/${post.slug}`} className="hover:text-primary-600 transition">
                  {post.frontmatter.title}
                </Link>
              </h3>
              <p className="text-gray-600 dark:text-gray-400 mb-4">{post.frontmatter.description}</p>
              <div className="flex items-center justify-between text-sm text-gray-500">
                <span>{formatDate(post.frontmatter.date)}</span>
                <span>{post.readingTime} min citire</span>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section className="text-center py-12 bg-gray-50 dark:bg-gray-800 rounded-lg">
        <h2 className="text-3xl font-bold mb-4">Vrei să afli mai multe?</h2>
        <p className="text-lg text-gray-600 dark:text-gray-400 mb-6">Explorează arhiva completă de articole</p>
        <Link href="/blog" className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition">
          Vezi toate articolele →
        </Link>
      </section>
    </div>
  )
}