import { html } from '@design.estate/dees-element';
import type { IStatusPageConfig } from '../interfaces/index.js';

export const demoFunc = () => html`
  <style>
    .demo-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .demo-section {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 20px;
      background: #f5f5f5;
    }
    .demo-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 16px;
      color: #333;
    }
    .demo-controls {
      display: flex;
      gap: 10px;
      margin-top: 16px;
      flex-wrap: wrap;
    }
    .demo-button {
      padding: 6px 12px;
      border: 1px solid #ddd;
      background: white;
      border-radius: 4px;
      cursor: pointer;
      font-size: 13px;
    }
    .demo-button:hover {
      background: #f0f0f0;
    }
    .demo-button.active {
      background: #2196F3;
      color: white;
      border-color: #2196F3;
    }
    .demo-info {
      margin-top: 12px;
      padding: 12px;
      background: white;
      border-radius: 4px;
      font-size: 13px;
      line-height: 1.6;
    }
    .event-log {
      margin-top: 12px;
      padding: 12px;
      background: #f9f9f9;
      border-radius: 4px;
      font-size: 12px;
      max-height: 150px;
      overflow-y: auto;
      font-family: monospace;
    }
    .config-display {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 12px;
      margin-top: 12px;
    }
    .config-item {
      background: white;
      padding: 12px;
      border-radius: 4px;
      font-size: 12px;
    }
    .config-label {
      font-weight: 600;
      color: #666;
      margin-bottom: 4px;
    }
    .config-value {
      word-break: break-word;
    }
  </style>

  <div class="demo-container">
    <!-- Different Configuration Scenarios -->
    <div class="demo-section">
      <div class="demo-title">Different Footer Configurations</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const footer = wrapperElement.querySelector('upl-statuspage-footer') as any;
          
          // Configuration presets
          const configPresets = {
            minimal: {
              name: 'Minimal',
              config: {
                companyName: 'SimpleStatus',
                whitelabel: true,
                lastUpdated: Date.now()
              }
            },
            standard: {
              name: 'Standard',
              config: {
                companyName: 'TechCorp Solutions',
                legalUrl: 'https://example.com/legal',
                supportEmail: 'support@techcorp.com',
                statusPageUrl: 'https://status.techcorp.com',
                whitelabel: false,
                lastUpdated: Date.now(),
                currentYear: new Date().getFullYear()
              }
            },
            fullFeatured: {
              name: 'Full Featured',
              config: {
                companyName: 'Enterprise Cloud Platform',
                legalUrl: 'https://enterprise.com/legal',
                supportEmail: 'support@enterprise.com',
                statusPageUrl: 'https://status.enterprise.com',
                whitelabel: false,
                socialLinks: [
                  { platform: 'twitter', url: 'https://twitter.com/enterprise' },
                  { platform: 'github', url: 'https://github.com/enterprise' },
                  { platform: 'linkedin', url: 'https://linkedin.com/company/enterprise' },
                  { platform: 'facebook', url: 'https://facebook.com/enterprise' },
                  { platform: 'youtube', url: 'https://youtube.com/enterprise' }
                ],
                rssFeedUrl: 'https://status.enterprise.com/rss',
                apiStatusUrl: 'https://api.enterprise.com/v1/status',
                lastUpdated: Date.now(),
                currentYear: new Date().getFullYear(),
                language: 'en',
                additionalLinks: [
                  { label: 'API Docs', url: 'https://docs.enterprise.com' },
                  { label: 'Service SLA', url: 'https://enterprise.com/sla' },
                  { label: 'Security', url: 'https://enterprise.com/security' }
                ]
              }
            },
            international: {
              name: 'International',
              config: {
                companyName: 'Global Services GmbH',
                legalUrl: 'https://global.eu/legal',
                supportEmail: 'support@global.eu',
                statusPageUrl: 'https://status.global.eu',
                whitelabel: false,
                language: 'de',
                currentYear: new Date().getFullYear(),
                lastUpdated: Date.now(),
                languageOptions: [
                  { code: 'en', label: 'English' },
                  { code: 'de', label: 'Deutsch' },
                  { code: 'fr', label: 'Français' },
                  { code: 'es', label: 'Español' },
                  { code: 'ja', label: '日本語' }
                ],
                socialLinks: [
                  { platform: 'twitter', url: 'https://twitter.com/global_eu' },
                  { platform: 'linkedin', url: 'https://linkedin.com/company/global-eu' }
                ]
              }
            },
            whitelabel: {
              name: 'Whitelabel',
              config: {
                companyName: 'Custom Brand Status',
                whitelabel: true,
                customBranding: {
                  primaryColor: '#FF5722',
                  logoUrl: 'https://example.com/custom-logo.png',
                  footerText: 'Powered by Custom Infrastructure'
                },
                lastUpdated: Date.now(),
                currentYear: new Date().getFullYear()
              }
            }
          };
          
          // Initial setup
          let currentPreset = 'standard';
          const applyPreset = (preset: any) => {
            Object.keys(preset.config).forEach(key => {
              footer[key] = preset.config[key];
            });
            updateConfigDisplay(preset.config);
          };
          
          applyPreset(configPresets[currentPreset]);
          
          // Create controls
          const controls = document.createElement('div');
          controls.className = 'demo-controls';
          
          Object.entries(configPresets).forEach(([key, preset]) => {
            const button = document.createElement('button');
            button.className = 'demo-button' + (key === currentPreset ? ' active' : '');
            button.textContent = preset.name;
            button.onclick = () => {
              controls.querySelectorAll('.demo-button').forEach(btn => btn.classList.remove('active'));
              button.classList.add('active');
              
              currentPreset = key;
              footer.loading = true;
              setTimeout(() => {
                applyPreset(preset);
                footer.loading = false;
              }, 500);
            };
            controls.appendChild(button);
          });
          
          wrapperElement.appendChild(controls);
          
          // Add configuration display
          const configDisplay = document.createElement('div');
          configDisplay.className = 'config-display';
          wrapperElement.appendChild(configDisplay);
          
          const updateConfigDisplay = (config: any) => {
            configDisplay.innerHTML = Object.entries(config)
              .filter(([key]) => key !== 'socialLinks' && key !== 'additionalLinks' && key !== 'languageOptions')
              .map(([key, value]) => `
                <div class="config-item">
                  <div class="config-label">${key}</div>
                  <div class="config-value">${value}</div>
                </div>
              `).join('');
          };
          
          // Handle events
          footer.addEventListener('footerLinkClick', (event: CustomEvent) => {
            console.log('Footer link clicked:', event.detail);
            alert(`Link clicked: ${event.detail.type} - ${event.detail.url}`);
          });
          
          footer.addEventListener('subscribeClick', () => {
            alert('Subscribe feature would open here');
          });
          
          footer.addEventListener('reportIncidentClick', () => {
            alert('Report incident form would open here');
          });
          
          footer.addEventListener('languageChange', (event: CustomEvent) => {
            alert(`Language changed to: ${event.detail.language}`);
          });
        }}
      >
        <upl-statuspage-footer></upl-statuspage-footer>
      </dees-demowrapper>
    </div>

    <!-- Loading and Error States -->
    <div class="demo-section">
      <div class="demo-title">Loading and Error States</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const footer = wrapperElement.querySelector('upl-statuspage-footer') as any;
          
          // Start with loading
          footer.loading = true;
          footer.companyName = 'LoadingCorp';
          
          const controls = document.createElement('div');
          controls.className = 'demo-controls';
          controls.innerHTML = `
            <button class="demo-button" id="toggleLoading">Toggle Loading</button>
            <button class="demo-button" id="loadSuccess">Load Successfully</button>
            <button class="demo-button" id="simulateError">Simulate Error</button>
            <button class="demo-button" id="simulateOffline">Simulate Offline</button>
            <button class="demo-button" id="brokenLinks">Broken Links</button>
          `;
          wrapperElement.appendChild(controls);
          
          controls.querySelector('#toggleLoading')?.addEventListener('click', () => {
            footer.loading = !footer.loading;
          });
          
          controls.querySelector('#loadSuccess')?.addEventListener('click', () => {
            footer.loading = true;
            setTimeout(() => {
              footer.companyName = 'Successfully Loaded Inc';
              footer.legalUrl = 'https://example.com/legal';
              footer.supportEmail = 'support@loaded.com';
              footer.statusPageUrl = 'https://status.loaded.com';
              footer.lastUpdated = Date.now();
              footer.socialLinks = [
                { platform: 'twitter', url: 'https://twitter.com/loaded' },
                { platform: 'github', url: 'https://github.com/loaded' }
              ];
              footer.loading = false;
              footer.errorMessage = null;
            }, 1000);
          });
          
          controls.querySelector('#simulateError')?.addEventListener('click', () => {
            footer.loading = true;
            setTimeout(() => {
              footer.loading = false;
              footer.errorMessage = 'Failed to load footer configuration';
              footer.companyName = 'Error Loading';
              footer.socialLinks = [];
            }, 1500);
          });
          
          controls.querySelector('#simulateOffline')?.addEventListener('click', () => {
            footer.offline = true;
            footer.errorMessage = 'You are currently offline';
            footer.lastUpdated = null;
          });
          
          controls.querySelector('#brokenLinks')?.addEventListener('click', () => {
            footer.companyName = 'Broken Links Demo';
            footer.legalUrl = 'https://broken.invalid/legal';
            footer.supportEmail = 'invalid-email';
            footer.socialLinks = [
              { platform: 'twitter', url: '' },
              { platform: 'github', url: 'not-a-url' }
            ];
            footer.rssFeedUrl = 'https://broken.invalid/rss';
            footer.apiStatusUrl = null;
          });
          
          // Add info display
          const info = document.createElement('div');
          info.className = 'demo-info';
          info.innerHTML = 'Test different loading states and error scenarios using the controls above.';
          wrapperElement.appendChild(info);
        }}
      >
        <upl-statuspage-footer></upl-statuspage-footer>
      </dees-demowrapper>
    </div>

    <!-- Dynamic Updates and Real-time Features -->
    <div class="demo-section">
      <div class="demo-title">Dynamic Updates and Real-time Features</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const footer = wrapperElement.querySelector('upl-statuspage-footer') as any;
          
          // Initial configuration
          footer.companyName = 'RealTime Systems';
          footer.legalUrl = 'https://realtime.com/legal';
          footer.supportEmail = 'support@realtime.com';
          footer.statusPageUrl = 'https://status.realtime.com';
          footer.lastUpdated = Date.now();
          footer.currentYear = new Date().getFullYear();
          
          // Dynamic social links
          const allSocialPlatforms = [
            { platform: 'twitter', url: 'https://twitter.com/realtime' },
            { platform: 'github', url: 'https://github.com/realtime' },
            { platform: 'linkedin', url: 'https://linkedin.com/company/realtime' },
            { platform: 'facebook', url: 'https://facebook.com/realtime' },
            { platform: 'youtube', url: 'https://youtube.com/realtime' },
            { platform: 'instagram', url: 'https://instagram.com/realtime' },
            { platform: 'slack', url: 'https://realtime.slack.com' },
            { platform: 'discord', url: 'https://discord.gg/realtime' }
          ];
          
          footer.socialLinks = allSocialPlatforms.slice(0, 3);
          
          // Real-time status feed
          footer.rssFeedUrl = 'https://status.realtime.com/rss';
          footer.apiStatusUrl = 'https://api.realtime.com/v1/status';
          
          // Status feed simulation
          const statusUpdates = [
            'All systems operational',
            'Investigating API latency',
            'Maintenance scheduled for tonight',
            'Performance improvements deployed',
            'New datacenter online',
            'Security patch applied'
          ];
          
          let updateIndex = 0;
          footer.latestStatusUpdate = statusUpdates[0];
          
          // Auto-update last updated time
          const updateInterval = setInterval(() => {
            footer.lastUpdated = Date.now();
          }, 5000);
          
          // Rotate status updates
          const statusInterval = setInterval(() => {
            updateIndex = (updateIndex + 1) % statusUpdates.length;
            footer.latestStatusUpdate = statusUpdates[updateIndex];
            logEvent(`Status update: ${statusUpdates[updateIndex]}`);
          }, 8000);
          
          // Create controls
          const controls = document.createElement('div');
          controls.className = 'demo-controls';
          controls.innerHTML = `
            <button class="demo-button" id="addSocial">Add Social Link</button>
            <button class="demo-button" id="removeSocial">Remove Social Link</button>
            <button class="demo-button" id="updateStatus">Force Status Update</button>
            <button class="demo-button" id="changeYear">Change Year</button>
          `;
          wrapperElement.appendChild(controls);
          
          controls.querySelector('#addSocial')?.addEventListener('click', () => {
            if (footer.socialLinks.length < allSocialPlatforms.length) {
              footer.socialLinks = [...footer.socialLinks, allSocialPlatforms[footer.socialLinks.length]];
              logEvent(`Added ${allSocialPlatforms[footer.socialLinks.length - 1].platform} link`);
            }
          });
          
          controls.querySelector('#removeSocial')?.addEventListener('click', () => {
            if (footer.socialLinks.length > 0) {
              const removed = footer.socialLinks[footer.socialLinks.length - 1];
              footer.socialLinks = footer.socialLinks.slice(0, -1);
              logEvent(`Removed ${removed.platform} link`);
            }
          });
          
          controls.querySelector('#updateStatus')?.addEventListener('click', () => {
            const customStatus = prompt('Enter custom status update:');
            if (customStatus) {
              footer.latestStatusUpdate = customStatus;
              footer.lastUpdated = Date.now();
              logEvent(`Custom status: ${customStatus}`);
            }
          });
          
          controls.querySelector('#changeYear')?.addEventListener('click', () => {
            footer.currentYear = footer.currentYear + 1;
            logEvent(`Year changed to ${footer.currentYear}`);
          });
          
          // Event log
          const eventLog = document.createElement('div');
          eventLog.className = 'event-log';
          eventLog.innerHTML = '<strong>Event Log:</strong><br>';
          wrapperElement.appendChild(eventLog);
          
          const logEvent = (message: string) => {
            const time = new Date().toLocaleTimeString();
            eventLog.innerHTML += `[${time}] ${message}<br>`;
            eventLog.scrollTop = eventLog.scrollHeight;
          };
          
          logEvent('Real-time updates started');
          
          // Cleanup
          wrapperElement.addEventListener('remove', () => {
            clearInterval(updateInterval);
            clearInterval(statusInterval);
          });
        }}
      >
        <upl-statuspage-footer></upl-statuspage-footer>
      </dees-demowrapper>
    </div>

    <!-- Interactive Features -->
    <div class="demo-section">
      <div class="demo-title">Interactive Features and Actions</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const footer = wrapperElement.querySelector('upl-statuspage-footer') as any;
          
          // Setup interactive footer
          footer.companyName = 'Interactive Corp';
          footer.legalUrl = 'https://interactive.com/legal';
          footer.supportEmail = 'help@interactive.com';
          footer.statusPageUrl = 'https://status.interactive.com';
          footer.whitelabel = false;
          footer.lastUpdated = Date.now();
          footer.currentYear = new Date().getFullYear();
          
          // Interactive features
          footer.enableSubscribe = true;
          footer.enableReportIssue = true;
          footer.enableLanguageSelector = true;
          footer.enableThemeToggle = true;
          
          footer.languageOptions = [
            { code: 'en', label: 'English' },
            { code: 'es', label: 'Español' },
            { code: 'fr', label: 'Français' },
            { code: 'de', label: 'Deutsch' },
            { code: 'ja', label: '日本語' },
            { code: 'zh', label: '中文' }
          ];
          
          footer.socialLinks = [
            { platform: 'twitter', url: 'https://twitter.com/interactive' },
            { platform: 'github', url: 'https://github.com/interactive' },
            { platform: 'discord', url: 'https://discord.gg/interactive' }
          ];
          
          footer.additionalLinks = [
            { label: 'API Documentation', url: 'https://docs.interactive.com' },
            { label: 'Service Level Agreement', url: 'https://interactive.com/sla' },
            { label: 'Privacy Policy', url: 'https://interactive.com/privacy' },
            { label: 'Terms of Service', url: 'https://interactive.com/terms' }
          ];
          
          // Subscribe functionality
          let subscriberCount = 1234;
          footer.subscriberCount = subscriberCount;
          
          footer.addEventListener('subscribeClick', (event: CustomEvent) => {
            const email = prompt('Enter your email to subscribe:');
            if (email && email.includes('@')) {
              subscriberCount++;
              footer.subscriberCount = subscriberCount;
              logAction(`New subscriber: ${email} (Total: ${subscriberCount})`);
              alert(`Successfully subscribed! You are subscriber #${subscriberCount}`);
            }
          });
          
          // Report issue functionality
          footer.addEventListener('reportIncidentClick', (event: CustomEvent) => {
            const issue = prompt('Describe the issue you are experiencing:');
            if (issue) {
              const ticketId = `INC-${Date.now().toString().slice(-6)}`;
              logAction(`Issue reported: ${ticketId} - ${issue.substring(0, 50)}...`);
              alert(`Thank you! Your issue has been logged.\nTicket ID: ${ticketId}\nWe will investigate and update you at the provided email.`);
            }
          });
          
          // Language change
          footer.addEventListener('languageChange', (event: CustomEvent) => {
            const newLang = event.detail.language;
            footer.currentLanguage = newLang;
            logAction(`Language changed to: ${newLang}`);
            
            // Simulate translation
            const translations = {
              en: 'Interactive Corp',
              es: 'Corporación Interactiva',
              fr: 'Corp Interactif',
              de: 'Interaktive GmbH',
              ja: 'インタラクティブ株式会社',
              zh: '互动公司'
            };
            
            footer.companyName = translations[newLang] || translations.en;
          });
          
          // Theme toggle
          footer.addEventListener('themeToggle', (event: CustomEvent) => {
            const theme = event.detail.theme;
            logAction(`Theme changed to: ${theme}`);
            footer.currentTheme = theme;
          });
          
          // Click tracking
          footer.addEventListener('footerLinkClick', (event: CustomEvent) => {
            logAction(`Link clicked: ${event.detail.type} - ${event.detail.label || event.detail.url}`);
          });
          
          // Action log
          const actionLog = document.createElement('div');
          actionLog.className = 'event-log';
          actionLog.innerHTML = '<strong>User Actions:</strong><br>';
          wrapperElement.appendChild(actionLog);
          
          const logAction = (message: string) => {
            const time = new Date().toLocaleTimeString();
            actionLog.innerHTML += `[${time}] ${message}<br>`;
            actionLog.scrollTop = actionLog.scrollHeight;
          };
          
          logAction('Interactive footer ready');
          
          // Add info
          const info = document.createElement('div');
          info.className = 'demo-info';
          info.innerHTML = 'Try clicking on various footer elements to see the interactive features in action.';
          wrapperElement.appendChild(info);
        }}
      >
        <upl-statuspage-footer></upl-statuspage-footer>
      </dees-demowrapper>
    </div>

    <!-- Edge Cases -->
    <div class="demo-section">
      <div class="demo-title">Edge Cases and Special Scenarios</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const footer = wrapperElement.querySelector('upl-statuspage-footer') as any;
          
          const edgeCases = {
            empty: {
              name: 'Empty/Minimal',
              config: {
                companyName: '',
                whitelabel: true,
                lastUpdated: null
              }
            },
            veryLong: {
              name: 'Very Long Content',
              config: {
                companyName: 'International Mega Corporation with an Extremely Long Company Name That Tests Layout Limits Inc.',
                legalUrl: 'https://very-long-domain-name-that-might-break-layouts.international-corporation.com/legal/terms-and-conditions/privacy-policy/cookie-policy',
                supportEmail: 'customer.support.team@very-long-domain-name.international-corporation.com',
                socialLinks: Array.from({ length: 15 }, (_, i) => ({
                  platform: ['twitter', 'github', 'linkedin', 'facebook', 'youtube'][i % 5],
                  url: `https://social-${i}.com/long-username-handle-that-tests-limits`
                })),
                additionalLinks: Array.from({ length: 10 }, (_, i) => ({
                  label: `Very Long Link Label That Might Cause Layout Issues #${i + 1}`,
                  url: `https://example.com/very/long/path/structure/that/goes/on/and/on/page-${i}`
                }))
              }
            },
            unicode: {
              name: 'Unicode/International',
              config: {
                companyName: '🌍 全球服务 • グローバル • العالمية • Глобальный 🌏',
                legalUrl: 'https://unicode.test/法律',
                supportEmail: 'support@日本.jp',
                currentYear: new Date().getFullYear(),
                socialLinks: [
                  { platform: 'twitter', url: 'https://twitter.com/🌐' },
                  { platform: 'github', url: 'https://github.com/世界' }
                ],
                additionalLinks: [
                  { label: '📋 Terms & Conditions', url: '#' },
                  { label: '🔒 Privacy Policy', url: '#' },
                  { label: '🛡️ Security', url: '#' }
                ]
              }
            },
            brokenData: {
              name: 'Broken/Invalid Data',
              config: {
                companyName: null,
                legalUrl: 'not-a-valid-url',
                supportEmail: 'not-an-email',
                currentYear: 'not-a-year',
                lastUpdated: 'invalid-timestamp',
                socialLinks: [
                  { platform: null, url: null },
                  { platform: 'unknown-platform', url: '' },
                  { url: 'https://missing-platform.com' },
                  { platform: 'twitter' }
                ],
                rssFeedUrl: '',
                apiStatusUrl: undefined
              }
            },
            maxData: {
              name: 'Maximum Data',
              config: {
                companyName: 'Maximum Configuration Demo',
                legalUrl: 'https://max.demo/legal',
                supportEmail: 'all@max.demo',
                statusPageUrl: 'https://status.max.demo',
                whitelabel: false,
                currentYear: new Date().getFullYear(),
                lastUpdated: Date.now(),
                language: 'en',
                theme: 'dark',
                socialLinks: Array.from({ length: 20 }, (_, i) => ({
                  platform: 'generic',
                  url: `https://social${i}.com`
                })),
                additionalLinks: Array.from({ length: 15 }, (_, i) => ({
                  label: `Link ${i + 1}`,
                  url: `#link${i + 1}`
                })),
                rssFeedUrl: 'https://status.max.demo/rss',
                apiStatusUrl: 'https://api.max.demo/status',
                subscriberCount: 999999,
                enableSubscribe: true,
                enableReportIssue: true,
                enableLanguageSelector: true,
                enableThemeToggle: true,
                languageOptions: Array.from({ length: 50 }, (_, i) => ({
                  code: `lang${i}`,
                  label: `Language ${i}`
                }))
              }
            }
          };
          
          // Initial setup
          let currentCase = 'empty';
          const applyCase = (edgeCase: any) => {
            // Clear all properties first
            Object.keys(footer).forEach(key => {
              if (typeof footer[key] !== 'function') {
                footer[key] = undefined;
              }
            });
            
            // Apply new config
            Object.keys(edgeCase.config).forEach(key => {
              footer[key] = edgeCase.config[key];
            });
          };
          
          applyCase(edgeCases[currentCase]);
          
          // Create controls
          const controls = document.createElement('div');
          controls.className = 'demo-controls';
          
          Object.entries(edgeCases).forEach(([key, edgeCase]) => {
            const button = document.createElement('button');
            button.className = 'demo-button' + (key === currentCase ? ' active' : '');
            button.textContent = edgeCase.name;
            button.onclick = () => {
              controls.querySelectorAll('.demo-button').forEach(btn => btn.classList.remove('active'));
              button.classList.add('active');
              
              currentCase = key;
              applyCase(edgeCase);
            };
            controls.appendChild(button);
          });
          
          wrapperElement.appendChild(controls);
          
          // Add description
          const info = document.createElement('div');
          info.className = 'demo-info';
          info.innerHTML = `
            <strong>Edge Case Descriptions:</strong><br>
            <strong>Empty:</strong> Minimal configuration with missing data<br>
            <strong>Very Long:</strong> Tests layout with extremely long content<br>
            <strong>Unicode:</strong> International characters and emojis<br>
            <strong>Broken Data:</strong> Invalid or malformed configuration<br>
            <strong>Maximum Data:</strong> All features with maximum content
          `;
          wrapperElement.appendChild(info);
        }}
      >
        <upl-statuspage-footer></upl-statuspage-footer>
      </dees-demowrapper>
    </div>
  </div>
`;