---
// src/pages/resources/config-files.astro
import BaseLayout from '../../layouts/BaseLayout.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';

const title = "Configuration Files | ArgoBox";
const description = "A curated collection of configuration files and templates for various DevOps tools and infrastructure components.";
---

<BaseLayout title={title} description={description}>
  <Header slot="header" />
  
  <div class="container">
    <div class="page-header">
      <h1>Configuration Files</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">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
            <polyline points="14 2 14 8 20 8"></polyline>
            <line x1="16" y1="13" x2="8" y2="13"></line>
            <line x1="16" y1="17" x2="8" y2="17"></line>
            <polyline points="10 9 9 9 8 9"></polyline>
          </svg>
        </div>
        <h2>Configuration Files Coming Soon</h2>
        <p class="description">
          This section will feature a carefully curated collection of configuration files, templates, and examples for various DevOps tools, infrastructure components, and applications. All files will include detailed comments explaining configuration options, best practices, and security considerations.
        </p>
        
        <div class="config-categories">
          <div class="category-block">
            <h3 class="category-title">Web Servers</h3>
            <ul class="file-list">
              <li class="file-item">
                <span class="file-icon">📄</span>
                <span class="file-name">nginx.conf</span>
                <span class="file-tag">Performance</span>
              </li>
              <li class="file-item">
                <span class="file-icon">📄</span>
                <span class="file-name">apache2.conf</span>
                <span class="file-tag">Security</span>
              </li>
              <li class="file-item">
                <span class="file-icon">📄</span>
                <span class="file-name">caddy.json</span>
                <span class="file-tag">HTTPS</span>
              </li>
            </ul>
          </div>
          
          <div class="category-block">
            <h3 class="category-title">Databases</h3>
            <ul class="file-list">
              <li class="file-item">
                <span class="file-icon">📄</span>
                <span class="file-name">postgresql.conf</span>
                <span class="file-tag">Tuning</span>
              </li>
              <li class="file-item">
                <span class="file-icon">📄</span>
                <span class="file-name">my.cnf</span>
                <span class="file-tag">MySQL</span>
              </li>
              <li class="file-item">
                <span class="file-icon">📄</span>
                <span class="file-name">redis.conf</span>
                <span class="file-tag">Caching</span>
              </li>
            </ul>
          </div>
          
          <div class="category-block">
            <h3 class="category-title">CI/CD Tools</h3>
            <ul class="file-list">
              <li class="file-item">
                <span class="file-icon">📄</span>
                <span class="file-name">.gitlab-ci.yml</span>
                <span class="file-tag">Pipeline</span>
              </li>
              <li class="file-item">
                <span class="file-icon">📄</span>
                <span class="file-name">Jenkinsfile</span>
                <span class="file-tag">Multi-stage</span>
              </li>
              <li class="file-item">
                <span class="file-icon">📄</span>
                <span class="file-name">github-actions.yml</span>
                <span class="file-tag">Workflow</span>
              </li>
            </ul>
          </div>
          
          <div class="category-block">
            <h3 class="category-title">Monitoring</h3>
            <ul class="file-list">
              <li class="file-item">
                <span class="file-icon">📄</span>
                <span class="file-name">prometheus.yml</span>
                <span class="file-tag">Metrics</span>
              </li>
              <li class="file-item">
                <span class="file-icon">📄</span>
                <span class="file-name">grafana.ini</span>
                <span class="file-tag">Dashboard</span>
              </li>
              <li class="file-item">
                <span class="file-icon">📄</span>
                <span class="file-name">node_exporter.service</span>
                <span class="file-tag">Systemd</span>
              </li>
            </ul>
          </div>
        </div>
        
        <div class="file-preview">
          <div class="file-preview-header">
            <span class="preview-filename">nginx.conf</span>
            <span class="preview-badge">Coming Soon</span>
          </div>
          <pre class="preview-content"><code is:raw># NGINX Configuration with optimizations for performance and security
# This template includes best practices for production environments

user nginx;
worker_processes auto;
worker_rlimit_nofile 65535;
pid /run/nginx.pid;

events {
    worker_connections 4096;
    multi_accept on;
    use epoll;
}

http {
    # Basic Settings
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;
    server_tokens off;
    
    # MIME Types
    include /etc/nginx/mime.types;
    default_type application/octet-stream;
    
    # SSL Settings
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;
    
    # Logging
    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;
    
    # Gzip Settings
    gzip on;
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_types text/plain text/css application/json application/javascript text/xml;
    
    # Virtual Host Configs
    include /etc/nginx/conf.d/*.conf;
    
    # Additional settings and security headers will be included here...
}</code></pre>
        </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-secondary), var(--accent-tertiary));
    -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-secondary), var(--accent-tertiary));
    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% 50%, rgba(139, 92, 246, 0.1), transparent 70%);
    pointer-events: none;
  }
  
  .icon-container {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--accent-tertiary);
  }
  
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;
  }
  
  .config-categories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
  }
  
  .category-block {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--border-secondary);
    border-radius: 10px;
    padding: 1.5rem;
    transition: all 0.3s ease;
  }
  
  .category-block:hover {
    transform: translateY(-3px);
    border-color: var(--accent-tertiary);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.1);
  }
  
  .category-title {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 0.5rem;
  }
  
  .category-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background: var(--accent-tertiary);
  }
  
  .file-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  
  .file-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-secondary);
  }
  
  .file-item:last-child {
    border-bottom: none;
  }
  
  .file-icon {
    margin-right: 0.75rem;
    font-size: 1.25rem;
  }
  
  .file-name {
    flex: 1;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
  }
  
  .file-tag {
    font-size: var(--font-size-xs);
    color: var(--accent-tertiary);
    background: rgba(139, 92, 246, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid rgba(139, 92, 246, 0.2);
  }
  
  .file-preview {
    margin-top: 2rem;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    overflow: hidden;
  }
  
  .file-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background: rgba(15, 23, 42, 0.7);
    border-bottom: 1px solid var(--border-secondary);
  }
  
  .preview-filename {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
  }
  
  .preview-badge {
    font-size: var(--font-size-xs);
    color: var(--accent-tertiary);
    background: rgba(139, 92, 246, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid rgba(139, 92, 246, 0.2);
  }
  
  .preview-content {
    margin: 0;
    padding: 1.25rem;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    overflow-x: auto;
    background: var(--bg-code);
    color: var(--text-secondary);
  }
  
  @media (max-width: 768px) {
    .config-categories {
      grid-template-columns: 1fr;
    }
    
    .coming-soon-card {
      padding: 2rem 1.5rem;
    }
    
    h1 {
      font-size: var(--font-size-3xl);
    }
    
    h2 {
      font-size: var(--font-size-2xl);
    }
  }
</style>