{% extends "base.html" %}
{% block title %}Home - zero2prod{% endblock %}
{% block content %}
  <div class="max-w-4xl mx-auto">
    <div class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-lg shadow-lg text-white p-8 mb-8">
      <div class="max-w-3xl">
        <h1 class="text-4xl font-bold mb-4">zero2prod</h1>
        <p class="text-xl text-blue-100 mb-6">
          Welcome to our newsletter! Stay updated on our latest projects and
          thoughts. Unsubscribe at any time.
        </p>
        <div class="flex flex-col sm:flex-row gap-4">
          <a href="#newsletter-signup"
             class="bg-white text-blue-600 hover:bg-gray-100 font-semibold py-3 px-6 rounded-md transition-colors text-center">
            Subscribe
          </a>
          <a href="https://gitea.alphonsepaix.xyz/alphonse/zero2prod"
             target="_blank"
             class="border border-white text-white hover:bg-white hover:text-blue-600 font-semibold py-3 px-6 rounded-md transition-colors text-center">
            View code
          </a>
        </div>
      </div>
    </div>
    <div class="grid md:grid-cols-3 gap-6 mb-8">
      <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200">
        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-blue-600"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
        </div>
        <h3 class="text-lg font-semibold text-gray-900 mb-2">Idempotent</h3>
        <p class="text-gray-600 text-sm">
          Smart duplicate prevention ensures you'll never receive the same email
          twice.
        </p>
      </div>
      <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200">
        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-green-600"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
          </svg>
        </div>
        <h3 class="text-lg font-semibold text-gray-900 mb-2">Privacy first</h3>
        <p class="text-gray-600 text-sm">
          Zero spam, zero tracking, zero data sharing. Your email stays private
          and secure. Unsubscribe at any time.
        </p>
      </div>
      <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200">
        <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-purple-600"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
          </svg>
        </div>
        <h3 class="text-lg font-semibold text-gray-900 mb-2">Quality content</h3>
        <p class="text-gray-600 text-sm">
          Curated insights on Rust backend development, performance tips, and
          production war stories.
        </p>
      </div>
    </div>
    <div id="newsletter-signup"
         class="bg-white rounded-lg shadow-md p-8 border border-gray-200">
      <div class="max-w-2xl mx-auto text-center">
        <h2 class="text-2xl font-bold text-gray-900 mb-4">Stay updated</h2>
        <p class="text-gray-600 mb-6">Subscribe to our newsletter to get the latest updates.</p>
        <form hx-post="/subscriptions"
              hx-target="#subscribe-messages"
              hx-swap="innerHTML"
              class="max-w-md mx-auto">
          <div class="flex flex-col sm:flex-row gap-3">
            <input type="email"
                   name="email"
                   placeholder="you@example.com"
                   required
                   class="flex-1 px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
            <button type="submit"
                    class="bg-blue-600 text-white hover:bg-blue-700 font-medium py-3 px-6 rounded-md transition-colors">
              Subscribe
            </button>
          </div>
          <div id="subscribe-messages" class="mt-4"></div>
        </form>
      </div>
    </div>
    <div class="mt-8 bg-gray-50 rounded-lg p-6">
      <h3 class="text-lg font-semibold text-gray-900 mb-4 text-center">Stats</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
        <div>
          <div class="text-2xl font-bold text-blue-600" id="subscriber-count">2</div>
          <div class="text-sm text-gray-600">subscribers</div>
        </div>
        <div>
          <div>
            <div class="text-2xl font-bold text-orange-600">23</div>
            <div class="text-sm text-gray-600">emails sent</div>
          </div>
        </div>
        <div>
          <div class="text-2xl font-bold text-green-600">0</div>
          <div class="text-sm text-gray-600">email opened</div>
        </div>
        <div>
          <div class="text-2xl font-bold text-purple-600">3</div>
          <div class="text-sm text-gray-600">issues delivered</div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}