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

{% block content %}
<style>
    /* Resetujemy padding dodany w base.html tylko dla strony głównej, 
       aby sekcja Hero stykała się z nawigacją */
    .content-wrapper { padding-top: 0 !important; }

    .hero-section {
        height: 100vh;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
                    url("https://images.unsplash.com/photo-1677442136019-21780ecad995?q=80&w=2070&auto=format&fit=crop") no-repeat center center/cover;
    }

    .glow-text {
        color: #00d4ff !important;
        text-shadow: 0 0 20px rgba(0, 212, 255, 0.7);
    }

    /* Styl dla Twojego zdjęcia pod sekcją Hero */
    .featured-image {
        max-width: 400px; /* Zwiększyłem, żeby było lepiej widoczne */
        width: 100%;
        height: auto;
        border-radius: 15px;
        margin-top: 50px;
        box-shadow: 0 10px 30px rgba(0, 212, 255, 0.2);
        transition: transform 0.3s ease;
    }
    
    .featured-image:hover {
        transform: scale(1.05);
    }
</style>

<header class="hero-section">
    <div class="hero-content text-center tech-card">
        <h1 class="display-3 fw-bold mb-4 glow-text">
            Advanced AI Technologies
        </h1>
        <p class="lead text-white fs-4 px-3">
            Sztuczna Inteligencja to potężne i bezpieczne narzędzie, które wspiera rozwój ludzkości.
            Odkryj, jak budujemy lepszą przyszłość.
        </p>
        <div style="height: 2px; width: 100px; background: #00d4ff; margin: 30px auto;"></div>
    </div>
</header>

<div class="container py-5 text-center">
    <div class="tech-card">
        <h2 class="mb-4">Nasza Wizja Technologii</h2>
        <img src="{% static '1663069787322.jpg' %}" 
             alt="Zaawansowana technologia AI" 
             class="featured-image">
    </div>
</div>

<div id="cookie-overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(10px); z-index: 9999; display: flex; align-items: center; justify-content: center;">
    <div style="width: 90%; max-width: 400px; background: #111; border: 1px solid #00d4ff; border-radius: 20px; padding: 30px; text-align: center;">
        <h3 style="color: #00d4ff; margin-bottom: 15px;">Prywatność AI</h3>
        <p style="color: #ccc; font-size: 14px; line-height: 1.6;">
            Nasza strona wykorzystuje pliki cookies do poprawnego działania i analizy ruchu. Czy wyrażasz na to zgodę?
        </p>
        <div class="d-grid gap-2 mt-4">
            <button onclick="acceptCookies()" class="btn btn-info fw-bold">AKCEPTUJĘ</button>
            <a href="{% url 'polityka_prywatnosci' %}" class="btn btn-outline-info btn-sm">Szczegóły polityki</a>
            <button onclick="leaveSite()" class="btn btn-link btn-sm text-danger text-decoration-none">Wyjdź ze strony</button>
        </div>
    </div>
</div>

<script>
    function acceptCookies() {
        document.getElementById('cookie-overlay').style.display = 'none';
        localStorage.setItem('cookiesAccepted', 'true');
    }

    function leaveSite() {
        window.location.href = "https://www.google.com";
    }

    // Sprawdzenie przy ładowaniu, czy user już zaakceptował cookies
    document.addEventListener("DOMContentLoaded", function() {
        if (localStorage.getItem('cookiesAccepted') === 'true') {
            document.getElementById('cookie-overlay').style.display = 'none';
        }
        
        // Animacja wejścia dla sekcji Hero
        const hero = document.querySelector('.hero-section .tech-card');
        setTimeout(() => {
            hero.classList.add('appear');
        }, 100);
    });
</script>

{% endblock %}