@php
    use App\Support\Marketing\SiteContent;

    $breadcrumbs = [
        ['label' => 'خانه', 'url' => url('/')],
        ['label' => 'راهکارها', 'url' => route('marketing.solutions')],
        ['label' => $solution['title'], 'url' => route('marketing.solutions.show', $slug)],
    ];
@endphp

<x-marketing.layout
    :title="$solution['metaTitle']"
    :description="$solution['metaDescription']"
    :breadcrumbs="$breadcrumbs"
>
    {{-- ------------------------------------------------------------------ Hero --}}
    <x-marketing.section>
        <x-marketing.breadcrumbs :items="$breadcrumbs" class="mb-8" />

        <div class="grid gap-10 lg:grid-cols-[1.05fr_0.95fr] lg:items-center lg:gap-14">
            <div data-fade>
                <span class="inline-flex rounded-full border border-limoc-lime/40 bg-limoc-honey/50 px-3 py-1 text-xs font-bold text-limoc-green">
                    راهکار صنعتی
                </span>

                <h1 class="mt-4 text-3xl font-black leading-[1.55] text-limoc-ink sm:text-4xl">
                    {{ $solution['heading'] }}
                </h1>

                <p class="mt-5 text-sm leading-8 text-limoc-muted sm:text-base">
                    {{ $solution['lead'] }}
                </p>

                <div class="mt-8 flex flex-wrap gap-3">
                    <x-marketing.button :href="url('/').'#trial-form'" size="lg" event="trial_start_click" :event-label="'solution:'.$slug">
                        ۶۰ روز رایگان شروع کنید
                    </x-marketing.button>

                    <x-marketing.button :href="url('/').'#features'" variant="secondary" size="lg" event="feature_click" :event-label="'solution:'.$slug">
                        مشاهده امکانات
                    </x-marketing.button>
                </div>
            </div>

            {{-- The industry's own journey, in its own vocabulary. --}}
            <div data-fade class="rounded-2xl border border-limoc-border bg-white p-6 shadow-sm">
                <h2 class="text-sm font-bold text-limoc-muted">مسیر کار شما در لیموسی</h2>
                <ol class="mt-5 space-y-3">
                    @foreach ($solution['journey'] as $i => $stage)
                        <li class="flex items-center gap-3">
                            <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-limoc-honey text-[11px] font-black text-limoc-green">
                                {{ $i + 1 }}
                            </span>
                            <span class="text-sm font-bold text-limoc-ink">{{ $stage }}</span>
                        </li>
                    @endforeach
                </ol>
            </div>
        </div>
    </x-marketing.section>

    {{-- ------------------------------------------------------------ Challenges --}}
    <x-marketing.section tone="white">
        <x-marketing.section-title
            title="چالش‌هایی که احتمالاً با آن‌ها روبه‌رو هستید"
        />

        <div class="mt-12 grid gap-4 sm:grid-cols-2">
            @foreach ($solution['challenges'] as $challenge)
                <div data-fade class="flex gap-3 rounded-xl border border-limoc-border bg-limoc-cream p-5">
                    <span class="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-rose-50 text-rose-500" aria-hidden="true">
                        <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/></svg>
                    </span>
                    <div class="min-w-0">
                        <h3 class="font-bold text-limoc-ink">{{ $challenge['title'] }}</h3>
                        <p class="mt-1.5 text-sm leading-7 text-limoc-muted">{{ $challenge['text'] }}</p>
                    </div>
                </div>
            @endforeach
        </div>
    </x-marketing.section>

    {{-- --------------------------------------------------------------- Answers --}}
    <x-marketing.section>
        <x-marketing.section-title
            eyebrow="پاسخ لیموسی"
            title="لیموسی چطور این‌ها را حل می‌کند"
        />

        <div class="mt-12 grid gap-4 sm:grid-cols-2">
            @foreach ($solution['answers'] as $answer)
                <div data-fade class="rounded-xl border border-limoc-border bg-white p-5">
                    <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-limoc-honey/60 text-limoc-green">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    </span>
                    <h3 class="mt-3 font-bold text-limoc-ink">{{ $answer['title'] }}</h3>
                    <p class="mt-1.5 text-sm leading-7 text-limoc-muted">{{ $answer['text'] }}</p>

                    @if ($moduleUrl = SiteContent::pageUrl($answer['module']))
                        <a href="{{ $moduleUrl }}" data-track="feature_click" data-track-label="{{ $answer['module'] }}"
                           class="mt-3 inline-flex text-sm font-bold text-limoc-green underline-offset-4 hover:underline">
                            جزئیات بیشتر
                        </a>
                    @endif
                </div>
            @endforeach
        </div>

        <div class="mt-14">
            <x-marketing.cta-section
                :source="'solution:'.$slug"
                title="لیموسی را ۶۰ روز رایگان امتحان کنید"
                lead="بدون نیاز به نصب، روی موبایل و کامپیوتر، مناسب تیم‌های ۲ تا ۱۰ نفره."
                :primary-href="url('/').'#trial-form'"
            />
        </div>
    </x-marketing.section>

    {{-- --------------------------------------------------------------- Related --}}
    @if ($related)
        <x-marketing.section tone="white">
            <x-marketing.section-title title="راهکارهای دیگر" />

            <div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($related as $card)
                    <x-marketing.industry-card
                        :title="$card['title']"
                        :text="$card['text']"
                        :slug="$card['slug']"
                    />
                @endforeach
            </div>
        </x-marketing.section>
    @endif
</x-marketing.layout>