<section class="bg-soft-beige py-20">
    <div class="max-w-6xl mx-auto px-4">
        <div class="text-center mb-12">
            <span class="inline-flex px-3 py-1 rounded-full bg-balorp-magenta text-white uppercase text-xs tracking-[0.2em]">Project Detail</span>
            <h1 class="mt-6 text-4xl font-bold text-premium-charcoal">Office Space Design</h1>
            <p class="mt-4 text-architectural-gray">A dedicated showcase of our office space design project, including before and after photos and key transformation details.</p>
        </div>

        <div class="grid gap-6 lg:grid-cols-2">
            <div class="rounded-3xl overflow-hidden shadow-xl bg-white">
                <img src="<?= htmlspecialchars($baseUrl) ?>/images/office.png" alt="Office renovation after" class="h-80 w-full object-cover" />
            </div>
            <div class="space-y-6">
                <div class="rounded-3xl bg-white p-8 shadow-sm border border-slate-200">
                    <h2 class="text-2xl font-semibold text-premium-charcoal">Project Overview</h2>
                    <p class="mt-4 text-architectural-gray">This office renovation focuses on creating a functional, contemporary workspace with refined finishes, modern lighting, and professional detailing.</p>
                    <ul class="mt-6 space-y-3 text-architectural-gray">
                        <li class="flex items-start gap-3"><span class="text-balorp-magenta">•</span> Workspace layout optimization and interior finishes</li>
                        <li class="flex items-start gap-3"><span class="text-balorp-magenta">•</span> Premium wall panels and lighting upgrades</li>
                        <li class="flex items-start gap-3"><span class="text-balorp-magenta">•</span> Smart design for productivity and comfort</li>
                    </ul>
                </div>
                <div class="grid gap-6 sm:grid-cols-2">
                    <div class="rounded-3xl overflow-hidden shadow-lg bg-white">
                        <img src="<?= htmlspecialchars($baseUrl) ?>/images/office.png" alt="Office before" class="h-60 w-full object-cover" />
                    </div>
                    <div class="rounded-3xl overflow-hidden shadow-lg bg-white">
                        <img src="<?= htmlspecialchars($baseUrl) ?>/images/slider04.png" alt="Office after" class="h-60 w-full object-cover" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
