{% block stylesheets %}

    <script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>

{% endblock %}


<!-- INTRO / EFFECT
<div id="intro">
    <div id="circle-container">
        <svg viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="44"></circle>
        </svg>
        <div id="percent">0%</div>
    </div>
</div>-->

<!-- HEADER -->

    <div class="header_section header_ust_section">
        <div class="w-85">
            <a href="#" class="header_ust_a">
                <img src="{{ asset('media/logo/main_logo.png') }}" alt="Logo">
            </a>
            <div id="lang">
                <p id="swiper-header-title">Hero</p>
                <svg class="translate-icon"  xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                      fill="#646569" viewBox="0 0 24 24" >
                    <!--Boxicons v3.0.8 https://boxicons.com | License  https://docs.boxicons.com/free-->
                    <path d="M17 11c-.4 0-.75.23-.91.59l-4 9 1.83.81 1.07-2.41h4.03l1.07 2.41 1.83-.81-4-9a1 1 0 0 0-.91-.59Zm-1.13 6L17 14.46 18.13 17zm-3.62-2.03.49-1.94c-.13-.03-1.6-.43-3.17-1.42 1.4-1.41 2.49-3.26 2.74-5.61h1.68V4h-5V2h-2v2H2v2h8.3c-.25 1.91-1.19 3.34-2.31 4.4C7.3 9.75 6.68 8.96 6.25 8H4.12c.5 1.44 1.33 2.63 2.3 3.61-1.57.99-3.04 1.39-3.17 1.42l.49 1.94c1.18-.3 2.76-.96 4.26-2.02 1.49 1.06 3.08 1.72 4.25 2.02"></path>
                </svg>
                <div class="dropdown">
                    <div class="dropdown-header" onclick="toggleDropdown()">
                        <span id="selected-lang">TR</span>
                        <svg class="arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
                    </div>
                    <div class="dropdown-list" id="langList">
                        <a href="{{ path('app_main_default') }}" class="option" onclick="select('TR', event)">TR</a>
                        <a href="{{ path('app_main_default') }}" class="option" onclick="select('EN', event)">EN</a>
                        <a href="{{ path('app_main_default') }}" class="option" onclick="select('GM', event)">GM</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="header_section header_alt_section">
        <div class="w-85 header_main_down">
            <div class="headeR_footer_left">
                <div class="headeR_footer_icon">
                    <svg  xmlns="http://www.w3.org/2000/svg" width="30" height="30"
                          fill="#8f8f8f" viewBox="0 0 24 24" >
                        <!--Boxicons v3.0.8 https://boxicons.com | License  https://docs.boxicons.com/free-->
                        <path d="M13.68 10.62 20.24 3h-1.55L13 9.62 8.45 3H3.19l6.88 10.01L3.19 21h1.55l6.01-6.99 4.8 6.99h5.24l-7.13-10.38Zm-2.13 2.47-.7-1-5.54-7.93H7.7l4.47 6.4.7 1 5.82 8.32H16.3z"></path>
                    </svg>
                    <svg  xmlns="http://www.w3.org/2000/svg" width="30" height="30"
                          fill="#8f8f8f" viewBox="0 0 24 24" >
                        <!--Boxicons v3.0.8 https://boxicons.com | License  https://docs.boxicons.com/free-->
                        <path d="M20 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1M8.339 18.337H5.667v-8.59h2.672zM7.003 8.574a1.548 1.548 0 1 1 0-3.096 1.548 1.548 0 0 1 0 3.096m11.335 9.763h-2.669V14.16c0-.996-.018-2.277-1.388-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248h-2.667v-8.59h2.56v1.174h.037c.355-.675 1.227-1.387 2.524-1.387 2.704 0 3.203 1.778 3.203 4.092v4.71z"></path>
                    </svg>
                </div>
                <div class="headeR_footer_text">
                    <p>Terms</p>
                    <p>Privacy Policy</p>
                    <p>Imprint</p>
                </div>
            </div>

            <div class="headeR_footer_right">
                <img src="{{ asset('media/logo/main_logo_footer.png') }}" alt="Logo">
            </div>
        </div>
    </div>


{% block javascripts_bottom %}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 100ms bekleyerek Swiper'ın tamamen kurulduğundan emin oluyoruz
            setTimeout(function() {
                // .swiper-container veya .mySwiper (senin slider class'ın hangisiyse)
                const swiperElement = document.querySelector('.swiper');

                if (swiperElement && swiperElement.swiper) {
                    const activeSwiper = swiperElement.swiper;
                    const headerTitle = document.getElementById('swiper-header-title');

                    // Yazıların listesi
                    const titles = [
                        "Hero",
                        "The COMPANY",
                        "The HUMAN",
                        "The INTELLIGENCE",
                        "The HORIZON",
                        "The NOW"
                    ];

                    // İlk açılışta yazıyı ayarla
                    headerTitle.innerText = titles[activeSwiper.realIndex] || titles[0];

                    // Slayt değişimini dinle
                    activeSwiper.on('slideChange', function () {
                        // 1. Yazıyı aşağı kaydırarak gizle
                        headerTitle.classList.add('header-fade-out');

                        setTimeout(() => {
                            // 2. Yazıyı içeriğini değiştir
                            headerTitle.innerText = titles[activeSwiper.realIndex] || titles[0];

                            // 3. Yazıyı yukarı al (görünmez haldeyken)
                            headerTitle.classList.remove('header-fade-out');
                            headerTitle.classList.add('header-fade-in');

                            // 4. Çok kısa bir süre sonra yerini oturt ve göster
                            setTimeout(() => {
                                headerTitle.classList.remove('header-fade-in');
                                headerTitle.style.opacity = 1;
                                headerTitle.style.transform = 'translateY(0)';
                            }, 50);

                        }, 400); // CSS'teki 0.4s süre ile uyumlu
                    });

                    console.log("Sistem başarıyla bağlandı!");
                } else {
                    console.error("Swiper elementi veya objesi bulunamadı. Class adını kontrol et!");
                }
            }, 500); // Yarım saniye bekleme payı
        });
    </script>
{% endblock %}