<?php $__env->startPush('styles'); ?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<style>
    :root {
        --primary-green: #28c76f;
        --dark-green: #1e9a56;
    }
    .help-center-header {
        background: linear-gradient(rgba(40, 199, 111, 0.9), rgba(30, 154, 86, 0.95)), url('<?php echo e(asset('assets/img/photo-pondok-new-scaled.jpg')); ?>');
        background-size: cover;
        background-position: center;
        padding: 10rem 0;
        position: relative;
        clip-path: ellipse(150% 100% at 50% 0%);
        color: #ffffff !important;
    }
    .header-content {
        position: relative;
        z-index: 1;
    }
    .search-wrapper {
        max-width: 750px;
        margin: 0 auto;
    }
    .search-glass {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        padding: 0.75rem;
        border-radius: 100px;
        transition: all 0.3s ease;
    }
    .search-glass:focus-within {
        background: rgba(255, 255, 255, 0.25);
        transform: scale(1.02);
    }
    .search-glass input {
        background: transparent !important;
        color: white !important;
        font-size: 1.25rem;
    }
    .search-glass input::placeholder {
        color: rgba(255, 255, 255, 0.8) !important;
    }
    .search-glass .input-group-text {
        background: transparent !important;
        border: none !important;
        color: white !important;
        font-size: 1.5rem;
    }
    .feature-card {
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        cursor: pointer;
        border: none;
        background: #fff;
        border-radius: 2rem;
        overflow: hidden;
    }
    .feature-card:hover {
        transform: translateY(-15px);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    }
    .feature-icon {
        width: 90px;
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 24px;
        margin-bottom: 2rem;
        font-size: 2.5rem;
        background: #f8f9fa;
        transition: all 0.3s ease;
    }
    .feature-card:hover .feature-icon {
        background: var(--primary-green);
        color: white !important;
    }
    .stats-section {
        margin-top: -5rem;
        position: relative;
        z-index: 10;
    }
    .stat-box {
        background: white;
        padding: 2rem;
        border-radius: 1.5rem;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        text-align: center;
    }
    .section-title {
        position: relative;
        padding-bottom: 1rem;
        margin-bottom: 3rem;
    }
    .section-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 4px;
        background: var(--primary-green);
        border-radius: 2px;
    }
    .faq-item {
        background: white;
        border-radius: 1rem;
        padding: 1.5rem;
        margin-bottom: 1rem;
        border: 1px solid #f0f0f0;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .faq-item:hover {
        border-color: var(--primary-green);
        background: #fafff8;
    }
    .text-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }
</style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>
<header class="help-center-header text-white text-center">
    <div class="container header-content animate__animated animate__fadeIn">
        <h1 class="display-2 fw-bolder mb-3 text-shadow text-white">Layanan Terpadu Inventaris</h1>
        <p class="fs-4 mb-8 fw-light text-shadow text-white">Cepat, Mudah, dan Transparan dalam pengelolaan aset Pondok.</p>
        
        <div class="search-wrapper">
            <form action="<?php echo e(route('public.tickets.status')); ?>" method="GET">
                <div class="search-glass shadow-lg">
                    <div class="input-group input-group-lg">
                        <span class="input-group-text ps-4"><i class="ti tabler-hash"></i></span>
                        <input type="text" name="ticket_number" class="form-control border-0" placeholder="Masukkan nomor tiket Anda untuk melacak perbaikan..." required>
                        <button type="submit" class="btn btn-white text-success px-5 rounded-pill fw-bold waves-effect">Lacak Sekarang</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</header>

