<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">Modern Finish Sample</h1>
            <p class="mt-4 text-architectural-gray">A dedicated showcase of sleek contemporary finishes that create polished, modern spaces.</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/slider02.png" alt="Modern finish sample" 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 modern finish sample features crisp surfaces, statement lighting, and precision craftsmanship to produce a refined, elegant result.</p>
                    <ul class="mt-6 space-y-3 text-architectural-gray">
                        <li class="flex items-start gap-3"><span class="text-balorp-magenta">•</span> Smooth finishes and contemporary material palettes</li>
                        <li class="flex items-start gap-3"><span class="text-balorp-magenta">•</span> Clean lines with premium edge details</li>
                        <li class="flex items-start gap-3"><span class="text-balorp-magenta">•</span> Sophisticated lighting and decor coordination</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/slider02.png" alt="Modern finish detail" class="h-60 w-full object-cover" />
                    </div>
                    <div class="rounded-3xl overflow-hidden shadow-lg bg-white">
                        <img src="<?= htmlspecialchars($baseUrl) ?>/images/slider05.png" alt="Modern finish after" class="h-60 w-full object-cover" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
