{{-- Wasoria Connect — Integrations section (Wasoria + external) --}}
@php
$wasoriaIcons = ['check-circle-2', 'bar-chart-3', 'file-bar-chart'];
$wasoriaItems = __('products.wasoria_connect.integrations.wasoria_items');
$externalIcons = ['server', 'database', 'bar-chart-3', 'cloud', 'globe'];
$externalItems = __('products.wasoria_connect.integrations.external_items');
@endphp

<section class="w-full py-20">
    <div class="mx-auto max-w-7xl p-4">
        <x-atoms.title
            :title="__('products.wasoria_connect.integrations.title')"
            :subtitle="[__('products.wasoria_connect.integrations.subtitle')]"
            align="center"
            class="mb-8 max-w-[800px] mx-auto" />
        <p class="text-center text-lg text-muted-foreground max-w-[900px] mx-auto mb-16">
            {{ __('products.wasoria_connect.integrations.description') }}
        </p>

        {{-- Wasoria ecosystem integrations (3-column primary) --}}
        <div class="mb-16">
            <h3 class="text-2xl font-bold text-center mb-8">{{ __('products.wasoria_connect.integrations.wasoria_title') }}</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                @foreach($wasoriaItems as $index => $integration)
                <div class="bg-primary/5 p-6 rounded-lg border-2 border-primary/20 hover:border-primary/40 transition-colors">
                    <x-atoms.icon :name="$wasoriaIcons[$index] ?? 'zap'" class="w-8 h-8 text-primary mb-4" />
                    <h4 class="text-xl font-semibold mb-2">{{ $integration['title'] }}</h4>
                    <p class="text-muted-foreground">{{ $integration['description'] }}</p>
                </div>
                @endforeach
            </div>
        </div>

        {{-- External integrations (3-column secondary with hover effects) --}}
        <div>
            <h3 class="text-2xl font-bold text-center mb-8">{{ __('products.wasoria_connect.integrations.external_title') }}</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($externalItems as $index => $integration)
                <div class="bg-background p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow border">
                    <x-atoms.icon :name="$externalIcons[$index] ?? 'globe'" class="w-8 h-8 text-muted-foreground mb-4" />
                    <h4 class="text-lg font-semibold mb-2">{{ $integration['category'] }}</h4>
                    <p class="text-sm text-muted-foreground">{{ $integration['brands'] }}</p>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>