{# Projects Section - 6 Proyectos Destacados #}
<section id="projects" style="min-height: 100vh; padding: var(--space-xl) var(--space-md); background: var(--bark); overflow-x: hidden;">
    <div class="wrap reveal">
        <h2 class="section-title">Proyectos <em>Destacados</em></h2>
        <div style="max-width: 1200px; margin: 0 auto; width: 100%;">
            <p style="color: var(--text-mid); text-align: center; margin-bottom: var(--space-xl); font-size: 1.125rem;">
                Open source, e-commerce y automatización con impacto real
            </p>
            {# Grid de Proyectos #}
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr)); gap: var(--space-lg);">
                {# Proyecto 1: Departamentos Colombia - FEATURED #}
                <div style="background: var(--bark2); border-radius: 8px; padding: var(--space-lg); border: 2px solid var(--dawn); position: relative;" class="reveal">
                    <span style="position: absolute; top: var(--space-sm); right: var(--space-sm); background: var(--dawn); color: var(--soil); font-family: var(--mono); font-size: 0.75rem; padding: 0.25rem 0.75rem; border-radius: 4px; font-weight: 600;">DESTACADO</span>
                    <h3 style="font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--mist); margin-bottom: var(--space-xs);">
                        Departamentos y Ciudades de Colombia
                    </h3>
                    <p style="font-family: var(--mono); font-size: 0.875rem; color: var(--leaf); margin-bottom: var(--space-sm);">
                        Plugin WordPress · WooCommerce · WordPress.org Oficial
                    </p>
                    <p style="color: var(--text-mid); font-size: 0.95rem; line-height: 1.6; margin-bottom: var(--space-md);">
                        Plugin oficial en WordPress.org. Usado por más de <strong style="color: var(--dawn);">7.000 tiendas activas</strong> en Colombia.
                    </p>
                    <div style="display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); padding: var(--space-sm); background: rgba(200, 169, 110, 0.1); border-radius: 4px;">
                        <div>
                            <p style="font-family: var(--display); font-size: 2rem; font-weight: 900; color: var(--dawn); line-height: 1;">7k+</p>
                            <p style="font-family: var(--mono); font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.1em;">Tiendas Activas</p>
                        </div>
                    </div>
                    <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-md);">
                        <span class="tag">PHP</span>
                        <span class="tag">WooCommerce</span>
                        <span class="tag">WordPress.org</span>
                    </div>
                    <a href="https://github.com/saulmoralespa/departamentos-y-ciudades-de-colombia-para-woocommerce" target="_blank" style="display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.875rem; color: var(--dawn); text-decoration: none; transition: color 0.3s;">
                        Ver en GitHub →
                    </a>
                </div>
                {# Proyecto 2: Integration Siigo #}
                <div style="background: var(--bark2); border-radius: 8px; padding: var(--space-lg); border: 1px solid var(--border2);" class="reveal">
                    <h3 style="font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--mist); margin-bottom: var(--space-xs);">
                        Integration Siigo WooCommerce
                    </h3>
                    <p style="font-family: var(--mono); font-size: 0.875rem; color: var(--leaf); margin-bottom: var(--space-sm);">
                        Facturación electrónica · DIAN
                    </p>
                    <p style="color: var(--text-mid); font-size: 0.95rem; line-height: 1.6; margin-bottom: var(--space-md);">
                        Sincroniza productos y órdenes con Siigo. Genera facturas electrónicas para la DIAN automáticamente.
                    </p>
                    <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-md);">
                        <span class="tag">PHP</span>
                        <span class="tag">Siigo API</span>
                        <span class="tag">DIAN</span>
                    </div>
                    <a href="https://github.com/saulmoralespa/integration-siigo-woo" target="_blank" style="display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.875rem; color: var(--dawn); text-decoration: none; transition: color 0.3s;">
                        Ver en GitHub →
                    </a>
                </div>
                {# Proyecto 3: PayU Latam Magento #}
                <div style="background: var(--bark2); border-radius: 8px; padding: var(--space-lg); border: 1px solid var(--border2);" class="reveal">
                    <h3 style="font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--mist); margin-bottom: var(--space-xs);">
                        PayU Latam WebCheckout · Magento 2
                    </h3>
                    <p style="font-family: var(--mono); font-size: 0.875rem; color: var(--leaf); margin-bottom: var(--space-sm);">
                        Pasarela de pago · Magento 2
                    </p>
                    <p style="color: var(--text-mid); font-size: 0.95rem; line-height: 1.6; margin-bottom: var(--space-md);">
                        Integración directa con WebCheckout de PayU Latam. Gestión completa del ciclo de pagos.
                    </p>
                    <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-md);">
                        <span class="tag">PHP</span>
                        <span class="tag">Magento 2</span>
                        <span class="tag">PayU</span>
                    </div>
                    <a href="https://github.com/saulmoralespa/magento2-payulatam" target="_blank" style="display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.875rem; color: var(--dawn); text-decoration: none; transition: color 0.3s;">
                        Ver en GitHub →
                    </a>
                </div>
                {# Proyecto 4: n8n Node Wompi #}
                <div style="background: var(--bark2); border-radius: 8px; padding: var(--space-lg); border: 1px solid var(--border2);" class="reveal">
                    <h3 style="font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--mist); margin-bottom: var(--space-xs);">
                        n8n Node — Wompi Colombia
                    </h3>
                    <p style="font-family: var(--mono); font-size: 0.875rem; color: var(--ai2); margin-bottom: var(--space-sm);">
                        Automatización · n8n
                    </p>
                    <p style="color: var(--text-mid); font-size: 0.95rem; line-height: 1.6; margin-bottom: var(--space-md);">
                        Nodo personalizado para n8n que integra la pasarela Wompi en flujos de automatización.
                    </p>
                    <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-md);">
                        <span class="tag">Node.js</span>
                        <span class="tag ai">n8n</span>
                        <span class="tag">Wompi</span>
                    </div>
                    <a href="https://github.com/saulmoralespa/n8n-nodes-wompi" target="_blank" style="display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.875rem; color: var(--dawn); text-decoration: none; transition: color 0.3s;">
                        Ver en GitHub →
                    </a>
                </div>
                {# Proyecto 5: Servientrega Shipping #}
                <div style="background: var(--bark2); border-radius: 8px; padding: var(--space-lg); border: 1px solid var(--border2);" class="reveal">
                    <h3 style="font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--mist); margin-bottom: var(--space-xs);">
                        Servientrega Shipping WooCommerce
                    </h3>
                    <p style="font-family: var(--mono); font-size: 0.875rem; color: var(--leaf); margin-bottom: var(--space-sm);">
                        Logística · WooCommerce
                    </p>
                    <p style="color: var(--text-mid); font-size: 0.95rem; line-height: 1.6; margin-bottom: var(--space-md);">
                        Plugin de envíos con Servientrega para WooCommerce. Consulta de tarifas y generación de guías.
                    </p>
                    <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-md);">
                        <span class="tag">PHP</span>
                        <span class="tag">SOAP</span>
                        <span class="tag">WooCommerce</span>
                    </div>
                    <a href="https://github.com/saulmoralespa/shipping-servientrega-wc" target="_blank" style="display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.875rem; color: var(--dawn); text-decoration: none; transition: color 0.3s;">
                        Ver en GitHub →
                    </a>
                </div>
                {# Proyecto 6: Files Dashboard #}
                <div style="background: var(--bark2); border-radius: 8px; padding: var(--space-lg); border: 1px solid var(--border2);" class="reveal">
                    <h3 style="font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--mist); margin-bottom: var(--space-xs);">
                        Files Dashboard
                    </h3>
                    <p style="font-family: var(--mono); font-size: 0.875rem; color: var(--leaf); margin-bottom: var(--space-sm);">
                        Backend · Symfony · EasyAdmin
                    </p>
                    <p style="color: var(--text-mid); font-size: 0.95rem; line-height: 1.6; margin-bottom: var(--space-md);">
                        Panel administrativo de gestión de archivos con Symfony y EasyAdminBundle.
                    </p>
                    <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-md);">
                        <span class="tag">Symfony</span>
                        <span class="tag">PHP</span>
                        <span class="tag">EasyAdmin</span>
                    </div>
                    <a href="https://github.com/saulmoralespa/files-dashboard" target="_blank" style="display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.875rem; color: var(--dawn); text-decoration: none; transition: color 0.3s;">
                        Ver en GitHub →
                    </a>
                </div>
            </div>
            {# CTA GitHub #}
            <div style="text-align: center; margin-top: var(--space-xl);">
                <p style="color: var(--text-mid); margin-bottom: var(--space-sm);">
                    Más proyectos en mi perfil de GitHub
                </p>
                <a href="https://github.com/saulmoralespa" target="_blank" class="btn btn--primary">
                    Ver todos los proyectos
                </a>
            </div>
        </div>
    </div>
</section>