<?php

declare(strict_types=1);

/** @var string $title */
/** @var string $content */
/** @var array $config */

?><!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?= e($title) ?></title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="icon" type="image/png" href="/pest/assets/img/logo.png">
    <style>
        :root {
            --ui-border: #e2e8f0;
            --ui-border-hover: #cbd5e1;
            --ui-focus: #2563eb;
            --ui-bg: #ffffff;
            --ui-muted: #f8fafc;
            --ui-text: #0f172a;
            --ui-text-muted: #475569;
        }

        body {
            color: var(--ui-text);
        }

        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="number"],
        input[type="search"],
        input[type="tel"],
        input[type="url"],
        input[type="date"],
        input[type="time"],
        textarea,
        select {
            background: var(--ui-bg) !important;
            border-color: var(--ui-border) !important;
            border-radius: 9999px !important;
            padding: 0.6rem 1rem !important;
            font-size: 0.875rem;
            line-height: 1.25rem;
            outline: none;
            transition: box-shadow 150ms ease, border-color 150ms ease;
        }

        textarea {
            border-radius: 1.25rem !important;
            min-height: 110px;
        }

        input[type="text"]:hover,
        input[type="email"]:hover,
        input[type="password"]:hover,
        input[type="number"]:hover,
        input[type="search"]:hover,
        input[type="tel"]:hover,
        input[type="url"]:hover,
        input[type="date"]:hover,
        input[type="time"]:hover,
        textarea:hover,
        select:hover {
            border-color: var(--ui-border-hover) !important;
        }

        input[type="text"]:focus,
        input[type="email"]:focus,
        input[type="password"]:focus,
        input[type="number"]:focus,
        input[type="search"]:focus,
        input[type="tel"]:focus,
        input[type="url"]:focus,
        input[type="date"]:focus,
        input[type="time"]:focus,
        textarea:focus,
        select:focus {
            border-color: var(--ui-focus) !important;
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16) !important;
        }

        input[type="checkbox"],
        input[type="radio"] {
            accent-color: var(--ui-focus);
        }

        button,
        input[type="submit"],
        input[type="button"],
        a.button {
            border-radius: 9999px;
        }
    </style>
</head>
<body class="bg-slate-50 text-slate-900">
    <div class="min-h-screen">
        <header class="border-b bg-white">
            <div class="mx-auto max-w-6xl px-4 py-4 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="h-20 w-20 overflow-hidden rounded-xl bg-white border border-slate-200 flex items-center justify-center">
                        <img class="h-16 w-16 object-contain" src="/pest/assets/img/logo.png" alt="<?= e((string)($config['app']['name'] ?? 'Logo')) ?>">
                    </div>
                    <div class="font-semibold tracking-tight">
                        <?= e($config['app']['name'] ?? 'App') ?>
                    </div>
                </div>
                <nav class="text-sm text-slate-600">
                    <a class="hover:text-slate-900" href="<?= e($config['app']['base_url'] ?? '#') ?>">Home</a>
                </nav>
            </div>
        </header>

        <main class="mx-auto max-w-6xl px-4 py-8">
            <?= $content ?>
        </main>

        <footer class="border-t bg-white">
            <div class="mx-auto max-w-6xl px-4 py-4 text-xs text-slate-500">
                <?= e($config['app']['name'] ?? 'App') ?>
            </div>
        </footer>
    </div>
</body>
</html>
