@extends('layouts.app', ['title' => 'SILONTAR'])

@section('content')
<div class="silontar-home">

    <section class="hero-section">
        <div class="container py-5">
            <div class="row align-items-center">
                <div class="col-lg-6 mb-4 mb-lg-0">
                    <span class="badge badge-primary px-3 py-2 mb-3">Platform Resmi SILONTAR (Sistem Informasi Layanan Online Terpadu)</span>

                    <h1 class="hero-title mb-3">
                        GENTASKIN (Gerakan NTT Tuntas Stunting dan Kemiskinan ekstrim)
                    </h1>

                    <p class="hero-text mb-4">
                        SILONTAR membantu pengelolaan pengumuman, data, validasi operator,
                        dan proses administrasi secara lebih efisien, terstruktur, dan terintegrasi.
                    </p>

                    <div class="d-flex flex-wrap">
                        @guest
                            
                        @endguest

                        @auth
                            <a href="{{ route('admin.dashboard') }}" class="btn btn-primary btn-lg mb-2">
                                <i class="fas fa-tachometer-alt mr-1"></i> Masuk Dashboard
                            </a>
                        @endauth
                    </div>
                </div>

                <div class="col-lg-6 text-center">
                    <img src="{{ asset('images/register-education.svg') }}"
                         alt="Ilustrasi SILONTAR"
                         class="img-fluid hero-illustration">
                </div>
            </div>
        </div>
    </section>

    <section class="feature-section py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="section-title">Fitur Utama SILONTAR</h2>
                <p class="section-subtitle">
                    Dirancang untuk mendukung layanan yang lebih cepat, transparan, dan profesional.
                </p>
            </div>

            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="feature-card h-100">
                        <div class="feature-icon">
                            <i class="fas fa-bullhorn"></i>
                        </div>
                        <h5>Pengumuman Terpusat</h5>
                        <p>
                            Publikasi informasi penting secara cepat dan mudah diakses oleh seluruh pengguna.
                        </p>
                    </div>
                </div>

                <div class="col-md-4 mb-4">
                    <div class="feature-card h-100">
                        <div class="feature-icon">
                            <i class="fas fa-user-check"></i>
                        </div>
                        <h5>Validasi Operator</h5>
                        <p>
                            Mempermudah proses validasi akun operator dengan data perguruan tinggi dan dokumen pendukung.
                        </p>
                    </div>
                </div>

                <div class="col-md-4 mb-4">
                    <div class="feature-card h-100">
                        <div class="feature-icon">
                            <i class="fas fa-database"></i>
                        </div>
                        <h5>Manajemen Data</h5>
                        <p>
                            Kelola data dosen, mahasiswa, dan master data secara terstruktur dalam satu sistem.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="latest-news-section py-5 bg-light">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap">
                <div class="mb-2">
                    <h2 class="section-title mb-1">Pengumuman Terbaru</h2>
                    <p class="section-subtitle mb-0">
                        Ikuti informasi terbaru dari SILONTAR.
                    </p>
                </div>

                <a href="{{ route('pengumuman') }}" class="btn btn-outline-primary btn-sm mb-2">
                    Lihat Semua Pengumuman
                </a>
            </div>

            <div class="row">
                @forelse($pengumumanTerbaru ?? [] as $item)
                    <div class="col-lg-4 col-md-6 mb-4">
                        <article class="news-card h-100">
                            @if($item->gambar)
                                <img
                                    src="{{ $item->publicImageUrl() }}"
                                    alt="{{ $item->judul }}"
                                    class="news-image"
                                >
                            @else
                                <div class="news-image-placeholder">
                                    <i class="fas fa-image fa-2x mb-2"></i>
                                    <div>Tidak ada gambar</div>
                                </div>
                            @endif

                            <div class="news-body">
                                <div class="mb-2">
                                    <span class="badge badge-primary px-3 py-2">
                                        <i class="far fa-calendar-alt mr-1"></i>
                                        {{ \Carbon\Carbon::parse($item->tanggal)->translatedFormat('d F Y') }}
                                    </span>
                                </div>

                                <h5 class="font-weight-bold news-title">
                                    {{ $item->judul }}
                                </h5>

                                <p class="text-muted">
                                    {{ \Illuminate\Support\Str::limit(strip_tags($item->isi), 120) }}
                                </p>

                                <a href="{{ route('pengumuman.show', $item->id) }}" class="btn btn-outline-primary btn-sm">
                                    Baca Selengkapnya
                                </a>
                            </div>
                        </article>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="alert alert-info text-center mb-0">
                            Belum ada pengumuman terbaru.
                        </div>
                    </div>
                @endforelse
            </div>
        </div>
    </section>

    

                @auth
                 
                @endauth
            </div>
        </div>
    </section>

</div>

<style>
    .silontar-home {
        background: #f5f8fc;
    }

    .hero-section {
        background: linear-gradient(135deg, #eef5ff 0%, #f8fbff 100%);
    }

    .hero-title {
        font-size: 2.5rem;
        font-weight: 800;
        line-height: 1.25;
        color: #1f2d3d;
    }

    .hero-text {
        font-size: 1.05rem;
        line-height: 1.9;
        color: #5c6773;
    }

    .hero-illustration {
        max-height: 420px;
        object-fit: contain;
    }

    .section-title {
        font-size: 2rem;
        font-weight: 700;
        color: #1f2d3d;
    }

    .section-subtitle {
        color: #6c757d;
        font-size: 1rem;
    }

    .feature-card {
        background: #fff;
        border-radius: 16px;
        padding: 28px 24px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
        text-align: center;
        transition: .2s ease-in-out;
    }

    .feature-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 35px rgba(0, 0, 0, 0.10);
    }

    .feature-card h5 {
        font-weight: 700;
        margin-bottom: 12px;
        color: #1f2d3d;
    }

    .feature-card p {
        color: #6c757d;
        margin-bottom: 0;
        line-height: 1.8;
    }

    .feature-icon {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: rgba(13, 110, 253, 0.10);
        color: #0d6efd;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
        margin: 0 auto 18px auto;
    }

    .news-card {
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
        transition: .2s ease-in-out;
    }

    .news-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 35px rgba(0, 0, 0, 0.10);
    }

    .news-image {
        width: 100%;
        height: 220px;
        object-fit: cover;
    }

    .news-image-placeholder {
        height: 220px;
        background: #eef2f7;
        color: #8a94a6;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .news-body {
        padding: 22px;
    }

    .news-title {
        line-height: 1.5;
        color: #1f2d3d;
    }

    .cta-box {
        background: #fff;
        border-radius: 18px;
        padding: 48px 24px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    }

    .cta-box h2 {
        font-weight: 700;
        color: #1f2d3d;
    }

    .cta-box p {
        color: #6c757d;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    @media (max-width: 991.98px) {
        .hero-title {
            font-size: 2rem;
        }

        .section-title {
            font-size: 1.7rem;
        }
    }
</style>
@endsection