<section class="portfolio-section relative overflow-hidden bg-gradient-to-b from-white via-[#FFF9F5] to-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">
        <div class="text-center max-w-3xl mx-auto mb-20">
            <span class="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-gradient-to-r from-[#FF007A] to-[#D87AA8] text-white text-xs font-bold uppercase tracking-[0.25em] mb-8 shadow-xl shadow-[#FF007A]/20">
                Our Projects
            </span>
            <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-slate-900 tracking-tight leading-[1.08] mb-6">
                Portfolio of <span class="text-transparent bg-clip-text bg-gradient-to-r from-[#FF007A] to-[#D87AA8]">completed work</span>
            </h1>
            <p class="text-base sm:text-lg text-slate-500 leading-relaxed max-w-2xl mx-auto">A selection of our best work across fine finishes, renovation, and interior design.</p>
        </div>

        <div class="grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
            <?php if (empty($projects)): ?>
                <div class="md:col-span-3 text-center text-slate-500 py-12">No projects published yet. Check back soon.</div>
            <?php else: ?>
                <?php foreach (array_slice($projects, 0, 6) as $project): ?>
                <a href="<?= htmlspecialchars($baseUrl) ?>/projects/<?= htmlspecialchars($project['slug'] ?? 'project-' . (int)$project['id']) ?>" class="project-card group relative h-[420px] rounded-[2rem] overflow-hidden shadow-lg">
                    <img src="<?= htmlspecialchars($baseUrl) ?>/images/<?= htmlspecialchars($project['image_path'] ?? 'living1.png') ?>" alt="<?= htmlspecialchars($project['title'] ?? 'Project') ?>" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent z-10"></div>
                    <div class="absolute inset-0 bg-gradient-to-br from-[#FF007A]/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-10"></div>
                    <div class="relative z-20 h-full flex flex-col justify-end p-8">
                        <div class="w-14 h-14 rounded-2xl bg-white/10 backdrop-blur-md border border-white/20 flex items-center justify-center text-white mb-5 group-hover:scale-110 group-hover:bg-gradient-to-br group-hover:from-[#FF007A] group-hover:to-[#D87AA8] transition-all duration-500">
                            <span class="material-symbols-outlined text-2xl"><?= htmlspecialchars($project['icon'] ?? 'apartment') ?></span>
                        </div>
                        <h3 class="text-2xl font-bold text-white mb-2 group-hover:text-white transition-colors"><?= htmlspecialchars($project['title'] ?? 'Project') ?></h3>
                        <p class="text-white/80 text-sm leading-relaxed opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-500 delay-75"><?= htmlspecialchars($project['description'] ?? '') ?></p>
                    </div>
                </a>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>

        <div class="mt-24 text-center">
            <p class="text-slate-600 text-lg mb-6">Have a project in mind?</p>
            <a href="<?= htmlspecialchars($baseUrl) ?>/estimate" class="inline-flex items-center gap-3 px-10 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>
                Start Your Project
            </a>
        </div>
    </div>
</section>
