script.js

// Mobile Menu Toggle
function toggleMobileMenu() {
    const mobileMenu = document.getElementById('mobile-menu');
    mobileMenu.classList.toggle('hidden');
}

// Smooth Scroll for Anchor Links
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'
            });
        }
    });
});

// Form Submission Handler
document.querySelectorAll('form').forEach(form => {
    form.addEventListener('submit', async (e) => {
        e.preventDefault();
        
        const submitButton = form.querySelector('button[type="submit"]');
        const originalText = submitButton.textContent;
        
        // Show loading state
        submitButton.innerHTML = '<span class="loading"></span> Processing...';
        submitButton.disabled = true;
        
        // Simulate API call
        await new Promise(resolve => setTimeout(resolve, 2000));
        
        // Show success message
        submitButton.textContent = '✓ Success!';
        submitButton.classList.add('bg-green-600');
        
        // Reset form after delay
        setTimeout(() => {
            form.reset();
            submitButton.textContent = originalText;
            submitButton.classList.remove('bg-green-600');
            submitButton.disabled = false;
        }, 3000);
    });
});

// Intersection Observer for Animations
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.addEventListener('DOMContentLoaded', () => {
    const animatedElements = document.querySelectorAll('.service-card, .testimonial-card, .blog-card');
    animatedElements.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);
    });
});

// Dynamic Year in Footer
const currentYear = new Date().getFullYear();
const yearElements = document.querySelectorAll('.current-year');
yearElements.forEach(el => {
    el.textContent = currentYear;
});

// Phone Number Formatting
const phoneInputs = document.querySelectorAll('input[type="tel"]');
phoneInputs.forEach(input => {
    input.addEventListener('input', function(e) {
        let phone = e.target.value.replace(/\D/g, '');
        let formatted = phone;
        
        if (phone.length >= 6) {
            formatted = `(${phone.slice(0, 3)}) ${phone.slice(3, 6)}-${phone.slice(6, 10)}`;
        } else if (phone.length >= 3) {
            formatted = `(${phone.slice(0, 3)}) ${phone.slice(3)}`;
        }
        
        e.target.value = formatted;
    });
});

// Insurance Checker
function checkInsurance() {
    const insuranceChecker = document.createElement('div');
    insuranceChecker.innerHTML = `
        <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div class="bg-gray-800 p-8 rounded-2xl max-w-md w-full mx-4">
                <h3 class="text-2xl font-bold mb-4">Check Your Insurance</h3>
                <input type="text" placeholder="Enter Insurance Provider" class="form-input mb-4">
                <input type="text" placeholder="Policy Number (Optional)" class="form-input mb-6">
                <div class="flex gap-4">
                    <button onclick="this.parentElement.parentElement.parentElement.remove()" class="flex-1 py-3 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors">
                        Cancel
                    </button>
                    <button onclick="checkCoverage(this)" class="flex-1 py-3 bg-primary-600 hover:bg-primary-700 rounded-lg transition-colors">
                        Check Coverage
                    </button>
                </div>
            </div>
        </div>
    `;
    document.body.appendChild(insuranceChecker);
}

function checkCoverage(button) {
    button.innerHTML = '<span class="loading"></span> Checking...';
    button.disabled = true;
    
    setTimeout(() => {
        const modal = button.closest('.fixed');
        modal.innerHTML = `
            <div class="bg-gray-800 p-8 rounded-2xl max-w-md w-full mx-4 text-center">
                <i data-feather="check-circle" class="w-16 h-16 text-green-400 mx-auto mb-4"></i>
                <h3 class="text-2xl font-bold mb-2">Coverage Confirmed!</h3>
                <p class="text-gray-300 mb-6">Your insurance covers 80% of preventive care and 50% of major procedures.</p>
                <button onclick="this.parentElement.parentElement.parentElement.remove()" class="py-3 bg-primary-600 hover:bg-primary-700 rounded-lg transition-colors px-8">
                    Great!
                </button>
            </div>
        `;
        feather.replace();
    }, 2000);
}

// Add click event to insurance check button
document.addEventListener('DOMContentLoaded', () => {
    const insuranceButton = document.querySelector('button[onclick="checkInsurance()"]');
    if (insuranceButton) {
        insuranceButton.addEventListener('click', checkInsurance);
    }
});

// Real-time Form Validation
function validateForm() {
    const inputs = document.querySelectorAll('.form-input');
    inputs.forEach(input => {
        input.addEventListener('blur', function() {
            if (this.value.trim() === '' && this.hasAttribute('required')) {
                this.classList.add('border-red-500');
                this.classList.remove('border-green-500');
            } else if (this.value.trim() !== '') {
                this.classList.add('border-green-500');
                this.classList.remove('border-red-500');
            }
        });
        
        input.addEventListener('input', function() {
            if (this.classList.contains('border-red-500') && this.value.trim() !== '') {
                this.classList.remove('border-red-500');
                this.classList.add('border-green-500');
            }
        });
    });
}

// Initialize validation
validateForm();

// Dark mode detection and persistence
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark');
} else {
    document.documentElement.classList.remove('dark');
}

window.toggleDarkMode = function() {
    if (document.documentElement.classList.contains('dark')) {
        document.documentElement.classList.remove('dark');
        localStorage.theme = 'light';
    } else {
        document.documentElement.classList.add('dark');
        localStorage.theme = 'dark';
    }
};