<?php $__env->startSection('title', $siteSettings['site_name'] . ' — Брэндийг хөгжүүлж, бизнесийг өсгөнө'); ?>

<?php $__env->startSection('content'); ?>


<section class="relative bg-white overflow-hidden">
    <div class="max-w-7xl mx-auto px-4 lg:px-8 py-12 lg:py-20">
        <div class="grid lg:grid-cols-12 gap-8 lg:gap-12 items-center">

            
            <div class="lg:col-span-5 relative">
                <div class="absolute -left-4 top-2 w-1 h-32 bg-nsma-red"></div>
                <h1 class="text-3xl sm:text-4xl lg:text-5xl xl:text-6xl font-black leading-[1.1] mb-6 tracking-tight">
                    <?php if($hero): ?>
                        <?php echo e($hero->title_line_1); ?><br>
                        <span class="text-nsma-red"><?php echo e($hero->title_line_2); ?></span><br>
                        <?php echo e($hero->title_line_3); ?>

                    <?php else: ?>
                        БРЭНДИЙГ ХӨГЖҮҮЛЖ,<br>
                        <span class="text-nsma-red">БИЗНЕСИЙГ ӨСГӨЖ,</span><br>
                        ҮР ДҮН БҮТЭЭНЭ.
                    <?php endif; ?>
                </h1>
                <p class="text-gray-600 mb-8 max-w-md leading-relaxed">
                    <?php echo e($hero->description ?? 'Стратеги, бүтээлч байдал, технологийн шийдлээр брэндүүдэд бодит үр дүн авч ирдэг.'); ?>

                </p>
                <div class="flex flex-wrap items-center gap-4">
                    <a href="<?php echo e($hero->button_link ?? route('services.index')); ?>"
                       class="inline-flex items-center gap-2 bg-nsma-red text-white font-semibold px-6 py-3 rounded-md hover:bg-red-600 transition shadow-lg shadow-nsma-red/30">
                        <?php echo e($hero->button_text ?? 'Үйлчилгээ үзэх'); ?>

                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                    </a>
                    <?php if($hero?->video_url): ?>
                    <button type="button" onclick="document.getElementById('video-modal').classList.remove('hidden')"
                            class="inline-flex items-center gap-2 text-nsma-dark font-semibold hover:text-nsma-red">
                        <span class="w-10 h-10 rounded-full border-2 border-nsma-red flex items-center justify-center text-nsma-red">
                            <svg class="w-4 h-4 ml-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                        </span>
                        Видео үзэх
                    </button>
                    <?php endif; ?>
                </div>
            </div>

            
            <div class="lg:col-span-7 relative">
                <div class="grid grid-cols-3 gap-3" style="transform: skewY(-3deg);">
                    <?php
                        $images = $hero?->sideImageUrls() ?? [];
                        if (count($images) < 3) {
                            $images = [
                                asset('images/hero/1.jpg'),
                                asset('images/hero/2.jpg'),
                                asset('images/hero/3.jpg'),
                            ];
                        }
                    ?>

                    <div class="space-y-3">
                        <div class="aspect-[4/5] rounded-lg overflow-hidden bg-gray-200">
                            <img src="<?php echo e($images[0]); ?>" alt="" class="w-full h-full object-cover" onerror="this.style.background='linear-gradient(135deg,#0F1729,#1F2937)'; this.removeAttribute('src')">
                        </div>
                    </div>
                    <div class="space-y-3 mt-6">
                        <div class="aspect-[3/4] rounded-lg overflow-hidden bg-gray-200">
                            <img src="<?php echo e($images[1]); ?>" alt="" class="w-full h-full object-cover" onerror="this.style.background='linear-gradient(135deg,#FF3D3D,#0F1729)'; this.removeAttribute('src')">
                        </div>
                    </div>
                    <div class="space-y-3">
                        <div class="aspect-[4/5] rounded-lg overflow-hidden bg-gray-200">
                            <img src="<?php echo e($images[2]); ?>" alt="" class="w-full h-full object-cover" onerror="this.style.background='linear-gradient(135deg,#1F2937,#FF3D3D)'; this.removeAttribute('src')">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="bg-gray-50 py-8 lg:py-10">
    <div class="max-w-7xl mx-auto px-4 lg:px-8">
        <div class="flex flex-col lg:flex-row items-center gap-6 lg:gap-12">
            <div class="text-xs font-bold tracking-wide text-gray-500 uppercase whitespace-nowrap text-center lg:text-left">
                ИДЭВХТЭЙ ХАМТРАН<br>АЖИЛЛАГЧ БРЭНДҮҮД
            </div>
            <div class="flex-1 flex flex-wrap items-center justify-center lg:justify-start gap-x-10 gap-y-4">
                <?php $__currentLoopData = $partners; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $partner): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <a href="<?php echo e($partner->website ?? '#'); ?>" target="_blank" rel="noopener" class="transition hover:scale-105">
                        <img src="<?php echo e($partner->logoUrl()); ?>" alt="<?php echo e($partner->name); ?>" class="h-12 lg:h-16 object-contain" onerror="this.style.display='none'">
                    </a>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
            <a href="#partners" class="text-sm text-nsma-red font-semibold whitespace-nowrap inline-flex items-center gap-1">
                Бусад харилцагчид
                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
            </a>
        </div>
    </div>
