<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="{{ $content['meta']['description'] }}">
    <meta name="theme-color" content="{{ $content['theme']['navy'] }}">
    <meta property="og:title" content="{{ $content['meta']['title'] }}">
    <meta property="og:description" content="{{ $content['meta']['description'] }}">
    <meta property="og:image" content="{{ asset(ltrim($content['media']['hero'], '/')) }}">
    <title>{{ $content['meta']['title'] }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <style>
        :root {
            --primary: {{ $content['theme']['primary'] }};
            --navy: {{ $content['theme']['navy'] }};
            --accent: {{ $content['theme']['accent'] }};
        }
        body { font-family: Arial, Helvetica, sans-serif; }
        .font-black { font-weight: 700; }
        .font-extrabold { font-weight: 600; }
        [x-cloak] { display: none !important; }
        .landing-grid { background-image: linear-gradient(rgba(7,28,49,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(7,28,49,.035) 1px, transparent 1px); background-size: 32px 32px; }
        .glass-shadow { box-shadow: 0 32px 80px -38px rgba(7, 28, 49, .45); }
        .feature-card { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
        .feature-card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px -30px rgba(7,28,49,.4); border-color: color-mix(in srgb, var(--primary) 28%, white); }
        .hero-orb { background: radial-gradient(circle, color-mix(in srgb, var(--primary) 18%, transparent) 0%, transparent 68%); }
        @media (prefers-reduced-motion: no-preference) {
            .float-card { animation: float 5s ease-in-out infinite; }
            @keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
        }
    </style>
</head>
<body class="bg-white text-slate-700 antialiased selection:bg-orange-200 selection:text-slate-950">
    <header x-data="{ open: false }" class="fixed inset-x-0 top-0 z-50 border-b border-slate-200/70 bg-white/90 backdrop-blur-xl">
        <div class="mx-auto flex h-[76px] max-w-7xl items-center justify-between px-5 sm:px-8">
            <a href="#top" class="shrink-0">
                @include('landing.partials.logo')
            </a>

            <nav class="hidden items-center gap-8 lg:flex" aria-label="Main navigation">
                <a href="#features" class="text-sm font-semibold text-slate-600 transition hover:text-[var(--primary)]">{{ $content['nav']['features'] }}</a>
                <a href="#workflow" class="text-sm font-semibold text-slate-600 transition hover:text-[var(--primary)]">{{ $content['nav']['workflow'] }}</a>
                <a href="#advantages" class="text-sm font-semibold text-slate-600 transition hover:text-[var(--primary)]">{{ $content['nav']['advantages'] }}</a>
                <a href="#contact" class="text-sm font-semibold text-slate-600 transition hover:text-[var(--primary)]">{{ $content['nav']['contact'] }}</a>
            </nav>

            <div class="hidden items-center gap-3 lg:flex">
                <a href="{{ route('login') }}" class="px-4 py-2.5 text-sm font-bold text-[var(--navy)] transition hover:text-[var(--primary)]">{{ $content['nav']['login'] }}</a>
                <a href="{{ $content['hero']['primary_url'] }}" class="group inline-flex items-center gap-2 rounded-xl bg-[var(--primary)] px-5 py-3 text-sm font-extrabold text-white shadow-lg shadow-orange-500/20 transition hover:-translate-y-0.5 hover:brightness-105">
                    {{ $content['hero']['primary_label'] }}
                    <span aria-hidden="true" class="transition group-hover:translate-x-1">→</span>
                </a>
            </div>

            <button type="button" @click="open = !open" :aria-expanded="open" class="grid h-11 w-11 place-items-center rounded-xl border border-slate-200 text-[var(--navy)] lg:hidden" aria-label="Toggle navigation">
                <svg x-show="!open" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
                <svg x-show="open" x-cloak class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 6 12 12M18 6 6 18"/></svg>
            </button>
        </div>

        <nav x-show="open" x-cloak x-transition class="border-t border-slate-100 bg-white px-5 py-5 lg:hidden" aria-label="Mobile navigation">
            <div class="mx-auto grid max-w-7xl gap-1">
                <a @click="open = false" href="#features" class="rounded-xl px-4 py-3 font-semibold hover:bg-slate-50">{{ $content['nav']['features'] }}</a>
                <a @click="open = false" href="#workflow" class="rounded-xl px-4 py-3 font-semibold hover:bg-slate-50">{{ $content['nav']['workflow'] }}</a>
                <a @click="open = false" href="#advantages" class="rounded-xl px-4 py-3 font-semibold hover:bg-slate-50">{{ $content['nav']['advantages'] }}</a>
                <a @click="open = false" href="#contact" class="rounded-xl px-4 py-3 font-semibold hover:bg-slate-50">{{ $content['nav']['contact'] }}</a>
                <div class="mt-3 grid grid-cols-2 gap-3">
                    <a href="{{ route('login') }}" class="rounded-xl border border-slate-200 px-4 py-3 text-center text-sm font-bold">{{ $content['nav']['login'] }}</a>
                    <a href="{{ $content['hero']['primary_url'] }}" class="rounded-xl bg-[var(--primary)] px-4 py-3 text-center text-sm font-bold text-white">{{ $content['hero']['primary_label'] }}</a>
                </div>
            </div>
        </nav>
    </header>

    <main id="top" class="overflow-hidden">
        <section class="landing-grid relative pt-[76px]">
            <div class="hero-orb pointer-events-none absolute -left-64 top-12 h-[680px] w-[680px]"></div>
            <div class="mx-auto grid min-h-[720px] max-w-7xl items-center gap-12 px-5 py-16 sm:px-8 lg:grid-cols-[0.88fr_1.12fr] lg:gap-10 lg:py-20">
                <div class="relative z-10 max-w-xl">
                    <div class="mb-6 inline-flex items-center gap-2 rounded-full border border-orange-200 bg-orange-50 px-3.5 py-2 text-[11px] font-black tracking-[0.16em] text-[var(--primary)]">
                        <span class="h-2 w-2 rounded-full bg-[var(--primary)] shadow-[0_0_0_4px_rgba(255,90,10,.12)]"></span>
                        {{ $content['hero']['eyebrow'] }}
                    </div>
                    <h1 class="text-[clamp(2.8rem,6vw,5.25rem)] font-black leading-[1.04] tracking-[-0.035em] text-[var(--navy)]">
                        {{ $content['hero']['title'] }}
                        <span class="mt-2 block text-[var(--primary)]">{{ $content['hero']['highlight'] }}</span>
                    </h1>
                    <p class="mt-7 max-w-lg text-base leading-7 text-slate-600 sm:text-lg">{{ $content['hero']['description'] }}</p>
                    <div class="mt-9 flex flex-col gap-3 sm:flex-row">
                        <a href="{{ $content['hero']['primary_url'] }}" class="group inline-flex items-center justify-center gap-3 rounded-xl bg-[var(--primary)] px-6 py-4 text-sm font-extrabold text-white shadow-xl shadow-orange-500/20 transition hover:-translate-y-1 hover:brightness-105">
                            {{ $content['hero']['primary_label'] }} <span class="transition group-hover:translate-x-1">→</span>
                        </a>
                        <a href="{{ $content['hero']['secondary_url'] }}" class="inline-flex items-center justify-center gap-3 rounded-xl border border-slate-300 bg-white px-6 py-4 text-sm font-extrabold text-[var(--navy)] transition hover:-translate-y-1 hover:border-[var(--primary)] hover:text-[var(--primary)]">
                            {{ $content['hero']['secondary_label'] }} <span>↘</span>
                        </a>
                    </div>
                    <div class="mt-10 grid grid-cols-2 gap-x-5 gap-y-4 sm:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
                        @foreach($content['hero']['highlights'] as $highlight)
                            <div class="flex items-center gap-2 text-[11px] font-bold text-slate-600">
                                <span class="grid h-5 w-5 shrink-0 place-items-center rounded-full bg-orange-100 text-[var(--primary)]">✓</span>
                                <span>{{ $highlight['label'] }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="relative lg:-mr-24 xl:-mr-32">
                    <div class="absolute -inset-5 -z-10 rounded-[42px] bg-gradient-to-br from-orange-100 via-white to-sky-100 blur-2xl"></div>
                    <div class="glass-shadow relative overflow-hidden rounded-[30px] border-[7px] border-white bg-slate-100">
                        <img src="{{ asset(ltrim($content['media']['hero'], '/')) }}" alt="BrandX ERP-supported UAE typing center customer service" class="h-[430px] w-full object-cover sm:h-[520px] lg:h-[580px]" fetchpriority="high">
                        <div class="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-[var(--navy)]/70 to-transparent"></div>
                        <div class="absolute bottom-5 left-5 right-5 flex items-end justify-between gap-4 text-white">
                            <div>
                                <p class="text-[10px] font-black tracking-[0.17em] text-orange-200">{{ $content['hero']['image_eyebrow'] }}</p>
                                <p class="mt-1 text-lg font-extrabold">{{ $content['hero']['image_title'] }}</p>
                            </div>
                            <div class="hidden rounded-xl border border-white/20 bg-white/15 px-4 py-3 text-right backdrop-blur-md sm:block">
                                <p class="text-2xl font-black">{{ $content['hero']['image_metric'] }}</p>
                                <p class="text-[10px] font-semibold text-white/75">{{ $content['hero']['image_metric_label'] }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="float-card absolute -bottom-7 left-4 rounded-2xl border border-white bg-white/95 p-4 shadow-2xl backdrop-blur sm:left-[-28px]">
                        <div class="flex items-center gap-3">
                            <span class="grid h-11 w-11 place-items-center rounded-xl bg-emerald-50 text-lg text-emerald-600">✓</span>
                            <div><p class="text-xs font-extrabold text-[var(--navy)]">{{ $content['hero']['status_title'] }}</p><p class="mt-0.5 text-[10px] text-slate-500">{{ $content['hero']['status_description'] }}</p></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="border-y border-slate-100 bg-slate-50/70 py-10">
            <div class="mx-auto max-w-7xl px-5 text-center sm:px-8">
                <p class="text-xs font-extrabold text-[var(--navy)]">{{ $content['partners']['heading'] }}</p>
                <div class="mt-7 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
                    @foreach($content['partners']['items'] as $partner)
                        <div class="grid min-h-16 place-items-center rounded-xl border border-slate-200/80 bg-white px-3 text-center text-xs font-black uppercase tracking-[0.08em] text-slate-400 transition hover:border-orange-200 hover:text-[var(--primary)]">{{ $partner['name'] }}</div>
                    @endforeach
                </div>
            </div>
        </section>

        <section id="features" class="scroll-mt-24 py-24 sm:py-28">
            <div class="mx-auto max-w-7xl px-5 sm:px-8">
                <div class="mx-auto max-w-3xl text-center">
                    <p class="text-xs font-black tracking-[0.17em] text-[var(--primary)]">{{ $content['core']['eyebrow'] }}</p>
                    <h2 class="mt-4 text-3xl font-black tracking-[-0.035em] text-[var(--navy)] sm:text-5xl">{{ $content['core']['title'] }}</h2>
                    <p class="mx-auto mt-5 max-w-2xl leading-7 text-slate-500">{{ $content['core']['description'] }}</p>
                </div>
                <div class="mt-14 grid gap-px overflow-hidden rounded-3xl border border-slate-200 bg-slate-200 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
                    @foreach($content['core']['items'] as $item)
                        <article class="group bg-white p-7 text-center transition hover:bg-orange-50/40">
                            <span class="mx-auto grid h-14 w-14 place-items-center rounded-2xl bg-orange-50 text-[var(--primary)] transition group-hover:scale-110 group-hover:bg-[var(--primary)] group-hover:text-white">
                                @include('landing.partials.icon', ['name' => $item['icon']])
                            </span>
                            <h3 class="mt-5 text-sm font-extrabold text-[var(--navy)]">{{ $item['title'] }}</h3>
                            <p class="mt-2 text-xs leading-5 text-slate-500">{{ $item['description'] }}</p>
                        </article>
                    @endforeach
                </div>
            </div>
        </section>

        <section id="workflow" class="scroll-mt-24 bg-[var(--navy)] py-24 text-white sm:py-28">
            <div class="mx-auto grid max-w-7xl items-center gap-14 px-5 sm:px-8 lg:grid-cols-[0.72fr_1.28fr]">
                <div>
                    <p class="text-xs font-black tracking-[0.17em] text-[var(--accent)]">{{ $content['workflow']['eyebrow'] }}</p>
                    <h2 class="mt-4 text-3xl font-black tracking-[-0.04em] sm:text-5xl">{{ $content['workflow']['title'] }}</h2>
                    <p class="mt-6 leading-7 text-slate-300">{{ $content['workflow']['description'] }}</p>
                    <ul class="mt-8 space-y-3">
                        @foreach($content['workflow']['bullets'] as $bullet)
                            <li class="flex items-start gap-3 text-sm font-semibold text-slate-200"><span class="mt-0.5 grid h-5 w-5 shrink-0 place-items-center rounded-full bg-[var(--primary)] text-[10px] text-white">✓</span>{{ $bullet['text'] }}</li>
                        @endforeach
                    </ul>
                </div>
                <div class="relative">
                    <div class="absolute -inset-4 rounded-[34px] border border-white/10"></div>
                    <img src="{{ asset(ltrim($content['media']['workflow'], '/')) }}" alt="UAE typing center team managing customer applications" class="relative h-[430px] w-full rounded-[28px] object-cover shadow-2xl shadow-black/25 sm:h-[520px]" loading="lazy">
                    <div class="absolute -bottom-6 right-5 rounded-2xl border border-white/15 bg-white/95 p-4 text-[var(--navy)] shadow-xl sm:right-8">
                        <p class="text-[10px] font-black tracking-[0.14em] text-[var(--primary)]">{{ $content['workflow']['image_eyebrow'] }}</p>
                        <p class="mt-1 text-sm font-extrabold">{{ $content['workflow']['image_title'] }}</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="bg-slate-50 py-24 sm:py-28">
            <div class="mx-auto max-w-7xl px-5 sm:px-8">
                <div class="mx-auto max-w-3xl text-center">
                    <p class="text-xs font-black tracking-[0.17em] text-[var(--primary)]">{{ $content['features']['eyebrow'] }}</p>
                    <h2 class="mt-4 text-3xl font-black tracking-[-0.035em] text-[var(--navy)] sm:text-5xl">{{ $content['features']['title'] }}</h2>
                    <p class="mx-auto mt-5 max-w-2xl leading-7 text-slate-500">{{ $content['features']['description'] }}</p>
                </div>
                <div class="mt-14 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                    @foreach($content['features']['items'] as $item)
                        <article class="feature-card rounded-2xl border border-slate-200 bg-white p-6">
                            <span class="grid h-11 w-11 place-items-center rounded-xl bg-orange-50 text-[var(--primary)]">@include('landing.partials.icon', ['name' => $item['icon'], 'attributes' => new \Illuminate\View\ComponentAttributeBag(['class' => 'h-5 w-5'])])</span>
                            <h3 class="mt-5 text-sm font-extrabold text-[var(--navy)]">{{ $item['title'] }}</h3>
                            <p class="mt-2 text-xs leading-5 text-slate-500">{{ $item['description'] }}</p>
                        </article>
                    @endforeach
                </div>
            </div>
        </section>

        <section id="advantages" class="scroll-mt-24 py-24 sm:py-28">
            <div class="mx-auto grid max-w-7xl items-center gap-14 px-5 sm:px-8 lg:grid-cols-2">
                <div class="relative order-2 lg:order-1">
                    <div class="absolute -left-5 -top-5 h-24 w-24 rounded-3xl bg-orange-100"></div>
                    <img src="{{ asset(ltrim($content['media']['advantages'], '/')) }}" alt="Professional BrandX ERP customer service experience" class="relative h-[430px] w-full rounded-[28px] object-cover shadow-2xl shadow-slate-900/15 sm:h-[520px]" loading="lazy">
                    <div class="absolute bottom-5 left-5 right-5 rounded-2xl border border-white/30 bg-[var(--navy)]/90 p-5 text-white backdrop-blur">
                        <div class="flex items-center gap-4"><span class="grid h-11 w-11 place-items-center rounded-xl bg-[var(--primary)] text-xl">↗</span><div><p class="text-sm font-extrabold">{{ $content['advantages']['image_title'] }}</p><p class="mt-1 text-xs text-slate-300">{{ $content['advantages']['image_description'] }}</p></div></div>
                    </div>
                </div>
                <div class="order-1 lg:order-2 lg:pl-8">
                    <p class="text-xs font-black tracking-[0.17em] text-[var(--primary)]">{{ $content['advantages']['eyebrow'] }}</p>
                    <h2 class="mt-4 text-4xl font-black leading-[1.05] tracking-[-0.045em] text-[var(--navy)] sm:text-6xl">{{ $content['advantages']['title'] }}</h2>
                    <p class="mt-6 max-w-xl leading-7 text-slate-600">{{ $content['advantages']['description'] }}</p>
                    <ul class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
                        @foreach($content['advantages']['bullets'] as $bullet)
                            <li class="flex items-start gap-3 text-sm font-bold text-slate-700"><span class="mt-0.5 text-lg font-black text-[var(--primary)]">✓</span>{{ $bullet['text'] }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </section>

        <section id="contact" class="scroll-mt-24 px-5 pb-12 sm:px-8">
            <div class="relative mx-auto max-w-7xl overflow-hidden rounded-[30px] bg-[var(--navy)] px-6 py-12 text-white shadow-2xl shadow-slate-900/20 sm:px-10 lg:px-14">
                <div class="absolute -right-20 -top-32 h-96 w-96 rounded-full border-[70px] border-white/5"></div>
                <div class="absolute bottom-0 left-1/3 h-40 w-80 bg-[var(--primary)]/10 blur-3xl"></div>
                <div class="relative grid items-center gap-10 lg:grid-cols-[1.05fr_1.25fr_auto]">
                    <div>
                        <p class="text-[10px] font-black tracking-[0.16em] text-[var(--accent)]">{{ $content['cta']['eyebrow'] }}</p>
                        <h2 class="mt-3 text-3xl font-black tracking-[-0.04em] sm:text-4xl">{{ $content['cta']['title'] }}</h2>
                        <p class="mt-4 max-w-lg text-sm leading-6 text-slate-300">{{ $content['cta']['description'] }}</p>
                    </div>
                    <div class="grid gap-4 sm:grid-cols-3">
                        @foreach($content['cta']['points'] as $point)
                            <div class="border-l border-white/15 pl-4"><span class="mb-3 grid h-8 w-8 place-items-center rounded-lg bg-[var(--primary)]/15 text-[var(--accent)]">✓</span><h3 class="text-xs font-extrabold">{{ $point['title'] }}</h3><p class="mt-1 text-[10px] leading-4 text-slate-400">{{ $point['description'] }}</p></div>
                        @endforeach
                    </div>
                    <div class="flex min-w-44 flex-col gap-3">
                        <a href="{{ $content['cta']['button_url'] }}" class="group inline-flex items-center justify-center gap-3 rounded-xl bg-[var(--primary)] px-6 py-4 text-sm font-extrabold text-white shadow-lg shadow-orange-950/30 transition hover:-translate-y-1 hover:brightness-110">{{ $content['cta']['button_label'] }} <span class="transition group-hover:translate-x-1">→</span></a>
                        <a href="tel:{{ preg_replace('/[^+0-9]/', '', $content['cta']['phone']) }}" class="text-center text-xs font-semibold text-slate-300">{{ $content['cta']['phone_label'] }}: <span class="font-extrabold text-[var(--accent)]">{{ $content['cta']['phone'] }}</span></a>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="border-t border-slate-100 bg-white py-10">
        <div class="mx-auto flex max-w-7xl flex-col gap-8 px-5 sm:px-8 lg:flex-row lg:items-center lg:justify-between">
            <div class="max-w-sm">
                @include('landing.partials.logo')
                <p class="mt-4 text-xs leading-5 text-slate-500">{{ $content['footer']['description'] }}</p>
            </div>
            <div class="flex flex-wrap items-center gap-x-6 gap-y-3 text-xs font-semibold text-slate-500">
                <a href="mailto:{{ $content['footer']['email'] }}" class="hover:text-[var(--primary)]">{{ $content['footer']['email'] }}</a>
                <a href="{{ $content['footer']['privacy_url'] }}" class="hover:text-[var(--primary)]">{{ $content['footer']['privacy_label'] }}</a>
                <a href="{{ $content['footer']['terms_url'] }}" class="hover:text-[var(--primary)]">{{ $content['footer']['terms_label'] }}</a>
                @if($content['footer']['instagram_url'])<a href="{{ $content['footer']['instagram_url'] }}" rel="noopener" class="hover:text-[var(--primary)]">{{ $content['footer']['instagram_label'] }}</a>@endif
                @if($content['footer']['linkedin_url'])<a href="{{ $content['footer']['linkedin_url'] }}" rel="noopener" class="hover:text-[var(--primary)]">{{ $content['footer']['linkedin_label'] }}</a>@endif
            </div>
            <p class="text-xs text-slate-400">{{ $content['footer']['copyright'] }}</p>
        </div>
    </footer>
</body>
</html>
