<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sistem Konseling</title>

    <!-- Fonts & Bootstrap -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Vite Styles -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])

    <style>
        .caption-left {
            top: 0;
            left: 0;
            width: 55%;
            max-width: 1000px;
            position: absolute;
            z-index: 10;
            padding: 20px;
        }

        .caption-left p {
            font-size: 1rem;
            font-style: italic;
            line-height: 1.6;
            word-break: normal;
            white-space: normal;
        }

        .heading-slider {
            font-size: 1.4rem;
            line-height: 1.4;
            word-break: normal;
            white-space: normal;
        }

        .carousel-container {
            max-width: 90%;
            margin: 0 auto;
            padding: 0 15px;
        }

        .carousel-item img {
            height: 650px;
            width: 100%;
            object-fit: fill;
            /* border-radius: 8px; */
        }

        @media (max-width: 768px) {
            .caption-left {
                width: 90%;
                left: 5%;
                top: 10%;
            }

            .caption-left h4 {
                font-size: 1.2rem;
            }

            .caption-left p {
                font-size: 0.95rem;
            }
        }
    </style>
</head>

<body class="antialiased">
    <div style="background-color: rgba(87, 7, 65, 1);">
        @if (Route::has('login'))
            <div class="sm:right-0 p-6 text-end">
                @auth
                    <a href="{{ url('/dashboard') }}" class="font-semibold text-white">Beranda</a>
                @else
                    <a href="{{ route('login') }}" class="font-semibold text-white">Masuk Akun</a>
                    @if (Route::has('register'))
                        <a href="{{ route('register') }}" class="ml-4 font-semibold text-white">Daftar Akun</a>
                    @endif
                @endauth
            </div>
        @endif
    </div>

    <div class="carousel-container">
        <div id="carouselGambar" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">

            <!-- Indicator -->
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselGambar" data-bs-slide-to="0" class="active"
                    aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselGambar" data-bs-slide-to="1"
                    aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselGambar" data-bs-slide-to="2"
                    aria-label="Slide 3"></button>
            </div>
            <br>
            <!-- Carousel Slides -->
            <div class="carousel-inner shadow-md overflow-hidden">
                <!-- Slide 1 -->
                <div class="carousel-item active position-relative">
                    <img src="{{ asset('img/slider/BK2.png') }}" class="d-block w-100 object-cover" alt="bk1">
                    <div class="carousel-caption text-start text-white"
                        style="top: 10%; left: 5%; right: 50%; text-shadow: 1px 1px 2px #000;">
                        <h3 class="fw-bold text-uppercase mb-3 fs-4">Sistem Konseling Digital SMKN 1 Bojongpicung</h3>
                        <p class="fst-italic fs-6">
                            Layanan konseling dengan rujukan ke psikolog/psikiater. Fokus pada kesehatan mental siswa
                            melalui terapi dan pendampingan profesional.
                        </p>
                    </div>
                </div>

                <!-- Slide 2 -->
                <div class="carousel-item position-relative">
                    <img src="{{ asset('img/slider/BK3.jpg') }}" class="d-block w-100 object-cover" alt="bk2">
                    <div class="carousel-caption text-start text-white"
                        style="top: 10%; left: 5%; right: 50%; text-shadow: 1px 1px 2px #000;">
                        <h3 class="fw-bold text-uppercase mb-3 fs-4">Solusi Masalah Pribadi, Sosial, Belajar & Karier
                        </h3>
                        <p class="fst-italic fs-6">
                            Bimbingan dan Konseling untuk semua aspek kehidupan pelajar - pribadi, sosial, akademik, dan
                            masa depan.
                        </p>
                    </div>
                </div>

                <!-- Slide 3 -->
                <div class="carousel-item position-relative">
                    <img src="{{ asset('img/slider/BK4.jpeg') }}" class="d-block w-100 object-cover" alt="bk3">
                    <div class="carousel-caption text-start text-dark" style="top: 10%; left: 5%; right: 50%;">
                        <h3 class="fw-bold text-uppercase mb-3 fs-4">Psikolog vs Psikiater? Ini Bedanya!</h3>
                        <p class="fst-italic fs-6">
                            Psikiater = dokter spesialis jiwa, Psikolog = ahli perilaku. Keduanya bekerja bersama untuk
                            membantumu.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Controls -->
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselGambar" data-bs-slide="prev">
                <span class="carousel-control-prev-icon rounded-circle" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselGambar" data-bs-slide="next">
                <span class="carousel-control-next-icon rounded-circle" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </div>

    <div class="max-w-7xl mx-auto px-5 py-12">
        {{-- Judul Halaman --}}
        <div class="text-center mb-12">
            <h1 class="text-3xl md:text-4xl font-bold text-purple-800">Sistem Informasi Bimbingan Konseling</h1>
            <p class="text-gray-600 mt-2 text-base md:text-lg">Mendampingi siswa dengan pendekatan yang empatik dan
                solutif</p>
        </div>

        {{-- Konten Utama --}}
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8 items-start">

            {{-- Kartu 1 --}}
            <div class="bg-white shadow-md rounded-lg p-4">
                <h2 class="text-lg font-bold text-gray-800 mb-2">Poin Pelanggaran</h2>
                <p class="text-sm text-gray-600">
                    Data poin pelanggaran siswa berdasarkan tata tertib sekolah SMKN 1 Bojongpicung.
                </p>
                <a href="{{ asset('pdf/Data Tatib SMK.pdf') }}" target="_blank"
                    class="inline-block mt-4 bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded">
                    Lihat Data
                </a>
            </div>

            {{-- Kartu 2 --}}
            <div class="bg-white shadow-md rounded-lg p-4">
                <h2 class="text-lg font-bold text-gray-800 mb-2">Informasi Konseling</h2>
                <p class="text-sm text-gray-600">
                    Menyediakan informasi dan tips seputar kesehatan mental untuk remaja.
                </p>
                <a href="https://ayosehat.kemkes.go.id/pentingnya-kesehatan-mental-bagi-remaja" target="_blank"
                    class="inline-block mt-4 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">
                    Lihat Blog
                </a>
            </div>

            {{-- Konten Motivasi --}}
            <div class="lg:col-span-2 bg-white shadow-md rounded-lg p-6">
                <h2 class="text-2xl font-extrabold text-purple-700 mb-3">Hai Sobat BK!</h2>
                <p class="text-gray-800 text-base leading-relaxed">
                    Butuh teman bicara atau bantuan?
                    <span class="text-indigo-600 font-bold">Kami siap mendampingimu</span> melalui layanan konseling
                    <span class="text-indigo-600 font-semibold">online dan offline.</span>
                </p>

                <ul class="list-disc pl-5 mt-4 text-gray-700 space-y-2 text-sm">
                    <li><b class="text-gray-900">Masalah Belajar:</b> Kesulitan belajar, cara belajar efektif, atau
                        tugas yang menumpuk.</li>
                    <li><b class="text-gray-900">Karier:</b> Bingung memilih antara kerja, kuliah, atau wirausaha?</li>
                    <li><b class="text-gray-900">Sosial:</b> Permasalahan pertemanan, bullying, atau komunikasi dengan
                        orang lain.</li>
                    <li><b class="text-gray-900">Pribadi:</b> Kepercayaan diri, keluarga, kecemasan, atau stress.</li>
                </ul>

                <p class="mt-4 text-sm text-gray-700">
                    Silakan datang ke ruang BK. Kami siap membantu dengan sepenuh hati.
                    <br>
                    <span class="font-semibold text-green-700">Guru BK: Peduli, Siap Mendengar, Siap Membimbing.</span>
                </p>
            </div>
        </div>

        {{-- Elemen Multimedia --}}
        <div class="grid grid-cols-1 justify-center md:grid-cols-1 gap-8 mt-12">
            <center>
                <h1 class="text-4xl pb-2 font-bold text-purple-800">Video Edukasi</h1>

                <div class="aspect-video max-w-4xl">
                    <hr class="py-2">
                    <iframe class="w-full h-full rounded-lg shadow-md"
                        src="https://www.youtube.com/embed/kmSinPMVU2U?si=-ulc9M39GLz7mj0Mes"
                        title="YouTube video player" frameborder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                        referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
                    </iframe>
                </div>
            </center>
        </div>

        {{-- map --}}
        <div class="text-center mt-12">
            <h1 class="text-4xl font-bold text-purple-800">Peta Lokasi</h1>
            <p class="text-gray-600 mt-2 text-base md:text-lg">Lokasi sekolah dan lokasi penanganan psikolog dan
                psikiater</p>
        </div>

        <div class="flex flex-wrap gap-8 justify-center pt-6 responsive-margin">
            <!-- Lokasi 1 -->
            <div class="text-center">
                <div class="maps m-auto">
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3961.3215450310095!2d107.2708085749959!3d-6.852006393146332!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e6855bb05740d83%3A0xd05e8d5a6f38d2ac!2sSMKN%201%20Bojongpicung!5e0!3m2!1sid!2sid!4v1753207257288!5m2!1sid!2sid"
                        width="550" height="300" style="border:0;" allowfullscreen="" loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
                <h1 class="text-lg font-bold text-purple-800 mt-3">SMK Negeri 1 Bojongpicung</h1>
            </div>

            <!-- Lokasi 2 -->
            <div class="text-center">
                <div class="maps m-auto">
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d821.3354714779155!2d107.14080856906533!3d-6.811088670065175!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e68530039bbcaab%3A0x74e67c2249531954!2sPintu%20pejalan%20kaki%20RSUD!5e0!3m2!1sid!2sid!4v1753209064018!5m2!1sid!2sid"
                        width="550" height="300" style="border:0;" allowfullscreen="" loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
                <h1 class="text-lg font-bold text-purple-800 mt-3">RSUD Sayang Kabupaten Cianjur</h1>
            </div>
        </div>
    </div>

    <footer class="py-6 text-center text-white text-sm bg-[#570741]">
        <div class="container mx-auto">
            <p class="mb-0">
                &copy; 2025 <span class="font-semibold">Sistem Konseling Digital</span> dengan Rujukan ke Psikolog maupun Psikiater.
            </p>
        </div>
    </footer>


</body>

</html>
