{#
# How It Works Component
# Elegant step-by-step process with alternating navy/white cards
#
# Usage: 
#   {% include 'components/how-it-works.twig' %} - Basic usage
#   {% include 'components/how-it-works.twig' with { block: block } %} - From page builder
#}

{# Get dynamic content from block – no defaults #}
{% set topLabel = block is defined and block.plainText2|length ? block.plainText2 : null %}
{% set heading = block is defined and block.plainText|length ? block.plainText : null %}
{% set description = block is defined and block.textArea|length ? block.textArea : null %}

{# Get steps from matrix field #}
{% set steps = block is defined and block.steps ? block.steps.all() : [] %}

{% if steps|length %}
<section class="section-luxury relative overflow-hidden bg-gradient-to-b from-cream via-beige-light to-cream">
    <!-- Elegant pattern overlay -->
    <div class="absolute inset-0 opacity-[0.02]" style="background-image: url('data:image/svg+xml,%3Csvg width=&quot;60&quot; height=&quot;60&quot; viewBox=&quot;0 0 60 60&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;%3E%3Cg fill=&quot;none&quot; fill-rule=&quot;evenodd&quot;%3E%3Cg fill=&quot;%23c8a882&quot; fill-opacity=&quot;1&quot;%3E%3Cpath d=&quot;M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z&quot;/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
    
    <!-- Subtle decorative elements -->
    <div class="absolute top-0 right-0 w-64 h-64 border border-gold/10 rounded-full translate-x-1/2 -translate-y-1/2"></div>
    <div class="absolute bottom-0 left-0 w-64 h-64 border border-gold/10 rounded-full -translate-x-1/2 translate-y-1/2"></div>
    
    <div class="container-default relative z-10">
        {% if topLabel or heading or description %}
        <div class="section-heading">
            <div class="flex items-center justify-center gap-4 mb-6">
                <div class="w-12 h-px bg-gradient-to-r from-transparent to-gold"></div>
                <div class="w-1.5 h-1.5 rounded-full bg-gold"></div>
                <div class="w-12 h-px bg-gradient-to-l from-transparent to-gold"></div>
            </div>
            {% if topLabel %}<p class="mb-6 text-gold text-2xl tracking-widest font-medium font-body">{{ topLabel }}</p>{% endif %}
            {% if heading %}<h2 class="italic max-w-4xl mx-auto text-navy font-heading text-5xl leading-tight font-normal">{{ heading }}</h2>{% endif %}
            {% if description %}
            <p class="max-w-2xl mx-auto leading-relaxed mt-6 text-lg text-charcoal-light font-body">
                {{ description }}
            </p>
            {% endif %}
        </div>
        {% endif %}
        
        <!-- Steps with vertical flow line -->
        <div class="max-w-5xl mx-auto relative">
            <!-- Elegant vertical line connecting steps -->
            <div class="absolute left-12 top-24 bottom-24 hidden md:block w-0.5 bg-gradient-to-b from-transparent via-gold to-transparent opacity-25"></div>
            
            <div class="relative flex flex-col gap-6">
                {% for step in steps %}
                    {% set stepNumber = loop.index %}
                    {% set stepTitle = step.stepTitle|length ? step.stepTitle : null %}
                    {% set stepDescription = step.stepDescription|length ? step.stepDescription : null %}
                    {% if stepTitle or stepDescription %}
                    <div class="group relative rounded-2xl transition-all duration-500 overflow-hidden hover:-translate-y-1 bg-gradient-navy p-10 border border-gold/10 shadow-navy">
                        
                        <!-- Subtle gold shimmer on hover -->
                        <div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-700 overlay-gold"></div>
                        
                        <!-- Responsive flex container -->
                        <div class="flex flex-col md:flex-row md:items-center gap-6 md:gap-8 relative z-10">
                            <!-- Clean Elegant Circle -->
                            <div class="flex-shrink-0 relative flex justify-center md:justify-start md:self-center">
                                <!-- Main Circle -->
                                <div class="relative transform group-hover:scale-105 transition-all duration-400 w-20 h-20 min-w-[80px] rounded-full flex items-center justify-center" style="background-color: #D58D72;">
                                    <span class="font-body text-3xl font-extrabold text-white leading-none">
                                        {{ '%02d'|format(stepNumber) }}
                                    </span>
                                </div>
                            </div>
                            
                            <!-- Step Content -->
                            <div class="flex-1 relative text-center md:text-left md:self-center">
                                {% if stepTitle %}
                                <h3 class="font-heading text-3xl font-medium mb-3.5 leading-snug tracking-tight" style="color: #EBD5CB;">
                                    {{ stepTitle }}
                                </h3>
                                {% endif %}
                                {% if stepDescription %}
                                <p class="font-body text-base leading-7 text-white/85">
                                    {{ stepDescription }}
                                </p>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="absolute top-5 right-5 w-6 h-6 border-t-2 border-r-2 border-gold rounded-tr-md opacity-0 group-hover:opacity-40 transition-all duration-700"></div>
                        <div class="absolute bottom-0 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-gold to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
        
        <!-- Optional CTA Button - Luxury Style -->
        {% if block is defined %}
            {% set ctaButtons = block.ctaButtons ?? null %}
            {% if ctaButtons and ctaButtons.all is defined %}
                {% set ctaButtonsList = ctaButtons.all() %}
                {% if ctaButtonsList|length %}
                {% set button = ctaButtonsList|first %}
                {% set buttonText = button.linkText|length ? button.linkText : null %}
                {% set buttonUrl = button.urlAddress|length ? button.urlAddress : null %}
                {% if buttonText and buttonUrl %}
                    <div class="text-center relative mt-16">
                        <!-- Elegant separator -->
                        <div class="flex items-center justify-center gap-3 mb-10">
                            <div class="w-15 h-px bg-gradient-to-r from-transparent to-gold"></div>
                            <div class="w-2 h-2 rounded-full bg-gold shadow-gold"></div>
                            <div class="w-15 h-px bg-gradient-to-l from-transparent to-gold"></div>
                        </div>
                        
                        <a href="{{ buttonUrl }}" 
                           class="btn-gold-lg inline-flex items-center group">
                            <span>{{ buttonText }}</span>
                            <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" 
                                 class="w-5 h-5 ml-3 transition-transform duration-300 group-hover:translate-x-1">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                            </svg>
                        </a>
                    </div>
                {% endif %}
                {% endif %}
            {% endif %}
        {% endif %}
    </div>
</section>
{% endif %}