quantum-digital-branding/script.js

// AI Brand Strategy Generator - Main Application Script
// Modern ES6+ JavaScript with clean architecture

class BrandStrategyApp {
    constructor() {
        this.currentStep = 1;
        this.totalSteps = 5;
        this.formData = {};
        this.currentScreen = 'loginScreen';
        this.demoScenarios = this.initializeDemoScenarios();
        
        this.init();
    }

    init() {
        this.initHeaderAnimations();
        this.createFormSteps();
        this.showFormStep(1);
        this.updateStepIndicator();
        this.updateProgressBar();
        this.setupAutoSave();
        this.setupEventListeners();
    }

    initHeaderAnimations() {
        // Initialize sophisticated header animations with staggered reveals
        const heroWords = document.querySelectorAll('.hero-word');
        const heroLines = document.querySelectorAll('.hero-line');
        const heroDecoration = document.querySelector('.hero-decoration');

        // Animate words with staggered delays
        heroWords.forEach((word, index) => {
            const delay = parseInt(word.dataset.delay) || index * 100;
            word.style.animationDelay = `${delay}ms`;
            
            // Add hover interaction for extra sophistication
            word.addEventListener('mouseenter', () => {
                word.style.transform = 'scale(1.05) rotateX(-5deg)';
                word.style.transition = 'transform 0.3s cubic-bezier(0.16, 1, 0.3, 1)';
            });
            
            word.addEventListener('mouseleave', () => {
                word.style.transform = 'scale(1) rotateX(0deg)';
            });
        });

        // Animate subtitle lines
        heroLines.forEach((line, index) => {
            const delay = parseInt(line.dataset.delay) || (600 + index * 200);
            line.style.animationDelay = `${delay}ms`;
        });

        // Animate decoration element
        if (heroDecoration) {
            const delay = parseInt(heroDecoration.dataset.delay) || 1000;
            heroDecoration.style.animationDelay = `${delay}ms`;
            
            // Add click interaction for decoration
            heroDecoration.addEventListener('click', () => {
                heroDecoration.style.animation = 'decorationShine 1s ease-in-out';
                setTimeout(() => {
                    heroDecoration.style.animation = '';
                }, 1000);
            });
        }

        // Add parallax effect to header background
        this.initParallaxEffect();
    }

    initParallaxEffect() {
        const header = document.querySelector('.app-header');
        if (!header) return;

        window.addEventListener('scroll', () => {
            const scrolled = window.pageYOffset;
            const rate = scrolled * -0.5;
            
            if (header) {
                header.style.transform = `translateY(${rate}px)`;
            }
        });
    }

    initializeDemoScenarios() {
        return {
            tech: {
                companyName: "QuantumFlow AI",
                industry: "technology",
                companySize: "startup",
                website: "https://quantumflow.ai",
                description: "Revolutionary AI-powered workflow automation platform for enterprises seeking to transform their operational efficiency and reduce manual processes by up to 80%.",
                challenges: "Limited brand awareness in competitive market, high customer acquisition costs, difficulty communicating complex AI value proposition to non-technical decision makers",
                objectives: "Increase brand recognition by 300% in enterprise market, acquire 1000+ enterprise customers, achieve $10M ARR within 18 months, establish thought leadership in AI automation space",
                targetAudience: "Enterprise CTOs, IT Directors, and Operations Managers at companies with 500+ employees, typically aged 35-55, focused on digital transformation and operational efficiency",
                competitors: "Zapier, Microsoft Power Automate, UiPath, Automation Anywhere, ServiceNow",
                budget: "50k-100k",
                revenueGrowth: "100-200",
                timeline: "18-months",
                customerPains: "Manual repetitive tasks consuming 40% of employee time, disconnected systems requiring manual data transfer, lack of real-time operational visibility",
                geography: "national",
                advantages: "Advanced AI that learns from user patterns, 90% faster implementation than competitors, enterprise-grade security with SOC2 compliance",
                positioning: "innovation"
            },
            healthcare: {
                companyName: "SmileCare Dental Group",
                industry: "healthcare",
                companySize: "medium",
                website: "https://smilecare.com",
                description: "Premier multi-location dental practice focused on comprehensive family and cosmetic dentistry, serving over 15,000 patients across 5 locations with state-of-the-art technology.",
                challenges: "Patient acquisition in digital-first environment, competing with corporate dental chains, managing online reputation across multiple locations, inconsistent brand messaging",
                objectives: "Increase new patient bookings by 150% across all locations, improve online reviews to 4.8+ stars, expand to 3 new locations within 2 years, launch comprehensive digital patient experience",
                targetAudience: "Health-conscious families with children, young professionals aged 25-45, seniors seeking specialized care, patients interested in cosmetic dentistry and wellness",
                competitors: "Aspen Dental, Heartland Dental, Pacific Dental Services, local independent practices, dental chains like Western Dental",
                budget: "25k-50k",
                revenueGrowth: "50-100",
                timeline: "2-years",
                customerPains: "Difficulty finding convenient appointment times, anxiety about dental procedures, confusion about insurance coverage, inconsistent care quality experiences",
                geography: "local",
                advantages: "Personalized care relationships, advanced pain-free technology, comprehensive family treatment under one roof, flexible scheduling and payment options",
                positioning: "service"
            },
            retail: {
                companyName: "EcoStyle Fashion",
                industry: "retail",
                companySize: "small",
                website: "https://ecostyle.com",
                description: "Sustainable fashion brand creating ethically-made, eco-friendly apparel for conscious consumers, focusing on timeless designs and transparent supply chain practices.",
                challenges: "Transition from physical retail to online-first strategy, building brand trust in digital space, competing with fast fashion pricing, educating consumers about sustainable fashion value",
                objectives: "Achieve 70% online sales mix, build email list of 50,000 engaged subscribers, launch brand story campaign highlighting sustainability impact, increase average order value by 40%",
                targetAudience: "Environmentally conscious millennials and Gen Z consumers aged 18-40, income $50k+, values-driven shopping behavior, active on social media and sustainability communities",
                competitors: "Patagonia, Everlane, Reformation, Eileen Fisher, Organic Basics, local sustainable fashion brands",
                budget: "10k-25k",
                revenueGrowth: "50-100",
                timeline: "1-year",
                customerPains: "Difficulty finding stylish sustainable options, higher prices compared to fast fashion, uncertainty about true sustainability claims, limited size inclusivity in eco-fashion",
                geography: "national",
                advantages: "Fully transparent supply chain, carbon-neutral shipping, lifetime repair guarantee, inclusive sizing 0-24, partnership with environmental nonprofits",
                positioning: "value"
            }
        };
    }

