@{
    Layout = "~/Views/Website/Shared/_Layout.cshtml";
    ViewData["Title"] = "Tutorial & Manual Book Sistem Informasi Pesapakawan";
}


<div class="mx-auto">
     <div class="bg-cyan-700 pt-30 pb-10 mb-8 shadow-md rounded-br-4xl rounded-bl-4xl relative overflow-hidden">
        <div class="absolute inset-0" style="background-image: radial-gradient(circle at 85% 1%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 96%, transparent 96%, transparent 100%), radial-gradient(circle at 14% 15%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 1%, transparent 1%, transparent 100%), radial-gradient(circle at 60% 90%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 20%, transparent 20%, transparent 100%), radial-gradient(circle at 79% 7%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 78%, transparent 78%, transparent 100%), radial-gradient(circle at 55% 65%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 52%, transparent 52%, transparent 100%), linear-gradient(135deg, rgb(0, 163, 227), rgb(6, 182, 212));"></div>
        
        <div class="max-w-6xl mx-auto px-6 hidden md:block relative z-10">
            <nav class="flex items-center text-white text-sm space-x-2" aria-label="Breadcrumb">
                <a href="@Url.Action("Index", "Home")" class="hover:underline">Beranda</a>
                <i class="w-4 h-4 text-white transition-colors duration-300" data-lucide="chevron-right"></i>
                <span class="font-semibold">Tutorial & Manual Book Sistem Informasi Pesapakawan</span>
            </nav>
        </div>
        
        <div class="max-w-6xl mx-auto justify-between flex flex-col md:flex-row items-center px-6 gap-8 relative z-10">
            <div class="flex-1 text-center max-w-xl md:text-left">
                <h1 class="text-3xl md:text-4xl font-medium text-white mb-3">Tutorial & Manual Book Sistem Informasi Pesapakawan</h1>
                <p class="text-lg text-white mb-4">Panduan lengkap dan petunjuk teknis untuk membantu Anda menggunakan Sistem Informasi Pesapakawan dengan mudah dan efektif.</p>
                <div class="w-20 h-1 bg-white mt-4 mx-auto md:mx-0 rounded-full"></div>
            </div>
            <div class="flex-shrink-0 hidden md:block">
                <img src="@Url.Content("~/website/images/bg-header.webp")" alt="Usaha Pesapakawan" class="w-75 h-auto">
            </div>
        </div>
    </div>

    <div class="max-w-6xl mx-auto px-4">
        <div class="bg-white rounded-xl border border-gray-200 p-8 mb-8 shadow-sm hover:shadow-md transition-shadow duration-300">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="space-y-6">
                    <h2 class="text-2xl font-semibold text-gray-800 mb-6 border-b pb-2 border-cyan-100">Manual Book</h2>
                    
                    <div class="flex items-start space-x-4 group">
                        <div class="flex-shrink-0 p-2 bg-cyan-50 rounded-lg group-hover:bg-cyan-100 transition-colors">
                            <i class="w-5 h-5 text-cyan-600" data-lucide="file-text"></i>
                        </div>
                        <div>
                            <h3 class="font-medium text-gray-700 mb-1">Panduan Pengguna</h3>
                            <p class="text-gray-600 leading-relaxed">
                                Dokumen ini berisi petunjuk lengkap penggunaan sistem informasi Pesapakawan
                                untuk semua fitur dan modul.
                            </p>
                            <a href="~/website/documents/manual_book_pesapakawan.pdf" target="_blank" rel="noopener noreferrer" class="inline-flex items-center mt-2 px-4 py-2 bg-gradient-to-r from-cyan-500 to-cyan-600 text-white font-medium rounded-lg shadow-sm hover:from-cyan-600 hover:to-cyan-700 transition-all duration-300 transform hover:-translate-y-0.5">
                                Download PDF <i class="w-4 h-4 ml-2" data-lucide="download"></i>
                            </a>
                        </div>
                    </div>
                </div>
                
                <div>
                    <h2 class="text-2xl font-semibold text-gray-800 mb-6 border-b pb-2 border-cyan-100">Video Tutorial</h2>
                    <div class="w-full aspect-video rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-300">
                        <iframe
                            width="100%" 
                            height="100%"
                            src="https://www.youtube.com/embed/id_video_disini_ya"
                            title="Tutorial Sistem Informasi Pesapakawan" 
                            frameborder="0" 
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                            allowfullscreen>
                        </iframe>
                    </div>
                    <div class="mt-4">
                        <p class="text-gray-600 mb-3">
                            Pelajari cara menggunakan sistem melalui video tutorial lengkap kami.
                            Video ini memberikan panduan langkah demi langkah untuk memahami dan memanfaatkan fitur-fitur utama Sistem Informasi Pesapakawan secara optimal.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>