@php
  $customizerHidden = 'customizer-hide';
  $configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title', __('Verify Email'))

@section('page-style')
  @vite('resources/assets/vendor/scss/pages/page-auth.scss')
  <style>
    .auth-wrapper {
      min-height: 100vh;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem 1rem;
      overflow: hidden;
    }

    .auth-wrapper::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background:
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
      pointer-events: none;
    }

    .auth-wrapper::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 200px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.1' d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") no-repeat bottom;
      background-size: cover;
      pointer-events: none;
    }

    .auth-container {
      max-width: 450px;
      width: 100%;
      position: relative;
      z-index: 1;
    }

    .brand-section {
      text-align: center;
      margin-bottom: 2.5rem;
    }

    .brand-logo-wrapper {
      display: inline-flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 0.75rem;
    }

    .brand-icon {
      width: 50px;
      height: 50px;
      background: #ffffff;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    .brand-icon img {
      width: 32px;
      height: 32px;
      object-fit: contain;
    }

    .brand-name {
      font-size: 1.75rem;
      font-weight: 700;
      color: #ffffff;
      margin: 0;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .auth-card {
      background: #ffffff;
      border: none;
      border-radius: 20px;
      padding: 2.5rem;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(10px);
    }

    .auth-title {
      font-size: 1.5rem;
      font-weight: 700;
      color: #2f3349;
      margin-bottom: 0.5rem;
    }

    .auth-subtitle {
      color: #8692a6;
      margin-bottom: 2rem;
      font-size: 0.9375rem;
      line-height: 1.6;
    }

    .highlight-email {
      color: #696cff;
      font-weight: 600;
    }

    .btn-primary {
      height: 48px;
      background: #696cff;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      font-size: 0.9375rem;
      transition: all 0.2s;
    }

    .btn-primary:hover {
      background: #5f61e6;
    }

    .btn-link {
      color: #696cff;
      text-decoration: none;
      font-size: 0.875rem;
      font-weight: 500;
      transition: all 0.2s;
    }

    .btn-link:hover {
      color: #5f61e6;
      text-decoration: underline;
    }

    .auth-footer {
      position: relative;
      z-index: 1;
      text-align: center;
      margin-top: 2rem;
      padding: 1.5rem;
      color: #ffffff;
    }

    .auth-footer-content {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      align-items: center;
    }

    .auth-footer-text {
      font-size: 0.875rem;
      opacity: 0.9;
    }

    .auth-footer-link {
      color: #ffffff;
      text-decoration: none;
      font-size: 0.875rem;
      opacity: 0.9;
      transition: opacity 0.2s;
    }

    .auth-footer-link:hover {
      opacity: 1;
      color: #ffffff;
      text-decoration: underline;
    }

    @media (max-width: 576px) {
      .auth-card {
        padding: 2rem 1.5rem;
      }
    }
  </style>
@endsection

@section('content')
  <div class="auth-wrapper">
    <div class="auth-container">
      <!-- Brand Section -->
      <div class="brand-section">
        <div class="brand-logo-wrapper">
          <div class="brand-icon">
            <img src="{{ $settings->app_logo ? asset('assets/img/'.$settings->app_logo) : asset('assets/img/logo.png')}}" alt="Logo">
          </div>
          <h1 class="brand-name">{{$settings->app_name ?? config('variables.templateFullName')}}</h1>
        </div>
      </div>

      <!-- Verify Email Card -->
      <div class="auth-card">
        <h2 class="auth-title">@lang('Verify your email') ✉️</h2>
        <p class="auth-subtitle">
          @lang('Account activation link sent to your email address:')<br>
          <span class="highlight-email">{{auth()->user()->email}}</span><br>
          @lang('Please follow the link inside to continue.')
        </p>

        <form method="POST" action="{{ route('verification.send') }}">
          @method('POST')
          @csrf
          <button type="submit" class="btn btn-primary w-100 mb-4">
            @lang('Resend verification email')
          </button>
        </form>

        <div class="text-center">
          <form action="{{ route('auth.logout') }}" method="POST" class="d-inline">
            @csrf
            <button type="submit" class="btn btn-link">
              @lang('Logout')
            </button>
          </form>
        </div>
      </div>

      <!-- Footer -->
      <div class="auth-footer">
        <div class="auth-footer-content">
          <div class="auth-footer-text">
            &copy; <script>document.write(new Date().getFullYear());</script>, {{ __('made with') }} ❤️ {{ __('by') }} <a href="{{ (!empty(config('variables.creatorUrl')) ? config('variables.creatorUrl') : '') }}" target="_blank" class="auth-footer-link">{{ (!empty(config('variables.creatorName')) ? config('variables.creatorName') : '') }}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection