@extends('frontend.layouts.auth')

@section('title', 'Sign In')

@section(
    'meta_description',
    'Sign in to your Hi-Tech Pathshala account and continue your exam preparation.'
)

@section('content')

<section class="ht-auth-section">
  <!-- =========================================
       HERO BANNER
  ========================================== -->
  <div class="auth-hero">
    <!-- Top Bar / Brand Logo -->
    <div class="container auth-hero__header">
      <a href="/" 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">
      <!-- Badge Pill -->
      <div class="auth-hero__badge">
        <i class="fas fa-key" aria-hidden="true"></i>
        <span>Welcome Back!</span>
      </div>

      <!-- Main Headline -->
      <h1 class="auth-hero__title">Sign In to Your Account</h1>

      <!-- Description -->
      <p class="auth-hero__subtitle">
        Access your dashboard, continue your preparation and achieve your goals with <span class="highlight">Hi-Tech Pathshala</span>.
      </p>

      <!-- Desktop Security Badge Graphic -->
      <div class="auth-hero__illustration" aria-hidden="true">
        <div class="shield-badge">
          <i class="fas fa-lock"></i>
        </div>
        <div class="login-card-graphic">
          <div class="avatar-circle">
            <i class="fas fa-user"></i>
          </div>
          <div class="graphic-line long"></div>
          <div class="graphic-line dots">•••••</div>
        </div>
      </div>
    </div>
  </div>

  <!-- =========================================
       MAIN AUTH CARD (2 COLUMNS)
  ========================================== -->
  <div class="container auth-content">
    <div class="ht-card auth-main-card">
      <div class="auth-grid">
        
        <!-- LEFT COLUMN: Benefits & Platform Highlights -->
        <div class="auth-benefits-col">
          <h2 class="benefits-title">Your <span class="text-gold">Success</span> Starts Here</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">Stay organized, track your progress and get the best learning experience.</p>

          <!-- Study Dashboard Graphic -->
          <div class="dashboard-preview-wrapper">
            <div class="preview-dots-bg" aria-hidden="true"></div>
            <div class="preview-graphic">
              <div class="chair-icon"><i class="fas fa-chair"></i></div>
              <div class="laptop-box">
                <div class="laptop-screen">
                  <i class="fas fa-chart-line"></i>
                </div>
              </div>
              <div class="desk-books">
                <span class="book b1"></span>
                <span class="book b2"></span>
              </div>
            </div>
          </div>

          <!-- Feature Bullets -->
          <ul class="benefits-list">
            <li>
              <div class="benefit-icon benefit-icon--blue">
                <i class="fas fa-book-open"></i>
              </div>
              <span>Access your test series and courses</span>
            </li>
            <li>
              <div class="benefit-icon benefit-icon--gold">
                <i class="fas fa-chart-line"></i>
              </div>
              <span>Track performance and progress</span>
            </li>
            <li>
              <div class="benefit-icon benefit-icon--green">
                <i class="fas fa-cloud-download-alt"></i>
              </div>
              <span>Manage orders and downloads</span>
            </li>
            <li>
              <div class="benefit-icon benefit-icon--purple">
                <i class="fas fa-star"></i>
              </div>
              <span>Get personalized recommendations</span>
            </li>
          </ul>
        </div>

        <!-- RIGHT COLUMN: Sign In Form -->
        <div class="auth-form-col">
          <div class="auth-card-header">
            <div class="auth-card-icon">
              <i class="fas fa-user"></i>
            </div>
            <div>
              <h3 class="auth-card-title">Sign In</h3>
              <p class="auth-card-desc">Enter your credentials to access your account</p>
            </div>
          </div>

          <form class="auth-form" action="#" method="POST" onsubmit="event.preventDefault();">
            <!-- Email Field -->
            <div class="ht-form-group">
              <label class="ht-label">Email Address</label>
              <div class="input-icon-wrapper">
                <i class="far fa-envelope input-icon"></i>
                <input type="email" class="ht-input" placeholder="you@example.com" required />
              </div>
            </div>

            <!-- Password Field -->
            <div class="ht-form-group">
              <div class="label-row">
                <label class="ht-label">Password</label>
                <a href="{{ route('forgot-password') }}" class="forgot-link">Forgot Password?</a>
              </div>
              <div class="input-icon-wrapper">
                <i class="fas fa-lock input-icon"></i>
                <input type="password" id="passwordInput" class="ht-input" placeholder="Enter your password" required />
                <button type="button" class="password-toggle" aria-label="Toggle password visibility">
                  <i class="far fa-eye-slash"></i>
                </button>
              </div>
            </div>

            <!-- Remember Me Row -->
            <div class="form-options">
              <label class="checkbox-container">
                <input type="checkbox" checked />
                <span class="checkmark"></span>
                <span class="checkbox-label">Remember me</span>
              </label>
            </div>

            <!-- Submit Button -->
            <button type="submit" class="ht-btn-primary">
              <i class="fas fa-user"></i> Sign In
            </button>

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

            <!-- Social Logins -->
            <div class="social-login-grid">
              <button type="button" class="social-btn">
                <svg class="social-icon" viewBox="0 0 24 24">
                  <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                  <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                  <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.06H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.94l2.85-2.22.81-.63z"/>
                  <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z"/>
                </svg>
                <span>Continue with Google</span>
              </button>

              <button type="button" class="social-btn">
                <i class="fab fa-facebook-f social-icon facebook"></i>
                <span>Continue with Facebook</span>
              </button>
            </div>

            <!-- Footer Account Switch Link -->
            <p class="auth-footer-text">
              Don't have an account? <a href="{{ route('register') }}" class="create-acc-link">Create Account</a>
            </p>
          </form>
        </div>

      </div>
    </div>

    <!-- =========================================
         BOTTOM TRUST FEATURES BAR
  ========================================== -->
    <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