<style>
/* ─── DETAIL BLOG ──────────────────────── */
.detail-wrap { max-width: 900px; margin: 0 auto; }

.detail-header-card {
  border-radius: 16px; overflow: hidden;
  border: 1px solid #e9ecef;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
  margin-bottom: 24px;
}
.detail-hero-img {
  width: 100%; max-height: 420px; object-fit: cover;
  display: block;
}
.detail-hero-placeholder {
  width: 100%; height: 260px;
  background: linear-gradient(135deg, #eff6ff, #e0e7ff);
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem; color: #94a3b8;
}
.detail-body { padding: 32px; }
.detail-badge { margin-bottom: 14px; }
.detail-title { font-size: 1.6rem; font-weight: 900; color: #1e293b; line-height: 1.35; margin-bottom: 16px; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.82rem; color: #64748b; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid #f1f5f9; }
.detail-meta span { display: flex; align-items: center; gap: 5px; }
.detail-content { font-size: 0.95rem; line-height: 1.9; color: #374151; }
.detail-content p { margin-bottom: 14px; }
.detail-content h2, .detail-content h3 { font-weight: 700; margin-top: 24px; margin-bottom: 10px; color: #1e293b; }
.detail-content ul, .detail-content ol { padding-left: 22px; margin-bottom: 14px; }
.detail-content img { max-width: 100%; border-radius: 10px; margin: 10px 0; }
.detail-content blockquote {
  border-left: 4px solid #3b82f6; margin: 16px 0;
  padding: 12px 20px; background: #eff6ff; border-radius: 0 10px 10px 0;
  font-style: italic; color: #334155;
}

/* ─── GALLERY ──────────────────────────── */
.gallery-section { margin-top: 32px; }
.gallery-section-title {
  font-size: 1.05rem; font-weight: 800; color: #1e293b;
  margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
}
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.gallery-item {
  border-radius: 10px; overflow: hidden; position: relative;
  aspect-ratio: 1; cursor: pointer; background: #f1f5f9;
}
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s;
}
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item .gallery-overlay {
  position: absolute; inset: 0;
  background: rgba(30,58,95,0.45);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .25s;
  color: #fff; font-size: 1.5rem;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-item .gallery-admin-btns {
  position: absolute; bottom: 6px; right: 6px;
  display: flex; gap: 4px; opacity: 0; transition: opacity .2s;
}
.gallery-item:hover .gallery-admin-btns { opacity: 1; }

/* ─── LIGHTBOX ─────────────────────────── */
.lb-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.88); backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
}
.lb-overlay.active { display: flex; }
.lb-wrap { position: relative; max-width: 90vw; max-height: 90vh; }
.lb-wrap img { max-width: 90vw; max-height: 82vh; object-fit: contain; border-radius: 10px; display: block; }
.lb-caption { text-align: center; color: #e2e8f0; font-size: 0.85rem; margin-top: 10px; }
.lb-close {
  position: fixed; top: 20px; right: 28px; color: #fff;
  font-size: 2rem; cursor: pointer; line-height: 1; z-index: 10000;
  background: none; border: none;
}
.lb-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.12); border: none; color: #fff;
  font-size: 1.8rem; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(4px); transition: background .2s;
  z-index: 10000;
}
.lb-nav:hover { background: rgba(255,255,255,0.22); }
.lb-nav.prev { left: 20px; }
.lb-nav.next { right: 20px; }
.lb-counter { color: #94a3b8; font-size: 0.8rem; text-align: center; margin-top: 4px; }

/* ─── BACK & ACTIONS ──────────────────── */
.detail-actions-bar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-bottom: 20px;
}
.btn-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 50px; border: 1.5px solid #e2e8f0;
  font-size: 0.85rem; font-weight: 600; color: #64748b;
  text-decoration: none; background: #fff;
  transition: all .2s;
}
.btn-back:hover { background: #f8fafc; color: #3b82f6; border-color: #3b82f6; }

@media (max-width: 767.98px) {
  .detail-body { padding: 20px; }
  .detail-title { font-size: 1.25rem; }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
</style>

<?php
$badge_map = [
    'sosial'=>['🤝','#3b82f6','#eff6ff'],'olahraga'=>['⚽','#10b981','#ecfdf5'],
    'kebersihan'=>['🧹','#f59e0b','#fffbeb'],'keagamaan'=>['🕌','#8b5cf6','#f5f3ff'],
    'pendidikan'=>['📚','#ec4899','#fdf2f8'],'kesehatan'=>['❤️','#ef4444','#fef2f2'],
    'budaya'=>['🎭','#f97316','#fff7ed'],'lainnya'=>['📌','#6b7280','#f9fafb'],
];
$b = $badge_map[$kegiatan->kategori] ?? $badge_map['lainnya'];
?>

<div class="detail-wrap">
    <!-- Actions Bar -->
    <div class="detail-actions-bar">
        <a href="<?php echo base_url('kegiatan'); ?>" class="btn-back">
            <i class="bi bi-arrow-left"></i> Kembali
        </a>
        <?php if($is_admin): ?>
        <div class="d-flex gap-2">
            <a href="<?php echo base_url('kegiatan/edit/'.$kegiatan->id); ?>"
               class="btn btn-sm btn-warning fw-semibold px-3" style="border-radius:50px;">
                <i class="bi bi-pencil me-1"></i>Edit
            </a>
            <a href="<?php echo base_url('kegiatan/hapus/'.$kegiatan->id); ?>"
               class="btn btn-sm btn-danger fw-semibold px-3" style="border-radius:50px;"
               onclick="return confirm('Hapus kegiatan ini beserta semua foto?')">
                <i class="bi bi-trash me-1"></i>Hapus
            </a>
        </div>
        <?php endif; ?>
    </div>

    <!-- Main Card -->
    <div class="detail-header-card">
        <?php if($kegiatan->thumbnail): ?>
        <img src="<?php echo base_url('uploads/kegiatan/'.$kegiatan->thumbnail); ?>"
             alt="<?php echo htmlspecialchars($kegiatan->judul); ?>"
             class="detail-hero-img">
        <?php else: ?>
        <div class="detail-hero-placeholder"><?php echo $b[0]; ?></div>
        <?php endif; ?>

        <div class="detail-body">
            <!-- Badge + Status -->
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 detail-badge">
                <span class="badge rounded-pill px-3 py-2 fw-semibold"
                      style="background:<?php echo $b[2]; ?>; color:<?php echo $b[1]; ?>; border:1px solid <?php echo $b[1]; ?>30; font-size:.82em;">
                    <?php echo $b[0].' '.ucfirst($kegiatan->kategori); ?>
                </span>
                <?php if($is_admin): ?>
                <?php $sc = $kegiatan->status=='publish'?'#19875420':'#6c757d20'; $stc = $kegiatan->status=='publish'?'#198754':'#6c757d'; ?>
                <span class="badge rounded-pill px-3 py-2"
                      style="background:<?php echo $sc; ?>; color:<?php echo $stc; ?>; font-size:.82em;">
                    <?php echo ucfirst($kegiatan->status); ?>
                </span>
                <?php endif; ?>
            </div>

            <h1 class="detail-title"><?php echo htmlspecialchars($kegiatan->judul); ?></h1>

            <div class="detail-meta">
                <span><i class="bi bi-calendar3" style="color:#3b82f6;"></i>
                    <?php echo date('d F Y', strtotime($kegiatan->tanggal_mulai)); ?>
                    <?php if($kegiatan->tanggal_selesai && $kegiatan->tanggal_selesai != $kegiatan->tanggal_mulai): ?>
                    &nbsp;–&nbsp;<?php echo date('d F Y', strtotime($kegiatan->tanggal_selesai)); ?>
                    <?php endif; ?>
                </span>
                <?php if($kegiatan->lokasi): ?>
                <span><i class="bi bi-geo-alt-fill" style="color:#ef4444;"></i><?php echo htmlspecialchars($kegiatan->lokasi); ?></span>
                <?php endif; ?>
                <span><i class="bi bi-person-circle" style="color:#6366f1;"></i><?php echo htmlspecialchars($kegiatan->pembuat); ?></span>
                <?php if($kegiatan->jumlah_foto > 0): ?>
                <span><i class="bi bi-images" style="color:#10b981;"></i><?php echo $kegiatan->jumlah_foto; ?> foto</span>
                <?php endif; ?>
            </div>

            <!-- Artikel / Isi -->
            <div class="detail-content">
                <?php echo $kegiatan->isi; ?>
            </div>

            <!-- ─── GALERI ─────────────────────────────── -->
            <?php if(!empty($galeri)): ?>
            <div class="gallery-section">
                <div class="gallery-section-title">
                    <span style="width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#3b82f6,#6366f1);display:inline-flex;align-items:center;justify-content:center;color:#fff;">
                        <i class="bi bi-images"></i>
                    </span>
                    Galeri Foto
                    <span class="badge bg-light text-muted border ms-1" style="font-size:.78em;"><?php echo count($galeri); ?> foto</span>
                </div>

                <div class="gallery-grid">
                    <?php foreach($galeri as $idx => $foto): ?>
                    <div class="gallery-item" onclick="openLightbox(<?php echo $idx; ?>)">
                        <img src="<?php echo base_url('uploads/kegiatan/galeri/'.$foto->nama_file); ?>"
                             alt="<?php echo htmlspecialchars($foto->keterangan ?? ''); ?>"
                             loading="lazy">
                        <div class="gallery-overlay"><i class="bi bi-zoom-in"></i></div>
                        <?php if($is_admin): ?>
                        <div class="gallery-admin-btns">
                            <a href="<?php echo base_url('kegiatan/hapus_foto/'.$foto->id); ?>"
                               onclick="event.stopPropagation(); return confirm('Hapus foto ini?')"
                               class="btn btn-sm btn-danger px-1 py-0" style="border-radius:6px; font-size:.75rem;">
                                <i class="bi bi-trash-fill"></i>
                            </a>
                        </div>
                        <?php endif; ?>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
            <?php endif; ?>

        </div>
    </div>
</div>

<!-- ─── LIGHTBOX ──────────────────────────────── -->
<?php if(!empty($galeri)): ?>
<div class="lb-overlay" id="lightbox">
    <button class="lb-close" onclick="closeLightbox()">&#x2715;</button>
    <button class="lb-nav prev" onclick="prevPhoto()"><i class="bi bi-chevron-left"></i></button>
    <button class="lb-nav next" onclick="nextPhoto()"><i class="bi bi-chevron-right"></i></button>
    <div class="lb-wrap">
        <img id="lb-img" src="" alt="">
        <div class="lb-caption" id="lb-caption"></div>
        <div class="lb-counter" id="lb-counter"></div>
    </div>
</div>

<script>
var photos = [
    <?php foreach($galeri as $foto): ?>
    {
        src: '<?php echo base_url("uploads/kegiatan/galeri/".$foto->nama_file); ?>',
        caption: '<?php echo addslashes(htmlspecialchars($foto->keterangan ?? "")); ?>'
    },
    <?php endforeach; ?>
];
var current = 0;

function openLightbox(idx) {
    current = idx;
    showPhoto();
    document.getElementById('lightbox').classList.add('active');
    document.body.style.overflow = 'hidden';
}
function closeLightbox() {
    document.getElementById('lightbox').classList.remove('active');
    document.body.style.overflow = '';
}
function showPhoto() {
    document.getElementById('lb-img').src = photos[current].src;
    document.getElementById('lb-caption').textContent = photos[current].caption;
    document.getElementById('lb-counter').textContent = (current+1) + ' / ' + photos.length;
}
function prevPhoto() { current = (current - 1 + photos.length) % photos.length; showPhoto(); }
function nextPhoto() { current = (current + 1) % photos.length; showPhoto(); }

document.addEventListener('keydown', function(e) {
    if(!document.getElementById('lightbox').classList.contains('active')) return;
    if(e.key === 'Escape') closeLightbox();
    if(e.key === 'ArrowLeft') prevPhoto();
    if(e.key === 'ArrowRight') nextPhoto();
});
document.getElementById('lightbox').addEventListener('click', function(e) {
    if(e.target === this) closeLightbox();
});
</script>
<?php endif; ?>