{# Demo Content Loader - Only loads in preview/demo mode #}
{# Usage: {% if request.query_dict.demo == "true" %}{% include "includes/demo-content.html" %}{% endif %} #}

{% set is_demo_mode = request.query_dict.demo == "true" or request.query_dict.preview == "true" %}

{% if is_demo_mode %}
  <div class="demo-mode-banner" style="background: #ffc107; color: #000; padding: 10px; text-align: center; position: fixed; top: 0; left: 0; right: 0; z-index: 9999;">
    <strong>Demo Mode Active</strong> - Sample content is being displayed. 
    <a href="?" style="color: #000; text-decoration: underline;">Exit Demo</a>
  </div>
  
  <style>
    body { padding-top: 40px !important; }
    .demo-content { 
      border: 2px dashed #ffc107; 
      padding: 20px; 
      margin: 20px 0;
      position: relative;
    }
    .demo-content::before {
      content: "DEMO CONTENT";
      position: absolute;
      top: -10px;
      left: 10px;
      background: #ffc107;
      color: #000;
      padding: 2px 8px;
      font-size: 11px;
      font-weight: bold;
    }
  </style>
  
  {# Demo Content Definitions #}
  {% set demo_hero_title = "Welcome to Fasterrr Theme" %}
  {% set demo_hero_subtitle = "Experience blazing-fast performance with modern web technologies" %}
  {% set demo_hero_cta = "Get Started" %}
  
  {% set demo_features = [
    {
      "title": "Lightning Fast",
      "description": "95+ PageSpeed scores out of the box with optimized critical rendering path",
      "icon": "⚡"
    },
    {
      "title": "Modern Only", 
      "description": "No legacy browser support means 85% less CSS and JavaScript",
      "icon": "🚀"
    },
    {
      "title": "Mobile First",
      "description": "Responsive design that prioritizes mobile performance and usability",
      "icon": "📱"
    }
  ] %}
  
  {% set demo_testimonials = [
    {
      "quote": "The fastest HubSpot theme we've ever used. Our PageSpeed scores went from 60 to 95!",
      "author": "Sarah Johnson",
      "company": "TechCorp Inc."
    },
    {
      "quote": "Finally, a theme that doesn't compromise on performance for features.",
      "author": "Mike Chen",
      "company": "Digital Agency"
    }
  ] %}
  
  {# Make demo content available globally #}
  <script>
    window.DEMO_CONTENT = {
      hero: {
        title: "{{ demo_hero_title }}",
        subtitle: "{{ demo_hero_subtitle }}",
        cta: "{{ demo_hero_cta }}"
      },
      features: {{ demo_features|tojson }},
      testimonials: {{ demo_testimonials|tojson }},
      images: {
        hero: "https://via.placeholder.com/1920x600/007bff/ffffff?text=Hero+Image",
        feature: "https://via.placeholder.com/600x400/6c757d/ffffff?text=Feature",
        testimonial: "https://via.placeholder.com/100x100/dee2e6/495057?text=Avatar"
      }
    };
    
    // Auto-populate empty fields with demo content
    document.addEventListener('DOMContentLoaded', function() {
      // Only in demo mode
      if (!window.location.search.includes('demo=true')) return;
      
      // Auto-fill empty hero sections
      const heroTitle = document.querySelector('.hero-title:empty');
      if (heroTitle) heroTitle.textContent = window.DEMO_CONTENT.hero.title;
      
      const heroSubtitle = document.querySelector('.hero-subtitle:empty');
      if (heroSubtitle) heroSubtitle.textContent = window.DEMO_CONTENT.hero.subtitle;
      
      // Add demo class to modified elements
      document.querySelectorAll('[data-demo-populated]').forEach(el => {
        el.classList.add('demo-content');
      });
    });
  </script>
{% endif %}