---
import BaseLayout from '../layouts/BaseLayout.astro';
import Header from '../components/Header.astro';
import '../styles/card-animations.css';
import Footer from '../components/Footer.astro';
---
<BaseLayout title="Resources - ArgoBox">
    <Header slot="header" />

    <!-- Main Content from public/resources.html -->
    <main>
        <div class="container">
            <div class="page-header">
                <h1 class="page-title">Resources</h1>
                <p class="page-description">
                    A comprehensive collection of technical resources, configuration templates, and guides for infrastructure, containerization, and DevOps automation.
                </p>
            </div>

            <!-- Search & Filters -->
            <div class="resource-search">
                <div class="search-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="11" cy="11" r="8"></circle>
                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                    </svg>
                </div>
                <input type="text" placeholder="Search resources..." class="search-input" id="resource-search-input">
            </div>

            <div class="resource-filters">
                <button class="filter-button active" data-filter="all">All Resources</button>
                <button class="filter-button" data-filter="kubernetes">Kubernetes</button>
                <button class="filter-button" data-filter="docker">Docker</button>
                <button class="filter-button" data-filter="config">Configurations</button>
                <button class="filter-button" data-filter="iac">Infrastructure</button>
                <button class="filter-button" data-filter="tutorials">Tutorials</button>
            </div>

            <!-- Resources Grid -->
            <div class="resources-grid">
                <!-- K8s Configurations -->
                <div class="resource-card" data-category="kubernetes">
                    <div class="resource-icon-wrapper">
                        <svg class="resource-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M17.8 19.2L16 11l3.5-3.5a2.1 2.1 0 0 0 0-3 2.1 2.1 0 0 0-3 0L13 8l-8.2-1.8a.8.8 0 0 0-.9 1.2l5 8-5 8a.8.8 0 0 0 .9 1.2L13 22.7l2.8-2.9m-2.9-2.9l-4-6.5m7.9 8.7a2 2 0 1 0 2.3-3.2m-6.2-9l4-3.8"></path>
                        </svg>
                        <div class="resource-icon-particles">
                            <div class="resource-icon-particle"></div> <div class="resource-icon-particle"></div> <div class="resource-icon-particle"></div> <div class="resource-icon-particle"></div> <div class="resource-icon-particle"></div>
                        </div>
                    </div>
                    <div class="resource-content">
                        <h2 class="resource-title">K8s Configurations</h2>
                        <p class="resource-description">Curated collection of production-ready Kubernetes configuration templates for deployments, services, ingress, storage, and more, optimized for home lab environments.</p>
                        <a href="/resources/kubernetes" class="resource-link">Explore K8s Configurations <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
                        <div class="resource-tags"><span class="resource-tag">Kubernetes</span><span class="resource-tag">YAML</span><span class="resource-tag">Configurations</span></div>
                    </div>
                    <div class="shine-effect"></div>
                </div>

                <!-- Docker Compose -->
                <div class="resource-card" data-category="docker">
                     <div class="resource-icon-wrapper">
                         <svg class="resource-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12.5a2.5 2.5 0 0 1-2.5 2.5h-15a2.5 2.5 0 0 1 0-5h15a2.5 2.5 0 0 1 2.5 2.5Z"></path><path d="M5 10V7a1 1 0 0 1 1-1h4.586a1 1 0 0 1 .707.293l1.414 1.414a1 1 0 0 0 .707.293H15a1 1 0 0 1 1 1v1"></path><path d="M5 15v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2"></path></svg>
                         <div class="resource-icon-particles"><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div></div>
                     </div>
                     <div class="resource-content">
                         <h2 class="resource-title">Docker Compose</h2>
                         <p class="resource-description">Ready-to-use Docker Compose templates for running various services and applications. Includes networking, volume management, and resource optimization for home labs.</p>
                         <a href="/resources/docker-compose" class="resource-link">Explore Docker Compose <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
                         <div class="resource-tags"><span class="resource-tag">Docker</span><span class="resource-tag">Compose</span><span class="resource-tag">Containers</span></div>
                     </div>
                     <div class="shine-effect"></div>
                </div>

                <!-- Configuration Files -->
                 <div class="resource-card" data-category="config">
                     <div class="resource-icon-wrapper">
                         <svg class="resource-icon" xmlns="http://www.w3.org/2000/svg" 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><path d="M9 15v-1h6v1"></path><path d="M11 11v6"></path><path d="M9 11h6"></path></svg>
                         <div class="resource-icon-particles"><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div></div>
                     </div>
                     <div class="resource-content">
                         <h2 class="resource-title">Configuration Files</h2>
                         <p class="resource-description">Essential configuration files for popular services and tools like Nginx, HAProxy, Prometheus, Grafana, and more, optimized for home lab and personal infrastructure.</p>
                         <a href="/resources/config-files" class="resource-link">Explore Configuration Files <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
                         <div class="resource-tags"><span class="resource-tag">Config</span><span class="resource-tag">Services</span><span class="resource-tag">Tools</span></div>
                     </div>
                     <div class="shine-effect"></div>
                 </div>

                <!-- Infrastructure Code -->
                 <div class="resource-card" data-category="iac">
                     <div class="resource-icon-wrapper">
                         <svg class="resource-icon" xmlns="http://www.w3.org/2000/svg" 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="19" y1="12" x2="5" y2="12"></line></svg>
                         <div class="resource-icon-particles"><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div></div>
                     </div>
                     <div class="resource-content">
                         <h2 class="resource-title">Infrastructure Code</h2>
                         <p class="resource-description">Infrastructure as Code (IaC) templates using Terraform, Ansible, and other tools. Deploy virtualization, networking, storage, and services with automated, repeatable configurations.</p>
                         <a href="/resources/iac" class="resource-link">Explore Infrastructure Code <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
                         <div class="resource-tags"><span class="resource-tag">Terraform</span><span class="resource-tag">Ansible</span><span class="resource-tag">IaC</span></div>
                     </div>
                     <div class="shine-effect"></div>
                 </div>

                <!-- Tutorials -->
                 <div class="resource-card" data-category="tutorials">
                     <div class="resource-icon-wrapper">
                         <svg class="resource-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
                         <div class="resource-icon-particles"><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div><div class="resource-icon-particle"></div></div>
                         <div class="dots-animation"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>
                     </div>
                     <div class="resource-content">
                         <h2 class="resource-title">Tutorials</h2>
                         <p class="resource-description">Step-by-step guides and tutorials for setting up, configuring, and optimizing various infrastructure components. From beginner to advanced topics for home lab enthusiasts.</p>
                         <a href="/resources/tutorials" class="resource-link">Explore Tutorials <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
                         <div class="resource-tags"><span class="resource-tag">Guides</span><span class="resource-tag">Tutorials</span><span class="resource-tag">How-To</span></div>
                     </div>
                     <div class="shine-effect"></div>
                 </div>

                <!-- Empty State (hidden by default) -->
                <div class="no-results" style="display: none;">
                    <div class="no-results-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>
                    </div>
                    <h3>No matching resources found</h3>
                    <p>Try adjusting your search terms or filters to find what you're looking for.</p>
                </div>
            </div>
        </div>
    </main>

    <Footer slot="footer" />
