@php
    $iconSvg = function (string $name, string $class = 'h-6 w-6') {
        $paths = [
            'screen' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5h16v10H4zM8 19h8M10 15l-1 4M14 15l1 4"/>',
            'shop' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 10h16l-1-5H5l-1 5zM5 10v9h14v-9M9 19v-5h6v5"/>',
            'target' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v2M12 18v2M4 12h2M18 12h2"/><circle cx="12" cy="12" r="6" stroke-width="2"/><circle cx="12" cy="12" r="2" stroke-width="2"/>',
            'brand' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3l7 4v10l-7 4-7-4V7l7-4zM12 3v18M5 7l7 4 7-4"/>',
            'ui' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h10M4 14h16M4 18h7"/>',
            'code' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l-4 3 4 3M16 9l4 3-4 3M14 5l-4 14"/>',
            'check' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>',
        ];

        return '<svg class="' . $class . '" fill="none" viewBox="0 0 24 24" stroke="currentColor">' . ($paths[$name] ?? $paths['screen']) . '</svg>';
    };

    $services = [
        ['icon' => 'screen', 'title' => 'تصميم مواقع الشركات', 'text' => 'واجهة احترافية تعرّف بنشاطك وخدماتك وتبني ثقة الزائر من أول زيارة.', 'deliverables' => ['هيكل صفحات واضح', 'تصميم متجاوب', 'ربط نموذج التواصل']],
        ['icon' => 'shop', 'title' => 'تصميم المتاجر الإلكترونية', 'text' => 'تجربة شراء منظمة تعرض المنتجات بوضوح وتقلل التشتت قبل إتمام الطلب.', 'deliverables' => ['صفحات منتجات', 'سلة وطلب', 'تهيئة تجربة الدفع اليدوي أو التكاملات']],
        ['icon' => 'target', 'title' => 'صفحات الهبوط', 'text' => 'صفحات مركزة للحملات والإعلانات بهدف تحويل الزائر إلى عميل محتمل.', 'deliverables' => ['رسالة تسويقية قوية', 'CTA واضح', 'قياس وتحسين']],
        ['icon' => 'brand', 'title' => 'هوية بصرية وواجهة موحدة', 'text' => 'ألوان وخطوط ومكونات واجهة تجعل موقعك ثابت الهوية في كل صفحة.', 'deliverables' => ['نظام ألوان', 'مكونات UI', 'إرشادات استخدام']],
        ['icon' => 'ui', 'title' => 'تحسين تجربة المستخدم UI/UX', 'text' => 'إعادة ترتيب الصفحات والمسارات لتقليل الاحتكاك وزيادة وضوح قرار الشراء.', 'deliverables' => ['تحليل الصفحات', 'Wireframes', 'تحسين رحلة العميل']],
        ['icon' => 'code', 'title' => 'تطوير أنظمة مخصصة', 'text' => 'لوحات تحكم وتكاملات وأدوات داخلية تناسب طريقة عملك بدل حلول جاهزة محدودة.', 'deliverables' => ['تحليل المتطلبات', 'تطوير مخصص', 'اختبار وتسليم']],
    ];

    $process = [
        ['title' => 'اكتشاف وتحليل', 'text' => 'نفهم نشاطك، جمهورك، أهداف الموقع، والمشاكل التي يجب أن يحلها التصميم.'],
        ['title' => 'هيكلة المحتوى', 'text' => 'نرتب الصفحات والرسائل والعروض بحيث يعرف الزائر ماذا تقدم ولماذا يثق بك.'],
        ['title' => 'تصميم الواجهة', 'text' => 'نبني واجهة متناسقة مع الهوية، سهلة القراءة، ومهيأة للجوال والكمبيوتر.'],
        ['title' => 'تطوير وإطلاق', 'text' => 'نحوّل التصميم إلى موقع سريع وآمن، ثم نختبره ونجهزه للإطلاق الفعلي.'],
    ];
    $user = auth()->user();
    $isStaff = $user && method_exists($user, 'isStaff') && $user->isStaff();
    $startHref = ! $user ? route('register') : ($isStaff ? url('/admin') : route('customer.orders.create'));
    $startLabel = ! $user ? 'إنشاء حساب وطلب التصميم' : ($isStaff ? 'لوحة التحكم' : 'طلب خدمة جديد');
@endphp

