<?php

/**
 * Theme design workspace preview view.
 * Location: app/views/invitation/design.php
 *
 * Variables expected:
 *   $title      — string — Page title.
 *   $invitation — array — Invitation configuration.
 *   $theme_name — string — Selected theme version formatted.
 *   $theme      — array|null — Selected theme database row details.
 *   $themes     — array — Array of all available theme options.
 *
 * @package Inveetaire
 * @ref     RC-011
 */

/** @var string $title */
/** @var array $invitation */
/** @var string $theme_name */
/** @var array|null $theme */
/** @var array $themes */

?>

<div class="max-w-6xl mx-auto space-y-6">

    <!-- Header Section -->
    <div>
        <h1 class="page-h1">
            <span class="page-header-icon">
                <i class="fa-solid fa-palette"></i>
            </span>
            Design Workspace
        </h1>
        <p class="page-subtitle">Review invitation layout designs, visual themes, and stylesheet assets.</p>
    </div>

    <!-- Active Theme Card -->
    <div class="card p-6 md:p-8 grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
        <!-- Mock Thumbnail -->
        <div class="relative hero-card-gradient rounded-2xl h-64 flex flex-col justify-center items-center text-white overflow-hidden">
            <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-white/10 via-transparent to-transparent"></div>
            
            <!-- Elegant Mock Screen -->
            <div class="z-10 text-center space-y-4 px-6">
                <span class="text-3xl">✨</span>
                <h3 class="text-lg font-serif italic">The Wedding of</h3>
                <h2 class="text-xl font-bold tracking-widest uppercase font-sans">Groom &amp; Bride</h2>
                <div class="w-12 h-px bg-white/40 mx-auto"></div>
                <p class="text-[10px] uppercase tracking-widest text-purple-200">Klasik Putih Theme</p>
            </div>
            
            <!-- Soft shapes -->
            <div class="absolute -left-8 -bottom-8 w-24 h-24 rounded-full bg-white/5 blur-md"></div>
        </div>

        <!-- Info / Actions -->
        <div class="space-y-6">
            <div class="space-y-2">
                <span class="inline-block text-[9px] uppercase tracking-wider font-bold bg-green-50 text-green-700 border border-green-100 px-2 py-0.5 rounded-md">
                    Active
                </span>
                <h2 class="text-xl font-extrabold text-slate-800"><?= escape_html($theme_name) ?></h2>
                <p class="text-xs text-slate-500 leading-relaxed">
                    A beautiful, fully responsive wedding invitation theme featuring a minimal lavender-hued background, elegant typography pairings, guest check-in QR code displays, and attendance wishes forms.
                </p>
            </div>

            <div class="space-y-3">
                <a href="<?= url('/app/couple/invitation/preview') ?>" target="_blank" class="btn btn-secondary w-full py-2.5 text-center block font-semibold text-xs transition-all">
                    👁️ Preview Theme Layout
                </a>
            </div>
        </div>
    </div>

    <!-- Theme Gallery (Upgrade Message) -->
    <div class="card p-6 space-y-6">
        <div>
            <h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider">Premium Themes Directory</h3>
            <p class="text-[11px] text-slate-400 mt-0.5">Explore premium layout themes available for future workspace upgrades.</p>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
            
            <!-- Mock Theme 1 -->
            <div class="relative bg-slate-50 border border-slate-200 rounded-2xl p-4 flex flex-col gap-4 group">
                <div class="bg-gradient-to-br from-pink-400 to-rose-500 rounded-xl h-32 flex items-center justify-center text-white text-xl">
                    🌸
                </div>
                <div>
                    <h4 class="text-xs font-bold text-slate-700">Vintage Rose v1.0</h4>
                    <span class="text-[9px] text-slate-400 font-semibold block mt-0.5">Soft floral and cursive lettering</span>
                </div>
                <div class="absolute inset-0 bg-slate-900/60 backdrop-blur-[1px] rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                    <span class="text-[10px] bg-white text-slate-800 font-bold uppercase tracking-wider px-3 py-1.5 rounded-full shadow-md">
                        Coming Soon
                    </span>
                </div>
            </div>

            <!-- Mock Theme 2 -->
            <div class="relative bg-slate-50 border border-slate-200 rounded-2xl p-4 flex flex-col gap-4 group">
                <div class="bg-gradient-to-br from-amber-400 to-yellow-600 rounded-xl h-32 flex items-center justify-center text-white text-xl">
                    👑
                </div>
                <div>
                    <h4 class="text-xs font-bold text-slate-700">Gold Luxury v1.2</h4>
                    <span class="text-[9px] text-slate-400 font-semibold block mt-0.5">Glamorous gold accents &amp; dark contrast</span>
                </div>
                <div class="absolute inset-0 bg-slate-900/60 backdrop-blur-[1px] rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                    <span class="text-[10px] bg-white text-slate-800 font-bold uppercase tracking-wider px-3 py-1.5 rounded-full shadow-md">
                        Coming Soon
                    </span>
                </div>
            </div>

            <!-- Mock Theme 3 -->
            <div class="relative bg-slate-50 border border-slate-200 rounded-2xl p-4 flex flex-col gap-4 group">
                <div class="bg-gradient-to-br from-teal-400 to-cyan-600 rounded-xl h-32 flex items-center justify-center text-white text-xl">
                    🌿
                </div>
                <div>
                    <h4 class="text-xs font-bold text-slate-700">Rustic Botanical v2.0</h4>
                    <span class="text-[9px] text-slate-400 font-semibold block mt-0.5">Natural botanical foliage outlines</span>
                </div>
                <div class="absolute inset-0 bg-slate-900/60 backdrop-blur-[1px] rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                    <span class="text-[10px] bg-white text-slate-800 font-bold uppercase tracking-wider px-3 py-1.5 rounded-full shadow-md">
                        Coming Soon
                    </span>
                </div>
            </div>

        </div>

        <div class="p-4 bg-purple-50 border border-purple-100 rounded-xl text-center">
            <p class="text-xs text-purple-700 leading-relaxed font-semibold">
                ⭐️ <strong>Future Upgrade Notice:</strong> Theme catalog additions, customizable fonts, custom CSS templates, and multi-ceremony invite formats are currently scheduled for the next major release upgrade.
            </p>
        </div>
    </div>

</div>
