@php
    $homepageJobs = collect($homepageJobs ?? []);
    $homepageJobCount = (int) ($homepageJobCount ?? $homepageJobs->count());
    $frontendUser = auth('web')->user();
    $startUsesGooglePopup = ! $frontendUser;

    $startUrl = $frontendUser
        ? ($frontendUser->canViewMatchedJobs() ? route('applicant.dashboard') : route('questionnaire.show'))
        : route('auth.google.redirect', ['popup' => 1]);
    $brandName = setting('general.application_name', config('app.name', 'RemoteMatch'));
    $brandTagline = setting('general.application_tagline', 'AI-powered remote job matching');
    $heroHeadline = setting('branding.landing_page_hero_headline', 'Find Remote Jobs That Actually Match Your Profile');
    $heroSubheadline = setting('branding.landing_page_subheadline', 'Answer a few questions, upload your resume, get ATS insights, and unlock personalized remote job matches from trusted remote job sources.');
    $ctaText = setting('branding.landing_page_cta_text', 'Get Matched');
    $faviconUrl = \App\Support\Branding::assetUrl(setting('branding.favicon'));
    $metaTitle = setting('seo.meta_title', $brandName.' - AI Remote Job Matching');
    $metaDescription = setting('seo.meta_description', $heroSubheadline);

    $defaultNavItems = [
        ['label' => 'How It Works', 'href' => '#how-it-works'],
        ['label' => 'ATS Score', 'href' => '#ats-score'],
        ['label' => 'Job Categories', 'href' => '#categories'],
        ['label' => 'Live Jobs', 'href' => '#live-jobs'],
        ['label' => 'FAQ', 'href' => '#faq'],
    ];
    $navItems = \App\Support\NavigationLinks::parse(setting('navigation.header_links'), $defaultNavItems);

    $features = [
        ['icon' => 'file', 'title' => 'AI resume check', 'copy' => 'Understand strengths, gaps, and readiness before matching.'],
        ['icon' => 'target', 'title' => 'Personalized jobs', 'copy' => 'Ranked around questionnaire, profile, and resume signals.'],
        ['icon' => 'globe', 'title' => 'Fresh remote roles', 'copy' => 'Preview current roles from approved remote job sources.'],
        ['icon' => 'filter', 'title' => 'Smart filters', 'copy' => 'Unlock category, level, and work preference filters later.'],
        ['icon' => 'chart', 'title' => 'Application tracking', 'copy' => 'Track applied, saved, and follow-up opportunities.'],
        ['icon' => 'bookmark', 'title' => 'Saved jobs', 'copy' => 'Keep the roles you want to revisit after onboarding.'],
    ];

    $steps = [
        ['number' => '01', 'title' => 'Sign in with Google', 'copy' => 'Start securely and keep your progress connected to your account.'],
        ['number' => '02', 'title' => 'Complete AI questionnaire', 'copy' => 'Share role goals, skills, availability, timezone, and remote preferences.'],
        ['number' => '03', 'title' => 'Unlock your profile preview', 'copy' => 'Review a guided summary before full job access is available.'],
        ['number' => '04', 'title' => 'Upload resume', 'copy' => 'Let the platform understand your resume and application readiness.'],
        ['number' => '05', 'title' => 'Get ATS insights', 'copy' => 'See skills, missing keywords, role suggestions, and readiness signals.'],
        ['number' => '06', 'title' => 'View matched jobs', 'copy' => 'Access best matches, filters, saved jobs, and tracked applications.'],
    ];

    $categories = [
        ['icon' => 'briefcase', 'title' => 'Tech', 'copy' => 'Software, engineering, QA, cloud, security'],
        ['icon' => 'sparkles', 'title' => 'Design', 'copy' => 'Product design, creative, brand, UI'],
        ['icon' => 'chart', 'title' => 'Marketing', 'copy' => 'Growth, SEO, lifecycle, performance'],
        ['icon' => 'send', 'title' => 'Sales', 'copy' => 'Business development, SDR, account roles'],
        ['icon' => 'file', 'title' => 'Writing', 'copy' => 'Content, copywriting, editing, research'],
        ['icon' => 'shield', 'title' => 'Support', 'copy' => 'Customer support, success, help desk'],
        ['icon' => 'target', 'title' => 'Product', 'copy' => 'Product management and operations'],
        ['icon' => 'layers', 'title' => 'Operations', 'copy' => 'Admin, coordination, remote operations'],
        ['icon' => 'bookmark', 'title' => 'Virtual assistant', 'copy' => 'Founder support, research, scheduling'],
        ['icon' => 'wallet', 'title' => 'Finance', 'copy' => 'Accounting, bookkeeping, analysis'],
        ['icon' => 'shield', 'title' => 'HR', 'copy' => 'Recruiting, people ops, talent support'],
        ['icon' => 'chart', 'title' => 'Data', 'copy' => 'Analytics, BI, reporting, research'],
        ['icon' => 'sparkles', 'title' => 'AI', 'copy' => 'AI operations, prompts, automation'],
        ['icon' => 'globe', 'title' => 'General remote jobs', 'copy' => 'Flexible roles across industries'],
    ];

    $benefits = [
        ['icon' => 'globe', 'copy' => 'Scans multiple remote job sources'],
        ['icon' => 'filter', 'copy' => 'Avoids irrelevant jobs before applying'],
        ['icon' => 'file', 'copy' => 'Helps improve your resume before applications'],
        ['icon' => 'target', 'copy' => 'Prioritizes jobs based on profile fit'],
        ['icon' => 'bookmark', 'copy' => 'Tracks saved and applied jobs'],
        ['icon' => 'shield', 'copy' => 'Gives better clarity before applying'],
    ];

    $faqs = [
        [
            'question' => 'Can I see jobs before completing the process?',
            'answer' => 'Yes, you can see public remote job previews on the homepage, but full details, matching, filters, and apply links unlock only after completing the required onboarding flow.',
        ],
        [
            'question' => 'Why do I need to answer questions?',
            'answer' => 'Your answers help '.$brandName.' understand role goals, skills, experience, availability, timezone, and remote work preferences before ranking opportunities.',
        ],
        [
            'question' => 'What happens after resume upload?',
            'answer' => 'The resume is analyzed for ATS readiness, extracted skills, missing keywords, role suggestions, improvement ideas, and remote-readiness signals.',
        ],
        [
            'question' => 'Does the platform guarantee a job?',
            'answer' => 'No. '.$brandName.' helps you discover and organize relevant remote job opportunities, but hiring decisions are made by employers.',
        ],
        [
            'question' => 'Can I apply directly from the homepage?',
            'answer' => 'No. Homepage cards are limited previews only. Apply links become available inside the unlocked dashboard after the required steps are complete.',
        ],
        [
            'question' => 'What kind of roles are included?',
            'answer' => $brandName.' supports technical and non-technical roles across tech, design, marketing, sales, writing, support, product, operations, virtual assistant, finance, HR, data, AI, and general remote jobs.',
        ],
        [
            'question' => 'Is my resume data safe?',
            'answer' => 'Resume content is handled server-side. Private credentials and API keys should stay in secure environment or encrypted database settings, never in frontend code.',
        ],
    ];
