script.js

// Force mobile rendering για μικρές οθόνες
const mobileBreakpoint = 351;
let isUltraMobile = false;

function initMobileSettings() {
    if (window.innerWidth <= mobileBreakpoint || window.innerHeight <= mobileBreakpoint) {
        document.documentElement.classList.add('ultra-mobile');
        document.body.style.zoom = '0.85';
        isUltraMobile = true;

        try {
            CSS.registerProperty({
                name: '--disable-animations',
                syntax: '<number>',
                initialValue: 1,
                inherits: false
            });
        } catch (e) {
            console.warn('CSS.registerProperty not supported');
        }

        // Βελτιωμένο: Επιλογή μόνο στοιχείων που έχουν transitions/animations
        const animatedElements = document.querySelectorAll('[style*="transition"], [style*="animation"]');
        animatedElements.forEach(el => {
            el.style.setProperty('transition', 'none', 'important');
            el.style.setProperty('animation', 'none', 'important');
        });
    }
}

// Debounce function για καλύτερη απόδοση
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

// Scroll handling για το switch button
const switchButton = document.querySelector('.switch');
let lastScrollY = window.scrollY;

function handleScroll() {
    const scrollPosition = window.scrollY;

    if (Math.abs(scrollPosition - lastScrollY) > 10) { // Αποφυγή συχνών updates
        if (scrollPosition > 80) {
            switchButton.style.cssText = `
                transform: translateX(100px) scale(0.6) rotate(15deg);
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transition: transform 0.3s ease, opacity 0.3s ease;
            `;
        } else {
            switchButton.style.cssText = `
                transform: translateX(0) scale(1) rotate(0deg);
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                transition: transform 0.3s ease, opacity 0.3s ease;
            `;
        }
        lastScrollY = scrollPosition;
    }
}

// Mobile menu toggle
const hamburger = document.querySelector('.hamburger');
const menu = document.querySelector('.menu');

function toggleMenu() {
    menu.classList.toggle('show');
    hamburger.classList.toggle('active');
    document.body.style.overflow = menu.classList.contains('show') ? 'hidden' : '';
}

hamburger.addEventListener('click', toggleMenu);

// Smooth scrolling
function initSmoothScrolling() {
    document.querySelectorAll('.menu a[href^="#"]').forEach(link => {
        link.addEventListener('click', function (e) {
            const href = this.getAttribute('href');

            if (href === '#') return;

            e.preventDefault();
            const targetId = href.substring(1);
            const targetElement = document.getElementById(targetId);

            if (targetElement) {
                targetElement.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }

            menu.classList.remove('show');
            hamburger.classList.remove('active');
            document.body.style.overflow = '';
        });
    });
}

// Theme management
function initTheme() {
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
    const themeSwitch = document.querySelector('.input__check');

    // Check localStorage first, then system preference
    const savedTheme = localStorage.getItem('theme');
    const isDarkMode = savedTheme ? savedTheme === 'dark' : prefersDark.matches;

    document.body.classList.toggle('dark-mode', isDarkMode);
    document.body.classList.toggle('light-mode', !isDarkMode);
    themeSwitch.checked = isDarkMode;

    // Update localStorage
    localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');

    // Theme switch handler
    themeSwitch.addEventListener('change', function () {
        const isNowDark = this.checked;
        document.body.classList.toggle('dark-mode', isNowDark);
        document.body.classList.toggle('light-mode', !isNowDark);
        localStorage.setItem('theme', isNowDark ? 'dark' : 'light');
    });

    // Listen for system theme changes
    prefersDark.addEventListener('change', (e) => {
        if (!localStorage.getItem('theme')) { // Only if user hasn't set preference
            const isDark = e.matches;
            document.body.classList.toggle('dark-mode', isDark);
            document.body.classList.toggle('light-mode', !isDark);
            themeSwitch.checked = isDark;
        }
    });
}

// Title hover effect
function initTitleEffect() {
    const title = document.querySelector('#home h1');
    if (!title) return;

    title.addEventListener('mouseenter', () => {
        title.style.cssText = `
            transition: all 0.3s ease;
            color: #1677ff;
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
        `;
    });

    title.addEventListener('mouseleave', () => {
        title.style.cssText = `
            transition: all 0.3s ease;
            color: '';
            text-shadow: '';
        `;
    });
}

// Search functionality
function initSearch() {
    const searchInput = document.getElementById('searchbar');
    if (!searchInput) return;

    const searchCards = () => {
        const input = searchInput.value.toLowerCase().trim();
        const cards = document.querySelectorAll('.gallery .card');

        cards.forEach(card => {
            const title = card.querySelector('h6');
            if (title && title.textContent.toLowerCase().includes(input)) {
                card.style.display = '';
            } else {
                card.style.display = 'none';
            }
        });
    };

    searchInput.addEventListener('input', debounce(searchCards, 300));
}

// Description toggle
function initDescriptionToggle() {
    document.querySelectorAll('.description').forEach(description => {
        const shortText = description.querySelector('.short-text');
        const fullText = description.querySelector('.full-text');
        const button = description.querySelector('.show-more');

        if (!shortText || !fullText || !button) return;

        function updateVisibility() {
            if (window.innerWidth >= 500) {
                shortText.style.display = 'none';
                fullText.style.display = 'inline';
                button.style.display = 'none';
            } else {
                shortText.style.display = 'inline';
                fullText.style.display = 'none';
                button.style.display = 'inline-block';
                button.textContent = 'Show More';
            }
        }

        // Initial setup
        updateVisibility();

        // Toggle functionality for mobile
        button.addEventListener('click', () => {
            if (fullText.style.display === 'none') {
                shortText.style.display = 'none';
                fullText.style.display = 'inline';
                button.textContent = 'Show Less';
            } else {
                shortText.style.display = 'inline';
                fullText.style.display = 'none';
                button.textContent = 'Show More';
            }
        });

        // Handle window resize
        window.addEventListener('resize', debounce(updateVisibility, 250));
    });
}

// Initialize everything when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
    initMobileSettings();
    initTheme();
    initSmoothScrolling();
    initTitleEffect();
    initSearch();
    initDescriptionToggle();

    // Add scroll listener with debounce
    window.addEventListener('scroll', debounce(handleScroll, 10));

    // Close menu when clicking outside
    document.addEventListener('click', (e) => {
        if (menu.classList.contains('show') &&
            !menu.contains(e.target) &&
            !hamburger.contains(e.target)) {
            toggleMenu();
        }
    });
});

// Handle window resize
window.addEventListener('resize', debounce(() => {
    initMobileSettings();
    initDescriptionToggle();
}, 250));