@extends('layouts.app')

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

@section('content')
    @include('partials.page-hero', [
        'crumbs' => [
            ['name' => __('app.nav.home'), 'url' => lroute('home')],
            ['name' => __('app.nav.integrations')],
        ],
        'title' => __('app.integrations.h1'),
        'lead' => __('app.integrations.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">
            <a href="{{ lroute('integrations.foodics') }}" class="group rounded-2xl bg-white p-6 shadow-sm ring-1 ring-black/5 transition hover:ring-brand/40">
                <h2 class="text-base font-bold text-brand-deep group-hover:text-brand">Foodics</h2>
                <p class="mt-2 text-sm leading-relaxed text-ink-soft">{{ __('app.integrations.foodics_teaser') }}</p>
                <span class="mt-4 inline-block text-sm font-semibold text-brand">{{ __('app.learn_more') }} &larr;</span>
            </a>

            @foreach (__('app.integrations.items') as $item)
                <article class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-black/5">
                    <div class="flex items-center justify-between gap-2">
                        <h2 class="text-base font-bold text-brand-deep">{{ $item['name'] }}</h2>
                        <span class="rounded-full bg-cream px-3 py-1 text-xs font-semibold text-brand-deep">{{ $item['status'] }}</span>
                    </div>
                    <p class="mt-2 text-sm leading-relaxed text-ink-soft">{{ $item['text'] }}</p>
                </article>
            @endforeach
        </div>
    </section>

    @include('partials.cta')
@endsection