@extends('frontend.layouts.auth')

@section('title', 'Forgot Password')

@section(
    'meta_description',
    'Forgot your password? Don\'t worry, we\'ll help you reset it. Just provide your email address and we\'ll send you a link to reset your password.'
)

@section('content')

<section class="ht-auth-section">
  <!-- =========================================
       HERO BANNER
  ========================================== -->
  <div class="auth-hero">
    <!-- Brand Header -->
    <div class="container auth-hero__header">
      <a href="{{ route('home') }}" class="auth-brand">
        <div class="auth-brand__logo">
          <i class="fas fa-graduation-cap"></i>
        </div>
        <div class="auth-brand__text">
          <span class="brand-name">HI-TECH</span>
          <span class="brand-sub">PATHSHALA</span>
        </div>
      </a>
    </div>

    <!-- Background Pattern Dots -->
    <div class="auth-hero__bg-dots left" aria-hidden="true"></div>
    <div class="auth-hero__bg-dots right" aria-hidden="true"></div>

    <div class="container auth-hero__container">
      <!-- Top Pill Badge -->
      <div class="auth-hero__badge">
        <i class="fas fa-lock" aria-hidden="true"></i>
        <span>We've Got You Covered</span>
      </div>

      <!-- Main Title -->
      <h1 class="auth-hero__title">Forgot Password?</h1>

      <!-- Decorative Divider -->
      <div class="auth-hero__divider" aria-hidden="true">
        <span class="line"></span>
        <span class="diamond">◆</span>
        <span class="line"></span>
      </div>

      <!-- Subtitle -->
      <p class="auth-hero__subtitle">
        No worries! Enter your email address and we'll send you a link to reset your password.
      </p>

      <!-- Envelope / Lock Illustration Graphic -->
      <div class="auth-hero__illustration" aria-hidden="true">
        <div class="hero-envelope-card">
          <div class="hero-envelope-body">
            <div class="lock-chip">
              <i class="fas fa-lock"></i>
              <span class="dots">••••••</span>
            </div>
          </div>
          <div class="hero-airplane-badge">
            <i class="fas fa-paper-plane"></i>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- =========================================
       MAIN CONTENT CARD (2 COLUMNS)
  ========================================== -->
  <div class="container auth-content">
    <div class="ht-card auth-main-card">
      <div class="auth-grid">
        
        <!-- LEFT COLUMN: Instruction Graphic & Features -->
        <div class="auth-benefits-col">
          <h2 class="benefits-title">Let's Get You <span class="text-gold">Back In</span></h2>
          <div class="benefits-divider" aria-hidden="true">
            <span class="line"></span>
            <span class="diamond">◆</span>
            <span class="line"></span>
          </div>
          <p class="benefits-subtitle">Enter your registered email address and we'll send you reset instructions.</p>

          <!-- Email / Reset Envelope Visual Card -->
          <div class="dashboard-preview-wrapper">
            <div class="preview-dots-bg" aria-hidden="true"></div>
            <div class="preview-envelope-box">
              <div class="preview-envelope">
                <div class="preview-avatar-card">
                  <div class="avatar-circle-sm">
                    <i class="fas fa-user"></i>
                  </div>
                  <div class="preview-card-line"></div>
                </div>
              </div>
              <div class="preview-badge-plane">
                <i class="fas fa-paper-plane"></i>
              </div>
              <div class="preview-plant-pot">
                <i class="fas fa-seedling"></i>
              </div>
            </div>
          </div>

          <!-- Feature Bullets -->
          <ul class="benefits-list">
            <li>
              <div class="benefit-icon benefit-icon--blue">
                <i class="fas fa-paper-plane"></i>
              </div>
              <span>Quick and easy password reset</span>
            </li>
            <li>
              <div class="benefit-icon benefit-icon--gold">
                <i class="fas fa-shield-alt"></i>
              </div>
              <span>Secure and protected process</span>
            </li>
            <li>
              <div class="benefit-icon benefit-icon--green">
                <i class="fas fa-headset"></i>
              </div>
              <span>24/7 support if you need help</span>
            </li>
          </ul>
        </div>

        <!-- RIGHT COLUMN: Reset Password Form -->
        <div class="auth-form-col">
          <div class="auth-card-header">
            <div class="auth-card-icon">
              <i class="fas fa-envelope"></i>
            </div>
            <div>
              <h3 class="auth-card-title">Reset Your Password</h3>
              <p class="auth-card-desc">Provide your email address associated with your account.</p>
            </div>
          </div>

          <!-- Laravel Session Status Message -->
          @if (session('status'))
            <div class="auth-alert-success" role="alert">
              <i class="fas fa-check-circle"></i> {{ session('status') }}
            </div>
          @endif

          <form class="auth-form" action="#" method="POST">
            @csrf

            <!-- Email Address Input -->
            <div class="ht-form-group">
              <label for="email" class="ht-label">Email Address</label>
              <div class="input-icon-wrapper">
                <i class="far fa-envelope input-icon"></i>
                <input 
                  type="email" 
                  id="email" 
                  name="email" 
                  class="ht-input @error('email') is-invalid @enderror" 
                  value="{{ old('email') }}" 
                  placeholder="you@example.com" 
                  required 
                  autofocus 
                />
              </div>
              @error('email')
                <span class="ht-form-error">{{ $message }}</span>
              @enderror
            </div>

            <!-- Send Reset Link Button -->
            <button type="submit" class="ht-btn-primary">
              <i class="fas fa-paper-plane"></i> Send Reset Link
            </button>

            <!-- Or Divider -->
            <div class="auth-divider">
              <span>or</span>
            </div>

            <!-- Back to Sign In Link Button -->
            <a href="{{ route('login') }}" class="ht-btn-secondary">
              <i class="fas fa-arrow-left"></i> Back to Sign In
            </a>

            <!-- Contact Support Text -->
            <p class="auth-footer-text">
              <i class="far fa-question-circle"></i> Still having trouble? 
              <a href="{{ route('contact') }}" class="support-link">Contact Support</a>
            </p>
          </form>
        </div>

      </div>
    </div>

    <!-- =========================================
         BOTTOM TRUST FEATURES BAR (4 COLUMNS)
    ========================================== -->
    <div class="ht-card auth-features-bar">
      <div class="feature-col">
        <div class="feature-icon feature-icon--blue">
          <i class="fas fa-shield-alt"></i>
        </div>
        <div class="feature-info">
          <h4>Secure & Safe</h4>
          <p>Your data is protected with top security</p>
        </div>
      </div>

      <div class="feature-col">
        <div class="feature-icon feature-icon--gold">
          <i class="fas fa-headset"></i>
        </div>
        <div class="feature-info">
          <h4>24/7 Support</h4>
          <p>We're here to help you anytime</p>
        </div>
      </div>

      <div class="feature-col">
        <div class="feature-icon feature-icon--green">
          <i class="fas fa-award"></i>
        </div>
        <div class="feature-info">
          <h4>Trusted by Students</h4>
          <p>Join thousands of successful aspirants</p>
        </div>
      </div>

      <div class="feature-col">
        <div class="feature-icon feature-icon--purple">
          <i class="far fa-heart"></i>
        </div>
        <div class="feature-info">
          <h4>Made for Aspirants</h4>
          <p>Designed to help you achieve your dreams</p>
        </div>
      </div>
    </div>

  </div>
</section>

@endsection

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/auth.css') }}">
@endpush