index.php

<script>
    /*
    REQUIRED: Create settings_api.php that returns JSON like this:

    <?php
    // Database connection
    $pdo = new PDO("mysql:host=localhost;dbname=your_db", $username, $password);

    if ($_GET['action'] === 'settings') {
        $stmt = $pdo->prepare("SELECT setting_key, setting_value FROM firm_settings WHERE is_public = TRUE");
        $stmt->execute();
        $settings = $stmt->fetchAll(PDO::FETCH_ASSOC);

        echo json_encode([
            'success' => true,
            'data' => $settings
        ]);
    }
    ?>

    Expected JSON response format:
    {
        "success": true,
        "data": [
            {"setting_key": "firm_name", "setting_value": "Excellence Law Firm"},
            {"setting_key": "firm_tagline", "setting_value": "Justice. Excellence. Results."},
            {"setting_key": "firm_phone", "setting_value": "+1 (555) 123-4567"},
            ...
        ]
    }
    */

    // Dynamic Homepage Content Manager
    class HomepageManager {
        constructor() {
            this.apiEndpoints = {
                services: 'admin_api.php?action=services',
                cases: 'admin_api.php?action=cases',
                blog: 'blog_api.php?action=posts&status=published',
                testimonials: 'testimonials_api.php?action=testimonials&status=approved',
                settings: 'settings_api.php?action=settings' // Should return firm_settings table data
            };
            this.currentTestimonial = 0;
            this.testimonials = [];
            this.firmSettings = {};
            this.init();
        }

        async init() {
            console.log('🚀 Initializing dynamic homepage...');

            // Load firm settings first
            await this.loadFirmSettings();

            // Load all content
            await Promise.all([
                this.loadServices(),
                this.loadTestimonials(),
                this.loadBlogPosts(),
                this.updateStats()
            ]);

            // Setup interactions
            this.setupNavigation();
            this.setupTestimonialSlider();
            this.setupScrollEffects();
            this.setupFeedbackSection();

            console.log('✅ Homepage initialization complete');
        }

        async apiRequest(url) {
            try {
                const response = await fetch(url);
                const result = await response.json();
                return result.success ? result.data : null;
            } catch (error) {
                console.error('API request failed:', error);
                return null;
            }
        }

        async loadFirmSettings() {
            try {
                console.log('📋 Loading firm settings from database...');
                const settings = await this.apiRequest(this.apiEndpoints.settings);
                if (settings && Array.isArray(settings)) {
                    // Convert array of settings to object
                    this.firmSettings = settings.reduce((acc, setting) => {
                        acc[setting.setting_key] = setting.setting_value;
                        return acc;
                    }, {});
                    console.log('✅ Firm settings loaded:', this.firmSettings);
                    this.applyFirmSettings();
                } else {
                    console.warn('⚠️ No settings returned from API, using defaults');
                    this.setDefaultSettings();
                }
            } catch (error) {
                console.error('❌ Failed to load firm settings:', error);
                this.setDefaultSettings();
            }
        }

        setDefaultSettings() {
            // Minimal fallbacks only if API completely fails
            this.firmSettings = {
                firm_name: 'Law Firm',
                firm_tagline: 'Professional Legal Services',
                firm_address: 'Contact us for address',
                firm_phone: 'Contact us',
                firm_email: 'info@lawfirm.com',
                firm_founded: new Date().getFullYear() - 25,
                office_hours: 'Contact us for office hours',
                emergency_contact: 'Contact us'
            };
            this.applyFirmSettings();
        }

        applyFirmSettings() {
            // Calculate years of experience from firm_founded
            const currentYear = new Date().getFullYear();
            const foundedYear = parseInt(this.firmSettings.firm_founded) || currentYear - 25;
            const yearsExperience = currentYear - foundedYear;

            // Create dynamic hero content
            const heroTitle = this.firmSettings.firm_tagline || 'Excellence in Legal Representation';
            const heroSubtitle = `Professional legal services since ${foundedYear}. Proven results, personalized attention, and unwavering commitment to your success.`;

            // Update firm name in multiple places
            const firmNameElements = document.querySelectorAll('#firmName, #footerFirmName, #firmNameForm');
            firmNameElements.forEach(el => {
                if (el) el.textContent = this.firmSettings.firm_name || 'Excellence Law Firm';
            });

            // Update hero section
            const heroTitleEl = document.getElementById('heroTitle');
            if (heroTitleEl) heroTitleEl.textContent = heroTitle;

            const heroSubtitleEl = document.getElementById('heroSubtitle');
            if (heroSubtitleEl) heroSubtitleEl.textContent = heroSubtitle;

            // Update contact information
            const phoneButton = document.getElementById('phoneButton');
            const footerPhone = document.getElementById('footerPhone');
            if (phoneButton && this.firmSettings.firm_phone) {
                phoneButton.href = `tel:${this.firmSettings.firm_phone}`;
                phoneButton.innerHTML = `<i class="fas fa-phone"></i> Call ${this.firmSettings.firm_phone}`;
            }
            if (footerPhone && this.firmSettings.firm_phone) {
                footerPhone.href = `tel:${this.firmSettings.firm_phone}`;
                footerPhone.innerHTML = `<i class="fas fa-phone"></i> ${this.firmSettings.firm_phone}`;
            }

            const emailButton = document.getElementById('emailButton');
            const footerEmail = document.getElementById('footerEmail');
            if (emailButton && this.firmSettings.firm_email) {
                emailButton.href = `mailto:${this.firmSettings.firm_email}`;
                emailButton.innerHTML = `<i class="fas fa-envelope"></i> Email Us`;
            }
            if (footerEmail && this.firmSettings.firm_email) {
                footerEmail.href = `mailto:${this.firmSettings.firm_email}`;
                footerEmail.innerHTML = `<i class="fas fa-envelope"></i> ${this.firmSettings.firm_email}`;
            }

            // Update address
            const footerAddress = document.getElementById('footerAddress');
            if (footerAddress && this.firmSettings.firm_address) {
                footerAddress.innerHTML = `<i class="fas fa-map-marker-alt"></i> ${this.firmSettings.firm_address.replace(/,/g, '<br>')}`;
            }

            // Update office hours and emergency contact
            const officeHours = document.getElementById('officeHours');
            if (officeHours && this.firmSettings.office_hours) {
                officeHours.innerHTML = this.firmSettings.office_hours.replace(/\n/g, '<br>');
            }

            const emergencyContact = document.getElementById('emergencyContact');
            if (emergencyContact && this.firmSettings.emergency_contact) {
                emergencyContact.innerHTML = `<i class="fas fa-phone-alt"></i> Emergency: <a href="tel:${this.firmSettings.emergency_contact}" style="color: var(--accent-gold);">${this.firmSettings.emergency_contact}</a>`;
            }

            // Update description (use tagline + firm info)
            const footerDescription = document.getElementById('footerDescription');
            if (footerDescription) {
                const description = `${this.firmSettings.firm_tagline || 'Professional Excellence'}. Serving clients since ${foundedYear} with unwavering commitment to justice and results.`;
                footerDescription.textContent = description;
            }

            // Update copyright
            const footerCopyright = document.getElementById('footerCopyright');
            if (footerCopyright) {
                footerCopyright.textContent = `© ${currentYear} ${this.firmSettings.firm_name || 'Excellence Law Firm'}. All rights reserved. | Privacy Policy | Terms of Service`;
            }

            // Update document title
            document.title = `${this.firmSettings.firm_name || 'Excellence Law Firm'} - ${this.firmSettings.firm_tagline || 'Premier Legal Services'}`;

            // Store calculated stats for later use
            this.calculatedStats = {
                yearsExperience: yearsExperience + '+',
                casesWon: Math.round(yearsExperience * 20) + '+', // Estimate based on years
                clientsSatisfied: Math.round(yearsExperience * 40) + '+'  // Estimate based on years
            };
        }

        async loadServices() {
            try {
                const services = await this.apiRequest(this.apiEndpoints.services);
                if (services && services.length > 0) {
                    this.renderServices(services.filter(s => s.is_active));
                } else {
                    this.showServicesFallback();
                }
            } catch (error) {
                this.showServicesFallback();
            } finally {
                document.getElementById('servicesLoading').style.display = 'none';
                document.getElementById('servicesGrid').style.display = 'grid';
            }
        }

        renderServices(services) {
            const grid = document.getElementById('servicesGrid');

            grid.innerHTML = services.map(service => `
                    <div class="service-card">
                        <div class="service-icon">
                            <i class="${service.icon || 'fas fa-balance-scale'}"></i>
                        </div>
                        <h3 class="service-title">${service.title || service.name}</h3>
                        <p class="service-description">${service.description}</p>
                        <a href="#contact" class="service-link" onclick="showSection('contact')">
                            Learn More
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                `).join('');
        }

        showServicesFallback() {
            const fallbackServices = [
                {
                    title: 'Corporate Law',
                    description: 'Comprehensive corporate legal services including business formation, mergers & acquisitions, and compliance.',
                    icon: 'fas fa-building'
                },
                {
                    title: 'Employment Law',
                    description: 'Expert employment law representation covering workplace disputes and labor negotiations.',
                    icon: 'fas fa-users'
                },
                {
                    title: 'Litigation',
                    description: 'Aggressive litigation representation with a proven track record of successful outcomes.',
                    icon: 'fas fa-gavel'
                }
            ];

            this.renderServices(fallbackServices);
        }

        async loadTestimonials() {
            try {
                const testimonials = await this.apiRequest(this.apiEndpoints.testimonials);
                if (testimonials && testimonials.length > 0) {
                    this.testimonials = testimonials.filter(t => t.is_approved);
                    this.renderTestimonials();
                } else {
                    this.showTestimonialsFallback();
                }
            } catch (error) {
                this.showTestimonialsFallback();
            } finally {
                document.getElementById('testimonialsLoading').style.display = 'none';
                document.getElementById('testimonialsSlider').style.display = 'block';
            }
        }

        renderTestimonials() {
            const slider = document.getElementById('testimonialsSlider');
            const nav = document.getElementById('testimonialNav');

            const testimonialsHTML = this.testimonials.map((testimonial, index) => {
                const stars = '★'.repeat(testimonial.rating) + '☆'.repeat(5 - testimonial.rating);
                const isActive = index === 0 ? 'active' : '';

                return `
                        <div class="testimonial-item ${isActive}" onclick="homepageManager.goToFeedbackSection()" style="cursor: pointer;">
                            <p class="testimonial-text">"${testimonial.testimonial}"</p>
                            <div class="testimonial-author">
                                <div class="author-avatar">
                                    ${testimonial.client_image ?
                    `<img src="${testimonial.client_image}" alt="${testimonial.client_name}" style="width:100%;height:100%;border-radius:50%;object-fit:cover;">` :
                    testimonial.client_name.charAt(0)
                }
                                </div>
                                <div class="author-info">
                                    <h4>${testimonial.client_name}</h4>
                                    <p>${testimonial.client_title ? testimonial.client_title : ''}${testimonial.client_company ? (testimonial.client_title ? ', ' : '') + testimonial.client_company : ''}</p>
                                    <div class="testimonial-rating">${stars}</div>
                                </div>
                            </div>
                            <div style="margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(184, 134, 11, 0.2); color: var(--primary-gold); font-size: 0.9rem; font-weight: 500;">
                                <i class="fas fa-mouse-pointer"></i> Click to view all feedback & share yours
                            </div>
                        </div>
                    `;
            }).join('');

            const navHTML = this.testimonials.map((_, index) =>
                `<div class="nav-dot ${index === 0 ? 'active' : ''}" onclick="homepageManager.setTestimonial(${index})"></div>`
            ).join('');

            slider.innerHTML = testimonialsHTML + nav.outerHTML;
            nav.innerHTML = navHTML;
        }

        showTestimonialsFallback() {
            this.testimonials = [
                {
                    client_name: 'Robert Chen',
                    client_title: 'CEO',
                    client_company: 'Tech Innovations Inc.',
                    testimonial: 'Excellence Law Firm provided outstanding legal counsel during our recent acquisition. Their expertise and attention to detail made the entire process seamless.',
                    rating: 5
                },
                {
                    client_name: 'Maria Rodriguez',
                    client_title: 'HR Director',
                    client_company: 'Global Manufacturing Corp.',
                    testimonial: 'Sarah Johnson and her employment law team helped us navigate complex workplace issues with professionalism and expertise.',
                    rating: 5
                }
            ];

            this.renderTestimonials();
        }

        async loadBlogPosts() {
            try {
                const posts = await this.apiRequest(this.apiEndpoints.blog);
                if (posts && posts.length > 0) {
                    this.renderBlogPosts(posts.slice(0, 3));
                } else {
                    this.showBlogFallback();
                }
            } catch (error) {
                this.showBlogFallback();
            } finally {
                document.getElementById('blogLoading').style.display = 'none';
                document.getElementById('blogGrid').style.display = 'grid';
            }
        }

        renderBlogPosts(posts) {
            const grid = document.getElementById('blogGrid');

            grid.innerHTML = posts.map(post => {
                const publishDate = new Date(post.published_at || post.created_at).toLocaleDateString();
                const excerpt = post.excerpt || post.content.replace(/<[^>]*>/g, '').substring(0, 150) + '...';

                return `
                        <article class="blog-card">
                            <div class="blog-image">
                                ${post.featured_image ?
                    `<img src="${post.featured_image}" alt="${post.title}" style="width:100%;height:100%;object-fit:cover;">` :
                    '<i class="fas fa-newspaper"></i>'
                }
                            </div>
                            <div class="blog-content">
                                <div class="blog-meta">
                                    <i class="far fa-calendar"></i> ${publishDate}
                                    <span style="margin-left: 1rem;">
                                        <i class="far fa-user"></i> ${post.author_name || 'Legal Team'}
                                    </span>
                                </div>
                                <h3 class="blog-title">${post.title}</h3>
                                <p class="blog-excerpt">${excerpt}</p>
                                <a href="#" class="blog-link" onclick="showComingSoon('Blog Article')">
                                    Read More
                                    <i class="fas fa-arrow-right"></i>
                                </a>
                            </div>
                        </article>
                    `;
            }).join('');
        }

        showBlogFallback() {
            const fallbackPosts = [
                {
                    title: 'Understanding Employment Law: Your Rights and Protections',
                    excerpt: 'A comprehensive guide to understanding your fundamental employment rights and what to do when they are violated.',
                    author_name: 'Legal Team',
                    published_at: new Date().toISOString()
                },
                {
                    title: 'Recent Changes in Corporate Law: What Businesses Need to Know',
                    excerpt: 'Stay ahead of the curve with insights into recent corporate law changes and compliance strategies for modern businesses.',
                    author_name: 'Legal Team',
                    published_at: new Date().toISOString()
                },
                {
                    title: 'Intellectual Property Protection for Small Businesses',
                    excerpt: 'A comprehensive guide to protecting your small business\'s intellectual property assets and building a strong IP portfolio.',
                    author_name: 'Legal Team',
                    published_at: new Date().toISOString()
                }
            ];

            this.renderBlogPosts(fallbackPosts);
        }

        async updateStats() {
            try {
                // Use calculated stats from firm settings
                const stats = this.calculatedStats || {
                    yearsExperience: '25+',
                    casesWon: '500+',
                    clientsSatisfied: '1000+'
                };

                Object.entries(stats).forEach(([key, value]) => {
                    const element = document.getElementById(key);
                    if (element) {
                        this.animateNumber(element, value);
                    }
                });
            } catch (error) {
                console.error('Failed to update stats:', error);
            }
        }

        animateNumber(element, finalValue) {
            const isPlus = finalValue.includes('+');
            const number = parseInt(finalValue.replace('+', ''));
            const duration = 2000;
            const steps = 60;
            const increment = number / steps;
            let current = 0;

            const timer = setInterval(() => {
                current += increment;
                if (current >= number) {
                    element.textContent = finalValue;
                    clearInterval(timer);
                } else {
                    element.textContent = Math.floor(current) + (isPlus ? '+' : '');
                }
            }, duration / steps);
        }

        setupNavigation() {
            const navbar = document.getElementById('navbar');
            const mobileToggle = document.getElementById('mobile-toggle');
            const navMenu = document.getElementById('nav-menu');

            // Scroll effect
            window.addEventListener('scroll', () => {
                if (window.scrollY > 100) {
                    navbar.classList.add('scrolled');
                } else {
                    navbar.classList.remove('scrolled');
                }
            });

            // Mobile menu toggle
            mobileToggle.addEventListener('click', () => {
                navMenu.classList.toggle('active');
            });

            // Update active nav links
            document.querySelectorAll('.nav-link').forEach(link => {
                link.addEventListener('click', (e) => {
                    document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
                    e.target.classList.add('active');
                });
            });
        }

        setupTestimonialSlider() {
            if (this.testimonials.length > 1) {
                setInterval(() => {
                    this.nextTestimonial();
                }, 5000);
            }
        }

        setTestimonial(index) {
            this.currentTestimonial = index;

            document.querySelectorAll('.testimonial-item').forEach((item, i) => {
                item.classList.toggle('active', i === index);
            });

            document.querySelectorAll('.nav-dot').forEach((dot, i) => {
                dot.classList.toggle('active', i === index);
            });
        }

        nextTestimonial() {
            this.currentTestimonial = (this.currentTestimonial + 1) % this.testimonials.length;
            this.setTestimonial(this.currentTestimonial);
        }

        setupScrollEffects() {
            const observerOptions = {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            };

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.animation = 'fadeInUp 0.6s ease-out forwards';
                    }
                });
            }, observerOptions);

            document.querySelectorAll('.service-card, .blog-card').forEach(el => {
                observer.observe(el);
            });
        }

        // Feedback Section Methods
        goToFeedbackSection() {
            showSection('feedback');
            setTimeout(() => {
                switchFeedbackTab('view');
            }, 300);
        }

        setupFeedbackSection() {
            this.loadAllFeedback();
            this.setupFeedbackForm();
            this.setupRatingInput();
        }

        async loadAllFeedback() {
            try {
                const testimonials = await this.apiRequest(this.apiEndpoints.testimonials);
                if (testimonials && testimonials.length > 0) {
                    const approvedTestimonials = testimonials.filter(t => t.is_approved);
                    this.renderAllFeedback(approvedTestimonials);
                    this.calculateFeedbackStats(approvedTestimonials);
                } else {
                    this.showFeedbackFallback();
                }
            } catch (error) {
                this.showFeedbackFallback();
            } finally {
                document.getElementById('allFeedbackLoading').style.display = 'none';
                document.getElementById('allFeedbackGrid').style.display = 'grid';
                document.getElementById('feedbackStats').style.display = 'block';
            }
        }

        renderAllFeedback(testimonials) {
            const grid = document.getElementById('allFeedbackGrid');

            grid.innerHTML = testimonials.map(testimonial => {
                const stars = '★'.repeat(testimonial.rating) + '☆'.repeat(5 - testimonial.rating);
                const clientTitle = testimonial.client_title ? testimonial.client_title : '';
                const clientCompany = testimonial.client_company ? testimonial.client_company : '';
                const clientInfo = [clientTitle, clientCompany].filter(Boolean).join(', ');
                const createdDate = new Date(testimonial.created_at).toLocaleDateString();

                return `
                        <div class="feedback-card">
                            <div class="feedback-header">
                                <div class="feedback-avatar">
                                    ${testimonial.client_image ?
                    `<img src="${testimonial.client_image}" alt="${testimonial.client_name}" style="width:100%;height:100%;border-radius:50%;object-fit:cover;">` :
                    testimonial.client_name.charAt(0)
                }
                                </div>
                                <div class="feedback-author">
                                    <h4>${testimonial.client_name}</h4>
                                    ${clientInfo ? `<p>${clientInfo}</p>` : ''}
                                </div>
                                <div class="feedback-rating">${stars}</div>
                            </div>
                            <div class="feedback-text">"${testimonial.testimonial}"</div>
                            <div class="feedback-meta">
                                <span>${testimonial.case_title ? `Case: ${testimonial.case_title}` : 'General Review'}</span>
                                <span>${createdDate}</span>
                            </div>
                        </div>
                    `;
            }).join('');
        }

        calculateFeedbackStats(testimonials) {
            if (testimonials.length === 0) return;

            const totalReviews = testimonials.length;
            const totalRating = testimonials.reduce((sum, t) => sum + t.rating, 0);
            const averageRating = (totalRating / totalReviews).toFixed(1);
            const fiveStarCount = testimonials.filter(t => t.rating === 5).length;
            const fiveStarPercent = Math.round((fiveStarCount / totalReviews) * 100);

            document.getElementById('totalReviews').textContent = totalReviews;
            document.getElementById('averageRating').textContent = averageRating;
            document.getElementById('fiveStarPercent').textContent = fiveStarPercent + '%';
        }

        showFeedbackFallback() {
            const fallbackFeedback = [
                {
                    client_name: 'Robert Chen',
                    client_title: 'CEO',
                    client_company: 'Tech Innovations Inc.',
                    testimonial: 'Excellence Law Firm provided outstanding legal counsel during our recent acquisition. Their expertise in corporate law and attention to detail made the entire process seamless.',
                    rating: 5,
                    created_at: new Date().toISOString(),
                    is_approved: true
                },
                {
                    client_name: 'Maria Rodriguez',
                    client_title: 'HR Director',
                    client_company: 'Global Manufacturing Corp.',
                    testimonial: 'Sarah Johnson and her employment law team helped us navigate complex workplace issues with professionalism and expertise.',
                    rating: 5,
                    created_at: new Date().toISOString(),
                    is_approved: true
                }
            ];

            this.renderAllFeedback(fallbackFeedback);
            this.calculateFeedbackStats(fallbackFeedback);
        }

        setupFeedbackForm() {
            const form = document.getElementById('feedbackForm');
            const textArea = document.getElementById('feedbackText');
            const charCount = document.getElementById('charCount');

            // Character counter
            textArea.addEventListener('input', () => {
                const count = textArea.value.length;
                charCount.textContent = count;

                if (count > 500) {
                    charCount.style.color = '#dc3545';
                    textArea.style.borderColor = '#dc3545';
                } else {
                    charCount.style.color = '#6c757d';
                    textArea.style.borderColor = '#e9ecef';
                }
            });

            // Form submission
            form.addEventListener('submit', (e) => {
                e.preventDefault();
                this.submitFeedback();
            });
        }

        setupRatingInput() {
            const stars = document.querySelectorAll('.star-large');
            let currentRating = 5;

            stars.forEach(star => {
                star.addEventListener('click', (e) => {
                    currentRating = parseInt(e.target.dataset.rating);
                    document.getElementById('userRating').value = currentRating;
                    this.updateStarDisplay(currentRating);
                });

                star.addEventListener('mouseenter', (e) => {
                    const hoverRating = parseInt(e.target.dataset.rating);
                    this.updateStarDisplay(hoverRating);
                });
            });

            document.getElementById('ratingInputLarge').addEventListener('mouseleave', () => {
                this.updateStarDisplay(currentRating);
            });

            // Set initial rating
            this.updateStarDisplay(5);
        }

        updateStarDisplay(rating) {
            const stars = document.querySelectorAll('.star-large');
            stars.forEach((star, index) => {
                if (index < rating) {
                    star.classList.add('active');
                } else {
                    star.classList.remove('active');
                }
            });
        }

        async submitFeedback() {
            const form = document.getElementById('feedbackForm');
            const formData = new FormData(form);

            const feedbackData = {
                client_name: formData.get('clientName'),
                client_title: formData.get('clientTitle'),
                client_company: formData.get('clientCompany'),
                testimonial: formData.get('feedback'),
                rating: parseInt(formData.get('rating')),
                client_email: formData.get('clientEmail'),
                service_type: formData.get('serviceType'),
                is_approved: false, // Always false for user submissions
                is_featured: false,
                allow_public: formData.get('allowPublic') === 'on'
            };

            try {
                const response = await fetch('testimonials_api.php?action=testimonial', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(feedbackData)
                });

                const result = await response.json();

                if (result.success) {
                    this.showFeedbackSuccess();
                    form.reset();
                    this.updateStarDisplay(5);
                    document.getElementById('charCount').textContent = '0';
                } else {
                    this.showFeedbackError(result.error);
                }
            } catch (error) {
                console.error('Failed to submit feedback:', error);
                this.showFeedbackError('Network error. Please try again.');
            }
        }

        showFeedbackSuccess() {
            const successMessage = document.createElement('div');
            successMessage.className = 'feedback-success';
            successMessage.innerHTML = `
                    <div style="background: #d4edda; color: #155724; padding: 1.5rem; border-radius: 10px; text-align: center; margin: 1rem 0;">
                        <i class="fas fa-check-circle" style="font-size: 2rem; margin-bottom: 1rem;"></i>
                        <h4>Thank You for Your Feedback!</h4>
                        <p>Your review has been submitted and will be reviewed by our team before being published. We appreciate you taking the time to share your experience.</p>
                    </div>
                `;

            const formContainer = document.querySelector('.feedback-form-container');
            formContainer.insertBefore(successMessage, formContainer.firstChild);

            setTimeout(() => {
                successMessage.remove();
            }, 5000);
        }

        showFeedbackError(message) {
            const errorMessage = document.createElement('div');
            errorMessage.className = 'feedback-error';
            errorMessage.innerHTML = `
                    <div style="background: #f8d7da; color: #721c24; padding: 1.5rem; border-radius: 10px; text-align: center; margin: 1rem 0;">
                        <i class="fas fa-exclamation-triangle" style="font-size: 2rem; margin-bottom: 1rem;"></i>
                        <h4>Submission Error</h4>
                        <p>${message}</p>
                    </div>
                `;

            const formContainer = document.querySelector('.feedback-form-container');
            formContainer.insertBefore(errorMessage, formContainer.firstChild);

            setTimeout(() => {
                errorMessage.remove();
            }, 5000);
        }
    }

    // Section Management
    function showSection(sectionName) {
        // Hide all sections
        document.querySelectorAll('.section').forEach(section => {
            section.classList.remove('active');
        });

        // Show selected section
        const targetSection = document.getElementById(sectionName + 'Section');
        if (targetSection) {
            targetSection.classList.add('active');
        }

        // Update nav active state
        document.querySelectorAll('.nav-link').forEach(link => {
            link.classList.remove('active');
            if (link.getAttribute('onclick') && link.getAttribute('onclick').includes(sectionName)) {
                link.classList.add('active');
            }
        });

        // Close mobile menu
        document.getElementById('nav-menu').classList.remove('active');

        // Scroll to top
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    // Utility Functions
    function toggleAdminMenu() {
        const menu = document.getElementById('adminMenu');
        menu.classList.toggle('active');
    }

    function showComingSoon(pageName) {
        alert(`${pageName} page is coming soon! This will be implemented in the next phase of development.`);
    }

    function switchFeedbackTab(tabName) {
        // Remove active class from all tabs and contents
        document.querySelectorAll('.feedback-tab').forEach(tab => {
            tab.classList.remove('active');
        });
        document.querySelectorAll('.feedback-content').forEach(content => {
            content.classList.remove('active');
        });

        // Add active class to selected tab and content
        if (tabName === 'view') {
            document.querySelector('.feedback-tab:first-child').classList.add('active');
            document.getElementById('viewFeedbackTab').classList.add('active');
        } else if (tabName === 'add') {
            document.querySelector('.feedback-tab:last-child').classList.add('active');
            document.getElementById('addFeedbackTab').classList.add('active');
        }
    }

    function handleAdminAuth() {
        alert('Admin authentication system will be implemented in the next phase of development.');
    }

    // Initialize Homepage Manager
    let homepageManager;
    document.addEventListener('DOMContentLoaded', () => {
        homepageManager = new HomepageManager();

        // Navigation Setup
        const navbar = document.getElementById('navbar');
        const mobileToggle = document.getElementById('mobile-toggle');
        const navMenu = document.getElementById('nav-menu');

        // Scroll effect
        window.addEventListener('scroll', () => {
            if (window.scrollY > 100) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });

        // Mobile menu toggle
        mobileToggle.addEventListener('click', () => {
            navMenu.classList.toggle('active');
        });

        // Close mobile menu when clicking outside
        document.addEventListener('click', (e) => {
            if (!mobileToggle.contains(e.target) && !navMenu.contains(e.target)) {
                navMenu.classList.remove('active');
            }
        });

        // Update active nav links
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', (e) => {
                document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
                e.target.classList.add('active');
            });
        });
    });

    // Close admin menu when clicking outside
    document.addEventListener('click', (e) => {
        const adminPanel = document.querySelector('.admin-panel');
        const adminMenu = document.getElementById('adminMenu');

        if (adminPanel && !adminPanel.contains(e.target)) {
            adminMenu.classList.remove('active');
        }
    });
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Excellence Law Firm - Premier Legal Services</title>
    <meta name="description" content="Excellence Law Firm provides premier legal services with experienced attorneys, proven results, and personalized attention to your legal needs.">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary-gold: #B8860B;
            --dark-blue: #1a2332;
            --light-blue: #2c3e50;
            --accent-gold: #DAA520;
            --text-dark: #2c3e50;
            --text-light: #6c757d;
            --bg-light: #f8f9fa;
            --white: #ffffff;
            --shadow: 0 10px 30px rgba(0,0,0,0.1);
            --gradient: linear-gradient(135deg, #1a2332 0%, #2c3e50 100%);
        }

        body {
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            color: var(--text-dark);
            overflow-x: hidden;
        }

        /* Navigation - Fixed Layout */
        .navbar {
            position: fixed;
            top: 0;
            width: 100%;
            background: rgba(26, 35, 50, 0.95);
            backdrop-filter: blur(20px);
            z-index: 1000;
            transition: all 0.3s ease;
            padding: 1rem 0;
        }

        .navbar.scrolled {
            background: rgba(26, 35, 50, 0.98);
            padding: 0.75rem 0;
        }

        .nav-container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 2rem;
            width: 100%;
        }

        /* Logo Section - Left Corner */
        .logo {
            font-family: 'Playfair Display', serif;
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--accent-gold);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-shrink: 0;
        }

        .logo i {
            font-size: 2.2rem;
        }

        .logo span {
            white-space: nowrap;
        }

        /* Navigation Menu - Right Corner */
        .nav-menu {
            display: flex;
            list-style: none;
            gap: 2.5rem;
            align-items: center;
            margin-left: auto;
        }

        .nav-item {
            position: relative;
        }

        .nav-link {
            color: var(--white);
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            padding: 0.75rem 1.25rem;
            border-radius: 8px;
            font-size: 0.95rem;
            white-space: nowrap;
        }

        .nav-link:hover,
        .nav-link.active {
            color: var(--accent-gold);
            background: rgba(218, 165, 32, 0.1);
            transform: translateY(-1px);
        }

        .cta-btn {
            background: var(--primary-gold) !important;
            color: var(--white) !important;
            padding: 0.75rem 1.5rem !important;
            border-radius: 50px !important;
            font-weight: 600 !important;
            transition: all 0.3s ease !important;
            box-shadow: 0 4px 15px rgba(184, 134, 11, 0.3) !important;
            margin-left: 1rem;
        }

        .cta-btn:hover {
            background: var(--accent-gold) !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 6px 20px rgba(184, 134, 11, 0.4) !important;
        }

        /* Mobile Menu Toggle */
        .mobile-toggle {
            display: none;
            flex-direction: column;
            cursor: pointer;
            gap: 4px;
            margin-left: auto;
        }

        .mobile-toggle span {
            width: 25px;
            height: 3px;
            background: var(--white);
            transition: 0.3s;
            border-radius: 2px;
        }

        /* Hero Section */
        .hero {
            height: 100vh;
            background: var(--gradient);
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.1"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="200" cy="200" r="150" fill="url(%23a)"/><circle cx="800" cy="300" r="100" fill="url(%23a)"/><circle cx="400" cy="700" r="120" fill="url(%23a)"/></svg>');
            opacity: 0.3;
        }

        .hero-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .hero-content {
            animation: fadeInUp 1s ease-out;
        }

        .hero-title {
            font-family: 'Playfair Display', serif;
            font-size: 3.5rem;
            font-weight: 700;
            color: var(--white);
            margin-bottom: 1.5rem;
            line-height: 1.2;
        }

        .hero-subtitle {
            font-size: 1.3rem;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 2rem;
            font-weight: 300;
        }

        .hero-stats {
            display: flex;
            gap: 2rem;
            margin-bottom: 2.5rem;
        }

        .stat-item {
            text-align: center;
        }

        .stat-number {
            font-size: 2rem;
            font-weight: 700;
            color: var(--accent-gold);
            display: block;
        }

        .stat-label {
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.8);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .hero-buttons {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .btn {
            padding: 1rem 2rem;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            border: none;
            font-size: 1rem;
        }

        .btn-primary {
            background: var(--primary-gold);
            color: var(--white);
            box-shadow: 0 4px 15px rgba(184, 134, 11, 0.3);
        }

        .btn-primary:hover {
            background: var(--accent-gold);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(184, 134, 11, 0.4);
        }

        .btn-outline {
            background: transparent;
            color: var(--white);
            border: 2px solid var(--white);
        }

        .btn-outline:hover {
            background: var(--white);
            color: var(--dark-blue);
        }

        .hero-visual {
            position: relative;
            animation: fadeInRight 1s ease-out 0.3s both;
        }

        .hero-image {
            width: 100%;
            height: 500px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
            color: var(--accent-gold);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        /* Services Section */
        .services {
            padding: 6rem 0;
            background: var(--bg-light);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .section-header {
            text-align: center;
            margin-bottom: 4rem;
        }

        .section-title {
            font-family: 'Playfair Display', serif;
            font-size: 2.5rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 1rem;
        }

        .section-subtitle {
            font-size: 1.1rem;
            color: var(--text-light);
            max-width: 600px;
            margin: 0 auto;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
        }

        .service-card {
            background: var(--white);
            padding: 2.5rem;
            border-radius: 20px;
            box-shadow: var(--shadow);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: var(--primary-gold);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }

        .service-card:hover::before {
            transform: scaleX(1);
        }

        .service-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--primary-gold), var(--accent-gold));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: var(--white);
            margin-bottom: 1.5rem;
        }

        .service-title {
            font-size: 1.4rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 1rem;
        }

        .service-description {
            color: var(--text-light);
            margin-bottom: 1.5rem;
            line-height: 1.6;
        }

        .service-link {
            color: var(--primary-gold);
            text-decoration: none;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: gap 0.3s ease;
        }

        .service-link:hover {
            gap: 1rem;
        }

        /* Testimonials Section */
        .testimonials {
            padding: 6rem 0;
            background: var(--white);
        }

        .testimonials-slider {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }

        .testimonial-item {
            background: var(--bg-light);
            padding: 3rem;
            border-radius: 20px;
            text-align: center;
            display: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .testimonial-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }

        .testimonial-item.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }

        .testimonial-text {
            font-size: 1.2rem;
            font-style: italic;
            color: var(--text-dark);
            margin-bottom: 2rem;
            line-height: 1.6;
        }

        .testimonial-author {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
        }

        .author-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--primary-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            font-weight: 600;
            font-size: 1.2rem;
        }

        .author-info h4 {
            color: var(--text-dark);
            margin-bottom: 0.2rem;
        }

        .author-info p {
            color: var(--text-light);
            font-size: 0.9rem;
        }

        .testimonial-rating {
            color: var(--accent-gold);
            font-size: 1.2rem;
            margin-top: 0.5rem;
        }

        .testimonial-nav {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-top: 2rem;
        }

        .nav-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ccc;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .nav-dot.active {
            background: var(--primary-gold);
        }

        /* Feedback Section */
        .feedback-section {
            padding: 6rem 0;
            background: var(--bg-light);
        }

        .feedback-tabs {
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin-bottom: 3rem;
        }

        .feedback-tab {
            background: var(--white);
            border: 2px solid var(--primary-gold);
            color: var(--primary-gold);
            padding: 1rem 2rem;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .feedback-tab.active,
        .feedback-tab:hover {
            background: var(--primary-gold);
            color: var(--white);
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(184, 134, 11, 0.3);
        }

        .feedback-content {
            display: none;
        }

        .feedback-content.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }

        .feedback-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
            margin-bottom: 3rem;
        }

        .feedback-card {
            background: var(--white);
            padding: 2rem;
            border-radius: 20px;
            box-shadow: var(--shadow);
            transition: all 0.3s ease;
            position: relative;
            border-left: 4px solid var(--primary-gold);
        }

        .feedback-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }

        .feedback-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .feedback-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--primary-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            font-weight: 600;
            font-size: 1.2rem;
        }

        .feedback-author h4 {
            color: var(--text-dark);
            margin-bottom: 0.2rem;
            font-size: 1.1rem;
        }

        .feedback-author p {
            color: var(--text-light);
            font-size: 0.9rem;
            margin: 0;
        }

        .feedback-rating {
            color: var(--accent-gold);
            font-size: 1.1rem;
            margin-left: auto;
        }

        .feedback-text {
            color: var(--text-dark);
            line-height: 1.6;
            font-style: italic;
            margin-bottom: 1rem;
        }

        .feedback-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
            color: var(--text-light);
        }

        .feedback-stats {
            background: var(--white);
            padding: 2rem;
            border-radius: 20px;
            box-shadow: var(--shadow);
            margin-bottom: 2rem;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 2rem;
            text-align: center;
        }

        .stat-box {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .stat-box .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--primary-gold);
            margin-bottom: 0.5rem;
        }

        .stat-box .stat-label {
            color: var(--text-light);
            text-transform: uppercase;
            font-size: 0.9rem;
            letter-spacing: 1px;
        }

        .feedback-form-container {
            max-width: 800px;
            margin: 0 auto;
            background: var(--white);
            padding: 3rem;
            border-radius: 20px;
            box-shadow: var(--shadow);
        }

        .feedback-form-header {
            text-align: center;
            margin-bottom: 2.5rem;
        }

        .feedback-form-header h3 {
            font-family: 'Playfair Display', serif;
            font-size: 2rem;
            color: var(--text-dark);
            margin-bottom: 1rem;
        }

        .feedback-form-header p {
            color: var(--text-light);
            font-size: 1.1rem;
        }

        .feedback-form {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-group label {
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 0.5rem;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            padding: 1rem;
            border: 2px solid #e9ecef;
            border-radius: 10px;
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--primary-gold);
        }

        .rating-input-large {
            display: flex;
            gap: 0.5rem;
            margin: 0.5rem 0;
        }

        .star-large {
            font-size: 2.5rem;
            color: #ddd;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .star-large.active,
        .star-large:hover {
            color: var(--accent-gold);
            transform: scale(1.1);
        }

        .rating-labels {
            display: flex;
            justify-content: space-between;
            font-size: 0.9rem;
            color: var(--text-light);
        }

        .char-counter {
            text-align: right;
            font-size: 0.85rem;
            color: var(--text-light);
            margin-top: 0.5rem;
        }

        .checkbox-label {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            cursor: pointer;
            font-size: 0.95rem;
            line-height: 1.5;
        }

        .checkbox-label input[type="checkbox"] {
            width: 18px;
            height: 18px;
            margin: 0;
        }

        .checkmark {
            width: 18px;
            height: 18px;
            border: 2px solid var(--primary-gold);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .checkbox-label input[type="checkbox"]:checked + .checkmark {
            background: var(--primary-gold);
        }

        .checkbox-label input[type="checkbox"]:checked + .checkmark::after {
            content: '✓';
            color: var(--white);
            font-weight: bold;
        }

        .form-actions {
            text-align: center;
            margin-top: 2rem;
        }

        .btn-large {
            padding: 1.25rem 3rem;
            font-size: 1.1rem;
        }

        .form-note {
            margin-top: 1rem;
            color: var(--text-light);
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .feedback-actions {
            margin-top: 3rem;
            text-align: center;
        }

        .feedback-actions .btn {
            margin: 0 0.5rem;
        }

        /* Blog Section */
        .blog {
            padding: 6rem 0;
            background: var(--bg-light);
        }

        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
        }

        .blog-card {
            background: var(--white);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: all 0.3s ease;
        }

        .blog-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }

        .blog-image {
            height: 200px;
            background: var(--gradient);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent-gold);
            font-size: 3rem;
        }

        .blog-content {
            padding: 2rem;
        }

        .blog-meta {
            color: var(--text-light);
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }

        .blog-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 1rem;
            line-height: 1.4;
        }

        .blog-excerpt {
            color: var(--text-light);
            margin-bottom: 1.5rem;
            line-height: 1.6;
        }

        .blog-link {
            color: var(--primary-gold);
            text-decoration: none;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: gap 0.3s ease;
        }

        .blog-link:hover {
            gap: 1rem;
        }

        /* CTA Section */
        .cta-section {
            padding: 6rem 0;
            background: var(--gradient);
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .cta-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="b" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.05"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="100" cy="100" r="200" fill="url(%23b)"/><circle cx="900" cy="800" r="150" fill="url(%23b)"/></svg>');
        }

        .cta-content {
            position: relative;
            z-index: 2;
        }

        .cta-title {
            font-family: 'Playfair Display', serif;
            font-size: 2.5rem;
            font-weight: 600;
            color: var(--white);
            margin-bottom: 1rem;
        }

        .cta-subtitle {
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 2rem;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .cta-buttons {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        /* Footer */
        .footer {
            background: var(--dark-blue);
            color: var(--white);
            padding: 3rem 0 1rem;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .footer-section h3 {
            font-family: 'Playfair Display', serif;
            font-size: 1.3rem;
            margin-bottom: 1rem;
            color: var(--accent-gold);
        }

        .footer-section p,
        .footer-section a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            margin-bottom: 0.5rem;
            display: block;
            transition: color 0.3s ease;
        }

        .footer-section a:hover {
            color: var(--accent-gold);
        }

        .social-links {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .social-link {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .social-link:hover {
            background: var(--primary-gold);
            transform: translateY(-2px);
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 1rem;
            text-align: center;
            color: rgba(255, 255, 255, 0.6);
        }

        /* Loading States */
        .loading {
            text-align: center;
            padding: 3rem;
            color: var(--text-light);
        }

        .loading i {
            font-size: 2rem;
            animation: spin 1s linear infinite;
        }

        /* Admin Panel */
        .admin-panel {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 1000;
        }

        .admin-toggle {
            width: 60px;
            height: 60px;
            background: var(--primary-gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            font-size: 1.5rem;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(184, 134, 11, 0.3);
            transition: all 0.3s ease;
        }
        .admin-toggle:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(184, 134, 11, 0.4);
        }

        .admin-menu {
            position: absolute;
            bottom: 70px;
            right: 0;
            background: var(--white);
            border-radius: 15px;
            box-shadow: var(--shadow);
            padding: 1rem;
            min-width: 200px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease;
        }

        .admin-menu.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .admin-menu a {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem;
            color: var(--text-dark);
            text-decoration: none;
            border-radius: 8px;
            transition: background 0.3s ease;
        }

        .admin-menu a:hover {
            background: var(--bg-light);
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .mobile-toggle {
                display: flex;
            }

            .nav-menu {
                position: fixed;
                top: 100%;
                left: 0;
                width: 100%;
                background: var(--dark-blue);
                flex-direction: column;
                padding: 2rem;
                transform: translateX(-100%);
                transition: transform 0.3s ease;
            }

            .nav-menu.active {
                transform: translateX(0);
            }

            .hero-container {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .hero-title {
                font-size: 2.5rem;
            }

            .services-grid,
            .blog-grid {
                grid-template-columns: 1fr;
            }

            .hero-buttons,
            .cta-buttons {
                justify-content: center;
            }

            .hero-stats {
                justify-content: center;
            }
        }

        @media (max-width: 480px) {
            .hero-title {
                font-size: 2rem;
            }

            .section-title {
                font-size: 2rem;
            }

            .container {
                padding: 0 1rem;
            }
        }
    </style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar" id="navbar">
    <div class="nav-container">
        <a href="#home" class="logo">
            <i class="fas fa-balance-scale"></i>
            Excellence Law
        </a>

        <ul class="nav-menu" id="nav-menu">
            <li class="nav-item">
                <a href="#home" class="nav-link active">Home</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link" onclick="showComingSoon('About Us')">About Us</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link" onclick="showComingSoon('Our Services')">Our Services</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link" onclick="showComingSoon('Blog')">Blog</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link" onclick="showComingSoon('Contact Us')">Contact Us</a>
            </li>
            <li class="nav-item">
                <a href="#feedback-page" class="nav-link">Feedback</a>
            </li>
            <li class="nav-item">
                <a href="#contact" class="nav-link cta-btn">Free Consultation</a>
            </li>
        </ul>

        <div class="mobile-toggle" id="mobile-toggle">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</nav>

<!-- Hero Section -->
<section class="hero" id="home">
    <div class="hero-container">
        <div class="hero-content">
            <h1 class="hero-title">Excellence in Legal Representation</h1>
            <p class="hero-subtitle">Professional legal services with proven results, personalized attention, and unwavering commitment to your success.</p>

            <div class="hero-stats">
                <div class="stat-item">
                    <span class="stat-number" id="yearsExperience">25+</span>
                    <span class="stat-label">Years Experience</span>
                </div>
                <div class="stat-item">
                    <span class="stat-number" id="casesWon">500+</span>
                    <span class="stat-label">Cases Won</span>
                </div>
                <div class="stat-item">
                    <span class="stat-number" id="clientsSatisfied">1000+</span>
                    <span class="stat-label">Satisfied Clients</span>
                </div>
            </div>

            <div class="hero-buttons">
                <a href="#contact" class="btn btn-primary">
                    <i class="fas fa-calendar-alt"></i>
                    Schedule Consultation
                </a>
                <a href="#services" class="btn btn-outline">
                    <i class="fas fa-play"></i>
                    Our Services
                </a>
            </div>
        </div>

        <div class="hero-visual">
            <div class="hero-image">
                <i class="fas fa-balance-scale"></i>
            </div>
        </div>
    </div>
</section>

<!-- Services Section -->
<section class="services" id="services">
    <div class="container">
        <div class="section-header">
            <h2 class="section-title">Our Legal Services</h2>
            <p class="section-subtitle">Comprehensive legal solutions tailored to meet your specific needs with expertise you can trust.</p>
        </div>

        <div class="loading" id="servicesLoading">
            <i class="fas fa-spinner"></i>
            <p>Loading our legal services...</p>
        </div>

        <div class="services-grid" id="servicesGrid" style="display: none;">
            <!-- Services will be loaded dynamically -->
        </div>
    </div>
</section>

<!-- Testimonials Section -->
<section class="testimonials" id="testimonials">
    <div class="container">
        <div class="section-header">
            <h2 class="section-title">What Our Clients Say</h2>
            <p class="section-subtitle">Real testimonials from clients who trusted us with their most important legal matters.</p>
        </div>

        <div class="loading" id="testimonialsLoading">
            <i class="fas fa-spinner"></i>
            <p>Loading client testimonials...</p>
        </div>

        <div class="testimonials-slider" id="testimonialsSlider" style="display: none;">
            <!-- Testimonials will be loaded dynamically -->
            <div class="testimonial-nav" id="testimonialNav">
                <!-- Navigation dots will be added dynamically -->
            </div>
        </div>
    </div>
</section>

<!-- Blog Section -->
<section class="blog" id="blog">
    <div class="container">
        <div class="section-header">
            <h2 class="section-title">Latest Legal Insights</h2>
            <p class="section-subtitle">Stay informed with our latest articles on legal trends, case studies, and expert analysis.</p>
        </div>

        <div class="loading" id="blogLoading">
            <i class="fas fa-spinner"></i>
            <p>Loading latest articles...</p>
        </div>

        <div class="blog-grid" id="blogGrid" style="display: none;">
            <!-- Blog posts will be loaded dynamically -->
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="cta-section" id="contact">
    <div class="container">
        <div class="cta-content">
            <h2 class="cta-title">Ready to Get Started?</h2>
            <p class="cta-subtitle">Contact us today for a free consultation and let us help you navigate your legal challenges with confidence.</p>

            <div class="cta-buttons">
                <a href="tel:+15551234567" class="btn btn-primary">
                    <i class="fas fa-phone"></i>
                    Call (555) 123-4567
                </a>
                <a href="mailto:info@excellencelaw.com" class="btn btn-outline">
                    <i class="fas fa-envelope"></i>
                    Email Us
                </a>
            </div>
        </div>
    </div>
</section>

<!-- Footer -->
<footer class="footer">
    <div class="container">
        <div class="footer-content">
            <div class="footer-section">
                <h3>Excellence Law Firm</h3>
                <p>Professional legal services with unwavering commitment to excellence and client satisfaction.</p>
                <div class="social-links">
                    <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>

            <div class="footer-section">
                <h3>Contact Info</h3>
                <a href="tel:+15551234567">
                    <i class="fas fa-phone"></i> (555) 123-4567
                </a>
                <a href="mailto:info@excellencelaw.com">
                    <i class="fas fa-envelope"></i> info@excellencelaw.com
                </a>
                <p>
                    <i class="fas fa-map-marker-alt"></i> 123 Legal Street<br>
                    Law City, LC 12345
                </p>
            </div>

            <div class="footer-section">
                <h3>Practice Areas</h3>
                <a href="#">Corporate Law</a>
                <a href="#">Employment Law</a>
                <a href="#">International Law</a>
                <a href="#">Litigation</a>
                <a href="#">Real Estate Law</a>
            </div>

            <div class="footer-section">
                <h3>Office Hours</h3>
                <p>Monday - Friday: 9:00 AM - 6:00 PM</p>
                <p>Saturday: 10:00 AM - 2:00 PM</p>
                <p>Sunday: Closed</p>
                <p><strong>Emergency consultations available 24/7</strong></p>
            </div>
        </div>

        <div class="footer-bottom">
            <p>&copy; 2024 Excellence Law Firm. All rights reserved. | Privacy Policy | Terms of Service</p>
        </div>
    </div>
</footer>

<!-- Admin Panel -->
<div class="admin-panel">
    <div class="admin-toggle" onclick="toggleAdminMenu()">
        <i class="fas fa-cog"></i>
    </div>
    <div class="admin-menu" id="adminMenu">
        <a href="services-management.html" target="_blank">
            <i class="fas fa-cogs"></i>
            Manage Services
        </a>
        <a href="cases-management.html" target="_blank">
            <i class="fas fa-briefcase"></i>
            Manage Cases
        </a>
        <a href="blog-management.html" target="_blank">
            <i class="fas fa-edit"></i>
            Manage Blog
        </a>
        <a href="testimonials-management.html" target="_blank">
            <i class="fas fa-star"></i>
            Manage Testimonials
        </a>
    </div>
</div>

<script>
    // Dynamic Homepage Content Manager
    class HomepageManager {
        constructor() {
            this.apiEndpoints = {
                services: 'admin_api.php?action=services',
                cases: 'admin_api.php?action=cases',
                blog: 'blog_api.php?action=posts&status=published',
                testimonials: 'testimonials_api.php?action=testimonials&status=approved'
            };
            this.currentTestimonial = 0;
            this.testimonials = [];
            this.init();
        }

        async init() {
            console.log('🚀 Initializing dynamic homepage...');

            // Load all content
            await Promise.all([
                this.loadServices(),
                this.loadTestimonials(),
                this.loadBlogPosts(),
                this.updateStats()
            ]);

            // Setup interactions
            this.setupNavigation();
            this.setupTestimonialSlider();
            this.setupScrollEffects();

            console.log('✅ Homepage initialization complete');
        }

        async apiRequest(url) {
            try {
                const response = await fetch(url);
                const result = await response.json();
                return result.success ? result.data : null;
            } catch (error) {
                console.error('API request failed:', error);
                return null;
            }
        }

        async loadServices() {
            try {
                const services = await this.apiRequest(this.apiEndpoints.services);
                if (services && services.length > 0) {
                    this.renderServices(services.filter(s => s.is_active));
                } else {
                    this.showServicesFallback();
                }
            } catch (error) {
                this.showServicesFallback();
            } finally {
                document.getElementById('servicesLoading').style.display = 'none';
                document.getElementById('servicesGrid').style.display = 'grid';
            }
        }

        renderServices(services) {
            const grid = document.getElementById('servicesGrid');

            grid.innerHTML = services.map(service => `
                    <div class="service-card">
                        <div class="service-icon">
                            <i class="${service.icon || 'fas fa-balance-scale'}"></i>
                        </div>
                        <h3 class="service-title">${service.title || service.name}</h3>
                        <p class="service-description">${service.description}</p>
                        <a href="#contact" class="service-link">
                            Learn More
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                `).join('');
        }

        showServicesFallback() {
            const fallbackServices = [
                {
                    title: 'Corporate Law',
                    description: 'Comprehensive corporate legal services including business formation, mergers & acquisitions, and compliance.',
                    icon: 'fas fa-building'
                },
                {
                    title: 'Employment Law',
                    description: 'Expert employment law representation covering workplace disputes and labor negotiations.',
                    icon: 'fas fa-users'
                },
                {
                    title: 'Litigation',
                    description: 'Aggressive litigation representation with a proven track record of successful outcomes.',
                    icon: 'fas fa-gavel'
                }
            ];

            this.renderServices(fallbackServices);
        }

        async loadTestimonials() {
            try {
                const testimonials = await this.apiRequest(this.apiEndpoints.testimonials);
                if (testimonials && testimonials.length > 0) {
                    this.testimonials = testimonials.filter(t => t.is_approved);
                    this.renderTestimonials();
                } else {
                    this.showTestimonialsFallback();
                }
            } catch (error) {
                this.showTestimonialsFallback();
            } finally {
                document.getElementById('testimonialsLoading').style.display = 'none';
                document.getElementById('testimonialsSlider').style.display = 'block';
            }
        }

        renderTestimonials() {
            const slider = document.getElementById('testimonialsSlider');
            const nav = document.getElementById('testimonialNav');

            const testimonialsHTML = this.testimonials.map((testimonial, index) => {
                const stars = '★'.repeat(testimonial.rating) + '☆'.repeat(5 - testimonial.rating);
                const isActive = index === 0 ? 'active' : '';

                return `
                        <div class="testimonial-item ${isActive}">
                            <p class="testimonial-text">"${testimonial.testimonial}"</p>
                            <div class="testimonial-author">
                                <div class="author-avatar">
                                    ${testimonial.client_image ?
                    `<img src="${testimonial.client_image}" alt="${testimonial.client_name}" style="width:100%;height:100%;border-radius:50%;object-fit:cover;">` :
                    testimonial.client_name.charAt(0)
                }
                                </div>
                                <div class="author-info">
                                    <h4>${testimonial.client_name}</h4>
                                    <p>${testimonial.client_title ? testimonial.client_title : ''}${testimonial.client_company ? (testimonial.client_title ? ', ' : '') + testimonial.client_company : ''}</p>
                                    <div class="testimonial-rating">${stars}</div>
                                </div>
                            </div>
                        </div>
                    `;
            }).join('');

            const navHTML = this.testimonials.map((_, index) =>
                `<div class="nav-dot ${index === 0 ? 'active' : ''}" onclick="homepageManager.setTestimonial(${index})"></div>`
            ).join('');

            slider.innerHTML = testimonialsHTML + nav.outerHTML;
            nav.innerHTML = navHTML;
        }

        showTestimonialsFallback() {
            this.testimonials = [
                {
                    client_name: 'Robert Chen',
                    client_title: 'CEO',
                    client_company: 'Tech Innovations Inc.',
                    testimonial: 'Excellence Law Firm provided outstanding legal counsel during our recent acquisition. Their expertise and attention to detail made the entire process seamless.',
                    rating: 5
                },
                {
                    client_name: 'Maria Rodriguez',
                    client_title: 'HR Director',
                    client_company: 'Global Manufacturing Corp.',
                    testimonial: 'Sarah Johnson and her employment law team helped us navigate complex workplace issues with professionalism and expertise.',
                    rating: 5
                }
            ];

            this.renderTestimonials();
        }

        async loadBlogPosts() {
            try {
                const posts = await this.apiRequest(this.apiEndpoints.blog);
                if (posts && posts.length > 0) {
                    this.renderBlogPosts(posts.slice(0, 3));
                } else {
                    this.showBlogFallback();
                }
            } catch (error) {
                this.showBlogFallback();
            } finally {
                document.getElementById('blogLoading').style.display = 'none';
                document.getElementById('blogGrid').style.display = 'grid';
            }
        }

        renderBlogPosts(posts) {
            const grid = document.getElementById('blogGrid');

            grid.innerHTML = posts.map(post => {
                const publishDate = new Date(post.published_at || post.created_at).toLocaleDateString();
                const excerpt = post.excerpt || post.content.replace(/<[^>]*>/g, '').substring(0, 150) + '...';

                return `
                        <article class="blog-card">
                            <div class="blog-image">
                                ${post.featured_image ?
                    `<img src="${post.featured_image}" alt="${post.title}" style="width:100%;height:100%;object-fit:cover;">` :
                    '<i class="fas fa-newspaper"></i>'
                }
                            </div>
                            <div class="blog-content">
                                <div class="blog-meta">
                                    <i class="far fa-calendar"></i> ${publishDate}
                                    <span style="margin-left: 1rem;">
                                        <i class="far fa-user"></i> ${post.author_name || 'Legal Team'}
                                    </span>
                                </div>
                                <h3 class="blog-title">${post.title}</h3>
                                <p class="blog-excerpt">${excerpt}</p>
                                <a href="#" class="blog-link" onclick="showComingSoon('Blog Article')">
                                    Read More
                                    <i class="fas fa-arrow-right"></i>
                                </a>
                            </div>
                        </article>
                    `;
            }).join('');
        }

        showBlogFallback() {
            const fallbackPosts = [
                {
                    title: 'Understanding Employment Law: Your Rights and Protections',
                    excerpt: 'A comprehensive guide to understanding your fundamental employment rights and what to do when they are violated.',
                    author_name: 'Legal Team',
                    published_at: new Date().toISOString()
                },
                {
                    title: 'Recent Changes in Corporate Law: What Businesses Need to Know',
                    excerpt: 'Stay ahead of the curve with insights into recent corporate law changes and compliance strategies for modern businesses.',
                    author_name: 'Legal Team',
                    published_at: new Date().toISOString()
                },
                {
                    title: 'Intellectual Property Protection for Small Businesses',
                    excerpt: 'A comprehensive guide to protecting your small business\'s intellectual property assets and building a strong IP portfolio.',
                    author_name: 'Legal Team',
                    published_at: new Date().toISOString()
                }
            ];

            this.renderBlogPosts(fallbackPosts);
        }

        async updateStats() {
            try {
                // You can load actual stats from your APIs here
                const stats = {
                    yearsExperience: '25+',
                    casesWon: '500+',
                    clientsSatisfied: '1000+'
                };

                Object.entries(stats).forEach(([key, value]) => {
                    const element = document.getElementById(key);
                    if (element) {
                        this.animateNumber(element, value);
                    }
                });
            } catch (error) {
                console.error('Failed to update stats:', error);
            }
        }

        animateNumber(element, finalValue) {
            const isPlus = finalValue.includes('+');
            const number = parseInt(finalValue.replace('+', ''));
            const duration = 2000;
            const steps = 60;
            const increment = number / steps;
            let current = 0;

            const timer = setInterval(() => {
                current += increment;
                if (current >= number) {
                    element.textContent = finalValue;
                    clearInterval(timer);
                } else {
                    element.textContent = Math.floor(current) + (isPlus ? '+' : '');
                }
            }, duration / steps);
        }

        setupNavigation() {
            const navbar = document.getElementById('navbar');
            const mobileToggle = document.getElementById('mobile-toggle');
            const navMenu = document.getElementById('nav-menu');

            // Scroll effect
            window.addEventListener('scroll', () => {
                if (window.scrollY > 100) {
                    navbar.classList.add('scrolled');
                } else {
                    navbar.classList.remove('scrolled');
                }
            });

            // Mobile menu toggle
            mobileToggle.addEventListener('click', () => {
                navMenu.classList.toggle('active');
            });

            // Smooth scrolling 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'
                        });
                    }
                });
            });
        }

        setupTestimonialSlider() {
            if (this.testimonials.length > 1) {
                setInterval(() => {
                    this.nextTestimonial();
                }, 5000);
            }
        }

        setTestimonial(index) {
            this.currentTestimonial = index;

            document.querySelectorAll('.testimonial-item').forEach((item, i) => {
                item.classList.toggle('active', i === index);
            });

            document.querySelectorAll('.nav-dot').forEach((dot, i) => {
                dot.classList.toggle('active', i === index);
            });
        }

        nextTestimonial() {
            this.currentTestimonial = (this.currentTestimonial + 1) % this.testimonials.length;
            this.setTestimonial(this.currentTestimonial);
        }

        setupScrollEffects() {
            const observerOptions = {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            };

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.animation = 'fadeInUp 0.6s ease-out forwards';
                    }
                });
            }, observerOptions);

            document.querySelectorAll('.service-card, .blog-card').forEach(el => {
                observer.observe(el);
            });
        }
    }

    // Utility Functions
    function toggleAdminMenu() {
        const menu = document.getElementById('adminMenu');
        menu.classList.toggle('active');
    }

    function showComingSoon(pageName) {
        alert(`${pageName} page is coming soon! This will be implemented in the next phase of development.`);
    }

    // Initialize Homepage Manager
    let homepageManager;
    document.addEventListener('DOMContentLoaded', () => {
        homepageManager = new HomepageManager();
    });

    // Close admin menu when clicking outside
    document.addEventListener('click', (e) => {
        const adminPanel = document.querySelector('.admin-panel');
        const adminMenu = document.getElementById('adminMenu');

        if (!adminPanel.contains(e.target)) {
            adminMenu.classList.remove('active');
        }
    });
</script>
</body>
</html>