<x-layouts.app title="خدمات التصميم">
    <section class="zl-page-hero">
        <div class="zl-page-hero-grid">
            <div>
                <span class="zl-page-kicker">تصميم مواقع ومتاجر</span>
                <h1 class="zl-page-title">تصميم رقمي يبني الثقة ويحوّل الزوار إلى عملاء</h1>
                <p class="zl-page-description">
                    لا نصمم صفحات جميلة فقط؛ نبني تجربة كاملة توضّح قيمة مشروعك، ترتب خدماتك، وتدفع العميل لاتخاذ خطوة واضحة: طلب عرض سعر، تواصل، أو شراء.
                </p>
                <div class="mt-7 flex flex-wrap gap-3">
                    <a href="{{ $startHref }}" class="btn btn-primary">{{ $startLabel }}</a>
                    <a href="{{ route('quote.show') }}" class="btn btn-gold">عرض تصميم مخصص</a>
                    <a href="{{ route('portfolio.index') }}" class="btn btn-secondary">شاهد أعمالنا</a>
                </div>
                <div class="zl-hero-proof">
                    <div class="zl-hero-proof-item">تصميم متجاوب لكل الشاشات</div>
                    <div class="zl-hero-proof-item">محتوى موجه للتحويل</div>
                    <div class="zl-hero-proof-item">استضافة ودعم بعد الإطلاق</div>
                </div>
            </div>

            <div class="zl-visual-panel">
                <div class="zl-visual-screen">
                    <div class="flex items-center gap-2 text-xs text-white/70">
                        <span class="h-3 w-3 rounded-full bg-red-300"></span>
                        <span class="h-3 w-3 rounded-full bg-gold-300"></span>
                        <span class="h-3 w-3 rounded-full bg-brand-300"></span>
                    </div>
                    <div class="mt-8 grid gap-3">
                        <div class="h-5 w-2/3 rounded-full bg-white/80"></div>
                        <div class="h-3 w-full rounded-full bg-white/30"></div>
                        <div class="h-3 w-5/6 rounded-full bg-white/30"></div>
                    </div>
                    <div class="zl-visual-window">
                        <div class="grid grid-cols-3 gap-3">
                            <div class="h-20 rounded-xl bg-brand-50"></div>
                            <div class="h-20 rounded-xl bg-gold-50"></div>
                            <div class="h-20 rounded-xl bg-navy-50"></div>
                        </div>
                        <div class="mt-4 h-10 rounded-xl bg-brand-600"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="zl-public-section">
        <x-section-title eyebrow="خدمات التصميم" title="كل ما يحتاجه مشروعك ليظهر بشكل احترافي" description="نغطي رحلة التصميم كاملة من الفكرة والهوية حتى الموقع الجاهز للإطلاق والتحسين." />
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
            @foreach($services as $service)
                <article class="zl-feature-card">
                    <div class="zl-feature-media">
                        <span class="zl-pixel-icon !h-16 !w-16">{!! $iconSvg($service['icon'], 'h-8 w-8') !!}</span>
                    </div>
                    <h2 class="text-xl font-black text-navy-900">{{ $service['title'] }}</h2>
                    <p class="mt-3 text-sm leading-7 text-navy-600">{{ $service['text'] }}</p>
                    <ul class="mt-4 space-y-2 text-sm text-navy-700">
                        @foreach($service['deliverables'] as $item)
                            <li class="flex items-center gap-2"><span class="zl-check-icon">{!! $iconSvg('check', 'h-3.5 w-3.5') !!}</span>{{ $item }}</li>
                        @endforeach
                    </ul>
                </article>
            @endforeach
        </div>
    </section>

    @if($designServices->isNotEmpty())
        <section class="zl-public-section !pt-0">
            <div class="zl-service-band">
                <div class="mb-6 flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
                    <div>
                        <span class="zl-public-kicker">من لوحة الإدارة</span>
                        <h2 class="mt-3 text-2xl font-black text-navy-900 md:text-3xl">خدمات تصميم قابلة للتعديل</h2>
                        <p class="mt-2 max-w-2xl text-sm leading-7 text-navy-600">هذه الخدمات تأتي من كتالوج الإدارة، ويمكنك تعديل النصوص والصور من لوحة التحكم.</p>
                    </div>
                    <a href="{{ route('services.index') }}" class="btn btn-secondary btn-sm">كل الخدمات</a>
                </div>
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
                    @foreach($designServices as $service)
                        <x-service-card :service="$service" />
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <section class="bg-white/70 py-12 border-y border-[#e8edf2]">
        <div class="zl-pixel-shell">
            <x-section-title eyebrow="منهجية العمل" title="خطوات واضحة من أول اجتماع حتى الإطلاق" />
            <div class="grid md:grid-cols-4 gap-5">
                @foreach($process as $index => $step)
                    <article class="zl-process-step">
                        <span class="zl-process-number">{{ $index + 1 }}</span>
                        <h3 class="font-black text-navy-900">{{ $step['title'] }}</h3>
                        <p class="mt-2 text-sm leading-7 text-navy-600">{{ $step['text'] }}</p>
                    </article>
                @endforeach
            </div>
        </div>
    </section>

    <section class="zl-public-section">
        <div class="grid lg:grid-cols-2 gap-6">
            <div class="zl-public-card p-6 md:p-8">
                <span class="zl-public-kicker">مناسب لمن؟</span>
                <h2 class="mt-3 text-2xl font-black text-navy-900">تصميم يخدم هدف العمل وليس الشكل فقط</h2>
                <p class="mt-3 leading-8 text-navy-600">نصمم للشركات التي تريد حضورًا موثوقًا، للمتاجر التي تحتاج تجربة شراء واضحة، ولمقدمي الخدمات الذين يريدون تحويل الزيارات إلى طلبات حقيقية.</p>
            </div>
            <div class="zl-public-card p-6 md:p-8 bg-gradient-to-br from-brand-50 to-white border-brand-200">
                <h3 class="text-xl font-black text-navy-900">ماذا تستلم؟</h3>
                <ul class="mt-4 grid gap-3 text-sm text-navy-700">
                    <li class="flex items-center gap-2"><span class="zl-check-icon">{!! $iconSvg('check', 'h-3.5 w-3.5') !!}</span>واجهة متجاوبة وسريعة التحميل.</li>
                    <li class="flex items-center gap-2"><span class="zl-check-icon">{!! $iconSvg('check', 'h-3.5 w-3.5') !!}</span>محتوى مرتب ورسائل تسويقية واضحة.</li>
                    <li class="flex items-center gap-2"><span class="zl-check-icon">{!! $iconSvg('check', 'h-3.5 w-3.5') !!}</span>تهيئة أساسية لمحركات البحث وتجربة الجوال.</li>
                    <li class="flex items-center gap-2"><span class="zl-check-icon">{!! $iconSvg('check', 'h-3.5 w-3.5') !!}</span>إطلاق على استضافة مستقرة مع دعم بعد التسليم.</li>
                </ul>
            </div>
        </div>
    </section>

    <x-cta-section />
</x-layouts.app>