@php

    $features = [
        [
            'icon' => 'ph--gauge',
            'title' => 'Real-Time Dashboard',
            'description' =>
                'Monitor your business metrics in real time with an intuitive dashboard that gives you instant visibility into performance, usage, and growth.',
        ],
        [
            'icon' => 'ph--users-three',
            'title' => 'Team Collaboration',
            'description' =>
                'Work seamlessly with your team using shared workspaces, role-based permissions, and real-time updates that keep everyone aligned.',
        ],
        [
            'icon' => 'ph--gear-six',
            'title' => 'Automated Workflows',
            'description' =>
                'Streamline repetitive tasks with powerful automation tools that save time, reduce errors, and boost overall productivity.',
        ],
        [
            'icon' => 'ph--cloud',
            'title' => 'Cloud-Based Access',
            'description' =>
                'Access your data securely from anywhere in the world. Our fully cloud-hosted platform ensures reliability, scalability, and 99.9% uptime.',
        ],
        [
            'icon' => 'ph--shield-check',
            'title' => 'Enterprise-Grade Security',
            'description' =>
                'Protect your data with advanced encryption, secure authentication, and compliance-ready infrastructure built for peace of mind.',
        ],
        [
            'icon' => 'ph--chart-line-up',
            'title' => 'Advanced Analytics & Insights',
            'description' =>
                'Make smarter decisions with detailed reports, actionable insights, and predictive analytics designed to help you scale confidently.',
        ],
    ];
@endphp
<section class="py-20 lg:py-32">
    <div class="px-5 sm:px-10 md:px-12 lg:px-5 lg:max-w-7xl mx-auto w-full">
        <div class="flex flex-col md:flex-row md:justify-between md:items-end">
            <div class="max-w-lg space-y-4">
                <span class="block w-max border border-border shadow-sm text-foreground rounded-ui px-2 py-0.5">
                    Why us
                </span>
                <h1 class="font-semibold text-foreground text-3xl md:text-4xl/tight">
                    Choose the perfect SEO partner for your business growth
                </h1>
            </div>
            <div class="max-w-sm">
                <p class="text-muted-foreground">
                    We help businesses rank higher, grow organic traffic, and dominate search engines through tailored
                    SEO strategies.
                </p>
            </div>
        </div>
        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-16">
            @foreach ($features as $feature)
                <x-blocks.feature-card :icon="$feature['icon']" :title="$feature['title']" :description="$feature['description']" />
            @endforeach
        </div>
    </div>
</section>

@props(['icon', 'title', 'description'])
<div class="rounded-ui p-6 sm:p-8 lg:p-10 bg-card flex flex-col hover:bg-muted ease-linear">
    <div class="p-3 rounded-md bg-background  shadow-sm text-foreground flex items-center justify-center w-max">
        <x-ui.icon name="{{ $icon }}" class="size-6" />
    </div>
    <h3 class="text-foreground font-medium text-2xl mt-10">
        {{ $title }}
    </h3>
    <p class="text-muted-foreground text-sm mt-4">
        {{ $description }}
    </p>
</div>