<!DOCTYPE html>
<html lang="<?php echo e(str_replace('_', '-', app()->getLocale())); ?>" 
      x-data="{ darkMode: localStorage.getItem('darkMode') === 'true' }" 
      x-init="$watch('darkMode', val => localStorage.setItem('darkMode', val))"
      :class="{ 'dark': darkMode }">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">

        <title>Login - Klinik Kesehatan Digital</title>

        <!-- Fonts -->
        <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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

        <!-- Scripts -->
        <?php echo app('Illuminate\Foundation\Vite')(['resources/css/app.css', 'resources/js/app.js']); ?>

        <style>
            * { box-sizing: border-box; }
            html, body {
                margin: 0;
                padding: 0;
                min-height: 100vh;
            }

            /* =====================================================
               2-COLUMN LAYOUT: Ilustrasi (Kiri 40%) + Form (Kanan 60%)
            ===================================================== */

            .auth-container {
                min-height: 100vh;
                display: flex;
                align-items: stretch;
                background: #f1f5f9;
            }
            .dark .auth-container {
                background: #0f172a;
            }

            /* LEFT COLUMN - Illustration & Branding */
            .auth-illustration {
                flex: 0 0 40%;
                background: linear-gradient(135deg, #14b8a6 0%, #0d9488 50%, #0f766e 100%);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 3rem 2rem;
                position: relative;
                overflow: hidden;
                color: white;
            }

            /* Animated background shapes */
            .auth-illustration::before {
                content: '';
                position: absolute;
                width: 400px;
                height: 400px;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 50%;
                top: -100px;
                left: -100px;
                animation: float 20s ease-in-out infinite;
            }

            .auth-illustration::after {
                content: '';
                position: absolute;
                width: 300px;
                height: 300px;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 50%;
                bottom: -80px;
                right: -80px;
                animation: float 25s ease-in-out infinite reverse;
            }

            @keyframes float {
                0%, 100% { transform: translateY(0px); }
                50% { transform: translateY(-30px); }
            }

            /* Content inside illustration area */
            .auth-illustration-content {
                position: relative;
                z-index: 10;
                text-align: center;
            }

            .auth-illustration-logo {
                width: 100px;
                height: 100px;
                background: rgba(255, 255, 255, 0.15);
                border-radius: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0 auto 2rem;
                backdrop-filter: blur(10px);
                border: 1px solid rgba(255, 255, 255, 0.2);
                font-size: 3rem;
            }

            .auth-illustration-title {
                font-size: 2rem;
                font-weight: 700;
                margin: 0 0 1rem 0;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            }

            .auth-illustration-subtitle {
                font-size: 1rem;
                opacity: 0.95;
                margin: 0 0 3rem 0;
                line-height: 1.6;
            }

            /* Medical icons */
            .medical-icons {
                display: flex;
                gap: 2rem;
                justify-content: center;
                margin: 2rem 0 0 0;
                flex-wrap: wrap;
            }

            .medical-icon {
                width: 60px;
                height: 60px;
                background: rgba(255, 255, 255, 0.15);
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.5rem;
                backdrop-filter: blur(10px);
                border: 1px solid rgba(255, 255, 255, 0.2);
                transition: all 0.3s ease;
            }

            .medical-icon:hover {
                background: rgba(255, 255, 255, 0.25);
                transform: translateY(-5px);
            }

            /* RIGHT COLUMN - Form */
            .auth-form-wrapper {
                flex: 0 0 60%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 2rem;
                overflow-y: auto;
                background: #ffffff;
                transition: background 0.3s;
            }
            .dark .auth-form-wrapper {
                background: #1e293b;
            }

            .auth-form-container {
                width: 100%;
                max-width: 480px;
            }

            /* Form header */
            .auth-form-header {
                margin-bottom: 2rem;
            }

            .auth-form-title {
                font-size: 1.875rem;
                font-weight: 700;
                color: #0f172a;
                margin: 0 0 0.5rem 0;
            }
            .dark .auth-form-title {
                color: #f1f5f9;
            }

            .auth-form-subtitle {
                font-size: 0.95rem;
                color: #64748b;
                margin: 0;
            }
            .dark .auth-form-subtitle {
                color: #94a3b8;
            }

            /* Theme toggle button */
            .theme-toggle {
                position: fixed;
                top: 1.5rem;
                right: 1.5rem;
                z-index: 100;
                padding: 0.75rem;
                border-radius: 0.75rem;
                border: 1px solid #e2e8f0;
                background: rgba(255, 255, 255, 0.95);
                cursor: pointer;
                transition: all 0.2s;
                backdrop-filter: blur(10px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }
            .dark .theme-toggle {
                background: rgba(30, 41, 59, 0.95);
                border-color: #334155;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            }
            .theme-toggle:hover {
                transform: scale(1.05);
                box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
            }

            .theme-toggle-icon {
                font-size: 1.25rem;
                display: block;
                width: 1.25rem;
                height: 1.25rem;
                line-height: 1.25rem;
                text-align: center;
                color: #475569;
            }
            .dark .theme-toggle-icon {
                color: #fbbf24;
            }

            /* Responsive Design */
            @media (max-width: 1024px) {
                .auth-illustration {
                    flex: 0 0 50%;
                    padding: 2rem 1.5rem;
                }
                .auth-form-wrapper {
                    flex: 0 0 50%;
                    padding: 1.5rem;
                }
                .auth-illustration-title {
                    font-size: 1.5rem;
                }
                .medical-icons {
                    gap: 1rem;
                }
                .medical-icon {
                    width: 50px;
                    height: 50px;
                    font-size: 1.25rem;
                }
            }

            @media (max-width: 768px) {
                .auth-container {
                    flex-direction: column;
                }
                .auth-illustration {
                    flex: 0 0 auto;
                    min-height: 250px;
                    padding: 2rem 1rem;
                }
                .auth-form-wrapper {
                    flex: 0 0 auto;
                    min-height: auto;
                    padding: 2rem 1rem;
                }
                .auth-illustration-title {
                    font-size: 1.25rem;
                }
                .auth-illustration-logo {
                    width: 80px;
                    height: 80px;
                    font-size: 2.5rem;
                }
            }

            @media (max-width: 480px) {
                .theme-toggle {
                    padding: 0.5rem;
                    width: 44px;
                    height: 44px;
                }
                .auth-form-container {
                    max-width: 100%;
                }
            }
        </style>
    </head>
    <body class="font-sans antialiased">
        <div class="auth-container">
            <!-- LEFT COLUMN: Illustration & Branding -->
            <div class="auth-illustration">
                <div class="auth-illustration-content">
                    <div class="auth-illustration-logo">
                        <i class="fas fa-hospital"></i>
                    </div>
                    <h1 class="auth-illustration-title">Klinik Kesehatan Digital</h1>
                    <p class="auth-illustration-subtitle">
                        Sistem manajemen kesehatan terpadu dengan teknologi terkini untuk layanan prima.
                    </p>
                    
                    <!-- Medical Icons -->
                    <div class="medical-icons">
                        <div class="medical-icon" title="Konsultasi">
                            <i class="fas fa-stethoscope"></i>
                        </div>
                        <div class="medical-icon" title="Rekam Medis">
                            <i class="fas fa-file-medical"></i>
                        </div>
                        <div class="medical-icon" title="Jadwal">
                            <i class="fas fa-calendar-check"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- RIGHT COLUMN: Form -->
            <div class="auth-form-wrapper">
                <!-- Theme Toggle -->
                <button 
                    @click="darkMode = !darkMode" 
                    class="theme-toggle"
                    :title="darkMode ? 'Beralih ke Mode Terang' : 'Beralih ke Mode Gelap'"
                >
                    <i x-show="!darkMode" class="fas fa-moon theme-toggle-icon"></i>
                    <i x-show="darkMode" class="fas fa-sun theme-toggle-icon"></i>
                </button>

                <div class="auth-form-container">
                    <!-- Form Header -->
                    <div class="auth-form-header">
                        <h2 class="auth-form-title">Masuk ke Sistem</h2>
                        <p class="auth-form-subtitle">Gunakan kredensial Gmail Anda untuk akses</p>
                    </div>

                    <!-- Form Content (Slot) -->
                    <?php echo e($slot); ?>


                    <!-- Footer -->
                    <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700 text-center">
                        <p class="text-xs text-gray-500 dark:text-gray-400">
                            &copy; <?php echo e(date('Y')); ?> Klinik Kesehatan Digital. Semua hak dilindungi.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Alpine.js -->
        <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    </body>
</html> <?php /**PATH C:\laragon\www\KESEHATAN\resources\views/layouts/guest.blade.php ENDPATH**/ ?>