</section>


<section class="py-16 lg:py-24 bg-white">
    <div class="max-w-7xl mx-auto px-4 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl lg:text-4xl font-black mb-3 tracking-tight">МАНАЙ ҮЙЛЧИЛГЭЭ</h2>
            <div class="w-12 h-1 bg-nsma-red mx-auto"></div>
        </div>

        <?php
            // Үйлчилгээний гарчгийн түлхүүр үгэнд тохирсон icon (heroicons outline)
            $serviceIcons = [
                'судалгаа'   => 'm21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z',
                'стратег'    => 'M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z',
                'төлөвлөл'   => 'M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z',
                'брэнд'      => 'M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456Z',
                'дижитал'    => 'M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3',
                'контент'    => 'm16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10',
                'сурталчилгаа'=> 'M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 1 1 0-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 0 1-1.44-4.282m3.102.069a18.03 18.03 0 0 1-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 0 1 8.835 2.535M10.34 6.66a23.847 23.847 0 0 0 8.835-2.535m0 0A23.74 23.74 0 0 0 18.795 3m.38 1.125a23.91 23.91 0 0 1 1.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 0 0 1.014-5.395M14.25 9a23.848 23.848 0 0 1 0 6',
                'дизайн'     => 'm2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Z',
                'продакшн'   => 'm2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Z',
                'программ'   => 'm6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z',
                'хангамж'    => 'm6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z',
                'маркетинг'  => 'M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3',
            ];
            $defaultIcon = 'M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z';
        ?>
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-10">
            <?php $__currentLoopData = $services; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $service): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?php
                    // Гарчгийн түлхүүр үгээр тохирох icon-г олох
                    $matchedIcon = $defaultIcon;
                    $titleLower = mb_strtolower($service->title);
                    foreach ($serviceIcons as $keyword => $path) {
                        if (mb_strpos($titleLower, $keyword) !== false) {
                            $matchedIcon = $path;
                            break;
                        }
                    }
                ?>
                <a href="<?php echo e(route('services.show', $service->slug)); ?>" class="group text-center">
                    <div class="aspect-square max-w-[120px] mx-auto mb-4 flex items-center justify-center rounded-full bg-gray-50 group-hover:bg-nsma-red/10 transition">
                        <?php if($service->iconImageUrl()): ?>
                            <img src="<?php echo e($service->iconImageUrl()); ?>" alt="" class="w-12 h-12 object-contain">
                        <?php else: ?>
                            <svg class="w-12 h-12 text-nsma-red" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="<?php echo e($matchedIcon); ?>"/></svg>
                        <?php endif; ?>
                    </div>
                    <h3 class="text-sm lg:text-base font-semibold group-hover:text-nsma-red transition"><?php echo e($service->title); ?></h3>
                </a>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
</section>


<section class="bg-nsma-dark text-white py-16 lg:py-20 relative overflow-hidden">
    <div class="absolute inset-0 opacity-30">
        <svg class="absolute right-0 top-0 w-1/2 h-full" preserveAspectRatio="none" viewBox="0 0 800 400" fill="none">
            <path d="M0,200 Q200,100 400,200 T800,200" stroke="#FF3D3D" stroke-width="1" fill="none"/>
            <path d="M0,250 Q200,150 400,250 T800,250" stroke="#FF3D3D" stroke-width="1" fill="none"/>
        </svg>
    </div>

    <div class="relative max-w-7xl mx-auto px-4 lg:px-8">
        <h2 class="text-2xl lg:text-3xl font-black mb-12 tracking-tight">БИД АЖЛАА ИНГЭЖ ЯВУУЛДАГ</h2>

        <div class="grid grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
            <?php $__currentLoopData = $workSteps; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $step): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="flex items-start gap-4">
                    <div class="flex-shrink-0">
                        <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                    </div>
                    <div class="flex-1">
                        <div class="flex items-baseline gap-2 mb-2">
                            <span class="text-3xl font-black text-nsma-red"><?php echo e($step->step_number); ?></span>
                            <span class="text-2xl font-light text-gray-500"><?php echo e($step->step_number); ?></span>
                        </div>
                        <h3 class="font-semibold text-base lg:text-lg leading-tight"><?php echo e($step->title); ?></h3>
                        <?php if($step->description): ?>
                            <p class="mt-1 text-sm text-gray-400"><?php echo e($step->description); ?></p>
                        <?php endif; ?>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
