@extends('layouts.app')

@section('title', $integration->metaTitle().' — teeu')
@section('meta_description', $integration->meta_description ?? $integration->excerpt)

@section('seo')
    @include('partials.seo.meta', [
        'canonical' => route('integrations.show', $integration->slug),
        'ogType' => 'article',
        'ogTitle' => $integration->metaTitle(),
        'ogDescription' => $integration->meta_description ?? $integration->excerpt,
        'ogImage' => \App\Support\OgImage::from($integration->logoUrl()),
    ])

    @include('partials.seo.json-ld', ['data' => \App\Support\Seo::breadcrumbJsonLd([
        ['name' => 'Главная', 'url' => route('home')],
        ['name' => 'Интеграции', 'url' => route('integrations.index')],
        ['name' => $integration->name, 'url' => route('integrations.show', $integration->slug)],
    ])])
@endsection

@section('content')
    <article class="mx-auto w-full max-w-3xl">
        <nav class="flex flex-wrap items-center gap-1.5 text-sm text-[var(--color-muted)]">
            <a href="{{ route('home') }}" class="transition hover:text-[var(--color-primary)]">Главная</a>
            <span>/</span>
            <a href="{{ route('integrations.index') }}" class="transition hover:text-[var(--color-primary)]">Интеграции</a>
        </nav>

        <div class="mt-4 flex items-center gap-4">
            @if ($integration->logoUrl())
                <img src="{{ $integration->logoUrl() }}" alt="{{ $integration->name }}"
                     class="h-14 w-auto max-w-[140px] object-contain">
            @endif
            <h1 class="text-3xl font-extrabold tracking-tight text-[var(--color-ink)]">{{ $integration->name }}</h1>
        </div>

        @if ($integration->excerpt)
            <p class="mt-4 text-[17px] leading-relaxed text-[var(--color-slate)]">{{ $integration->excerpt }}</p>
        @endif

        <div class="mt-7 flex flex-wrap gap-3">
            <a href="{{ auth()->check() ? route('become-seller') : route('register') }}"
               class="inline-flex items-center gap-2 rounded-[var(--radius-lg)] bg-[var(--color-primary)] px-6 py-3 text-sm font-extrabold text-white shadow-[var(--shadow-primary)] transition hover:bg-[var(--color-primary-dark)]">
                Открыть магазин бесплатно <i data-lucide="arrow-right" class="h-4 w-4"></i>
            </a>
            <a href="{{ route('sell') }}"
               class="inline-flex items-center gap-2 rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white px-6 py-3 text-sm font-bold text-[var(--color-ink)] transition hover:border-[var(--color-primary)]">
                Как это работает
            </a>
        </div>

        {{-- Статья правится в панели (Контент → Интеграции) — доверенный HTML. --}}
        <x-prose class="mt-9">
            {!! $integration->content !!}
        </x-prose>

        @if ($others->isNotEmpty())
            <section class="mt-14 border-t border-[var(--color-line)] pt-8">
                <h2 class="text-lg font-extrabold text-[var(--color-ink)]">Другие системы</h2>
                <div class="mt-4 flex flex-wrap gap-2.5">
                    @foreach ($others as $other)
                        <a href="{{ route('integrations.show', $other->slug) }}"
                           class="inline-flex items-center gap-2 rounded-[var(--radius-md)] border border-[var(--color-line)] bg-white px-4 py-2.5 text-sm font-semibold text-[var(--color-ink)] transition hover:border-[var(--color-primary)] hover:text-[var(--color-primary)]">
                            @if ($other->logoUrl())
                                <img src="{{ $other->logoUrl() }}" alt="" loading="lazy" class="h-5 w-auto max-w-[60px] object-contain">
                            @endif
                            {{ $other->name }}
                        </a>
                    @endforeach
                </div>
            </section>
        @endif
    </article>
@endsection