{% extends "base.html" %}

{% block content %}
<!-- Hero Section -->
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h1 class="display-4 fw-bold">DevSecOps Pipeline Security Assessor</h1>
                <p class="lead">Automatically assess and improve the security maturity of your CI/CD pipelines with comprehensive analysis and actionable recommendations.</p>
                <div class="mt-4">
                    <a href="{{ url_for('new_assessment') }}" class="btn btn-light btn-lg me-3">
                        <i class="fas fa-rocket me-2"></i>Start Assessment
                    </a>
                    <a href="{{ url_for('dashboard') }}" class="btn btn-outline-light btn-lg">
                        <i class="fas fa-chart-line me-2"></i>View Dashboard
                    </a>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="text-center">
                    <i class="fas fa-shield-alt" style="font-size: 12rem; opacity: 0.3;"></i>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<div class="container">
    <div class="row mb-5">
        <div class="col-12 text-center">
            <h2 class="display-5 fw-bold mb-3">Why DevSecOps Maturity Matters</h2>
            <p class="lead text-muted">Modern applications require security to be integrated throughout the development lifecycle, not bolted on as an afterthought.</p>
        </div>
    </div>

    <div class="row g-4 mb-5">
        <div class="col-md-4">
            <div class="card h-100 fade-in">
                <div class="card-body text-center p-4">
                    <div class="mb-3">
                        <i class="fas fa-bug text-danger" style="font-size: 3rem;"></i>
                    </div>
                    <h5 class="card-title">Early Vulnerability Detection</h5>
                    <p class="card-text">Catch security issues in development, not production. Save up to 100x the cost of fixing vulnerabilities.</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100 fade-in" style="animation-delay: 0.1s;">
                <div class="card-body text-center p-4">
                    <div class="mb-3">
                        <i class="fas fa-tachometer-alt text-success" style="font-size: 3rem;"></i>
                    </div>
                    <h5 class="card-title">Faster Delivery</h5>
                    <p class="card-text">Automated security checks mean no delays waiting for manual security reviews and approvals.</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100 fade-in" style="animation-delay: 0.2s;">
                <div class="card-body text-center p-4">
                    <div class="mb-3">
                        <i class="fas fa-balance-scale text-info" style="font-size: 3rem;"></i>
                    </div>
                    <h5 class="card-title">Compliance Ready</h5>
                    <p class="card-text">Built-in compliance checks for SOC2, PCI-DSS, GDPR, and other industry standards.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Assessment Categories -->
    <div class="row mb-5">
        <div class="col-12 text-center">
            <h2 class="display-6 fw-bold mb-4">What We Assess</h2>
        </div>
    </div>

    <div class="row g-4 mb-5">
        <div class="col-lg-6">
            <div class="card fade-in">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-code me-2"></i>Source Code Security</h5>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li><i class="fas fa-check text-success me-2"></i>Dependency Scanning (npm audit, Snyk)</li>
                        <li><i class="fas fa-check text-success me-2"></i>Secret Detection (GitLeaks, TruffleHog)</li>
                        <li><i class="fas fa-check text-success me-2"></i>Static Analysis (SonarQube, CodeQL)</li>
                        <li><i class="fas fa-check text-success me-2"></i>Code Quality Gates</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card fade-in" style="animation-delay: 0.1s;">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-hammer me-2"></i>Build Security</h5>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li><i class="fas fa-check text-success me-2"></i>Secure Build Environments</li>
                        <li><i class="fas fa-check text-success me-2"></i>Artifact Signing (Cosign, Sigstore)</li>
                        <li><i class="fas fa-check text-success me-2"></i>Supply Chain Security</li>
                        <li><i class="fas fa-check text-success me-2"></i>Software Bill of Materials (SBOM)</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card fade-in" style="animation-delay: 0.2s;">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-cloud-upload-alt me-2"></i>Deployment Security</h5>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li><i class="fas fa-check text-success me-2"></i>Infrastructure as Code</li>
                        <li><i class="fas fa-check text-success me-2"></i>Container Scanning (Trivy, Clair)</li>
                        <li><i class="fas fa-check text-success me-2"></i>Deployment Approval Gates</li>
                        <li><i class="fas fa-check text-success me-2"></i>Environment Isolation</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card fade-in" style="animation-delay: 0.3s;">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-shield-alt me-2"></i>Runtime Security</h5>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li><i class="fas fa-check text-success me-2"></i>Monitoring & Logging</li>
                        <li><i class="fas fa-check text-success me-2"></i>Dynamic Security Testing (DAST)</li>
                        <li><i class="fas fa-check text-success me-2"></i>Vulnerability Management</li>
                        <li><i class="fas fa-check text-success me-2"></i>Incident Response</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Supported Platforms -->
    <div class="row mb-5">
        <div class="col-12 text-center">
            <h2 class="display-6 fw-bold mb-4">Supported Platforms</h2>
        </div>
    </div>

    <div class="row g-4 mb-5 justify-content-center">
        <div class="col-md-3 col-sm-6">
            <div class="card text-center fade-in">
                <div class="card-body">
                    <i class="fab fa-github" style="font-size: 3rem; color: #333;"></i>
                    <h5 class="mt-3">GitHub Actions</h5>
                    <p class="text-muted">Complete workflow analysis</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="card text-center fade-in" style="animation-delay: 0.1s;">
                <div class="card-body">
                    <i class="fab fa-gitlab" style="font-size: 3rem; color: #fc6d26;"></i>
                    <h5 class="mt-3">GitLab CI</h5>
                    <p class="text-muted">Pipeline security assessment</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="card text-center fade-in" style="animation-delay: 0.2s;">
                <div class="card-body">
                    <i class="fab fa-microsoft" style="font-size: 3rem; color: #0078d4;"></i>
                    <h5 class="mt-3">Azure DevOps</h5>
                    <p class="text-muted">Coming Soon</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="card text-center fade-in" style="animation-delay: 0.3s;">
                <div class="card-body">
                    <i class="fas fa-cog" style="font-size: 3rem; color: #6c757d;"></i>
                    <h5 class="mt-3">Jenkins</h5>
                    <p class="text-muted">Coming Soon</p>
                </div>
            </div>
        </div>
    </div>

    <!-- CTA Section -->
    <div class="row">
        <div class="col-12">
            <div class="card bg-light">
                <div class="card-body text-center py-5">
                    <h3 class="card-title">Ready to Improve Your Security Posture?</h3>
                    <p class="card-text lead">Get started with a free assessment of your CI/CD pipeline security.</p>
                    <a href="{{ url_for('new_assessment') }}" class="btn btn-primary btn-lg">
                        <i class="fas fa-play-circle me-2"></i>Start Your Assessment Now
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // Add smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });

    // Animate cards on scroll
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -100px 0px'
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);

    // Observe all cards
    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('.fade-in').forEach(card => {
            card.style.opacity = '0';
            card.style.transform = 'translateY(30px)';
            card.style.transition = 'all 0.6s ease';
            observer.observe(card);
        });
    });
</script>
{% endblock %}