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

const title = "Infrastructure as Code | LaForceIT";
const description = "A collection of Terraform, Ansible, and other IaC templates and modules for efficient infrastructure management.";

// Define the Terraform example as a string to avoid parsing issues
const terraformExample = `module "vpc" {
  source  = "terraform-aws-modules/vpc/aws"
  version = "~> 4.0"

  name = "homelab-vpc"
  cidr = "10.0.0.0/16"

  azs             = ["us-west-2a", "us-west-2b", "us-west-2c"]
  private_subnets = ["10.0.1.0/24", "10.0.2.0/24", "10.0.3.0/24"]
  public_subnets  = ["10.0.101.0/24", "10.0.102.0/24", "10.0.103.0/24"]

  enable_nat_gateway = true
  single_nat_gateway = true
  enable_vpn_gateway = false

  # Enable DNS support and hostnames
  enable_dns_hostnames = true
  enable_dns_support   = true

  # Add tags to all resources
  tags = {
    Environment = "prod"
    Terraform   = "true"
    Project     = "homelab"
    Owner       = "infrastructure-team"
    ManagedBy   = "terraform"
  }

  # Add specific tags to subnets for load balancer configuration
  public_subnet_tags = {
    "kubernetes.io/role/elb" = "1"
    "Tier" = "public"
  }

  private_subnet_tags = {
    "kubernetes.io/role/internal-elb" = "1"
    "Tier" = "private"
  }
}`;
---

<BaseLayout title={title} description={description}>
  <Header slot="header" />
  
  <div class="container">
    <div class="page-header">
      <h1>Infrastructure as Code</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">
            <polyline points="16 18 22 12 16 6"></polyline>
            <polyline points="8 6 2 12 8 18"></polyline>
            <line x1="12" y1="2" x2="12" y2="22"></line>
          </svg>
        </div>
        <h2>Infrastructure as Code Resources Coming Soon</h2>
        <p class="description">
          This section will feature a comprehensive collection of Infrastructure as Code (IaC) templates, modules, and examples using tools like Terraform, Ansible, Pulumi, and CloudFormation. These resources will help you automate infrastructure provisioning and configuration across various cloud providers and on-premises environments.
        </p>
        
        <div class="tools-grid">
          <div class="tool-card terraform">
            <div class="tool-header">
              <div class="tool-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polygon points="12 2 22 8 22 16 12 22 2 16 2 8 12 2"></polygon>
                </svg>
              </div>
              <h3 class="tool-name">Terraform</h3>
            </div>
            <p class="tool-description">
              Infrastructure provisioning modules and templates for AWS, Azure, GCP, and multi-cloud environments.
            </p>
            <div class="tool-tags">
              <span class="tool-tag">AWS</span>
              <span class="tool-tag">Azure</span>
              <span class="tool-tag">GCP</span>
              <span class="tool-tag">Modules</span>
            </div>
          </div>
          
          <div class="tool-card ansible">
            <div class="tool-header">
              <div class="tool-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z"></path>
                  <polyline points="8 9 12 5 16 9"></polyline>
                  <line x1="12" y1="5" x2="12" y2="19"></line>
                </svg>
              </div>
              <h3 class="tool-name">Ansible</h3>
            </div>
            <p class="tool-description">
              Playbooks and roles for configuration management, application deployment, and system administration.
            </p>
            <div class="tool-tags">
              <span class="tool-tag">Playbooks</span>
              <span class="tool-tag">Roles</span>
              <span class="tool-tag">Config</span>
              <span class="tool-tag">Deploy</span>
            </div>
          </div>
          
          <div class="tool-card kubernetes">
            <div class="tool-header">
              <div class="tool-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="12" cy="12" r="10"></circle>
                  <line x1="14.31" y1="8" x2="20.05" y2="17.94"></line>
                  <line x1="9.69" y1="8" x2="21.17" y2="8"></line>
                  <line x1="7.38" y1="12" x2="13.12" y2="2.06"></line>
                  <line x1="9.69" y1="16" x2="3.95" y2="6.06"></line>
                  <line x1="14.31" y1="16" x2="2.83" y2="16"></line>
                  <line x1="16.62" y1="12" x2="10.88" y2="21.94"></line>
                </svg>
              </div>
              <h3 class="tool-name">Kubernetes</h3>
            </div>
            <p class="tool-description">
              Helm charts, operators, and custom resources for managing applications and services in Kubernetes.
            </p>
            <div class="tool-tags">
              <span class="tool-tag">Helm</span>
              <span class="tool-tag">CRDs</span>
              <span class="tool-tag">Operators</span>
              <span class="tool-tag">Templates</span>
            </div>
          </div>
          
          <div class="tool-card multi">
            <div class="tool-header">
              <div class="tool-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
                  <polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline>
                  <polyline points="7.5 19.79 7.5 14.6 3 12"></polyline>
                  <polyline points="21 12 16.5 14.6 16.5 19.79"></polyline>
                  <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
                  <line x1="12" y1="22.08" x2="12" y2="12"></line>
                </svg>
              </div>
              <h3 class="tool-name">Multi-Tool Solutions</h3>
            </div>
            <p class="tool-description">
              End-to-end infrastructure solutions combining multiple IaC tools for comprehensive deployments.
            </p>
            <div class="tool-tags">
              <span class="tool-tag">CI/CD</span>
              <span class="tool-tag">Pipelines</span>
              <span class="tool-tag">GitOps</span>
              <span class="tool-tag">Templates</span>
            </div>
          </div>
        </div>
        
        <div class="code-preview-container">
          <div class="preview-header">
            <div class="file-path">terraform/aws/vpc/main.tf</div>
            <div class="preview-badge">Coming Soon</div>
          </div>
          <pre class="code-preview"><code set:html={terraformExample}></code></pre>
        </div>
      </div>
    </div>
  </div>
  
  <Footer slot="footer" />
