{% extends 'base.html' %}
{% load static %}

{% block content %}
<!-- Hero Section -->
<section class="hero-section py-5 d-flex align-items-center" style="min-height: 80vh; background: linear-gradient(135deg, #F8F9FA 0%, #E9ECEF 100%);">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-6">
        <span class="badge bg-fashion mb-3 px-3 py-2 text-uppercase ls-1" style="background-color: var(--accent-blue);">SaaS de Moda AI</span>
        <h1 class="display-3 fw-bold mb-4">Transforme suas peças em <span class="fst-italic">mockups reais</span> em minutos.</h1>
        <p class="lead mb-5 text-muted">Crie fotos profissionais para seu catálogo e redes sociais sem precisar de modelos ou estúdios caros. Tecnologia AI de alta fidelidade para o mercado brasileiro.</p>
        <div class="d-flex gap-3">
          <a href="{% url 'create_mockup' %}" class="btn btn-fashion btn-lg">Começar Agora</a>
          <a href="#features" class="btn btn-outline-dark btn-lg border-2" style="border-radius: 0;">Ver Exemplos</a>
        </div>
      </div>
      <div class="col-lg-6 mt-5 mt-lg-0">
        <div class="position-relative">
          <div class="glass-card p-4 rounded-0 shadow-lg">
             <img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" class="img-fluid" alt="Fashion Mockup Example">
             <div class="position-absolute bottom-0 start-0 m-4 p-3 bg-white shadow-sm border-start border-primary border-4">
                <p class="mb-0 fw-bold">Gerado por AI</p>
                <small class="text-muted">Modelo: Feminino, 25 anos, Atlético</small>
             </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Features Section -->
<section id="features" class="py-5 bg-white">
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="display-5 fw-bold mb-3">Como Funciona</h2>
      <p class="text-muted">Simples, rápido e ultra-realista.</p>
    </div>
    <div class="row g-4 text-center">
      <div class="col-md-4">
        <div class="p-4">
          <div class="mb-4 d-inline-block p-3 bg-light">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-cloud-upload" viewBox="0 0 16 16">
              <path fill-rule="evenodd" d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"/>
              <path fill-rule="evenodd" d="M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3z"/>
            </svg>
          </div>
          <h3 class="h4 mb-3">1. Upload</h3>
          <p class="text-muted">Suba as fotos das suas peças reais. Sem truques, apenas a sua criação.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="p-4">
          <div class="mb-4 d-inline-block p-3 bg-light">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-person-gear" viewBox="0 0 16 16">
              <path d="M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm.256 7a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Zm3.637-1.401.568.094a1.095 1.095 0 0 0 1.178-.71l.241-.734a1.096 1.096 0 0 0-.49-1.287l-.46-.285a1.108 1.108 0 0 0-1.358.118l-.406.337a1.094 1.094 0 0 1-1.319.102l-.317-.184a1.1 1.1 0 0 0-1.296.11l-.427.354a1.094 1.094 0 0 0-.27 1.344l.205.518c.113.284.09.601-.063.867l-.234.408a1.1 1.1 0 0 0 .157 1.316l.41.432c.311.33.82.4 1.21.162l.462-.285a1.109 1.109 0 0 1 1.315.012l.422.306c.35.253.84.223 1.155-.072l.413-.39c.315-.297.357-.79.102-1.134l-.274-.368a1.094 1.094 0 0 1-.036-1.289Z"/>
            </svg>
          </div>
          <h3 class="h4 mb-3">2. Customize</h3>
          <p class="text-muted">Escolha o modelo, idade, tom de pele e biotipo que melhor representa sua marca.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="p-4">
          <div class="mb-4 d-inline-block p-3 bg-light">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-images" viewBox="0 0 16 16">
              <path d="M4.502 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
              <path d="M14.002 13a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2V5A2 2 0 0 1 2.002 3a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2zM14 2a1 1 0 0 0-1-1h-10a1 1 0 0 0-1 1v8l2.646-2.354a.5.5 0 0 1 .63-.062l2.66 1.773 3.71-3.71a.5.5 0 0 1 .706 0L14 9.293V2z"/>
            </svg>
          </div>
          <h3 class="h4 mb-3">3. Gere e Baixe</h3>
          <p class="text-muted">Em minutos, receba 3 mockups (frente, lado e costas) prontos para uso em HD.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- CTA Section -->
<section class="py-5 bg-dark text-white">
  <div class="container text-center py-4">
    <h2 class="display-6 fw-bold mb-4 brand-font">Pronto para elevar sua marca?</h2>
    <p class="mb-5 opacity-75">Junte-se a centenas de marcas brasileiras que já usam FashionMock AI.</p>
    <a href="{% url 'create_mockup' %}" class="btn btn-light btn-lg border-0 px-5" style="border-radius: 0; color: black; font-weight: 600;">CRIAR MEU PRIMEIRO MOCKUP</a>
  </div>
</section>
{% endblock %}
