<?php

/**
 * Preview Shell View — Invitation Device Simulator.
 *
 * Renders the public look-and-feel of the wedding invitation inside a responsive
 * device simulator. Content is rendered inline (not via iframe).
 *
 * Variables expected:
 *   $invitation — array  — Combined array of invitation settings.
 *   $theme_name  — string — Selected theme display label.
 *
 * @package Inveetaire
 * @ref     PILOT-001
 */

/** @var array $invitation */
/** @var string $theme_name */

$groomName   = $invitation['groom_display_name'] ?? 'Groom';
$brideName   = $invitation['bride_display_name'] ?? 'Bride';
$weddingDate = $invitation['wedding_date'] ?? date('Y-m-d');
$weddingTime = $invitation['wedding_time'] ?? '12:00';
$venue       = $invitation['venue_name'] ?? 'Wedding Venue';
$address     = $invitation['venue_address'] ?? 'Venue Address';
$mapsUrl     = $invitation['maps_url'] ?? '';
$story       = $invitation['love_story'] ?? '';
$coverImage  = $invitation['cover_image'] ?? '';
$heroQuote   = $invitation['hero_quote'] ?? '';

// Format wedding date beautifully
$dateObj       = new \DateTime($weddingDate);
$formattedDate = $dateObj->format('l, d F Y');

// Use compiled production theme HTML if provided by InvitationController; fallback to dummy buffer if empty
if (!isset($invitationScreenHtml) || trim((string) $invitationScreenHtml) === '') {
    ob_start();
    ?>
    <!-- SECTION 1: Cover Hero -->
    <section class="h-full min-h-[500px] w-full relative flex flex-col justify-end text-center p-6 bg-neutral-900">
        <?php if ($coverImage !== ''): ?>
            <img
                src="<?= escape_html($coverImage) ?>"
                alt="Wedding Cover"
                class="absolute inset-0 w-full h-full object-cover opacity-70"
            >
        <?php else: ?>
            <div class="absolute inset-0 bg-gradient-to-tr from-slate-100 to-pink-50/10 opacity-40"></div>
        <?php endif; ?>

        <!-- Dark Overlay -->
        <div class="absolute inset-0 cover-gradient"></div>

        <!-- Text content -->
        <div class="relative z-10 text-white space-y-4 mb-8">
            <p class="text-xs uppercase tracking-[0.25em] text-pink-200 font-semibold">The Wedding of</p>

            <h1 class="text-4xl sm:text-5xl font-serif-fancy font-bold tracking-wide py-2 leading-tight">
                <?= escape_html($groomName) ?> <br>&amp;<br> <?= escape_html($brideName) ?>
            </h1>

            <?php if ($heroQuote !== ''): ?>
                <p class="text-xs italic text-slate-300 font-serif-fancy max-w-[280px] mx-auto opacity-90">
                    &ldquo;<?= escape_html($heroQuote) ?>&rdquo;
                </p>
            <?php endif; ?>

            <div class="pt-4">
                <span class="inline-flex px-4 py-1.5 rounded-full border border-white/30 bg-white/10 backdrop-blur-sm text-xs font-semibold tracking-wider">
                    <?= escape_html($formattedDate) ?>
                </span>
            </div>
        </div>
    </section>

    <!-- SECTION 2: Love Story -->
    <?php if ($story !== ''): ?>
        <section class="py-12 px-6 bg-white text-center space-y-6">
            <div class="flex justify-center">
                <span class="text-2xl text-pink-500">&#10086;</span>
            </div>
            <h2 class="text-2xl font-serif-fancy font-bold text-slate-800">Our Love Story</h2>
            <div class="w-12 h-0.5 bg-pink-500/30 mx-auto"></div>
            <p class="text-sm leading-relaxed text-slate-600 italic font-serif-fancy max-w-sm mx-auto">
                <?= nl2br(escape_html($story)) ?>
            </p>
        </section>
    <?php endif; ?>

    <!-- SECTION 3: Venue & Details -->
    <section class="py-12 px-6 bg-slate-50/50 text-center border-t border-b border-slate-100">
        <div class="flex justify-center mb-4">
            <span class="text-3xl text-pink-500">&#128197;</span>
        </div>
        <h2 class="text-2xl font-serif-fancy font-bold text-slate-800">Ceremony &amp; Reception</h2>
        <div class="w-12 h-0.5 bg-pink-500/30 mx-auto mt-4 mb-6"></div>

        <div class="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm max-w-sm mx-auto space-y-5">
            <div>
                <p class="text-xs uppercase tracking-wider text-slate-400 font-semibold">Date</p>
                <p class="text-sm font-bold text-slate-800 mt-1"><?= escape_html($formattedDate) ?></p>
            </div>

            <div class="border-t border-slate-100 pt-4">
                <p class="text-xs uppercase tracking-wider text-slate-400 font-semibold">Time</p>
                <p class="text-sm font-bold text-slate-800 mt-1"><?= escape_html($weddingTime) ?></p>
            </div>

            <div class="border-t border-slate-100 pt-4">
                <p class="text-xs uppercase tracking-wider text-slate-400 font-semibold">Venue</p>
                <p class="text-sm font-bold text-slate-800 mt-1"><?= escape_html($venue) ?></p>
                <p class="text-xs text-slate-500 mt-1 leading-relaxed max-w-[240px] mx-auto"><?= escape_html($address) ?></p>
            </div>

            <?php if ($mapsUrl !== ''): ?>
                <div class="pt-2">
                    <a href="<?= escape_html($mapsUrl) ?>" target="_blank" class="btn btn-primary btn-sm px-4 py-2">
                        &#128205; Open in Google Maps
                    </a>
                </div>
            <?php endif; ?>
        </div>
    </section>

    <!-- SECTION 4: RSVP Placeholder -->
    <section class="py-12 px-6 bg-white text-center space-y-4">
        <h3 class="text-lg font-serif-fancy font-bold text-slate-800">Will You Attend?</h3>
        <p class="text-xs text-slate-400 max-w-xs mx-auto leading-relaxed">
            Simulated layout preview only.<br>
            Use <strong>Live Preview</strong> to see the real interactive invitation.
        </p>
        <div class="max-w-xs mx-auto bg-slate-50 rounded-xl p-4 border border-dashed border-slate-200">
            <span class="text-xs font-semibold text-slate-400">&#128274; RSVP &mdash; Preview Only</span>
        </div>
    </section>
    <?php
    $invitationScreenHtml = (string) ob_get_clean();
}
?>

