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

export const metadata = {
    title: "Building & Civil Engineering Consultant Services",
    description:
        "Expert building and civil engineering consultancy services to ensure your projects meet all regulatory standards and are designed for safety and efficiency.",
    keywords: [
        "Civil Engineering",
        "Building Consultancy",
    ],
}

export default function CivilConsultancyPage() {
    const service = services.find(s => s.slug === "building-civil-engineering-consultant");

    if (!service) return <div className="p-10 text-center">Service not found.</div>;

    return (
        <Layout>
            <PageHeader
                title={service.title}
                subtitle={service.shortDescription}
                bgImage={service.image}
            />
            <section className="max-w-6xl mx-auto px-4 py-20 space-y-10">
                <article className="prose max-w-none">
                    <p className="whitespace-pre-line leading-relaxed text-gray-700">
                        {service.fullDescription}
                    </p>
                </article>

                <div className="grid md:grid-cols-2 gap-10">
                    <div>
                        <h2 className="text-2xl font-semibold mb-3">Key Areas of Focus</h2>
                        <ul className="list-disc pl-6 space-y-2 text-gray-700">
                            {service.keyAreas.map((item, i) => (
                                <li key={i}>{item}</li>
                            ))}
                        </ul>
                    </div>

                    <div>
                        <h2 className="text-2xl font-semibold mb-3">Deliverables</h2>
                        <ul className="list-disc pl-6 space-y-2 text-gray-700">
                            {service.deliverables.map((item, i) => (
                                <li key={i}>{item}</li>
                            ))}
                        </ul>
                    </div>
                </div>

                <div>
                    <h2 className="text-2xl font-semibold mb-3">Industries Served</h2>
                    <div className="flex flex-wrap gap-3">
                        {service.industriesServed.map((industry, i) => (
                            <span
                                key={i}
                                className="bg-gray-100 text-gray-800 text-sm px-4 py-2 rounded-full"
                            >
                                {industry}
                            </span>
                        ))}
                    </div>
                </div>
            </section>
            <CTASection title="Request Engineering Consultation" subTitle="Schedule a consultation with our certified civil engineering experts to validate your designs, reduce project risk, and ensure full regulatory compliance." />
        </Layout>
    );
}
