@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">AI & Automation</span>
            <h2 class="section-heading mt-6">{{ $data['title'] ?? 'Intelligent operations' }}</h2>
            <p class="mt-4 text-muted">Streamline workflows with AI-powered talent and automation specialists.</p>
        </div>
        <div class="mt-8 grid gap-5 md:grid-cols-3">
            @foreach($data['items'] ?? [
                ['title' => 'CRM Automation', 'description' => 'Connect your stack and eliminate manual data entry.'],
                ['title' => 'AI Specialists', 'description' => 'Deploy custom AI workflows tailored to your business.'],
                ['title' => 'Workflow Automation', 'description' => 'Build repeatable processes that scale with you.'],
            ] as $item)
                <div class="premium-card p-8 transition hover:-translate-y-1 hover:border-primary/20">
                    <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-primary/10 text-primary">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                    </div>
                    <h3 class="mt-5 text-lg font-bold text-secondary">{{ $item['title'] ?? '' }}</h3>
                    <p class="mt-3 text-sm leading-relaxed text-muted">{{ $item['description'] ?? '' }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>