@extends('site.layout')

@section('title', ($platformName ?? 'MadarX').' — منصة AI عربية')

@section('body')
    <div class="pointer-events-none fixed inset-0 overflow-hidden opacity-40">
        <div class="absolute -left-32 top-20 h-96 w-96 rounded-full bg-violet-600 blur-[120px]"></div>
        <div class="absolute -right-20 bottom-20 h-80 w-80 rounded-full bg-teal-500 blur-[100px]"></div>
    </div>

    <header class="relative z-10 border-b border-white/10 bg-black/20 backdrop-blur-xl">
        <div class="mx-auto flex max-w-6xl items-center justify-between gap-4 px-6 py-4">
            <a href="{{ route('site.landing') }}" class="flex items-center gap-3">
                <img src="{{ $iconUrl ?? asset('images/madarx-icon.png') }}" alt="{{ $platformName ?? 'MadarX' }}" class="h-11 w-11 rounded-xl object-cover shadow-lg shadow-violet-500/20">
                <div>
                    <p class="text-lg font-extrabold tracking-tight">{{ $platformName ?? 'MadarX' }}</p>
                    <p class="text-xs text-teal-400/90">AI • WEB3 • FUTURE</p>
                </div>
            </a>
            <nav class="hidden items-center gap-6 text-sm font-medium text-zinc-300 md:flex">
                <a href="#features" class="hover:text-white">الميزات</a>
                <a href="#screenshots" class="hover:text-white">لقطات</a>
                <a href="#studio" class="hover:text-white">AI Studio</a>
                <a href="#pricing" class="hover:text-white">الأسعار</a>
                <a href="#download" class="hover:text-white">التحميل</a>
                <a href="{{ route('site.privacy') }}" class="hover:text-white">الخصوصية</a>
            </nav>
            <div class="flex items-center gap-2">
                <a href="{{ route('web.login') }}" class="hidden text-sm text-zinc-300 hover:text-white sm:inline">دخول</a>
                <a href="{{ route('web.register') }}" class="rounded-full bg-gradient-to-l from-violet-600 to-teal-500 px-4 py-2 text-xs font-bold text-white shadow-lg shadow-teal-500/20 sm:px-5 sm:text-sm">ابدأ الآن</a>
            </div>
        </div>
    </header>

    <main class="relative z-10">
        <section class="mx-auto max-w-6xl px-6 pb-20 pt-16 md:flex md:items-center md:gap-12 md:pt-24">
            <div class="flex-1">
                <p class="mb-3 inline-flex rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-semibold text-teal-300">{{ parse_url($appUrl ?? config('app.url'), PHP_URL_HOST) }} · Web3 × AI</p>
                <h1 class="text-4xl font-black leading-tight tracking-tight md:text-5xl">
                    {{ $platformName ?? 'MadarX' }} — منظومة ذكية لحياة رقمية أسهل
                </h1>
                <p class="mt-5 max-w-xl text-lg leading-relaxed text-zinc-400">
                    محادثات ذكية، استوديو صور، ذكاء ملفات، محفظة ومكافآت — منصة واحدة جاهزة للإطلاق على المتاجر.
                </p>
                <div class="mt-8 flex flex-wrap gap-3">
                    <a href="{{ route('web.register') }}" class="rounded-xl bg-teal-500 px-6 py-3 text-sm font-bold text-madar-950 hover:bg-teal-400">ابدأ الآن</a>
                    <a href="{{ route('web.login') }}" class="rounded-xl border border-white/15 bg-white/5 px-6 py-3 text-sm font-bold text-white hover:bg-white/10">استكشف الأدوات</a>
                </div>
                <div class="mt-8">
                    @include('site.partials.store-badges', [
                        'googlePlayUrl' => $googlePlayUrl ?? null,
                        'appleAppStoreUrl' => $appleAppStoreUrl ?? null,
                        'align' => 'start',
                    ])
                </div>
            </div>
            <div class="mt-12 flex-1 md:mt-0">
                <div class="rounded-3xl border border-white/10 bg-gradient-to-br from-white/10 to-transparent p-6 shadow-2xl backdrop-blur-2xl">
                    <img src="{{ $logoUrl ?? asset('images/madarx-logo.png') }}" alt="{{ $platformName ?? 'MadarX' }}" class="mx-auto mb-4 max-h-24 w-auto object-contain">
                    <p class="text-center text-xs font-bold uppercase tracking-widest text-violet-300">Madar AI Studio</p>
                    <div class="mt-4 space-y-3">
                        <div class="h-3 w-3/4 rounded-full bg-white/20"></div>
                        <div class="h-3 w-full rounded-full bg-white/10"></div>
                        <div class="mt-6 grid grid-cols-2 gap-3">
                            <div class="rounded-2xl bg-teal-500/20 p-4 text-center text-sm font-bold text-teal-200">Wallet</div>
                            <div class="rounded-2xl bg-violet-500/20 p-4 text-center text-sm font-bold text-violet-200">Rewards</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="features" class="border-t border-white/5 bg-black/20 py-20">
            <div class="mx-auto max-w-6xl px-6">
                <h2 class="text-center text-3xl font-black">لماذا {{ $platformName ?? 'MadarX' }}؟</h2>
                <p class="mx-auto mt-3 max-w-2xl text-center text-zinc-400">تجربة premium، أمان Sanctum، وواجهة عربية RTL بالكامل.</p>
                <div class="mt-12 grid gap-6 md:grid-cols-3">
                    @foreach ([['محادثة AI','نماذج قوية وحدود استخدام واضحة'],['محفظة ومكافآت','نقاط، مستويات، ومكافآت يومية'],['AI Studio','صور، ملفات، مساحة عمل، وقوالب']] as [$t,$d])
                        <div class="rounded-2xl border border-white/10 bg-white/5 p-6 backdrop-blur">
                            <h3 class="text-lg font-extrabold text-teal-300">{{ $t }}</h3>
                            <p class="mt-2 text-sm text-zinc-400">{{ $d }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        <section id="studio" class="py-20">
            <div class="mx-auto max-w-6xl px-6 md:flex md:items-center md:gap-10">
                <div class="flex-1">
                    <h2 class="text-3xl font-black">Madar AI Studio</h2>
                    <p class="mt-4 text-zinc-400">توليد صور، تحليل PDF وWord، مساحة عمل، ذاكرة ذكية، وقوالب جاهزة — بهوية عربية مستقبلية.</p>
                </div>
                <div class="mt-8 flex flex-1 flex-wrap gap-2 md:mt-0">
                    @foreach (['صور AI','ملفات','Workspace','Memory','قوالب'] as $chip)
                        <span class="rounded-full border border-white/10 bg-violet-500/10 px-4 py-2 text-sm font-semibold text-violet-200">{{ $chip }}</span>
                    @endforeach
                </div>
            </div>
        </section>

        <section id="screenshots" class="border-t border-white/5 py-20">
            <div class="mx-auto max-w-6xl px-6 text-center">
                <h2 class="text-3xl font-black">لقطات من التطبيق</h2>
                <p class="mt-3 text-zinc-400">حمّل التطبيق من المتاجر واستكشف التجربة الكاملة.</p>
                <div class="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                    @forelse ($screenshots ?? [] as $shot)
                        <figure class="group mx-auto w-full max-w-[220px] text-center">
                            <div class="aspect-[9/19] overflow-hidden rounded-2xl border border-white/15 bg-zinc-900 shadow-xl shadow-violet-900/30 ring-1 ring-white/10 transition group-hover:ring-teal-400/40">
                                <img src="{{ $shot->imageUrl() }}" alt="{{ $shot->caption ?? 'لقطة شاشة' }}"
                                     class="h-full w-full object-cover object-top" loading="lazy" width="220" height="470">
                            </div>
                            @if ($shot->caption)
                                <figcaption class="mt-3 text-sm font-medium text-teal-300/90">{{ $shot->caption }}</figcaption>
                            @endif
                        </figure>
                    @empty
                        @foreach (range(1, 3) as $i)
                            <div class="mx-auto aspect-[9/19] w-full max-w-[220px] rounded-2xl border border-dashed border-white/20 bg-white/5"></div>
                        @endforeach
                    @endforelse
                </div>
            </div>
        </section>

        <section id="pricing" class="border-t border-white/5 bg-black/25 py-20">
            <div class="mx-auto max-w-6xl px-6 text-center">
                <h2 class="text-3xl font-black">خطط مرنة</h2>
                <p class="mt-3 text-zinc-400">Free · Pro · Ultra — اختر ما يناسب نموك.</p>
            </div>
        </section>

        <section id="faq" class="py-20">
            <div class="mx-auto max-w-3xl px-6">
                <h2 class="text-center text-3xl font-black">أسئلة شائعة</h2>
                <dl class="mt-10 space-y-6 text-right">
                    <div class="rounded-2xl border border-white/10 bg-white/5 p-5">
                        <dt class="font-bold text-teal-300">هل التطبيق مجاني؟</dt>
                        <dd class="mt-2 text-sm text-zinc-400">نعم، هناك طبقة مجانية مع ترقية اختيارية لـ Pro و Ultra.</dd>
                    </div>
                    <div class="rounded-2xl border border-white/10 bg-white/5 p-5">
                        <dt class="font-bold text-teal-300">هل بياناتي آمنة؟</dt>
                        <dd class="mt-2 text-sm text-zinc-400">نستخدم Laravel Sanctum وحدود طلبات API. راجع <a href="{{ route('site.privacy') }}" class="text-teal-400 underline">سياسة الخصوصية</a>.</dd>
                    </div>
                </dl>
            </div>
        </section>

        <section id="download" class="border-t border-white/5 py-20">
            <div class="mx-auto max-w-3xl rounded-3xl border border-teal-500/30 bg-gradient-to-br from-teal-500/10 to-violet-600/10 p-10 text-center">
                <h2 class="text-2xl font-black">حمّل تطبيق {{ $platformName ?? 'MadarX' }}</h2>
                <p class="mt-3 text-zinc-400">متوفر على Google Play و App Store — أو جرّب النسخة عبر الويب.</p>
                <div class="mt-8 flex justify-center">
                    @include('site.partials.store-badges', [
                        'googlePlayUrl' => $googlePlayUrl ?? null,
                        'appleAppStoreUrl' => $appleAppStoreUrl ?? null,
                        'align' => 'center',
                        'showHint' => true,
                    ])
                </div>
                <div class="mt-8 flex flex-wrap justify-center gap-3">
                    <a href="{{ route('web.register') }}" class="rounded-xl bg-teal-500 px-6 py-3 text-sm font-bold text-madar-950 hover:bg-teal-400">إنشاء حساب</a>
                    <a href="{{ route('web.login') }}" class="rounded-xl border border-white/15 px-6 py-3 text-sm font-bold text-white hover:bg-white/10">دخول الويب</a>
                </div>
            </div>
        </section>
    </main>

    <footer class="relative z-10 border-t border-white/10 py-10 text-center text-xs text-zinc-500">
        <p>© {{ date('Y') }} {{ $platformName ?? 'MadarX' }}</p>
        <p class="mt-2">
            <a href="{{ route('site.privacy') }}" class="hover:text-teal-400">الخصوصية</a>
            ·
            <a href="{{ route('site.terms') }}" class="hover:text-teal-400">الشروط</a>
        </p>
    </footer>
@endsection