@extends('layouts.public')
@section('title', config('app.name'))
@section('content')
<section class="bg-white">
    <div class="max-w-7xl mx-auto px-4 py-20 grid md:grid-cols-2 gap-10 items-center">
        <div>
            <p class="text-brand-600 font-semibold mb-3">{{ __('منصة تسويق رقمي احترافية') }}</p>
            <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4">{{ __('نمِّ حضورك على المنصات الاجتماعية بطريقة نظامية وآمنة') }}</h1>
            <p class="text-slate-600 mb-8">{{ __('حملات محتوى، إدارة إعلانات، وتحليلات — عبر مزودين معتمدين ومتوافقين مع سياسات المنصات.') }}</p>
            <div class="flex gap-3">
                <a href="{{ route('register') }}" class="px-6 py-3 rounded-xl bg-brand-600 text-white font-semibold">{{ __('ابدأ الآن') }}</a>
                <a href="{{ route('services') }}" class="px-6 py-3 rounded-xl border border-slate-200">{{ __('استعرض الخدمات') }}</a>
            </div>
        </div>
        <div class="grid grid-cols-2 gap-4">
            @foreach(['customers'=>'عملاء','orders'=>'طلبات','services'=>'خدمات','completed'=>'مكتمل'] as $k=>$label)
            <div class="rounded-2xl bg-slate-50 p-6 border border-slate-100">
                <div class="text-3xl font-bold text-brand-700">{{ number_format($stats[$k]) }}</div>
                <div class="text-slate-500 text-sm mt-1">{{ __($label) }}</div>
            </div>
            @endforeach
        </div>
    </div>
</section>
<section class="max-w-7xl mx-auto px-4 py-16">
    <h2 class="text-2xl font-bold mb-8">{{ __('التصنيفات') }}</h2>
    <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
        @foreach($categories as $cat)
            <a href="{{ route('services.category', $cat->slug) }}" class="rounded-2xl bg-white p-6 border border-slate-100 hover:shadow-md">
                <div class="font-semibold">{{ $cat->localizedName() }}</div>
                <p class="text-sm text-slate-500 mt-2">{{ \Illuminate\Support\Str::limit($cat->description_ar, 80) }}</p>
            </a>
        @endforeach
    </div>
</section>
<section class="bg-white py-16">
    <div class="max-w-7xl mx-auto px-4">
        <h2 class="text-2xl font-bold mb-8">{{ __('خدمات مميزة') }}</h2>
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-5">
            @foreach($featured as $s)
            <div class="rounded-2xl border border-slate-100 p-5">
                <div class="text-xs text-brand-600 mb-1">{{ $s->category?->localizedName() }}</div>
                <div class="font-semibold">{{ $s->localizedName() }}</div>
                <div class="mt-3 text-brand-700 font-bold">{{ number_format($s->price, 2) }} EGP</div>
            </div>
            @endforeach
        </div>
    </div>
</section>
<section class="max-w-7xl mx-auto px-4 py-16 grid md:grid-cols-3 gap-6">
    @foreach([
        ['1','أنشئ حساباً','سجّل وأضف رصيداً إلى محفظتك'],
        ['2','اختر الخدمة','خدمات تسويق نظامية حسب المنصة'],
        ['3','تابع التنفيذ','تتبع الحالة والفواتير من لوحة التحكم'],
    ] as $step)
    <div class="rounded-2xl bg-white p-6 border">
        <div class="w-10 h-10 rounded-full bg-brand-50 text-brand-700 flex items-center justify-center font-bold mb-3">{{ $step[0] }}</div>
        <h3 class="font-semibold mb-2">{{ __($step[1]) }}</h3>
        <p class="text-slate-500 text-sm">{{ __($step[2]) }}</p>
    </div>
    @endforeach
</section>
<section class="bg-brand-700 text-white py-14">
    <div class="max-w-7xl mx-auto px-4 flex flex-col md:flex-row items-center justify-between gap-6">
        <h2 class="text-2xl font-bold">{{ __('جاهز لإطلاق حملتك القادمة؟') }}</h2>
        <a href="{{ route('register') }}" class="px-6 py-3 bg-white text-brand-700 rounded-xl font-semibold">{{ __('إنشاء حساب') }}</a>
    </div>
</section>
@endsection