@extends('layouts.frontend')

@section('title', '3-tier Маркетингийн Templates — Lite, Standard, Pro')
@section('description', 'NSMA-гийн жилийн маркетингийн төлөвлөгөөний 3-tier template: Lite ₮290K, Standard ₮890K, Pro ₮2.49M.')

@section('content')
<section class="bg-nsma-light py-16">
    <div class="max-w-5xl mx-auto px-4 lg:px-8 text-center">
        <span class="inline-block bg-nsma-red text-white px-4 py-1.5 rounded-full text-xs font-bold tracking-widest mb-4">3 ТҮВШНИЙ TEMPLATE</span>
        <h1 class="text-4xl lg:text-5xl font-black text-nsma-red leading-tight mb-4">
            Жилийн маркетингийн төлөвлөгөө
        </h1>
        <p class="text-lg text-nsma-dark max-w-2xl mx-auto mb-2">
            17 жилийн стратегийн туршлагаас гаргасан хэрэглэхэд бэлэн жилийн маркетингийн загвар.
        </p>
        <p class="text-base text-nsma-grey italic">"Маркетинг бол постлолт биш. Байр суурь." — NSMA</p>
    </div>
</section>

{{-- TIER CARDS --}}
<section class="py-12 bg-white">
    <div class="max-w-7xl mx-auto px-4 lg:px-8 grid md:grid-cols-3 gap-6"
         x-data="{ open: null, tier: '', tierLabel: '' }">

        {{-- LITE --}}
        <div class="bg-white border-2 border-gray-200 rounded-2xl p-8 flex flex-col">
            <div class="text-nsma-red font-bold text-sm tracking-widest mb-2">TIER 1</div>
            <h3 class="text-2xl font-bold text-nsma-dark mb-1">Lite</h3>
            <p class="text-sm text-nsma-grey mb-4">Founder өөрөө бөглөнө</p>
            <div class="text-4xl font-black text-nsma-dark mb-1">₮290,000</div>
            <p class="text-xs text-nsma-grey mb-6">нэг удаагийн төлбөр</p>

            <ul class="space-y-2 mb-6 flex-grow">
                <li class="flex items-start gap-2 text-sm"><span class="text-nsma-red font-bold">✓</span> 13 хуудас template (.docx + .pdf)</li>
                <li class="flex items-start gap-2 text-sm"><span class="text-nsma-red font-bold">✓</span> 4-6 цагт founder өөрөө бөглөнө</li>
                <li class="flex items-start gap-2 text-sm"><span class="text-nsma-red font-bold">✓</span> Бөглөгдсөн жишээ хавсаргасан</li>
                <li class="flex items-start gap-2 text-sm"><span class="text-nsma-red font-bold">✓</span> Email-ээр түгээгдэнэ</li>
            </ul>

            <div class="bg-nsma-light p-3 rounded-lg mb-4">
                <div class="text-xs font-bold text-nsma-dark mb-1">Хэнд тохиромжтой?</div>
                <p class="text-xs text-nsma-grey">Анх удаа жилийн төлөвлөгөө бичих гэж буй бизнес</p>
            </div>

            <a href="{{ asset('downloads/nsma-lite-preview.pdf') }}" download class="text-center text-nsma-red font-semibold text-sm mb-3 hover:underline">📥 4 хуудас preview татах</a>

            <button @click="open = true; tier = 'lite'; tierLabel = 'Lite (₮290,000)'"
                    class="w-full bg-nsma-red text-white font-bold py-3 rounded-lg hover:bg-nsma-red-dark">
                Lite захиалах
            </button>
        </div>

        {{-- STANDARD (RECOMMENDED) --}}
        <div class="bg-white border-2 border-nsma-red rounded-2xl p-8 flex flex-col relative shadow-lg">
            <span class="absolute -top-3 left-1/2 -translate-x-1/2 bg-nsma-red text-white px-4 py-1 rounded-full text-xs font-bold tracking-widest">ЗӨВЛӨМЖ</span>
            <div class="text-nsma-red font-bold text-sm tracking-widest mb-2">TIER 2</div>
            <h3 class="text-2xl font-bold text-nsma-dark mb-1">Standard</h3>
            <p class="text-sm text-nsma-grey mb-4">Template + Зөвлөхтэй 2 цагийн workshop</p>
            <div class="text-4xl font-black text-nsma-dark mb-1">₮890,000</div>
            <p class="text-xs text-nsma-grey mb-6">workshop + email follow-up</p>

            <ul class="space-y-2 mb-6 flex-grow">
                <li class="flex items-start gap-2 text-sm"><span class="text-nsma-red font-bold">✓</span> 18 хуудас гүн template</li>
                <li class="flex items-start gap-2 text-sm"><span class="text-nsma-red font-bold">✓</span> 2 цагийн live workshop (Zoom / биеэр)</li>
                <li class="flex items-start gap-2 text-sm"><span class="text-nsma-red font-bold">✓</span> Workshop-ын өмнөх 5 асуултын prep</li>
                <li class="flex items-start gap-2 text-sm"><span class="text-nsma-red font-bold">✓</span> Цэгцэлсэн файл</li>
                <li class="flex items-start gap-2 text-sm"><span class="text-nsma-red font-bold">✓</span> Email follow-up</li>
            </ul>

            <div class="bg-nsma-light p-3 rounded-lg mb-4">
                <div class="text-xs font-bold text-nsma-dark mb-1">Хэнд тохиромжтой?</div>
                <p class="text-xs text-nsma-grey">Багийн гишүүдтэй стратеги цэгцлэх бизнес</p>
            </div>

            <div class="mb-3"></div>

            <button @click="open = true; tier = 'standard'; tierLabel = 'Standard (₮890,000)'"
                    class="w-full bg-nsma-red text-white font-bold py-3 rounded-lg hover:bg-nsma-red-dark">
                Standard захиалах
            </button>
        </div>

        {{-- PRO --}}
        <div class="bg-white border-2 border-gray-200 rounded-2xl p-8 flex flex-col">
            <div class="text-nsma-red font-bold text-sm tracking-widest mb-2">TIER 3</div>
            <h3 class="text-2xl font-bold text-nsma-dark mb-1">Pro</h3>
            <p class="text-sm text-nsma-grey mb-4">Full advisory + 3-сар follow-up</p>
            <div class="text-4xl font-black text-nsma-dark mb-1">₮2,490,000</div>
            <p class="text-xs text-nsma-grey mb-6">4 цагийн advisory + 3-сар</p>

            <ul class="space-y-2 mb-6 flex-grow">
                <li class="flex items-start gap-2 text-sm"><span class="text-nsma-red font-bold">✓</span> 24 хуудас бүрэн template</li>
                <li class="flex items-start gap-2 text-sm"><span class="text-nsma-red font-bold">✓</span> 4 цагийн advisory (3 session)</li>
                <li class="flex items-start gap-2 text-sm"><span class="text-nsma-red font-bold">✓</span> 3 сарын дараа 1 цагийн review</li>
                <li class="flex items-start gap-2 text-sm"><span class="text-nsma-red font-bold">✓</span> Strategic narrative, Persona deep-dive</li>
                <li class="flex items-start gap-2 text-sm"><span class="text-nsma-red font-bold">✓</span> Customer journey + KPI framework</li>
            </ul>

            <div class="bg-nsma-light p-3 rounded-lg mb-4">
                <div class="text-xs font-bold text-nsma-dark mb-1">Хэнд тохиромжтой?</div>
                <p class="text-xs text-nsma-grey">₮5М+ маркетингийн зардалтай, серьез стратеги хэрэгтэй компани</p>
            </div>

            <div class="mb-3"></div>

            <button @click="open = true; tier = 'pro'; tierLabel = 'Pro (₮2,490,000)'"
                    class="w-full bg-nsma-red text-white font-bold py-3 rounded-lg hover:bg-nsma-red-dark">
                Pro захиалах
            </button>
        </div>

        {{-- ORDER MODAL --}}
        <div x-show="open" x-cloak
             class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4"
             @click.self="open = false">
            <div class="bg-white rounded-2xl max-w-md w-full p-6 max-h-[90vh] overflow-y-auto">
                <div class="flex justify-between items-start mb-4">
                    <div>
                        <div class="text-xs text-nsma-red font-bold tracking-widest">ЗАХИАЛГА</div>
                        <h3 class="text-xl font-bold text-nsma-dark" x-text="tierLabel"></h3>
                    </div>
                    <button @click="open = false" class="text-nsma-grey text-2xl leading-none">×</button>
                </div>

                <form @submit.prevent="
                    const r = await window.ajaxSubmit($event.target);
                    if (r.ok) {
                        window.showToast(r.data.message, 'success');
                        $event.target.reset();
                        open = false;
                    } else {
                        window.showToast(r.data.message || 'Алдаа гарлаа', 'error');
                    }
                " action="{{ route('templates.order') }}" method="POST" class="space-y-3">
                    @csrf
                    <input type="hidden" name="tier" :value="tier">

                    <div>
                        <label class="block text-sm font-semibold text-nsma-dark mb-1">Таны нэр *</label>
                        <input type="text" name="name" required class="input-field">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-nsma-dark mb-1">Email *</label>
                        <input type="email" name="email" required class="input-field">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-nsma-dark mb-1">Утас *</label>
                        <input type="text" name="phone" required class="input-field">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-nsma-dark mb-1">Бизнесийн нэр</label>
                        <input type="text" name="business_name" class="input-field">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-nsma-dark mb-1">Нэмэлт мэдээлэл</label>
                        <textarea name="notes" rows="3" class="input-field" placeholder="Юу хийх гэж байгаа, ямар хугацаатай вэ?"></textarea>
                    </div>
                    <button type="submit" class="w-full bg-nsma-red text-white font-bold py-3 rounded-lg hover:bg-nsma-red-dark">
                        Захиалга илгээх
                    </button>
                    <p class="text-xs text-nsma-grey text-center">24 цагт холбоо тогтооно.</p>
                </form>
            </div>
        </div>
    </div>
