{% extends 'crochet/base.html' %}
{% load i18n %}

{% block title %}{% trans 'Crochet — Crea y comparte tus patrones' %}{% endblock %}

{% block extra_css %}
  {% include 'crochet/_platform_assets.html' %}
{% endblock %}

{% block content %}
  <main>
    <div class="hero py-16 px-4">
      <div class="hero-content text-center">
        <div class="max-w-xl">
          <h1 class="text-4xl font-bold">{% trans 'Crea y comparte tus patrones de crochet' %}</h1>
          <p class="py-6 text-lg text-base-content/70">
            {% trans 'Diseña tus patrones con un editor visual, expórtalos a PDF y compártelos con quien quieras, sin instalar nada.' %}
          </p>
          <div class="flex flex-wrap justify-center gap-4">
            {% if user.is_authenticated %}
              <a href="{% url 'crochet:account_home' %}" class="btn btn-primary btn-lg">{% trans 'Ir a mis patrones' %}</a>
            {% else %}
              <a href="{% url 'crochet:register' %}" class="btn btn-primary btn-lg">{% trans 'Crear cuenta gratis' %}</a>
              <a href="{% url 'crochet:login' %}" class="btn btn-outline btn-lg">{% trans 'Iniciar sesión' %}</a>
            {% endif %}
          </div>
        </div>
      </div>
    </div>

    <div class="max-w-4xl mx-auto px-4 pb-16 grid gap-6 sm:grid-cols-3">
      <div class="card bg-base-100 shadow border border-base-300">
        <div class="card-body items-center text-center">
          <span class="text-4xl mb-2">✏️</span>
          <h2 class="card-title text-lg">{% trans 'Editor visual' %}</h2>
          <p class="text-sm text-base-content/70">
            {% trans 'Añade títulos, instrucciones, materiales e imágenes por secciones, sin complicarte con el formato.' %}
          </p>
        </div>
      </div>
      <div class="card bg-base-100 shadow border border-base-300">
        <div class="card-body items-center text-center">
          <span class="text-4xl mb-2">📄</span>
          <h2 class="card-title text-lg">{% trans 'Exporta a PDF' %}</h2>
          <p class="text-sm text-base-content/70">
            {% trans 'Descarga tu patrón listo para imprimir, con tu propia portada, colores y tipografía.' %}
          </p>
        </div>
      </div>
      <div class="card bg-base-100 shadow border border-base-300">
        <div class="card-body items-center text-center">
          <span class="text-4xl mb-2">🔗</span>
          <h2 class="card-title text-lg">{% trans 'Comparte con un enlace' %}</h2>
          <p class="text-sm text-base-content/70">
            {% trans 'Envía tu patrón a quien quieras con un enlace de solo lectura: nadie más podrá editarlo.' %}
          </p>
        </div>
      </div>
    </div>
  </main>
{% endblock %}