<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SIPIAN - Ruangan & Kendaraan</title>
    <link rel="icon" type="image/svg+xml" href="<?php echo e(asset('favicon.svg')); ?>">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <style>
        :root {
            --blue: #315bea;
            --ink: #07184d;
            --muted: #7180a8;
            --line: #dfe8fb;
        }

        * {
            letter-spacing: 0;
        }

        body {
            font-family: 'Inter', sans-serif;
            color: var(--ink);
            background:
                radial-gradient(circle at 18% 8%, rgba(69, 103, 255, .10), transparent 30%),
                radial-gradient(circle at 82% 4%, rgba(84, 136, 255, .13), transparent 34%),
                linear-gradient(180deg, #f8fbff 0%, #ffffff 48%, #f4f8ff 100%);
        }

        .page-shell {
            max-width: 1240px;
            margin: 0 auto;
            padding: 22px 28px 0;
        }

        .nav-shell {
            min-height: 72px;
            border: 1px solid rgba(213, 224, 248, .92);
            background: rgba(255, 255, 255, .88);
            backdrop-filter: blur(18px);
            box-shadow: 0 18px 54px rgba(23, 45, 117, .10);
            border-radius: 24px;
        }

        .brand-mark {
            width: 42px;
            height: 42px;
            border-radius: 8px;
            background: linear-gradient(180deg, #6d6af4 0%, #4f62d7 100%);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 12px 28px rgba(49, 91, 234, .24);
        }

        .brand-mark svg {
            width: 29px;
            height: 29px;
            display: block;
        }

        .hero {
            min-height: 520px;
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(420px, 1.05fr);
            align-items: center;
            gap: 34px;
            padding: 42px 0 28px;
        }

        .hero-title {
            font-size: clamp(42px, 5vw, 68px);
            line-height: .98;
            font-weight: 900;
        }

        .hero-title span {
            color: var(--blue);
        }

        .hero-visual {
            min-height: 430px;
            position: relative;
        }

        .visual-ring {
            position: absolute;
            inset: 4px 10px 24px 84px;
            border-radius: 52% 48% 46% 54%;
            background: linear-gradient(135deg, rgba(225, 232, 255, .98), rgba(246, 249, 255, .72));
            box-shadow: inset 0 0 0 20px rgba(226, 232, 255, .62);
        }

        .hero-room {
            position: absolute;
            top: 54px;
            right: 34px;
            width: 72%;
            height: 305px;
            border-radius: 160px;
            object-fit: cover;
            box-shadow: 0 32px 80px rgba(32, 56, 127, .18);
        }

        .hero-car {
            position: absolute;
            left: 18px;
            bottom: 4px;
            width: 58%;
            max-height: 250px;
            object-fit: contain;
            filter: drop-shadow(0 30px 28px rgba(15, 31, 86, .24));
        }

        .soft-dot {
            position: absolute;
            border-radius: 999px;
            background: rgba(49, 91, 234, .10);
        }

        .soft-dot.one {
            width: 64px;
            height: 64px;
            left: 56px;
            top: 70px;
        }

        .soft-dot.two {
            width: 44px;
            height: 44px;
            left: 24px;
            top: 200px;
        }

        .landing-welcome-notice {
            position: fixed;
            inset: 0;
            z-index: 9999;
            display: grid;
            place-items: center;
            padding: 18px;
            background: rgba(15, 23, 42, .58);
            backdrop-filter: blur(8px);
        }

        .landing-welcome-notice[hidden] {
            display: none;
        }

        .landing-welcome-card {
            position: relative;
            width: min(520px, 100%);
            overflow: hidden;
            border-radius: 24px;
            border: 1px solid rgba(186, 230, 253, .65);
            background: linear-gradient(145deg, rgba(37, 99, 235, .94), rgba(14, 165, 233, .96) 56%, rgba(34, 211, 238, .92));
            box-shadow: 0 28px 75px rgba(15, 23, 42, .38);
            color: #ffffff;
            text-align: center;
            padding: 42px 34px 32px;
        }

        .landing-welcome-card::before,
        .landing-welcome-card::after {
            content: "";
            position: absolute;
            border-radius: 999px;
            background: rgba(255, 255, 255, .14);
        }

        .landing-welcome-card::before {
            inset: -80px auto auto -80px;
            width: 220px;
            height: 220px;
        }

        .landing-welcome-card::after {
            right: -70px;
            bottom: -90px;
            width: 240px;
            height: 240px;
        }

        .landing-welcome-icon {
            position: relative;
            z-index: 1;
            width: 62px;
            height: 62px;
            margin: 0 auto 18px;
            border-radius: 20px;
            display: grid;
            place-items: center;
            background: rgba(255, 255, 255, .18);
            border: 1px solid rgba(255, 255, 255, .28);
            font-size: 26px;
            font-weight: 900;
        }

        .landing-welcome-title {
            position: relative;
            z-index: 1;
            margin: 0;
            color: #ffffff;
            font-size: 28px;
            font-weight: 900;
            line-height: 1.2;
        }

        .landing-welcome-text {
            position: relative;
            z-index: 1;
            max-width: 390px;
            margin: 14px auto 0;
            color: rgba(255, 255, 255, .92);
            font-size: 16px;
            font-weight: 700;
            line-height: 1.7;
        }

        .landing-welcome-button {
            position: relative;
            z-index: 1;
            min-width: 132px;
            min-height: 46px;
            margin-top: 26px;
            border: 1px solid rgba(255, 255, 255, .72);
            border-radius: 14px;
            background: #ffffff;
            color: var(--blue);
            box-shadow: 0 16px 30px rgba(15, 23, 42, .18);
            cursor: pointer;
            font-size: 13px;
            font-weight: 900;
            transition: transform .2s ease, box-shadow .2s ease;
        }

        .landing-welcome-button:hover {
            box-shadow: 0 20px 36px rgba(15, 23, 42, .22);
            transform: translateY(-1px);
        }

        .primary-btn,
        .ghost-btn {
            min-height: 54px;
            border-radius: 12px;
            padding: 0 24px;
            font-weight: 900;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .primary-btn {
            background: var(--blue);
            color: #fff;
            box-shadow: 0 18px 32px rgba(49, 91, 234, .25);
        }

        .ghost-btn {
            background: #fff;
            color: var(--blue);
            border: 1px solid var(--line);
            box-shadow: 0 14px 32px rgba(23, 45, 117, .08);
        }

        .section-head {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 18px;
            margin: 36px 0 18px;
        }

        .section-head h2 {
            font-size: 28px;
            font-weight: 900;
        }

        .section-head p {
            margin-top: 6px;
            color: var(--muted);
            font-size: 14px;
            font-weight: 600;
        }

        .view-link {
            min-height: 42px;
            padding: 0 18px;
            border-radius: 999px;
            border: 1px solid var(--line);
            background: #fff;
            color: var(--blue);
            font-size: 13px;
            font-weight: 900;
            white-space: nowrap;
        }

        .card-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 24px;
        }

        .card-grid > .asset-card {
            width: 100%;
        }

        .asset-card {
            overflow: hidden;
            border-radius: 16px;
            border: 1px solid var(--line);
            background: rgba(255, 255, 255, .94);
            box-shadow: 0 18px 46px rgba(23, 45, 117, .09);
            transition: transform .22s ease, box-shadow .22s ease;
        }

        .asset-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 28px 64px rgba(23, 45, 117, .13);
        }

        .room-image {
            height: 178px;
            position: relative;
            overflow: hidden;
        }

        .room-image img,
        .vehicle-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .status-pill {
            position: absolute;
            top: 12px;
            right: 12px;
            padding: 8px 13px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 900;
            border: 1px solid rgba(255, 255, 255, .58);
            box-shadow: 0 12px 24px rgba(15, 31, 86, .14);
        }

        .icon-bubble {
            width: 50px;
            height: 50px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 18px;
            background: #f0f5ff;
            color: var(--blue);
            box-shadow: 0 12px 28px rgba(49, 91, 234, .12);
        }

        .vehicle-card {
            min-height: 300px;
            display: flex;
            flex-direction: column;
            position: relative;
            padding: 18px;
            background:
                radial-gradient(circle at 84% 18%, rgba(49, 91, 234, .13), transparent 34%),
                linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(245, 248, 255, .98));
        }

        .vehicle-image {
            height: 150px;
            margin: 20px -4px 2px;
            position: relative;
        }

        .vehicle-image::before {
            content: "";
            position: absolute;
            left: 12%;
            right: 6%;
            bottom: 6px;
            height: 18px;
            border-radius: 999px;
            background: rgba(28, 45, 102, .16);
            filter: blur(10px);
        }

        .vehicle-image img {
            position: relative;
            object-fit: contain;
            filter: drop-shadow(0 20px 22px rgba(23, 45, 117, .18));
        }

        .vehicle-top {
            display: flex;
            align-items: start;
            justify-content: space-between;
            gap: 12px;
        }

        .vehicle-status {
            min-height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            padding: 0 12px;
            font-size: 11px;
            font-weight: 900;
            white-space: nowrap;
            box-shadow: 0 12px 24px rgba(15, 31, 86, .12);
        }

        .vehicle-specs {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
        }

        .vehicle-spec {
            min-height: 46px;
            border-radius: 12px;
            background: rgba(255, 255, 255, .82);
            border: 1px solid rgba(223, 232, 251, .96);
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 8px 10px;
        }

        .vehicle-spec span:first-child {
            color: var(--muted);
            font-size: 10px;
            font-weight: 900;
            text-transform: uppercase;
        }

        .vehicle-spec span:last-child {
            margin-top: 2px;
            color: #17265c;
            font-size: 12px;
            font-weight: 900;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .schedule-text {
            min-height: 42px;
            color: var(--muted);
            font-size: 13px;
            font-weight: 700;
            line-height: 1.55;
            text-align: center;
        }

        .mini-chip {
            display: inline-flex;
            align-items: center;
            min-height: 28px;
            padding: 0 10px;
            border-radius: 999px;
            background: #eef3ff;
            color: var(--blue);
            font-size: 12px;
            font-weight: 800;
        }

        .footer-shell {
            margin-top: 54px;
            margin-left: calc(50% - 50vw);
            margin-right: calc(50% - 50vw);
            padding: 42px calc(50vw - min(620px, 50vw - 28px)) 26px;
            border-top: 1px solid rgba(255, 255, 255, .08);
            background:
                radial-gradient(circle at 18% 16%, rgba(71, 99, 255, .28), transparent 28%),
                linear-gradient(135deg, #07184d 0%, #0d1f5d 48%, #102a68 100%);
            color: #ffffff;
            box-shadow: 0 -22px 60px rgba(7, 24, 77, .10);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, .75fr));
            gap: 42px;
        }

        .footer-title {
            color: #ffffff;
            font-size: 14px;
            font-weight: 900;
            margin-bottom: 14px;
        }

        .footer-link {
            display: block;
            color: rgba(226, 232, 255, .76);
            font-size: 13px;
            font-weight: 700;
            line-height: 2;
        }

        .footer-link:hover {
            color: #ffffff;
        }

        .footer-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            margin-top: 32px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, .12);
            color: rgba(226, 232, 255, .72);
            font-size: 13px;
            font-weight: 700;
        }

        @media (max-width: 980px) {
            .page-shell {
                padding: 16px;
            }

            .hero {
                grid-template-columns: 1fr;
                min-height: auto;
            }

            .hero-visual {
                min-height: 360px;
            }

            .card-grid > .asset-card {
                width: 100%;
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: 24px;
            }

            .footer-bottom {
                align-items: flex-start;
                flex-direction: column;
            }
        }

        @media (min-width: 760px) {
            .card-grid > .asset-card {
                width: calc((100% - 24px) / 2);
            }
        }

        @media (min-width: 1180px) {
            .room-grid > .asset-card {
                width: calc((100% - 72px) / 4);
            }

            .vehicle-grid > .asset-card {
                width: calc((100% - 48px) / 3);
            }
        }

        @media (max-width: 640px) {
            .nav-shell {
                border-radius: 18px;
                padding: 12px;
            }

            .hero-title {
                font-size: 38px;
            }

            .hero-visual {
                min-height: 300px;
            }

            .hero-room {
                right: 0;
                width: 82%;
                height: 220px;
            }

            .hero-car {
                width: 68%;
            }

            .section-head {
                align-items: start;
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <?php
        $featuredRooms = $rooms;
        $featuredVehicles = $vehicles;
        $heroRoom = $rooms->first();
        $heroVehicle = $vehicles->first();
        $roomFallbackImage = 'https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=900&q=80';
        $carFallbackImage = 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?auto=format&fit=crop&w=900&q=80';
        $motorFallbackImage = 'https://images.unsplash.com/photo-1558981403-c5f91cbba527?auto=format&fit=crop&w=900&q=80';
        $heroRoomImage = $heroRoom && $heroRoom->image ? asset('storage/' . $heroRoom->image) : $roomFallbackImage;
        $heroVehicleFallback = $heroVehicle && $heroVehicle->type === 'motor' ? $motorFallbackImage : $carFallbackImage;
        $heroVehicleImage = $heroVehicle && $heroVehicle->image_path ? asset('storage/' . $heroVehicle->image_path) : $heroVehicleFallback;
        $landingWelcomeDays = [
            1 => 'Senin',
            2 => 'Selasa',
            3 => 'Rabu',
            4 => 'Kamis',
            5 => 'Jumat',
            6 => 'Sabtu',
            7 => 'Minggu',
        ];
        $landingWelcomeDay = $landingWelcomeDays[now()->dayOfWeekIso] ?? now()->translatedFormat('l');
    ?>

    <div class="landing-welcome-notice" id="landingWelcomeNotice" role="dialog" aria-modal="true" aria-labelledby="landingWelcomeNoticeTitle">
        <div class="landing-welcome-card">
            <div class="landing-welcome-icon">✓</div>
            <h2 class="landing-welcome-title" id="landingWelcomeNoticeTitle">Selamat Datang</h2>
            <p class="landing-welcome-text">
                Selamat Datang di Aplikasi Sipian, Selamat Bekerja di Hari <?php echo e($landingWelcomeDay); ?>.
            </p>
            <button type="button" class="landing-welcome-button" onclick="document.getElementById('landingWelcomeNotice').hidden = true">Tutup</button>
        </div>
    </div>

    <div class="page-shell">
        <header class="nav-shell sticky top-5 z-50 flex items-center justify-between gap-4 px-6">
            <a href="<?php echo e(route('landing')); ?>" class="flex items-center gap-3">
                <span class="brand-mark">
                    <svg viewBox="0 0 48 48" fill="none" aria-hidden="true">
                        <path d="M24 5 41 14.5v19L24 43 7 33.5v-19L24 5Z" stroke="white" stroke-width="4.5" stroke-linejoin="round"/>
                        <path d="M8 14.5 24 24l16-9.5M24 24v18" stroke="white" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </span>
                <span class="text-2xl font-black text-[#07184d]">Sipian</span>
            </a>

            <a href="<?php echo e(route('login')); ?>" class="primary-btn !min-h-12 !px-5">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3" />
                </svg>
                Masuk
            </a>
        </header>

        <main>
            <section class="hero">
                <div>
                    <span class="mini-chip mb-5">Ruangan & Kendaraan</span>
                    <h1 class="hero-title">Dashboard <span>Sipian</span></h1>
                    <p class="mt-5 max-w-lg text-base font-semibold leading-7 text-[#7180a8]">
                        Cek status tersedia atau dipakai secara cepat.
                    </p>
                    <div class="mt-8 flex flex-wrap gap-4">
                        <a href="#ruangan" class="primary-btn">
                            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M6 21h12a2 2 0 002-2V7a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                            Lihat Ruangan
                        </a>
                        <a href="#kendaraan" class="ghost-btn">
                            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.5V17a2 2 0 01-2 2h-1a2 2 0 01-4 0H9a2 2 0 01-4 0H4a2 2 0 01-2-2v-4.5L4.5 7H17l4 6.5z" />
                            </svg>
                            Lihat Kendaraan
                        </a>
                    </div>

                    <div class="mt-10 flex flex-wrap gap-5 text-sm font-bold text-[#344270]">
                        <span class="inline-flex items-center gap-2"><span class="icon-bubble !h-9 !w-9 !rounded-full">✓</span> Cepat</span>
                        <span class="inline-flex items-center gap-2"><span class="icon-bubble !h-9 !w-9 !rounded-full">✓</span> Aman</span>
                        <span class="inline-flex items-center gap-2"><span class="icon-bubble !h-9 !w-9 !rounded-full">✓</span> Real-time</span>
                    </div>
                </div>

                <div class="hero-visual">
                    <div class="visual-ring"></div>
                    <span class="soft-dot one"></span>
                    <span class="soft-dot two"></span>
                    <img class="hero-room" src="<?php echo e($heroRoomImage); ?>" alt="<?php echo e($heroRoom?->name ?? 'Ruangan'); ?>" onerror="this.onerror=null;this.src='<?php echo e($roomFallbackImage); ?>';">
                    <img class="hero-car" src="<?php echo e($heroVehicleImage); ?>" alt="<?php echo e($heroVehicle?->name ?? 'Kendaraan'); ?>" onerror="this.onerror=null;this.src='<?php echo e($heroVehicleFallback); ?>';">
                </div>
            </section>

            <section id="ruangan">
                <div class="section-head">
                    <div>
                        <h2>List Ruangan</h2>
                        <p>Cek status dan jadwal terdekat.</p>
                    </div>
                </div>

                <div class="card-grid room-grid">
                    <?php $__empty_1 = true; $__currentLoopData = $featuredRooms; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $room): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <?php
                            $imageUrl = $room->image ? asset('storage/' . $room->image) : $roomFallbackImage;
                        ?>
                        <article class="asset-card">
                            <div class="room-image">
                                <img src="<?php echo e($imageUrl); ?>" alt="<?php echo e($room->name); ?>" loading="lazy" onerror="this.onerror=null;this.src='<?php echo e($roomFallbackImage); ?>';">
                                <span class="status-pill <?php echo e($room->landing_status_class); ?>"><?php echo e($room->landing_status); ?></span>
                            </div>
                            <div class="p-5">
                                <div class="grid grid-cols-[58px_minmax(0,1fr)] gap-4">
                                    <span class="icon-bubble">
                                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 21V5a2 2 0 012-2h12a2 2 0 012 2v16M9 7h1m4 0h1M9 11h1m4 0h1M9 15h1m4 0h1" />
                                        </svg>
                                    </span>
                                    <div class="min-w-0">
                                        <h3 class="truncate text-lg font-black"><?php echo e($room->name); ?></h3>
                                        <p class="mt-1 text-sm font-bold text-[#7180a8]"><?php echo e($room->capacity ?? 0); ?> orang</p>
                                    </div>
                                </div>

                                <p class="schedule-text mt-4 w-full"><?php echo e($room->landing_schedule); ?></p>
                            </div>
                        </article>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <div class="asset-card p-8 text-center font-bold text-[#7180a8]">Belum ada data ruangan.</div>
                    <?php endif; ?>
                </div>
            </section>

            <section id="kendaraan">
                <div class="section-head">
                    <div>
                        <h2>List Kendaraan</h2>
                        <p>Cek status dan jadwal terdekat.</p>
                    </div>
                </div>

                <div class="card-grid vehicle-grid">
                    <?php $__empty_1 = true; $__currentLoopData = $featuredVehicles; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $vehicle): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <?php
                            $vehicleFallback = $vehicle->type === 'motor' ? $motorFallbackImage : $carFallbackImage;
                            $imageUrl = $vehicle->image_path ? asset('storage/' . $vehicle->image_path) : $vehicleFallback;
                        ?>
                        <article class="asset-card vehicle-card">
                            <div class="vehicle-top">
                                <div class="min-w-0">
                                    <h3 class="truncate text-lg font-black"><?php echo e($vehicle->name); ?></h3>
                                    <p class="mt-1 truncate text-sm font-bold text-[#7180a8]"><?php echo e($vehicle->brand ?? '-'); ?> <?php echo e($vehicle->model ?? ''); ?></p>
                                </div>
                                <span class="vehicle-status <?php echo e($vehicle->landing_status_class); ?>"><?php echo e($vehicle->landing_status); ?></span>
                            </div>

                            <div class="vehicle-image">
                                <img src="<?php echo e($imageUrl); ?>" alt="<?php echo e($vehicle->name); ?>" loading="lazy" onerror="this.onerror=null;this.src='<?php echo e($vehicleFallback); ?>';">
                            </div>

                            <div class="vehicle-specs mt-3">
                                <div class="vehicle-spec">
                                    <span>Kursi</span>
                                    <span><?php echo e($vehicle->capacity ?? 0); ?></span>
                                </div>
                                <div class="vehicle-spec">
                                    <span>BBM</span>
                                    <span><?php echo e($vehicle->fuel_type ?? '-'); ?></span>
                                </div>
                                <div class="vehicle-spec">
                                    <span>Plat</span>
                                    <span><?php echo e($vehicle->plate_number ?? '-'); ?></span>
                                </div>
                            </div>

                            <p class="schedule-text mt-4"><?php echo e($vehicle->landing_schedule); ?></p>
                        </article>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <div class="asset-card p-8 text-center font-bold text-[#7180a8]">Belum ada data kendaraan.</div>
                    <?php endif; ?>
                </div>
            </section>

        </main>

        <footer class="footer-shell">
            <div class="footer-grid">
                <div>
                    <div class="flex items-center gap-3">
                        <span class="brand-mark">
                            <svg viewBox="0 0 48 48" fill="none" aria-hidden="true">
                                <path d="M24 5 41 14.5v19L24 43 7 33.5v-19L24 5Z" stroke="white" stroke-width="4.5" stroke-linejoin="round"/>
                                <path d="M8 14.5 24 24l16-9.5M24 24v18" stroke="white" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                        <div>
                            <div class="text-2xl font-black text-white">Sipian</div>
                            <div class="text-sm font-bold text-blue-100/70">Dashboard aset operasional</div>
                        </div>
                    </div>
                    <p class="mt-4 max-w-sm text-sm font-semibold leading-7 text-blue-100/70">
                        Sistem pemantauan ruangan dan kendaraan operasional.
                    </p>
                </div>

                <div>
                    <div class="footer-title">Navigasi</div>
                    <a href="<?php echo e(route('landing')); ?>" class="footer-link">Beranda</a>
                    <a href="#ruangan" class="footer-link">Ruangan</a>
                    <a href="#kendaraan" class="footer-link">Kendaraan</a>
                </div>

                <div>
                    <div class="footer-title">Layanan</div>
                    <a href="#ruangan" class="footer-link">Cek Ruangan</a>
                    <a href="#kendaraan" class="footer-link">Cek Kendaraan</a>
                    <a href="<?php echo e(route('login')); ?>" class="footer-link">Login</a>
                </div>

                <div>
                    <div class="footer-title">Kontak</div>
                    <div class="footer-link">DP3APPKB Surabaya</div>
                    <div class="footer-link">Senin - Jumat</div>
                    <div class="footer-link">07.00 - 18.00</div>
                </div>
            </div>

            <div class="footer-bottom">
                <div>© <?php echo e(date('Y')); ?> Sipian. All rights reserved.</div>
                <div>SIPIAN</div>
            </div>
        </footer>
    </div>
</body>
</html>
<?php /**PATH /Users/Afifudin/Downloads/Magang/SIpian_2026-05-06/resources/views/landing/index.blade.php ENDPATH**/ ?>