{{-- Лендинг для действующих клиентов Korzilla. Адрес рассылается в письмах с их
     сайтов; ссылок на teeu на эту страницу нет, поэтому — noindex (в robots.txt
     намеренно не попадает: он публичен и сам бы раскрыл адрес).
     Тексты — Настройки → Лендинг Korzilla; вопросы — Контент → Вопрос-ответ Korzilla. --}}
@extends('layouts.app')

@section('title', $texts['hero_title'].' — TEEU.RU для клиентов Korzilla')
@section('meta_description', $texts['hero_subtitle'])

@section('seo')
    <meta name="robots" content="noindex, nofollow">
    @include('partials.seo.meta', [
        'ogTitle' => $texts['hero_title'].' — TEEU.RU',
        'ogDescription' => $texts['hero_subtitle'],
    ])
@endsection

@php($ctaUrl = auth()->check() ? (auth()->user()->seller() ? route('merchant.dashboard') : route('become-seller')) : route('register'))

@section('content')
<div class="mx-auto max-w-[1120px]">

    {{-- ============ HERO ============ --}}
    <section class="relative overflow-hidden rounded-[var(--radius-xl)] bg-[linear-gradient(120deg,#101418_0%,#1A2130_52%,#0F2A5E_100%)] px-5 py-12 sm:px-12 sm:py-16">
        <div class="pointer-events-none absolute -right-16 -top-16 h-72 w-72 rounded-full bg-[radial-gradient(circle,rgba(24,119,255,0.35)_0%,transparent_70%)]"></div>
        <div class="pointer-events-none absolute -bottom-24 right-24 h-64 w-64 rounded-full bg-[radial-gradient(circle,rgba(24,119,255,0.18)_0%,transparent_70%)]"></div>

        <div class="relative max-w-[720px]">
            @if (filled($texts['hero_badge']))
                <span class="inline-flex items-center gap-2 rounded-full bg-[rgba(31,157,87,0.16)] px-4 py-2 text-[13px] font-extrabold uppercase tracking-wider text-[#5CE0A0]">
                    <i data-lucide="badge-check" class="h-4 w-4"></i> {{ $texts['hero_badge'] }}
                </span>
            @endif

            <h1 class="mt-6 text-[32px] font-extrabold leading-[1.12] tracking-tight text-white sm:text-[50px]">
                {{ $texts['hero_title'] }}
            </h1>

            <p class="mt-6 text-[17px] leading-relaxed text-white/75 sm:text-[19px]">
                {{ $texts['hero_subtitle'] }}
            </p>

            <div class="mt-9 flex flex-col gap-3 sm:flex-row sm:items-center">
                <a href="{{ $ctaUrl }}" class="inline-flex items-center justify-center gap-2 rounded-[var(--radius-lg)] bg-[var(--color-primary)] px-8 py-4 text-[16px] font-extrabold text-white shadow-[var(--shadow-primary)] transition hover:bg-[var(--color-primary-dark)]">
                    {{ $texts['cta_label'] }} <i data-lucide="arrow-right" class="h-4 w-4"></i>
                </a>
                <a href="#faq" class="inline-flex items-center justify-center gap-2 rounded-[var(--radius-lg)] border border-white/20 px-7 py-4 text-[16px] font-bold text-white transition hover:bg-white/10">
                    Вопрос-ответ
                </a>
            </div>

            <p class="mt-6 flex flex-wrap items-center gap-x-2 gap-y-1 text-[14px] text-white/55">
                <i data-lucide="check-circle-2" class="h-4 w-4 text-[#5CE0A0]"></i> Без комиссий и абонентской платы
                <span class="text-white/25">·</span> Товары загружаются из выгрузки вашего сайта
            </p>
        </div>
    </section>

    {{-- ============ VALUE BAR ============ --}}
    <section class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        @foreach ([
            ['wallet', '0 ₽', 'подключение и размещение товаров'],
            ['percent', '0 %', 'комиссия с ваших продаж'],
            ['timer', '10 минут', 'на подключение магазина'],
            ['award', '3000+', 'магазинов запустила Korzilla'],
        ] as [$icon, $big, $sub])
            <div class="flex items-center gap-4 rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white p-5">
                <span class="grid h-12 w-12 shrink-0 place-items-center rounded-[13px] bg-[var(--color-primary-soft)] text-[var(--color-primary)]"><i data-lucide="{{ $icon }}" class="h-5 w-5"></i></span>
                <div class="min-w-0">
                    <div class="text-xl font-extrabold leading-none text-[var(--color-ink)]">{{ $big }}</div>
                    <div class="mt-1.5 text-[14px] leading-snug text-[var(--color-muted)]">{{ $sub }}</div>
                </div>
            </div>
        @endforeach
    </section>

    {{-- ============ BENEFITS ============ --}}
    <section class="mt-16">
        <div class="mx-auto max-w-2xl text-center">
            <h2 class="text-[26px] font-extrabold tracking-tight text-[var(--color-ink)] sm:text-4xl">{{ $texts['benefits_title'] }}</h2>
            <p class="mt-4 text-[17px] leading-relaxed text-[var(--color-slate)]">{{ $texts['benefits_subtitle'] }}</p>
        </div>

        <div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ([
                ['wallet', 'Бесплатно', 'Размещение на TEEU.RU бесплатно для действующих клиентов Korzilla: ни платы за подключение, ни абонентской платы.'],
                ['percent', 'Без комиссий', 'Мы не посредник между вами и покупателем и не берём процент с продаж. Заявка приходит вам напрямую.'],
                ['crown', 'Приоритет в продвижении', 'Площадка открыта и для сторонних продавцов, но товары клиентов Korzilla мы продвигаем в первую очередь.'],
                ['download-cloud', 'Товары загрузятся сами', 'YML-выгрузка у вашего сайта уже есть — просто дайте ссылку. Цены и наличие обновляются автоматически.'],
                ['phone-call', 'Заявки напрямую', 'Вы получаете контакты покупателя в кабинете и в письме — и сами договариваетесь об оплате и доставке.'],
                ['shield-check', 'Вы ничем не рискуете', 'Не будет заявок — вы ничего не потеряли. Это дополнительный канал продаж без вложений и обязательств.'],
            ] as [$icon, $title, $text])
                <div class="group 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)]">
                    <span class="grid h-12 w-12 place-items-center rounded-[14px] bg-[var(--color-primary-soft)] text-[var(--color-primary)] transition group-hover:bg-[var(--color-primary)] group-hover:text-white"><i data-lucide="{{ $icon }}" class="h-6 w-6"></i></span>
                    <h3 class="mt-5 text-[19px] font-extrabold text-[var(--color-ink)]">{{ $title }}</h3>
                    <p class="mt-2.5 text-[15px] leading-relaxed text-[var(--color-slate)]">{{ $text }}</p>
                </div>
            @endforeach
        </div>
    </section>

    {{-- ============ HOW TO CONNECT ============ --}}
    <section class="mt-16 rounded-[var(--radius-xl)] bg-white p-7 shadow-[var(--shadow-card)] sm:p-10">
        <div class="mx-auto max-w-2xl text-center">
            <h2 class="text-[26px] font-extrabold tracking-tight text-[var(--color-ink)] sm:text-4xl">{{ $texts['steps_title'] }}</h2>
            <p class="mt-4 text-[17px] leading-relaxed text-[var(--color-slate)]">{{ $texts['steps_subtitle'] }}</p>
        </div>

        <div class="mt-10 grid gap-7 sm:grid-cols-2 lg:grid-cols-4">
            @foreach ([
                ['phone-call', 'Зарегистрируйтесь', 'Вход по номеру телефона — звонок вместо SMS. Или через Яндекс ID / VK ID.'],
                ['store', 'Создайте магазин', 'Укажите название и контакты. Не хотите сами — сообщите нам телефон, настроим за вас.'],
                ['plug', 'Подключите выгрузку', 'Вставьте ссылку на YML-файл вашего сайта или ключ кабинета Ozon либо Wildberries — товары загрузятся и будут обновляться сами.'],
                ['inbox', 'Получайте заявки', 'Данные покупателя приходят в кабинет и на почту. Дальше общаетесь напрямую.'],
            ] as $i => [$icon, $title, $text])
                <div>
                    <div class="flex items-center gap-3">
                        <span class="grid h-11 w-11 shrink-0 place-items-center rounded-[13px] bg-[var(--color-ink)] text-white"><i data-lucide="{{ $icon }}" class="h-5 w-5"></i></span>
                        <span class="text-3xl font-extrabold text-[var(--color-line)]">0{{ $i + 1 }}</span>
                    </div>
                    <h3 class="mt-4 text-[17px] font-extrabold text-[var(--color-ink)]">{{ $title }}</h3>
                    <p class="mt-2 text-[15px] leading-relaxed text-[var(--color-slate)]">{{ $text }}</p>
                </div>
            @endforeach
        </div>

        <div class="mt-10 text-center">
            <a href="{{ $ctaUrl }}" class="inline-flex items-center gap-2 rounded-[var(--radius-lg)] bg-[var(--color-primary)] px-8 py-4 text-[16px] font-extrabold text-white shadow-[var(--shadow-primary)] transition hover:bg-[var(--color-primary-dark)]">
                {{ $texts['cta_label'] }} <i data-lucide="arrow-right" class="h-4 w-4"></i>
            </a>
        </div>
    </section>

    {{-- ============ FAQ (правится в /developer → Контент → Вопрос-ответ Korzilla) ============ --}}
    @if ($faq->isNotEmpty())
        <section id="faq" class="mt-16 scroll-mt-24" x-data="{ open: null }">
            <div class="mx-auto max-w-2xl text-center">
                <h2 class="text-[26px] font-extrabold tracking-tight text-[var(--color-ink)] sm:text-4xl">{{ $texts['faq_title'] }}</h2>
            </div>

            <div class="mx-auto mt-10 max-w-3xl space-y-3">
                @foreach ($faq as $item)
                    <div class="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white">
                        <button type="button" @click="open = (open === {{ $item->id }} ? null : {{ $item->id }})"
                                class="flex w-full items-center justify-between gap-4 px-5 py-5 text-left sm:px-6">
                            <span class="text-[16px] font-extrabold text-[var(--color-ink)] sm:text-[17px]">{{ $item->question }}</span>
                            <i data-lucide="chevron-down" class="h-5 w-5 shrink-0 text-[var(--color-muted)] transition-transform" :class="open === {{ $item->id }} && 'rotate-180'"></i>
                        </button>
                        <div x-show="open === {{ $item->id }}" x-cloak
                             x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
                            {{-- Linkify escapes first, then weaves in <a> — safe to print via {{ }} (HtmlString). --}}
                            <p class="whitespace-pre-line px-5 pb-5 text-[15px] leading-relaxed text-[var(--color-slate)] sm:px-6 sm:text-[16px]">{{ \App\Support\Linkify::render($item->answer) }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </section>
    @endif

    {{-- ============ ЗАЯВКА (Bitrix24) ============ --}}
    @if (filled($formEmbed))
        <section id="request" class="mt-16 scroll-mt-24 overflow-hidden rounded-[var(--radius-xl)] border border-[var(--color-line)] bg-white shadow-[var(--shadow-card)]">
            <div class="bg-[linear-gradient(110deg,#1877FF_0%,#1466E0_55%,#0F4FB0_100%)] px-6 py-10 text-center sm:px-12 sm:py-12">
                <h2 class="text-[26px] font-extrabold tracking-tight text-white sm:text-4xl">{{ $texts['form_title'] }}</h2>
                <p class="mx-auto mt-4 max-w-xl text-[16px] leading-relaxed text-white/85 sm:text-[17px]">{{ $texts['form_subtitle'] }}</p>
            </div>

            <div class="px-4 py-8 sm:px-10 sm:py-10">
                <div class="mx-auto max-w-[640px]">
                    {{-- Форма CRM. Доверенный HTML из настроек (Настройки → Лендинг Korzilla),
                         вставляется как есть — как site.body_scripts. --}}
                    {!! $formEmbed !!}
                </div>
            </div>
        </section>
    @endif

    <p class="mx-auto mt-8 max-w-2xl text-center text-[14px] leading-relaxed text-[var(--color-muted)]">
        TEEU.RU — маркетплейс от команды Korzilla, разработчика вашего сайта.
        Размещение бесплатно для действующих клиентов компании.
    </p>
</div>
@endsection