import './style.css'

// Initialize the application
document.querySelector('#app').innerHTML = `
  <div class="app">
     <!-- Enhanced Floating Navigation - Now Top Right -->
    <nav class="floating-nav" id="floatingNav">
      <div class="nav-container">
        <div class="nav-wrapper">
          <div class="nav-items">
            <a href="#intro" class="nav-item active" data-section="intro">
              <span class="nav-icon">🏠</span>
              <div class="nav-tooltip">Home</div>
            </a>
            <a href="#dashboard" class="nav-item" data-section="dashboard">
              <span class="nav-icon">🚀</span>
              <div class="nav-tooltip">Dashboard</div>
            </a>
            <a href="#footer" class="nav-item" data-section="footer">
              <span class="nav-icon">📞</span>
              <div class="nav-tooltip">Contact</div>
            </a>
          </div>
        </div>
      </div>
    </nav>

    <!-- Intro Section -->
    <section class="intro-section" id="intro">
      <div class="intro-container">
        <div class="intro-content">
          <h1 class="intro-title">Welcome to the Hexr Factory Resource Page</h1>
          <p class="intro-subtext">Internal tools and services – for employees only</p>
          
          <div class="loading-container" id="loadingContainer">
            <div class="loading-bar">
              <div class="loading-progress" id="loadingProgress"></div>
            </div>
            <p class="loading-text">Initializing systems...</p>
          </div>
          
          <div class="scroll-indicator" id="scrollIndicator">
            <div class="scroll-arrow">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <span>Scroll to explore</span>
          </div>
        </div>
        
        <div class="intro-visual">
          <div class="hexagon-grid">
            <div class="hexagon hex-1"></div>
            <div class="hexagon hex-2"></div>
            <div class="hexagon hex-3"></div>
            <div class="hexagon hex-4"></div>
            <div class="hexagon hex-5"></div>
            <div class="hexagon hex-6"></div>
          </div>
        </div>
      </div>
    </section>

    <!-- Dashboard Section -->
    <section class="dashboard-section" id="dashboard">
      <div class="container">
        <div class="dashboard-header">
          <h2 class="dashboard-title">Explore Our Ecosystem</h2>
          <p class="dashboard-subtitle">Access all internal tools and applications from one central hub</p>
        </div>

        <!-- Applications Group -->
        <div class="card-group">
          <h3 class="group-title">
            <span class="group-icon">📱</span>
            Applications
          </h3>
          <div class="cards-grid">
            <div class="service-card" data-category="applications">
              <div class="card-header">
                <div class="card-icon">🎯</div>
                <h4>Dwinzo App (Main)</h4>
                <div class="service-status">
                  <span class="status-badge online">Live</span>
                </div>
              </div>
              <p class="card-description">Core application with full stack services</p>
              <div class="service-endpoints">
                <div class="endpoint-group">
                  <span class="endpoint-label">Frontend</span>
                  <a href="http://185.100.212.76:8200/" class="endpoint-btn frontend" target="_blank">
                    <span class="btn-icon">🌐</span>
                    <span>Web App</span>
                    <span class="btn-arrow">→</span>
                  </a>
                </div>
                <div class="endpoint-group">
                  <span class="endpoint-label">Backend Services</span>
                  <div class="endpoint-buttons">
                    <a href="http://185.100.212.76:8000/" class="endpoint-btn backend" target="_blank">
                      <span class="btn-icon">⚙️</span>
                      <span>API</span>
                    </a>
                    <a href="http://185.100.212.76:5000" class="endpoint-btn socket" target="_blank">
                      <span class="btn-icon">🔌</span>
                      <span>Socket</span>
                    </a>
                    <a href="http://185.100.212.76:27021" class="endpoint-btn database" target="_blank">
                      <span class="btn-icon">🗄️</span>
                      <span>MongoDB</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>

            <div class="service-card" data-category="applications">
              <div class="card-header">
                <div class="card-icon">🧪</div>
                <h4>Dwinzo-Demo App</h4>
                <div class="service-status">
                  <span class="status-badge demo">Demo</span>
                </div>
              </div>
              <p class="card-description">Demo version with version-based updates</p>
              <div class="service-endpoints">
                <div class="endpoint-group">
                  <span class="endpoint-label">Frontend</span>
                  <a href="http://185.100.212.76:8300/" class="endpoint-btn frontend" target="_blank">
                    <span class="btn-icon">🌐</span>
                    <span>Demo Web App</span>
                    <span class="btn-arrow">→</span>
                  </a>
                </div>
                <div class="endpoint-group">
                  <span class="endpoint-label">Backend Services</span>
                  <div class="endpoint-buttons">
                    <a href="http://185.100.212.76:4999/" class="endpoint-btn backend" target="_blank">
                      <span class="btn-icon">⚙️</span>
                      <span>API</span>
                    </a>
                    <a href="http://185.100.212.76:7999/" class="endpoint-btn socket" target="_blank">
                      <span class="btn-icon">🔌</span>
                      <span>Socket</span>
                    </a>
                    <a href="http://185.100.212.76:27022/" class="endpoint-btn database" target="_blank">
                      <span class="btn-icon">🗄️</span>
                      <span>MongoDB</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>

            <div class="service-card" data-category="applications">
              <div class="card-header">
                <div class="card-icon">🛒</div>
                <h4>Marketplace</h4>
                <div class="service-status">
                  <span class="status-badge shared">Shared</span>
                </div>
              </div>
              <p class="card-description">Common marketplace for Dwinzo & Demo</p>
              <div class="service-endpoints">
          
                <div class="endpoint-group">
                  <span class="endpoint-label">Backend Services</span>
                  <div class="endpoint-buttons">
                    <a href="http://185.100.212.76:50011/" class="endpoint-btn backend" target="_blank">
                      <span class="btn-icon">⚙️</span>
                      <span>API</span>
                    </a>
                    <a href="http://185.100.212.76:27020/" class="endpoint-btn database" target="_blank">
                      <span class="btn-icon">🗄️</span>
                      <span>MongoDB</span>
                    </a>
                
                  </div>
                </div>
              </div>
            </div>

            <div class="service-card" data-category="applications">
              <div class="card-header">
                <div class="card-icon">🌐</div>
                <h4>Dwinzo-IoT</h4>
                <div class="service-status">
                  <span class="status-badge iot">IoT</span>
                </div>
              </div>
              <p class="card-description">IoT backend services and monitoring</p>
              <div class="service-endpoints">
               
                <div class="endpoint-group">
                  <span class="endpoint-label">Backend Services</span>
                  <div class="endpoint-buttons">
                    <a href="http://185.100.212.76:5010/" class="endpoint-btn backend" target="_blank">
                      <span class="btn-icon">⚙️</span>
                      <span>API</span>
                    </a>
                    <a href="http://185.100.212.76:23457/" class="endpoint-btn socket" target="_blank">
                      <span class="btn-icon">📡</span>
                      <span>MQTT</span>
                    </a>
                    <a href="http://185.100.212.76:8090/" class="endpoint-btn database" target="_blank">
                      <span class="btn-icon">🗄️</span>
                      <span>InflexDB</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>

            <div class="service-card" data-category="applications">
              <div class="card-header">
                <div class="card-icon">💻</div>
                <h4>Dwinzo Website</h4>
                <div class="service-status">
                  <span class="status-badge public">Public</span>
                </div>
              </div>
              <p class="card-description">Public website interface</p>
              <div class="service-endpoints">
                <div class="endpoint-group">
                  <span class="endpoint-label">Frontend</span>
                  <a href="http://185.100.212.76:4040/" class="endpoint-btn frontend" target="_blank">
                    <span class="btn-icon">🌐</span>
                    <span>Public Website</span>
                    <span class="btn-arrow">→</span>
                  </a>
                </div>
                
              </div>
            </div>
          </div>
        </div>

        <!-- DevOps Tools Group -->
        <div class="card-group">
          <h3 class="group-title">
            <span class="group-icon">⚙️</span>
            DevOps Tools
          </h3>
          <div class="cards-grid">
            <div class="service-card" data-category="devops">
              <div class="card-header">
                <div class="card-icon">🌿</div>
                <h4>Gitea</h4>
              </div>
              <p class="card-description">Git repository management</p>
              <div class="card-buttons">
                <a href="http://185.100.212.76:7776/" class="card-btn primary" target="_blank">
                  <span>Visit</span>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </a>
              </div>
            </div>

            <div class="service-card" data-category="devops">
              <div class="card-header">
                <div class="card-icon">👨‍🔧</div>
                <h4>Jenkins</h4>
              </div>
              <p class="card-description">CI/CD automation server</p>
              <div class="card-buttons">
                <a href="http://185.100.212.76:1234/" class="card-btn primary" target="_blank">
                  <span>Visit</span>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </a>
              </div>
            </div>

            <div class="service-card" data-category="devops">
              <div class="card-header">
                <div class="card-icon">🔍</div>
                <h4>SonarQube</h4>
              </div>
              <p class="card-description">Code quality analysis</p>
              <div class="card-buttons">
                <a href="http://185.100.212.76:12345/" class="card-btn primary" target="_blank">
                  <span>Visit</span>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </a>
              </div>
            </div>

            <div class="service-card" data-category="devops">
              <div class="card-header">
                <div class="card-icon">🗄️</div>
                <h4>MinIO</h4>
              </div>
              <p class="card-description">Object storage service</p>
              <div class="card-buttons">
                <a href="http://185.100.212.76:9001/" class="card-btn primary" target="_blank">
                  <span>Visit</span>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </a>
              </div>
            </div>

            <div class="service-card" data-category="devops">
              <div class="card-header">
                <div class="card-icon">⚡</div>
                <h4>Redis</h4>
              </div>
              <p class="card-description">In-memory data structure store</p>
              <div class="card-buttons">
                <a href="http://185.100.212.76:6666/" class="card-btn primary" target="_blank">
                  <span>Visit</span>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </a>
              </div>
            </div>

            <div class="service-card" data-category="devops">
              <div class="card-header">
                <div class="card-icon">📡</div>
                <h4>MQTT Broker</h4>
              </div>
              <p class="card-description">Message queuing service</p>
              <div class="card-buttons">
                <a href="http://185.100.212.76:23457" class="card-btn primary" target="_blank">
                  <span>Visit</span>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </a>
              </div>
            </div>

            <div class="service-card" data-category="devops">
              <div class="card-header">
                <div class="card-icon">🌊</div>
                <h4>InfluxDB</h4>
              </div>
              <p class="card-description">Time series database</p>
              <div class="card-buttons">
                <a href="http://185.100.212.76:8090/" class="card-btn primary" target="_blank">
                  <span>Visit</span>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </a>
              </div>
            </div>

            <div class="service-card" data-category="devops">
              <div class="card-header">
                <div class="card-icon">🏗️</div>
                <h4>Build Arch</h4>
              </div>
              <p class="card-description">Build architecture management</p>
              <div class="card-buttons">
                <a href="http://185.100.212.76:8088" class="card-btn primary" target="_blank">
                  <span>Visit</span>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </a>
              </div>
            </div>

            <div class="service-card" data-category="devops">
              <div class="card-header">
                <div class="card-icon">📈</div>
                <h4>Prometheus</h4>
              </div>
              <p class="card-description">Monitoring and alerting</p>
              <div class="card-buttons">
                <a href="http://185.100.212.76:6789/targets/" class="card-btn primary" target="_blank">
                  <span>Visit</span>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </a>
              </div>
            </div>

            <div class="service-card" data-category="devops">
              <div class="card-header">
                <div class="card-icon">📊</div>
                <h4>Grafana</h4>
              </div>
              <p class="card-description">Analytics and monitoring</p>
              <div class="card-buttons">
                <a href="http://185.100.212.76:5678/a/grafana-metricsdrilldown-app/drilldown?...&nativeHistogramMetric=&layout=grid&filters-rule=&filters-prefix=&filters-suffix=&from=now-1h&to=now&timezone=Asia%2FKolkata&var-otel_resources=&var-filters=&var-otel_and_metric_filters=&var-deployment_environment=undefined&var-labelsWingman=%28none%29&search_txt=&var-metrics-reducer-sort-by=default&var-ds=celq68dj5iltsa&var-other_metric_filters=" class="card-btn primary" target="_blank">
                  <span>Visit</span>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </a>
              </div>
            </div>

            <div class="service-card" data-category="devops">
              <div class="card-header">
                <div class="card-icon">📋</div>
                <h4>Jira</h4>
              </div>
              <p class="card-description">Project management</p>
              <div class="card-buttons">
                <a href="https://hexrfactory.atlassian.net/wiki/spaces" class="card-btn primary" target="_blank">
                  <span>Visit</span>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </a>
              </div>
            </div>

            <div class="service-card" data-category="devops">
              <div class="card-header">
                <div class="card-icon">📚</div>
                <h4>Confluence</h4>
              </div>
              <p class="card-description">Team collaboration</p>
              <div class="card-buttons">
                <a href="https://hexrfactory.atlassian.net/wiki/spaces" class="card-btn primary" target="_blank">
                  <span>Visit</span>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>

        <!-- External Sites Group -->
        <div class="card-group">
          <h3 class="group-title">
            <span class="group-icon">🌍</span>
            External Sites
          </h3>
          <div class="cards-grid">
            <div class="service-card" data-category="external">
              <div class="card-header">
                <div class="card-icon">🏢</div>
                <h4>Taj Residence</h4>
              </div>
              <p class="card-description">External news portal</p>
              <div class="card-buttons">
                <a href="http://185.100.212.76:3333/" class="card-btn primary" target="_blank">
                  <span>Visit</span>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </a>
              </div>
            </div>

            <div class="service-card" data-category="external">
              <div class="card-header">
                <div class="card-icon">🌐</div>
                <h4>Global News</h4>
              </div>
              <p class="card-description">Global news platform</p>
              <div class="card-buttons">
                <a href="http://185.100.212.76:3334/" class="card-btn primary" target="_blank">
                  <span>Visit</span>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <footer class="footer" id="footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-brand">
            <div class="company-logo">
              <div class="logo-icon">🏭</div>
              <div class="logo-text">
                <h3>HEXR FACTORY</h3>
                <span>IMMERSIVE TECH</span>
              </div>
            </div>
            <p class="footer-description">Innovative solutions for the future</p>
          </div>
          
          <div class="footer-info">
            <div class="manager-info">
              <h4>Managed by</h4>
              <p class="manager-name">Marikannan Sankarraj</p>
              📧 <a href="mailto:marikannan@hexrfactory.com" style="color: #667eea; text-decoration: none;">marikannan@hexrfactory.com</a><br><br>
            </div>
            
            <div class="company-info">
              <p class="company-name">HEXR FACTORY IMMERSIVE TECH PRIVATE LIMITED</p>
              <p class="copyright">Innovative solutions for the future</p>
              <p class="copyright">© 2025 • All rights reserved </p>
            </div>
          </div>
        </div>
        
        <div class="feedback-button">
          <button class="btn-feedback" id="feedbackBtn">
            <span>💬</span>
            <span>Feedback</span>
          </button>
        </div>
      </div>
    </footer>
  </div>
`

