import Link from "next/link";
import Image from "next/image";
import { services, serviceStyles } from "@/lib/mock/services";
import { projects } from "@/lib/mock/projects";
import Layout from "@/lib/components/layout/Layout";
import CTASection from "@/lib/components/sections/CTASection";
import TestimonialsSection from "@/lib/components/sections/TestimonialsSection";
import { Metadata } from "next";

export const metadata: Metadata = {
    title: "Nestbugi Contractors - Your Trusted Construction Partner",
    description:
        "Nestbugi Contractors is a leading engineering, architectural, and construction firm delivering integrated solutions across East Africa. Explore our services and projects.",
    keywords: [
        "Construction",
        "Engineering",
        "Architecture",
        "Building Services",
        "Civil Engineering",
        "Structural Design",
        "Project Management",
        "Real Estate",
        "Landscaping",
        "Maintenance Management",
    ],
}

export default function Home() {
    return (
        <Layout>
            {/* HERO SECTION */}
            <section className="relative h-[80vh] flex items-center justify-center">
                <Image
                    src="/images/hero.jpg"
                    alt="Nestbugi Contractors"
                    fill
                    className="object-cover"
                    priority
                />
                <div className="absolute inset-0 bg-black/60" />
                <div className="relative z-10 text-center text-white px-6 max-w-3xl mx-auto">
                    <h1 className="text-4xl md:text-6xl font-bold leading-tight">
                        Engineering Excellence, Architectural Innovation & Quality Construction
                    </h1>
                    <p className="mt-4 text-lg md:text-xl text-gray-200">
                        Delivering integrated engineering and construction solutions across East Africa.
                    </p>
                    <div className="mt-8 flex gap-4 justify-center">
                        <Link
                            href="/services"
                            className="bg-secondary hover:bg-secondary/70 px-6 py-3 rounded font-semibold"
                        >
                            Explore Services
                        </Link>
                        <Link
                            href="/contact"
                            className="border border-white px-6 py-3 rounded font-semibold hover:bg-white hover:text-gray-900"
                        >
                            Get in Touch
                        </Link>
                    </div>
                </div>
            </section>

            {/* SERVICE HIGHLIGHTS */}
            <section className="py-20 px-4 bg-white">
                <div className="max-w-7xl mx-auto">
                    <h2 className="text-3xl font-bold text-center mb-12">Our Core Services</h2>

                    <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
                        {services.slice(0, 4).map((service) => (
                            <Link
                                key={service.slug}
                                href={`/services/${service.slug}`}
                                className={`
                rounded-lg p-6 shadow border transition group cursor-pointer
                ${serviceStyles[service.slug]?.bg ?? "bg-gray-50"}
                ${serviceStyles[service.slug]?.border ?? "border-gray-300"}
                ${serviceStyles[service.slug]?.hover ?? ""}
              `}
                            >
                                <div className="mb-4 transition group-hover:scale-110 duration-200">
                                    {serviceStyles[service.slug]?.icon}
                                </div>

                                <h3 className="font-semibold text-lg mb-2 group-hover:text-white">
                                    {service.title}
                                </h3>

                                <p className="text-gray-600 text-sm group-hover:text-gray-200 transition">
                                    {service.shortDescription}
                                </p>

                                <span className="text-blue-600 text-sm font-medium mt-3 inline-block group-hover:text-white transition">
                                    Learn More →
                                </span>
                            </Link>
                        ))}
                    </div>

                    <div className="text-center mt-10">
                        <Link href="/services" className="text-secondary hover:text-secondary/80 font-semibold">
                            View All Services →
                        </Link>
                    </div>
                </div>
            </section>

            {/* ABOUT PREVIEW */}
            <section className="py-20 px-4 bg-gradient-to-r from-secondary to-secondary/10">
                <div className="max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center">
                    <div>
                        <Image
                            src="/images/about/about.jpg"
                            alt="Nestbugi building contruction company lagos"
                            width={600}
                            height={400}
                            className="rounded-lg object-cover shadow"
                        />
                    </div>
                    <div>
                        <h2 className="text-3xl font-bold mb-4">Who We Are</h2>
                        <p className="text-gray-700 mb-4">
                            Nestbugi Contractors is a multidisciplinary engineering and construction firm in Lagos, Nigeria specializing
                            in architectural design, structural engineering, construction supervision, real estate
                            solutions and landscape management services.
                        </p>
                        <p className="text-gray-700 mb-6">
                            With qualified professionals, we ensure quality, safety and precision in every project,
                            from planning to implementation.
                        </p>
                        <Link href="/about" className="text-blue-600 font-semibold">
                            Learn More About Us →
                        </Link>
                    </div>
                </div>
            </section>

            {/* PROJECTS PREVIEW */}
            <section className="py-20 px-4 bg-white">
                <div className="max-w-7xl mx-auto">
                    <h2 className="text-3xl font-bold text-center mb-12">Recent Projects</h2>
                    <div className="grid md:grid-cols-3 gap-6">
                        {projects.slice(0, 3).map((item) => (
                            <Link
                                key={item.slug}
                                href={`/portfolio/${item.slug}`}
                                className="group border-3 border-secondary rounded-lg overflow-hidden border shadow hover:shadow-lg transition"
                            >
                                <div className="relative w-full h-48">
                                    <Image
                                        src={item.images[0]}
                                        alt={item.title}
                                        fill
                                        className="object-cover group-hover:scale-105 transition"
                                    />
                                </div>
                                <div className="p-4 h-full">
                                    <h3 className="font-semibold text-lg">{item.title}</h3>
                                    <p className="text-gray-600 text-sm">{item.location}</p>
                                </div>
                            </Link>
                        ))}
                    </div>
                    <div className="text-center mt-10">
                        <Link href="/portfolio" className="text-secondary hover:text-secondary/80 font-semibold">
                            View Full Portfolio →
                        </Link>
                    </div>
                </div>
            </section>
            <TestimonialsSection />
            <CTASection
                title="Start Your Project With Us"
                subTitle="Our team of certified engineers and consultants is ready to deliver excellence."
            />
        </Layout>
    );
}