@extends('layouts.app')

@section('title', $c['title'] ?? '')
@section('meta_description', $c['meta_description'] ?? '')
@php
    $ogSize = ! empty($c['image']) ? @getimagesize(public_path($c['image'])) : null;
@endphp
@if (! empty($c['image']))
@section('og_image', asset($c['image']))
@if ($ogSize)
@section('og_image_width', (string) $ogSize[0])
@section('og_image_height', (string) $ogSize[1])
@endif
@elseif (file_exists(public_path('brand/comparisons/'.$slug.'-'.app()->getLocale().'.webp')))
@section('og_image', asset('brand/comparisons/'.$slug.'-'.app()->getLocale().'.webp'))
@endif

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

    <div class="mx-auto max-w-7xl px-4 pt-16 sm:px-6 sm:pt-20 lg:px-8">
        @if (! empty($c['image']))
        <img src="{{ asset($c['image']) }}" alt="{{ $c['title'] ?? '' }}" class="w-full rounded-2xl object-cover shadow-sm ring-1 ring-black/5" @if ($ogSize) width="{{ $ogSize[0] }}" height="{{ $ogSize[1] }}" @endif>
        @elseif (file_exists(public_path('brand/comparisons/'.$slug.'-'.app()->getLocale().'.webp')))
        <img src="{{ asset('brand/comparisons/'.$slug.'-'.app()->getLocale().'.webp') }}" alt="{{ $c['title'] ?? '' }}" class="w-full rounded-2xl object-cover shadow-sm ring-1 ring-black/5" width="1200" height="630">
        @endif
    </div>

    @php
        $guideSections = $c['sections'] ?? null;
    @endphp
    @if (is_array($guideSections))
    <section class="mx-auto max-w-3xl px-4 pt-16 sm:px-6 sm:pt-20 lg:px-8">
        <div class="space-y-12">
            @foreach ($guideSections as $section)
                <div>
                    <h2 class="text-2xl font-bold text-brand-deep sm:text-3xl">{{ $section['title'] }}</h2>
                    @foreach ($section['paragraphs'] as $paragraph)
                        <p class="mt-4 text-base leading-loose text-ink-soft">{{ $paragraph }}</p>
                    @endforeach
                </div>
            @endforeach
        </div>
    </section>
    @endif

    <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">{{ $c['points_title'] ?? '' }}</h2>
        <div class="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            @foreach (($c['points'] ?? []) as $point)
                <article class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-black/5">
                    <h3 class="text-base font-bold text-brand-deep">{{ $point['title'] }}</h3>
                    <p class="mt-2 text-sm leading-relaxed text-ink-soft">{{ $point['text'] }}</p>
                </article>
            @endforeach
        </div>
    </section>

    @php
        $comparisonTable = $c['table'] ?? null;
    @endphp
    @if (is_array($comparisonTable))
    <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">{{ $c['table_title'] ?? '' }}</h2>
            <div class="mt-10 overflow-x-auto rounded-2xl ring-1 ring-black/5">
                <table class="w-full min-w-[36rem] border-collapse bg-white text-sm">
                    <thead>
                        <tr class="bg-paper text-start">
                            <th scope="col" class="px-5 py-4 text-start font-bold text-brand-deep">{{ $c['table_feature'] ?? '' }}</th>
                            <th scope="col" class="px-5 py-4 text-start font-bold text-brand-deep">{{ $c['table_qoodz'] ?? '' }}</th>
                            <th scope="col" class="px-5 py-4 text-start font-bold text-ink-soft">{{ $c['table_other'] ?? '' }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($comparisonTable as $row)
                            <tr class="border-t border-black/5">
                                <th scope="row" class="px-5 py-4 text-start font-semibold text-ink">{{ $row['feature'] }}</th>
                                <td class="px-5 py-4 text-ink-soft">{{ $row['qoodz'] }}</td>
                                <td class="px-5 py-4 text-ink-soft/80">{{ $row['other'] }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <p class="mt-4 text-xs leading-relaxed text-ink-soft/70">{{ $c['table_note'] ?? '' }}</p>
        </div>
    </section>
    @endif

    <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">{{ $c['steps_title'] ?? '' }}</h2>
            <div class="mt-10 grid gap-8 md:grid-cols-3">
                @foreach (($c['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
        $comparisonFaq = $c['faq'] ?? null;
    @endphp
    @if (is_array($comparisonFaq) && count($comparisonFaq))
    <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 ($comparisonFaq 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']],
        ], $comparisonFaq),
    ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_HEX_AMP) !!}</script>
    @endif

    @php
        $relatedLinks = $c['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' => __("app.post_titles.{$link['slug']}"),
                            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 1 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