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

export const metadata = {
  title: "Our Services - Nestbugi Contractors",
  description:
    "Explore the wide range of services offered by Nestbugi Contractors, including real estate, engineering, design, and project delivery solutions.",
}

export default function ServicesPage() {
  return (
    <Layout>
      <PageHeader
        title="Our Services"
        subtitle="At NESTBUGI CONTRACTORS, we provide multidisciplinary solutions in real estate,
            engineering, design, and project delivery — combining technical expertise
            and practical experience."
        bgImage="/images/services-header.jpg"
      />
      <section className="max-w-7xl mx-auto px-4 py-20">
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
          {services.map((service) => (
            <Link
              key={service.id}
              href={`/services/${service.slug}`}
              className="group border-3 border-secondary rounded-lg overflow-hidden hover:shadow-lg transition-all bg-white"
            >
              {/* Image */}
              <div className="relative w-full h-48 bg-gray-100">
                {service.image ? (
                  <Image
                    src={service.image}
                    alt={service.title}
                    fill
                    className="object-cover group-hover:scale-105 transition-transform"
                  />
                ) : (
                  <div className="flex items-center justify-center h-full text-gray-400">
                    No Image
                  </div>
                )}
              </div>

              {/* Content */}
              <div className="p-5 space-y-3">
                <h2 className="text-lg font-semibold group-hover:text-blue-600">
                  {service.title}
                </h2>
                <p className="text-sm text-gray-600 line-clamp-3">
                  {service.shortDescription}
                </p>
              </div>
            </Link>
          ))}
        </div>
      </section>
    </Layout>
  );
}
