@props([
    'title' => null,
    'description' => null,
])

@php
    $brand = config('zylovpn.brand.name');
    $pageTitle = $title ? "{$title} — {$brand}" : "{$brand} — ".config('zylovpn.brand.tagline');
    $pageDescription = $description
        ?? 'Secure, encrypted VPN connections with global server locations. Fast, private, and simple.';

    $favicon = config('zylovpn.brand.favicon');
    $hasFavicon = $favicon && file_exists(public_path($favicon));
@endphp

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">

<title>{{ $pageTitle }}</title>
<meta name="description" content="{{ $pageDescription }}">

{{-- The UI is dark-only, so tell the browser before first paint. Without this
     the form controls and scrollbars flash light on load. --}}
<meta name="color-scheme" content="dark">
<meta name="theme-color" content="#04060c">

@if ($hasFavicon)
    <link rel="icon" href="{{ asset($favicon) }}">
@else
    {{-- Inline shield mark, so there is no 404 before the real favicon lands. --}}
    <link rel="icon" href="data:image/svg+xml,{{ rawurlencode(
        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">'
        .'<path d="M16 2.5 27 6.8v8.4c0 6.6-4.4 12.2-11 14.3-6.6-2.1-11-7.7-11-14.3V6.8L16 2.5Z" '
        .'fill="none" stroke="#4d86ff" stroke-width="2.5" stroke-linejoin="round"/>'
        .'<path d="M11 16.5 14.5 20l7-7.5" fill="none" stroke="#22d3ee" stroke-width="3" '
        .'stroke-linecap="round" stroke-linejoin="round"/></svg>'
    ) }}">
@endif

<meta property="og:title" content="{{ $pageTitle }}">
<meta property="og:description" content="{{ $pageDescription }}">
<meta property="og:type" content="website">
<meta property="og:site_name" content="{{ $brand }}">

@vite(['resources/css/app.css', 'resources/js/app.js'])
@livewireStyles