{{-- Wasoria Connect — 4 alternating feature blocks --}}
@php
$icons = ['cloud', 'server', 'zap', 'shield'];
$features = __('products.wasoria_connect.features');
@endphp

<section class="w-full bg-muted/30 py-20">
    <div class="mx-auto max-w-7xl p-4">
        <div class="space-y-20">
            @foreach($features as $index => $feature)
            @php
            $isEven = $index % 2 === 0;
            @endphp
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                {{-- Text column --}}
                <div class="{{ $isEven ? 'lg:order-1' : 'lg:order-2' }}">
                    <div class="inline-flex items-center justify-center p-3 bg-background rounded-lg mb-4">
                        <x-atoms.icon :name="$icons[$index] ?? 'zap'" class="w-8 h-8 text-primary" />
                    </div>
                    <h3 class="text-3xl font-bold mb-4">{{ $feature['title'] }}</h3>
                    <p class="text-lg text-muted-foreground mb-6">
                        {{ $feature['description'] }}
                    </p>
                    @if(!empty($feature['benefits']))
                    <ul class="space-y-3">
                        @foreach($feature['benefits'] as $benefit)
                        <li class="flex items-start gap-3">
                            <x-atoms.icon name="check-circle-2" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" />
                            <span class="text-muted-foreground">{{ $benefit }}</span>
                        </li>
                        @endforeach
                    </ul>
                    @endif
                </div>

                {{-- Image column (placeholder — actual product images may be added later) --}}
                <div class="{{ $isEven ? 'lg:order-2' : 'lg:order-1' }}">
                    <div class="w-full aspect-video bg-glassmorphism rounded-lg flex items-center justify-center">
                        <x-atoms.icon :name="$icons[$index] ?? 'zap'" class="w-16 h-16 text-muted-foreground/30" />
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>