{% comment %} {% extends 'base.html' %}
{% load static %}

{% block extra_css %}
<style>
    :root {
        --primary-color: #c8dc71;
        --gradient-color: linear-gradient(90deg, #FFD44B 0%, #FFA900 100%);
    }

    /* Custom */
    @keyframes type {
        from { width: 0; }
        to { width: 100%; }
    }

    @keyframes cursor {
        50% { border-color: transparent; }
    }
</style>
{% endblock %}

{% block content %}
<div class="bg-bl">
    <!-- Your index page content from index.php -->
    <!-- No duplicate headers/navbars needed -->
    
    <div class="bg">
        <div class="container">
            <div class="banner-content " style="text-align:center">
                <div>
                    <div class="d-flex-ac-jc gap-4 banner-content w-100  white ">
                        <h4>Live</h4><span class="slash">|</span>
                        <h4>Work</h4><span class="slash">|</span>
                        <h4>Create</h4>
                    </div>
                    <h1>Crafting Elegant</h1>
                    <h1 class="gradient-text mt-0">Spaces</h1>
                    <h5>Transforming interiors with minimalist design philosophy and attention to detail that elevates your everyday experience.</h5>
                    <button class="radial-btn" style="margin-top:30px">SEE OUR PORTFOLIO <i class="fa-solid fa-arrow-right ms-2"></i></button>
                </div>
                <div class="d-flex-ac-jc mt-4">
                    <a href="#cmm">
                        <div class="page-toggle"></div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Rest of your index content -->
</div>
{% endblock %}

{% block extra_js %}
<script>
    const buttons = document.querySelectorAll("[data-carousel-button]");

    buttons.forEach(button => {
        button.addEventListener("click", () => {
            const offset = button.dataset.carouselButton === "next" ? 1 : -1;
            const slides = button.closest("[data-carousel]").querySelector("[data-slides]");

            const activeIndex = parseInt(slides.dataset.activeIndex) || 0;
            let newIndex = activeIndex + offset;

            if (newIndex < 0) newIndex = slides.children.length - 1;
            if (newIndex >= slides.children.length) newIndex = 0;

            slides.style.transform = `translateX(-${newIndex * 100}%)`;
            slides.dataset.activeIndex = newIndex;
        });
    });
</script>
{% endblock %} {% endcomment %}