<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <title>{{ config('app.name', 'Collabs') }}</title>
    <x-pwa.head />
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased bg-background text-foreground min-h-[100dvh] flex flex-col">
    <header class="sticky top-0 z-20 bg-background/80 backdrop-blur-xl border-b border-border/50">
        <div class="max-w-5xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
            <a href="{{ url('/') }}" class="flex items-center gap-3">
                <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-foreground">
                    <x-icons.utensils class="text-primary-foreground" />
                </div>
                <span class="text-lg font-bold tracking-tight">{{ config('app.name', 'Collabs') }}</span>
            </a>
            <nav class="flex items-center gap-2">
                @auth
                    <a href="{{ route('collabs.board') }}" class="inline-flex items-center rounded-xl bg-foreground px-4 py-2 text-sm font-semibold text-primary-foreground shadow-sm hover:opacity-90">Open board</a>
                @else
                    <a href="{{ route('login') }}" class="inline-flex items-center rounded-xl px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-secondary/60 transition-colors">Sign in</a>
                    <a href="{{ route('register') }}" class="inline-flex items-center rounded-xl bg-foreground px-4 py-2 text-sm font-semibold text-primary-foreground shadow-sm hover:opacity-90">Get started</a>
                @endauth
            </nav>
        </div>
    </header>

    <main class="flex-1">
        <section class="relative overflow-hidden border-b border-border/50">
            <div
                class="pointer-events-none absolute inset-0 opacity-[0.35]"
                aria-hidden="true"
                style="background: radial-gradient(ellipse 80% 50% at 50% -20%, hsl(var(--accent) / 0.35), transparent), radial-gradient(ellipse 60% 40% at 100% 0%, hsl(var(--foreground) / 0.06), transparent);"
            ></div>
            <div class="relative mx-auto max-w-5xl px-4 sm:px-6 py-16 sm:py-24 text-center">
                <p class="text-sm font-medium text-accent mb-3">Partnership tracker for creators &amp; restaurants</p>
                <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight text-foreground text-balance">
                    Run collabs without losing the thread
                </h1>
                <p class="mt-4 text-base sm:text-lg text-muted-foreground max-w-2xl mx-auto text-pretty">
                    Keep upcoming visits, confirmations, and history in one board—built for small teams working with real venues.
                </p>
                <div class="mt-8 flex flex-col sm:flex-row gap-3 justify-center">
                    @auth
                        <a href="{{ route('collabs.board') }}" class="inline-flex justify-center rounded-xl bg-foreground px-8 py-3 text-sm font-semibold text-primary-foreground shadow-sm hover:opacity-90">Open board</a>
                    @else
                        <a href="{{ route('register') }}" class="inline-flex justify-center rounded-xl bg-foreground px-8 py-3 text-sm font-semibold text-primary-foreground shadow-sm hover:opacity-90">Get started</a>
                        <a href="{{ route('login') }}" class="inline-flex justify-center rounded-xl border border-border bg-card px-8 py-3 text-sm font-semibold text-foreground shadow-sm hover:bg-secondary/50">Sign in</a>
                    @endauth
                </div>
            </div>
        </section>

        <section class="mx-auto max-w-5xl px-4 sm:px-6 py-14 sm:py-20">
            <h2 class="text-center text-sm font-semibold uppercase tracking-wider text-muted-foreground mb-10">{{ __('Why :app', ['app' => config('app.name', 'Collabs')]) }}</h2>
            <ul class="grid gap-6 sm:grid-cols-3">
                <li class="rounded-2xl border border-border/60 bg-card/40 p-6 text-left">
                    <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-secondary mb-4">
                        <svg class="h-5 w-5 text-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
                    </div>
                    <h3 class="font-semibold text-foreground">Pipeline &amp; history</h3>
                    <p class="mt-2 text-sm text-muted-foreground leading-relaxed">
                        Move between upcoming, confirmed, and contacted—then archive when you are done.
                    </p>
                </li>
                <li class="rounded-2xl border border-border/60 bg-card/40 p-6 text-left">
                    <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-secondary mb-4">
                        <svg class="h-5 w-5 text-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>
                    </div>
                    <h3 class="font-semibold text-foreground">Dates &amp; reminders</h3>
                    <p class="mt-2 text-sm text-muted-foreground leading-relaxed">
                        See what is on deck and track completed posts so nothing slips after the meal.
                    </p>
                </li>
                <li class="rounded-2xl border border-border/60 bg-card/40 p-6 text-left">
                    <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-secondary mb-4">
                        <svg class="h-5 w-5 text-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
                    </div>
                    <h3 class="font-semibold text-foreground">Built for the web</h3>
                    <p class="mt-2 text-sm text-muted-foreground leading-relaxed">
                        Sign in from any device; use the nav to jump between home, your board, and workspace settings.
                    </p>
                </li>
            </ul>
        </section>
    </main>

    <footer class="border-t border-border/50 py-8 text-center text-xs text-muted-foreground space-y-2">
        <p>{{ config('app.name', 'Collabs') }} — {{ __('Partnership tracker for creators and restaurants.') }}</p>
        <x-layout.brand-credit />
    </footer>

    <x-pwa.install-banner />
</body>
</html>
