const header = document.getElementById('header');
const toggleFounders = document.getElementById('toggle-founders');
const toggleMarketers = document.getElementById('toggle-marketers');
const heroTitle = document.getElementById('hero-title');
const heroDescription = document.getElementById('hero-description');
const servicesSection = document.getElementById('services-section');
const pricingCard = document.getElementById('pricing-card');
const scratchCard = document.getElementById('scratch-card');
const scratchVideo = document.getElementById('scratch-video');
const processCarousel = document.getElementById('process-carousel');
const carouselPrev = document.getElementById('carousel-prev');
const carouselNext = document.getElementById('carousel-next');
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const navMobile = document.getElementById('nav-mobile');
const messageInput = document.getElementById('message-input');
const calendar = document.getElementById('calendar');

// Content for different modes
const content = {
    founders: {
        title: "A Founder's Secret Weapon",
        description: "We're your dedicated full-stack engineering partner, ready to build your ultimate MVP. Whether it is an app, a SaaS Platform or a store, we deliver what you need for a fixed price."
    },
    marketers: {
        title: "A Marketer's Growth Engine",
        description: "We craft high-performance digital solutions to amplify your marketing campaigns, from landing pages to full-scale platforms."
    }
};

// Current mode state
let currentMode = 'founders';

// Initialize the page
function init() {
    setupToggleButtons();
    setupMobileMenu();
    setupScratchCard();
    setupProcessCarousel();
    setupCalendar();
    setupMessageForm();
}

// Toggle functionality
function setupToggleButtons() {
    toggleFounders.addEventListener('click', () => switchMode('founders'));
    toggleMarketers.addEventListener('click', () => switchMode('marketers'));
}

function switchMode(mode) {
    currentMode = mode;
    
    // Update toggle buttons
    toggleFounders.classList.toggle('active', mode === 'founders');
    toggleMarketers.classList.toggle('active', mode === 'marketers');
    
    // Update button classes for styling
    toggleFounders.classList.toggle('founders', mode === 'founders');
    toggleMarketers.classList.toggle('marketers', mode === 'marketers');
    
    // Update header background
    header.classList.remove('founders', 'marketers');
    header.classList.add(mode);
    
    // Update services section background
    servicesSection.classList.remove('founders', 'marketers');
    servicesSection.classList.add(mode);
    
    // Update pricing card background
    pricingCard.classList.remove('founders', 'marketers');
    pricingCard.classList.add(mode);
    
    // Update content
    heroTitle.textContent = content[mode].title;
    heroDescription.textContent = content[mode].description;
}

// Mobile menu functionality
function setupMobileMenu() {
    mobileMenuBtn.addEventListener('click', () => {
        navMobile.classList.toggle('active');
        mobileMenuBtn.classList.toggle('active');
    });
    
    // Close mobile menu when clicking on links
    navMobile.addEventListener('click', (e) => {
        if (e.target.tagName === 'A') {
            navMobile.classList.remove('active');
            mobileMenuBtn.classList.remove('active');
        }
    });
}

// Scratch card functionality
function setupScratchCard() {
    scratchCard.addEventListener('click', () => {
        scratchCard.style.display = 'none';
        scratchVideo.style.display = 'flex';
        scratchVideo.style.alignItems = 'center';
        scratchVideo.style.justifyContent = 'center';
    });
}

// Process carousel functionality
function setupProcessCarousel() {
    let scrollPosition = 0;
    const cardWidth = 320 + 24; // card width + gap
    
    carouselNext.addEventListener('click', () => {
        const maxScroll = processCarousel.scrollWidth - processCarousel.clientWidth;
        scrollPosition = Math.min(scrollPosition + cardWidth, maxScroll);
        processCarousel.scrollTo({
            left: scrollPosition,
            behavior: 'smooth'
        });
    });
    
    carouselPrev.addEventListener('click', () => {
        scrollPosition = Math.max(scrollPosition - cardWidth, 0);
        processCarousel.scrollTo({
            left: scrollPosition,
            behavior: 'smooth'
        });
    });
    
    // Update scroll position when user scrolls manually
    processCarousel.addEventListener('scroll', () => {
        scrollPosition = processCarousel.scrollLeft;
    });
}

