@extends('layouts.app')

@section('title', __('app.foodics.title'))
@section('meta_description', __('app.foodics.meta_description'))

@section('content')
    @include('partials.page-hero', [
        'crumbs' => [
            ['name' => __('app.nav.home'), 'url' => lroute('home')],
            ['name' => __('app.nav.integrations'), 'url' => lroute('integrations')],
            ['name' => __('app.foodics.h1')],
        ],
        'title' => __('app.foodics.h1'),
        'lead' => __('app.foodics.lead'),
    ])

    <section class="mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8">
        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            @foreach (__('app.foodics.points') as $point)
                <article class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-black/5">
                    <h2 class="text-base font-bold text-brand-deep">{{ $point['title'] }}</h2>
                    <p class="mt-2 text-sm leading-relaxed text-ink-soft">{{ $point['text'] }}</p>
                </article>
            @endforeach
        </div>

        <a href="{{ lroute('comparison', ['slug' => 'foodics-alternative']) }}" class="group mt-8 flex items-center justify-between rounded-2xl bg-white p-6 shadow-sm ring-1 ring-black/5 transition hover:ring-brand/40">
            <div>
                <span class="text-base font-bold text-brand-deep group-hover:text-brand">{{ __('app.foodics.comparison_link') }}</span>
                <p class="mt-1 text-sm text-ink-soft">{{ __('app.foodics.comparison_link_text') }}</p>
            </div>
            <svg class="h-5 w-5 shrink-0 text-brand rtl:-scale-x-100" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 0 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd"/></svg>
        </a>
    </section>

    @include('partials.cta')
@endsection