{# 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">{{ 'projects.title'|trans }} <em>{{ 'projects.title_em'|trans }}</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;">
                {{ 'projects.intro'|trans }}
            </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;">{{ 'projects.featured_badge'|trans }}</span>
                    <h3 style="font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--mist); margin-bottom: var(--space-xs);">
                        {{ 'projects.departamentos.title'|trans }}
                    </h3>
                    <p style="font-family: var(--mono); font-size: 0.875rem; color: var(--leaf); margin-bottom: var(--space-sm);">
                        {{ 'projects.departamentos.category'|trans }}
                    </p>
                    <p style="color: var(--text-mid); font-size: 0.95rem; line-height: 1.6; margin-bottom: var(--space-md);">
                        {{ 'projects.departamentos.desc'|trans|raw }}
                    </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;">{{ 'projects.departamentos.stat'|trans }}</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;">
                        {{ 'projects.github_link'|trans }}
                    </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);">
                        {{ 'projects.siigo.title'|trans }}
                    </h3>
                    <p style="font-family: var(--mono); font-size: 0.875rem; color: var(--leaf); margin-bottom: var(--space-sm);">
                        {{ 'projects.siigo.category'|trans }}
                    </p>
                    <p style="color: var(--text-mid); font-size: 0.95rem; line-height: 1.6; margin-bottom: var(--space-md);">
                        {{ 'projects.siigo.desc'|trans }}
                    </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;">
                        {{ 'projects.github_link'|trans }}
                    </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);">
                        {{ 'projects.payu.title'|trans }}
                    </h3>
                    <p style="font-family: var(--mono); font-size: 0.875rem; color: var(--leaf); margin-bottom: var(--space-sm);">
                        {{ 'projects.payu.category'|trans }}
                    </p>
                    <p style="color: var(--text-mid); font-size: 0.95rem; line-height: 1.6; margin-bottom: var(--space-md);">
                        {{ 'projects.payu.desc'|trans }}
                    </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;">
                        {{ 'projects.github_link'|trans }}
                    </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);">
                        {{ 'projects.n8n.title'|trans }}
                    </h3>
                    <p style="font-family: var(--mono); font-size: 0.875rem; color: var(--ai2); margin-bottom: var(--space-sm);">
                        {{ 'projects.n8n.category'|trans }}
                    </p>
                    <p style="color: var(--text-mid); font-size: 0.95rem; line-height: 1.6; margin-bottom: var(--space-md);">
                        {{ 'projects.n8n.desc'|trans }}
                    </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;">
                        {{ 'projects.github_link'|trans }}
                    </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);">
                        {{ 'projects.servientrega.title'|trans }}
                    </h3>
                    <p style="font-family: var(--mono); font-size: 0.875rem; color: var(--leaf); margin-bottom: var(--space-sm);">
                        {{ 'projects.servientrega.category'|trans }}
                    </p>
                    <p style="color: var(--text-mid); font-size: 0.95rem; line-height: 1.6; margin-bottom: var(--space-md);">
                        {{ 'projects.servientrega.desc'|trans }}
                    </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;">
                        {{ 'projects.github_link'|trans }}
                    </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);">
                        {{ 'projects.files.title'|trans }}
                    </h3>
                    <p style="font-family: var(--mono); font-size: 0.875rem; color: var(--leaf); margin-bottom: var(--space-sm);">
                        {{ 'projects.files.category'|trans }}
                    </p>
                    <p style="color: var(--text-mid); font-size: 0.95rem; line-height: 1.6; margin-bottom: var(--space-md);">
                        {{ 'projects.files.desc'|trans }}
                    </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;">
                        {{ 'projects.github_link'|trans }}
                    </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);">
                    {{ 'projects.cta_text'|trans }}
                </p>
                <a href="https://github.com/saulmoralespa" target="_blank" class="btn btn--primary">
                    {{ 'projects.cta_button'|trans }}
                </a>
            </div>
        </div>
    </div>
</section>