@php
    $iconSvg = function (string $name, string $class = 'h-6 w-6') {
        $paths = [
            'server' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7h16M4 12h16M4 17h16M7 7h.01M7 12h.01M7 17h.01"/>',
            'design' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 9l-6 6m0 0H5v-4l6-6c2-2 5-2 7-2 0 2 0 5-2 7l-6 6z"/>',
            'support' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 13a8 8 0 1116 0v4a2 2 0 01-2 2h-2v-6h4M4 13v4a2 2 0 002 2h2v-6H4"/>',
            'shield' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3l7 4v5c0 5-3.5 8-7 9-3.5-1-7-4-7-9V7l7-4z"/>',
            '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['check']) . '</svg>';
    };

    $stats = [
        ['value' => '+1,200', 'label' => 'عميل ومشروع'],
        ['value' => '+850', 'label' => 'موقع ومتجر'],
        ['value' => '99.9%', 'label' => 'استهداف جاهزية'],
        ['value' => '24/7', 'label' => 'متابعة ودعم'],
    ];

    $pillars = [
        ['icon' => 'server', 'title' => 'استضافة موثوقة', 'text' => 'نركز على سرعة التحميل، الاستقرار، النسخ الاحتياطي، وإعدادات أمان واضحة من البداية.'],
        ['icon' => 'design', 'title' => 'تصميم يبيع الثقة', 'text' => 'نبني صفحات مفهومة ورسائل مقنعة وتجربة مناسبة للجوال حتى لا يبدو موقعك كقالب جاهز.'],
        ['icon' => 'support', 'title' => 'دعم بعد الإطلاق', 'text' => 'لا ينتهي دورنا عند التسليم؛ نساعدك في التشغيل، التعديلات، والمشاكل اليومية.'],
        ['icon' => 'shield', 'title' => 'حماية واستمرارية', 'text' => 'نراجع التحديثات، الصلاحيات، النسخ، ومؤشرات الأداء لتقليل الأعطال والمخاطر.'],
    ];

    $values = [
        ['title' => 'وضوح كامل', 'text' => 'نكتب نطاق العمل، المخرجات، والتكلفة بشكل مفهوم قبل بدء التنفيذ.'],
        ['title' => 'تنفيذ قابل للقياس', 'text' => 'كل صفحة أو خدمة يجب أن تخدم هدفًا: استفسار، طلب، شراء، أو ثقة.'],
        ['title' => 'جودة قبل الإطلاق', 'text' => 'نراجع الاستجابة، الجوال، النماذج، الروابط، والسرعة قبل تسليم العمل.'],
    ];
@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">
                    ZLHOST ليست مجرد مزود استضافة أو منفذ تصميم. نحن فريق تقني يجمع البنية التحتية، الواجهة، المحتوى، والدعم في تجربة واحدة واضحة تساعد العميل على إطلاق موقعه بثقة.
                </p>
                <div class="mt-7 flex flex-wrap gap-3">
                    <a href="{{ route('services.index') }}" class="btn btn-primary">استكشف خدماتنا</a>
                    <a href="{{ route('contact') }}" class="btn btn-secondary">تحدث معنا</a>
                </div>
            </div>
            <div class="zl-visual-panel">
                <div class="grid grid-cols-2 gap-3">
                    @foreach($stats as $stat)
                        <div class="rounded-2xl border border-[#e8edf2] bg-white p-5 text-center shadow-soft">
                            <p class="text-3xl font-black text-brand-700">{{ $stat['value'] }}</p>
                            <p class="mt-2 text-sm font-bold text-navy-600">{{ $stat['label'] }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    <section class="zl-public-section">
        <div class="grid lg:grid-cols-[.85fr_1fr] gap-8 items-start">
            <div class="zl-public-card p-6 md:p-8">
                <span class="zl-public-kicker">قصتنا</span>
                <h2 class="mt-3 text-2xl md:text-3xl font-black text-navy-900">بدأنا من مشكلة واضحة: مواقع كثيرة تبدو موجودة لكنها لا تبني ثقة</h2>
                <div class="mt-4 space-y-4 text-sm md:text-base leading-8 text-navy-600">
                    <p>العميل لا يحكم على مشروعك من الخدمة فقط، بل من سرعة موقعك، وضوح الرسالة، جودة التصميم، وسهولة التواصل. لذلك بنينا ZLHOST لتجمع بين الاستضافة والتصميم والصيانة في مكان واحد.</p>
                    <p>نؤمن أن الموقع الجيد ليس مجرد صفحات جميلة، بل نظام عمل: بنية مستقرة، واجهة مفهومة، نماذج تعمل، محتوى يشرح القيمة، وفريق يتابع بعد الإطلاق.</p>
                </div>
            </div>

            <div class="grid sm:grid-cols-2 gap-5">
                @foreach($pillars as $pillar)
                    <article class="zl-trust-card">
                        <span class="zl-pixel-icon mb-4 !h-12 !w-12">{!! $iconSvg($pillar['icon']) !!}</span>
                        <h3 class="font-black text-navy-900">{{ $pillar['title'] }}</h3>
                        <p class="mt-2 text-sm leading-7 text-navy-600">{{ $pillar['text'] }}</p>
                    </article>
                @endforeach
            </div>
        </div>
    </section>

    <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(['تحليل الاحتياج', 'خطة ومحتوى', 'تنفيذ واختبار', 'إطلاق ومتابعة'] as $step)
                    <div class="zl-process-step">
                        <span class="zl-process-number">{{ $loop->iteration }}</span>
                        <h3 class="font-black text-navy-900">{{ $step }}</h3>
                        <p class="mt-2 text-sm leading-7 text-navy-600">
                            @if($loop->iteration === 1)
                                نفهم الخدمة والجمهور والمشكلة قبل اقتراح أي حل.
                            @elseif($loop->iteration === 2)
                                نرتب الصفحات والمخرجات ونحدد الأولويات بوضوح.
                            @elseif($loop->iteration === 3)
                                ننفذ ونراجع الجوال والسرعة والنماذج والروابط.
                            @else
                                نطلق العمل ونبقى قريبين لمعالجة التحسينات.
                            @endif
                        </p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="zl-public-section">
        <x-section-title eyebrow="قيمنا" title="ما الذي يجعل العمل معنا مختلفًا؟" description="نحاول أن نجعل كل قرار تقني مفهومًا للعميل، وكل مخرج قابلًا للاستخدام الحقيقي." />
        <div class="grid md:grid-cols-3 gap-5">
            @foreach($values as $value)
                <article class="zl-feature-card">
                    <span class="zl-check-icon mb-4 !h-10 !w-10">{!! $iconSvg('check', 'h-5 w-5') !!}</span>
                    <h3 class="font-black text-navy-900">{{ $value['title'] }}</h3>
                    <p class="mt-2 text-sm leading-7 text-navy-600">{{ $value['text'] }}</p>
                </article>
            @endforeach
        </div>
    </section>

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