@extends('layouts.app')

@section('title', 'Интеграции: выгрузка товаров на teeu по YML')
@section('meta_description', 'Из каких систем можно выгрузить товары на маркетплейс teeu: 1С, InSales, Битрикс, МойСклад и любые другие с форматом YML. Инструкции по подключению.')

@section('seo')
    @include('partials.seo.meta', [
        'canonical' => route('integrations.index'),
        'ogTitle' => 'Интеграции: выгрузка товаров на teeu по YML',
        'ogDescription' => 'Подключите товары из своей системы учёта или CMS к маркетплейсу teeu — по YML-выгрузке, автоматически и бесплатно.',
    ])
@endsection

@section('content')
    <div class="mx-auto w-full max-w-4xl">
        <nav class="text-sm text-[var(--color-muted)]">
            <a href="{{ route('home') }}" class="transition hover:text-[var(--color-primary)]">Главная</a>
        </nav>

        <h1 class="mt-2 text-3xl font-extrabold tracking-tight text-[var(--color-ink)]">Интеграции</h1>
        <p class="mt-3 max-w-2xl text-[17px] leading-relaxed text-[var(--color-slate)]">
            teeu забирает товары из вашей системы по YML-выгрузке — тому же формату, что и Яндекс.Маркет.
            Ниже инструкции для популярных систем; подойдёт любая, которая умеет отдавать YML.
        </p>

        @if ($integrations->isEmpty())
            <p class="mt-10 text-[15px] text-[var(--color-muted)]">Список пока пуст.</p>
        @else
            <div class="mt-9 grid gap-4 sm:grid-cols-2">
                @foreach ($integrations as $integration)
                    <a href="{{ route('integrations.show', $integration->slug) }}"
                       class="group flex flex-col rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white p-6 transition hover:-translate-y-0.5 hover:border-[#D3E3FF] hover:shadow-[var(--shadow-card)]">
                        <div class="flex h-12 items-center">
                            @if ($integration->logoUrl())
                                <img src="{{ $integration->logoUrl() }}" alt="{{ $integration->name }}"
                                     loading="lazy" class="h-10 w-auto max-w-[140px] object-contain">
                            @else
                                <span class="text-lg font-extrabold text-[var(--color-ink)]">{{ $integration->name }}</span>
                            @endif
                        </div>
                        <h2 class="mt-4 text-base font-extrabold text-[var(--color-ink)] transition group-hover:text-[var(--color-primary)]">{{ $integration->captionText() }}</h2>
                        @if ($integration->excerpt)
                            <p class="mt-2 text-sm leading-relaxed text-[var(--color-slate)]">{{ $integration->excerpt }}</p>
                        @endif
                        <span class="mt-4 inline-flex items-center gap-1.5 text-sm font-semibold text-[var(--color-primary)]">
                            Инструкция <i data-lucide="arrow-right" class="h-4 w-4"></i>
                        </span>
                    </a>
                @endforeach
            </div>
        @endif

        <section class="mt-14 rounded-[var(--radius-xl)] bg-[linear-gradient(110deg,#1877FF_0%,#1466E0_55%,#0F4FB0_100%)] px-6 py-10 text-center sm:px-12">
            <h2 class="text-2xl font-extrabold tracking-tight text-white">Вашей системы нет в списке?</h2>
            <p class="mx-auto mt-3 max-w-xl text-[15px] text-white/85">
                Это не помеха: teeu принимает любую выгрузку в формате YML. Откройте магазин и подключите свой фид.
            </p>
            <a href="{{ auth()->check() ? route('become-seller') : route('register') }}"
               class="mt-7 inline-flex items-center gap-2 rounded-[var(--radius-lg)] bg-white px-8 py-3.5 text-sm font-extrabold text-[var(--color-primary-dark)] transition hover:bg-white/95">
                Открыть магазин бесплатно <i data-lucide="arrow-right" class="h-4 w-4"></i>
            </a>
        </section>

        {{-- Приглашение к партнёрам. Тёмная плашка вместо синей: два одинаковых
             блока подряд читались бы как один и второй призыв бы потерялся. --}}
        <section class="mt-5 overflow-hidden rounded-[var(--radius-xl)] bg-[linear-gradient(120deg,#101418_0%,#1A2130_55%,#12313F_100%)] px-6 py-10 sm:px-12">
            <div class="items-center gap-8 sm:flex">
                <div class="min-w-0 flex-1">
                    <span class="inline-flex items-center gap-2 rounded-full bg-white/10 px-3.5 py-1.5 text-xs font-extrabold uppercase tracking-wider text-[#5EEAD4]">
                        <i data-lucide="handshake" class="h-3.5 w-3.5"></i> Помощь партнёров
                    </span>
                    <h2 class="mt-4 text-2xl font-extrabold tracking-tight text-white">{{ $partnerCta['title'] }}</h2>
                    <p class="mt-3 max-w-xl text-[15px] leading-relaxed text-white/75">{{ $partnerCta['text'] }}</p>
                </div>
                <a href="{{ route('partners.index') }}"
                   class="mt-7 inline-flex shrink-0 items-center gap-2 rounded-[var(--radius-lg)] bg-[#0D9488] px-7 py-3.5 text-sm font-extrabold text-white transition hover:bg-[#0F766E] sm:mt-0">
                    {{ $partnerCta['label'] }} <i data-lucide="arrow-right" class="h-4 w-4"></i>
                </a>
            </div>
        </section>
    </div>
@endsection