---
// src/pages/projects/services.astro
import BaseLayout from '../../layouts/BaseLayout.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';

const title = "Live Services | ArgoBox";
const description = "Explore the live services running in the ArgoBox home lab infrastructure environment.";
---

<BaseLayout title={title} description={description}>
  <Header slot="header" />
  
  <div class="container">
    <div class="page-header">
      <h1>Live Services</h1>
      <div class="header-accent"></div>
    </div>
    
    <div class="coming-soon-container">
      <div class="coming-soon-card">
        <div class="icon-container">
          <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
            <rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
            <rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
            <line x1="6" y1="6" x2="6.01" y2="6"></line>
            <line x1="6" y1="18" x2="6.01" y2="18"></line>
          </svg>
        </div>
        <h2>Services Dashboard Coming Soon</h2>
        <p class="description">
          This page will provide real-time status and information about services running in my home lab environment. You'll be able to see uptime statistics, resource usage, and detailed descriptions of each service's purpose and technology stack.
        </p>
        
        <div class="service-preview">
          <div class="service-preview-header">
            <h3>Services Preview</h3>
            <div class="preview-pulse"></div>
          </div>
          
          <div class="service-list">
            <div class="service-item">
              <div class="service-status active"></div>
              <div class="service-info">
                <span class="service-name">ArgoBox</span>
                <span class="service-description">Kubernetes Dashboard &amp; GitOps</span>
              </div>
              <div class="service-action">Coming Soon</div>
            </div>
            
            <div class="service-item">
              <div class="service-status active"></div>
              <div class="service-info">
                <span class="service-name">Git Server</span>
                <span class="service-description">Self-hosted Git repositories</span>
              </div>
              <div class="service-action">Coming Soon</div>
            </div>
            
            <div class="service-item">
              <div class="service-status active"></div>
              <div class="service-info">
                <span class="service-name">Kubernetes Cluster</span>
                <span class="service-description">Container orchestration</span>
              </div>
              <div class="service-action">Coming Soon</div>
            </div>
            
            <div class="service-item">
              <div class="service-status active"></div>
              <div class="service-info">
                <span class="service-name">Media Server</span>
                <span class="service-description">Media streaming solution</span>
              </div>
              <div class="service-action">Coming Soon</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <Footer slot="footer" />
</BaseLayout>

<style>
  .page-header {
    margin: 3rem 0 4rem;
    position: relative;
  }
  
  h1 {
    font-size: var(--font-size-4xl);
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    margin-bottom: 0.5rem;
  }
  
  .header-accent {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 2px;
  }
  
  .coming-soon-container {
    display: flex;
    justify-content: center;
    padding: 2rem 0 4rem;
  }
  
  .coming-soon-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 2.5rem;
    max-width: 800px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
  }
  
  .coming-soon-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 0%, rgba(6, 182, 212, 0.1), transparent 70%);
    pointer-events: none;
  }
  
  .icon-container {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--accent-primary);
  }
  
  h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: var(--font-size-3xl);
    color: var(--text-primary);
  }
  
  .description {
    text-align: center;
    margin-bottom: 2.5rem;
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    line-height: 1.7;
  }
  
  .service-preview {
    margin-top: 2rem;
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    overflow: hidden;
  }
  
  .service-preview-header {
    background: rgba(30, 41, 59, 0.7);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  h3 {
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    margin: 0;
  }
  
  .preview-pulse {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #10b981;
    position: relative;
  }
  
  .preview-pulse::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #10b981;
    animation: pulse 2s infinite;
  }
  
  @keyframes pulse {
    0% {
      transform: scale(1);
      opacity: 0.7;
    }
    70% {
      transform: scale(2);
      opacity: 0;
    }
    100% {
      transform: scale(1);
      opacity: 0;
    }
  }
  
  .service-list {
    background: rgba(15, 23, 42, 0.5);
  }
  
  .service-item {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-secondary);
  }
  
  .service-item:last-child {
    border-bottom: none;
  }
  
  .service-status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 1rem;
  }
  
  .service-status.active {
    background: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
  }
  
  .service-status.warning {
    background: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
  }
  
  .service-status.offline {
    background: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
  }
  
  .service-info {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .service-name {
    color: var(--text-primary);
    font-weight: 500;
    font-size: var(--font-size-md);
    margin-bottom: 0.25rem;
  }
  
  .service-description {
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
  }
  
  .service-action {
    color: var(--accent-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
  }
  
  @media (max-width: 768px) {
    .coming-soon-card {
      padding: 2rem 1.5rem;
    }
    
    h1 {
      font-size: var(--font-size-3xl);
    }
    
    h2 {
      font-size: var(--font-size-2xl);
    }
    
    .service-item {
      padding: 1rem;
    }
  }
</style>