@extends('layouts.app')

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

@section('content')
    @include('partials.page-hero', [
        'crumbs' => [
            ['name' => __('app.nav.home'), 'url' => lroute('home')],
            ['name' => __('app.nav.solutions'), 'url' => lroute('home').'#solutions'],
            ['name' => __("app.solutions.{$slug}.nav")],
        ],
        'title' => __("app.solutions.{$slug}.h1"),
        'lead' => __("app.solutions.{$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.solutions.{$slug}.features_title") }}</h2>
        <div class="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            @foreach (__("app.solutions.{$slug}.features") as $feature)
                <article class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-black/5">
                    <h3 class="text-base font-bold text-brand-deep">{{ $feature['title'] }}</h3>
                    <p class="mt-2 text-sm leading-relaxed text-ink-soft">{{ $feature['text'] }}</p>
                </article>
            @endforeach
        </div>
    </section>

    <section class="bg-white">
        <div 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.solutions.{$slug}.steps_title") }}</h2>
            <div class="mt-10 grid gap-8 md:grid-cols-3">
                @foreach (__("app.solutions.{$slug}.steps") as $i => $step)
                    <div class="rounded-2xl bg-paper p-6 ring-1 ring-black/5">
                        <span class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-brand text-sm font-bold text-white">{{ $i + 1 }}</span>
                        <p class="mt-4 text-sm leading-relaxed text-ink-soft">{{ $step }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    @php
        $solutionFaq = __("app.solutions.{$slug}.faq");
    @endphp
    @if (is_array($solutionFaq) && count($solutionFaq))
    <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.nav.faq') }}</h2>
        <dl class="mt-10 grid gap-4 sm:grid-cols-2">
            @foreach ($solutionFaq as $item)
                <div class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-black/5">
                    <dt class="text-base font-bold text-brand-deep">{{ $item['q'] }}</dt>
                    <dd class="mt-2 text-sm leading-relaxed text-ink-soft">{{ $item['a'] }}</dd>
                </div>
            @endforeach
        </dl>
    </section>
    <script type="application/ld+json">{!! json_encode([
        '@context' => 'https://schema.org',
        '@type' => 'FAQPage',
        'mainEntity' => array_map(fn (array $item) => [
            '@type' => 'Question',
            'name' => $item['q'],
            'acceptedAnswer' => ['@type' => 'Answer', 'text' => $item['a']],
        ], $solutionFaq),
    ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_HEX_AMP) !!}</script>
    @endif

    @php
        $relatedLinks = __("app.solutions.{$slug}.related");
    @endphp
    @if (is_array($relatedLinks) && count($relatedLinks))
    <section class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
        <h2 class="text-2xl font-bold text-brand-deep sm:text-3xl">{{ __('app.comparisons.related_title') }}</h2>
        <div class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($relatedLinks as $link)
                @php
                    $linkType = $link['type'] ?? 'route';
                    $href = match ($linkType) {
                        'solution' => lroute('solution', ['slug' => $link['slug']]),
                        'comparison' => lroute('comparison', ['slug' => $link['slug']]),
                        'industry' => lroute('industry', ['slug' => $link['slug']]),
                        'post' => lroute('blog.show', ['slug' => $link['slug']]),
                        default => lroute($link['route']),
                    };
                    $label = isset($link['label'])
                        ? __($link['label'])
                        : match ($linkType) {
                            'solution' => __("app.solutions.{$link['slug']}.nav"),
                            'comparison' => __("app.comparisons.{$link['slug']}.title"),
                            'industry' => __("app.industries.{$link['slug']}.nav"),
                            'post' => '',
                            default => '',
                        };
                @endphp
                <a href="{{ $href }}" class="group rounded-2xl bg-white p-5 shadow-sm ring-1 ring-black/5 transition hover:ring-brand/40">
                    <span class="text-sm font-bold text-brand-deep group-hover:text-brand">{{ $label }}</span>
                    <svg class="mt-2 h-4 w-4 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>
            @endforeach
        </div>
    </section>
    @endif

    @include('partials.cta')
@endsection