</BaseLayout>

<script>
    // Script from public/resources.html (for filtering/search)
    document.addEventListener('DOMContentLoaded', () => {
        const filterButtons = document.querySelectorAll('.filter-button');
        const resourceCards = document.querySelectorAll('.resource-card');
        const noResults = document.querySelector('.no-results');
        const searchInput = document.getElementById('resource-search-input');

        function filterAndSearch() {
            const searchTerm = searchInput ? searchInput.value.toLowerCase().trim() : '';
            const activeFilter = document.querySelector('.filter-button.active')?.getAttribute('data-filter') || 'all';
            let visibleCount = 0;

            resourceCards.forEach(card => {
                const title = card.querySelector('.resource-title')?.textContent.toLowerCase() || '';
                const description = card.querySelector('.resource-description')?.textContent.toLowerCase() || '';
                const tags = Array.from(card.querySelectorAll('.resource-tag')).map(tag => tag.textContent.toLowerCase());
                const cardCategory = card.getAttribute('data-category');

                const matchesSearch = searchTerm === '' || title.includes(searchTerm) || description.includes(searchTerm) || tags.some(tag => tag.includes(searchTerm));
                const matchesFilter = activeFilter === 'all' || cardCategory === activeFilter;

                if (matchesSearch && matchesFilter) {
                    card.style.display = 'flex'; // Use flex as cards are flex containers
                    visibleCount++;
                } else {
                    card.style.display = 'none';
                }
            });

            if (noResults) {
                noResults.style.display = visibleCount === 0 ? 'block' : 'none';
            }
        }

        filterButtons.forEach(button => {
            button.addEventListener('click', () => {
                filterButtons.forEach(btn => btn.classList.remove('active'));
                button.classList.add('active');
                filterAndSearch(); // Re-run search when filter changes
            });
        });

        if (searchInput) {
            searchInput.addEventListener('input', filterAndSearch);
        }

        // Initial filter/search on load
        filterAndSearch();

        // Card hover effect enhancement (particle animation)
        resourceCards.forEach(card => {
            card.addEventListener('mouseenter', () => {
                const particles = card.querySelectorAll('.resource-icon-particle');
                particles.forEach(particle => {
                    const x = Math.random() * 100;
                    const y = Math.random() * 100;
                    particle.style.top = `${y}%`;
                    particle.style.left = `${x}%`;
                });
            });
        });
    });
