<%- include('partials/header') %>

<!-- padding to offset fixed navbar on pages without hero -->
<div style="padding-top: 80px;"></div>

<!-- ABOUT SECTION -->
<section class="about section-padding">
    <div class="container">
        <div class="about-grid">
            <div class="about-img slide-in-left">
                <% if (typeof sliderImages !== 'undefined' && sliderImages.length > 0) { %>
                    <div class="about-slider" id="aboutSlider">
                        <% sliderImages.forEach((img, index) => { %>
                            <img src="<%= img.image_url %>" class="about-slide <%= index === 0 ? 'active' : '' %>" alt="Ruhan Vlog">
                        <% }) %>
                    </div>
                    <script>
                        document.addEventListener("DOMContentLoaded", function() {
                            const slides = document.querySelectorAll('#aboutSlider .about-slide');
                            if(slides.length > 1) {
                                let currentSlide = 0;
                                setInterval(() => {
                                    slides[currentSlide].classList.remove('active');
                                    slides[currentSlide].style.position = 'absolute';
                                    currentSlide = (currentSlide + 1) % slides.length;
                                    slides[currentSlide].classList.add('active');
                                    slides[currentSlide].style.position = 'relative';
                                }, 3000);
                            }
                        });
                    </script>
                <% } else if (sections.about && sections.about.image_url) { %>
                    <img src="<%= sections.about.image_url %>" alt="Ruhan Vlog">
                <% } else { %>
                    <div class="placeholder-img">About Image</div>
                <% } %>
            </div>
            <div class="about-text slide-in-right">
                <h2><%= sections.about ? (lang==='bn' ? sections.about.title_bn : sections.about.title_en) : 'About Me' %></h2>
                <div class="divider"></div>
                <p style="white-space: pre-line;"><%= sections.about ? (lang==='bn' ? sections.about.content_bn : sections.about.content_en) : '' %></p>
            </div>
        </div>
    </div>
</section>

<!-- CONTACT STRIP -->
<%- include('partials/contact_strip') %>

<!-- STATS SECTION -->
<section class="stats section-padding bg-dark text-white text-center">
    <div class="container fade-in">
        <h2><%= lang==='bn' ? 'অডিয়েন্স এবং চ্যানেল স্ট্যাটস' : 'Audience & Channel Stats' %></h2>
        <div class="divider center light"></div>
        
        <%- include('partials/stats_strip') %>
    </div>
</section>

<%- include('partials/footer') %>
