{% extends "base.html" %}
{% load i18n %}

{% block head_title %}My App — Home{% endblock %}

{% block content %}

  <!-- ===== Hero section ===== -->
  <section class="bg-gradient-to-br from-slate-900 via-slate-800 to-indigo-900 text-white py-24 px-4">
    <div class="max-w-4xl mx-auto text-center">

      {% if request.user.is_authenticated %}
        <!-- Logged-in hero -->
        <div class="inline-flex items-center gap-2 bg-green-500/20 text-green-300 border border-green-500/30 rounded-full px-4 py-1.5 text-sm font-medium mb-6">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
          </svg>
          Signed in
        </div>
        <h1 class="text-4xl sm:text-5xl font-bold tracking-tight mb-4">
          Welcome back!
        </h1>
        <p class="text-xl text-slate-300 mb-8">
          You're signed in as <span class="text-indigo-300 font-medium">{{ request.user.email }}</span>.
        </p>
        <div class="flex flex-wrap justify-center gap-4">
          <a href="{% url 'mfa_index' %}"
             class="inline-flex items-center gap-2 bg-indigo-600 hover:bg-indigo-500 text-white px-6 py-3 rounded-lg font-semibold transition-colors shadow-lg">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
            </svg>
            Security Settings
          </a>
          <a href="{% url 'account_email' %}"
             class="inline-flex items-center gap-2 bg-slate-700 hover:bg-slate-600 text-white px-6 py-3 rounded-lg font-semibold transition-colors">
            Account &amp; Email
          </a>
        </div>

      {% else %}
        <!-- Logged-out hero -->
        <div class="inline-flex items-center gap-2 bg-indigo-500/20 text-indigo-300 border border-indigo-500/30 rounded-full px-4 py-1.5 text-sm font-medium mb-6">
          Starter Template
        </div>
        <h1 class="text-4xl sm:text-5xl font-bold tracking-tight mb-4">
          Welcome to My App
        </h1>
        <p class="text-xl text-slate-300 mb-8 max-w-2xl mx-auto">
          A solid Django 5.2 starter template with passkey authentication, social login, and a clean, extensible architecture.
        </p>
        <div class="flex flex-wrap justify-center gap-4">
          <a href="{% url 'account_signup' %}"
             class="inline-flex items-center gap-2 bg-indigo-600 hover:bg-indigo-500 text-white px-6 py-3 rounded-lg font-semibold transition-colors shadow-lg">
            Create Account
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
            </svg>
          </a>
          <a href="{% url 'account_login' %}"
             class="inline-flex items-center gap-2 bg-white/10 hover:bg-white/20 text-white border border-white/20 px-6 py-3 rounded-lg font-semibold transition-colors">
            Sign In
          </a>
        </div>
      {% endif %}

    </div>
  </section>

  <!-- ===== Features section ===== -->
  <section class="py-20 px-4 bg-white">
    <div class="max-w-6xl mx-auto">
      <div class="text-center mb-14">
        <h2 class="text-3xl font-bold text-slate-900 mb-3">Built for the modern web</h2>
        <p class="text-lg text-slate-500 max-w-xl mx-auto">Everything you need to launch a production-ready Django application.</p>
      </div>

      <div class="grid sm:grid-cols-3 gap-8">

        <!-- Feature: Secure Login -->
        <div class="bg-slate-50 rounded-2xl p-8 border border-slate-200 hover:border-indigo-300 hover:shadow-md transition-all">
          <div class="inline-flex items-center justify-center h-12 w-12 rounded-xl bg-indigo-100 text-indigo-600 mb-5">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" 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-slate-900 mb-2">Secure Login</h3>
          <p class="text-slate-500 text-sm leading-relaxed">
            Email-based authentication powered by django-allauth. Email verification, password reset, and account management included out of the box.
          </p>
        </div>

        <!-- Feature: Passkey Support -->
        <div class="bg-slate-50 rounded-2xl p-8 border border-slate-200 hover:border-indigo-300 hover:shadow-md transition-all">
          <div class="inline-flex items-center justify-center h-12 w-12 rounded-xl bg-indigo-100 text-indigo-600 mb-5">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
            </svg>
          </div>
          <h3 class="text-lg font-semibold text-slate-900 mb-2">Passkey Support</h3>
          <p class="text-slate-500 text-sm leading-relaxed">
            WebAuthn / FIDO2 passkey login via allauth's MFA module. Users can sign in with biometrics or a hardware key — no password needed.
          </p>
        </div>

        <!-- Feature: Social Sign-In -->
        <div class="bg-slate-50 rounded-2xl p-8 border border-slate-200 hover:border-indigo-300 hover:shadow-md transition-all">
          <div class="inline-flex items-center justify-center h-12 w-12 rounded-xl bg-indigo-100 text-indigo-600 mb-5">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
          </div>
          <h3 class="text-lg font-semibold text-slate-900 mb-2">Social Sign-In</h3>
          <p class="text-slate-500 text-sm leading-relaxed">
            Google and GitHub OAuth preconfigured. Just add your API credentials to <code class="bg-slate-200 px-1 rounded text-xs">.env</code> and social login is live.
          </p>
        </div>

      </div>
    </div>
  </section>

  <!-- ===== Tech stack strip ===== -->
  <section class="bg-slate-900 py-10 px-4">
    <div class="max-w-4xl mx-auto text-center">
      <p class="text-slate-400 text-sm font-medium uppercase tracking-widest mb-4">Tech Stack</p>
      <div class="flex flex-wrap justify-center gap-6 text-slate-300 text-sm font-medium">
        <span class="bg-slate-800 px-4 py-2 rounded-full border border-slate-700">Django 5.2 LTS</span>
        <span class="bg-slate-800 px-4 py-2 rounded-full border border-slate-700">django-allauth 65</span>
        <span class="bg-slate-800 px-4 py-2 rounded-full border border-slate-700">FIDO2 / WebAuthn</span>
        <span class="bg-slate-800 px-4 py-2 rounded-full border border-slate-700">Tailwind CSS</span>
        <span class="bg-slate-800 px-4 py-2 rounded-full border border-slate-700">WhiteNoise</span>
        <span class="bg-slate-800 px-4 py-2 rounded-full border border-slate-700">SQLite → swap-ready</span>
      </div>
    </div>
  </section>

{% endblock %}