import prisma from "@/lib/db";
export const revalidate = 5;
import ProjectGrid from "@/components/ProjectGrid";
import { Metadata } from "next";

export const metadata: Metadata = {
    title: "Portfolio | Sergio Hounkpessode",
    description: "Découvrez mes projets en systèmes embarqués, IoT et développement web. Des solutions innovantes pour l'impact local.",
};

export default async function ProjectsPage() {
    const projects = await prisma.project.findMany({
        include: { category: true },
        orderBy: { createdAt: "desc" }
    });

    const categories = await prisma.category.findMany();
    const categoryNames = ["Tous", ...categories.map((c: any) => c.name)];

    return (
        <main style={{ paddingTop: "10rem", paddingBottom: "8rem", minHeight: "100vh" }}>
            <div className="container">
                {/* Header */}
                <div style={{ marginBottom: "5rem" }}>
                    <div className="badge badge-primary" style={{ marginBottom: "1.5rem" }}>
                        Portfolio
                    </div>
                    <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-between", alignItems: "flex-end", gap: "2rem" }}>
                        <div style={{ maxWidth: "45rem" }}>
                            <h1 style={{ fontSize: "clamp(3rem, 6vw, 4.5rem)", marginBottom: "1.5rem" }}>
                                Solutions innovantes & <span className="text-gradient">Réalisations.</span>
                            </h1>
                            <p style={{ color: "var(--muted-foreground)", fontSize: "1.15rem", lineHeight: 1.7 }}>
                                Une sélection de mes travaux alliant électronique de pointe, IoT et développement web moderne pour répondre à des problématiques concrètes.
                            </p>
                        </div>
                        <div style={{ textAlign: "right", background: "var(--primary-light)", padding: "1.5rem 2.5rem", borderRadius: "var(--radius-lg)", border: "1px solid var(--primary-border)" }}>
                            <p style={{ fontFamily: "var(--font-heading)", fontSize: "3.5rem", fontWeight: 800, lineHeight: 1, color: "var(--primary)" }}>{projects.length}+</p>
                            <p style={{ color: "var(--primary)", fontWeight: 700, fontSize: "0.8rem", textTransform: "uppercase", letterSpacing: "0.05em" }}>Projets Livrés</p>
                        </div>
                    </div>
                </div>

                {/* Client side grid with filters */}
                <ProjectGrid initialProjects={(projects as any[]).map((p: any) => ({
                    ...p,
                    createdAt: p.createdAt.toISOString(),
                    category: p.category ? { name: p.category.name } : null
                }))} categories={categoryNames} />
            </div>
        </main>
    );
}