{% extends layout | default('lila/base.html') %}
{% block title %}{{ title }}{% endblock %}

{% block content %}
<main class=" ">
  <!-- Hero Section -->
  <section class="max-w-6xl mx-auto px-4 py-16 flex flex-col items-center justify-center text-center">
    <div class="relative mb-6 group">
      <div
        class="absolute -inset-1 bg-gradient-to-r from-primary to-secondary rounded-full blur opacity-40 group-hover:opacity-70 transition duration-1000 group-hover:duration-200 animate-pulse">
      </div>
      <img src="{{ public('img/lila.png') }}" alt="Lila Framework" width="120" height="120"
        class="relative rounded-full shadow-material bg-white p-2 transform hover:scale-105 transition-transform duration-300" />
    </div>

    <h1 class="text-lila animate-fade-in">
      {{ translate['Welcome to the Lila Framework'] }}
    </h1>

    <p class="max-w-2xl text-lg md:text-xl text-slate-600 dark:text-slate-400 mb-8 leading-relaxed">
      {{ translate['Hi'] }}! {{ translate['A_modern_Starlette'] }}.
    </p>

    <!-- Call to Actions -->
    <div class="flex flex-wrap gap-4 justify-center mb-12">
      <a href="/docs" class="btn-primary">
        <span>📚</span>
        {{ translate['Go to docs'] }}
      </a>
      <a href="/changelogs" class="btn-secondary">
        <span>📝</span>
        {{ translate['changelogs'] }}
      </a>
      <a href="/markdown" class="btn-secondary">
        <span>📄</span>
        Markdown
      </a>
      <a href="/debug/" target="_blank" class="btn-secondary">
        <span>🐛</span>
        Debug
      </a>
    </div>

    <!-- Info Box -->
    <div class="card w-full max-w-4xl mb-16 text-left">
      <p class="text-slate-600 dark:text-slate-400 leading-relaxed m-0 flex items-start gap-2 px-2.5 py-2.5">
        <span class="text-xl">💡</span>
        <span>
          {{ translate['also_left_in'] }} <code
            class="px-1.5 py-0.5 bg-slate-100 dark:bg-slate-900 rounded font-mono text-primary font-bold">app/routes/api.py</code>
          {{ translate['and_in'] }} <code
            class="px-1.5 py-0.5 bg-slate-100 dark:bg-slate-900 rounded font-mono text-primary font-bold">app/routes/routes.py</code>,
          {{ translate['examples_of_how_to_use'] }} {{ translate['routes_queries_crud'] }} ({{
          translate['crud_with_30_lines'] }}, {{ translate['with_middlewares_validations'] }}, {{ translate['and_more']
          }}!)
        </span>
      </p>
    </div>

    <!-- Documentation Grid -->
    <div class="w-full max-w-4xl text-left mb-16">
      <h1 class="text-2xl font-black tracking-tight mb-6 flex justify-center items-center gap-2 ">
        <span>📖</span> Framework Documentation
      </h1>
      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        <a href="https://seip25.github.io/Lila/docs/install.html" target="_blank"
          class="p-4 card hover:border-primary dark:hover:border-primary shadow-sm hover:shadow-material transition-all duration-200 group ">
          <h4 class="font-bold group-hover:text-primary transition-colors">Installation</h4>
          <p class="text-xs text-slate-500 mt-1">Get up and running in minutes.</p>
        </a>
        <a href="https://seip25.github.io/Lila/docs/routes.html" target="_blank"
          class="p-4 card hover:border-primary dark:hover:border-primary shadow-sm hover:shadow-material transition-all duration-200 group ">
          <h4 class="font-bold group-hover:text-primary transition-colors">Routes</h4>
          <p class="text-xs text-slate-500 mt-1">HTTP, WebSocket & localized routes.</p>
        </a>
        <a href="https://seip25.github.io/Lila/docs/static.html" target="_blank"
          class="p-4 card hover:border-primary dark:hover:border-primary shadow-sm hover:shadow-material transition-all duration-200 group ">
          <h4 class="font-bold group-hover:text-primary transition-colors">Static Files</h4>
          <p class="text-xs text-slate-500 mt-1">Optimal assets processing and loading.</p>
        </a>
        <a href="https://seip25.github.io/Lila/docs/templates.html" target="_blank"
          class="p-4 card hover:border-primary dark:hover:border-primary shadow-sm hover:shadow-material transition-all duration-200 group ">
          <h4 class="font-bold group-hover:text-primary transition-colors">Templates</h4>
          <p class="text-xs text-slate-500 mt-1">Jinja2 rendering, MD pages, & Vite HMR.</p>
        </a>
        <a href="https://seip25.github.io/Lila/docs/templates.html" target="_blank"
          class="p-4 card hover:border-primary dark:hover:border-primary shadow-sm hover:shadow-material transition-all duration-200 group ">
          <h4 class="font-bold group-hover:text-primary transition-colors">Vite &amp; Tailwind</h4>
          <p class="text-xs text-slate-500 mt-1">Full compiled CSS & JS pipeline.</p>
        </a>
        <a href="https://seip25.github.io/Lila/docs/session.html" target="_blank"
          class="p-4 card hover:border-primary dark:hover:border-primary shadow-sm hover:shadow-material transition-all duration-200 group ">
          <h4 class="font-bold group-hover:text-primary transition-colors">Session</h4>
          <p class="text-xs text-slate-500 mt-1">Signed cookie sessions made easy.</p>
        </a>
        <a href="https://seip25.github.io/Lila/docs/upload.html" target="_blank"
          class="p-4 card hover:border-primary dark:hover:border-primary shadow-sm hover:shadow-material transition-all duration-200 group ">
          <h4 class="font-bold group-hover:text-primary transition-colors">File Uploads</h4>
          <p class="text-xs text-slate-500 mt-1">Async file saving & image optimization.</p>
        </a>
        <a href="https://seip25.github.io/Lila/docs/markdown.html" target="_blank"
          class="p-4 card hover:border-primary dark:hover:border-primary shadow-sm hover:shadow-material transition-all duration-200 group ">
          <h4 class="font-bold group-hover:text-primary transition-colors">Markdown/HTML</h4>
          <p class="text-xs text-slate-500 mt-1">Render documentation on-the-fly.</p>
        </a>
        <a href="https://seip25.github.io/Lila/docs/locales.html" target="_blank"
          class="p-4 card hover:border-primary dark:hover:border-primary shadow-sm hover:shadow-material transition-all duration-200 group ">
          <h4 class="font-bold group-hover:text-primary transition-colors">Internationalization</h4>
          <p class="text-xs text-slate-500 mt-1">Smart localization and switcher.</p>
        </a>
        <a href="https://seip25.github.io/Lila/docs/models.html" target="_blank"
          class="p-4 card hover:border-primary dark:hover:border-primary shadow-sm hover:shadow-material transition-all duration-200 group ">
          <h4 class="font-bold group-hover:text-primary transition-colors">Models &amp; ORM</h4>
          <p class="text-xs text-slate-500 mt-1">SQLAlchemy database modeling.</p>
        </a>
        <a href="https://seip25.github.io/Lila/docs/middlewares.html" target="_blank"
          class="p-4 card hover:border-primary dark:hover:border-primary shadow-sm hover:shadow-material transition-all duration-200 group ">
          <h4 class="font-bold group-hover:text-primary transition-colors">Middlewares</h4>
          <p class="text-xs text-slate-500 mt-1">Logging, Security, and Rate-Limiting.</p>
        </a>
        <a href="https://seip25.github.io/Lila/docs/connections.html" target="_blank"
          class="p-4 card hover:border-primary dark:hover:border-primary shadow-sm hover:shadow-material transition-all duration-200 group ">
          <h4 class="font-bold group-hover:text-primary transition-colors">DB Connections</h4>
          <p class="text-xs text-slate-500 mt-1">Supports SQLite, MySQL, and PostgreSQL.</p>
        </a>
        <a href="https://seip25.github.io/Lila/docs/migrations.html" target="_blank"
          class="p-4 card hover:border-primary dark:hover:border-primary shadow-sm hover:shadow-material transition-all duration-200 group ">
          <h4 class="font-bold group-hover:text-primary transition-colors">Migrations</h4>
          <p class="text-xs text-slate-500 mt-1">Manage database schemas with Alembic.</p>
        </a>
        <a href="https://seip25.github.io/Lila/docs/rest_api.html" target="_blank"
          class="p-4 card hover:border-primary dark:hover:border-primary shadow-sm hover:shadow-material transition-all duration-200 group ">
          <h4 class="font-bold group-hover:text-primary transition-colors">REST API CRUD</h4>
          <p class="text-xs text-slate-500 mt-1">Auto-generated backend controllers.</p>
        </a>
        <a href="https://seip25.github.io/Lila/docs/admin.html" target="_blank"
          class="p-4 card hover:border-primary dark:hover:border-primary shadow-sm hover:shadow-material transition-all duration-200 group ">
          <h4 class="font-bold group-hover:text-primary transition-colors">Admin Panel</h4>
          <p class="text-xs text-slate-500 mt-1">Real-time metrics, logs, and tables.</p>
        </a>
        <a href="https://seip25.github.io/Lila/docs/minify.html" target="_blank"
          class="p-4 card hover:border-primary dark:hover:border-primary shadow-sm hover:shadow-material transition-all duration-200 group ">
          <h4 class="font-bold group-hover:text-primary transition-colors">Minify</h4>
          <p class="text-xs text-slate-500 mt-1">HTML, CSS, and JS minifier assets.</p>
        </a>
        <a href="https://seip25.github.io/Lila/docs/production.html" target="_blank"
          class="p-4 card hover:border-primary dark:hover:border-primary shadow-sm hover:shadow-material transition-all duration-200 group ">
          <h4 class="font-bold group-hover:text-primary transition-colors">Production</h4>
          <p class="text-xs text-slate-500 mt-1">Caching configurations and best practices.</p>
        </a>
      </div>
    </div>
  </section>
</main>

<!-- Footer -->
<footer class="py-4 shadow bg-white dark:bg-bg-body dark:border-t dark:border-t-gray-900">
  <div class="max-w-6xl mx-auto px-4 flex flex-col sm:flex-row items-center justify-between gap-4">
    <div class="flex items-center gap-2">
      <a href="?lang=es" class="btn-secondary">
        <span>🇪🇸</span> Español
      </a>
      <a href="?lang=en" class="btn-secondary">
        <span>🇺🇸</span> English
      </a>
    </div>
    <div>
      <a href="https://github.com/seip25/lila" target="_blank"
        class="px-4 py-2 rounded-lg bg-slate-900 dark:bg-slate-200 hover:bg-slate-800 dark:hover:bg-slate-600 text-white font-bold text-sm shadow-material hover:shadow-material-lg transform hover:-translate-y-0.5 transition-all duration-200 flex items-center gap-1.5">
        ⭐ {{ translate['star_on_github'] }}
      </a>
    </div>
  </div>
</footer>
{% endblock %}