@extends('layouts.app')

@section('title', __('app.home.title'))
@section('meta_description', __('app.home.meta_description'))

@section('content')
    {{-- Hero Section --}}
    <section class="bg-brand-deep text-white">
        <div class="mx-auto flex max-w-7xl flex-col items-center gap-8 px-4 py-12 sm:px-6 sm:py-16 lg:flex-row lg:gap-12 lg:px-8">
            <div class="max-w-2xl flex-1 text-center lg:text-start">
                <h1 class="text-2xl font-extrabold leading-tight sm:text-4xl lg:text-5xl">
                    {{ __('app.home.hero_title') }}
                </h1>
                <p class="mt-4 text-sm leading-relaxed text-white/80 sm:text-base lg:text-lg">
                    {{ __('app.home.hero_subtitle') }}
                </p>
                <div class="mt-6 flex flex-wrap justify-center gap-3 lg:justify-start">
                    <a href="{{ lroute('demo') }}" class="w-full rounded-full bg-brand px-6 py-3 text-center text-sm font-semibold text-white transition hover:bg-brand-light hover:text-brand-deep sm:w-auto">
                        {{ __('app.home.cta_primary') }}
                    </a>
                    <a href="#features" class="w-full rounded-full border border-white/25 px-6 py-3 text-center text-sm font-semibold text-white transition hover:bg-white/10 sm:w-auto">
                        {{ __('app.home.cta_secondary') }}
                    </a>
                </div>
                <p class="mt-6 text-xs text-white/60 sm:text-sm">{{ __('app.home.trust_line') }}</p>
            </div>
            <div class="flex w-full max-w-xs justify-center shrink-0 sm:max-w-sm lg:max-w-md">
                <img src="{{ asset('brand/hero-phone.webp') }}" alt="{{ __('app.home.hero_img_alt') }}" class="max-h-[320px] w-auto object-contain sm:max-h-[420px]" width="900" height="828" fetchpriority="high">
            </div>
        </div>
    </section>

    {{-- Payment Spotlight Section (Featuring WBwfgbXPGBNWoDvy7D2Txu5i6M.jpg / home-payment.webp) --}}
    <section class="mx-auto max-w-7xl px-4 py-12 sm:px-6 sm:py-16 lg:px-8">
        <div class="grid items-center gap-8 rounded-3xl bg-white p-6 shadow-sm ring-1 ring-black/5 sm:p-10 lg:grid-cols-2 lg:gap-12">
            <div>
                <span class="inline-block rounded-full bg-mint/20 px-3.5 py-1 text-xs font-bold text-brand-deep">
                    {{ __('app.home.payment_badge') }}
                </span>
                <h2 class="mt-3 text-xl font-bold text-brand-deep sm:text-3xl">
                    {{ __('app.home.payment_title') }}
                </h2>
                <p class="mt-3 text-xs leading-relaxed text-ink-soft sm:text-sm">
                    {{ __('app.home.payment_subtitle') }}
                </p>
                <div class="mt-6">
                    <a href="{{ lroute('demo') }}" class="inline-block rounded-full bg-brand px-6 py-2.5 text-xs font-semibold text-white transition hover:bg-brand-deep sm:text-sm">
                        {{ __('app.nav.book_demo') }}
                    </a>
                </div>
            </div>
            <div class="flex justify-center">
                <div class="overflow-hidden rounded-2xl bg-paper p-2 shadow-md ring-1 ring-black/5">
                    <img src="{{ asset('brand/home-payment.webp') }}" alt="{{ __('app.home.payment_title') }}" class="max-h-[280px] w-auto object-contain sm:max-h-[380px]" width="800" height="800" loading="lazy">
                </div>
            </div>
        </div>
    </section>

    {{-- Core Features Grid with Real App Mockups --}}
    <section id="features" class="mx-auto max-w-7xl px-4 py-10 sm:px-6 sm:py-16 lg:px-8">
        <div class="text-center">
            <h2 class="text-xl font-bold text-brand-deep sm:text-3xl">{{ __('app.home.features_title') }}</h2>
            <p class="mx-auto mt-2 max-w-2xl text-xs text-ink-soft sm:text-sm">{{ __('app.home.features_subtitle') }}</p>
        </div>

        <div class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4 sm:gap-6">
            @php
                $featureImages = [
                    'qr_menu' => 'feat-qr.webp',
                    'table_ordering' => 'feat-table.webp',
                    'pay_at_table' => 'feat-pay.webp',
                    'loyalty' => 'feat-loyalty.webp',
                ];
            @endphp
            @foreach (['qr_menu', 'table_ordering', 'pay_at_table', 'loyalty'] as $feature)
                <article class="flex flex-col justify-between rounded-2xl bg-white p-4 shadow-sm ring-1 ring-black/5 transition hover:-translate-y-0.5 hover:ring-brand/30 sm:p-5">
                    <div>
                        <h3 class="text-sm font-bold text-brand-deep sm:text-base">{{ __("app.home.features.{$feature}.title") }}</h3>
                        <p class="mt-1.5 text-xs leading-relaxed text-ink-soft">{{ __("app.home.features.{$feature}.text") }}</p>
                    </div>
                    <div class="mt-4 flex justify-center overflow-hidden rounded-xl bg-paper p-2">
                        <img src="{{ asset('brand/' . $featureImages[$feature]) }}" alt="{{ __("app.home.features.{$feature}.title") }}" class="max-h-[160px] w-auto object-contain sm:max-h-[190px]" width="310" height="464" loading="lazy">
                    </div>
                </article>
            @endforeach
        </div>
    </section>

    {{-- Growth & Operations Spotlight --}}
    <section class="bg-white py-12 sm:py-16">
        <div class="mx-auto grid max-w-7xl items-center gap-8 px-4 sm:px-6 lg:grid-cols-2 lg:gap-12 lg:px-8">
            <div class="flex justify-center order-2 lg:order-1">
                <div class="overflow-hidden rounded-2xl bg-paper p-2 shadow-md ring-1 ring-black/5">
                    <img src="{{ asset('brand/home-growth.webp') }}" alt="{{ __('app.home.growth_title') }}" class="max-h-[260px] w-auto object-contain sm:max-h-[340px]" width="800" height="800" loading="lazy">
                </div>
            </div>
            <div class="order-1 lg:order-2">
                <span class="inline-block rounded-full bg-brand/10 px-3.5 py-1 text-xs font-bold text-brand">
                    {{ __('app.home.growth_badge') }}
                </span>
                <h2 class="mt-3 text-xl font-bold text-brand-deep sm:text-3xl">
                    {{ __('app.home.growth_title') }}
                </h2>
                <p class="mt-3 text-xs leading-relaxed text-ink-soft sm:text-sm">
                    {{ __('app.home.growth_subtitle') }}
                </p>
                <div class="mt-6">
                    <a href="{{ lroute('how-it-works') }}" class="inline-block rounded-full border border-brand px-6 py-2.5 text-xs font-semibold text-brand transition hover:bg-brand hover:text-white sm:text-sm">
                        {{ __('app.nav.how_it_works') }} &larr;
                    </a>
                </div>
            </div>
        </div>
    </section>

    {{-- How It Works (3 Steps) --}}
    <section class="mx-auto max-w-7xl px-4 py-12 sm:px-6 sm:py-16 lg:px-8">
        <div class="text-center">
            <h2 class="text-xl font-bold text-brand-deep sm:text-3xl">{{ __('app.home.how_title') }}</h2>
        </div>
        <div class="mt-8 grid gap-4 sm:grid-cols-3 sm:gap-6">
            @foreach (['scan', 'order', 'serve'] as $i => $step)
                <div class="rounded-2xl bg-paper p-5 ring-1 ring-black/5 sm:p-6">
                    <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-brand text-xs font-bold text-white sm:h-9 sm:w-9 sm:text-sm">{{ $i + 1 }}</span>
                    <h3 class="mt-3 text-sm font-bold text-brand-deep sm:text-base">{{ __("app.home.how.{$step}.title") }}</h3>
                    <p class="mt-1.5 text-xs leading-relaxed text-ink-soft sm:text-sm">{{ __("app.home.how.{$step}.text") }}</p>
                </div>
            @endforeach
        </div>
    </section>

    {{-- Solutions Grid --}}
    <section id="solutions" class="mx-auto max-w-7xl px-4 py-10 sm:px-6 sm:py-16 lg:px-8">
        <div class="flex items-end justify-between gap-4">
            <div>
                <h2 class="text-xl font-bold text-brand-deep sm:text-3xl">{{ __('app.home.solutions_title') }}</h2>
                <p class="mt-2 text-xs text-ink-soft sm:text-sm">{{ __('app.home.solutions_subtitle') }}</p>
            </div>
        </div>
        <div class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 sm:gap-6">
            @foreach ($solutions as $solution)
                <a href="{{ lroute('solution', ['slug' => $solution]) }}" class="group rounded-2xl bg-white p-5 shadow-sm ring-1 ring-black/5 transition hover:ring-brand/40 sm:p-6">
                    <h3 class="text-sm font-bold text-brand-deep group-hover:text-brand sm:text-base">{{ __("app.solutions.{$solution}.nav") }}</h3>
                    <p class="mt-2 text-xs leading-relaxed text-ink-soft sm:text-sm">{{ __("app.solutions.{$solution}.lead") }}</p>
                    <span class="mt-4 inline-block text-xs font-semibold text-brand sm:text-sm">{{ __('app.learn_more') }} &larr;</span>
                </a>
            @endforeach
        </div>
    </section>

    {{-- Trusted Client Logos (Directly above CTA) --}}
    <section class="border-t border-black/5 bg-white py-10 sm:py-12">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <p class="text-center text-xs font-semibold uppercase tracking-wider text-ink-soft/70 sm:text-sm">
                {{ __('app.home.clients_title') }}
            </p>
            <div class="mt-6 flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8">
                @for ($c = 1; $c <= 8; $c++)
                    <div class="flex h-12 w-12 items-center justify-center overflow-hidden rounded-xl bg-paper p-1.5 shadow-xs ring-1 ring-black/5 transition hover:scale-105 sm:h-14 sm:w-14">
                        <img src="{{ asset("brand/client-{$c}.webp") }}" alt="" class="h-full w-full object-contain" width="140" height="140" loading="lazy">
                    </div>
                @endfor
            </div>
        </div>
    </section>

    <script type="application/ld+json">{!! json_encode([
        '@context' => 'https://schema.org',
        '@type' => 'SoftwareApplication',
        'name' => __('app.site_name'),
        'url' => url('/'),
        'applicationCategory' => 'BusinessApplication',
        'operatingSystem' => 'Web',
        'inLanguage' => ['ar', 'en'],
    ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_HEX_AMP) !!}</script>

    @include('partials.cta')
@endsection