// Loading animation
let progress = 0;
const loadingProgress = document.getElementById('loadingProgress');
const loadingContainer = document.getElementById('loadingContainer');
const scrollIndicator = document.getElementById('scrollIndicator');

const loadingInterval = setInterval(() => {
  progress += Math.random() * 15;
  if (progress >= 100) {
    progress = 100;
    clearInterval(loadingInterval);
    setTimeout(() => {
      loadingContainer.style.opacity = '0';
      loadingContainer.style.transform = 'translateY(-20px)';
      setTimeout(() => {
        loadingContainer.style.display = 'none';
        scrollIndicator.style.opacity = '1';
        scrollIndicator.style.transform = 'translateY(0)';
        
        const dashboardSection = document.getElementById('dashboard');
        if (dashboardSection) {
          dashboardSection.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
          });
        }

      }, 500);
    }, 800);
  }
  loadingProgress.style.width = progress + '%';
}, 200);

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

// Floating navigation active state
const sections = document.querySelectorAll('section');
const navItems = document.querySelectorAll('.nav-item');

function updateActiveNav() {
  let current = '';
  sections.forEach(section => {
    const sectionTop = section.offsetTop;
    if (window.scrollY >= sectionTop - 200) {
      current = section.getAttribute('id');
    }
  });

  navItems.forEach(item => {
    item.classList.remove('active');
    if (item.getAttribute('data-section') === current) {
      item.classList.add('active');
    }
  });
}

