@extends('layouts.landing-page')

@section('content')
    <!-- Explore Navigation -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold mb-2">Syarat dan Ketentuan</h1>
        <p class="text-gray-300 text-base">
            Dengan menggunakan layanan kami, Anda dianggap telah membaca, memahami, dan menyetujui seluruh syarat dan
            ketentuan yang berlaku.
        </p>
    </div>

    <section class="mb-11">

        <!-- 1. Persetujuan -->
        <h2 class="text-lg font-semibold text-white mt-6 mb-2">1. Persetujuan</h2>
        <p>
            Dengan mengakses dan menggunakan situs <span class="font-semibold">PlaylistMusic.co.id</span>,
            Anda dianggap telah membaca, memahami, dan menyetujui seluruh syarat dan ketentuan yang berlaku.
            Jika Anda tidak setuju, harap tidak menggunakan situs ini.
        </p>

        <!-- 2. Pembuatan Akun -->
        <h2 class="text-lg font-semibold text-white mt-6 mb-2">2. Pembuatan Akun</h2>
        <ul class="list-disc list-inside space-y-1">
            <li>Anda wajib memberikan data yang valid saat mendaftar.</li>
            <li>Anda bertanggung jawab menjaga keamanan akun.</li>
            <li>Penggunaan akun oleh pihak ketiga tanpa izin dilarang.</li>
        </ul>

        <!-- 3. Lisensi dan Hak Cipta -->
        <h2 class="text-lg font-semibold text-white mt-6 mb-2">3. Lisensi dan Hak Cipta</h2>
        <ul class="list-disc list-inside space-y-1">
            <li>Semua lagu yang tersedia di situs dilindungi oleh hukum hak cipta.</li>
            <li>Lisensi yang dibeli hanya dapat digunakan sesuai ketentuan lisensinya (personal, komersial, atau
                distribusi).</li>
            <li>Pelanggaran terhadap lisensi dapat dikenai tindakan hukum.</li>
        </ul>

        <!-- 4. Tanggung Jawab Pengguna -->
        <h2 class="text-lg font-semibold text-white mt-6 mb-2">4. Tanggung Jawab Pengguna</h2>
        <ul class="list-disc list-inside space-y-1">
            <li>Dilarang mengunggah konten ilegal, SARA, pornografi, atau melanggar hak pihak ketiga.</li>
            <li>Kreator bertanggung jawab penuh atas karya yang diunggah.</li>
        </ul>

        <!-- 5. Pembayaran & Refund -->
        <h2 class="text-lg font-semibold text-white mt-6 mb-2">5. Pembayaran & Refund</h2>
        <ul class="list-disc list-inside space-y-1">
            <li>Pembayaran dilakukan melalui sistem pihak ketiga.</li>
            <li>Semua transaksi bersifat final dan tidak dapat dikembalikan, kecuali ada kesalahan sistem atau duplikasi
                pembayaran.</li>
        </ul>

        <!-- 6. Penghentian Akun -->
        <h2 class="text-lg font-semibold text-white mt-6 mb-2">6. Penghentian Akun</h2>
        <p>
            Kami berhak menonaktifkan atau menghapus akun yang melanggar ketentuan tanpa pemberitahuan sebelumnya.
        </p>

        <!-- 7. Perubahan Layanan -->
        <h2 class="text-lg font-semibold text-white mt-6 mb-2">7. Perubahan Layanan</h2>
        <p>
            <span class="font-semibold">PlaylistMusic.co.id</span> dapat sewaktu-waktu melakukan perubahan pada layanan,
            fitur, atau sistem tanpa pemberitahuan.
        </p>

        <!-- 8. Hukum yang Berlaku -->
        <h2 class="text-lg font-semibold text-white mt-6 mb-2">8. Hukum yang Berlaku</h2>
        <p>
            Syarat dan ketentuan ini diatur oleh dan tunduk pada hukum Republik Indonesia.
        </p>

        <!-- Contact -->
        <div class="mt-6">
            <p class="text-sm text-gray-400">
                Pertanyaan lebih lanjut:
                <a href="mailto:admin@playlistmusic.co.id" class="text-red-500 hover:underline">
                    admin@playlistmusic.co.id
                </a>
            </p>
        </div>

    </section>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Category pill click
            const categoryPills = document.querySelectorAll('.category-pill');
            categoryPills.forEach(pill => {
                pill.addEventListener('click', function() {
                    categoryPills.forEach(p => p.classList.remove('active'));
                    this.classList.add('active');

                    // Here you would filter content based on the selected category
                });
            });

            // Toggle menu function
            window.toggleMenu = function(menuId) {
                const menu = document.getElementById(menuId);
                if (menu) {
                    menu.classList.toggle('hidden');

                    // Close when clicking outside
                    const closeMenu = function(e) {
                        if (!menu.contains(e.target) && !e.target.closest(
                                `[onclick="toggleMenu('${menuId}')"]`)) {
                            menu.classList.add('hidden');
                            document.removeEventListener('click', closeMenu);
                        }
                    };

                    document.addEventListener('click', closeMenu);
                }
            };

            // Add animation delay to grid items
            document.querySelectorAll('.scroll-item').forEach((item, index) => {
                item.style.setProperty('--index', index);
            });

            // Smooth drag scrolling for horizontal containers
            const sliders = document.querySelectorAll('.scroll-container');

            sliders.forEach(container => {
                container.addEventListener('wheel', (e) => {
                    if (e.deltaY !== 0) {
                        e.preventDefault();
                        container.scrollLeft += e.deltaY;
                    }
                });
            });

            // Initialize AOS animation library if it exists
            if (typeof AOS !== 'undefined') {
                AOS.init({
                    duration: 800,
                    once: true
                });
            }
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const elMain = document.getElementById('mainContent');
            elMain.classList.add('w-full');
        });
    </script>
@endsection