import Link from "next/link";
import Image from "next/image";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import InnerBanner from "@/components/InnerBanner";
import { Metadata } from "next";

export const metadata: Metadata = {
    title: "Our Projects | Premium Residential & Commercial Spaces",
    description: "Explore premium residential and commercial spaces built for comfort, convenience, and superior lifestyle experiences.",
};

export default function ProjectsPage() {
    const categories = [
        {
            id: 1,
            title: "Residential Real Estate",
            description: "Discover our premium residential properties featuring modern architecture, luxury amenities, and prime locations. From spacious apartments to exclusive villas, find your dream home with world-class facilities and exceptional living experiences.",
            image: "/assets/images/projects/residential-real-estate.jpg",
            href: "/residential-real-estate",
            properties: "Residential Real Estate"
        }
    ];

    return (
        <div className="min-h-screen bg-gray-50 dark:bg-black">
            <Header />

            <InnerBanner
                title="Our Projects"
                subtitle="Explore our diverse portfolio of real estate projects"
                breadcrumbs={[
                    { label: "Home", href: "/" },
                    { label: "Projects" }
                ]}
            />

            <div className="max-w-7xl mx-auto px-6 py-24">
                <div className="text-center mb-12">
                    <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
                        Project Categories
                    </h2>
                    <p className="text-lg text-gray-600 dark:text-gray-400">
                        Browse through our carefully curated collection of properties
                    </p>
                </div>

                <div className="space-y-8">
                    {categories.map((category) => (
                        <div
                            key={category.id}
                            className="group bg-white dark:bg-gray-900 rounded-2xl overflow-hidden border border-gray-200 dark:border-gray-800 hover:border-primary dark:hover:border-primary shadow-lg hover:shadow-2xl transition-all duration-300"
                        >
                            <div className="grid grid-cols-1 md:grid-cols-12 gap-0">
                                {/* Image Section - Left */}
                                <div className="md:col-span-5 relative h-64 md:h-96 overflow-hidden">
                                    <Image
                                        src={category.image}
                                        alt={category.title}
                                        fill
                                        className="object-cover group-hover:scale-110 transition-transform duration-500"
                                    />
                                    <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent md:bg-gradient-to-r md:from-transparent md:to-black/10" />

                                    {/* Badge */}
                                    <div className="absolute top-4 left-4 bg-primary text-white px-4 py-2 rounded-full text-sm font-semibold shadow-lg">
                                        {category.properties}
                                    </div>
                                </div>

                                {/* Content Section - Right */}
                                <div className="md:col-span-7 p-6 md:p-10 lg:p-12 flex flex-col justify-center">
                                    <h3 className="text-2xl md:text-3xl lg:text-4xl font-bold text-foreground mb-4 group-hover:text-primary transition-colors">
                                        {category.title}
                                    </h3>
                                    <p className="text-gray-600 dark:text-gray-400 text-sm md:text-base lg:text-lg mb-8 leading-relaxed">
                                        {category.description}
                                    </p>

                                    <Link
                                        href={category.href}
                                        className="inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-primary to-blue-600 text-white rounded-xl font-semibold hover:shadow-xl transition-all duration-300 transform hover:scale-105 w-fit"
                                    >
                                        View More
                                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
                                        </svg>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>

            <Footer />
        </div>
    );
}
