@extends('layouts.app')

@section('content')

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;800&display=swap');

        body, html {
            width: 100%;
            min-height: 100vh; /* Permite crescer se necessário */
            margin: 0;
            font-family: 'Montserrat', sans-serif;
            overflow-x: hidden; /* Evita scroll horizontal */
            /* overflow-y: auto;  Permite scroll vertical */
        }

        /* --- FUNDO (Mantenha o seu atual ou use este) --- */
        .animated-background {
            position: fixed; /* Fixed para ficar parado enquanto rola */
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(-45deg, #0f0c29, #302b63, #24243e, #00d2ff);
            background-size: 400% 400%;
            animation: gradientFlow 15s ease infinite;
            z-index: -2;
        }
        .particles {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px);
            background-size: 50px 50px; animation: particleMove 20s linear infinite; z-index: -1;
        }
        @keyframes gradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        @keyframes particleMove { 0% { transform: translateY(0); } 100% { transform: translateY(-50px); } }

        /* --- LAYOUT CONTAINER --- */
        .login-container {
            min-height: 100vh; /* Ocupa pelo menos a tela toda */
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        /* --- CARD DE VIDRO --- */
        .glass-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            padding: 3rem;
            width: 100%;
            max-width: 1000px;
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
            text-align: center;
            animation: floatUp 1s ease-out;
            position: relative;
            overflow: hidden;
            margin: auto; /* Centraliza se houver scroll */
        }

        /* Brilho no topo */
        .glass-card::before {
            content: ''; position: absolute; top: 0; left: -50%; width: 200%; height: 100%;
            background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
            transform: skewX(-25deg); animation: shine 6s infinite; pointer-events: none;
        }

        @keyframes floatUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes shine { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }

        /* --- CONTEÚDO --- */
        .logo-container { margin-bottom: 2rem; }
        .logo-img { max-height: 100px; filter: drop-shadow(0 0 15px rgba(0, 210, 255, 0.5)); transition: transform 0.3s; }
        .logo-img:hover { transform: scale(1.05); }

        .welcome-title {
            color: #fff; font-weight: 800; font-size: 2.5rem; margin-bottom: 0.5rem;
            letter-spacing: -1px; text-shadow: 0 2px 10px rgba(0,0,0,0.5);
        }
        .welcome-subtitle { color: rgba(255,255,255,0.7); font-size: 1.1rem; margin-bottom: 3rem; font-weight: 300; }

        /* --- GRID DE BOTÕES --- */
        .access-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* Padrão: 3 colunas */
            gap: 20px;
            margin-top: 20px;
        }

        .access-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px; padding: 2rem 1rem;
            text-decoration: none; transition: all 0.4s;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            position: relative; overflow: hidden;
        }
        .access-card:hover {
            background: rgba(255, 255, 255, 0.1); transform: translateY(-10px);
            border-color: rgba(0, 210, 255, 0.5); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
        .access-icon {
            font-size: 2.5rem; margin-bottom: 1rem;
            background: -webkit-linear-gradient(#00d2ff, #3a7bd5);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        }
        .access-title { color: #fff; font-weight: 600; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px; }
        .access-arrow { margin-top: 15px; color: rgba(255,255,255,0.5); opacity: 0; transform: translateX(-20px); transition: all 0.3s; }
        .access-card:hover .access-arrow { opacity: 1; transform: translateX(0); color: #00d2ff; }

        /* --- MEDIA QUERIES (MOBILE) --- */
        @media (max-width: 992px) {
            .access-grid { grid-template-columns: repeat(2, 1fr); } /* Tablet: 2 colunas */
        }

        @media (max-width: 768px) {
            .glass-card {
                padding: 2rem 1.5rem; /* Menos padding interno */
                margin-top: 20px; margin-bottom: 20px;
            }
            .welcome-title { font-size: 1.8rem; } /* Fonte menor */
            .welcome-subtitle { font-size: 0.95rem; margin-bottom: 2rem; }

            .access-grid {
                grid-template-columns: 1fr; /* Mobile: 1 coluna (pilha) */
                gap: 15px;
            }
            .access-card {
                padding: 1.5rem; /* Cartões mais compactos */
                flex-direction: row; /* Ícone ao lado do texto no mobile */
                justify-content: flex-start;
                text-align: left;
            }
            .access-icon {
                font-size: 1.8rem; margin-bottom: 0; margin-right: 15px;
            }
            .access-title { font-size: 1rem; }
            .access-arrow {
                margin-top: 0; margin-left: auto; opacity: 1; transform: none; font-size: 0.9rem;
            }
            .access-card:hover { transform: translateY(-3px); } /* Movimento menor no mobile */
        }
    </style>

    <div class="animated-background"></div>
    <div class="particles"></div>

    <div class="login-container">
        <div class="glass-card">

            <div class="logo-container">
                <img src="/img/logo_quadrada.png" alt="TFuel Logo" class="logo-img">
            </div>

            <h1 class="welcome-title">Bem-vindo à TFuel</h1>
            <p class="welcome-subtitle">Selecione o seu perfil de acesso.</p>

            <div class="access-grid">
                <a href="{{ route('login') }}" class="access-card" onclick="func_animateLogin(this)">
                    <div class="access-icon"><i class="fas fa-user-tie"></i></div>
                    <div class="access-title">Colaboradores</div>
                    <div class="access-arrow"><i class="fas fa-chevron-right"></i></div>
                </a>

                <a href="{{ route('em_breve') }}" class="access-card">
                    <div class="access-icon"><i class="fas fa-truck-loading"></i></div>
                    <div class="access-title">Fornecedores</div>
                    <div class="access-arrow"><i class="fas fa-chevron-right"></i></div>
                </a>

                <a href="{{ route('em_breve') }}" class="access-card">
                    <div class="access-icon"><i class="fas fa-users"></i></div>
                    <div class="access-title">Clientes</div>
                    <div class="access-arrow"><i class="fas fa-chevron-right"></i></div>
                </a>
            </div>

            <div class="mt-5 text-white-50 small">
                &copy; {{ date('Y') }} TFuel Gestão.
            </div>
        </div>
    </div>

    <script>
        function func_animateLogin(element){
            element.style.pointerEvents = 'none';
            element.style.borderColor = '#00d2ff';
            // Adaptação visual para mobile
            if(window.innerWidth < 768) {
                element.querySelector('.access-arrow').innerHTML = '<i class="fas fa-circle-notch fa-spin"></i>';
            } else {
                element.querySelector('.access-title').innerHTML = 'A Validar...';
                element.querySelector('.access-icon').innerHTML = '<i class="fas fa-circle-notch fa-spin"></i>';
            }
        }
    </script>

@endsection