<?php

/**
 * Public Layout — Invitation & Guest-Facing Pages
 *
 * HTML shell for public-facing pages (/{slug}/invite/{guest_code}).
 * No application navigation — guests never log in.
 * Clean, minimal, invitation-appropriate aesthetic.
 *
 * Variables available in scope:
 *   $content        — string — Pre-rendered view HTML.
 *   $flash          — array  — Flash messages (e.g. RSVP confirmation).
 *   $title          — string — Optional page title.
 *   $metaDescription — string — Optional page description for sharing.
 *
 * Usage: Set $this->layout = 'public' in public-facing controllers
 * (e.g. InvitationController, RsvpController).
 *
 * Note: Guest surface pages do NOT use $this->layout at all when rendered
 * by the Theme Engine (Sprint 4) — the Theme Engine controls the entire HTML.
 * This layout is for public utility pages (RSVP confirmation, error pages, etc.)
 *
 * Design: Gradient background (violet-pink), centered content, no nav chrome.
 * Mobile-first — guests almost always view invitations on their phones.
 *
 * @ref  INIT-011, CORE-003, CORE-004, DBP v1.1 Ch.8
 */

/** @var string $content */
/** @var array<string, string> $flash */
$flash           = $flash           ?? [];
$title           = isset($title) && is_string($title) ? $title . ' • INVEETAIRE' : 'INVEETAIRE';
$metaDescription = isset($metaDescription) && is_string($metaDescription)
    ? $metaDescription
    : 'You are invited. View your personal invitation and RSVP online.';

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title><?= escape_html($title) ?></title>
    <meta name="description" content="<?= escape_html($metaDescription) ?>">

    <!-- Open Graph (for WhatsApp / social sharing previews) -->
    <meta property="og:title"       content="<?= escape_html($title) ?>">
    <meta property="og:description" content="<?= escape_html($metaDescription) ?>">
    <meta property="og:type"        content="website">

    <!-- Browser Branding -->
    <link rel="apple-touch-icon" sizes="180x180" href="<?= asset('/assets/branding/favicon/apple-touch-icon.png') ?>">
    <link rel="icon" type="image/png" sizes="32x32" href="<?= asset('/assets/branding/favicon/favicon-32x32.png') ?>" media="(prefers-color-scheme: light)">
    <link rel="icon" type="image/png" sizes="16x16" href="<?= asset('/assets/branding/favicon/favicon-16x16.png') ?>" media="(prefers-color-scheme: light)">
    <link rel="icon" type="image/png" sizes="32x32" href="<?= asset('/assets/branding/favicon/light-bg/favicon-32x32.png') ?>" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="16x16" href="<?= asset('/assets/branding/favicon/light-bg/favicon-16x16.png') ?>" media="(prefers-color-scheme: dark)">
    <link rel="manifest" href="<?= asset('/assets/branding/favicon/site.webmanifest') ?>">

    <!-- Application stylesheet (compiled Tailwind + custom design system — CORE-003) -->
    <link rel="stylesheet" href="<?= asset('/assets/css/all.min.css') ?>">
    <link rel="stylesheet" href="<?= asset('/assets/css/app.css') ?>?v=<?= time() ?>">
    <link rel="stylesheet" href="<?= asset('/assets/css/design_system.css') ?>?v=<?= time() ?>">

</head>
<body class="public-body font-sans min-h-screen flex flex-col" role="document">

    <!-- ── Public Content (no nav) ────────────────────────────────────────── -->
    <main class="flex-1 flex flex-col items-center justify-start py-10 px-4" id="main-content" role="main">



        <!-- Flash messages (e.g. RSVP confirmation, error notices) -->
        <?php if (!empty($flash)): ?>
            <div class="w-full max-w-lg mb-6">
                <?php include ROOT_PATH . '/app/views/components/flash.php'; ?>
            </div>
        <?php endif; ?>

        <!-- View content -->
        <div class="w-full max-w-lg">
            <?= $content ?>
        </div>

    </main>

    <footer class="py-6 text-center" role="contentinfo">
        <p class="text-xs text-slate-400">
            &copy; <?= date('Y') ?> Inveetaire &mdash; Premium Wedding Experience Platform
        </p>
    </footer>

    <script src="<?= asset('/assets/js/app.js') ?>" defer></script>

</body>
</html>
