@extends('layouts.app')

@section('title', 'Documentation - ' . config('app.name', 'Laravel 2FA'))

@section('content')
  <div class="max-w-6xl mx-auto">
    <!-- Hero Section -->
    <div class="text-center mb-12">
      <div class="w-20 h-20 bg-white rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg glow-effect">
        <i class="fas fa-book text-purple-600 text-3xl"></i>
      </div>
      <h1 class="text-4xl font-bold text-white mb-4 text-shadow">
        Laravel 2FA Documentation
      </h1>
      <p class="text-xl text-white text-shadow-sm max-w-3xl mx-auto">
        Complete guide to implementing and using the Laravel 2FA authentication system
      </p>
    </div>

    <!-- Quick Navigation -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
      <a href="{{ route('tutorial') }}"
        class="glass-effect rounded-xl p-6 hover:bg-opacity-25 transition-all duration-300 transform hover:-translate-y-1">
        <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mb-4">
          <i class="fas fa-graduation-cap text-white text-xl"></i>
        </div>
        <h3 class="text-white font-semibold mb-2 text-shadow-sm">Getting Started</h3>
        <p class="text-white text-shadow-sm text-sm">Step-by-step tutorial for new developers</p>
      </a>

      <a href="{{ route('api.docs') }}"
        class="glass-effect rounded-xl p-6 hover:bg-opacity-25 transition-all duration-300 transform hover:-translate-y-1">
        <div class="w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center mb-4">
          <i class="fas fa-code text-white text-xl"></i>
        </div>
        <h3 class="text-white font-semibold mb-2 text-shadow-sm">API Reference</h3>
        <p class="text-white text-shadow-sm text-sm">Complete API documentation and examples</p>
      </a>

      <a href="#features"
        class="glass-effect rounded-xl p-6 hover:bg-opacity-25 transition-all duration-300 transform hover:-translate-y-1">
        <div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center mb-4">
          <i class="fas fa-star text-white text-xl"></i>
        </div>
        <h3 class="text-white font-semibold mb-2 text-shadow-sm">Features</h3>
        <p class="text-white text-shadow-sm text-sm">Explore all available features</p>
      </a>
    </div>

    <!-- Features Section -->
    <div id="features" class="mb-12">
      <h2 class="text-3xl font-bold text-white mb-8 text-shadow text-center">Features Overview</h2>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- TOTP Authentication -->
        <div class="glass-effect rounded-xl p-6">
          <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mb-4">
            <i class="fas fa-clock text-white text-xl"></i>
          </div>
          <h3 class="text-white font-semibold mb-3 text-shadow-sm">TOTP Authentication</h3>
          <p class="text-white text-shadow-sm text-sm mb-4">
            Time-based One-Time Password (TOTP) implementation compatible with Google Authenticator, Authy, and other TOTP
            apps.
          </p>
          <ul class="text-white text-shadow-sm text-sm space-y-1">
            <li>• 6-digit codes with 30-second intervals</li>
            <li>• ±1 time step validation window</li>
            <li>• HMAC-SHA1 algorithm</li>
          </ul>
        </div>

        <!-- Custom Encryption -->
        <div class="glass-effect rounded-xl p-6">
          <div class="w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center mb-4">
            <i class="fas fa-lock text-white text-xl"></i>
          </div>
          <h3 class="text-white font-semibold mb-3 text-shadow-sm">AES-256-CBC Encryption</h3>
          <p class="text-white text-shadow-sm text-sm mb-4">
            Custom encryption for TOTP secrets using AES-256-CBC with separate encryption keys stored in environment
            variables.
          </p>
          <ul class="text-white text-shadow-sm text-sm space-y-1">
            <li>• AES-256-CBC encryption</li>
            <li>• Base64 encoding</li>
            <li>• Separate key and IV storage</li>
          </ul>
        </div>

        <!-- QR Code Generation -->
        <div class="glass-effect rounded-xl p-6">
          <div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center mb-4">
            <i class="fas fa-qrcode text-white text-xl"></i>
          </div>
          <h3 class="text-white font-semibold mb-3 text-shadow-sm">QR Code Generation</h3>
          <p class="text-white text-shadow-sm text-sm mb-4">
            Automatic QR code generation for easy setup with authenticator apps using the endroid/qr-code library.
          </p>
          <ul class="text-white text-shadow-sm text-sm space-y-1">
            <li>• High error correction</li>
            <li>• Customizable size</li>
            <li>• Base64 PNG output</li>
          </ul>
        </div>

        <!-- Laravel Sanctum Integration -->
        <div class="glass-effect rounded-xl p-6">
          <div class="w-12 h-12 bg-yellow-500 rounded-lg flex items-center justify-center mb-4">
            <i class="fas fa-key text-white text-xl"></i>
          </div>
          <h3 class="text-white font-semibold mb-3 text-shadow-sm">Laravel Sanctum</h3>
          <p class="text-white text-shadow-sm text-sm mb-4">
            Full integration with Laravel Sanctum for API token authentication and session management.
          </p>
          <ul class="text-white text-shadow-sm text-sm space-y-1">
            <li>• API token authentication</li>
            <li>• Session-based auth</li>
            <li>• Middleware protection</li>
          </ul>
        </div>

        <!-- Modern UI -->
        <div class="glass-effect rounded-xl p-6">
          <div class="w-12 h-12 bg-pink-500 rounded-lg flex items-center justify-center mb-4">
            <i class="fas fa-palette text-white text-xl"></i>
          </div>
          <h3 class="text-white font-semibold mb-3 text-shadow-sm">Liquid Glass UI</h3>
          <p class="text-white text-shadow-sm text-sm mb-4">
            Beautiful, modern interface with glass morphism effects, animations, and responsive design.
          </p>
          <ul class="text-white text-shadow-sm text-sm space-y-1">
            <li>• Glass morphism effects</li>
            <li>• Responsive design</li>
            <li>• Smooth animations</li>
          </ul>
        </div>

        <!-- Security Features -->
        <div class="glass-effect rounded-xl p-6">
          <div class="w-12 h-12 bg-red-500 rounded-lg flex items-center justify-center mb-4">
            <i class="fas fa-shield-alt text-white text-xl"></i>
          </div>
          <h3 class="text-white font-semibold mb-3 text-shadow-sm">Security Features</h3>
          <p class="text-white text-shadow-sm text-sm mb-4">
            Comprehensive security measures including middleware protection and secure session handling.
          </p>
          <ul class="text-white text-shadow-sm text-sm space-y-1">
            <li>• 2FA middleware</li>
            <li>• Session verification</li>
            <li>• Secure token handling</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- Architecture Section -->
    <div class="mb-12">
      <h2 class="text-3xl font-bold text-white mb-8 text-shadow text-center">System Architecture</h2>

      <div class="glass-effect rounded-xl p-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <div>
            <h3 class="text-white font-semibold mb-4 text-shadow-sm text-xl">Backend Components</h3>
            <div class="space-y-4">
              <div class="flex items-start space-x-3">
                <div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
                  <i class="fas fa-cog text-white text-sm"></i>
                </div>
                <div>
                  <h4 class="text-white font-medium text-shadow-sm">TOTPService</h4>
                  <p class="text-white text-shadow-sm text-sm">Handles TOTP generation and validation</p>
                </div>
              </div>

              <div class="flex items-start space-x-3">
                <div class="w-8 h-8 bg-green-500 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
                  <i class="fas fa-lock text-white text-sm"></i>
                </div>
                <div>
                  <h4 class="text-white font-medium text-shadow-sm">CustomEncryptor</h4>
                  <p class="text-white text-shadow-sm text-sm">AES-256-CBC encryption for secrets</p>
                </div>
              </div>

              <div class="flex items-start space-x-3">
                <div class="w-8 h-8 bg-purple-500 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
                  <i class="fas fa-qrcode text-white text-sm"></i>
                </div>
                <div>
                  <h4 class="text-white font-medium text-shadow-sm">QRCodeService</h4>
                  <p class="text-white text-shadow-sm text-sm">QR code generation for setup</p>
                </div>
              </div>

              <div class="flex items-start space-x-3">
                <div class="w-8 h-8 bg-yellow-500 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
                  <i class="fas fa-shield-alt text-white text-sm"></i>
                </div>
                <div>
                  <h4 class="text-white font-medium text-shadow-sm">Middleware</h4>
                  <p class="text-white text-shadow-sm text-sm">2FA verification enforcement</p>
                </div>
              </div>
            </div>
          </div>

          <div>
            <h3 class="text-white font-semibold mb-4 text-shadow-sm text-xl">Frontend Components</h3>
            <div class="space-y-4">
              <div class="flex items-start space-x-3">
                <div class="w-8 h-8 bg-pink-500 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
                  <i class="fas fa-palette text-white text-sm"></i>
                </div>
                <div>
                  <h4 class="text-white font-medium text-shadow-sm">Liquid Glass UI</h4>
                  <p class="text-white text-shadow-sm text-sm">Modern glass morphism design</p>
                </div>
              </div>

              <div class="flex items-start space-x-3">
                <div class="w-8 h-8 bg-indigo-500 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
                  <i class="fas fa-mobile-alt text-white text-sm"></i>
                </div>
                <div>
                  <h4 class="text-white font-medium text-shadow-sm">Responsive Design</h4>
                  <p class="text-white text-shadow-sm text-sm">Mobile-first approach</p>
                </div>
              </div>

              <div class="flex items-start space-x-3">
                <div class="w-8 h-8 bg-teal-500 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
                  <i class="fas fa-bolt text-white text-sm"></i>
                </div>
                <div>
                  <h4 class="text-white font-medium text-shadow-sm">Alpine.js</h4>
                  <p class="text-white text-shadow-sm text-sm">Interactive components</p>
                </div>
              </div>

              <div class="flex items-start space-x-3">
                <div class="w-8 h-8 bg-orange-500 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
                  <i class="fas fa-css3-alt text-white text-sm"></i>
                </div>
                <div>
                  <h4 class="text-white font-medium text-shadow-sm">Tailwind CSS</h4>
                  <p class="text-white text-shadow-sm text-sm">Utility-first styling</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Quick Start -->
    <div class="mb-12">
      <h2 class="text-3xl font-bold text-white mb-8 text-shadow text-center">Quick Start</h2>

      <div class="glass-effect rounded-xl p-8">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
          <div>
            <h3 class="text-white font-semibold mb-4 text-shadow-sm">For Users</h3>
            <ol class="text-white text-shadow-sm space-y-3">
              <li class="flex items-start space-x-3">
                <span
                  class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 mt-0.5">1</span>
                <span>Login to your account</span>
              </li>
              <li class="flex items-start space-x-3">
                <span
                  class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 mt-0.5">2</span>
                <span>Navigate to 2FA Settings</span>
              </li>
              <li class="flex items-start space-x-3">
                <span
                  class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 mt-0.5">3</span>
                <span>Scan QR code with authenticator app</span>
              </li>
              <li class="flex items-start space-x-3">
                <span
                  class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 mt-0.5">4</span>
                <span>Enter 6-digit code to confirm</span>
              </li>
            </ol>
          </div>

          <div>
            <h3 class="text-white font-semibold mb-4 text-shadow-sm">For Developers</h3>
            <ol class="text-white text-shadow-sm space-y-3">
              <li class="flex items-start space-x-3">
                <span
                  class="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 mt-0.5">1</span>
                <span>Clone the repository</span>
              </li>
              <li class="flex items-start space-x-3">
                <span
                  class="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 mt-0.5">2</span>
                <span>Configure environment variables</span>
              </li>
              <li class="flex items-start space-x-3">
                <span
                  class="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 mt-0.5">3</span>
                <span>Run migrations and seeders</span>
              </li>
              <li class="flex items-start space-x-3">
                <span
                  class="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0 mt-0.5">4</span>
                <span>Start the development server</span>
              </li>
            </ol>
          </div>
        </div>

        <div class="mt-8 text-center">
          <a href="{{ route('tutorial') }}"
            class="inline-flex items-center px-6 py-3 bg-white text-purple-600 rounded-lg font-semibold hover:bg-gray-50 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
            <i class="fas fa-graduation-cap mr-2"></i>
            Start Tutorial
          </a>
        </div>
      </div>
    </div>
  </div>
@endsection