var displayedMenu = "";
var hamburgerShown = false;
let width = screen.width;
var isMobile = width < 1024;

function readingTime() {
    let articles = document.querySelectorAll(".article");
    let times = document.querySelectorAll(".time");
    const wpm = 225;
    let words;
    for (var i = 0; i < articles.length; i++) {
        words = articles[i].innerText.trim().split(/\s+/).length;
        let time = Math.ceil(words / wpm);
        times[i].innerText = `${time} minute read`
    }
}
readingTime()

function toggleMenu(button) {
    if (displayedMenu === button.id.split("-")[0]) {
        button.className = button.className.replace(" text-gray-800 bg-stone-200 sm:bg-transparent", " text-gray-900");
        hideMenu(button.id.split("-")[0]);
        button.lastElementChild.className = button.lastElementChild.className.replace("rotate-0", "-rotate-90")
        displayedMenu = "";
    } else {
        showMenu(button.id.split("-")[0]);
        button.lastElementChild.className = button.lastElementChild.className.replace("-rotate-90", "rotate-0")
        button.className = button.className.replace(" text-gray-900", " text-gray-800 bg-stone-200 sm:bg-transparent");
        displayedMenu = button.id.split("-")[0]
    }
}

function handleClick(button) {
    if (button.id === "hamburger-btn" || button.id === "close-hamburger-btn") {
        toggleHamburger()
    }
    if (button.id.indexOf("menu") !== -1) {
        toggleMenu(button)
    }
}

function toggleHamburger() {
    if (hamburgerShown) {
        hideHamburger();
        hamburgerShown = false;
    } else {
        showHamburger();
        hamburgerShown = true;
    }
}

function showMenu(menuName) {
    var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
    var menuBtnId = menuName + (isMobile ? '-mobile-menu' : '-menu');
    var menuElement = document.getElementById(menuId)
    menuElement.className = menuElement.className.replace(" hidden", "");
    let children = document.querySelectorAll('.nav_menu')
    for (let i = 0; i < children.length; i++) {
        if (menuElement !== children[i]) {
            let btnId = `${children[i].id}-btn`;
            let btn = document.getElementById(btnId);
            if (btn && !children[i].classList.contains('hidden')) {
                children[i].classList.add('hidden')
                btn.lastElementChild.classList.replace("rotate-0", "-rotate-90")
            }
        }
    }
    setTimeout(function () {
        menuElement.className = menuElement.className.replace("duration-200 ease-in opacity-0 -translate-y-1", "duration-150 ease-out opacity-1 -translate-y-0");
    }, 10);
}

function hideMenu(menuName) {
    var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
    var menuElement = document.getElementById(menuId)
    menuElement.className = menuElement.className.replace("duration-150 ease-out opacity-1 -translate-y-0", "duration-200 ease-in opacity-0 -translate-y-1");
    setTimeout(function () {
        menuElement.className = menuElement.className + " hidden"
    }, 300);
}

