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: "Real Estate Services",
    description:
        "Comprehensive real estate services including property acquisition, development, and asset management for residential and commercial properties.",
    keywords: [
        "Real Estate",
        "Property Management",
    ],
}

export default function RealEstatePage() {
    const service = services.find((s) => s.slug === "real-estate");

    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="Real Estate Advisory & Property Development Support" subTitle="Our real estate services cover acquisition, evaluation, development, and asset management for both residential and commercial properties." />
        </Layout>
    );
}