// Calendar functionality
function setupCalendar() {
    const today = new Date();
    const year = today.getFullYear();
    const month = today.getMonth();
    const daysInMonth = new Date(year, month + 1, 0).getDate();
    
    // Clear existing calendar
    calendar.innerHTML = '';
    
    // Generate calendar days
    for (let i = 1; i <= daysInMonth; i++) {
        const dayElement = document.createElement('div');
        dayElement.className = 'calendar-day';
        dayElement.textContent = i;
        
        dayElement.addEventListener('click', () => {
            // Remove selected class from all days
            document.querySelectorAll('.calendar-day').forEach(day => {
                day.classList.remove('selected');
            });
            
            // Add selected class to clicked day
            dayElement.classList.add('selected');
        });
        
        calendar.appendChild(dayElement);
    }
}

// Message form functionality
function setupMessageForm() {
    const sendBtn = document.querySelector('.send-btn');
    
    sendBtn.addEventListener('click', () => {
        const message = messageInput.value.trim();
        if (message) {
            alert(`Message sent: ${message}`);
            messageInput.value = '';
        } else {
            alert('Please enter a message');
        }
    });
    
    // Send message on Enter key
    messageInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            sendBtn.click();
        }
    });
}

// Smooth scrolling for navigation links
function setupSmoothScrolling() {
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
}

// Intersection Observer for animations
function setupScrollAnimations() {
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);
    
    // Observe elements for animation
    document.querySelectorAll('.service-card, .process-card, .leader').forEach(el => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(20px)';
        el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        observer.observe(el);
    });
}

// Handle window resize
function handleResize() {
    // Reset carousel position on resize
    processCarousel.scrollTo({ left: 0, behavior: 'smooth' });
}

// Event listeners
window.addEventListener('resize', handleResize);
window.addEventListener('load', setupScrollAnimations);

// Initialize everything when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    init();
    setupSmoothScrolling();
    
    // Set initial mode
    switchMode('founders');
});

// Add some interactive enhancements
document.addEventListener('DOMContentLoaded', () => {
    // Add hover effect to service cards
    const serviceCards = document.querySelectorAll('.service-card');
    serviceCards.forEach(card => {
        card.addEventListener('mouseenter', () => {
            card.style.transform = 'scale(1.05) translateY(-5px)';
        });
        
        card.addEventListener('mouseleave', () => {
            card.style.transform = 'scale(1) translateY(0)';
        });
    });
    
    // Add click effect to buttons
    const buttons = document.querySelectorAll('button');
    buttons.forEach(button => {
        button.addEventListener('click', function(e) {
            // Create ripple effect
            const ripple = document.createElement('span');
            const rect = this.getBoundingClientRect();
            const size = Math.max(rect.width, rect.height);
            const x = e.clientX - rect.left - size / 2;
            const y = e.clientY - rect.top - size / 2;
            
            ripple.style.width = ripple.style.height = size + 'px';
            ripple.style.left = x + 'px';
            ripple.style.top = y + 'px';
            ripple.classList.add('ripple');
            
            this.appendChild(ripple);
            
            setTimeout(() => {
                ripple.remove();
            }, 600);
        });
    });
});

// Add CSS for ripple effect
const style = document.createElement('style');
style.textContent = `
    button {
        position: relative;
        overflow: hidden;
    }
    
    .ripple {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transform: scale(0);
        animation: ripple-animation 0.6s linear;
        pointer-events: none;
    }
    
    @keyframes ripple-animation {
        to {
            transform: scale(4);
            opacity: 0;
        }
    }
`;
document.head.appendChild(style);