<?php

require_once "config/koneksi.php";

include "includes/header.php";

include "includes/navbar.php";



// AMBIL DATA SAMBUTAN DARI DATABASE

$query_sambutan = "
    SELECT *
    FROM sambutan
    ORDER BY id DESC
    LIMIT 1
";

$result_sambutan = mysqli_query(
    $koneksi,
    $query_sambutan
);



// DATA SAMBUTAN


if (
    $result_sambutan &&
    mysqli_num_rows($result_sambutan) > 0
) {

    $sambutan = mysqli_fetch_assoc(
        $result_sambutan
    );

    $judul_sambutan =
        $sambutan['judul'];

    $isi_sambutan =
        $sambutan['isi'];

    // Ambil nama foto dari database

    $foto_kepala_dinas =
        $sambutan['foto'] ?? '';
} else

?>


<!-- HERO -->

<?php include "includes/header.php"; ?>

<section id="beranda">

    <div id="heroCarousel"
        class="carousel slide"
        data-bs-ride="carousel"
        data-bs-interval="3000"
        data-bs-pause="false"
        data-bs-wrap="true">

        <!-- Indikator -->
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active"></button>
            <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2"></button>
        </div>

        <!-- Gambar -->
        <div class="carousel-inner">

            <div class="carousel-item active">
                <img src="assets/img/beranda.png" class="d-block w-70" alt="Beranda">
            </div>

            <div class="carousel-item active">
                <img src="assets/img/depan.png" class="d-block w-70" alt="Depan">
            </div>

            <div class="carousel-item">
                <img src="assets/img/pelayanan1.png" class="d-block w-70" alt="Pelayanan">
            </div>

        </div>



        <!-- Tombol -->
        <button class="carousel-control-prev" type="button"
            data-bs-target="#heroCarousel"
            data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>

        <button class="carousel-control-next" type="button"
            data-bs-target="#heroCarousel"
            data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>

    </div>

    <!-- SAMBUTAN KEPALA DINAS -->


    <section class="sambutan-section py-5">

        <div class="container">

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

                <span class="sambutan-label">
                    SAMBUTAN
                </span>

                <h2 class="section-title mt-3">
                    <?= htmlspecialchars($judul_sambutan); ?>
                </h2>

                <div class="title-line mx-auto"></div>

            </div>

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

                <!-- FOTO KEPALA DINAS -->
                <div class="col-lg-4 text-center mb-4 mb-lg-0">

                    <img src="assets/img/p.kadis.jpeg"
                        class="img-fluid foto-kepala-dinas"
                        alt="Kepala Dinas">

                    <h4 class="mt-4 mb-1 fw-bold">
                        Bpk. Alfian, S.pd, M.pd
                    </h4>


                </div>

                <!-- ISI SAMBUTAN -->
                <div class="col-lg-8">

                    <div class="sambutan-card">

                        <div class="sambutan-icon">
                            ❝
                        </div>

                        <div class="sambutan-content">

                            <?= nl2br(htmlspecialchars($isi_sambutan)); ?>

                        </div>

                        <div class="sambutan-footer">

                            <div class="footer-line"></div>

                            <strong>
                                Kepala Dinas Perpustakaan dan Kearsipan
                            </strong>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </section>
    <!-- isi profil -->
</section>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
    const heroCarousel = document.querySelector('#heroCarousel');

    if (heroCarousel) {
        new bootstrap.Carousel(heroCarousel, {
            interval: 3000,
            pause: false,
            wrap: true,
            touch: true
        });
    }
</script>

<?php include "includes/footer.php"; ?>

<!-- Gambar Slider -->
<div class="carousel-inner">

</div>

<button class="carousel-control-prev">...</button>

<button class="carousel-control-next">...</button>

<div class="hero-content">

</div>

</section>

</body>

</html>


<!-- CSS SAMBUTAN -->


<style>
    /* SECTION SAMBUTAN */


    .sambutan-section {

        padding: 80px 0;

        background: #f8fafc;

    }



    /* ============================== */
    /* LABEL SAMBUTAN */
    /* ============================== */

    .sambutan-label {

        display: inline-block;

        padding: 7px 18px;

        border-radius: 30px;

        background: #e8f1ff;

        color: #07357e;

        font-size: 13px;

        font-weight: 700;

        letter-spacing: 2px;

    }



    /* ============================== */
    /* JUDUL */
    /* ============================== */

    .section-title {

        font-size: 32px;

        font-weight: 700;

        color: #1f2937;

    }


    .title-line {

        width: 70px;

        height: 4px;

        background: #07357e;
        border-radius: 10px;

        margin: 15px auto 0;

    }



    /* ============================== */
    /* FOTO KEPALA DINAS */
    /* ============================== */

    .foto-kepala-dinas {

        padding: 15px;

    }


    .foto-kepala-dinas img {

        width: 100%;

        max-width: 320px;

        height: 400px;

        object-fit: cover;

        border-radius: 20px;

        border: 6px solid #ffffff;

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

    }



    /* ============================== */
    /* FOTO BELUM ADA */
    /* ============================== */

    .foto-belum-ada {

        width: 100%;

        max-width: 320px;

        height: 400px;

        margin: auto;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        background: #e9eef5;

        border-radius: 20px;

        border: 6px solid #ffffff;

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

        color: #6b7280;

    }


    .icon-foto {

        font-size: 50px;

        margin-bottom: 15px;

    }


    .foto-belum-ada p {

        margin: 0;

        font-size: 15px;

    }



    /* ============================== */
    /* CARD SAMBUTAN */
    /* ============================== */

    .sambutan-card {

        background: #ffffff;

        padding: 45px 50px;

        border-radius: 20px;

        box-shadow:
            0 15px 45px rgba(0, 0, 0, 0.08);

        border: 1px solid #eef2f7;

    }



    /* ============================== */
    /* ICON */
    /* ============================== */

    .sambutan-icon {

        width: 60px;

        height: 60px;

        display: flex;

        align-items: center;

        justify-content: center;

        background: #07357e;

        color: #ffffff;

        border-radius: 50%;

        font-size: 38px;

        margin-bottom: 25px;

        box-shadow:
            0 10px 25px rgba(13, 110, 253, 0.3);

    }



    /* ============================== */
    /* ISI SAMBUTAN */
    /* ============================== */

    .sambutan-content {

        color: #4b5563;

        font-size: 16px;

        line-height: 1.9;

        text-align: justify;

    }


    .sambutan-content p {

        margin-bottom: 18px;

    }