<main class="container py-10 mt-10">
    <div class="text-center mb-10">
        <h2 class="section-title fw-bold">Pilih Layanan Kami</h2>
        <p class="text-muted">Gunakan menu di bawah ini sesuai kebutuhan Anda.</p>
    </div>

    <div class="row g-6 justify-content-center">
        <div class="col-md-4">
            <div class="card h-100 feature-card p-5 text-center animate__animated animate__fadeInUp" onclick="window.location='<?php echo e(route('public.tickets.create')); ?>'">
                <div class="card-body d-flex flex-column align-items-center">
                    <div class="feature-icon text-success shadow-sm">
                        <i class="ti tabler-report-medical"></i>
                    </div>
                    <h3 class="fw-bold mb-3">Lapor Kerusakan</h3>
                    <p class="text-muted mb-6">Barang rusak? Segera laporkan agar tim IT atau Sarpras kami dapat segera memperbaikinya.</p>
                    <a href="<?php echo e(route('public.tickets.create')); ?>" class="btn btn-success btn-lg px-5 rounded-pill waves-effect">Buka Tiket</a>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card h-100 feature-card p-5 text-center animate__animated animate__fadeInUp" style="animation-delay: 0.2s;" onclick="window.location='<?php echo e(route('public.tickets.status')); ?>'">
                <div class="card-body d-flex flex-column align-items-center">
                    <div class="feature-icon text-primary shadow-sm">
                        <i class="ti tabler-timeline"></i>
                    </div>
                    <h3 class="fw-bold mb-3">Cek Status</h3>
                    <p class="text-muted mb-6">Pantau progres laporan Anda secara real-time dari pengecekan hingga selesai diperbaiki.</p>
                    <a href="<?php echo e(route('public.tickets.status')); ?>" class="btn btn-primary btn-lg px-5 rounded-pill waves-effect">Cek Progres</a>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card h-100 feature-card p-5 text-center animate__animated animate__fadeInUp" style="animation-delay: 0.4s;">
                <div class="card-body d-flex flex-column align-items-center">
                    <div class="feature-icon text-warning shadow-sm">
                        <i class="ti tabler-info-square-rounded"></i>
                    </div>
                    <h3 class="fw-bold mb-3">Pusat Informasi</h3>
                    <p class="text-muted mb-6">Panduan penggunaan aplikasi dan tata tertib pemeliharaan inventaris pondok.</p>
                    <button class="btn btn-warning btn-lg px-5 rounded-pill waves-effect">Baca Panduan</button>
                </div>
            </div>
        </div>
    </div>

    <div style="height: 120px;"></div>

    <!-- FAQ Section -->
    <div id="faq" class="row mt-32 mb-10 justify-content-center">
        <div class="col-lg-8">
            <div class="text-center mb-8">
                <h2 class="fw-bold">Pertanyaan Sering Diajukan (FAQ)</h2>
                <p class="text-muted">Informasi dasar mengenai sistem pelaporan tiket.</p>
            </div>
            
            <div class="faq-list">
                <div class="faq-item">
                    <h6 class="fw-bold mb-2"><i class="ti tabler-help text-success me-2"></i> Berapa lama proses perbaikan?</h6>
                    <p class="text-muted mb-0 small">Tergantung tingkat kerusakan, biasanya tim lapangan akan melakukan pengecekan dalam 1x24 jam.</p>
                </div>
                <div class="faq-item">
                    <h6 class="fw-bold mb-2"><i class="ti tabler-help text-success me-2"></i> Bagaimana cara cek status tiket?</h6>
                    <p class="text-muted mb-0 small">Masukkan nomor tiket yang Anda terima setelah melapor ke dalam kolom pencarian di bagian atas halaman ini.</p>
                </div>
                <div class="faq-item">
                    <h6 class="fw-bold mb-2"><i class="ti tabler-help text-success me-2"></i> Apakah boleh melapor tanpa foto?</h6>
                    <p class="text-muted mb-0 small">Boleh, namun sangat disarankan melampirkan foto agar tim kami lebih cepat mengidentifikasi masalah.</p>
                </div>
            </div>
        </div>
    </div>
</main>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.front', ['title' => 'Pusat Bantuan'], \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH G:\Project\inventaris-pondok\resources\views/public/home.blade.php ENDPATH**/ ?>