function showHamburger() {
    document.getElementById('header-container').className = "overflow-hidden";
    document.getElementById('hamburger').className = "fixed mt-28 z-20 top-0 inset-x-0 transition transform origin-top-right";
    document.getElementById('hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out";
    document.getElementById('close-hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out";
}

function hideHamburger() {
    document.getElementById('header-container').className = "";
    document.getElementById('hamburger').className = "hidden absolute z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden";
    document.getElementById('hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out";
    document.getElementById('close-hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out";
    if (displayedMenu !== "") {
        hideMenu(displayedMenu);
    }
}
function toggleFilter() {
    var filterMenu = document.getElementById("filter-menu")
    if (filterMenu.className.includes("hidden")) {
        filterMenu.className = filterMenu.className.replace("hidden", " ")
    } else {
        filterMenu.className = filterMenu.className + " hidden"
    }
}
// Smooth scrolling function for anchor links
function smoothScrollToElement(targetId) {
    const element = document.getElementById(targetId);
    if (element) {
        const headerHeight = document.getElementById('header-container') ? 
            document.getElementById('header-container').offsetHeight : 80;
        const elementPosition = element.offsetTop - headerHeight - 20;
        
        window.scrollTo({
            top: elementPosition,
            behavior: 'smooth'
        });
    }
}

// Handle anchor link clicks
function handleAnchorClick(event, link) {
    const href = link.getAttribute('href');
    if (href && href.startsWith('#')) {
        event.preventDefault();
        const targetId = href.substring(1);
        smoothScrollToElement(targetId);
    }
}

window.onload = function () {
    let elements = document.getElementsByTagName("button");
    let buttons = [...elements]

    buttons.forEach((button) => {
        button.addEventListener('click', function () {
            handleClick(button)
        });
    })

    var links = document.links;
    var internal_hosts = [
        'www.ourworld.tf',
        'ourworld.tf',
        'www2.ourworld.tf',
        'www2.freezone.ourworld.tf',
        'freezone.ourworld.tf',
        'localhost',
        '127.0.0.1'
    ]
    for (var i = 0, linksLength = links.length; i < linksLength; i++) {
        if (!internal_hosts.includes(links[i].hostname)) {
            links[i].target = '_blank';
        }
        
        // Add smooth scrolling for anchor links
        if (links[i].getAttribute('href') && links[i].getAttribute('href').startsWith('#')) {
            links[i].addEventListener('click', function(event) {
                handleAnchorClick(event, this);
            });
        }
    }

    // Add smooth scrolling behavior to html element
    document.documentElement.style.scrollBehavior = 'smooth';

    document.getElementById("filter-btn").addEventListener('click', toggleFilter);
}

function openInNewTab(url) {
    window.open(url, '_blank').focus()
}

// Animation System for Homepage Components
class AnimationController {
    constructor() {
        this.observer = null;
        this.isPageLoaded = false;
        this.init();
    }

    init() {
        // Set up intersection observer for scroll animations
        this.setupIntersectionObserver();
        
        // Handle initial page load animations
        this.handlePageLoad();
        
        // Initialize animations when DOM is ready
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', () => this.initializeAnimations());
        } else {
            this.initializeAnimations();
        }
    }

    setupIntersectionObserver() {
        const options = {
            root: null,
            rootMargin: '0px 0px -10% 0px', // Trigger when element is 10% visible
            threshold: 0.1
        };

        this.observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    this.animateElement(entry.target);
                }
            });
        }, options);
    }

    animateElement(element) {
        // Add visible class to trigger CSS animations
        element.classList.add('animate-visible');
        
        // Animate child elements with stagger effect
        const children = element.querySelectorAll('.animate-stagger-1, .animate-stagger-2, .animate-stagger-3, .animate-stagger-4, .animate-stagger-5');
        children.forEach((child, index) => {
            setTimeout(() => {
                child.classList.add('animate-visible');
            }, index * 100);
        });

        // Stop observing this element once animated
        this.observer.unobserve(element);
    }

    handlePageLoad() {
        // Add loading class initially
        document.body.classList.add('page-loading');
        
        window.addEventListener('load', () => {
            this.isPageLoaded = true;
            document.body.classList.remove('page-loading');
            document.body.classList.add('page-loaded');
            
            // Animate hero section immediately on load
            this.animateHeroSection();
        });
    }

    animateHeroSection() {
        const heroElements = document.querySelectorAll('.hero-title, .hero-subtitle, .hero-button');
        heroElements.forEach(element => {
            element.classList.add('animate-visible');
        });
    }

    initializeAnimations() {
        // Find all elements that should be animated
        const animatedElements = document.querySelectorAll(
            '.animate-fade-in, .animate-slide-left, .animate-slide-right, .animate-scale-up, .animate-text-content, .animate-image'
        );

        // Start observing each element
        animatedElements.forEach(element => {
            this.observer.observe(element);
        });

        // Add animation classes to row containers
        this.addAnimationClassesToRows();
    }

    addAnimationClassesToRows() {
        // Get all row containers from the homepage
        const rows = document.querySelectorAll('[id*="row"], .relative.justify-center.flex.overflow-hidden');
        
        rows.forEach((row, index) => {
            // Add different animation types based on position
            const animationType = this.getAnimationTypeForRow(index);
            row.classList.add(animationType);
            
            // Add text content animation to text columns
            const textColumns = row.querySelectorAll('div[class*="flex-1"]');
            textColumns.forEach(column => {
                if (this.hasTextContent(column)) {
                    column.classList.add('animate-text-content');
                }
                
                // Add image animation to image containers
                const images = column.querySelectorAll('img');
                images.forEach(img => {
                    img.parentElement.classList.add('animate-image');
                });
            });
        });
    }

    getAnimationTypeForRow(index) {
        const animations = ['animate-fade-in', 'animate-slide-left', 'animate-slide-right', 'animate-scale-up'];
        return animations[index % animations.length];
    }

    hasTextContent(element) {
        const textElements = element.querySelectorAll('h1, h2, h3, h4, p, button, a');
        return textElements.length > 0;
    }

    // Method to trigger animations on scroll direction change
    handleScrollDirection() {
        let lastScrollTop = 0;
        
        window.addEventListener('scroll', () => {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            const scrollDirection = scrollTop > lastScrollTop ? 'down' : 'up';
            
            // You can add specific animations based on scroll direction here
            document.body.setAttribute('data-scroll-direction', scrollDirection);
            
            lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
        }, false);
    }
}

// Initialize animation system
let animationController;

// Enhanced window.onload to include animations
const originalWindowOnload = window.onload;
window.onload = function() {
    // Call original onload function
    if (originalWindowOnload) {
        originalWindowOnload();
    }
    
    // Initialize animation controller
    animationController = new AnimationController();
}