</BaseLayout>

<style>
  .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
  }
  
  .page-header {
    margin: 3rem 0 4rem;
    position: relative;
  }
  
  h1 {
    font-size: var(--font-size-4xl);
    background: linear-gradient(90deg, #2563eb, #06b6d4);
    -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, #2563eb, #06b6d4);
    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(6, 182, 212, 0.1), transparent 70%);
    pointer-events: none;
  }
  
  .icon-container {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: #06b6d4;
  }
  
  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;
  }
  
  .tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
  }
  
  .tool-card {
    border-radius: 10px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  
  .tool-card.terraform {
    background: linear-gradient(135deg, rgba(106, 90, 205, 0.1), rgba(0, 0, 0, 0));
    border: 1px solid rgba(106, 90, 205, 0.2);
  }
  
  .tool-card.ansible {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.1), rgba(0, 0, 0, 0));
    border: 1px solid rgba(255, 0, 0, 0.2);
  }
  
  .tool-card.kubernetes {
    background: linear-gradient(135deg, rgba(0, 156, 222, 0.1), rgba(0, 0, 0, 0));
    border: 1px solid rgba(0, 156, 222, 0.2);
  }
  
  .tool-card.multi {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(0, 0, 0, 0));
    border: 1px solid rgba(6, 182, 212, 0.2);
  }
  
  .tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  }
  
  .tool-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  }
  
  .tool-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    margin-right: 1rem;
  }
  
  .terraform .tool-icon {
    color: #6a5acd;
  }
  
  .ansible .tool-icon {
    color: #ff0000;
  }
  
  .kubernetes .tool-icon {
    color: #009cde;
  }
  
  .multi .tool-icon {
    color: #06b6d4;
  }
  
  .tool-name {
    font-size: var(--font-size-lg);
    margin: 0;
    color: var(--text-primary);
  }
  
  .tool-description {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: 1.25rem;
    line-height: 1.6;
  }
  
  .tool-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .tool-tag {
    font-size: var(--font-size-xs);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.5);
    color: var(--text-tertiary);
    border: 1px solid var(--border-secondary);
  }
  
  .code-preview-container {
    background: var(--bg-code);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 2rem;
  }
  
  .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);
  }
  
  .file-path {
    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-primary);
    background: rgba(6, 182, 212, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid rgba(6, 182, 212, 0.3);
  }
  
  .code-preview {
    margin: 0;
    padding: 1.25rem;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    overflow-x: auto;
    color: var(--text-secondary);
  }
  
  @media (max-width: 768px) {
    .tools-grid {
      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>