<?php

/**
 * Preview Content View — Dummy Invitation Preview.
 *
 * Renders a standalone simulated invitation page with real invitation data.
 * Loaded inside the Preview Shell (<iframe>) via:
 *   GET /app/couple/invitation/preview/content → InvitationController@previewContent
 *
 * This is NOT production rendering. It uses simplified sections to simulate
 * the visual layout. For the real theme, use Live Preview.
 *
 * Variables expected:
 *   $invitation — array — Combined invitation settings from InvitationService.
 *
 * @package Inveetaire
 * @ref     PILOT-001
 */

/** @var array $invitation */

$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'] ?? '';

$dateObj       = new \DateTime($weddingDate);
$formattedDate = $dateObj->format('l, d F Y');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preview Content</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');

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { height: 100%; }
        body { font-family: 'Outfit', sans-serif; background: #fff; }

        .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>

<!-- 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: ?>
        <!-- Default elegant backdrop -->
        <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">
        This is a simulated layout preview.<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 — Simulated Preview Only</span>
    </div>
</section>

</body>
</html>