</section>


<section class="py-16 lg:py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 lg:px-8">
        <div class="text-center mb-10">
            <h2 class="text-3xl lg:text-4xl font-black mb-3 tracking-tight">ХИЙСЭН АЖЛУУД</h2>
            <div class="w-12 h-1 bg-nsma-red mx-auto"></div>
        </div>

        
        <div class="flex flex-wrap items-center justify-center gap-2 mb-10" id="portfolio-tabs">
            <button data-category="" class="portfolio-tab active px-6 py-2 rounded-full text-sm font-semibold bg-nsma-red text-white transition">Бүгд</button>
            <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <button data-category="<?php echo e($cat->slug); ?>" class="portfolio-tab px-6 py-2 rounded-full text-sm font-semibold bg-gray-100 text-nsma-dark hover:bg-gray-200 transition"><?php echo e($cat->name); ?></button>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>

        
        <div id="portfolio-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
            <?php $__currentLoopData = $portfolios; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $p): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <a href="<?php echo e(route('portfolio.show', $p->slug)); ?>" class="group relative block rounded-xl overflow-hidden aspect-[4/5] bg-gray-200" data-category="<?php echo e($p->category->slug ?? ''); ?>">
                    <img src="<?php echo e($p->coverImageUrl()); ?>" alt="<?php echo e($p->title); ?>" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" onerror="this.style.background='linear-gradient(135deg,#0F1729,#FF3D3D)'; this.removeAttribute('src')">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent"></div>
                    <div class="absolute bottom-0 left-0 right-0 p-5 text-white">
                        <h3 class="font-bold text-sm lg:text-base mb-1 leading-tight"><?php echo e($p->title); ?></h3>
                        <?php if($p->subtitle): ?>
                            <p class="text-xs text-gray-300 mb-2"><?php echo e($p->subtitle); ?></p>
                        <?php endif; ?>
                        <div class="flex items-center justify-between">
                            <span class="text-xs text-gray-400"><?php echo e($p->category->name ?? ''); ?></span>
                            <span class="w-7 h-7 rounded-full bg-white/90 flex items-center justify-center text-nsma-dark group-hover:bg-nsma-red group-hover:text-white transition">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                            </span>
                        </div>
                    </div>
                </a>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>

        <?php if($portfolios->count() === 0): ?>
            <p class="text-center text-gray-500 py-12">Одоогоор ажил байхгүй байна.</p>
        <?php endif; ?>
    </div>
</section>


<section id="partners" class="py-12 lg:py-16 bg-white border-t border-gray-100">
    <div class="max-w-7xl mx-auto px-4 lg:px-8">
        <h3 class="text-xs font-bold tracking-wide text-gray-500 uppercase mb-8">ХАМТРАН АЖИЛЛАДАГ БАЙГУУЛЛАГУУД</h3>
        <div class="flex flex-wrap items-center justify-center lg:justify-between gap-x-12 gap-y-8">
            <?php $__currentLoopData = $allPartners; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $partner): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <a href="<?php echo e($partner->website ?? '#'); ?>" target="_blank" rel="noopener" class="transition hover:scale-105">
                    <img src="<?php echo e($partner->logoUrl()); ?>" alt="<?php echo e($partner->name); ?>" class="h-14 lg:h-20 object-contain" onerror="this.style.display='none'">
                </a>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
</section>

<?php $__env->startPush('scripts'); ?>
<script>
    // Portfolio category filter (AJAX)
    document.querySelectorAll('.portfolio-tab').forEach(tab => {
        tab.addEventListener('click', async () => {
            // active class swap
            document.querySelectorAll('.portfolio-tab').forEach(t => {
                t.classList.remove('bg-nsma-red', 'text-white', 'active');
                t.classList.add('bg-gray-100', 'text-nsma-dark');
            });
            tab.classList.add('bg-nsma-red', 'text-white', 'active');
            tab.classList.remove('bg-gray-100', 'text-nsma-dark');

            const category = tab.dataset.category;
            const grid = document.getElementById('portfolio-grid');
            grid.style.opacity = '0.4';

            try {
                const url = '<?php echo e(route('portfolio.index')); ?>' + (category ? `?category=${category}` : '');
                const res = await fetch(url, {
                    headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
                });
                const data = await res.json();
                if (data.html) {
                    grid.innerHTML = data.html;
                }
            } catch (e) {
                console.error(e);
            }
            grid.style.opacity = '1';
        });
    });
</script>
<?php $__env->stopPush(); ?>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.frontend', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\uninsma.mn\resources\views/frontend/home.blade.php ENDPATH**/ ?>