<!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 ?? 'Invitation Preview') ?> &bull; INVEETAIRE</title>

    <!-- Application Stylesheets -->
    <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() ?>">

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Outfit:wght@100..900&display=swap');

        .font-serif-fancy { font-family: 'Playfair Display', Georgia, serif; }
        .font-sans-modern { font-family: 'Outfit', sans-serif; }
        .cover-gradient   { background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.2) 100%); }
    </style>
</head>
<body class="bg-slate-50 font-sans-modern min-h-screen flex flex-col w-full m-0 p-0 overflow-x-hidden select-none" x-data="{ viewMode: 'desktop', zoomLevel: 100 }">

    <!-- ── 1. Sticky Full-Width Top Navbar (Outside Preview Wrapper) ────── -->
    <header class="sticky top-0 z-50 w-full h-16 bg-slate-900 text-white px-6 border-b border-slate-800 shadow-md flex items-center justify-between text-xs flex-shrink-0">

        <!-- LEFT: Title + Theme -->
        <div class="flex items-center gap-4">
            <div class="flex items-center gap-2 font-bold tracking-wide text-sm text-slate-100">
                <span class="inline-flex w-2.5 h-2.5 bg-pink-400 rounded-full animate-pulse"></span>
                <span>Simulated Theme Preview</span>
            </div>
            <span class="h-4 w-[1px] bg-slate-700"></span>
            <div class="text-slate-400 text-xs">
                Theme: <strong class="text-white font-semibold"><?= escape_html($theme_name) ?></strong>
            </div>
        </div>

        <!-- CENTER: Segmented Control Active Device Selector -->
        <div class="flex items-center gap-1 bg-slate-950/80 p-1.5 rounded-xl border border-slate-800 shadow-inner">
            <button type="button"
                    @click="viewMode = 'android'"
                    :class="viewMode === 'android' ? 'bg-white text-slate-900 font-bold shadow-md border border-slate-200 scale-[1.03]' : 'text-slate-400 hover:text-slate-200 bg-transparent shadow-none border border-transparent scale-100'"
                    class="px-4 py-1.5 rounded-lg transition-all duration-200 ease-in-out flex items-center justify-center gap-1.5 font-semibold text-xs min-w-[100px] focus:outline-none cursor-pointer">
                &#128241; Android
            </button>
            <button type="button"
                    @click="viewMode = 'apple'"
                    :class="viewMode === 'apple' ? 'bg-white text-slate-900 font-bold shadow-md border border-slate-200 scale-[1.03]' : 'text-slate-400 hover:text-slate-200 bg-transparent shadow-none border border-transparent scale-100'"
                    class="px-4 py-1.5 rounded-lg transition-all duration-200 ease-in-out flex items-center justify-center gap-1.5 font-semibold text-xs min-w-[100px] focus:outline-none cursor-pointer">
                &#127822; Apple
            </button>
            <button type="button"
                    @click="viewMode = 'tablet'"
                    :class="viewMode === 'tablet' ? 'bg-white text-slate-900 font-bold shadow-md border border-slate-200 scale-[1.03]' : 'text-slate-400 hover:text-slate-200 bg-transparent shadow-none border border-transparent scale-100'"
                    class="px-4 py-1.5 rounded-lg transition-all duration-200 ease-in-out flex items-center justify-center gap-1.5 font-semibold text-xs min-w-[100px] focus:outline-none cursor-pointer">
                &#128242; Tablet
            </button>
            <button type="button"
                    @click="viewMode = 'desktop'"
                    :class="viewMode === 'desktop' ? 'bg-white text-slate-900 font-bold shadow-md border border-slate-200 scale-[1.03]' : 'text-slate-400 hover:text-slate-200 bg-transparent shadow-none border border-transparent scale-100'"
                    class="px-4 py-1.5 rounded-lg transition-all duration-200 ease-in-out flex items-center justify-center gap-1.5 font-semibold text-xs min-w-[100px] focus:outline-none cursor-pointer">
                &#128187; Desktop
            </button>
        </div>

        <!-- RIGHT: Zoom Controls & Back Button -->
        <div class="flex items-center gap-4">
            <div class="flex items-center gap-1.5 bg-slate-800 p-1.5 rounded-xl border border-slate-700">
                <span class="text-[10px] uppercase text-slate-400 font-bold px-2 tracking-wider">Zoom</span>
                <button type="button" @click="zoomLevel = 50"  :class="zoomLevel === 50  ? 'bg-slate-700 text-white font-bold' : 'text-slate-400 hover:text-white'" class="px-2.5 py-1 rounded-md text-[11px] transition-colors focus:outline-none">50%</button>
                <button type="button" @click="zoomLevel = 75"  :class="zoomLevel === 75  ? 'bg-slate-700 text-white font-bold' : 'text-slate-400 hover:text-white'" class="px-2.5 py-1 rounded-md text-[11px] transition-colors focus:outline-none">75%</button>
                <button type="button" @click="zoomLevel = 100" :class="zoomLevel === 100 ? 'bg-slate-700 text-white font-bold' : 'text-slate-400 hover:text-white'" class="px-2.5 py-1 rounded-md text-[11px] transition-colors focus:outline-none">100%</button>
                <button type="button" @click="zoomLevel = 125" :class="zoomLevel === 125 ? 'bg-slate-700 text-white font-bold' : 'text-slate-400 hover:text-white'" class="px-2.5 py-1 rounded-md text-[11px] transition-colors focus:outline-none">125%</button>
            </div>

            <!-- Back to Dashboard Button -->
            <a href="<?= url('/app/couple/invitation/design') ?>"
               class="inline-flex items-center justify-center gap-2 min-w-[170px] px-4 py-2 rounded-xl border border-slate-700 hover:border-slate-500 bg-slate-800 hover:bg-slate-700/80 text-slate-300 hover:text-white text-xs font-semibold shadow-xs transition-all duration-200 hover:-translate-x-0.5 cursor-pointer">
                &larr; Back to Dashboard
            </a>
        </div>

    </header>

    <!-- ── 2. Preview Stage ─────────────────────────────────────────────── -->
    <main class="w-full flex-1 flex flex-col justify-start items-center overflow-auto py-10 px-6">

        <!-- ── DEDICATED DEVICE FRAME COMPONENTS – ABSOLUTE CAMERA OVERLAY ─ -->

        <!-- FRAME 1: 📱 Android (Xiaomi 14T Pro) ─────────────────────────── -->
        <div
            x-show="viewMode === 'android'"
            style="
                width: 393px;
                height: 852px;
                border-radius: 28px;
                border: 12px solid transparent;
                background-clip: padding-box;
                box-shadow:
                    0 0 0 12px #1a2333,
                    inset 0 0 0 1px rgba(255,255,255,0.07),
                    0 22px 48px -8px rgba(0,0,0,0.45);
                background-color: #fff;
                position: relative;
            "
            class="flex flex-col overflow-hidden flex-shrink-0 transition-all duration-300 ease-in-out"
        >
            <!-- ❶ Android Punch-Hole Camera — Absolute Overlay (z-999) -->
            <div style="position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:999;width:9px;height:9px;border-radius:50%;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,0.08);pointer-events:none;"></div>

            <!-- ❷ Chrome Mobile Browser Header — with Android status bar at top -->
            <div class="bg-slate-100 border-b border-slate-200 flex-shrink-0 z-20" style="padding: 0 0 8px;">

                <!-- Android Status Bar (24px) -->
                <div style="height:24px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;">
                    <span style="font-size:10px;font-weight:600;color:#374151;font-family:sans-serif;letter-spacing:0.02em;">10:00</span>
                    <div style="display:flex;align-items:center;gap:6px;">
                        <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:block;"><rect x="0" y="8" width="2" height="2" rx="0.4" fill="#374151"/><rect x="3" y="6" width="2" height="4" rx="0.4" fill="#C9D0DA"/><rect x="6" y="4" width="2" height="6" rx="0.4" fill="#C9D0DA"/><rect x="9" y="2" width="2" height="8" rx="0.4" fill="#C9D0DA"/></svg>
                        <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:block;"><rect x="0" y="8" width="2" height="2" rx="0.4" fill="#374151"/><rect x="3" y="6" width="2" height="4" rx="0.4" fill="#374151"/><rect x="6" y="4" width="2" height="6" rx="0.4" fill="#374151"/><rect x="9" y="2" width="2" height="8" rx="0.4" fill="#C9D0DA"/></svg>
                        <svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:block;"><path d="M6 7.5a1 1 0 110 0.01Z" fill="#374151"/><path d="M3.5 5.5A3.5 3.5 0 018.5 5.5" stroke="#374151" stroke-width="1.2" stroke-linecap="round" fill="none"/><path d="M1.5 3.5A6 6 0 0110.5 3.5" stroke="#374151" stroke-width="1.2" stroke-linecap="round" fill="none"/><circle cx="6" cy="8" r="1" fill="#374151"/></svg>
                        <div style="display:flex;align-items:center;gap:2px;"><div style="width:20px;height:10px;border:1.5px solid #374151;border-radius:2px;position:relative;display:flex;align-items:center;padding:1.5px;"><div style="height:100%;width:85%;background:#374151;border-radius:1px;"></div><div style="width:2px;height:5px;background:#374151;border-radius:0 1px 1px 0;position:absolute;right:-3px;top:50%;transform:translateY(-50%);"></div></div></div>
                    </div>
                </div>

                <!-- Chrome address bar -->
                <div style="padding:8px 10px 0;" class="flex items-center justify-between text-xs">
                    <div class="flex items-center gap-2 text-slate-600 flex-1 min-w-0 bg-white border border-slate-200/80 rounded-full px-3 py-1 text-[11px]">
                        <span class="text-[10px] text-slate-400">&#128274;</span>
                        <span class="truncate font-sans text-slate-700 font-medium">inveetaire.com/invitation/preview</span>
                    </div>
                    <div class="flex items-center gap-2 text-slate-500 font-mono text-[11px] font-bold pl-2">
                        <span class="w-4 h-4 rounded border border-slate-400 flex items-center justify-center text-[9px]">1</span>
                        <span class="text-sm">&#8942;</span>
                    </div>
                </div>
            </div>

            <!-- ❸ Screen Viewport -->
            <div class="flex-1 overflow-y-auto scrollbar-thin select-none relative bg-white" id="invitation-screen-android" :style="'zoom: ' + (zoomLevel / 100)">
                <?= $invitationScreenHtml ?>
            </div>

            <!-- ❹ Android Bottom Gesture Bar -->
            <div class="h-5 bg-white flex justify-center items-center pb-1 flex-shrink-0 border-t border-slate-100/60 z-20">
                <div class="w-28 h-1 bg-slate-300 rounded-full"></div>
            </div>
        </div>

        <!-- FRAME 2: 🍎 Apple (iPhone 15 Pro) ──────────────────────────────── -->
        <div
            x-show="viewMode === 'apple'"
            style="
                width: 393px;
                height: 852px;
                border-radius: 48px;
                border: 12px solid transparent;
                background-clip: padding-box;
                box-shadow:
                    0 0 0 12px #1a2333,
                    inset 0 0 0 1px rgba(255,255,255,0.10),
                    0 22px 48px -8px rgba(0,0,0,0.45);
                background-color: #fff;
                position: relative;
            "
            class="flex flex-col overflow-hidden flex-shrink-0 transition-all duration-300 ease-in-out"
        >
            <!-- ❶ Dynamic Island -->
            <div style="position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:999;width:95px;height:26px;border-radius:9999px;background:linear-gradient(180deg,#2a2a2a 0%,#000 100%);box-shadow:0 0 0 1px rgba(255,255,255,0.06),0 2px 8px rgba(0,0,0,0.5);pointer-events:none;"></div>

            <!-- ❷ Safari iOS Browser Header -->
            <div class="bg-slate-100/90 backdrop-blur-md border-b border-slate-200/80 flex-shrink-0 z-20" style="padding:0 0 8px;">

                <!-- iOS Status Bar -->
                <div style="height:44px;padding:14px 16px 0;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none;">
                    <span style="font-size:11px;font-weight:700;color:#1c1c1e;font-family:-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:-0.01em;">10:00</span>
                    <div style="display:flex;align-items:center;gap:5px;">
                        <svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:block;"><rect x="0" y="7" width="2.5" height="3" rx="0.5" fill="#1c1c1e"/><rect x="3.5" y="5" width="2.5" height="5" rx="0.5" fill="#1c1c1e"/><rect x="7" y="3" width="2.5" height="7" rx="0.5" fill="#1c1c1e"/><rect x="10.5" y="0" width="2.5" height="10" rx="0.5" fill="#1c1c1e"/></svg>
                        <svg width="13" height="10" viewBox="0 0 13 10" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:block;"><circle cx="6.5" cy="9" r="1.1" fill="#1c1c1e"/><path d="M4 6.8A3.5 3.5 0 019 6.8" stroke="#1c1c1e" stroke-width="1.3" stroke-linecap="round" fill="none"/><path d="M1.5 4.3A6.5 6.5 0 0111.5 4.3" stroke="#1c1c1e" stroke-width="1.3" stroke-linecap="round" fill="none"/></svg>
                        <div style="display:flex;align-items:center;gap:1px;"><div style="width:24px;height:11px;border:1.5px solid #1c1c1e;border-radius:3px;position:relative;display:flex;align-items:center;padding:1.5px;"><div style="height:100%;width:88%;background:#34c759;border-radius:1.5px;"></div><div style="width:2px;height:5px;background:#1c1c1e;border-radius:0 1px 1px 0;position:absolute;right:-3.5px;top:50%;transform:translateY(-50%);"></div></div></div>
                    </div>
                </div>

                <!-- Safari address bar -->
                <div style="padding:4px 12px 0;" class="flex items-center justify-between text-xs">
                    <span class="text-slate-500 font-serif font-bold text-[11px] px-1">AA</span>
                    <div class="flex-1 mx-2 bg-slate-200/70 rounded-xl px-3 py-1 flex items-center justify-center gap-1.5 text-slate-700 text-[11px]">
                        <span class="text-[10px] text-slate-500">&#128274;</span>
                        <span class="truncate font-sans font-medium">inveetaire.com</span>
                    </div>
                    <span class="text-slate-400 text-xs px-1">&#8635;</span>
                </div>
            </div>

            <!-- ❸ Screen Viewport -->
            <div class="flex-1 overflow-y-auto scrollbar-thin select-none relative bg-white" id="invitation-screen-apple" :style="'zoom: ' + (zoomLevel / 100)">
                <?= $invitationScreenHtml ?>
            </div>

            <!-- ❹ Apple Bottom Home Indicator -->
            <div class="h-5 bg-white flex justify-center items-center pb-1 flex-shrink-0 border-t border-slate-100/60 z-20">
                <div class="w-32 h-1 bg-slate-900/80 rounded-full"></div>
            </div>
        </div>

        <!-- FRAME 3: 📲 Tablet (Samsung Galaxy Tab S10) ──────────────────── -->
        <div
            x-show="viewMode === 'tablet'"
            style="
                width: 960px;
                height: 600px;
                border-radius: 30px;
                border-top: 12px solid #1a2333;
                border-bottom: 12px solid #1a2333;
                border-left: 9px solid #1a2333;
                border-right: 9px solid #1a2333;
                box-shadow:
                    inset 0 0 0 1px rgba(255,255,255,0.06),
                    0 22px 48px -8px rgba(0,0,0,0.40);
                background-color: #fff;
                position: relative;
            "
            class="flex flex-col overflow-hidden flex-shrink-0 transition-all duration-300 ease-in-out"
        >
            <!-- ❶ Tablet Front Camera -->
            <div style="position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:999;width:7px;height:7px;border-radius:50%;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,0.1),0 0 0 2px rgba(0,0,0,0.4);pointer-events:none;"></div>

            <!-- ❷ Chrome Tablet Browser Header -->
            <div class="bg-slate-200/90 border-b border-slate-300 flex-shrink-0 z-20" style="padding:0 0 8px;">

                <!-- Status Bar -->
                <div style="height:28px;padding:6px 16px 0;display:flex;align-items:center;justify-content:space-between;pointer-events:none;">
                    <span style="font-size:10px;font-weight:600;color:#374151;font-family:sans-serif;letter-spacing:0.02em;">10:00</span>
                    <div style="display:flex;align-items:center;gap:6px;">
                        <svg width="11" height="9" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:block;"><rect x="0" y="8" width="2" height="2" rx="0.4" fill="#374151"/><rect x="3" y="6" width="2" height="4" rx="0.4" fill="#C9D0DA"/><rect x="6" y="4" width="2" height="6" rx="0.4" fill="#C9D0DA"/><rect x="9" y="2" width="2" height="8" rx="0.4" fill="#C9D0DA"/></svg>
                        <svg width="11" height="9" viewBox="0 0 13 10" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:block;"><circle cx="6.5" cy="9" r="1.1" fill="#374151"/><path d="M4 6.5A3.5 3.5 0 019 6.5" stroke="#374151" stroke-width="1.3" stroke-linecap="round" fill="none"/><path d="M1.5 4A6.5 6.5 0 0111.5 4" stroke="#374151" stroke-width="1.3" stroke-linecap="round" fill="none"/></svg>
                        <div style="display:flex;align-items:center;"><div style="width:19px;height:9px;border:1.5px solid #374151;border-radius:2px;position:relative;display:flex;align-items:center;padding:1px;"><div style="height:100%;width:86%;background:#374151;border-radius:1px;"></div><div style="width:2px;height:4px;background:#374151;border-radius:0 1px 1px 0;position:absolute;right:-3px;top:50%;transform:translateY(-50%);"></div></div></div>
                    </div>
                </div>

                <!-- Chrome Tablet tab row -->
                <div style="padding:4px 12px 0;" class="flex items-center gap-2 text-xs">
                    <div class="bg-white rounded-t-lg px-3 py-1.5 text-slate-800 font-semibold text-[11px] shadow-xs flex items-center gap-2 border-t border-x border-slate-300">
                        <span class="w-2 h-2 rounded-full bg-pink-400"></span>
                        <span class="truncate max-w-[160px]"><?= escape_html($groomName) ?> &amp; <?= escape_html($brideName) ?></span>
                    </div>
                    <div class="flex-1 bg-white rounded-md px-3 py-1 text-[11px] text-slate-600 border border-slate-300 flex items-center gap-2 max-w-lg">
                        <span class="text-slate-400 text-[10px]">&#128274;</span>
                        <span class="truncate font-mono">https://inveetaire.com</span>
                    </div>
                </div>
            </div>

            <!-- ❸ Screen Viewport -->
            <div class="flex-1 overflow-y-auto scrollbar-thin select-none relative bg-white" id="invitation-screen-tablet" :style="'zoom: ' + (zoomLevel / 100)">
                <?= $invitationScreenHtml ?>
            </div>
        </div>

        <!-- FRAME 4: 💻 Desktop (Browser Window) ──────────────────────────── -->
        <div
            x-show="viewMode === 'desktop'"
            style="width:1344px;height:756px;border:1px solid rgba(203,213,225,0.8);border-radius:10px;box-shadow:0 20px 40px -10px rgba(0,0,0,0.2);"
            class="bg-white relative flex flex-col overflow-hidden flex-shrink-0 transition-all duration-300 ease-in-out"
        >
            <!-- Browser Window Chrome Header -->
            <div class="bg-slate-800 px-4 py-2.5 flex items-center gap-3 border-b border-slate-700/80 flex-shrink-0">
                <div class="flex gap-2 items-center">
                    <span class="w-3 h-3 rounded-full bg-rose-500 inline-block shadow-xs"></span>
                    <span class="w-3 h-3 rounded-full bg-amber-500 inline-block shadow-xs"></span>
                    <span class="w-3 h-3 rounded-full bg-emerald-500 inline-block shadow-xs"></span>
                </div>
                <div class="flex-1 bg-slate-900/70 border border-slate-700/50 rounded-lg px-3.5 py-1 text-xs text-slate-300 font-mono flex items-center justify-between max-w-md mx-auto">
                    <span class="truncate text-slate-400">&#128274; https://inveetaire.com &mdash; <?= escape_html($groomName) ?> &amp; <?= escape_html($brideName) ?></span>
                    <span class="text-slate-500 text-[10px] uppercase font-sans tracking-wider font-bold">HTTPS</span>
                </div>
            </div>

            <!-- Screen Viewport -->
            <div class="flex-1 overflow-y-auto scrollbar-thin select-none relative bg-white" id="invitation-screen-desktop" :style="'zoom: ' + (zoomLevel / 100)">
                <?= $invitationScreenHtml ?>
            </div>
        </div>

        <!-- Centered Device Label Badge -->
        <div class="mt-6 mb-2 flex justify-center select-none flex-shrink-0 z-40 relative">
            <span style="background-color:#232323!important;color:#ffffff!important;" class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-semibold tracking-wide border border-slate-700 shadow-md">
                <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
                <span x-show="viewMode === 'android'">Xiaomi 14T Pro</span>
                <span x-show="viewMode === 'apple'">iPhone 15 Pro</span>
                <span x-show="viewMode === 'tablet'">Samsung Galaxy Tab S10</span>
                <span x-show="viewMode === 'desktop'">Desktop Browser</span>
            </span>
        </div>

    </main>

    <!-- ── 3. Footer ────────────────────────────────────────────────────── -->
    <footer class="w-full py-6 px-4 border-t border-slate-200 bg-slate-50/80 text-center text-xs text-slate-400 space-y-1 flex-shrink-0">
        <p>&copy; 2026 INVEETAIRE. All Rights Reserved.</p>
        <p class="text-[11px] text-slate-400/80 font-medium">Preview Simulator &bull; Powered by INVEETAIRE Design Engine</p>
    </footer>

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