import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
import { projects } from "@/lib/mock/projects";
import Layout from "@/lib/components/layout/Layout";
import PageHeader from "@/lib/components/common/PageHeader";

export const metadata = {
    title: "Portfolio Details - Nestbugi Contractors",
    description:
        "Explore detailed case studies of projects completed by Nestbugi Contractors, showcasing our expertise in engineering, architecture, and construction across various sectors.",
}

export default async function PortfolioDetailPage(props: { params: Promise<{ slug: string }> }) {
    const { slug } = await props.params;

    const project = projects.find((p) => p.slug === slug);

    if (!project) return notFound();

    return (
        <Layout>
            <PageHeader
                title={project.title}
                bgImage={project.images[0]}
            />
            <section className="max-w-5xl mx-auto px-4 py-16">

                <div className="flex flex-wrap gap-3 text-sm text-gray-600 mb-8">
                    <span className="px-3 py-1 bg-gray-100 rounded">📍 {project.location}</span>
                    <span className="px-3 py-1 bg-gray-100 rounded">📅 {project.year}</span>
                    <span className="px-3 py-1 bg-gray-100 rounded">🏷️ {project.category}</span>
                </div>

                <div className="prose max-w-none mb-10">
                    <p className="text-gray-700 leading-relaxed whitespace-pre-line">
                        {project.description.trim()}
                    </p>
                </div>

                {project.details?.length > 0 && (
                    <div className="mb-12">
                        <h2 className="text-2xl font-semibold mb-4">Key Project Details</h2>
                        <ul className="list-disc ml-6 space-y-2 text-gray-700">
                            {project.details.map((item, idx) => (
                                <li key={idx}>{item}</li>
                            ))}
                        </ul>
                    </div>
                )}

                {project.images?.length > 1 && (
                    <div className="mb-16">
                        <h2 className="text-2xl font-semibold mb-4">Project Gallery</h2>
                        <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                            {project.images.map((img, idx) => (
                                <div
                                    key={idx}
                                    className="relative border-4 border-secondary w-full h-40 md:h-48 rounded overflow-hidden cursor-pointer group"
                                >
                                    <Image
                                        src={img}
                                        alt={`Gallery image ${idx + 1}`}
                                        fill
                                        className="object-cover group-hover:scale-105 transition"
                                    />
                                </div>
                            ))}
                        </div>
                    </div>
                )}
            </section>
        </Layout>
    );
}