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: "Architectural Building Plan Designing Services",
    description:
        "Professional architectural building plan designing services tailored to your needs. Expert designs for residential, commercial, and industrial projects.",
    keywords: [
        "Architectural Design",
        "Building Plans",
    ],
}

export default function ArchitecturalDesignPage() {
    const service = services.find(
        s => s.slug === "architectural-building-plan-designing"
    );

    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>

                <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-sm px-4 py-2 rounded-full text-gray-800">
                                {industry}
                            </span>
                        ))}
                    </div>
                </div>
            </section>
            <CTASection
                title="Designs That Turn Ideas Into Buildable Spaces"
                subTitle="From concept to construction, we create detailed architectural plans that meet user needs, zoning laws, and building codes."
            />
        </Layout>
    );
}
