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";
import CTASection from "@/lib/components/sections/CTASection";

export const metadata = {
    title: "Structural Analysis, Detailing & Designs Services",
    description:
        "Professional structural analysis, detailing, and shop drawing services to ensure the safety, efficiency, and constructability of your building projects.",
    keywords: [
        "Structural Analysis",
        "Detailing Services",
    ],
}

export default function StructuralAnalysisPage() {
    const service = services.find(
        s => s.slug === "structural-analysis-detailing-designs"
    );

    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="Ready to Build Safely and Efficiently?" subTitle="Get expert structural analysis, detailing, and shop drawings tailored for real-world construction." />
        </Layout>
    );
}
