@extends('layouts.verify-layout')

@section('content')

<div class="glass entrance w-full max-w-lg rounded-3xl p-12 shadow-2xl">

    <h2 class="text-4xl font-bold text-center mb-6 tracking-wide">
        Verify Your Email
    </h2>

    <p class="text-gray-300 text-center mb-10 leading-relaxed">
        Enter your email address to receive your verification code.
    </p>

    @if(session('success'))
        <div class="bg-green-600/20 border border-green-500 text-green-400 text-sm p-4 rounded-lg mb-6 text-center">
            {{ session('success') }}
        </div>
    @endif

    @if($errors->any())
        <div class="bg-red-600/20 border border-red-500 text-red-400 text-sm p-4 rounded-lg mb-6 text-center">
            {{ $errors->first() }}
        </div>
    @endif

    <form method="POST" action="{{ route('send.code') }}" class="space-y-6">
        @csrf

        <input 
            type="email"
            name="email"
            required
            autocomplete="email"
            placeholder="Enter your email address"
            class="w-full px-5 py-4 rounded-xl bg-black/60 border border-gray-700 
                   focus:border-red-600 focus:ring-2 focus:ring-red-600/40 
                   outline-none text-white transition duration-300"
        >

        <button type="submit"
            class="w-full bg-red-600 hover:bg-red-700 transition 
                   py-4 rounded-xl font-semibold tracking-wide 
                   shadow-lg shadow-red-900/40">
            Send Verification Code
        </button>
    </form>

</div>

@endsection