{{-- Tools Section — Phase-to-tool mapping timeline --}}
@php
$tools = __('approach.tools.items');
@endphp

<div class="w-full px-4">
    <div class="w-full bg-background rounded-b-lg py-20 px-4">
        <div class="max-w-7xl mx-auto">
            <x-atoms.title
                :title="__('approach.tools.title')"
                :subtitle="[__('approach.tools.subtitle')]"
                align="center"
                class="mb-16 max-w-[800px] mx-auto" />

            {{-- Timeline Design --}}
            <div class="relative max-w-[1100px] mx-auto">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6" data-display-wrapped>
                    @foreach($tools as $item)
                    <div class="relative h-full" data-display-wrapped>
                        <div class="p-6 rounded-xl border border-border bg-glassmorphism hover:border-primary/50 transition-colors h-full flex flex-col">
                            <div class="inline-block px-3 py-1 rounded-full text-blue-500 bg-blue-50 dark:bg-blue-950 text-sm font-semibold mb-3">
                                {{ $item['phase'] }}
                            </div>
                            <h3 class="text-xl font-bold mb-2">{{ $item['tool'] }}</h3>
                            <p class="text-sm text-muted-foreground">{{ $item['usage'] }}</p>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>