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

export const metadata = {
    title: "Construction Supervision Services",
    description:
        "Professional construction supervision services to ensure your projects are executed safely, efficiently, and to the highest standards. Expert oversight for residential, commercial, and industrial constructions.",
    keywords: [
        "Construction Supervision",
        "Site Management",
    ],
}

export default function ConstructionSupervisionPage() {
    const service = services.find(
        s => s.slug === "construction-supervision"
    );

    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 text-gray-700 leading-relaxed">{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>
            </section>
            <CTASection title="Construction Supervision Services" subTitle="Ensuring safe, compliant, and quality-built structures through coordinated oversight, schedule tracking, and site safety management." />
        </Layout>
    );
}