</script>

<style>
    /* Styles specific to this page, if any, can go here */
    /* Most styling should come from global.css and theme.css */

    .page-header {
        text-align: center;
        margin-bottom: 3rem;
    }

    .page-title {
        font-size: 3rem;
        font-weight: 700;
        margin-bottom: 1rem;
        background: linear-gradient(to right, var(--accent-primary), var(--accent-secondary));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        position: relative;
        display: inline-block;
    }

    .page-title::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 3px;
        background: linear-gradient(to right, var(--accent-primary), var(--accent-secondary));
        border-radius: 3px;
    }

    .page-description {
        max-width: 800px;
        margin: 0 auto;
        color: var(--text-secondary);
        font-size: 1.1rem;
    }

    /* Resource Filtering */
    .resource-filters {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
        margin: 2rem 0;
    }

    .filter-button {
        padding: 0.5rem 1.25rem;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-primary);
        color: var(--text-secondary);
        border-radius: 20px;
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .filter-button:hover {
        background: linear-gradient(90deg, rgba(6, 182, 212, 0.1), rgba(59, 130, 246, 0.1));
        color: var(--text-primary);
        border-color: var(--accent-primary);
        box-shadow: 0 0 10px var(--glow-primary);
    }

    .filter-button.active {
        background: linear-gradient(90deg, rgba(6, 182, 212, 0.2), rgba(59, 130, 246, 0.2));
        color: var(--accent-primary);
        border-color: var(--accent-primary);
        box-shadow: 0 0 15px var(--glow-primary);
    }

    /* Search Box */
    .resource-search {
        display: flex;
        margin: 0 auto 2rem;
        max-width: 500px;
        position: relative;
    }

    .search-input {
        width: 100%;
        padding: 0.75rem 1rem 0.75rem 2.75rem;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-primary);
        border-radius: 8px;
        color: var(--text-primary);
        font-size: 1rem;
        transition: all 0.3s ease;
    }

    .search-input:focus {
        outline: none;
        border-color: var(--accent-primary);
        box-shadow: 0 0 0 3px var(--glow-primary);
    }

    .search-icon {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-tertiary);
    }

    /* Resources Grid */
    .resources-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 2rem;
        margin-top: 1rem;
    }

    /* Styles for .resource-card, .resource-icon-wrapper, etc. are now in card-animations.css */
  
    .resource-content {
      padding: 1.5rem;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
  
    .resource-title {
      font-size: 1.3rem;
      font-weight: 600;
      margin-bottom: 0.75rem;
      color: var(--text-primary);
    }
  
    .resource-description {
      color: var(--text-secondary);
      margin-bottom: 1.5rem;
      flex: 1;
    }
  
    .resource-link {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      color: var(--accent-primary);
      font-weight: 500;
      transition: all 0.3s ease;
      position: relative;
      align-self: flex-start;
    }
  
    .resource-link::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 1px;
      background: var(--accent-primary);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 0.3s ease;
    }
  
    .resource-link:hover {
      color: var(--accent-secondary);
    }
  
    .resource-link:hover::after {
      transform: scaleX(1);
      transform-origin: left;
    }
  
    .resource-link svg {
      margin-left: 0.5rem;
      transition: transform 0.3s ease;
    }
  
    .resource-link:hover svg {
      transform: translateX(3px);
    }
  
    .resource-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-top: 1rem;
    }
  
    /* .resource-tag styling is now in card-animations.css */
  
  
    /* Shine effect styling is now in card-animations.css */

    /* Empty State */
    .no-results {
        text-align: center;
        padding: 3rem;
        color: var(--text-secondary);
        background: var(--bg-tertiary);
        border-radius: 12px;
        border: 1px dashed var(--border-primary);
        margin-top: 2rem;
        display: none; /* Hidden by default */
    }

    .no-results-icon {
        color: var(--text-tertiary);
        margin-bottom: 1rem;
    }
    .no-results-icon svg {
         width: 64px;
         height: 64px;
         stroke-width: 1;
         opacity: 0.5;
    }

    /* Hovering dot animation */
    .dots-animation {
        position: absolute;
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: var(--accent-primary);
        animation: dot-bounce 1.4s infinite ease-in-out both;
    }

    .dot:nth-child(1) { animation-delay: -0.32s; }
    .dot:nth-child(2) { animation-delay: -0.16s; }

    /* Keyframes are now in card-animations.css */

</style>