    setupEventListeners() {
        // Prevent form submission on Enter key
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA') {
                e.preventDefault();
                if (this.currentScreen === 'formScreen') {
                    this.nextStep();
                }
            }
        });

        // Add smooth scrolling for better UX
        document.addEventListener('scroll', this.debounce(this.updateScrollProgress.bind(this), 100));
    }

    setupAutoSave() {
        setInterval(() => {
            if (this.currentScreen === 'formScreen') {
                this.saveCurrentStepData();
                console.log('Auto-saved form data:', this.formData);
                
                // Show subtle save indicator
                this.showSaveIndicator();
            }
        }, 30000); // Auto-save every 30 seconds
    }

    showSaveIndicator() {
        // Create and show a subtle save indicator
        const indicator = document.createElement('div');
        indicator.textContent = '💾 Draft saved';
        indicator.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            background: var(--success);
            color: white;
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 14px;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s ease;
        `;
        
        document.body.appendChild(indicator);
        
        // Animate in
        setTimeout(() => indicator.style.opacity = '1', 100);
        
        // Remove after 2 seconds
        setTimeout(() => {
            indicator.style.opacity = '0';
            setTimeout(() => document.body.removeChild(indicator), 300);
        }, 2000);
    }

    updateScrollProgress() {
        const scrolled = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
        document.documentElement.style.setProperty('--scroll-progress', `${scrolled}%`);
    }

    showScreen(screenId) {
        // Add exit animation to current screen
        const currentScreenEl = document.querySelector('.screen.active');
        if (currentScreenEl) {
            currentScreenEl.style.animation = 'fadeOut 0.3s ease-out';
            setTimeout(() => {
                currentScreenEl.classList.remove('active');
                currentScreenEl.style.animation = '';
            }, 300);
        }

        // Show new screen with entrance animation
        setTimeout(() => {
            document.querySelectorAll('.screen').forEach(screen => {
                screen.classList.remove('active');
            });
            document.getElementById(screenId).classList.add('active');
            this.currentScreen = screenId;
        }, 300);
    }

    login() {
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        
        // Simple validation for demo
        if (username && password) {
            this.showScreen('dashboardScreen');
            this.trackEvent('user_login', { demo_mode: true });
        } else {
            this.showNotification('Please enter both username and password', 'warning');
        }
    }

    logout() {
        this.showScreen('loginScreen');
        this.resetForm();
        this.trackEvent('user_logout');
    }

    startNewStrategy() {
        this.showScreen('formScreen');
        this.resetForm();
        this.trackEvent('strategy_started');
    }

    backToDashboard() {
        this.showScreen('dashboardScreen');
    }

    loadDemoScenario(scenario) {
        const data = this.demoScenarios[scenario];
        if (!data) {
            this.showNotification('Demo scenario not found', 'error');
            return;
        }

        this.formData = { ...data };
        
        // Fill form with demo data
        this.populateFormFields(data);
        
        // Track demo usage
        this.trackEvent('demo_scenario_loaded', { scenario });
        
        // Show notification
        this.showNotification(`Loaded ${data.companyName} demo scenario`, 'success');
        
        // Skip to processing screen
        setTimeout(() => this.showProcessingScreen(), 500);
    }

    populateFormFields(data) {
        const fieldMap = {
            'companyName': data.companyName,
            'industry': data.industry,
            'companySize': data.companySize,
            'website': data.website,
            'description': data.description,
            'challenges': data.challenges,
            'budget': data.budget,
            'objectives': data.objectives,
            'revenueGrowth': data.revenueGrowth,
            'timeline': data.timeline,
            'targetAudience': data.targetAudience,
            'customerPains': data.customerPains,
            'geography': data.geography,
            'competitors': data.competitors,
            'advantages': data.advantages,
            'positioning': data.positioning
        };

        Object.entries(fieldMap).forEach(([fieldId, value]) => {
            const element = document.getElementById(fieldId);
            if (element && value) {
                element.value = value;
            }
        });
    }

    resetForm() {
        this.currentStep = 1;
        this.formData = {};
        const form = document.getElementById('clientForm');
        if (form) form.reset();
        this.updateStepIndicator();
        this.updateProgressBar();
        this.showFormStep(1);
    }

    nextStep() {
        if (this.validateCurrentStep()) {
            this.saveCurrentStepData();
            
            if (this.currentStep < this.totalSteps) {
                this.currentStep++;
                this.showFormStep(this.currentStep);
                this.updateStepIndicator();
                this.updateProgressBar();
                this.trackEvent('form_step_completed', { step: this.currentStep - 1 });
            } else {
                // Form completed, start processing
                this.trackEvent('form_completed', { data: this.formData });
                this.showProcessingScreen();
            }
        }
    }

    previousStep() {
        if (this.currentStep > 1) {
            this.currentStep--;
            this.showFormStep(this.currentStep);
            this.updateStepIndicator();
            this.updateProgressBar();
        }
    }

    validateCurrentStep() {
        const currentStepElement = document.querySelector(`.form-step:nth-child(${this.currentStep})`);
        if (!currentStepElement) return false;

        const requiredFields = currentStepElement.querySelectorAll('input[required], select[required], textarea[required]');
        let isValid = true;
        let firstInvalidField = null;

        requiredFields.forEach(field => {
            const isFieldValid = field.value.trim() !== '';
            
            if (!isFieldValid) {
                field.style.borderColor = 'var(--danger)';
                field.style.boxShadow = '0 0 0 3px rgba(239, 68, 68, 0.1)';
                isValid = false;
                if (!firstInvalidField) firstInvalidField = field;
            } else {
                field.style.borderColor = 'var(--glass-border)';
                field.style.boxShadow = '';
            }
        });

        if (!isValid) {
            this.showNotification('Please fill in all required fields', 'warning');
            if (firstInvalidField) {
                firstInvalidField.focus();
                firstInvalidField.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
        }

        return isValid;
    }

    saveCurrentStepData() {
        const currentStepElement = document.querySelector(`.form-step:nth-child(${this.currentStep})`);
        if (!currentStepElement) return;

        const inputs = currentStepElement.querySelectorAll('input, select, textarea');
        
        inputs.forEach(input => {
            if (input.id) {
                this.formData[input.id] = input.value;
            }
        });
    }

    showFormStep(step) {
        this.createFormSteps(); // Ensure steps exist
        
        document.querySelectorAll('.form-step').forEach((stepEl, index) => {
            stepEl.style.display = index + 1 === step ? 'block' : 'none';
        });
        
        // Update navigation buttons
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        
        if (prevBtn) prevBtn.style.display = step > 1 ? 'inline-flex' : 'none';
        if (nextBtn) nextBtn.textContent = step === this.totalSteps ? 'Generate Strategy 🚀' : 'Next Step →';
    }

    createFormSteps() {
        const form = document.getElementById('clientForm');
        if (!form) return;
        
        // Check if steps already exist
        if (form.querySelectorAll('.form-step').length >= this.totalSteps) return;
        
        form.innerHTML = this.generateFormHTML();
    }

    generateFormHTML() {
        return `
            <!-- Step 1: Company Basics -->
            <div class="form-step active">
                <div class="step-header">
                    <h3 class="step-title">🏢 Company Basics</h3>
                    <p class="step-description">Tell us about your company and what industry you're in</p>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="companyName">Company Name *</label>
                    <input class="form-input" type="text" id="companyName" placeholder="Enter your company name" required>
                </div>

                <div class="form-group">
                    <label class="form-label" for="industry">Industry *</label>
                    <select class="form-select" id="industry" required>
                        <option value="">Select Industry</option>
                        <option value="technology">🚀 Technology</option>
                        <option value="healthcare">🏥 Healthcare</option>
                        <option value="finance">💰 Finance</option>
                        <option value="retail">🛍️ Retail</option>
                        <option value="professional-services">💼 Professional Services</option>
                        <option value="manufacturing">🏭 Manufacturing</option>
                        <option value="other">📊 Other</option>
                    </select>
                </div>

                <div class="form-group">
                    <label class="form-label" for="companySize">Company Size *</label>
                    <select class="form-select" id="companySize" required>
                        <option value="">Select Size</option>
                        <option value="startup">🌱 Startup (1-10 employees)</option>
                        <option value="small">📈 Small (11-50 employees)</option>
                        <option value="medium">🏢 Medium (51-200 employees)</option>
                        <option value="large">🏛️ Large (200+ employees)</option>
                    </select>
                </div>

                <div class="form-group">
                    <label class="form-label" for="website">Website URL</label>
                    <input class="form-input" type="url" id="website" placeholder="https://yourcompany.com">
                </div>
            </div>

            <!-- Step 2: Current Situation -->
            <div class="form-step">
                <div class="step-header">
                    <h3 class="step-title">📊 Current Situation</h3>
                    <p class="step-description">Help us understand your current market position and challenges</p>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="description">Company Description *</label>
                    <textarea class="form-textarea" id="description" rows="4" placeholder="Describe your company, products/services, and current market position. What makes your company unique?" required></textarea>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="challenges">Current Brand Challenges *</label>
                    <textarea class="form-textarea" id="challenges" rows="3" placeholder="What are your main branding and marketing challenges? (e.g., low brand awareness, customer acquisition costs, market positioning)" required></textarea>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="budget">Marketing Budget Range *</label>
                    <select class="form-select" id="budget" required>
                        <option value="">Select Budget Range</option>
                        <option value="under-10k">💸 Under $10,000/month</option>
                        <option value="10k-25k">💰 $10,000 - $25,000/month</option>
                        <option value="25k-50k">💎 $25,000 - $50,000/month</option>
                        <option value="50k-100k">🚀 $50,000 - $100,000/month</option>
                        <option value="over-100k">💫 Over $100,000/month</option>
                    </select>
                </div>
            </div>

            <!-- Step 3: Business Objectives -->
            <div class="form-step">
                <div class="step-header">
                    <h3 class="step-title">🎯 Business Objectives</h3>
                    <p class="step-description">Define your goals and growth targets for the next 12-24 months</p>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="objectives">Primary Business Goals *</label>
                    <textarea class="form-textarea" id="objectives" rows="4" placeholder="What are your main business objectives for the next 12-24 months? (e.g., increase revenue, expand market share, launch new products)" required></textarea>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="revenueGrowth">Target Revenue Growth *</label>
                    <select class="form-select" id="revenueGrowth" required>
                        <option value="">Select Growth Target</option>
                        <option value="10-25">📈 10% - 25%</option>
                        <option value="25-50">🚀 25% - 50%</option>
                        <option value="50-100">💫 50% - 100%</option>
                        <option value="100-200">🌟 100% - 200%</option>
                        <option value="over-200">🚀 Over 200%</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="timeline">Timeline for Objectives *</label>
                    <select class="form-select" id="timeline" required>
                        <option value="">Select Timeline</option>
                        <option value="6-months">⚡ 6 months</option>
                        <option value="1-year">📅 1 year</option>
                        <option value="18-months">🗓️ 18 months</option>
                        <option value="2-years">🎯 2+ years</option>
                    </select>
                </div>
            </div>

            <!-- Step 4: Target Audience -->
            <div class="form-step">
                <div class="step-header">
                    <h3 class="step-title">👥 Target Audience</h3>
                    <p class="step-description">Tell us about your ideal customers and their needs</p>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="targetAudience">Primary Customer Demographics *</label>
                    <textarea class="form-textarea" id="targetAudience" rows="4" placeholder="Describe your ideal customers: age, profession, interests, income level, behavior patterns" required></textarea>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="customerPains">Customer Pain Points *</label>
                    <textarea class="form-textarea" id="customerPains" rows="3" placeholder="What problems do your customers face that your product/service solves? What keeps them up at night?" required></textarea>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="geography">Geographic Markets *</label>
                    <select class="form-select" id="geography" required>
                        <option value="">Select Primary Market</option>
                        <option value="local">🏙️ Local/Regional</option>
                        <option value="national">🇺🇸 National</option>
                        <option value="international">🌍 International</option>
                        <option value="global">🌐 Global</option>
                    </select>
                </div>
            </div>

            <!-- Step 5: Competition -->
            <div class="form-step">
                <div class="step-header">
                    <h3 class="step-title">⚔️ Competitive Landscape</h3>
                    <p class="step-description">Help us understand your competitive environment and advantages</p>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="competitors">Main Competitors *</label>
                    <textarea class="form-textarea" id="competitors" rows="3" placeholder="List your top 3-5 competitors (both direct and indirect competitors)" required></textarea>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="advantages">Competitive Advantages *</label>
                    <textarea class="form-textarea" id="advantages" rows="3" placeholder="What makes you different/better than competitors? What unique value do you provide?" required></textarea>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="positioning">Desired Market Position *</label>
                    <select class="form-select" id="positioning" required>
                        <option value="">Select Positioning</option>
                        <option value="premium">💎 Premium/Luxury</option>
                        <option value="value">💰 Best Value</option>
                        <option value="innovation">🚀 Innovation Leader</option>
                        <option value="service">🎯 Service Excellence</option>
                        <option value="niche">🔍 Niche Specialist</option>
                    </select>
                </div>
            </div>
        `;
    }

    updateStepIndicator() {
        for (let i = 1; i <= this.totalSteps; i++) {
            const indicator = document.getElementById(`step${i}Indicator`);
            if (!indicator) continue;
            
            indicator.classList.remove('active', 'completed');
            
            if (i < this.currentStep) {
                indicator.classList.add('completed');
            } else if (i === this.currentStep) {
                indicator.classList.add('active');
            }
        }
    }

    updateProgressBar() {
        const progress = (this.currentStep / this.totalSteps) * 100;
        const progressFill = document.getElementById('progressFill');
        if (progressFill) {
            progressFill.style.width = progress + '%';
        }
    }

    showProcessingScreen() {
        this.showScreen('processingScreen');
        this.simulateProcessing();
    }

    simulateProcessing() {
        const messages = [
            "🚀 Initializing AI Strategy Engine...",
            "📊 Analyzing market position and trends...",
            "🔍 Researching competitive landscape...",
            "💡 Generating strategic recommendations...",
            "⚡ Optimizing RACE framework...",
            "📈 Creating SWOT analysis...",
            "✨ Building comprehensive strategy...",
            "🎯 Finalizing strategy document..."
        ];
        
        let messageIndex = 0;
        let progress = 0;
        
        const interval = setInterval(() => {
            if (messageIndex < messages.length) {
                const loadingMessage = document.getElementById('loadingMessage');
                if (loadingMessage) {
                    loadingMessage.textContent = messages[messageIndex];
                }
                messageIndex++;
            }
            
            progress += Math.random() * 12 + 3; // More realistic progress
            if (progress > 100) progress = 100;
            
            const processingProgress = document.getElementById('processingProgress');
            if (processingProgress) {
                processingProgress.style.width = progress + '%';
            }
            
            if (progress >= 100) {
                clearInterval(interval);
                setTimeout(() => {
                    this.generateStrategy();
                    this.showScreen('strategyScreen');
                    this.trackEvent('strategy_generated', { 
                        company: this.formData.companyName,
                        industry: this.formData.industry 
                    });
                }, 1000);
            }
        }, 600); // Slightly faster for better UX
    }

    generateStrategy() {
        const companyName = this.formData.companyName || "Your Company";
        const clientCompanyName = document.getElementById('clientCompanyName');
        if (clientCompanyName) {
            clientCompanyName.textContent = companyName;
        }
        
        const strategyContent = document.getElementById('strategyContent');
        if (!strategyContent) return;
        
        strategyContent.innerHTML = this.generateStrategyHTML();
        
        // Add smooth reveal animation for strategy sections
        setTimeout(() => {
            const sections = strategyContent.querySelectorAll('.strategy-section');
            sections.forEach((section, index) => {
                setTimeout(() => {
                    section.style.opacity = '0';
                    section.style.transform = 'translateY(20px)';
                    section.style.transition = 'all 0.5s ease';
                    
                    setTimeout(() => {
                        section.style.opacity = '1';
                        section.style.transform = 'translateY(0)';
                    }, 50);
                }, index * 200);
            });
        }, 100);
    }

    generateStrategyHTML() {
        const data = this.formData;
        const companyName = data.companyName || "Your Company";
        
        return `
            <div class="strategy-section">
                <h3>🎯 Situation Analysis</h3>
                <p><strong>Company Overview:</strong> ${data.description || 'A forward-thinking company positioned for growth in the competitive marketplace.'}</p>
                <p><strong>Current Challenges:</strong> ${data.challenges || 'Limited brand awareness and market penetration in target segments.'}</p>
                
                <div class="chart-placeholder">
                    📊 Market Position Analysis & Competitive Mapping
                </div>
                
                <p><strong>SWOT Analysis:</strong></p>
                <ul>
                    <li><strong>Strengths:</strong> ${data.advantages || 'Innovative solutions, strong value proposition, dedicated team'}</li>
                    <li><strong>Weaknesses:</strong> Limited brand recognition, resource constraints, market education needs</li>
                    <li><strong>Opportunities:</strong> Growing market demand, digital transformation trends, underserved customer segments</li>
                    <li><strong>Threats:</strong> Competitive pressure, market saturation risks, economic uncertainties</li>
                </ul>
            </div>

            <div class="strategy-section">
                <h3>🚀 Strategic Objectives</h3>
                <p><strong>Primary Goals (${data.timeline || '12-month'} timeline):</strong></p>
                <ul>
                    <li>${data.objectives || 'Increase brand awareness by 200% in target market'}</li>
                    <li>Achieve ${data.revenueGrowth || '50-100%'} revenue growth</li>
                    <li>Build qualified customer pipeline of 10,000+ leads</li>
                    <li>Establish thought leadership in ${data.industry || 'industry'} sector</li>
                    <li>Improve customer satisfaction scores to 4.5+ stars</li>
                    <li>Expand market reach in ${data.geography || 'target'} markets</li>
                </ul>
                
                <div class="chart-placeholder">
                    📈 Revenue Growth Projection & Milestone Timeline
                </div>
                
                <p><strong>Key Performance Indicators:</strong></p>
                <ul>
                    <li>Brand awareness metrics (surveys, social mentions, search volume)</li>
                    <li>Website traffic growth and conversion rate optimization</li>
                    <li>Customer acquisition cost (CAC) and lifetime value (CLV)</li>
                    <li>Market share growth and competitive positioning</li>
                    <li>Lead generation volume and quality metrics</li>
                    <li>Customer retention and referral rates</li>
                </ul>
            </div>

            <div class="strategy-section">
                <h3>💡 Brand Strategy & Positioning</h3>
                <p><strong>Brand Positioning Statement:</strong><br>
                ${companyName} is the ${data.positioning || 'innovative'} choice for ${data.targetAudience || 'forward-thinking businesses'} seeking ${data.advantages || 'superior solutions and exceptional value'} in the ${data.industry || 'technology'} space. We deliver measurable results through our unique approach that combines cutting-edge innovation with personalized service.</p>
                
                <p><strong>Value Proposition Framework:</strong></p>
                <ul>
                    <li><strong>Core Value:</strong> Delivering measurable results through innovative solutions tailored to customer needs</li>
                    <li><strong>Differentiator:</strong> ${data.advantages || 'Unique approach combining technology with personalized service and industry expertise'}</li>
                    <li><strong>Proof Points:</strong> Customer success stories, industry certifications, proven ROI, testimonials</li>
                    <li><strong>Brand Promise:</strong> Transforming businesses through reliable, innovative solutions that drive growth</li>
                </ul>
                
                <p><strong>Target Audience Segmentation:</strong></p>
                <ul>
                    <li><strong>Primary Segment:</strong> ${data.targetAudience || 'Decision-makers in mid-to-large enterprises seeking innovative solutions'}</li>
                    <li><strong>Secondary Segment:</strong> Influencers, consultants, and industry advocates</li>
                    <li><strong>Geographic Focus:</strong> ${data.geography || 'National'} markets with expansion potential</li>
                    <li><strong>Pain Points Addressed:</strong> ${data.customerPains || 'Operational inefficiencies, technology gaps, growth constraints'}</li>
                </ul>
            </div>

            <div class="strategy-section">
                <h3>⚡ Tactical Implementation (RACE Framework)</h3>
                
                <p><strong>🎯 REACH - Build Awareness & Drive Traffic:</strong></p>
                <ul>
                    <li><strong>SEO Strategy:</strong> Target high-intent keywords related to ${data.industry || 'industry'} solutions</li>
                    <li><strong>Paid Advertising:</strong> Google Ads, LinkedIn campaigns targeting ${data.targetAudience || 'decision-makers'}</li>
                    <li><strong>Content Marketing:</strong> Industry-specific blog content, whitepapers, case studies</li>
                    <li><strong>Social Media:</strong> LinkedIn thought leadership, industry forum participation</li>
                    <li><strong>PR & Outreach:</strong> Industry publications, podcast appearances, conference speaking</li>
                    <li><strong>Partnership Marketing:</strong> Strategic alliances with complementary service providers</li>
                </ul>
                
                <p><strong>💬 ACT - Drive Engagement & Interest:</strong></p>
                <ul>
                    <li><strong>Educational Content:</strong> Address ${data.customerPains || 'customer pain points'} through valuable resources</li>
                    <li><strong>Interactive Experiences:</strong> Webinar series, live demos, virtual consultations</li>
                    <li><strong>Lead Magnets:</strong> Industry reports, ROI calculators, assessment tools</li>
                    <li><strong>Community Building:</strong> Industry forums, customer advisory boards, user groups</li>
                    <li><strong>Email Marketing:</strong> Nurture sequences with personalized industry insights</li>
                    <li><strong>Retargeting Campaigns:</strong> Multi-touch attribution across digital channels</li>
                </ul>
                
                <p><strong>💰 CONVERT - Generate Quality Leads & Sales:</strong></p>
                <ul>
                    <li><strong>Landing Page Optimization:</strong> Industry-specific pages with clear value propositions</li>
                    <li><strong>Conversion Rate Optimization:</strong> A/B test forms, CTAs, and user experience</li>
                    <li><strong>Sales Enablement:</strong> Demo scripts, objection handling, competitive battlecards</li>
                    <li><strong>Marketing Automation:</strong> Lead scoring, progressive profiling, behavior triggers</li>
                    <li><strong>Free Trials/Consultations:</strong> Low-risk entry points for prospects</li>
                    <li><strong>Testimonials & Social Proof:</strong> Industry-specific case studies and references</li>
                </ul>
                
                <p><strong>❤️ ENGAGE - Build Loyalty & Advocacy:</strong></p>
                <ul>
                    <li><strong>Customer Success Program:</strong> Onboarding, training, ongoing support</li>
                    <li><strong>Regular Communication:</strong> Newsletters, product updates, industry insights</li>
                    <li><strong>Loyalty Initiatives:</strong> Exclusive access, early features, VIP support</li>
                    <li><strong>Referral Program:</strong> Incentivize customer advocacy and word-of-mouth</li>
                    <li><strong>Community Platform:</strong> Customer forums, best practice sharing</li>
                    <li><strong>Continuous Improvement:</strong> Regular feedback collection and product enhancement</li>
                </ul>
            </div>

            <div class="strategy-section">
                <h3>📋 90-Day Action Plan</h3>
                
                <p><strong>Month 1 - Foundation & Setup:</strong></p>
                <ul>
                    <li><strong>Week 1-2:</strong> Website optimization, analytics setup, brand asset creation</li>
                    <li><strong>Week 3-4:</strong> Content calendar development, initial content creation, SEO implementation</li>
                    <li><strong>Key Deliverables:</strong> Brand guidelines, website updates, content strategy</li>
                    <li><strong>Budget Allocation:</strong> 40% of ${data.budget || 'monthly budget'} for setup and tools</li>
                </ul>
                
                <p><strong>Month 2 - Campaign Launch & Amplification:</strong></p>
                <ul>
                    <li><strong>Week 1-2:</strong> Launch paid advertising campaigns, begin content distribution</li>
                    <li><strong>Week 3-4:</strong> Social media activation, email marketing sequences, PR outreach</li>
                    <li><strong>Key Deliverables:</strong> Campaign dashboards, lead generation systems, content library</li>
                    <li><strong>Budget Allocation:</strong> 60% of monthly budget for advertising and promotion</li>
                </ul>
                
                <p><strong>Month 3 - Optimization & Scale:</strong></p>
                <ul>
                    <li><strong>Week 1-2:</strong> Analyze performance data, optimize high-performing channels</li>
                    <li><strong>Week 3-4:</strong> Scale successful campaigns, launch retention programs</li>
                    <li><strong>Key Deliverables:</strong> Performance reports, optimization recommendations, scale strategy</li>
                    <li><strong>Budget Allocation:</strong> Data-driven allocation based on channel performance</li>
                </ul>
                
                <div class="chart-placeholder">
                    📅 Implementation Timeline & Resource Allocation Gantt Chart
                </div>
                
                <p><strong>Resource Requirements:</strong></p>
                <ul>
                    <li><strong>Marketing Budget:</strong> ${data.budget || '$25,000-50,000'} monthly investment</li>
                    <li><strong>Team Structure:</strong> Marketing manager, content specialist, PPC expert, designer</li>
                    <li><strong>Technology Stack:</strong> CRM, marketing automation, analytics, design tools</li>
                    <li><strong>External Partners:</strong> PR agency, industry consultants, freelance specialists</li>
                </ul>
            </div>

            <div class="strategy-section">
                <h3>📊 Measurement & Control Framework</h3>
                
                <p><strong>Monitoring Schedule:</strong></p>
                <ul>
                    <li><strong>Daily:</strong> Campaign performance, website traffic, lead generation metrics</li>
                    <li><strong>Weekly:</strong> Conversion rates, cost metrics, competitive analysis</li>
                    <li><strong>Monthly:</strong> Revenue attribution, customer acquisition cost, lifetime value</li>
                    <li><strong>Quarterly:</strong> Brand awareness, market share, strategic goal assessment</li>
                </ul>
                
                <p><strong>Analytics & Reporting Tools:</strong></p>
                <ul>
                    <li><strong>Website Analytics:</strong> Google Analytics 4, heatmap analysis, conversion tracking</li>
                    <li><strong>CRM Integration:</strong> Sales pipeline tracking, customer journey mapping</li>
                    <li><strong>Social Media Analytics:</strong> Engagement metrics, reach, brand mention tracking</li>
                    <li><strong>Email Marketing:</strong> Open rates, click-through rates, automation performance</li>
                    <li><strong>Brand Tracking:</strong> Awareness surveys, sentiment analysis, competitive positioning</li>
                </ul>
                
                <div class="chart-placeholder">
                    📈 Real-Time Performance Dashboard & KPI Tracking
                </div>
                
                <p><strong>Success Benchmarks & Milestones:</strong></p>
                <ul>
                    <li><strong>Month 1:</strong> 25% increase in qualified website traffic and lead generation</li>
                    <li><strong>Month 3:</strong> 50% improvement in conversion rates and pipeline quality</li>
                    <li><strong>Month 6:</strong> 100% increase in brand awareness and market recognition</li>
                    <li><strong>Month 12:</strong> ${data.revenueGrowth || '50-100%'} revenue growth and market expansion achieved</li>
                </ul>
                
                <p><strong>Optimization Framework:</strong></p>
                <ul>
                    <li><strong>Continuous Testing:</strong> A/B test campaigns, messaging, and user experience</li>
                    <li><strong>Performance Reviews:</strong> Monthly strategy sessions and quarterly deep dives</li>
                    <li><strong>Market Adaptation:</strong> Quarterly competitive analysis and trend assessment</li>
                    <li><strong>ROI Analysis:</strong> Channel performance evaluation and budget reallocation</li>
                </ul>
            </div>

            <div class="strategy-section">
                <h3>💼 Investment Summary & ROI Projections</h3>
                
                <p><strong>Recommended Investment Allocation:</strong></p>
                <ul>
                    <li><strong>Digital Advertising (35%):</strong> Google Ads, LinkedIn, industry platforms, retargeting</li>
                    <li><strong>Content & Creative (25%):</strong> Content creation, design, video production, copywriting</li>
                    <li><strong>Technology & Tools (20%):</strong> Marketing automation, CRM, analytics, optimization tools</li>
                    <li><strong>Events & PR (15%):</strong> Industry conferences, webinars, media relations, thought leadership</li>
                    <li><strong>Testing & Optimization (5%):</strong> A/B testing tools, market research, performance analysis</li>
                </ul>
                
                <div class="chart-placeholder">
                    💰 Investment Allocation & ROI Projection Chart
                </div>
                
                <p><strong>Financial Projections:</strong></p>
                <ul>
                    <li><strong>Expected ROI:</strong> 300-500% return on marketing investment within 12 months</li>
                    <li><strong>Payback Period:</strong> 6-8 months for initial marketing investment recovery</li>
                    <li><strong>Customer Acquisition Cost:</strong> Target 20-25% improvement in CAC efficiency</li>
                    <li><strong>Lifetime Value Growth:</strong> 40-60% increase in customer lifetime value</li>
                </ul>
                
                <p><strong>Risk Mitigation:</strong></p>
                <ul>
                    <li><strong>Diversified Channels:</strong> Multiple traffic sources to reduce dependency risk</li>
                    <li><strong>Flexible Budget:</strong> Ability to reallocate based on performance data</li>
                    <li><strong>Competitive Monitoring:</strong> Regular analysis to maintain market advantage</li>
                    <li><strong>Performance Thresholds:</strong> Clear KPIs with optimization triggers</li>
                </ul>
            </div>
        `;
    }

    exportToPDF() {
        this.showNotification('PDF export feature would integrate with jsPDF library for production. Demo shows complete workflow.', 'info');
        this.trackEvent('pdf_export_attempted');
        
        // In production, this would use jsPDF or similar library
        // For demo, we'll simulate the export process
        const exportBtn = event.target;
        const originalText = exportBtn.textContent;
        
        exportBtn.textContent = '📄 Generating PDF...';
        exportBtn.disabled = true;
        
        setTimeout(() => {
            exportBtn.textContent = originalText;
            exportBtn.disabled = false;
            this.showNotification('PDF would be downloaded in production version', 'success');
        }, 2000);
    }

    editStrategy() {
        this.showNotification('Edit mode would enable inline editing of all strategy sections. Demo shows UI flow.', 'info');
        this.trackEvent('strategy_edit_mode');
        
        // In production, this would enable contenteditable on strategy sections
        const sections = document.querySelectorAll('.strategy-section');
        sections.forEach(section => {
            section.style.border = '2px dashed var(--accent-primary)';
            section.style.cursor = 'pointer';
        });
        
        setTimeout(() => {
            sections.forEach(section => {
                section.style.border = '1px solid var(--glass-border)';
                section.style.cursor = 'default';
            });
        }, 3000);
    }

    showNotification(message, type = 'info') {
        const notification = document.createElement('div');
        notification.className = `notification notification-${type}`;
        
        const colors = {
            success: 'var(--success)',
            warning: 'var(--warning)',
            error: 'var(--danger)',
            info: 'var(--accent-primary)'
        };
        
        notification.style.cssText = `
            position: fixed;
            top: 24px;
            right: 24px;
            background: ${colors[type]};
            color: white;
            padding: 16px 24px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 500;
            z-index: 1000;
            max-width: 400px;
            box-shadow: var(--shadow-lg);
            transform: translateX(100%);
            transition: var(--transition);
        `;
        
        notification.textContent = message;
        document.body.appendChild(notification);
        
        // Animate in
        setTimeout(() => notification.style.transform = 'translateX(0)', 100);
        
        // Remove after 5 seconds
        setTimeout(() => {
            notification.style.transform = 'translateX(100%)';
            setTimeout(() => {
                if (document.body.contains(notification)) {
                    document.body.removeChild(notification);
                }
            }, 300);
        }, 5000);
    }

    trackEvent(eventName, properties = {}) {
        // Analytics tracking for production
        console.log('Event tracked:', eventName, properties);
        
        // In production, this would integrate with analytics services like:
        // - Google Analytics 4
        // - Mixpanel
        // - Amplitude
        // - Custom analytics API
    }

    debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }
}

// Initialize the application when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    window.brandStrategyApp = new BrandStrategyApp();
});

// Global functions for HTML onclick handlers (keeping for compatibility)
function login() { window.brandStrategyApp?.login(); }
function logout() { window.brandStrategyApp?.logout(); }
function startNewStrategy() { window.brandStrategyApp?.startNewStrategy(); }
function backToDashboard() { window.brandStrategyApp?.backToDashboard(); }
function loadDemoScenario(scenario) { window.brandStrategyApp?.loadDemoScenario(scenario); }
function nextStep() { window.brandStrategyApp?.nextStep(); }
function previousStep() { window.brandStrategyApp?.previousStep(); }
function exportToPDF() { window.brandStrategyApp?.exportToPDF(); }
function editStrategy() { window.brandStrategyApp?.editStrategy(); }