@props(['data' => []])

<section class="section-padding bg-section">
    <div class="container-page">
        <div class="mx-auto max-w-3xl text-center">
            <span class="home-eyebrow">Compare</span>
            <h2 class="section-heading mt-6">{{ $data['title'] ?? 'How we compare' }}</h2>
        </div>
        <div class="premium-card mt-8 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full min-w-[600px] border-collapse text-left text-sm">
                    <thead>
                        <tr class="border-b border-border bg-white">
                            @foreach($data['columns'] ?? [] as $i => $col)
                                <th class="p-5 font-bold {{ $i === 1 ? 'bg-primary/5 text-primary' : 'text-secondary' }}">{{ $col }}</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($data['rows'] ?? [] as $row)
                            <tr class="border-b border-border last:border-0">
                                @foreach($row as $i => $cell)
                                    <td class="p-5 {{ $i === 1 ? 'bg-primary/5 font-semibold text-secondary' : 'text-muted' }}">{{ $cell }}</td>
                                @endforeach
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>