@extends('layouts.app')

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

    .ff-login-page {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url("{{ asset('assets/background.png') }}");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 20px;
        font-family: 'Inter', sans-serif;
    }

    .ff-login-card {
        width: 100%;
        max-width: 480px;
        border-radius: 20px;
        padding: 40px 35px 35px 35px;
        background: rgba(30, 30, 30, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        color: #fff;
    }

    .ff-logo-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 5px;
        margin-top: -33px;
    }

    .ff-logo-container img {
        width: 320px;
        max-width: 100%;
        height: auto;
        transform: scale(1.15);
    }

    .ff-subtitle {
        text-align: center;
        margin-bottom: 25px;
    }

    .ff-subtitle h4 {
        margin: 0;
        font-weight: 700;
        font-size: 25px;
        color: #fff;
        letter-spacing: 0.5px;
    }

    .ff-subtitle p {
        margin: 6px 0 0;
        color: rgba(255, 255, 255, 0.6);
        font-size: 15px;
        font-weight: 400;
    }

    .ff-input-wrap {
        position: relative;
        margin-bottom: 16px;
    }

    .ff-input-wrap i {
        position: absolute;
        top: 50%;
        left: 18px;
        transform: translateY(-50%);
        color: rgba(255, 255, 255, 0.6);
        font-size: 16px;
    }

    .ff-input {
        width: 100%;
        height: 52px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        background: transparent;
        color: #fff;
        padding: 0 50px;
        font-size: 15px;
        transition: all 0.3s ease;
    }

    .ff-input:focus {
        outline: none;
        border-color: #FFC107;
        background: rgba(255, 255, 255, 0.05);
    }

    .ff-input::placeholder {
        color: rgba(255, 255, 255, 0.6);
    }

    .ff-submit {
        width: 100%;
        height: 52px;
        border: none;
        border-radius: 10px;
        background: linear-gradient(to right, #FFC107, #F57F17);
        color: #000;
        font-size: 17px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-top: 10px;
    }

    .ff-submit:hover {
        transform: translateY(-2px);
        background: linear-gradient(to right, #FFCA28, #FF8F00);
        box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3);
    }

    .ff-error {
        color: #ff6b6b;
        font-size: 13px;
        margin-top: 5px;
        margin-left: 5px;
    }

    @media (max-width: 500px) {
        .ff-login-card { padding: 30px 20px; }
        .ff-subtitle h4 { font-size: 22px; }
        .ff-logo-container img { transform: scale(1.05); }
    }
</style>

<div class="ff-login-page">
    <div class="ff-login-card">
        <div class="ff-logo-container">
            <img src="{{ asset('assets/flink_freight_logo.png') }}" alt="Flink Freight">
        </div>

        <div class="ff-subtitle">
            <p>Create your account</p>
        </div>

        <form method="POST" action="{{ route('register') }}">
            @csrf

            <div class="ff-input-wrap">
                <i class="fa-regular fa-user"></i>
                <input id="name" type="text" class="ff-input @error('name') is-invalid @enderror" name="name"
                    value="{{ old('name') }}" required autocomplete="name" autofocus placeholder="Full Name">
                @error('name')
                    <div class="ff-error">{{ $message }}</div>
                @enderror
            </div>

            <div class="ff-input-wrap">
                <i class="fa-regular fa-envelope"></i>
                <input id="email" type="email" class="ff-input @error('email') is-invalid @enderror" name="email"
                    value="{{ old('email') }}" required autocomplete="email" placeholder="Email address">
                @error('email')
                    <div class="ff-error">{{ $message }}</div>
                @enderror
            </div>

            <div class="ff-input-wrap">
                <i class="fa-solid fa-lock"></i>
                <input id="password" type="password" class="ff-input @error('password') is-invalid @enderror"
                    name="password" required autocomplete="new-password" placeholder="Password">
                @error('password')
                    <div class="ff-error">{{ $message }}</div>
                @enderror
            </div>

            <div class="ff-input-wrap">
                <i class="fa-solid fa-lock"></i>
                <input id="password-confirm" type="password" class="ff-input"
                    name="password_confirmation" required autocomplete="new-password" placeholder="Confirm Password">
            </div>

            <button type="submit" class="ff-submit">
                Create Account
            </button>
        </form>

        <div class="text-center mt-4">
            <p class="m-0" style="color: rgba(255,255,255,0.6); font-size: 14px;">
                Already have an account? 
                <a href="{{ route('login') }}" style="color: #FFB300; text-decoration: none; font-weight: 600;">Sign In</a>
            </p>
        </div>
    </div>
</div>
@endsection