import { getPosts } from "@/lib/wordpress";
import Image from "next/image";
import Link from "next/link";

export default async function Home() {
  const posts = await getPosts();

  return (
    <div className="min-h-screen text-gray-100" style={{ backgroundColor: "#1a1a1a" }}>

      {/* Header */}
      <header style={{ backgroundColor: "#111111" }} className="border-b border-gray-800 sticky top-0 z-50">
        <div className="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
          <Link href="/">
            <Image
              src="/msfv.webp"
              alt="Minha Série Favorita"
              width={180}
              height={50}
              className="h-12 w-auto"
              priority
            />
          </Link>
          <nav className="hidden md:flex items-center gap-6 text-sm font-medium text-gray-300">
            <Link href="/" className="hover:text-red-500 transition-colors uppercase tracking-wide text-xs">Notícias</Link>
            <Link href="/categoria/filmes" className="hover:text-red-500 transition-colors uppercase tracking-wide text-xs">Filmes</Link>
            <Link href="/categoria/series" className="hover:text-red-500 transition-colors uppercase tracking-wide text-xs">Séries</Link>
            <Link href="/categoria/reality-show" className="hover:text-red-500 transition-colors uppercase tracking-wide text-xs">Reality Show</Link>
            <Link href="/categoria/streaming" className="hover:text-red-500 transition-colors uppercase tracking-wide text-xs">Streaming</Link>
            <Link href="/categoria/tv" className="hover:text-red-500 transition-colors uppercase tracking-wide text-xs">TV</Link>
          </nav>
        </div>
      </header>

      {/* Post em destaque */}
      {posts.length > 0 && (
        <section className="max-w-6xl mx-auto px-4 pt-8">
          <Link href={`/posts/${posts[0].slug}`} className="group block">
            <div className="relative aspect-[21/9] overflow-hidden rounded-xl">
              {posts[0].featuredImage?.node?.sourceUrl && (
                <Image
                  src={posts[0].featuredImage.node.sourceUrl}
                  alt={posts[0].title}
                  fill
                  className="object-cover group-hover:scale-105 transition-transform duration-500"
                  priority
                  sizes="100vw"
                />
              )}
              <div className="absolute inset-0 bg-gradient-to-t from-black/95 via-black/40 to-transparent" />
              <div className="absolute bottom-0 left-0 right-0 p-6 md:p-8">
                <span className="inline-block px-3 py-1 text-xs font-bold uppercase tracking-wider bg-red-600 text-white rounded mb-3">
                  Destaque
                </span>
                <h2 className="text-2xl md:text-3xl font-bold text-white leading-tight max-w-3xl">
                  {posts[0].title}
                </h2>
                <time className="text-sm text-white/50 mt-2 block">
                  {new Date(posts[0].date).toLocaleDateString("pt-BR", {
                    day: "2-digit",
                    month: "long",
                    year: "numeric",
                  })}
                </time>
              </div>
            </div>
          </Link>
        </section>
      )}

      {/* Conteúdo principal */}
      <main className="max-w-6xl mx-auto px-4 py-8 grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-8">

        {/* Grid de posts */}
        <div>
          <h2 className="text-base font-bold text-white uppercase tracking-wider mb-5 flex items-center gap-2">
            <span className="w-1 h-5 bg-red-600 rounded inline-block"></span>
            Últimas Notícias
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
            {posts.slice(1).map((post: any) => (
              <Link
                key={post.slug}
                href={`/posts/${post.slug}`}
                className="group rounded-xl overflow-hidden border border-gray-800 hover:border-red-600 transition-all duration-300 hover:-translate-y-1"
                style={{ backgroundColor: "#222222" }}
              >
                {post.featuredImage?.node?.sourceUrl && (
                  <div className="relative aspect-video overflow-hidden">
                    <Image
                      src={post.featuredImage.node.sourceUrl}
                      alt={post.title}
                      fill
                      className="object-cover group-hover:scale-105 transition-transform duration-500"
                      sizes="(max-width: 768px) 100vw, 50vw"
                    />
                  </div>
                )}
                <div className="p-4">
                  <h3 className="font-semibold text-white line-clamp-2 group-hover:text-red-400 transition-colors leading-snug text-sm">
                    {post.title}
                  </h3>
                  <p
                    className="text-xs text-gray-400 mt-2 line-clamp-2 leading-relaxed"
                    dangerouslySetInnerHTML={{ __html: post.excerpt }}
                  />
                  <time className="text-xs text-gray-500 mt-3 block">
                    {new Date(post.date).toLocaleDateString("pt-BR", {
                      day: "2-digit",
                      month: "long",
                      year: "numeric",
                    })}
                  </time>
                </div>
              </Link>
            ))}
          </div>
        </div>

        {/* Sidebar */}
        <aside className="space-y-6">
          {/* Posts recentes */}
          <div className="rounded-xl border border-gray-800 p-4" style={{ backgroundColor: "#222222" }}>
            <h3 className="text-sm font-bold text-white uppercase tracking-wider mb-4 flex items-center gap-2">
              <span className="w-1 h-4 bg-red-600 rounded inline-block"></span>
              Posts Recentes
            </h3>
            <ul className="space-y-3">
              {posts.slice(0, 5).map((post: any) => (
                <li key={post.slug}>
                  <Link
                    href={`/posts/${post.slug}`}
                    className="flex gap-3 group"
                  >
                    {post.featuredImage?.node?.sourceUrl && (
                      <div className="relative w-16 h-12 flex-shrink-0 overflow-hidden rounded">
                        <Image
                          src={post.featuredImage.node.sourceUrl}
                          alt={post.title}
                          fill
                          className="object-cover"
                          sizes="64px"
                        />
                      </div>
                    )}
                    <span className="text-xs text-gray-300 group-hover:text-red-400 transition-colors line-clamp-2 leading-snug">
                      {post.title}
                    </span>
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Categorias */}
          <div className="rounded-xl border border-gray-800 p-4" style={{ backgroundColor: "#222222" }}>
            <h3 className="text-sm font-bold text-white uppercase tracking-wider mb-4 flex items-center gap-2">
              <span className="w-1 h-4 bg-red-600 rounded inline-block"></span>
              Categorias
            </h3>
            <ul className="space-y-2">
              {["Notícias", "Filmes", "Séries", "Reality Show", "Streaming", "TV"].map((cat) => (
                <li key={cat}>
                  <Link
                    href={`/categoria/${cat.toLowerCase().replace(" ", "-")}`}
                    className="text-sm text-gray-400 hover:text-red-400 transition-colors flex items-center gap-2"
                  >
                    <span className="w-1 h-1 bg-red-600 rounded-full inline-block"></span>
                    {cat}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </aside>
      </main>

      {/* Footer */}
      <footer className="border-t border-gray-800 mt-10" style={{ backgroundColor: "#111111" }}>
        <div className="max-w-6xl mx-auto px-4 py-8 text-center">
          <Image
            src="/msfv.webp"
            alt="Minha Série Favorita"
            width={120}
            height={35}
            className="h-8 w-auto mx-auto mb-4"
          />
          <p className="text-sm text-gray-500">
            Fique por dentro das novidades de filmes, séries, streaming e TV!
          </p>
          <p className="text-xs text-gray-600 mt-2">
            © {new Date().getFullYear()} Minha Série Favorita. Todos os direitos reservados.
          </p>
        </div>
      </footer>
    </div>
  );
}
