@extends('layouts.app')

@section('content')

<!-- =====================================================
 HERO
====================================================== -->

<section class="hero-home">

    <div class="hero-overlay"></div>

    <div class="container">

        <div class="row align-items-center min-vh-100">

            <div class="col-lg-7 text-white" data-aos="fade-right">

                <span class="badge bg-warning text-dark px-4 py-2 rounded-pill mb-4">

                    Website Resmi Pelestarian Budaya

                </span>

                <h1 class="display-3 fw-bold mb-4">

                    Melestarikan
                    <span class="text-warning">

                        Budaya

                    </span>

                    <br>

                    Mandailing Natal

                </h1>

                </p>

            

                </div>

            </div>

        </div>

    </div>

</section>


<!-- =====================================================
 RUNNING TEXT
====================================================== -->

<div class="running-text">

    <marquee behavior="scroll" direction="left" scrollamount="7">

        🌿 Selamat Datang di Website Pelestarian Budaya Mandailing Natal •
        Mengenalkan Budaya Lokal •
        Melestarikan Warisan Leluhur •
        Menjaga Identitas Daerah •
        Bersama Membangun Generasi Cinta Budaya 🌿

    </marquee>

</div>


<!-- =====================================================
 TENTANG WEBSITE
====================================================== -->

<section class="py-5 bg-white">

    <div class="container">

        <div class="row align-items-center">

            <div class="col-lg-6 mb-4"
                data-aos="fade-right">

                <img src="{{ asset('images/gambar1.jpg') }}"
                    class="img-fluid rounded-4 shadow-lg">

            </div>

            <div class="col-lg-6"
                data-aos="fade-left">

                <span class="text-warning fw-bold">

                    TENTANG WEBSITE

                </span>

                <h2 class="fw-bold mt-3 mb-4">

                    Mengenal Kekayaan Budaya
                    Mandailing Natal

                </h2>

                <p class="text-muted fs-5">

                    Website ini merupakan media informasi digital yang
                    menyajikan berbagai data budaya, dokumentasi kegiatan,
                    serta agenda budaya Kabupaten Mandailing Natal.

                </p>

                <p class="text-muted">

                    Melalui website ini masyarakat dapat mengenal
                    berbagai warisan budaya seperti adat istiadat,
                    rumah adat, tarian tradisional, Gordang Sambilan,
                    kuliner khas, hingga berbagai kegiatan budaya yang
                    terus dilestarikan.

                </p>

                <div class="mt-4">

                    <a href="{{ route('frontend.data-budaya') }}"
                        class="btn btn-warning rounded-pill px-4">

                        <i class="bi bi-book-half"></i>

                        Data Budaya

                    </a>

                    <a href="{{ route('frontend.agenda') }}"
                        class="btn btn-dark rounded-pill px-4 ms-2">

                        <i class="bi bi-calendar-event"></i>

                        Agenda Budaya

                    </a>

                </div>

            </div>

        </div>

    </div>

</section>
<!-- =====================================================
 DATA BUDAYA
====================================================== -->

<section id="budaya" class="py-5 bg-light">

    <div class="container">

        <div class="text-center mb-5" data-aos="fade-up">

            <span class="badge bg-warning text-dark px-4 py-2 rounded-pill mb-3">

                WARISAN BUDAYA

            </span>


            <p class="text-muted fs-5">

                Mengenal berbagai warisan budaya yang dimiliki Kabupaten Mandailing Natal.

            </p>

        </div>

        <div class="row">

            @forelse($budayas as $budaya)

            <div class="col-lg-4 col-md-6 mb-4" data-aos="zoom-in">

                <div class="card budaya-card border-0 shadow h-100">

                    @if($budaya->gambar)

                    <div class="overflow-hidden">

                        <img src="{{ asset('storage/'.$budaya->gambar) }}"
                             class="card-img-top budaya-img">

                    </div>

                    @else

                    <img src="{{ asset('images/no-image.png') }}"
                         class="card-img-top budaya-img">

                    @endif

                    <div class="card-body">

                        <span class="badge bg-warning text-dark mb-3">

                            {{ $budaya->jenis_budaya }}

                        </span>

                        <h4 class="fw-bold">

                            {{ $budaya->nama_budaya }}

                        </h4>

                        <p class="text-muted mb-2">

                            <i class="bi bi-geo-alt-fill text-danger"></i>

                            {{ $budaya->asal_daerah }}

                        </p>

                        <p class="text-secondary">

                            {{ Str::limit($budaya->deskripsi, 120) }}

                        </p>

                    </div>

                    <div class="card-footer bg-white border-0">

                        <a href="{{ route('frontend.detail-budaya',$budaya->id) }}"
                           class="btn btn-warning rounded-pill w-100">

                            <i class="bi bi-eye-fill"></i>

                            Lihat Detail

                        </a>

                    </div>

                </div>

            </div>

            @empty

            <div class="col-12">

                <div class="alert alert-warning text-center shadow-sm">

                    <i class="bi bi-exclamation-circle"></i>

                    Data budaya belum tersedia.

                </div>

            </div>

            @endforelse

        </div>

        <div class="text-center mt-5">

            <a href="{{ route('frontend.data-budaya') }}"
               class="btn btn-dark btn-lg rounded-pill px-5">

                <i class="bi bi-collection"></i>

                Lihat Semua Data Budaya

            </a>

        </div>

    </div>

