<section class="service-detail-section relative overflow-hidden bg-white py-24 lg:py-32">
    <div class="absolute top-20 right-10 w-[500px] h-[500px] bg-gradient-to-bl from-[#FF007A]/5 to-transparent rounded-full blur-3xl"></div>
    <div class="absolute bottom-20 left-10 w-[400px] h-[400px] bg-gradient-to-tr from-[#D87AA8]/5 to-transparent rounded-full blur-3xl"></div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <a href="<?= htmlspecialchars($baseUrl) ?>/services" class="inline-flex items-center gap-2 text-sm font-semibold text-[#FF007A] hover:text-[#D87AA8] transition-colors mb-10">
            <span class="material-symbols-outlined text-base">arrow_back</span>
            Back to Services
        </a>

        <div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
            <div class="relative rounded-[2rem] overflow-hidden shadow-2xl border border-white/60 bg-white">
                <div class="absolute inset-0 bg-gradient-to-tr from-[#FF007A]/10 via-transparent to-[#D87AA8]/10 z-10 mix-blend-overlay"></div>
                <div class="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent z-10"></div>
                <?php
                // Refactor image path logic for better readability and maintainability
                $serviceId = (int)($service['id'] ?? 1);
                $imageMap = [
                    1 => 'painting.png',
                    2 => 'pop.png',
                    3 => 'flooring.png',
                    4 => 'decor.png',
                    5 => 'renovation.png',
                    6 => 'landscape.png',
                ];
                $imageFileName = $imageMap[$serviceId] ?? 'service' . $serviceId . '.png';
                ?>
                <img src="<?= htmlspecialchars($baseUrl) ?>/images/<?= htmlspecialchars($imageFileName) ?>" alt="<?= htmlspecialchars($service['title'] ?? 'Service') ?>" class="w-full h-auto object-cover">
                <div class="absolute -bottom-6 -right-6 w-24 h-24 bg-gradient-to-br from-[#FF007A] to-[#D87AA8] rounded-full blur-2xl opacity-40 z-0"></div>
            </div>

            <div>
                <span class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-[#FF007A] to-[#D87AA8] text-white text-xs font-bold uppercase tracking-[0.25em] mb-6 shadow-xl shadow-[#FF007A]/20">
                    Service Details
                </span>
                <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-slate-900 tracking-tight leading-[1.08] mb-6">
                    <?= htmlspecialchars($service['title'] ?? 'Service') ?>
                </h1>
                <p class="text-base sm:text-lg text-slate-600 leading-relaxed mb-10">
                    <?= !empty($service['summary']) ? nl2br($service['summary']) : 'Our team delivers this service with premium materials, proven processes, and strong attention to detail.' ?>
                </p>

                <div class="grid sm:grid-cols-2 gap-6">
                    <div class="group relative rounded-3xl border border-slate-100 bg-slate-50/60 p-6 transition-all duration-500 hover:-translate-y-1 hover:shadow-xl hover:shadow-[#FF007A]/10">
                        <div class="absolute top-0 left-0 right-0 h-1 rounded-t-3xl bg-gradient-to-r from-[#FF007A] to-[#D87AA8]"></div>
                        <h3 class="text-base font-bold text-slate-900 mb-2">Premium Quality</h3>
                        <p class="text-sm text-slate-600 leading-relaxed">We use high-grade materials and industry-approved techniques to ensure lasting results.</p>
                    </div>
                    <div class="group relative rounded-3xl border border-slate-100 bg-slate-50/60 p-6 transition-all duration-500 hover:-translate-y-1 hover:shadow-xl hover:shadow-[#FF007A]/10">
                        <div class="absolute top-0 left-0 right-0 h-1 rounded-t-3xl bg-gradient-to-r from-[#FF007A] to-[#D87AA8]"></div>
                        <h3 class="text-base font-bold text-slate-900 mb-2">Expert Execution</h3>
                        <p class="text-sm text-slate-600 leading-relaxed">Our specialists plan, execute, and inspect every phase with clear timelines.</p>
                    </div>
                    <div class="group relative rounded-3xl border border-slate-100 bg-slate-50/60 p-6 transition-all duration-500 hover:-translate-y-1 hover:shadow-xl hover:shadow-[#FF007A]/10">
                        <div class="absolute top-0 left-0 right-0 h-1 rounded-t-3xl bg-gradient-to-r from-[#FF007A] to-[#D87AA8]"></div>
                        <h3 class="text-base font-bold text-slate-900 mb-2">Transparent Pricing</h3>
                        <p class="text-sm text-slate-600 leading-relaxed">Clear estimates, no hidden fees, and regular updates throughout the project.</p>
                    </div>
                    <div class="group relative rounded-3xl border border-slate-100 bg-slate-50/60 p-6 transition-all duration-500 hover:-translate-y-1 hover:shadow-xl hover:shadow-[#FF007A]/10">
                        <div class="absolute top-0 left-0 right-0 h-1 rounded-t-3xl bg-gradient-to-r from-[#FF007A] to-[#D87AA8]"></div>
                        <h3 class="text-base font-bold text-slate-900 mb-2">Aftercare Support</h3>
                        <p class="text-sm text-slate-600 leading-relaxed">We stand behind our work with follow-up checks and responsive support.</p>
                    </div>
                </div>

                <div class="mt-10 flex flex-col sm:flex-row gap-4">
                    <a href="<?= htmlspecialchars($baseUrl) ?>/estimate" class="inline-flex items-center justify-center gap-2 px-8 py-4 rounded-full bg-gradient-to-r from-[#FF007A] to-[#D87AA8] text-white font-semibold text-base shadow-xl shadow-[#FF007A]/25 hover:shadow-2xl hover:shadow-[#FF007A]/40 hover:-translate-y-1 transition-all duration-300">
                        <span class="material-symbols-outlined text-xl">request_quote</span>
                        Get a Free Quote
                    </a>
                    <a href="<?= htmlspecialchars($baseUrl) ?>/contact" class="inline-flex items-center justify-center gap-2 px-8 py-4 rounded-full border border-slate-200 text-slate-900 font-semibold text-base hover:border-[#FF007A] hover:text-[#FF007A] transition-colors">
                        <span class="material-symbols-outlined text-xl">mail</span>
                        Contact Us
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
