{% extends 'base.html' %}

{% block counter %}
<div class="relative z-10 w-full max-w-6xl px-4 flex flex-col lg:flex-row gap-8">
  <!-- Left Column: Branding & Information -->
  <div class="flex-1 bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 rounded-2xl shadow-2xl overflow-hidden p-8 flex flex-col">
    <!-- Brand Header -->
    <div class="flex items-center mb-6">
      <div class="bg-gradient-to-br from-indigo-500 to-purple-600 w-12 h-12 rounded-xl flex items-center justify-center shadow-lg mr-4">
        <i class="fas fa-flask text-white text-xl"></i>
      </div>
      <div>
        <h1 class="text-3xl font-bold dark:bg-gradient-to-r dark:from-white dark:to-indigo-200 bg-clip-text dark:text-transparent text-gray-900">Flaskkit</h1>
        <p class="text-sm text-indigo-300 font-medium">The modern Flask project generator</p>
      </div>
    </div>
    
    <!-- Description -->
    <div class="mb-8">
        <p class="text-gray-300 mb-4 text-lg leading-relaxed">
            Flaskkit jumpstarts your Flask apps with a ready-to-use structure so you can focus on building, not setup.
        </p>
        <p class="text-gray-400 text-sm">
            Comes with clean architecture, sane defaults, and key integrations out of the box.
        </p>
    </div>

    <!-- Action Buttons -->
    <div class="grid grid-cols-2 gap-4 mb-8">
      <a href="https://flaskkit-docs.example.com" target="_blank" 
         class="flex items-center justify-center bg-gradient-to-br from-blue-600 to-blue-800 hover:from-blue-500 hover:to-blue-700 text-white py-3 px-4 rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1">
        <i class="fas fa-book mr-2"></i> Documentation
      </a>
      <a href="https://github.com/lahadiyani/Flaskkit" target="_blank" 
        class="flex items-center justify-center bg-gray-200 dark:bg-gradient-to-br dark:from-gray-700 dark:to-gray-900 text-gray-800 dark:text-gray-200 hover:text-gray-900 py-3 px-4 rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1">
        <i class="fab fa-github mr-2"></i> GitHub
      </a>
    </div>
    
    <div class="mt-auto">
      <a href="https://github.com/flaskkit" target="_blank"
        class="inline-flex items-center 
        bg-gray-100 dark:bg-gradient-to-r dark:from-gray-800 dark:to-gray-900 
        border border-gray-300 dark:border-gray-700 
        rounded-full py-2 px-4 text-sm 
        text-gray-700 dark:text-white
        hover:shadow-lg transition-shadow">
        <i class="fas fa-star text-yellow-400 mr-2"></i>
        <span>Star us on GitHub</span>
        <span class="ml-2 bg-gray-300 dark:bg-gray-700 rounded-full px-2 py-1 text-xs text-gray-700 dark:text-white">⭐ 2.4k</span>
      </a>
    </div>
    
    <!-- Social Links -->
    <div class="flex space-x-4 mt-6">
      <a href="https://twitter.com/flaskkit" target="_blank" class="social-icon">
        <i class="fab fa-twitter text-blue-400"></i>
      </a>
      <a href="https://discord.gg/flaskkit" target="_blank" class="social-icon">
        <i class="fab fa-discord text-indigo-400"></i>
      </a>
      <a href="https://linkedin.com/company/flaskkit" target="_blank" class="social-icon">
        <i class="fab fa-linkedin-in text-blue-500"></i>
      </a>
    </div>
  </div>

  <!-- Right Column: Counter Demo -->
  <div class="flex-1">
    <!-- Demo Header -->
    <div class="mb-6 text-center">
      <h2 class="text-2xl font-bold bg-gradient-to-r from-green-400 to-cyan-400 bg-clip-text text-transparent mb-2">
        Build Flask apps in seconds, not hours 🚀
      </h2>
      <p class="text-gray-400">Try our interactive demo below</p>
    </div>
    
    <!-- Counter Card -->
    <div class="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 rounded-2xl shadow-2xl overflow-hidden">
      <!-- Theme Toggle -->
      <div class="flex justify-end p-4 border-b border-gray-700">
        <div class="theme-toggle flex bg-gray-800 rounded-full p-1">
          <button id="light-mode" class="toggle-btn" title="Light Mode">
            <i class="fas fa-sun"></i>
          </button>
          <button id="dark-mode" class="toggle-btn active" title="Dark Mode">
            <i class="fas fa-moon"></i>
          </button>
        </div>
      </div>
      
      <!-- Counter Display -->
      <div class="py-10 px-6">
        <div id="counter" class="text-8xl font-black text-center mb-8 tracking-tighter text-gray-900 dark:bg-gradient-to-r dark:from-white dark:to-indigo-200 bg-clip-text dark:text-transparent drop-shadow-lg transition-all duration-300">0</div>
        
        <!-- Control Buttons -->
        <div class="grid grid-cols-4 gap-4">
          <button id="decrement" 
            class="bg-gradient-to-br from-red-700 to-red-900 hover:from-red-600 hover:to-red-800 text-white p-4 rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-red-500/50 flex flex-col items-center">
            <i class="fas fa-minus text-xl mb-1"></i>
            <span class="text-xs opacity-80">Decrease</span>
          </button>
          
          <button id="reset" 
            class="bg-gray-700 hover:bg-gray-800 
            text-white dark:text-white 
            p-4 rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-gray-500/50 flex flex-col items-center">
            <i class="fas fa-undo text-xl mb-1"></i>
            <span class="text-xs opacity-80">Reset</span>
          </button>
          
          <button id="increment" 
            class="bg-gradient-to-br from-green-700 to-green-900 hover:from-green-600 hover:to-green-800 text-white p-4 rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-green-500/50 flex flex-col items-center">
            <i class="fas fa-plus text-xl mb-1"></i>
            <span class="text-xs opacity-80">Increase</span>
          </button>
          
          <button id="randomize" 
            class="bg-gradient-to-br from-purple-700 to-purple-900 hover:from-purple-600 hover:to-purple-800 text-white p-4 rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-purple-500/50 flex flex-col items-center">
            <i class="fas fa-dice text-xl mb-1"></i>
            <span class="text-xs opacity-80">Randomize</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}