<?php $__env->startSection('content'); ?>

<style>
/* =========================
   ANIMATION & BASE (FIXED OVERFLOW)
========================= */
.fade-section {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    will-change: opacity, transform;
}

.fade-section.show {
    opacity: 1;
    transform: translateY(0);
}

/* =========================
   INFO CARDS
========================= */
.info-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 1.25rem;
    box-shadow: 0 4px 18px rgba(15, 23, 42, .04);
    transition: transform .25s ease, box-shadow .25s ease;
}

@media (min-width: 640px) {
    .info-card {
        border-radius: 24px;
        padding: 1.5rem;
    }
}

.info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
}

.info-card::before {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 999px;
    background: rgba(59, 130, 246, .04);
    top: -70px;
    right: -70px;
    pointer-events: none;
}

.info-header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.info-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid #bfdbfe;
    color: #2563eb;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .info-icon {
        width: 50px;
        height: 50px;
        border-radius: 16px;
    }
}

.info-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.5;
}

@media (min-width: 640px) {
    .info-title {
        font-size: 1.08rem;
    }
}

.info-content {
    position: relative;
    z-index: 2;
    color: #4b5563;
    line-height: 1.7;
    font-size: 0.8125rem;
    word-break: break-word;
}

@media (min-width: 640px) {
    .info-content {
        line-height: 1.85;
        font-size: 0.875rem;
    }
}

.info-content a {
    color: #2563eb;
    font-weight: 600;
    transition: color .2s ease;
}

.info-content a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.info-footer {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.info-time {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
}

.empty-box {
    text-align: center;
    padding: 2.5rem 1rem;
}

.empty-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid #bfdbfe;
    color: #2563eb;
}
</style>

<div class="max-w-5xl mx-auto px-3 sm:px-6 py-4 sm:py-8 space-y-5 sm:space-y-6 font-['Inter',sans-serif]">

    <!-- LIST INFORMASI -->
    <section class="space-y-4 sm:space-y-6">

        <?php
            $infos = \App\Models\Information::latest()->get();
        ?>

        <?php $__empty_1 = true; $__currentLoopData = $infos; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $info): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>

        <div class="info-card fade-section">

            <!-- HEADER -->
            <div class="info-header">
                <div class="info-icon">
                    <span class="material-symbols-outlined text-[22px]">campaign</span>
                </div>

                <div class="flex-1 min-w-0 pt-0.5">
                    <h2 class="info-title">
                        <?php echo e($info->title); ?>

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

            <!-- CONTENT -->
            <?php
                // Parsing URL otomatis menjadi link aktif
                $parsedContent = preg_replace(
                    '/(https?:\/\/[^\s<]+)/i', 
                    '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>', 
                    e($info->content)
                );
            ?>

            <div class="info-content">
                <?php echo nl2br($parsedContent); ?>

            </div>

            <!-- FOOTER -->
            <div class="info-footer">
                <div class="info-time">
                    <span class="material-symbols-outlined text-[16px] text-slate-400">schedule</span>
                    <span><?php echo e($info->created_at->format('d M Y, H:i')); ?></span>
                </div>
            </div>

        </div>

        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>

        <!-- EMPTY STATE -->
        <div class="info-card fade-section">
            <div class="empty-box">
                <div class="empty-icon">
                    <span class="material-symbols-outlined text-[32px]">inbox</span>
                </div>

                <h3 class="text-base font-bold text-slate-800 mb-1">
                    Belum Ada Informasi
                </h3>

                <p class="text-slate-500 text-xs">
                    Saat ini belum ada pengumuman atau informasi terbaru yang tersedia.
                </p>
            </div>
        </div>

        <?php endif; ?>

    </section>

    <?php echo $__env->make('components.footer', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

</div>

<script>
const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('show');
        }
    });
}, {
    threshold: 0.1
});

document.querySelectorAll('.fade-section').forEach(el => observer.observe(el));
</script>

<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/nusaotp/public_html/resources/views/informasi.blade.php ENDPATH**/ ?>