import './style.css'

class Carousel {
    private container: HTMLElement;
    private track: HTMLElement;
    private items: HTMLElement[];
    private currentIndex: number;
    private interval: number;
    private dots: HTMLElement[] | null = null;

    constructor(elementId: string, interval: number = 5000) {
        const el = document.getElementById(elementId);
        if (!el) return;
        this.container = el;
        this.track = this.container.querySelector('.carousel-track') as HTMLElement;
        this.items = Array.from(this.container.querySelectorAll('.carousel-item')) as HTMLElement[];
        this.currentIndex = 0;
        this.interval = interval;
        this.init();
    }

    private init() {
        if (this.items.length <= 1) return;
        this.createDots();
        setInterval(() => this.next(), this.interval);
    }

    private createDots() {
        const dotsContainer = document.createElement('div');
        dotsContainer.className = 'carousel-dots';
        this.items.forEach((_, idx) => {
            const dot = document.createElement('div');
            dot.className = `dot ${idx === 0 ? 'active' : ''}`;
            dot.onclick = () => this.goTo(idx);
            dotsContainer.appendChild(dot);
        });
        this.container.appendChild(dotsContainer);
        this.dots = Array.from(dotsContainer.querySelectorAll('.dot'));
    }

    private goTo(index: number) {
        this.currentIndex = index;
        this.update();
    }

    private next() {
        this.currentIndex = (this.currentIndex + 1) % this.items.length;
        this.update();
    }

    private update() {
        const offset = -this.currentIndex * 100;
        this.track.style.transform = `translateX(${offset}%)`;
        if (this.dots) {
            this.dots.forEach((dot, idx) => {
                dot.classList.toggle('active', idx === this.currentIndex);
            });
        }
    }
}

document.addEventListener('DOMContentLoaded', () => {
    console.log('Gofer Metais - Master Edition Ready');
    
    // Initialize Carousels
    new Carousel('hero-carousel', 6000);
    new Carousel('metro-carousel', 4500);
    new Carousel('corinthians-carousel', 5000);
    new Carousel('olympic-carousel', 5500);

    // Scroll Animations
    const sections = document.querySelectorAll('section');
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, { threshold: 0.1 });

    sections.forEach(section => {
        const s = section as HTMLElement;
        s.style.opacity = '0';
        s.style.transform = 'translateY(50px)';
        s.style.transition = 'all 1s cubic-bezier(0.16, 1, 0.3, 1)';
        observer.observe(section);
    });

    const style = document.createElement('style');
    style.textContent = `
        section.visible {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }
    `;
    document.head.appendChild(style);
});