@endphp

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth bg-slate-50">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ $metaTitle }}</title>
    <meta name="description" content="{{ $metaDescription }}">
    @if ($faviconUrl)
        <link rel="icon" href="{{ $faviconUrl }}">
    @endif
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-[#F8FAFC] font-sans text-slate-950 antialiased">
    <div data-pjax-root>
    <div class="min-h-screen overflow-x-hidden pb-24 sm:pb-0">
        <header class="landing-nav sticky top-0 z-40 border-b border-slate-200/70 bg-white/80 backdrop-blur-xl transition-shadow duration-300" data-navbar>
            <nav class="mx-auto flex min-h-16 max-w-7xl items-center justify-between px-4 py-2 sm:px-6 lg:min-h-[4.5rem] lg:px-8" aria-label="Primary">
                <a href="{{ route('landing') }}" class="flex items-center gap-3" aria-label="{{ $brandName }} home">
                    <x-brand-logo mark-class="flex size-10 items-center justify-center rounded-2xl bg-teal-700 text-sm font-semibold text-white shadow-lg shadow-teal-700/20" />
                </a>

                <div class="hidden items-center gap-7 lg:flex">
                    @foreach ($navItems as $item)
                        <a href="{{ $item['href'] }}" class="text-sm font-medium text-slate-500 transition hover:text-teal-700">
                            {{ $item['label'] }}
                        </a>
                    @endforeach
                </div>

                <div class="hidden items-center gap-3 sm:flex">
                    @if ($frontendUser)
                        @if ($frontendUser->canViewMatchedJobs())
                            <a href="{{ route('applicant.dashboard') }}" class="rounded-full px-4 py-2 text-sm font-medium text-slate-500 transition hover:text-teal-700">Dashboard</a>
                        @endif
                    @else
                        <a href="{{ route('login') }}" class="rounded-full px-4 py-2 text-sm font-medium text-slate-500 transition hover:text-teal-700" data-auth-modal-open>Login</a>
                    @endif

                    <a href="{{ $startUrl }}" @if ($startUsesGooglePopup) data-google-popup @endif class="inline-flex min-h-11 items-center justify-center rounded-full bg-teal-700 px-5 text-sm font-semibold text-white shadow-lg shadow-teal-700/15 transition duration-300 hover:-translate-y-0.5 hover:bg-teal-800 focus:outline-none focus:ring-4 focus:ring-teal-100">
                        {{ $ctaText }}
                    </a>
                </div>

                <button class="inline-flex size-11 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-900 shadow-sm transition hover:border-teal-200 hover:bg-teal-50 sm:hidden" type="button" aria-expanded="false" aria-controls="mobile-menu" aria-label="Open menu" data-menu-toggle>
                    <span class="h-0.5 w-5 rounded-full bg-current before:mt-[-6px] before:block before:h-0.5 before:w-5 before:rounded-full before:bg-current before:content-[''] after:mt-[10px] after:block after:h-0.5 after:w-5 after:rounded-full after:bg-current after:content-['']"></span>
                </button>
            </nav>

            <div id="mobile-menu" class="hidden border-t border-slate-200 bg-white px-4 py-4 sm:hidden" data-mobile-menu>
                <div class="grid gap-2">
                    @foreach ($navItems as $item)
                        <a href="{{ $item['href'] }}" class="rounded-2xl px-3 py-3 text-sm font-medium text-slate-600 transition hover:bg-teal-50 hover:text-teal-700" data-mobile-link>
                            {{ $item['label'] }}
                        </a>
                    @endforeach
                    @unless ($frontendUser)
                        <a href="{{ route('login') }}" class="rounded-2xl px-3 py-3 text-sm font-medium text-slate-600 transition hover:bg-teal-50 hover:text-teal-700" data-auth-modal-open data-mobile-link>
                            Login
                        </a>
                    @endunless
                    <a href="{{ $startUrl }}" @if ($startUsesGooglePopup) data-google-popup @endif class="mt-2 inline-flex min-h-12 items-center justify-center rounded-full bg-teal-700 px-5 text-sm font-semibold text-white shadow-lg shadow-teal-700/15" data-mobile-link>
                        {{ $ctaText }}
                    </a>
                </div>
            </div>
        </header>

        @if ($errors->has('google_login'))
            <div class="mx-auto mt-5 max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm leading-6 text-amber-900 shadow-sm shadow-amber-900/5">
                    {{ $errors->first('google_login') }}
                </div>
            </div>
        @endif

        <main>
            <section class="relative overflow-hidden">
                <div class="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_12%_8%,rgba(20,184,166,0.20),transparent_30rem),radial-gradient(circle_at_88%_12%,rgba(14,165,233,0.14),transparent_26rem),linear-gradient(180deg,#F8FAFC_0%,#F1FBF8_48%,#FFFFFF_100%)]"></div>
                <svg class="pointer-events-none absolute right-0 top-10 -z-10 hidden h-[34rem] w-[34rem] text-teal-100/70 lg:block" viewBox="0 0 600 600" fill="none" aria-hidden="true">
                    <circle cx="300" cy="300" r="238" stroke="currentColor" stroke-width="1" />
                    <circle cx="300" cy="300" r="162" stroke="currentColor" stroke-width="1" />
                    <path d="M89 354C182 134 434 94 520 252" stroke="currentColor" stroke-width="1" />
                </svg>

                <div class="mx-auto grid max-w-7xl gap-10 px-4 py-12 sm:px-6 sm:py-16 lg:grid-cols-[0.88fr_1.12fr] lg:items-center lg:px-8 lg:py-24">
                    <div class="reveal">
                        <div class="inline-flex items-center gap-2 rounded-full border border-teal-200 bg-white/90 px-3 py-2 text-xs font-semibold text-teal-800 shadow-sm shadow-slate-900/5">
                            <x-landing.icon name="sparkles" class="size-4" />
                            {{ $brandTagline }}
                        </div>

                        <h1 class="mt-6 max-w-3xl text-4xl font-semibold leading-tight tracking-tight text-slate-950 sm:text-5xl lg:text-6xl">
                            {{ $heroHeadline }}
                        </h1>

                        <p class="mt-5 max-w-2xl text-base leading-7 text-slate-600 sm:text-lg">
                            {{ $heroSubheadline }}
                        </p>

                        <div class="mt-7 flex flex-col gap-3 sm:flex-row">
                            <a href="{{ $startUrl }}" @if ($startUsesGooglePopup) data-google-popup @endif class="inline-flex min-h-[3.25rem] items-center justify-center gap-2 rounded-full bg-slate-950 px-6 py-3 text-base font-semibold text-white shadow-xl shadow-slate-900/20 transition duration-300 hover:-translate-y-0.5 hover:bg-teal-800 focus:outline-none focus:ring-4 focus:ring-teal-100">
                                <x-landing.icon name="target" class="size-5" />
                                {{ $ctaText }}
                            </a>
                            <a href="#live-jobs" class="inline-flex min-h-[3.25rem] items-center justify-center gap-2 rounded-full border border-slate-200 bg-white px-6 py-3 text-base font-semibold text-slate-900 shadow-sm shadow-slate-900/5 transition duration-300 hover:-translate-y-0.5 hover:border-teal-200 hover:bg-teal-50 focus:outline-none focus:ring-4 focus:ring-teal-100">
                                <x-landing.icon name="globe" class="size-5 text-teal-700" />
                                Explore Live Roles
                            </a>
                        </div>

                        <div class="mt-8 grid grid-cols-2 gap-3 sm:grid-cols-4">
                            @foreach ([
                                ['icon' => 'target', 'title' => 'AI Match', 'copy' => 'Profile fit'],
                                ['icon' => 'file', 'title' => 'Resume Score', 'copy' => 'ATS insight'],
                                ['icon' => 'globe', 'title' => 'Live Jobs', 'copy' => $homepageJobCount > 0 ? $homepageJobCount.' active previews' : 'Updating now'],
                                ['icon' => 'lock', 'title' => 'Apply Access', 'copy' => 'Unlocked later'],
                            ] as $metric)
                                <div class="rounded-2xl border border-white/80 bg-white/88 p-4 shadow-sm shadow-slate-900/[0.04]">
                                    <span class="flex size-9 items-center justify-center rounded-xl bg-teal-50 text-teal-700">
                                        <x-landing.icon :name="$metric['icon']" class="size-4" />
                                    </span>
                                    <p class="mt-3 text-sm font-semibold text-slate-950">{{ $metric['title'] }}</p>
                                    <p class="mt-1 text-xs leading-5 text-slate-500">{{ $metric['copy'] }}</p>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="reveal lg:pl-4">
                        <div class="relative rounded-[2.2rem] border border-white bg-white/90 p-3 shadow-2xl shadow-slate-900/10 ring-1 ring-slate-900/5 backdrop-blur">
                            <div class="absolute -right-4 -top-4 hidden rounded-2xl border border-sky-100 bg-white px-4 py-3 shadow-xl shadow-sky-950/10 lg:block">
                                <p class="text-xs font-semibold text-sky-700">Source sync</p>
                                <p class="mt-1 text-lg font-semibold text-slate-950">{{ $homepageJobCount }}</p>
                            </div>

                            <div class="overflow-hidden rounded-[1.8rem] border border-slate-200 bg-[linear-gradient(145deg,#F8FAFC,#ECFDF5)]">
                                <div class="grid gap-4 p-4 sm:p-5 lg:grid-cols-[0.95fr_1.05fr]">
                                    <div class="rounded-[1.45rem] bg-slate-950 p-5 text-white shadow-xl shadow-slate-950/15">
                                        <div class="flex items-center justify-between">
                                            <div>
                                                <p class="text-xs font-semibold uppercase tracking-[0.16em] text-teal-200">{{ $brandName }} AI</p>
                                                <h2 class="mt-2 text-xl font-semibold">Matching engine</h2>
                                            </div>
                                            <span class="flex size-11 items-center justify-center rounded-2xl bg-white/10 text-teal-200">
                                                <x-landing.icon name="sparkles" />
                                            </span>
                                        </div>

                                        <svg class="mt-6 w-full" viewBox="0 0 320 230" fill="none" aria-label="Profile to job matching graphic">
                                            <defs>
                                                <linearGradient id="matchGradient" x1="54" x2="270" y1="24" y2="200" gradientUnits="userSpaceOnUse">
                                                    <stop stop-color="#2DD4BF" />
                                                    <stop offset="1" stop-color="#38BDF8" />
                                                </linearGradient>
                                            </defs>
                                            <path d="M70 72C112 22 203 28 247 81C292 135 255 204 174 207C93 210 27 125 70 72Z" fill="url(#matchGradient)" opacity=".16" />
                                            <path d="M78 72H148M172 72H242M78 116H122M148 116H242M78 160H168M194 160H242" stroke="#99F6E4" stroke-width="8" stroke-linecap="round" opacity=".75" />
                                            <circle cx="92" cy="72" r="27" fill="#0F766E" stroke="#CCFBF1" stroke-width="3" />
                                            <circle cx="228" cy="160" r="31" fill="#0369A1" stroke="#E0F2FE" stroke-width="3" />
                                            <circle cx="160" cy="116" r="42" fill="#FFFFFF" />
                                            <path d="M146 117l10 10 22-27" stroke="#0F766E" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" />
                                            <circle cx="92" cy="72" r="8" fill="#CCFBF1" />
                                            <circle cx="228" cy="160" r="9" fill="#E0F2FE" />
                                        </svg>

                                        <div class="mt-5 grid grid-cols-3 gap-2">
                                            @foreach (['Profile', 'Resume', 'Sources'] as $label)
                                                <div class="rounded-2xl bg-white/8 p-3">
                                                    <p class="text-xs font-medium text-slate-300">{{ $label }}</p>
                                                    <div class="mt-2 h-1.5 rounded-full bg-white/10">
                                                        <div class="h-full rounded-full bg-teal-300" style="width: {{ $loop->iteration * 24 + 16 }}%"></div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>

                                    <div class="grid gap-3">
                                        @foreach ([
                                            ['icon' => 'file', 'title' => 'Questionnaire signal', 'copy' => 'Role goals, skills, availability'],
                                            ['icon' => 'chart', 'title' => 'Resume intelligence', 'copy' => 'ATS readiness and keyword gaps'],
                                            ['icon' => 'globe', 'title' => 'Live source previews', 'copy' => $homepageJobCount > 0 ? $homepageJobCount.' active records available' : 'Waiting for synced jobs'],
                                            ['icon' => 'lock', 'title' => 'Locked apply access', 'copy' => 'Apply links stay private until onboarding'],
                                        ] as $item)
                                            <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm shadow-slate-900/[0.04]">
                                                <div class="flex gap-3">
                                                    <span class="flex size-10 shrink-0 items-center justify-center rounded-2xl bg-teal-50 text-teal-700">
                                                        <x-landing.icon :name="$item['icon']" />
                                                    </span>
                                                    <div>
                                                        <p class="text-sm font-semibold text-slate-950">{{ $item['title'] }}</p>
                                                        <p class="mt-1 text-xs leading-5 text-slate-500">{{ $item['copy'] }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="border-y border-slate-200/80 bg-white">
                <div class="mx-auto grid max-w-7xl gap-3 px-4 py-6 sm:grid-cols-2 sm:px-6 lg:grid-cols-6 lg:px-8">
                    @foreach ($features as $feature)
                        <article class="reveal rounded-2xl border border-slate-100 bg-[linear-gradient(145deg,#FFFFFF,#F8FAFC)] p-4 transition duration-300 hover:-translate-y-0.5 hover:border-teal-200 hover:shadow-lg hover:shadow-slate-900/[0.05]">
                            <span class="inline-flex size-10 items-center justify-center rounded-2xl bg-teal-50 text-teal-700 shadow-sm shadow-slate-900/[0.04]">
                                <x-landing.icon :name="$feature['icon']" />
                            </span>
                            <h3 class="mt-3 text-sm font-semibold text-slate-950">{{ $feature['title'] }}</h3>
                            <p class="mt-1 text-xs leading-5 text-slate-500">{{ $feature['copy'] }}</p>
                        </article>
                    @endforeach
                </div>
            </section>

            <section id="how-it-works" class="mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8">
                <div class="reveal max-w-2xl">
                    <p class="text-sm font-semibold text-teal-700">How it works</p>
                    <h2 class="mt-3 text-3xl font-semibold tracking-tight text-slate-950 sm:text-4xl">A guided path from profile to matched remote jobs.</h2>
                    <p class="mt-4 text-base leading-7 text-slate-600">Start with a short profile flow, then unlock ranked roles, resume intelligence, and tracked applications inside your workspace.</p>
                </div>

                <div class="relative mt-10">
                    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-6">
                        @foreach ($steps as $step)
                            <article class="reveal group relative rounded-3xl border border-slate-200 bg-white p-5 shadow-sm shadow-slate-900/[0.04] transition duration-300 hover:-translate-y-1 hover:border-teal-200 hover:shadow-xl hover:shadow-slate-900/[0.07]">
                                <span class="inline-flex size-10 items-center justify-center rounded-2xl bg-teal-50 text-sm font-semibold text-teal-700 transition group-hover:bg-teal-700 group-hover:text-white">{{ $step['number'] }}</span>
                                <h3 class="mt-5 text-base font-semibold text-slate-950">{{ $step['title'] }}</h3>
                                <p class="mt-3 text-sm leading-6 text-slate-500">{{ $step['copy'] }}</p>
                            </article>
                        @endforeach
                    </div>
                </div>
            </section>

            <section id="live-jobs" class="relative overflow-hidden bg-white">
                <div class="absolute inset-x-0 top-0 h-48 bg-[linear-gradient(180deg,#ECFDF5_0%,rgba(255,255,255,0)_100%)]"></div>
                <div class="relative mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8">
                    <div class="reveal grid gap-6 lg:grid-cols-[0.78fr_0.22fr] lg:items-end">
                        <div class="max-w-3xl">
                            <p class="inline-flex items-center gap-2 rounded-full border border-teal-200 bg-white px-3 py-2 text-sm font-semibold text-teal-700 shadow-sm shadow-slate-900/[0.04]">
                                <x-landing.icon name="globe" class="size-4" />
                                Live remote job previews
                            </p>
                            <h2 class="mt-4 text-3xl font-semibold tracking-tight text-slate-950 sm:text-4xl">Explore remote jobs currently available online.</h2>
                            <p class="mt-4 text-base leading-7 text-slate-600">Fresh roles from approved sources appear here with title, location, salary, tags, and source. Full descriptions, filters, and apply links unlock after onboarding.</p>
                        </div>
                        <div class="rounded-[1.5rem] border border-slate-200 bg-white p-4 shadow-lg shadow-slate-900/[0.06]">
                            <div class="flex items-center gap-3">
                                <span class="flex size-11 items-center justify-center rounded-2xl bg-teal-50 text-teal-700">
                                    <x-landing.icon name="briefcase" />
                                </span>
                                <div>
                                    <p class="text-2xl font-semibold text-slate-950">{{ $homepageJobCount }}</p>
                                    <p class="text-xs font-medium text-slate-500">active previews</p>
                                </div>
                            </div>
                            <div class="mt-3 rounded-xl bg-amber-50 px-3 py-2 text-xs font-semibold text-amber-800">Apply links locked</div>
                        </div>
                    </div>

                    @if ($homepageJobs->isNotEmpty())
                        <div class="mt-9 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                            @foreach ($homepageJobs as $job)
                                <x-landing.job-preview-card :job="$job" class="reveal" />
                            @endforeach
                        </div>
                    @else
                        <div class="reveal mt-9 overflow-hidden rounded-[2rem] border border-dashed border-slate-300 bg-slate-50 p-8 text-center">
                            <svg class="mx-auto h-32 w-56 text-teal-200" viewBox="0 0 260 150" fill="none" aria-hidden="true">
                                <rect x="32" y="28" width="196" height="98" rx="24" fill="white" stroke="currentColor" stroke-width="2" />
                                <path d="M62 65h58M62 89h104M62 110h72" stroke="#0F766E" stroke-width="8" stroke-linecap="round" opacity=".55" />
                                <circle cx="190" cy="76" r="22" fill="#CCFBF1" />
                                <path d="m181 77 7 7 14-18" stroke="#0F766E" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            <h3 class="mt-4 text-lg font-semibold text-slate-950">Fresh remote roles are being updated.</h3>
                            <p class="mx-auto mt-2 max-w-xl text-sm leading-6 text-slate-500">Complete your profile to get personalized matches.</p>
                        </div>
                    @endif
                </div>
            </section>

            <section id="categories" class="mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8">
                <div class="reveal flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
                    <div class="max-w-2xl">
                        <p class="text-sm font-semibold text-teal-700">Job Categories</p>
                        <h2 class="mt-3 text-3xl font-semibold tracking-tight text-slate-950 sm:text-4xl">Remote roles across many career paths.</h2>
                    </div>
                    <p class="max-w-md text-sm leading-6 text-slate-500">Matching is based on your skills, resume, experience, preferred role, and work preferences.</p>
                </div>

                <div class="mt-9 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
                    @foreach ($categories as $category)
                        <article class="reveal rounded-3xl border border-slate-200/80 bg-white p-5 shadow-sm shadow-slate-900/[0.04] transition duration-300 hover:-translate-y-1 hover:border-teal-200 hover:bg-[linear-gradient(145deg,#FFFFFF,#F0FDFA)] hover:shadow-xl hover:shadow-slate-900/[0.07]">
                            <span class="inline-flex size-11 items-center justify-center rounded-2xl bg-teal-50 text-teal-700">
                                <x-landing.icon :name="$category['icon']" />
                            </span>
                            <h3 class="mt-4 text-base font-semibold text-slate-950">{{ $category['title'] }}</h3>
                            <p class="mt-2 text-sm leading-6 text-slate-500">{{ $category['copy'] }}</p>
                        </article>
                    @endforeach
                </div>
            </section>

            <section id="ats-score" class="bg-white">
                <div class="mx-auto grid max-w-7xl gap-10 px-4 py-16 sm:px-6 sm:py-20 lg:grid-cols-[0.9fr_1.1fr] lg:items-center lg:px-8">
                    <div class="reveal">
                        <p class="text-sm font-semibold text-teal-700">AI resume and ATS score</p>
                        <h2 class="mt-3 text-3xl font-semibold tracking-tight text-slate-950 sm:text-4xl">Know what your resume says before jobs are shown.</h2>
                        <p class="mt-4 text-base leading-7 text-slate-600">
                            Before showing jobs, the platform checks your resume and profile for skills, missing keywords, role fit, and application readiness.
                        </p>

                        <div class="mt-7 grid gap-3 sm:grid-cols-2">
                            @foreach ([
                                ['icon' => 'tag', 'title' => 'Extracted skills', 'copy' => 'Detects strongest role signals.'],
                                ['icon' => 'search', 'title' => 'Missing keywords', 'copy' => 'Finds gaps before applying.'],
                                ['icon' => 'target', 'title' => 'Role suggestions', 'copy' => 'Maps profile to remote paths.'],
                                ['icon' => 'shield', 'title' => 'Resume readiness', 'copy' => 'Highlights application strength.'],
                            ] as $item)
                                <div class="rounded-2xl border border-slate-200 bg-slate-50 p-4">
                                    <span class="flex size-9 items-center justify-center rounded-xl bg-white text-teal-700 shadow-sm shadow-slate-900/[0.04]">
                                        <x-landing.icon :name="$item['icon']" class="size-4" />
                                    </span>
                                    <p class="mt-3 text-sm font-semibold text-slate-950">{{ $item['title'] }}</p>
                                    <p class="mt-1 text-xs leading-5 text-slate-500">{{ $item['copy'] }}</p>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="reveal rounded-[2rem] border border-slate-200 bg-slate-50 p-4 shadow-xl shadow-slate-900/[0.07] sm:p-5">
                        <div class="rounded-[1.5rem] bg-white p-5 shadow-sm shadow-slate-900/[0.04]">
                            <div class="flex items-center justify-between gap-4">
                                <div>
                                    <p class="text-xs font-semibold uppercase tracking-[0.16em] text-slate-400">Resume Intelligence</p>
                                    <h3 class="mt-2 text-xl font-semibold text-slate-950">ATS report preview</h3>
                                </div>
                                <span class="rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-700">Locked</span>
                            </div>

                            <div class="mt-6 rounded-2xl border border-amber-200 bg-amber-50 p-4">
                                <div class="flex items-center justify-between">
                                    <span class="text-sm font-semibold text-slate-950">ATS Score</span>
                                    <span class="text-sm font-semibold text-amber-700">Locked</span>
                                </div>
                                <div class="mt-4 h-2 overflow-hidden rounded-full bg-white">
                                    <div class="h-full w-2/3 rounded-full bg-amber-300"></div>
                                </div>
                            </div>

                            <div class="mt-4 grid gap-3">
                                @foreach ([
                                    ['Skill Detection', 'Locked', 'w-4/5'],
                                    ['Missing Keywords', 'Locked', 'w-3/5'],
                                    ['Resume Requirements', 'Locked', 'w-2/3'],
                                    ['Resume Content Gaps', 'Locked', 'w-1/2'],
                                ] as [$label, $state, $width])
                                    <div class="rounded-2xl border border-slate-200 bg-slate-50 p-4">
                                        <div class="flex items-center justify-between gap-3">
                                            <span class="text-sm font-medium text-slate-600">{{ $label }}</span>
                                            <span class="text-xs font-semibold text-slate-500">{{ $state }}</span>
                                        </div>
                                        <div class="mt-3 h-1.5 overflow-hidden rounded-full bg-white">
                                            <div class="h-full {{ $width }} rounded-full bg-teal-200"></div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="mx-auto grid max-w-7xl gap-10 px-4 py-16 sm:px-6 sm:py-20 lg:grid-cols-[0.95fr_1.05fr] lg:items-center lg:px-8">
                <div class="reveal">
                    <p class="text-sm font-semibold text-teal-700">Why {{ $brandName }}</p>
                    <h2 class="mt-3 text-3xl font-semibold tracking-tight text-slate-950 sm:text-4xl">Spend less time searching and more time applying with clarity.</h2>
                    <p class="mt-4 text-base leading-7 text-slate-600">Remote job search gets noisy fast. {{ $brandName }} organizes your profile signals, resume insights, and job discovery into one guided workflow.</p>
                </div>

                <div class="grid gap-3 sm:grid-cols-2">
                    @foreach ($benefits as $benefit)
                        <div class="reveal rounded-2xl border border-slate-200 bg-white p-4 shadow-sm shadow-slate-900/[0.04]">
                            <div class="flex gap-3">
                                <span class="flex size-10 shrink-0 items-center justify-center rounded-2xl bg-teal-50 text-teal-700">
                                    <x-landing.icon :name="$benefit['icon']" />
                                </span>
                                <p class="pt-2 text-sm font-medium leading-6 text-slate-800">{{ $benefit['copy'] }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </section>

            <section class="bg-white">
                <div class="mx-auto grid max-w-7xl gap-10 px-4 py-16 sm:px-6 sm:py-20 lg:grid-cols-[0.88fr_1.12fr] lg:items-center lg:px-8">
                    <div class="reveal">
                        <p class="text-sm font-semibold text-teal-700">Dashboard preview</p>
                        <h2 class="mt-3 text-3xl font-semibold tracking-tight text-slate-950 sm:text-4xl">A clean dashboard for matched jobs, filters, and tracking.</h2>
                        <p class="mt-4 text-base leading-7 text-slate-600">After completion, the dashboard brings together best matches, filters, saved jobs, resume score, and application tracking.</p>
                    </div>

                    <div class="reveal overflow-hidden rounded-[2rem] border border-slate-200 bg-[linear-gradient(145deg,#F8FAFC,#EFF6FF)] p-4 shadow-xl shadow-slate-900/[0.07]">
                        <div class="rounded-[1.5rem] bg-white p-4 shadow-sm shadow-slate-900/[0.04] sm:p-5">
                            <div class="flex flex-wrap gap-2">
                                @foreach (['Best Matches', 'Saved Jobs', 'Resume Score'] as $tab)
                                    <span class="rounded-full {{ $loop->first ? 'bg-teal-700 text-white' : 'bg-slate-100 text-slate-600' }} px-4 py-2 text-xs font-semibold">{{ $tab }}</span>
                                @endforeach
                            </div>

                            <div class="mt-5 grid gap-3 lg:grid-cols-[0.72fr_0.28fr]">
                                <div class="rounded-2xl border border-slate-200 bg-slate-50 p-4">
                                    <div class="flex flex-wrap gap-2">
                                        @foreach (['Category', 'Experience', 'Work type', 'Saved', 'Applied'] as $filter)
                                            <span class="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-medium text-slate-500">{{ $filter }}</span>
                                        @endforeach
                                    </div>
                                    <div class="mt-5 grid gap-3">
                                        @foreach ([
                                            ['label' => 'Match quality', 'value' => 'High fit', 'width' => 'w-[86%]', 'icon' => 'target'],
                                            ['label' => 'Resume readiness', 'value' => 'ATS checked', 'width' => 'w-[72%]', 'icon' => 'file'],
                                            ['label' => 'Application tracking', 'value' => 'Trackable', 'width' => 'w-[64%]', 'icon' => 'chart'],
                                        ] as $row)
                                            <div class="rounded-2xl border border-slate-200 bg-white p-4">
                                                <div class="flex items-center gap-3">
                                                    <span class="flex size-10 shrink-0 items-center justify-center rounded-2xl bg-teal-50 text-teal-700">
                                                        <x-landing.icon :name="$row['icon']" />
                                                    </span>
                                                    <div class="min-w-0 flex-1">
                                                        <div class="flex items-center justify-between gap-3">
                                                            <p class="text-sm font-semibold text-slate-950">{{ $row['label'] }}</p>
                                                            <span class="rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700">{{ $row['value'] }}</span>
                                                        </div>
                                                        <div class="mt-3 h-2 overflow-hidden rounded-full bg-slate-100">
                                                            <div class="h-full {{ $row['width'] }} rounded-full bg-teal-500"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>

                                <div class="rounded-2xl border border-teal-100 bg-teal-50 p-4">
                                    <p class="text-sm font-semibold text-teal-900">Resume score</p>
                                    <p class="mt-4 text-4xl font-semibold text-teal-700">78</p>
                                    <p class="mt-2 text-xs leading-5 text-teal-800">Unlocked after resume analysis.</p>
                                    <div class="mt-4 h-2 overflow-hidden rounded-full bg-white">
                                        <div class="h-full w-[78%] rounded-full bg-teal-500"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section id="faq" class="mx-auto max-w-4xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8">
                <div class="reveal text-center">
                    <p class="text-sm font-semibold text-teal-700">FAQ</p>
                    <h2 class="mt-3 text-3xl font-semibold tracking-tight text-slate-950 sm:text-4xl">Honest answers before you begin.</h2>
                </div>

                <div class="mt-9 space-y-3">
                    @foreach ($faqs as $index => $faq)
                        <article class="reveal rounded-3xl border border-slate-200 bg-white p-5 shadow-sm shadow-slate-900/[0.04]" data-faq-item>
                            <h3>
                                <button type="button" class="flex w-full items-center justify-between gap-4 text-left text-base font-semibold text-slate-950" aria-expanded="false" aria-controls="faq-panel-{{ $index }}" data-faq-toggle>
                                    <span>{{ $faq['question'] }}</span>
                                    <span class="flex size-8 shrink-0 items-center justify-center rounded-full bg-slate-100 text-lg font-medium text-slate-500 transition" data-faq-icon>+</span>
                                </button>
                            </h3>
                            <div id="faq-panel-{{ $index }}" class="faq-panel" role="region" hidden data-faq-panel>
                                <p class="pt-4 text-sm leading-7 text-slate-600">{{ $faq['answer'] }}</p>
                            </div>
                        </article>
                    @endforeach
                </div>
            </section>

            <section class="mx-auto max-w-7xl px-4 pb-16 sm:px-6 sm:pb-20 lg:px-8">
                <div class="reveal rounded-[2rem] border border-teal-100 bg-[linear-gradient(135deg,#ECFDF5_0%,#EFF6FF_100%)] p-6 text-center shadow-xl shadow-slate-900/[0.08] sm:p-10">
                    <p class="text-sm font-semibold text-teal-700">Ready when you are</p>
                    <h2 class="mx-auto mt-3 max-w-2xl text-3xl font-semibold tracking-tight text-slate-950 sm:text-4xl">
                        Ready to discover remote jobs that match your profile?
                    </h2>
                    <p class="mx-auto mt-4 max-w-xl text-base leading-7 text-slate-600">Start with a guided questionnaire and unlock AI-powered resume insights before viewing personalized remote job matches.</p>
                    <a href="{{ $startUrl }}" @if ($startUsesGooglePopup) data-google-popup @endif class="mt-7 inline-flex min-h-[3.25rem] w-full items-center justify-center rounded-full bg-teal-700 px-7 py-3 text-base font-semibold text-white shadow-xl shadow-teal-700/20 transition duration-300 hover:-translate-y-0.5 hover:bg-teal-800 focus:outline-none focus:ring-4 focus:ring-teal-100 sm:w-auto">
                        {{ $ctaText }}
                    </a>
                </div>
            </section>
        </main>

        <div class="mx-auto max-w-7xl px-4 pb-8 sm:px-6 lg:px-8">
            <x-site-footer />
        </div>

        <div class="fixed inset-x-0 bottom-0 z-40 border-t border-slate-200 bg-white/95 p-3 shadow-2xl shadow-slate-900/15 backdrop-blur sm:hidden">
            <a href="{{ $startUrl }}" @if ($startUsesGooglePopup) data-google-popup @endif class="flex min-h-12 items-center justify-center rounded-full bg-teal-700 px-5 text-base font-semibold text-white shadow-lg shadow-teal-700/20">
                {{ $ctaText }}
            </a>
        </div>
    </div>

    @unless ($frontendUser)
        <x-auth-modal />
    @endunless

    <script>
        (() => {
            const navbar = document.querySelector('[data-navbar]');
            const toggle = document.querySelector('[data-menu-toggle]');
            const menu = document.querySelector('[data-mobile-menu]');
            const links = document.querySelectorAll('[data-mobile-link]');
            const scrollToHash = (hash) => {
                const target = document.querySelector(hash);

                if (!target) {
                    return false;
                }

                target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                history.replaceState(null, '', hash);

                return true;
            };

            const updateNavbar = () => {
                navbar?.classList.toggle('is-elevated', window.scrollY > 8);
            };

            updateNavbar();
            window.addEventListener('scroll', updateNavbar, { passive: true });

            if (toggle && menu) {
                toggle.addEventListener('click', () => {
                    const isOpen = !menu.classList.contains('hidden');
                    menu.classList.toggle('hidden');
                    toggle.setAttribute('aria-expanded', String(!isOpen));
                });

                links.forEach((link) => {
                    link.addEventListener('click', () => {
                        menu.classList.add('hidden');
                        toggle.setAttribute('aria-expanded', 'false');
                    });
                });
            }

            document.querySelectorAll('a[href^="#"]').forEach((link) => {
                link.addEventListener('click', (event) => {
                    const hash = link.getAttribute('href');

                    if (!hash || hash === '#') {
                        return;
                    }

                    if (scrollToHash(hash)) {
                        event.preventDefault();
                    }
                });
            });

            const revealItems = document.querySelectorAll('.reveal');

            if ('IntersectionObserver' in window) {
                const observer = new IntersectionObserver((entries) => {
                    entries.forEach((entry) => {
                        if (entry.isIntersecting) {
                            entry.target.classList.add('is-visible');
                            observer.unobserve(entry.target);
                        }
                    });
                }, { threshold: 0.12 });

                revealItems.forEach((item) => observer.observe(item));
            } else {
                revealItems.forEach((item) => item.classList.add('is-visible'));
            }

            document.querySelectorAll('[data-faq-item]').forEach((item) => {
                const button = item.querySelector('[data-faq-toggle]');
                const panel = item.querySelector('[data-faq-panel]');
                const icon = item.querySelector('[data-faq-icon]');

                if (!button || !panel) {
                    return;
                }

                button.addEventListener('click', () => {
                    const expanded = button.getAttribute('aria-expanded') === 'true';
                    button.setAttribute('aria-expanded', String(!expanded));

                    if (expanded) {
                        panel.style.maxHeight = panel.scrollHeight + 'px';
                        requestAnimationFrame(() => {
                            panel.style.maxHeight = '0px';
                        });
                        window.setTimeout(() => {
                            panel.hidden = true;
                        }, 240);
                        if (icon) icon.textContent = '+';
                        return;
                    }

                    panel.hidden = false;
                    panel.style.maxHeight = '0px';
                    requestAnimationFrame(() => {
                        panel.style.maxHeight = panel.scrollHeight + 'px';
                    });
                    if (icon) icon.textContent = '-';
                });
            });
        })();
    </script>
    </div>
</body>
</html>