</section>

{{-- COMPARISON --}}
<section class="py-12 bg-nsma-light">
    <div class="max-w-5xl mx-auto px-4 lg:px-8">
        <h2 class="text-3xl font-bold text-nsma-dark text-center mb-8">Tier-ийг харьцуулах</h2>
        <div class="bg-white rounded-2xl shadow overflow-hidden">
            <table class="w-full text-sm">
                <thead class="bg-nsma-red text-white">
                    <tr>
                        <th class="text-left p-4">Шинж чанар</th>
                        <th class="text-center p-4">Lite</th>
                        <th class="text-center p-4">Standard</th>
                        <th class="text-center p-4">Pro</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    <tr><td class="p-4 font-semibold">Үнэ</td><td class="text-center p-4">₮290K</td><td class="text-center p-4">₮890K</td><td class="text-center p-4">₮2,490K</td></tr>
                    <tr><td class="p-4 font-semibold">Хуудас</td><td class="text-center p-4">13</td><td class="text-center p-4">18</td><td class="text-center p-4">24</td></tr>
                    <tr><td class="p-4 font-semibold">Зөвлөхийн цаг</td><td class="text-center p-4">—</td><td class="text-center p-4">2 цаг</td><td class="text-center p-4">4+1 цаг</td></tr>
                    <tr><td class="p-4 font-semibold">Live workshop</td><td class="text-center p-4">—</td><td class="text-center p-4">✓</td><td class="text-center p-4">✓ × 3</td></tr>
                    <tr><td class="p-4 font-semibold">3-сарын follow-up</td><td class="text-center p-4">—</td><td class="text-center p-4">—</td><td class="text-center p-4">✓</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</section>

{{-- CTA TO SURVEY --}}
<section class="py-12 bg-white text-center">
    <div class="max-w-3xl mx-auto px-4 lg:px-8">
        <h2 class="text-2xl font-bold text-nsma-dark mb-4">Эргэлзэж байна уу?</h2>
        <p class="text-nsma-grey mb-6">10-минутын онлайн оношлогооны формыг бөглөж, танай бизнест яг тохирох tier-ийг үнэгүй мэдэх боломжтой.</p>
        <a href="{{ route('survey') }}" class="bg-nsma-dark text-white font-semibold px-6 py-3 rounded-full hover:bg-nsma-darker">
            10-минутын оношлогоо эхлэх →
        </a>
    </div>
</section>
@endsection

@push('head')
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.5/dist/cdn.min.js"></script>
<style>[x-cloak] { display: none !important; }</style>
@endpush