window.addEventListener('scroll', updateActiveNav);

// Scroll reveal animations
const observerOptions = {
  threshold: 0.1,
  rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate-in');
    }
  });
}, observerOptions);

// Observe all cards and groups
document.querySelectorAll('.service-card, .card-group, .dashboard-header').forEach(el => {
  observer.observe(el);
});

// Feedback button functionality
document.getElementById('feedbackBtn').addEventListener('click', () => {
  alert('Feedback feature coming soon! Please contact Marikannan Sankarraj for any suggestions.');
});

// Card hover effects and animations
document.querySelectorAll('.service-card').forEach(card => {
  card.addEventListener('mouseenter', () => {
    card.style.transform = 'translateY(-8px) scale(1.02)';
  });
  
  card.addEventListener('mouseleave', () => {
    card.style.transform = 'translateY(0) scale(1)';
  });
});

// Hexagon animation
const hexagons = document.querySelectorAll('.hexagon');
hexagons.forEach((hex, index) => {
  hex.style.animationDelay = `${index * 0.3}s`;
});

// Enhanced button interactions
document.querySelectorAll('.endpoint-btn').forEach(btn => {
  btn.addEventListener('mouseenter', () => {
    btn.style.transform = 'translateY(-2px) scale(1.05)';
  });
  
  btn.addEventListener('mouseleave', () => {
    btn.style.transform = 'translateY(0) scale(1)';
  });

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

    // Active navigation state
    const sections = document.querySelectorAll('section[id]');
    const navItems = document.querySelectorAll('.nav-item');

    function updateActiveNav() {
      let current = '';
      sections.forEach(section => {
        const sectionTop = section.offsetTop;
        const sectionHeight = section.clientHeight;
        if (window.scrollY >= sectionTop - 200) {
          current = section.getAttribute('id');
        }
      });

      navItems.forEach(item => {
        item.classList.remove('active');
        if (item.getAttribute('data-section') === current) {
          item.classList.add('active');
        }
      });
    }

    window.addEventListener('scroll', updateActiveNav);

    // Magnetic hover effect
    navItems.forEach(item => {
      item.addEventListener('mousemove', (e) => {
        const rect = item.getBoundingClientRect();
        const x = e.clientX - rect.left - rect.width / 2;
        const y = e.clientY - rect.top - rect.height / 2;
        item.style.transform = `scale(1.15) rotate(5deg) translate(${x * 0.1}px, ${y * 0.1}px)`;
      });
      item.addEventListener('mouseleave', () => {
        item.style.transform = '';
      });
    });
});