{% extends "base/base.html" %}

{% block title %}
    Welcome to lombik
{% endblock %}

{% block content %}

<main class="relative w-full min-h-screen overflow-scroll scroll-smooth">

    <div class="absolute inset-0 -z-10 overflow-hidden">
        <div class="absolute top-[-10rem] left-1/2 -translate-x-1/2 w-[40rem] h-[40rem] bg-primary/5 blur-3xl rounded-full"></div>
    </div>

    <section class="max-w-6xl mx-auto px-6 py-20 flex flex-col items-center text-center gap-10">

        <div class="space-y-6 max-w-3xl">

            <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-zinc-200 dark:border-zinc-500 bg-white/60 dark:bg-zinc-900/40 backdrop-blur text-sm text-zinc-600 dark:text-zinc-300 shadow-sm">
                <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
                Version {{ version }}
            </div>

            <h1 class="text-5xl md:text-6xl font-black tracking-tight text-zinc-800 dark:text-zinc-100 leading-tight">
                Hello there
            </h1>

            <p class="text-lg md:text-xl text-zinc-600 dark:text-zinc-300 leading-relaxed">
                Welcome to <span class="font-semibold text-zinc-800 dark:text-zinc-100">lombik</span>,
                a scaffold engine built on Flask to stay organized, fast track development and ease development.
            </p>

            <div class="flex flex-wrap items-center justify-center gap-4 pt-2">

                <a href="https://www.cleersoftware.com" target="_blank"
                   class="w-40 px-6 py-3 rounded-2xl border border-zinc-300 dark:border-zinc-700 hover:border-primary dark:hover:border-primary transition-all duration-300 text-zinc-700 dark:text-zinc-200">
                    Built by cleer<span class="-mt-1 text-primary">.</span>
                </a>

            </div>

        </div>

        <a href="https://github.com/cleersoftware/lombik"
           target="_blank"
           class="group relative">

            <div class="absolute inset-0 bg-primary/20 blur-2xl rounded-full scale-90 group-hover:scale-100 transition-all duration-500"></div>

            <picture class="relative flex flex-col items-center gap-5">

                <img 
                    class="w-52 h-52 object-contain drop-shadow-2xl group-hover:scale-95 transition-all duration-500"
                    src="{{ url_for('static', filename='icons/icon_512x512.png') }}"
                    alt="Lombik logo"
                >

                <div class="space-y-1">
                    <p class="text-sm text-zinc-500 dark:text-zinc-400">
                        MIT licensed · Lightweight · Flask powered
                    </p>
                </div>

            </picture>

        </a>

        <!-- features -->
        <section id="lombikDocs" class="w-full grid grid-cols-1 md:grid-cols-3 gap-5 pt-8">
            {%
                set card_items = [
                    {
                        "title": "Fast startup", 
                        "description": "Generate a production-ready Flask structure in seconds with auth, blueprints, services and sane defaults.",
                        "icon": "flash-outline"
                    },
                    {
                        "title": "Opinionated structure", 
                        "description": "Keep routes, services, templates and logic organized without reinventing architecture every project.",
                        "icon": "bulb-outline"
                    },
                    {
                        "title": "Secure by default", 
                        "description": "UUID users, hashed passwords, CSRF protection, login throttling and structured service responses built in.",
                        "icon": "shield-checkmark-outline"
                    },

                ]
            %}

            {% for item in card_items %}
            <div class="group p-6 rounded-3xl border border-zinc-200 dark:border-zinc-600 bg-white/70 dark:bg-zinc-900/40 backdrop-blur shadow-xl hover:shadow-sm hover:scale-[95%] transition-all duration-300">
                <ion-icon name="{{ item.icon }}" class="group-hover:text-primary transition-all duration-300 text-3xl mb-4"></ion-icon>

                <h3 class="text-lg font-semibold text-zinc-800 dark:text-zinc-100 mb-2">
                    {{ item.title }}
                </h3>

                <p class="text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
                    {{ item.description }}
                </p>
            </div>
            {% endfor %}
        </section>


        <section class="w-full max-w-4xl mt-32 px-6">

            <!-- meta -->
            <div class="mb-20 space-y-3">
        
                <p class="text-xs uppercase tracking-[0.35em] text-zinc-500 dark:text-zinc-300">
                    Lombik Philosophy
                </p>
        
                <h2 class="text-4xl md:text-5xl font-bold tracking-tight leading-tight text-zinc-800 dark:text-zinc-100">
                    Building webapps shouldn't be complicated
                </h2>
        
                <div class="space-y-4">
                    <p class="text-lg leading-[2] text-zinc-700 dark:text-zinc-200 font-semibold">Powered by</p>
                    <div class="flex flex-wrap gap-4 items-center justify-center">
                        {% set stack = [
                            {"name": "Flask", "url": "https://flask.palletsprojects.com"},
                            {"name": "HTMX", "url": "https://htmx.org"},
                            {"name": "Tailwind", "url": "https://tailwindcss.com"},
                            {"name": "SQL Alchmeny", "url": "https://www.sqlalchemy.org"},
                            {"name": "MySQL", "url": "https://mysql.com"}
                        ] %}
                        {% for lib in stack %}
                            <a href="{{ lib.url }}" target="_blank" class="px-4 py-1 border border-primary rounded-full hover:scale-110 transition-all duration-300">{{ lib.name }}</a>
                        {% endfor %}
                    </div>
                </div>
        
            </div>

            <div class="my-20 space-y-4">

                <p class="text-xs uppercase tracking-[0.35em] text-zinc-500 dark:text-zinc-300">
                    Start developing
                </p>
        
                <h2 class="text-4xl md:text-5xl font-bold tracking-tight leading-tight text-zinc-800 dark:text-zinc-100">
                    Take the wheel
                </h2>

                <p class="text-sm text-zinc-500 dark:text-zinc-300">
                    <a href="{{ url_for('auth_bp.login') }}" class="text-primary">Log in</a>
                    or if you don't have an account <a href="https://github.com/cleersoftware/lombik" target="_blank" class="text-primary">read the docs</a> to see how to create it.
                </p>
            </div>
        </div>
    </section>
</main>

{% endblock %}