</section>
<!-- =====================================================
 AGENDA BUDAYA
====================================================== -->

<section class="py-5">

    <div class="container">

        <div class="text-center mb-5" data-aos="fade-up">

        
            <p class="text-muted fs-5">

                Ikuti berbagai kegiatan pelestarian budaya yang diselenggarakan di Kabupaten Mandailing Natal.

            </p>

        </div>

        <div class="row">

            @forelse($agendas as $agenda)

            <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up">

                <div class="card agenda-card border-0 shadow h-100">

                    @if($agenda->gambar)

                    <img src="{{ asset('storage/'.$agenda->gambar) }}"
                        class="card-img-top agenda-img">

                    @else

                    <img src="{{ asset('images/no-image.png') }}"
                        class="card-img-top agenda-img">

                    @endif

                    <div class="card-body">

                        <span class="badge bg-success mb-3">

                            {{ $agenda->status }}

                        </span>

                        <h4 class="fw-bold">

                            {{ $agenda->nama_agenda }}

                        </h4>

                        <hr>

                        <p class="mb-2">

                            <i class="bi bi-calendar-event-fill text-warning"></i>

                            {{ \Carbon\Carbon::parse($agenda->tanggal)->translatedFormat('d F Y') }}

                        </p>

                        <p class="mb-2">

                            <i class="bi bi-clock-fill text-primary"></i>

                            {{ $agenda->waktu }}

                        </p>

                        <p class="mb-2">

                            <i class="bi bi-geo-alt-fill text-danger"></i>

                            {{ $agenda->lokasi }}

                        </p>

                        <p class="mb-2">

                            <i class="bi bi-person-fill text-success"></i>

                            {{ $agenda->penyelenggara }}

                        </p>

                        <p class="text-secondary">

                            {{ Str::limit($agenda->deskripsi,90) }}

                        </p>

                    </div>

                    <div class="card-footer bg-white border-0">

                        <a href="{{ route('frontend.detail-agenda',$agenda->id) }}"
                           class="btn btn-success rounded-pill w-100">

                            <i class="bi bi-eye-fill"></i>

                            Lihat Detail

                        </a>

                    </div>

                </div>

            </div>

            @empty

            <div class="col-12">

                <div class="alert alert-warning text-center">

                    <i class="bi bi-calendar-x"></i>

                    Belum ada agenda budaya.

                </div>

            </div>

            @endforelse

        </div>

        <div class="text-center mt-4">

            <a href="{{ route('frontend.agenda') }}"
               class="btn btn-dark btn-lg rounded-pill px-5">

                <i class="bi bi-calendar-event"></i>

                Lihat Semua Agenda

            </a>

        </div>

    </div>

</section>
<style>

/* ===================================
HERO
=================================== */

.hero-home{
    position: relative;
    min-height:100vh;
    background:
    linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
    url('{{ asset("images/gambar1.jpg") }}');
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
    display:flex;
    align-items:center;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        rgba(0,0,0,.25),
        rgba(0,0,0,.45)
    );
}

.hero-home .container{
    position:relative;
    z-index:2;
}

.hero-home h1{
    line-height:1.2;
}

.hero-home p{
    max-width:650px;
}

/* ===================================
RUNNING TEXT
=================================== */

.running-text{

    background:linear-gradient(90deg,#7B3F00,#C89B3C);

    color:white;

    font-weight:600;

    padding:12px 0;

    font-size:16px;

}

/* ===================================
SECTION
=================================== */

section{

    padding-top:90px;

    padding-bottom:90px;

}

/* ===================================
CARD DATA BUDAYA
=================================== */

.budaya-card{

    border-radius:20px;

    overflow:hidden;

    transition:.35s;

}

.budaya-card:hover{

    transform:translateY(-12px);

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}

.budaya-img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.5s;

}

.budaya-card:hover .budaya-img{

    transform:scale(1.08);

}

/* ===================================
CARD AGENDA
=================================== */

.agenda-card{

    border-radius:20px;

    overflow:hidden;

    transition:.35s;

}

.agenda-card:hover{

    transform:translateY(-12px);

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}

.agenda-img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.5s;

}

.agenda-card:hover .agenda-img{

    transform:scale(1.08);

}

/* ===================================
BUTTON
=================================== */

.btn{

    transition:.3s;

}

.btn:hover{

    transform:translateY(-3px);

}

/* ===================================
BADGE
=================================== */

.badge{

    font-size:14px;

    padding:8px 14px;

}

/* ===================================
IMAGE
=================================== */

img{

    border-radius:12px;

}

/* ===================================
RESPONSIVE
=================================== */

@media(max-width:991px){

    .hero-home{

        min-height:80vh;

        text-align:center;

    }

    .hero-home h1{

        font-size:42px;

    }

    .hero-home p{

        margin:auto;

    }

}

@media(max-width:768px){

    .hero-home h1{

        font-size:34px;

    }

    .display-5{

        font-size:30px;

    }

    .budaya-img,
    .agenda-img{

        height:220px;

    }

}

</style>

@endsection