<section class="bg-slate-50 py-16">
    <div class="max-w-7xl mx-auto px-4">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
                <h1 class="text-3xl font-bold text-slate-950">Project Gallery</h1>
                <p class="mt-2 text-slate-600">Browse progress, before, and after photos from your active projects.</p>
            </div>
            <a href="<?= htmlspecialchars($baseUrl) ?>/portal/dashboard" class="rounded-full border border-slate-300 px-5 py-3 text-sm text-slate-950 hover:bg-slate-100">Back to Dashboard</a>
        </div>

        <div class="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            <?php if (empty($photos)): ?>
                <div class="col-span-full rounded-3xl bg-white p-10 text-center text-slate-500 shadow-lg border border-slate-200">No project photos are available yet.</div>
            <?php endif; ?>
            <?php foreach ($photos as $photo): ?>
                <div class="rounded-3xl overflow-hidden border border-slate-200 bg-white shadow-lg">
                    <img src="<?= htmlspecialchars(str_starts_with($photo['file_path'], '/') ? $photo['file_path'] : '/' . ltrim($photo['file_path'], '/')) ?>" alt="<?= htmlspecialchars($photo['caption'] ?? $photo['project_name']) ?>" class="h-64 w-full object-cover" />
                    <div class="p-5">
                        <p class="text-sm uppercase tracking-[0.2em] text-primary">Project</p>
                        <p class="mt-2 text-lg font-semibold text-slate-950"><?= htmlspecialchars($photo['project_name']) ?></p>
                        <p class="mt-2 text-slate-600 text-sm"><?= htmlspecialchars($photo['caption'] ?? ucfirst(strtolower($photo['image_type'])) . ' image') ?></p>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
