export const dynamic = "force-dynamic"

import Link from "next/link"
import { getProdutos } from "@/lib/actions"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { appConfig } from "@/lib/config"
import { ShoppingBag } from "lucide-react"

export default async function HomePage() {
  const produtos = await getProdutos()

  return (
    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white">
      {/* Hero */}
      <section className="container mx-auto py-20 px-4 text-center">
        <h1 className="text-4xl sm:text-5xl font-bold text-primary mb-4">
          {appConfig.name}
        </h1>
        <p className="text-lg text-muted-foreground mb-8 max-w-xl mx-auto">
          Escolha um produto abaixo e conclua sua compra em poucos cliques.
        </p>
        <Button asChild size="lg">
          <Link href="/comprar">
            <ShoppingBag className="mr-2 h-5 w-5" />
            Ver todos os produtos
          </Link>
        </Button>
      </section>

      {/* Produtos em destaque */}
      {produtos.length > 0 && (
        <section className="container mx-auto pb-20 px-4">
          <h2 className="text-2xl font-bold text-center mb-10">Produtos disponíveis</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
            {produtos.map((p) => (
              <Card key={p.id} className="flex flex-col hover:shadow-lg transition-shadow">
                <CardHeader>
                  <CardTitle className="text-lg">{p.nome}</CardTitle>
                  {p.descricao && (
                    <p className="text-sm text-muted-foreground">{p.descricao}</p>
                  )}
                </CardHeader>
                <CardContent className="flex-1">
                  <p className="text-3xl font-bold text-primary">
                    {(p.preco_centavos / 100).toLocaleString("pt-BR", {
                      style: "currency",
                      currency: "BRL",
                    })}
                  </p>
                </CardContent>
                <CardFooter>
                  <Button asChild className="w-full">
                    <Link href={`/produtos/${p.id}`}>Comprar agora</Link>
                  </Button>
                </CardFooter>
              </Card>
            ))}
          </div>
        </section>
      )}
    </div>
  )
}