@extends("frontend.layout.main")
<style>
    .login-section {
        height: 100vh;
        width: 100%;
        background: url('/frontend/images/loginback.jpg');
        background-size: cover;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        /* position:relative; */
    }


    .login-box {
        position: relative;
        width: 420px;
        padding: 40px 35px;
        background: rgba(0, 0, 0, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 14px;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
    }

    .login-title {
        text-align: center;
        font-size: 42px;
        font-family: "Playfair Display";
        font-weight: 800;
        margin-bottom: 25px;
        color: var(--gold-2);
    }

    .form-group {
        margin-bottom: 18px;
    }

    .form-group input {
        width: 100%;
        padding: 12px 15px;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.06);
        color: #fff;
        font-size: 16px;
    }

    .form-group input:focus {
        border-color: var(--gold-2);
        outline: none;
    }

    .options-row {
        display: flex;
        justify-content: space-between;
        color: #fff;
        margin: 10px 0 20px;
        font-size: 15px;
    }

    .register-link {
        color: var(--gold-2);
        font-weight: 600;
    }

    .register-link:hover {
        color: var(--gold);
    }

    .login-btn {
        width: 100%;
        padding: 12px;
        font-size: 18px;
        font-weight: 700;
        border: none;
        background: linear-gradient(90deg, var(--gold), var(--gold-2));
        border-radius: 8px;
        color: #111;
        cursor: pointer;
        transition: 0.3s;
    }

    .login-btn:hover {
        filter: brightness(1.2);
    }

</style>
@section("content")

<section class="login-section">

    <form class="login-box" action="{{ route('login') }}" method="post">
        @csrf

        <h2 class="login-title">Login</h2>

        <div class="form-group">
            <input type="email" placeholder="Username" name="email">
        </div>

        <div class="form-group">
            <input type="password" placeholder="Password" name="password">
        </div>

        <div class="options-row">
            <label><input type="checkbox"> Remember Me</label>
            <a href="{{ route('registration') }}" class="register-link">Registration Now</a>
        </div>
        
        <button class="login-btn">Login</button>
    </form>

</section>



@endsection