<?php
    $booklioDemo = require resource_path('data/booklio.php');
    $features = $booklioDemo['landing']['features'];
    $useCases = $booklioDemo['landing']['use_cases'];
    $plans = $booklioDemo['plans'];
?>

<!DOCTYPE html>
<html lang="<?php echo e(str_replace('_', '-', app()->getLocale())); ?>" dir="<?php echo e($layoutDirection ?? 'ltr'); ?>">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">

    <title>Booklio - Appointment Booking SaaS</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <?php if(file_exists(public_path('build/manifest.json'))): ?>
        <?php echo app('Illuminate\Foundation\Vite')(['resources/css/app.css']); ?>
    <?php else: ?>
        <script src="https://cdn.tailwindcss.com"></script>
        <script>
            tailwind.config = {
                theme: {
                    extend: {
                        fontFamily: { sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'] },
                        colors: {
                            booklio: {
                                primary: '#2563EB',
                                secondary: '#0EA5E9',
                                success: '#10B981',
                                warning: '#F59E0B',
                                danger: '#EF4444',
                                dark: '#111827',
                                muted: '#6B7280',
                                background: '#F8FAFC',
                                border: '#E5E7EB',
                            }
                        },
                        boxShadow: {
                            card: '0 8px 24px rgba(15, 23, 42, 0.06)',
                            glow: '0 24px 80px rgba(37, 99, 235, 0.16)',
                            soft: '0 1px 2px rgba(15, 23, 42, 0.06)',
                        }
                    }
                }
            }
        </script>
    <?php endif; ?>
    <script src="https://unpkg.com/lucide@latest"></script>
    <style>
        body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
        .booklio-grid-bg {
            background-image:
                linear-gradient(rgba(226, 232, 240, 0.68) 1px, transparent 1px),
                linear-gradient(90deg, rgba(226, 232, 240, 0.68) 1px, transparent 1px);
            background-size: 48px 48px;
        }
        .hero-mask {
            mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
        }
        html[dir="rtl"] body { text-align: right; }
        html[dir="rtl"] .text-left { text-align: right !important; }
        html[dir="rtl"] .lg\:text-left { text-align: right !important; }
        html[dir="rtl"] [data-lucide="arrow-right"] { transform: scaleX(-1); }
    </style>
</head>
<body class="min-h-screen overflow-x-hidden bg-white text-booklio-dark antialiased">
    <header class="sticky top-0 z-40 border-b border-booklio-border/80 bg-white/95 backdrop-blur">
        <div class="mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
            <a href="#top" class="inline-flex items-center gap-3">
                <span class="flex h-10 w-10 items-center justify-center rounded-lg bg-booklio-primary text-xl font-extrabold text-white shadow-card shadow-blue-500/20">B</span>
                <span class="text-xl font-extrabold tracking-tight">Booklio</span>
            </a>
            <nav class="hidden items-center gap-7 text-sm font-bold text-slate-600 lg:flex">
                <a href="#features" class="transition hover:text-booklio-primary">Features</a>
                <a href="#how-it-works" class="transition hover:text-booklio-primary">How it works</a>
                <a href="#use-cases" class="transition hover:text-booklio-primary">Use cases</a>
                <a href="#pricing" class="transition hover:text-booklio-primary">Pricing</a>
                <a href="#faq" class="transition hover:text-booklio-primary">FAQ</a>
            </nav>
            <div class="flex items-center gap-2">
                <a href="<?php echo e(route('login')); ?>" class="hidden h-10 items-center rounded-lg px-4 text-sm font-bold text-slate-600 transition hover:bg-slate-50 hover:text-booklio-primary sm:inline-flex">Login</a>
                <a href="<?php echo e(route('register')); ?>" class="inline-flex h-10 items-center justify-center rounded-lg bg-booklio-primary px-4 text-sm font-extrabold text-white shadow-card shadow-blue-500/20 transition hover:bg-blue-700">Start Free Trial</a>
            </div>
        </div>
    </header>

    <main>
        <section id="top" class="relative overflow-hidden border-b border-booklio-border bg-booklio-background">
            <div class="absolute inset-0 booklio-grid-bg opacity-70"></div>
            <div class="relative mx-auto max-w-7xl px-4 pb-8 pt-12 text-center sm:px-6 sm:pt-16 lg:px-8">
                <div class="mx-auto max-w-4xl">
                    <span class="inline-flex items-center gap-2 rounded-full border border-blue-100 bg-white px-3 py-1.5 text-xs font-extrabold uppercase tracking-wide text-booklio-primary shadow-soft">
                        <i data-lucide="sparkles" class="h-4 w-4"></i>
                        Built for service businesses
                    </span>
                    <h1 class="mt-6 text-[2rem] font-black leading-[1.12] tracking-tight text-booklio-dark sm:text-5xl lg:text-6xl">Booking, Invoices &amp; Reminders &mdash; All in One Simple SaaS</h1>
                    <p class="mx-auto mt-4 max-w-3xl text-sm font-medium leading-7 text-booklio-muted sm:mt-5 sm:text-lg sm:leading-8">Booklio helps salons, clinics, consultants, and service businesses manage appointments, customers, invoices, and WhatsApp reminders from one beautiful dashboard.</p>
                    <div class="mt-6 flex flex-col items-center justify-center gap-3 sm:mt-8 sm:flex-row">
                        <a href="<?php echo e(route('register')); ?>" class="inline-flex h-12 w-full items-center justify-center gap-2 rounded-lg bg-booklio-primary px-6 text-sm font-extrabold text-white shadow-glow transition hover:bg-blue-700 sm:w-auto">
                            Start Free Trial
                            <i data-lucide="arrow-right" class="h-4 w-4"></i>
                        </a>
                        <a href="<?php echo e(route('demo')); ?>" class="inline-flex h-12 w-full items-center justify-center gap-2 rounded-lg border border-booklio-border bg-white px-6 text-sm font-extrabold text-booklio-dark shadow-card transition hover:border-blue-200 hover:text-booklio-primary sm:w-auto">
                            <i data-lucide="play-circle" class="h-4 w-4"></i>
                            View Demo
                        </a>
                    </div>
                    <div class="mt-7 hidden flex-wrap items-center justify-center gap-2 text-xs font-bold text-slate-600 sm:flex">
                        <span class="rounded-full border border-booklio-border bg-white px-3 py-1.5 shadow-soft">Laravel SaaS</span>
                        <span class="rounded-full border border-booklio-border bg-white px-3 py-1.5 shadow-soft">WhatsApp ready</span>
                        <span class="rounded-full border border-booklio-border bg-white px-3 py-1.5 shadow-soft">CodeCanyon quality</span>
                    </div>
                </div>

                <div class="mx-auto mt-6 max-w-sm overflow-hidden rounded-lg border border-booklio-border bg-white text-left shadow-glow sm:hidden">
                    <div class="flex items-center justify-between border-b border-booklio-border px-3 py-2.5">
                        <div class="flex items-center gap-2">
                            <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-booklio-primary text-sm font-black text-white">B</span>
                            <span class="text-sm font-black">Booklio Dashboard</span>
                        </div>
                        <span class="rounded-full bg-emerald-50 px-2 py-1 text-[11px] font-black text-emerald-600">Live</span>
                    </div>
                    <div class="space-y-2 bg-booklio-background p-3">
                        <div class="grid grid-cols-2 gap-2">
                            <div class="rounded-lg border border-booklio-border bg-white p-2.5 shadow-card">
                                <p class="text-[11px] font-bold text-booklio-muted">Bookings</p>
                                <p class="mt-1 text-xl font-black">128</p>
                            </div>
                            <div class="rounded-lg border border-booklio-border bg-white p-2.5 shadow-card">
                                <p class="text-[11px] font-bold text-booklio-muted">Revenue</p>
                                <p class="mt-1 text-xl font-black">$8.4k</p>
                            </div>
                        </div>
                        <div class="rounded-lg border border-blue-100 bg-blue-50 p-2.5">
                            <div class="flex items-start justify-between gap-3">
                                <div class="min-w-0">
                                    <p class="text-sm font-black text-blue-700">Hair Cut & Style</p>
                                    <p class="mt-1 text-xs font-bold text-slate-600">Jessica Miller - 9:00 AM</p>
                                </div>
                                <span class="shrink-0 rounded-full bg-emerald-50 px-2 py-1 text-[11px] font-black text-emerald-600">Reminder sent</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="hero-mask mx-auto mt-10 hidden max-w-6xl sm:block">
                    <div class="overflow-hidden rounded-lg border border-booklio-border bg-white text-left shadow-glow">
                        <div class="flex items-center justify-between border-b border-booklio-border bg-white px-4 py-3">
                            <div class="flex items-center gap-2">
                                <span class="h-3 w-3 rounded-full bg-red-400"></span>
                                <span class="h-3 w-3 rounded-full bg-amber-400"></span>
                                <span class="h-3 w-3 rounded-full bg-emerald-400"></span>
                            </div>
                            <div class="hidden w-80 rounded-lg border border-booklio-border bg-slate-50 px-3 py-2 text-xs font-semibold text-slate-400 sm:block">Search customers, appointments...</div>
                        </div>
                        <div class="grid min-h-[360px] grid-cols-1 lg:grid-cols-[220px_minmax(0,1fr)]">
                            <aside class="hidden border-r border-booklio-border bg-white p-4 lg:block">
                                <div class="mb-6 flex items-center gap-3">
                                    <span class="flex h-10 w-10 items-center justify-center rounded-lg bg-booklio-primary text-lg font-black text-white">B</span>
                                    <span class="font-black">Booklio</span>
                                </div>
                                <div class="space-y-2">
                                    <?php $__currentLoopData = ['Dashboard', 'Appointments', 'Calendar', 'Customers', 'Invoices', 'Reports']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <div class="<?php echo e($loop->first ? 'bg-booklio-primary text-white shadow-card' : 'text-slate-600'); ?> flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-bold">
                                            <span class="<?php echo e($loop->first ? 'bg-white/20' : 'bg-slate-100'); ?> h-6 w-6 rounded-md"></span>
                                            <?php echo e($item); ?>

                                        </div>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </div>
                            </aside>
                            <div class="min-w-0 bg-booklio-background p-4 sm:p-6">
                                <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                                    <div>
                                        <p class="text-xs font-bold uppercase tracking-wide text-booklio-muted">Business dashboard</p>
                                        <h2 class="mt-1 text-2xl font-black tracking-tight">Today at Glow Beauty</h2>
                                    </div>
                                    <span class="inline-flex w-fit rounded-full bg-emerald-50 px-3 py-1 text-xs font-extrabold text-emerald-600">18 appointments today</span>
                                </div>
                                <div class="mt-5 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
                                    <?php $__currentLoopData = [['Total Bookings', '128', '+19%'], ['Revenue', '$8,450', '+24%'], ['Pending Invoices', '12', '$2,300 due'], ['Upcoming', '18', 'Today & tomorrow']]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $metric): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <div class="rounded-lg border border-booklio-border bg-white p-4 shadow-card">
                                            <p class="text-xs font-bold text-booklio-muted"><?php echo e($metric[0]); ?></p>
                                            <p class="mt-2 text-2xl font-black"><?php echo e($metric[1]); ?></p>
                                            <p class="mt-2 text-xs font-bold <?php echo e(str_contains($metric[2], 'due') ? 'text-red-500' : 'text-emerald-600'); ?>"><?php echo e($metric[2]); ?></p>
                                        </div>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </div>
                                <div class="mt-5 grid gap-4 lg:grid-cols-[minmax(0,1.4fr)_minmax(260px,0.8fr)]">
                                    <div class="rounded-lg border border-booklio-border bg-white p-4 shadow-card">
                                        <div class="mb-4 flex items-center justify-between">
                                            <h3 class="font-black">Today's Schedule</h3>
                                            <span class="rounded-lg border border-booklio-border px-3 py-1.5 text-xs font-bold">May 15, 2026</span>
                                        </div>
                                        <div class="grid grid-cols-[48px_repeat(3,minmax(120px,1fr))] overflow-hidden rounded-lg border border-booklio-border text-xs">
                                            <div class="bg-slate-50 p-3 font-bold text-booklio-muted">9 AM</div>
                                            <div class="border-l border-booklio-border bg-blue-50 p-3 font-bold text-blue-700">Hair Cut<br><span class="font-medium text-slate-500">Jessica</span></div>
                                            <div class="border-l border-booklio-border p-3"></div>
                                            <div class="border-l border-booklio-border p-3"></div>
                                            <div class="border-t border-booklio-border bg-slate-50 p-3 font-bold text-booklio-muted">10 AM</div>
                                            <div class="border-l border-t border-booklio-border p-3"></div>
                                            <div class="border-l border-t border-booklio-border bg-emerald-50 p-3 font-bold text-emerald-700">Beard Trim<br><span class="font-medium text-slate-500">Michael</span></div>
                                            <div class="border-l border-t border-booklio-border p-3"></div>
                                            <div class="border-t border-booklio-border bg-slate-50 p-3 font-bold text-booklio-muted">11 AM</div>
                                            <div class="border-l border-t border-booklio-border p-3"></div>
                                            <div class="border-l border-t border-booklio-border p-3"></div>
                                            <div class="border-l border-t border-booklio-border bg-violet-50 p-3 font-bold text-violet-700">Facial<br><span class="font-medium text-slate-500">Sophia</span></div>
                                        </div>
                                    </div>
                                    <div class="rounded-lg border border-booklio-border bg-white p-4 shadow-card">
                                        <div class="mb-4 flex items-center justify-between">
                                            <h3 class="font-black">Upcoming</h3>
                                            <span class="text-xs font-extrabold text-booklio-primary">View all</span>
                                        </div>
                                        <div class="space-y-3">
                                            <?php $__currentLoopData = [['Jessica Miller', 'Hair Cut & Style', 'Confirmed'], ['Michael Brown', 'Beard Trim', 'Confirmed'], ['Sophia Davis', 'Facial Treatment', 'Pending']]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $appointment): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <div class="flex items-center justify-between gap-3 border-b border-booklio-border pb-3 last:border-b-0 last:pb-0">
                                                    <div class="min-w-0">
                                                        <p class="truncate text-sm font-extrabold"><?php echo e($appointment[0]); ?></p>
                                                        <p class="truncate text-xs font-semibold text-booklio-muted"><?php echo e($appointment[1]); ?></p>
                                                    </div>
                                                    <span class="<?php echo e($appointment[2] === 'Pending' ? 'bg-amber-50 text-amber-600' : 'bg-emerald-50 text-emerald-600'); ?> rounded-full px-2 py-1 text-[11px] font-black"><?php echo e($appointment[2]); ?></span>
                                                </div>
                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="dashboard-preview" class="bg-white py-16 sm:py-20">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="grid gap-10 lg:grid-cols-[0.85fr_1.15fr] lg:items-center">
                    <div>
                        <p class="text-sm font-extrabold uppercase tracking-wide text-booklio-primary">Dashboard preview</p>
                        <h2 class="mt-3 text-3xl font-black tracking-tight sm:text-4xl">A calm dashboard for busy appointment teams.</h2>
                        <p class="mt-4 text-base leading-8 text-booklio-muted">Booklio keeps the daily workflow visible without clutter. Owners can see bookings, revenue, invoices, staff availability, reminders, and booking links from one polished SaaS interface.</p>
                        <div class="mt-6 grid gap-3 sm:grid-cols-2">
                            <?php $__currentLoopData = ['Clean appointment timeline', 'Invoice and CRM widgets', 'Reminder activity feed', 'Booking link performance']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <div class="flex items-center gap-3 rounded-lg border border-booklio-border bg-booklio-background p-3 text-sm font-bold">
                                    <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-50 text-booklio-primary"><i data-lucide="check" class="h-4 w-4"></i></span>
                                    <?php echo e($item); ?>

                                </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>
                    </div>
                    <div class="rounded-lg border border-booklio-border bg-booklio-background p-3 shadow-glow">
                        <div class="grid gap-3 sm:grid-cols-2">
                            <div class="rounded-lg border border-booklio-border bg-white p-4 shadow-card">
                                <p class="text-xs font-bold text-booklio-muted">Booking Link & QR</p>
                                <div class="mt-4 rounded-lg bg-blue-50 p-3 text-sm font-extrabold text-booklio-primary">booklio.com/beauty-salon/book</div>
                                <div class="mt-4 grid grid-cols-3 gap-3 text-center">
                                    <div><p class="text-lg font-black">346</p><p class="text-xs font-bold text-booklio-muted">Clicks</p></div>
                                    <div><p class="text-lg font-black">128</p><p class="text-xs font-bold text-booklio-muted">Bookings</p></div>
                                    <div><p class="text-lg font-black">36.8%</p><p class="text-xs font-bold text-booklio-muted">Rate</p></div>
                                </div>
                            </div>
                            <div class="rounded-lg border border-booklio-border bg-white p-4 shadow-card">
                                <p class="text-xs font-bold text-booklio-muted">Recent reminders</p>
                                <div class="mt-4 space-y-3">
                                    <?php $__currentLoopData = [['WhatsApp', 'Jessica appointment', 'Sent'], ['Email', 'Invoice #124', 'Sent'], ['Follow-up', 'Amanda Taylor', 'Scheduled']]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $row): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <div class="flex items-center justify-between gap-3">
                                            <div class="min-w-0">
                                                <p class="truncate text-sm font-extrabold"><?php echo e($row[0]); ?></p>
                                                <p class="truncate text-xs font-semibold text-booklio-muted"><?php echo e($row[1]); ?></p>
                                            </div>
                                            <span class="rounded-full bg-emerald-50 px-2 py-1 text-[11px] font-black text-emerald-600"><?php echo e($row[2]); ?></span>
                                        </div>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </div>
                            </div>
                            <div class="rounded-lg border border-booklio-border bg-white p-4 shadow-card sm:col-span-2">
                                <div class="flex items-center justify-between">
                                    <p class="text-sm font-black">Revenue Trend</p>
                                    <p class="text-xs font-bold text-emerald-600">+24% this month</p>
                                </div>
                                <div class="mt-5 flex h-28 items-end gap-2">
                                    <?php $__currentLoopData = [32, 48, 42, 68, 58, 78, 72, 92, 88, 104, 96, 116]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $height): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <span class="flex-1 rounded-t-lg bg-blue-100" style="height: <?php echo e($height); ?>px"></span>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="features" class="border-y border-booklio-border bg-booklio-background py-16 sm:py-20">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="mx-auto max-w-3xl text-center">
                    <p class="text-sm font-extrabold uppercase tracking-wide text-booklio-primary">Features</p>
                    <h2 class="mt-3 text-3xl font-black tracking-tight sm:text-4xl">Everything a service business needs to book, bill, and follow up.</h2>
                </div>
                <div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
                    <?php $__currentLoopData = $features; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $feature): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <article class="rounded-lg border border-booklio-border bg-white p-5 shadow-card">
                            <span class="flex h-11 w-11 items-center justify-center rounded-lg bg-blue-50 text-booklio-primary"><i data-lucide="<?php echo e($feature['icon']); ?>" class="h-5 w-5"></i></span>
                            <h3 class="mt-4 text-base font-black"><?php echo e($feature['title']); ?></h3>
                            <p class="mt-2 text-sm leading-6 text-booklio-muted"><?php echo e($feature['description']); ?></p>
                        </article>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>
        </section>

        <section id="how-it-works" class="bg-white py-16 sm:py-20">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="grid gap-10 lg:grid-cols-[0.8fr_1.2fr] lg:items-start">
                    <div>
                        <p class="text-sm font-extrabold uppercase tracking-wide text-booklio-primary">How it works</p>
                        <h2 class="mt-3 text-3xl font-black tracking-tight sm:text-4xl">Launch a booking SaaS flow in four simple steps.</h2>
                        <p class="mt-4 text-base leading-8 text-booklio-muted">Booklio is designed for buyers who want a complete SaaS product foundation with modern UI screens ready for Laravel implementation.</p>
                    </div>
                    <div class="grid gap-4 sm:grid-cols-2">
                        <?php $__currentLoopData = [['1', 'Create business profile', 'Add logo, address, business hours, booking slug, and public page details.'], ['2', 'Add services and staff', 'Set duration, pricing, assigned staff, working hours, and buffer times.'], ['3', 'Share booking link', 'Customers book from a mobile-first page or QR code without calling the desk.'], ['4', 'Automate follow-up', 'Send reminders, invoices, updates, and logs from the owner dashboard.']]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $step): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="rounded-lg border border-booklio-border bg-white p-5 shadow-card">
                                <span class="flex h-10 w-10 items-center justify-center rounded-lg bg-booklio-primary text-sm font-black text-white"><?php echo e($step[0]); ?></span>
                                <h3 class="mt-4 text-lg font-black"><?php echo e($step[1]); ?></h3>
                                <p class="mt-2 text-sm leading-6 text-booklio-muted"><?php echo e($step[2]); ?></p>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                </div>
            </div>
        </section>

        <section id="use-cases" class="border-y border-booklio-border bg-booklio-background py-16 sm:py-20">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
                    <div class="max-w-2xl">
                        <p class="text-sm font-extrabold uppercase tracking-wide text-booklio-primary">Use cases</p>
                        <h2 class="mt-3 text-3xl font-black tracking-tight sm:text-4xl">Built for real appointment-based businesses.</h2>
                    </div>
                    <p class="max-w-md text-sm leading-6 text-booklio-muted">Booklio works for local teams, independent professionals, and SaaS operators selling booking tools to many business types.</p>
                </div>
                <div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    <?php $__currentLoopData = $useCases; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $useCase): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <article class="group overflow-hidden rounded-lg border border-booklio-border bg-white shadow-card">
                            <img src="<?php echo e($useCase['image']); ?>" alt="<?php echo e($useCase['name']); ?>" class="h-36 w-full object-cover transition duration-300 group-hover:scale-105">
                            <div class="flex items-center justify-between p-4">
                                <h3 class="text-base font-black"><?php echo e($useCase['name']); ?></h3>
                                <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-50 text-booklio-primary"><i data-lucide="arrow-up-right" class="h-4 w-4"></i></span>
                            </div>
                        </article>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>
        </section>

        <section id="whatsapp" class="bg-white py-16 sm:py-20">
            <div class="mx-auto grid max-w-7xl gap-10 px-4 sm:px-6 lg:grid-cols-2 lg:items-center lg:px-8">
                <div>
                    <p class="text-sm font-extrabold uppercase tracking-wide text-booklio-primary">WhatsApp reminders</p>
                    <h2 class="mt-3 text-3xl font-black tracking-tight sm:text-4xl">Reduce no-shows with timely WhatsApp and email messages.</h2>
                    <p class="mt-4 text-base leading-8 text-booklio-muted">Prepare template screens for booking confirmations, appointment reminders, invoice reminders, cancellations, and follow-up messages with variable placeholders.</p>
                    <div class="mt-6 grid gap-3 sm:grid-cols-2">
                        <?php $__currentLoopData = ['Booking confirmation', 'Appointment reminder', 'Invoice reminder', 'Follow-up message']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="flex items-center gap-3 rounded-lg border border-booklio-border bg-booklio-background p-3 text-sm font-bold">
                                <i data-lucide="message-circle" class="h-5 w-5 text-booklio-primary"></i>
                                <?php echo e($item); ?>

                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                </div>
                <div class="rounded-lg border border-booklio-border bg-booklio-background p-4 shadow-card">
                    <div class="rounded-lg bg-white p-5 shadow-card">
                        <div class="flex items-center gap-3">
                            <span class="flex h-11 w-11 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600"><i data-lucide="message-circle" class="h-5 w-5"></i></span>
                            <div>
                                <p class="font-black">WhatsApp reminder</p>
                                <p class="text-xs font-bold text-booklio-muted">Scheduled for tomorrow at 8:00 AM</p>
                            </div>
                        </div>
                        <div class="mt-5 rounded-lg bg-emerald-50 p-4 text-sm leading-6 text-slate-700">
                            Hi Jessica, this is a reminder for your Hair Cut & Style appointment with Glow Beauty Salon tomorrow at 10:30 AM.
                        </div>
                        <div class="mt-4 flex items-center justify-between rounded-lg border border-booklio-border p-3">
                            <span class="text-sm font-bold text-booklio-muted">Status</span>
                            <span class="rounded-full bg-emerald-50 px-3 py-1 text-xs font-black text-emerald-600">Scheduled</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="invoice-crm" class="border-y border-booklio-border bg-booklio-background py-16 sm:py-20">
            <div class="mx-auto grid max-w-7xl gap-10 px-4 sm:px-6 lg:grid-cols-2 lg:items-center lg:px-8">
                <div class="order-2 rounded-lg border border-booklio-border bg-white p-5 shadow-card lg:order-1">
                    <div class="flex items-start justify-between gap-4 border-b border-booklio-border pb-5">
                        <div>
                            <p class="text-xs font-bold uppercase tracking-wide text-booklio-muted">Invoice #INV-1024</p>
                            <h3 class="mt-2 text-2xl font-black">Jessica Miller</h3>
                        </div>
                        <span class="rounded-full bg-emerald-50 px-3 py-1 text-xs font-black text-emerald-600">Paid</span>
                    </div>
                    <div class="mt-5 space-y-3">
                        <?php $__currentLoopData = [['Hair Cut & Style', '$65.00'], ['Hair Treatment Add-on', '$25.00'], ['Tax', '$6.30']]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $line): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="flex items-center justify-between gap-4 text-sm">
                                <span class="font-bold text-slate-600"><?php echo e($line[0]); ?></span>
                                <span class="font-black"><?php echo e($line[1]); ?></span>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                    <div class="mt-5 flex items-center justify-between rounded-lg bg-blue-50 p-4">
                        <span class="font-black">Total</span>
                        <span class="text-xl font-black text-booklio-primary">$96.30</span>
                    </div>
                </div>
                <div class="order-1 lg:order-2">
                    <p class="text-sm font-extrabold uppercase tracking-wide text-booklio-primary">Invoice and CRM</p>
                    <h2 class="mt-3 text-3xl font-black tracking-tight sm:text-4xl">Customer history and payments stay connected.</h2>
                    <p class="mt-4 text-base leading-8 text-booklio-muted">Owners can view customer contact details, appointment history, invoice history, notes, and payment status from a professional CRM-style interface.</p>
                    <div class="mt-6 grid gap-3 sm:grid-cols-3">
                        <?php $__currentLoopData = [['128', 'Bookings'], ['$8.4k', 'Revenue'], ['92%', 'Paid rate']]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $metric): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="rounded-lg border border-booklio-border bg-white p-4 shadow-card">
                                <p class="text-2xl font-black"><?php echo e($metric[0]); ?></p>
                                <p class="mt-1 text-xs font-bold text-booklio-muted"><?php echo e($metric[1]); ?></p>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                </div>
            </div>
        </section>

        <section id="public-booking" class="bg-white py-16 sm:py-20">
            <div class="mx-auto grid max-w-7xl gap-10 px-4 sm:px-6 lg:grid-cols-2 lg:items-center lg:px-8">
                <div>
                    <p class="text-sm font-extrabold uppercase tracking-wide text-booklio-primary">Public booking page</p>
                    <h2 class="mt-3 text-3xl font-black tracking-tight sm:text-4xl">A mobile-first booking page customers can finish quickly.</h2>
                    <p class="mt-4 text-base leading-8 text-booklio-muted">Customers can select a service, staff member, date, time, enter details, and receive a confirmation without account creation.</p>
                    <div class="mt-6 flex flex-wrap gap-2">
                        <?php $__currentLoopData = ['Service cards', 'Staff selection', 'Time slots', 'Booking summary', 'Confirmation']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $chip): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <span class="rounded-full border border-booklio-border bg-white px-3 py-1.5 text-xs font-extrabold text-slate-600 shadow-soft"><?php echo e($chip); ?></span>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                </div>
                <div class="mx-auto w-full max-w-sm rounded-[2rem] border border-slate-200 bg-slate-950 p-3 shadow-glow">
                    <div class="overflow-hidden rounded-[1.5rem] bg-white">
                        <img src="https://images.unsplash.com/photo-1522337660859-02fbefca4702?auto=format&fit=crop&w=700&q=80" alt="Salon booking preview" class="h-40 w-full object-cover">
                        <div class="p-4">
                            <div class="flex items-center gap-3">
                                <span class="flex h-12 w-12 items-center justify-center rounded-lg bg-booklio-primary font-black text-white">GB</span>
                                <div>
                                    <h3 class="font-black">Glow Beauty Salon</h3>
                                    <p class="text-xs font-bold text-booklio-muted">4.9 rating - Open today</p>
                                </div>
                            </div>
                            <div class="mt-5 space-y-3">
                                <?php $__currentLoopData = [['Hair Cut & Style', '60 min', '$65'], ['Facial Treatment', '75 min', '$90'], ['Manicure', '45 min', '$40']]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $service): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <div class="rounded-lg border border-booklio-border p-3">
                                        <div class="flex items-center justify-between gap-3">
                                            <div>
                                                <p class="text-sm font-black"><?php echo e($service[0]); ?></p>
                                                <p class="mt-1 text-xs font-bold text-booklio-muted"><?php echo e($service[1]); ?></p>
                                            </div>
                                            <p class="font-black text-booklio-primary"><?php echo e($service[2]); ?></p>
                                        </div>
                                    </div>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </div>
                            <a href="<?php echo e(route('public.booking.profile', 'glow-beauty-salon')); ?>" class="mt-4 inline-flex h-11 w-full items-center justify-center rounded-lg bg-booklio-primary text-sm font-black text-white">Continue booking</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="pricing" data-pricing-scope data-billing-cycle="monthly" class="border-y border-booklio-border bg-booklio-background py-16 sm:py-20">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="mx-auto max-w-3xl text-center">
                    <p class="text-sm font-extrabold uppercase tracking-wide text-booklio-primary">Pricing</p>
                    <h2 class="mt-3 text-3xl font-black tracking-tight sm:text-4xl">Flexible plans for every buyer and business stage.</h2>
                    <div class="mx-auto mt-6 inline-flex rounded-lg border border-booklio-border bg-white p-1 shadow-soft">
                        <button type="button" data-billing-cycle="monthly" class="rounded-md bg-booklio-primary px-4 py-2 text-sm font-black text-white" aria-pressed="true">Monthly</button>
                        <button type="button" data-billing-cycle="yearly" class="rounded-md px-4 py-2 text-sm font-black text-booklio-muted" aria-pressed="false">Yearly</button>
                    </div>
                </div>
                <div class="mt-10 grid gap-4 lg:grid-cols-4">
                    <?php $__currentLoopData = $plans; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $plan): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <?php ($isFree = ($plan['monthly'] ?? $plan['price']) === '$0' && ($plan['yearly'] ?? '$0') === '$0'); ?>
                        <article data-plan-card class="<?php echo e($plan['highlight'] ? 'border-booklio-primary ring-4 ring-blue-100' : 'border-booklio-border'); ?> relative rounded-lg border bg-white p-5 shadow-card">
                            <?php if($plan['highlight']): ?>
                                <span class="absolute right-4 top-4 rounded-full bg-booklio-primary px-3 py-1 text-xs font-black text-white">Recommended</span>
                            <?php endif; ?>
                            <h3 class="text-xl font-black"><?php echo e($plan['name']); ?></h3>
                            <p class="mt-2 min-h-[48px] text-sm leading-6 text-booklio-muted"><?php echo e($plan['description']); ?></p>
                            <div class="mt-5">
                                <span
                                    data-plan-price
                                    data-monthly="<?php echo e($plan['monthly'] ?? $plan['price']); ?>"
                                    data-yearly="<?php echo e($plan['yearly'] ?? $plan['price']); ?>"
                                    class="text-4xl font-black"
                                ><?php echo e($plan['monthly'] ?? $plan['price']); ?></span>
                                <span
                                    data-plan-period
                                    data-monthly-period="<?php echo e($isFree ? ' trial' : '/month'); ?>"
                                    data-yearly-period="<?php echo e($isFree ? ' trial' : '/year'); ?>"
                                    class="text-sm font-bold text-booklio-muted"
                                ><?php echo e($isFree ? ' trial' : '/month'); ?></span>
                                <p
                                    data-plan-note
                                    data-monthly-note="<?php echo e($isFree ? $plan['period'] : 'Billed monthly'); ?>"
                                    data-yearly-note="<?php echo e($isFree ? $plan['period'] : 'Billed yearly'); ?>"
                                    class="mt-1 text-xs font-bold text-booklio-muted"
                                ><?php echo e($isFree ? $plan['period'] : 'Billed monthly'); ?></p>
                            </div>
                            <ul class="mt-5 space-y-3">
                                <?php $__currentLoopData = $plan['features']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $feature): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <li class="flex items-start gap-3 text-sm font-bold text-slate-600"><i data-lucide="check" class="mt-0.5 h-4 w-4 shrink-0 text-emerald-500"></i><?php echo e($feature); ?></li>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </ul>
                            <a href="<?php echo e(route('register')); ?>" class="<?php echo e($plan['highlight'] ? 'bg-booklio-primary text-white hover:bg-blue-700' : 'border border-booklio-border bg-white text-booklio-dark hover:border-blue-200 hover:text-booklio-primary'); ?> mt-6 inline-flex h-11 w-full items-center justify-center rounded-lg text-sm font-black transition">Select plan</a>
                        </article>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>
        </section>

        <section id="faq" class="bg-white py-16 sm:py-20">
            <div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
                <div class="text-center">
                    <p class="text-sm font-extrabold uppercase tracking-wide text-booklio-primary">FAQ</p>
                    <h2 class="mt-3 text-3xl font-black tracking-tight sm:text-4xl">Questions buyers usually ask.</h2>
                </div>
                <div class="mt-10 space-y-3">
                    <?php $__currentLoopData = [['Is Booklio connected to a backend yet?', 'These screens use dummy UI data only. They are structured so backend integration can be connected later in Laravel.'], ['Can businesses use WhatsApp reminders?', 'Yes. The UI includes WhatsApp template, settings, scheduled reminder, and log screens prepared for integration.'], ['Does Booklio support SaaS subscriptions?', 'Yes. The UI includes business owner subscription pages and super admin plan, subscription, payment, and business management pages.'], ['Is the public booking page mobile friendly?', 'Yes. The booking flow is designed mobile-first with large service cards, staff cards, date slots, forms, and confirmation states.']]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $faq): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <details class="group rounded-lg border border-booklio-border bg-white p-5 shadow-card">
                            <summary class="flex cursor-pointer list-none items-center justify-between gap-4 text-base font-black">
                                <?php echo e($faq[0]); ?>

                                <i data-lucide="chevron-down" class="h-5 w-5 text-booklio-muted transition group-open:rotate-180"></i>
                            </summary>
                            <p class="mt-3 text-sm leading-7 text-booklio-muted"><?php echo e($faq[1]); ?></p>
                        </details>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>
        </section>
    </main>

    <footer class="border-t border-booklio-border bg-booklio-dark py-12 text-white">
        <div class="mx-auto grid max-w-7xl gap-8 px-4 sm:px-6 md:grid-cols-[1.2fr_repeat(3,0.8fr)] lg:px-8">
            <div>
                <div class="flex items-center gap-3">
                    <span class="flex h-10 w-10 items-center justify-center rounded-lg bg-booklio-primary text-xl font-extrabold text-white">B</span>
                    <span class="text-xl font-black">Booklio</span>
                </div>
                <p class="mt-4 max-w-sm text-sm leading-7 text-slate-300">Appointment booking, invoices, reminders, and customer CRM for modern service businesses.</p>
            </div>
            <div>
                <h3 class="text-sm font-black">Product</h3>
                <div class="mt-4 space-y-3 text-sm font-semibold text-slate-300">
                    <a href="#features" class="block hover:text-white">Features</a>
                    <a href="#pricing" class="block hover:text-white">Pricing</a>
                    <a href="<?php echo e(route('demo')); ?>" class="block hover:text-white">Demo</a>
                </div>
            </div>
            <div>
                <h3 class="text-sm font-black">Modules</h3>
                <div class="mt-4 space-y-3 text-sm font-semibold text-slate-300">
                    <a href="#whatsapp" class="block hover:text-white">Reminders</a>
                    <a href="#invoice-crm" class="block hover:text-white">Invoices</a>
                    <a href="#public-booking" class="block hover:text-white">Booking Page</a>
                </div>
            </div>
            <div>
                <h3 class="text-sm font-black">Get started</h3>
                <div class="mt-4 space-y-3 text-sm font-semibold text-slate-300">
                    <a href="<?php echo e(route('register')); ?>" class="block hover:text-white">Start Free Trial</a>
                    <a href="<?php echo e(route('login')); ?>" class="block hover:text-white">Login</a>
                    <a href="#faq" class="block hover:text-white">FAQ</a>
                </div>
            </div>
        </div>
        <div class="mx-auto mt-10 flex max-w-7xl flex-col gap-3 border-t border-white/10 px-4 pt-6 text-sm font-semibold text-slate-400 sm:flex-row sm:items-center sm:justify-between sm:px-6 lg:px-8">
            <p>&copy; <?php echo e(date('Y')); ?> Booklio. All rights reserved.</p>
            <p>Designed for premium SaaS marketplace buyers.</p>
        </div>
    </footer>

    <?php ($booklioTranslationPayload = $booklioTranslationPayload ?? config('booklio_languages.frontend_fallback', ['defaultLocale' => 'en', 'currentLocale' => 'en', 'direction' => 'ltr', 'languages' => []])); ?>
    <script>
        window.BooklioTranslations = <?php echo json_encode($booklioTranslationPayload, 15, 512) ?>;
        window.lucide?.createIcons();
    </script>
    <script src="<?php echo e(asset('js/booklio-dropdowns.js')); ?>?v=<?php echo e(filemtime(public_path('js/booklio-dropdowns.js'))); ?>"></script>
    <script src="<?php echo e(asset('js/booklio-ui.js')); ?>?v=<?php echo e(filemtime(public_path('js/booklio-ui.js'))); ?>"></script>
</body>
</html>
<?php /**PATH C:\Users\Dcodax\Documents\Booklio\resources\views/landing.blade.php ENDPATH**/ ?>