{% extends 'base.html.twig' %}

{% block title %}{{ 'app.navigation.home'|trans }} - {{ 'app.title'|trans }}{% endblock %}

{% block body %}
    <!-- Hero Section -->
    <div class="hero-section bg-primary text-white py-5 mb-5 rounded">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <h1 class="display-4 fw-bold mb-3">{{ 'home.welcome'|trans }}</h1>
                    <p class="lead mb-4">{{ 'home.description'|trans }}</p>
                    <div class="d-flex gap-3 flex-wrap">
                        <a href="{{ path('card.list') }}" class="btn btn-light btn-lg">
                            <i class="bi bi-collection me-2"></i>{{ 'app.navigation.cards'|trans }}
                        </a>
                        <a href="{{ path('expansion.list') }}" class="btn btn-outline-light btn-lg">
                            <i class="bi bi-grid-3x3-gap me-2"></i>{{ 'app.navigation.expansions'|trans }}
                        </a>
                    </div>
                </div>
                <div class="col-lg-4 text-center">
                    <div class="stats-grid">
                        <div class="stat-item mb-3">
                            <div class="h2 fw-bold mb-0 counter" data-target="{{ totalExpansions }}">0</div>
                            <small class="opacity-75">{{ 'home.stats.expansions'|trans }}</small>
                        </div>
                        <div class="stat-item mb-3">
                            <div class="h2 fw-bold mb-0 counter" data-target="{{ totalCards }}">0</div>
                            <small class="opacity-75">{{ 'home.stats.cards'|trans }}</small>
                        </div>
                        <div class="stat-item">
                            <div class="h2 fw-bold mb-0 counter" data-target="{{ totalPrices }}">0</div>
                            <small class="opacity-75">{{ 'home.stats.prices'|trans }}</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Features Section -->
    <div class="container mb-5">
        <h2 class="text-center mb-5">{{ 'home.features.title'|trans }}</h2>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <div class="feature-icon bg-primary text-white rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center">
                            <i class="bi bi-graph-up fs-4"></i>
                        </div>
                        <h5 class="card-title">{{ 'home.features.price_tracking'|trans }}</h5>
                        <p class="card-text text-muted">{{ 'home.features.price_tracking_desc'|trans }}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <div class="feature-icon bg-success text-white rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center">
                            <i class="bi bi-robot fs-4"></i>
                        </div>
                        <h5 class="card-title">{{ 'home.features.ai_prediction'|trans }}</h5>
                        <p class="card-text text-muted">{{ 'home.features.ai_prediction_desc'|trans }}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <div class="feature-icon bg-info text-white rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center">
                            <i class="bi bi-search fs-4"></i>
                        </div>
                        <h5 class="card-title">{{ 'home.features.search'|trans }}</h5>
                        <p class="card-text text-muted">{{ 'home.features.search_desc'|trans }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Expansions Section -->
    {% if recentExpansions is not empty %}
    <div class="container mb-5">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>{{ 'home.recent_expansions'|trans }}</h2>
            <a href="{{ path('expansion.list') }}" class="btn btn-outline-primary">
                {{ 'home.view_all'|trans }} <i class="bi bi-arrow-right ms-1"></i>
            </a>
        </div>
        <div class="row g-3">
            {% for expansion in recentExpansions %}
            <div class="col-md-4 col-lg-2">
                <div class="card expansion-card h-100 border-0 shadow-sm">
                    <div class="card-body p-3 text-center">
                        <h6 class="card-title mb-2 expansion-title">{{ expansion.name }}</h6>
                        <small class="text-muted">{{ expansion.cardCount }} {{ 'home.card'|trans|lower }}s</small>
                        <div class="mt-2">
                            <a href="{{ path('expansion.cardlist', {'id': expansion.id}) }}" class="btn btn-sm btn-outline-primary">
                                {{ 'home.view_cards'|trans }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Projects Section -->
    <div class="container mb-5">
        <h2 class="text-center mb-4">{{ 'home.project_links'|trans }}</h2>
        <div class="row g-4 justify-content-center">
            <div class="col-md-4">
                <div class="card project-card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <i class="bi bi-globe display-4 text-primary mb-3"></i>
                        <h5 class="card-title">frontMkmPy</h5>
                        <p class="card-text text-muted">{{ 'home.frontend_description'|trans }}</p>
                        <a href="https://github.com/gschmirgal/frontMkmPy" target="_blank" class="btn btn-outline-primary">
                            <i class="bi bi-github me-1"></i>GitHub
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card project-card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <i class="bi bi-terminal display-4 text-success mb-3"></i>
                        <h5 class="card-title">mkm.py</h5>
                        <p class="card-text text-muted">{{ 'home.script_description'|trans }}</p>
                        <a href="https://github.com/gschmirgal/mkmpy" target="_blank" class="btn btn-outline-success">
                            <i class="bi bi-github me-1"></i>GitHub
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card project-card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <i class="bi bi-cpu display-4 text-info mb-3"></i>
                        <h5 class="card-title">MKMOraclePy</h5>
                        <p class="card-text text-muted">{{ 'home.ai_description'|trans }}</p>
                        <a href="https://github.com/gschmirgal/MKMOraclePy" target="_blank" class="btn btn-outline-info">
                            <i class="bi bi-github me-1"></i>GitHub
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Contact Section -->
    <div class="bg-primary text-white py-5 rounded">
        <div class="container text-center">
            <h2 class="mb-4 text-white">{{ 'home.personal_links'|trans }}</h2>
            <div class="d-flex justify-content-center gap-3 flex-wrap">
                <a href="https://gschmirgal.ovh" target="_blank" class="btn btn-light text-primary fw-bold">
                    <i class="bi bi-person-circle me-2"></i>{{ 'home.portfolio'|trans }}
                </a>
                <a href="https://www.linkedin.com/in/schmirgal" target="_blank" class="btn btn-light text-primary fw-bold">
                    <i class="bi bi-linkedin me-2"></i>LinkedIn
                </a>
                <a href="https://github.com/gschmirgal" target="_blank" class="btn btn-light text-primary fw-bold">
                    <i class="bi bi-github me-2"></i>GitHub
                </a>
            </div>
        </div>
    </div>

    <script>
        function animateCounters() {
            const statsGrid = document.querySelector('.stats-grid');
            if (!statsGrid) return;
            const counters = statsGrid.querySelectorAll('.counter:not(.animated)');
            if (!counters.length) return;

            function animate(counter, target, duration = 2000) {
                const start = 0;
                const startTime = performance.now();
                function update(now) {
                    const progress = Math.min((now - startTime) / duration, 1);
                    const value = Math.floor(start + (target - start) * (1 - Math.pow(1 - progress, 4)));
                    counter.textContent = value.toLocaleString();
                    if (progress < 1) {
                        requestAnimationFrame(update);
                    } else {
                        counter.textContent = target.toLocaleString();
                        counter.classList.add('animated');
                    }
                }
                requestAnimationFrame(update);
            }

            const observer = new IntersectionObserver(entries => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        counters.forEach((counter, i) => {
                            setTimeout(() => animate(counter, parseInt(counter.dataset.target)), i * 200);
                        });
                        observer.unobserve(statsGrid);
                    }
                });
            }, { threshold: 0.5 });

            observer.observe(statsGrid);
        }

        document.addEventListener('DOMContentLoaded', animateCounters);
        document.addEventListener('turbo:load', animateCounters);
        document.addEventListener('turbo:render', animateCounters);
    </script>
{% endblock %}