@extends('layouts.app')

@section('title', __("app.industries.{$slug}.title"))
@section('meta_description', __("app.industries.{$slug}.meta_description"))

@section('content')
    @include('partials.page-hero', [
        'crumbs' => [
            ['name' => __('app.nav.home'), 'url' => lroute('home')],
            ['name' => __('app.nav.industries'), 'url' => lroute('home').'#solutions'],
            ['name' => __("app.industries.{$slug}.nav")],
        ],
        'title' => __("app.industries.{$slug}.h1"),
        'lead' => __("app.industries.{$slug}.lead"),
    ])

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

    <section class="bg-white">
        <div class="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8">
            <div class="rounded-2xl bg-paper p-8 ring-1 ring-black/5">
                <h2 class="text-xl font-bold text-brand-deep">{{ __('app.industries.recommended') }}</h2>
                <ul class="mt-4 flex flex-wrap gap-3">
                    @foreach (__("app.industries.{$slug}.solutions") as $solutionKey)
                        <li>
                            <a href="{{ lroute('solution', ['slug' => $solutionKey]) }}" class="inline-block rounded-full bg-white px-4 py-2 text-sm font-medium text-brand ring-1 ring-brand/30 transition hover:bg-brand hover:text-white">
                                {{ __("app.solutions.{$solutionKey}.nav") }}
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </section>

    @include('partials.cta')
@endsection