<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">Kitchen Renovation</h1>
            <p class="mt-4 text-architectural-gray">A dedicated showcase of our kitchen renovation project, with before and after photos and project highlights.</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/kitchen.png" alt="Kitchen 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 kitchen renovation includes premium cabinetry, modern lighting, quality tiling, and an elegant interior finish designed for both beauty and function.</p>
                    <ul class="mt-6 space-y-3 text-architectural-gray">
                        <li class="flex items-start gap-3"><span class="text-balorp-magenta">•</span> Custom kitchen tiling and countertops</li>
                        <li class="flex items-start gap-3"><span class="text-balorp-magenta">•</span> Lighting upgrades with task and accent fixtures</li>
                        <li class="flex items-start gap-3"><span class="text-balorp-magenta">•</span> Interior décor and cabinetry finish enhancement</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/kitchen.png" alt="Kitchen renovation before" class="h-60 w-full object-cover" />
                    </div>
                    <div class="rounded-3xl overflow-hidden shadow-lg bg-white">
                        <img src="<?= htmlspecialchars($baseUrl) ?>/images/slider03.png" alt="Kitchen renovation after" class="h-60 w-full object-cover" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
