<?php

/**
 * Landing Page — Inveetaire Public Front Page
 *
 * RC-007: Visual Design & Brand Identity Refinement.
 * - Premium Light-themed Wedding SaaS Brand Aesthetic
 * - Dominated by white/off-white background
 * - Primary: Soft Lavender (#A855F7) / Pastel Pink
 * - Secondary: Soft Periwinkle Blue / Indigo (#6366F1)
 * - Accent: Soft Rose / Pink (#F472B6)
 * - Layout, hierarchy, and content kept exactly as in RC-006
 */

use App\Core\Session;

// ── Dynamic portal links ─────────────────────────────────────────────────────
$coupleLink = '/couple';
$adminLink  = '/admin';

if (Session::has('auth_user_id')) {
    $role = (string) Session::get('role_snapshot', '');
    if ($role === 'couple') {
        $coupleLink = '/app/couple/dashboard';
    } elseif ($role === 'crew') {
        $coupleLink = '/app/crew/dashboard';
    } elseif ($role === 'super_admin') {
        $adminLink = '/app/admin/dashboard';
    }
}
?>
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Digital Wedding Management Platform • INVEETAIRE</title>
    <meta name="description" content="Create beautiful digital invitations, manage guests, collect RSVP, send personalized invitations, perform QR Check-In, and monitor your wedding day — all in one platform.">

    <!-- Open Graph -->
    <meta property="og:title" content="Digital Wedding Management Platform • INVEETAIRE">
    <meta property="og:description" content="Create beautiful digital invitations, manage guests, collect RSVP, send personalized invitations, perform QR Check-In, and monitor your wedding day — all in one platform.">
    <meta property="og:type" content="website">

    <!-- Application stylesheet (compiled Tailwind + 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() ?>">

    <!-- 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') ?>">

    <style>
        /* ── Navbar glass transitions (Light Mode Refinement) ── */
        .nav-transparent {
            background-color: transparent;
            border-bottom-color: transparent;
        }
        .nav-solid {
            background-color: rgba(255, 255, 255, 0.85); /* Premium glass */
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom-color: rgba(226, 232, 240, 0.8); /* slate-200 */
            box-shadow: 0 4px 20px -2px rgba(148, 163, 184, 0.08); /* Soft slate shadow */
        }

        /* ── Mobile menu ── */
        .mobile-menu-hidden { display: none; }
        .mobile-menu-visible { display: block; }

        /* ── Luxury Wedding Glow ── */
        .hero-glow {
            position: absolute;
            top: -150px; left: 50%;
            transform: translateX(-50%);
            width: 800px; height: 800px;
            background: radial-gradient(circle, rgba(212,162,140,0.06) 0%, rgba(212,162,140,0.03) 50%, transparent 80%);
            pointer-events: none;
            z-index: 0;
        }

        /* ── Card hover lifts ── */
        .feature-card {
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .feature-card:hover {
            border-color: rgba(212, 162, 140, 0.5); /* Soft Rose Gold border */
            box-shadow: 0 12px 30px -4px rgba(212, 162, 140, 0.08);
            transform: translateY(-2px);
        }

        .pkg-card {
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .pkg-card:hover {
            border-color: rgba(212, 162, 140, 0.6);
            box-shadow: 0 16px 40px -6px rgba(212, 162, 140, 0.1);
            transform: translateY(-3px);
        }
    </style>
</head>
<body class="bg-white font-sans text-slate-800 antialiased overflow-x-hidden selection:bg-[#F0E0D6] selection:text-[#232323]">

    <!-- ══════════════════════════════════════════════════════════════════════
         1. HEADER — Sticky Navigation
         ══════════════════════════════════════════════════════════════════════ -->
    <header id="site-header" class="fixed top-0 inset-x-0 z-50 border-b nav-transparent transition-all duration-300" role="banner">
        <nav class="max-w-7xl mx-auto px-6 lg:px-8" role="navigation" aria-label="Main navigation">
            <div class="flex items-center justify-between h-16">

                <!-- Logo -->
                <a href="/" class="flex-shrink-0 hover:opacity-80 transition-opacity" aria-label="INVEETAIRE Homepage">
                    <img src="<?= asset('/assets/branding/logo/Primary-Logo-Light-TransparentBG.png') ?>" alt="INVEETAIRE Logo" style="height: 64px; width: auto; object-fit: contain;">
                </a>

                <!-- Desktop nav links (hidden on mobile) -->
                <div class="hidden md:flex items-center space-x-8" role="list">
                    <a href="#why-inveetaire" class="text-sm font-semibold text-slate-600 hover:text-[#D4A28C] transition-colors" role="listitem">Why Us</a>
                    <a href="#features"       class="text-sm font-semibold text-slate-600 hover:text-[#D4A28C] transition-colors" role="listitem">Features</a>
                    <a href="#packages"       class="text-sm font-semibold text-slate-600 hover:text-[#D4A28C] transition-colors" role="listitem">Packages</a>
                    <a href="#contact"        class="text-sm font-semibold text-slate-600 hover:text-[#D4A28C] transition-colors" role="listitem">Contact</a>
                </div>

                <!-- Desktop portal buttons -->
                <div class="hidden md:flex items-center gap-3">
                    <a href="<?= escape_html($coupleLink) ?>"
                       id="nav-couple-login-btn"
                       class="btn btn-secondary btn-md">
                       Couple Login
                    </a>
                    <a href="<?= escape_html($adminLink) ?>"
                       id="nav-admin-login-btn"
                       class="btn btn-primary btn-md">
                        Admin
                    </a>
                </div>

                <!-- Mobile hamburger (visible on mobile only) -->
                <button id="mobile-menu-btn"
                        class="md:hidden flex items-center justify-center w-10 h-10 rounded-lg text-slate-500 hover:text-slate-900 hover:bg-slate-100 transition-colors"
                        aria-expanded="false"
                        aria-controls="mobile-menu"
                        aria-label="Toggle navigation menu">
                    <i id="hamburger-icon" class="fa-solid fa-bars text-lg w-5 h-5 flex items-center justify-center" aria-hidden="true"></i>
                    <i id="close-icon" class="fa-solid fa-xmark text-lg w-5 h-5 flex items-center justify-center hidden" aria-hidden="true"></i>
                </button>

            </div>

            <!-- Mobile dropdown menu -->
            <div id="mobile-menu"
                 class="mobile-menu-hidden md:hidden border-t border-slate-100 pb-4 bg-white/95 backdrop-blur-md"
                 role="menu"
                 aria-label="Mobile navigation">
                <div class="pt-3 space-y-1">
                    <a href="#why-inveetaire" class="block px-3 py-2.5 rounded-lg text-sm font-semibold text-slate-600 hover:text-[#D4A28C] hover:bg-slate-50 transition-colors" role="menuitem">Why Us</a>
                    <a href="#features"       class="block px-3 py-2.5 rounded-lg text-sm font-semibold text-slate-600 hover:text-[#D4A28C] hover:bg-slate-50 transition-colors" role="menuitem">Features</a>
                    <a href="#packages"       class="block px-3 py-2.5 rounded-lg text-sm font-semibold text-slate-600 hover:text-[#D4A28C] hover:bg-slate-50 transition-colors" role="menuitem">Packages</a>
                    <a href="#contact"        class="block px-3 py-2.5 rounded-lg text-sm font-semibold text-slate-600 hover:text-[#D4A28C] hover:bg-slate-50 transition-colors" role="menuitem">Contact</a>
                </div>
                <div class="mt-4 pt-4 border-t border-slate-100 flex flex-col gap-3 px-3">
                    <a href="<?= escape_html($coupleLink) ?>"
                       class="block text-center text-sm font-semibold text-slate-600 px-4 py-2.5 rounded-lg border border-slate-200 hover:text-slate-900 hover:bg-slate-50 transition-colors">
                        Couple Login
                    </a>
                    <a href="<?= escape_html($adminLink) ?>"
                       class="block text-center text-sm font-semibold text-white px-4 py-2.5 rounded-lg brand-gradient transition-all duration-150 hover:opacity-90">
                        Admin Login
                    </a>
                </div>
            </div>

        </nav>
    </header>

    <!-- ══════════════════════════════════════════════════════════════════════
         MAIN CONTENT
         ══════════════════════════════════════════════════════════════════════ -->
    <main id="main-content" role="main">

        <!-- ── 2. HERO SECTION ─────────────────────────────────────────────── -->
        <section id="hero" class="relative pt-24 pb-16 md:pt-36 md:pb-24 overflow-hidden" aria-labelledby="hero-heading">
            <div class="hero-glow"></div>

            <div class="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">

                    <!-- Left: Headline + Description + CTAs -->
                    <div class="space-y-6 text-left">
                        <h1 id="hero-heading" class="uppercase tracking-[0.2em] text-left leading-none" style="font-family: 'Playfair Display', Georgia, serif; color: var(--brand-rose-gold); font-weight: 500; font-size: clamp(2.75rem, 6.5vw, 5rem); margin-top: 1rem; margin-bottom: 1rem;">
                            INVEETAIRE
                        </h1>

                        <div class="flex justify-start">
                            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full border text-xs font-bold uppercase tracking-widest" style="border-color: var(--brand-rose-gold); background-color: var(--brand-ivory); color: var(--brand-charcoal);">
                                <span aria-hidden="true">✦</span> Premium Wedding Experience Platform
                            </div>
                        </div>
                        <p class="text-base sm:text-lg text-slate-600 leading-relaxed max-w-xl text-left">
                            Create beautiful digital invitations, manage guests, collect RSVP, send personalized invitations, perform QR Check-In, and monitor your wedding day — all in one platform.
                        </p>

                        <div class="flex flex-col sm:flex-row items-center justify-start gap-4 pt-2">
                            <a href="<?= escape_html($coupleLink) ?>"
                               id="hero-start-btn"
                               class="btn btn-primary btn-lg w-full sm:w-auto">
                                Start Your Wedding
                            </a>
                            <a href="#packages"
                               id="hero-packages-btn"
                               class="btn btn-secondary btn-lg w-full sm:w-auto">
                                View Packages
                            </a>
                        </div>
                    </div>

                    <!-- Right: Dashboard mockup image -->
                    <div class="flex justify-center lg:justify-end">
                        <div class="relative w-full max-w-lg lg:max-w-none">
                            <!-- Glow ring behind image -->
                            <div class="absolute -inset-1 rounded-2xl blur-xl opacity-80" style="background: radial-gradient(circle, rgba(212,162,140,0.2) 0%, transparent 80%);" aria-hidden="true"></div>
                            <div class="relative rounded-2xl overflow-hidden border border-slate-200/80 shadow-xl shadow-slate-200/40 bg-white p-1">
                                <img src="/assets/images/dashboard_mockup.png"
                                     alt="Inveetaire platform dashboard showing guest management and RSVP analytics"
                                     class="w-full h-auto object-cover block rounded-xl border border-slate-100"
                                     width="640" height="400"
                                     loading="eager">
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>

        <!-- ── 3. WHY INVEETAIRE ────────────────────────────────────────────── -->
        <section id="why-inveetaire" class="py-20 border-t border-slate-100 bg-[#FAF8F3]" aria-labelledby="why-heading">
            <div class="max-w-7xl mx-auto px-6 lg:px-8">

                <!-- Section header -->
                <div class="max-w-2xl mx-auto text-center mb-14 space-y-3">
                    <p class="text-xs font-bold uppercase tracking-widest" style="color: var(--brand-rose-gold);">Simplifying Wedding Operations</p>
                    <h2 id="why-heading" class="text-3xl sm:text-4xl font-extrabold text-slate-900">
                        Why couples choose Inveetaire
                    </h2>
                    <p class="text-slate-600 text-sm sm:text-base leading-relaxed">
                        Unlike standard digital invitation builders, Inveetaire handles the complete lifecycle of your wedding guests — from initial invitation to the final day check-in analytics.
                    </p>
                </div>

                <!-- 3-column cards -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">

                    <article class="card card-feature space-y-4">
                        <div class="w-11 h-11 rounded-xl flex items-center justify-center text-xl" style="background-color: var(--brand-ivory-warm); border: 1px solid var(--brand-ivory-dark); color: var(--brand-rose-gold);" aria-hidden="true">✨</div>
                        <div>
                            <h3 class="text-base font-bold text-slate-900 mb-2">Digital Invitation</h3>
                            <p class="text-slate-650 text-sm leading-relaxed">
                                Exquisite, mobile-optimized designs with fully customizable sections, wedding day timelines, maps, and music.
                            </p>
                        </div>
                    </article>

                    <article class="card card-feature space-y-4">
                        <div class="w-11 h-11 rounded-xl flex items-center justify-center text-xl" style="background-color: var(--brand-ivory-warm); border: 1px solid var(--brand-ivory-dark); color: var(--brand-rose-gold);" aria-hidden="true">👥</div>
                        <div>
                            <h3 class="text-base font-bold text-slate-900 mb-2">Guest Management</h3>
                            <p class="text-slate-650 text-sm leading-relaxed">
                                Effortlessly import guests, group family and friends, configure guest allocations, and track exact confirmation states.
                            </p>
                        </div>
                    </article>

                    <article class="card card-feature space-y-4">
                        <div class="w-11 h-11 rounded-xl flex items-center justify-center text-xl" style="background-color: var(--brand-ivory-warm); border: 1px solid var(--brand-ivory-dark); color: var(--brand-rose-gold);" aria-hidden="true">⚡</div>
                        <div>
                            <h3 class="text-base font-bold text-slate-900 mb-2">Wedding Operations</h3>
                            <p class="text-slate-650 text-sm leading-relaxed">
                                Empower your coordination crew with secure QR scanning tools and stay updated with live entry stats on the dashboard.
                            </p>
                        </div>
                    </article>

                </div>
            </div>
        </section>

        <!-- ── 4. FEATURES SECTION ──────────────────────────────────────────── -->
        <section id="features" class="py-20 border-t border-slate-100 bg-white" aria-labelledby="features-heading">
            <div class="max-w-7xl mx-auto px-6 lg:px-8">

                <!-- Section header -->
                <div class="max-w-2xl mx-auto text-center mb-14 space-y-3">
                    <p class="text-xs font-bold uppercase tracking-widest" style="color: var(--brand-rose-gold);">Platform Capabilities</p>
                    <h2 id="features-heading" class="text-3xl sm:text-4xl font-extrabold text-slate-900">
                        Full-stack digital invitation &amp; logistics
                    </h2>
                    <p class="text-slate-600 text-sm sm:text-base leading-relaxed">
                        Designed to replace disorganized spreadsheets and manual messaging scripts with a single unified workspace.
                    </p>
                </div>

                <!-- 3-column feature cards grid -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">

                    <article class="card card-feature space-y-3">
                        <div class="w-10 h-10 rounded-lg flex items-center justify-center text-lg" style="background-color: var(--brand-ivory-warm); border: 1px solid var(--brand-ivory-dark); color: var(--brand-rose-gold);" aria-hidden="true">
                            <i class="fa-solid fa-envelope-open-text"></i>
                        </div>
                        <h3 class="font-bold text-slate-900 text-base">Digital Invitation</h3>
                        <p class="text-slate-600 text-sm leading-relaxed">
                            Publish mobile-first wedding web pages with embedded galleries, event locations, and personal token codes.
                        </p>
                    </article>

                    <article class="card card-feature space-y-3">
                        <div class="w-10 h-10 rounded-lg flex items-center justify-center text-lg" style="background-color: var(--brand-ivory-warm); border: 1px solid var(--brand-ivory-dark); color: var(--brand-rose-gold);" aria-hidden="true">
                            <i class="fa-solid fa-file-import"></i>
                        </div>
                        <h3 class="font-bold text-slate-900 text-base">Guest Import</h3>
                        <p class="text-slate-600 text-sm leading-relaxed">
                            Import thousands of guests from CSV and Excel instantly with duplicate validation and automated code generation.
                        </p>
                    </article>

                    <article class="card card-feature space-y-3">
                        <div class="w-10 h-10 rounded-lg flex items-center justify-center text-lg" style="background-color: var(--brand-ivory-warm); border: 1px solid var(--brand-ivory-dark); color: var(--brand-rose-gold);" aria-hidden="true">
                            <i class="fa-solid fa-comments"></i>
                        </div>
                        <h3 class="font-bold text-slate-900 text-base">RSVP &amp; Wishes</h3>
                        <p class="text-slate-600 text-sm leading-relaxed">
                            Receive instant confirmation feedbacks and heartfelt virtual wishes on the dashboard as guests open links.
                        </p>
                    </article>

                    <article class="card card-feature space-y-3">
                        <div class="w-10 h-10 rounded-lg flex items-center justify-center text-lg" style="background-color: var(--brand-ivory-warm); border: 1px solid var(--brand-ivory-dark); color: var(--brand-rose-gold);" aria-hidden="true">
                            <i class="fa-solid fa-envelope"></i>
                        </div>
                        <h3 class="font-bold text-slate-900 text-base">WhatsApp Personalization</h3>
                        <p class="text-slate-600 text-sm leading-relaxed">
                            Generate custom WhatsApp links featuring guest-specific codes and customized text scripts dynamically.
                        </p>
                    </article>

                    <article class="card card-feature space-y-3">
                        <div class="w-10 h-10 rounded-lg flex items-center justify-center text-lg" style="background-color: var(--brand-ivory-warm); border: 1px solid var(--brand-ivory-dark); color: var(--brand-rose-gold);" aria-hidden="true">
                            <i class="fa-solid fa-qrcode"></i>
                        </div>
                        <h3 class="font-bold text-slate-900 text-base">QR Check-In</h3>
                        <p class="text-slate-600 text-sm leading-relaxed">
                            Admit guests securely at entry points. Scanner verifies code, prevents duplicate entries, and validates limits.
                        </p>
                    </article>

                    <article class="card card-feature space-y-3">
                        <div class="w-10 h-10 rounded-lg flex items-center justify-center text-lg" style="background-color: var(--brand-ivory-warm); border: 1px solid var(--brand-ivory-dark); color: var(--brand-rose-gold);" aria-hidden="true">
                            <i class="fa-solid fa-chart-line"></i>
                        </div>
                        <h3 class="font-bold text-slate-900 text-base">Attendance Dashboard</h3>
                        <p class="text-slate-600 text-sm leading-relaxed">
                            Track live checked-in guest counts, actual pax ratios, and seat capacities directly from the operation control panel.
                        </p>
                    </article>

                </div>
            </div>
        </section>

        <!-- ── 5. PACKAGES SECTION ──────────────────────────────────────────── -->
        <section id="packages" class="py-20 border-t border-slate-100 bg-[#FAF8F3]" aria-labelledby="packages-heading">
            <div class="max-w-7xl mx-auto px-6 lg:px-8">

                <!-- Section header -->
                <div class="max-w-2xl mx-auto text-center mb-14 space-y-3">
                    <p class="text-xs font-bold uppercase tracking-widest" style="color: var(--brand-rose-gold);">SaaS Plans</p>
                    <h2 id="packages-heading" class="text-3xl sm:text-4xl font-extrabold text-slate-900">
                        Simple, transparent pricing
                    </h2>
                    <p class="text-slate-600 text-sm sm:text-base leading-relaxed">
                        Pick the package that matches your event scale. No monthly subscriptions — pay only per event.
                    </p>
                </div>

                <!-- Package cards grid -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-stretch">

                    <!-- Package 1: Engagement -->
                    <div id="starter-pkg" class="card card-pricing">
                        <div class="flex-1">
                            <span class="inline-block text-xs font-bold uppercase tracking-widest px-3 py-1 rounded-full border" style="border-color: var(--brand-rose-gold); background-color: var(--brand-ivory); color: var(--brand-charcoal);">Engagement</span>
                            <div class="mt-5 flex items-baseline gap-2">
                                <span class="text-4xl font-extrabold text-slate-900">IDR 490k</span>
                                <span class="text-slate-500 text-sm">/ event</span>
                            </div>
                            <p class="mt-3 text-slate-500 text-sm">Ideal for intimate engagements and celebrations.</p>
                            <hr class="my-6 border-slate-100">
                            <ul class="space-y-3 text-sm" role="list" aria-label="Engagement plan features">
                                <li class="flex items-center gap-3 text-slate-600"><span class="font-bold flex-shrink-0" style="color: var(--brand-rose-gold);" aria-hidden="true">✓</span> 1 Custom Theme Invitation</li>
                                <li class="flex items-center gap-3 text-slate-600"><span class="font-bold flex-shrink-0" style="color: var(--brand-rose-gold);" aria-hidden="true">✓</span> Up to 150 Guests</li>
                                <li class="flex items-center gap-3 text-slate-600"><span class="font-bold flex-shrink-0" style="color: var(--brand-rose-gold);" aria-hidden="true">✓</span> RSVP &amp; Wishes Log</li>
                                <li class="flex items-center gap-3 text-slate-600"><span class="font-bold flex-shrink-0" style="color: var(--brand-rose-gold);" aria-hidden="true">✓</span> Standard WhatsApp Links</li>
                                <li class="flex items-center gap-3 text-slate-400"><span class="flex-shrink-0" aria-hidden="true">✕</span> QR Check-In Suite</li>
                            </ul>
                        </div>
                        <button class="btn btn-secondary btn-md w-full mt-8" type="button">
                            Contact Sales
                        </button>
                    </div>

                    <!-- Package 2: Wedding (HIGHLIGHTED) -->
                    <div id="pro-pkg" class="relative card card-pricing card-pricing-highlighted">
                        <div class="absolute -top-4 left-1/2 -translate-x-1/2 text-white font-extrabold text-[10px] tracking-widest uppercase py-1.5 px-4 rounded-full shadow-md" style="background-color: var(--brand-charcoal);" aria-label="Most Popular plan">
                            Most Popular
                        </div>
                        <div class="flex-1">
                            <span class="inline-block text-xs font-bold uppercase tracking-widest px-3 py-1 rounded-full border" style="border-color: var(--brand-rose-gold); background-color: var(--brand-rose-gold-lt); color: var(--brand-charcoal);">Wedding</span>
                            <div class="mt-5 flex items-baseline gap-2">
                                <span class="text-4xl font-extrabold text-slate-900">IDR 990k</span>
                                <span class="text-slate-500 text-sm">/ event</span>
                            </div>
                            <p class="mt-3 text-slate-600 text-sm">Everything you need for a perfectly organized wedding day.</p>
                            <hr class="my-6 border-slate-100">
                            <ul class="space-y-3 text-sm" role="list" aria-label="Wedding plan features">
                                <li class="flex items-center gap-3 text-slate-800"><span class="font-bold flex-shrink-0" style="color: var(--brand-rose-gold);" aria-hidden="true">✓</span> Custom Theme Invitation</li>
                                <li class="flex items-center gap-3 text-slate-800"><span class="font-bold flex-shrink-0" style="color: var(--brand-rose-gold);" aria-hidden="true">✓</span> Up to 500 Guests</li>
                                <li class="flex items-center gap-3 text-slate-600"><span class="font-bold flex-shrink-0" style="color: var(--brand-rose-gold);" aria-hidden="true">✓</span> RSVP &amp; Wishes Log</li>
                                <li class="flex items-center gap-3 text-slate-600"><span class="font-bold flex-shrink-0" style="color: var(--brand-rose-gold);" aria-hidden="true">✓</span> WhatsApp Personalization</li>
                                <li class="flex items-center gap-3 text-slate-600"><span class="font-bold flex-shrink-0" style="color: var(--brand-rose-gold);" aria-hidden="true">✓</span> Crew QR Check-In Suite</li>
                            </ul>
                        </div>
                        <button class="btn btn-primary btn-md w-full mt-8" type="button">
                            Contact Sales
                        </button>
                    </div>

                    <!-- Package 3: Custom -->
                    <div id="ent-pkg" class="card card-pricing">
                        <div class="flex-1">
                            <span class="inline-block text-xs font-bold text-slate-600 uppercase tracking-widest bg-slate-100 px-3 py-1 rounded-full border border-slate-200">Custom</span>
                            <div class="mt-5 flex items-baseline gap-2">
                                <span class="text-4xl font-extrabold text-slate-900">Custom</span>
                                <span class="text-slate-500 text-sm">/ contract</span>
                            </div>
                            <p class="mt-3 text-slate-500 text-sm">For wedding planners, large scale events, or unique experiences.</p>
                            <hr class="my-6 border-slate-100">
                            <ul class="space-y-3 text-sm" role="list" aria-label="Custom plan features">
                                <li class="flex items-center gap-3 text-slate-600"><span class="font-bold flex-shrink-0" style="color: var(--brand-rose-gold);" aria-hidden="true">✓</span> Up to 1,000+ Guests</li>
                                <li class="flex items-center gap-3 text-slate-600"><span class="font-bold flex-shrink-0" style="color: var(--brand-rose-gold);" aria-hidden="true">✓</span> Custom Branding Features</li>
                                <li class="flex items-center gap-3 text-slate-600"><span class="font-bold flex-shrink-0" style="color: var(--brand-rose-gold);" aria-hidden="true">✓</span> Priority Crew Support Chat</li>
                                <li class="flex items-center gap-3 text-slate-600"><span class="font-bold flex-shrink-0" style="color: var(--brand-rose-gold);" aria-hidden="true">✓</span> Advanced Analytical Export</li>
                                <li class="flex items-center gap-3 text-slate-600"><span class="font-bold flex-shrink-0" style="color: var(--brand-rose-gold);" aria-hidden="true">✓</span> Dedicated Integration Manager</li>
                            </ul>
                        </div>
                        <button class="btn btn-secondary btn-md w-full mt-8" type="button">
                            Contact Sales
                        </button>
                    </div>

                </div>
            </div>
        </section>

        <!-- ── 6. CALL TO ACTION ────────────────────────────────────────────── -->
        <section id="cta" class="py-24 border-t border-slate-100" style="background-color: var(--brand-ivory-warm);" aria-labelledby="cta-heading">
            <div class="max-w-3xl mx-auto px-6 lg:px-8 text-center space-y-8">
                <h2 id="cta-heading" class="text-3xl sm:text-4xl md:text-5xl font-black text-slate-900 leading-tight tracking-tight">
                    Ready to simplify your wedding?
                </h2>
                <p class="text-slate-600 text-sm sm:text-base leading-relaxed max-w-xl mx-auto">
                    Join couples using Inveetaire to manage their invitations and wedding day logistics seamlessly.
                </p>
                <div>
                    <a href="<?= escape_html($coupleLink) ?>"
                       id="cta-create-btn"
                       class="btn btn-primary btn-lg px-10">
                        Create Your Wedding
                    </a>
                </div>
            </div>
        </section>

    </main><!-- /main -->

    <!-- ══════════════════════════════════════════════════════════════════════
         7. FOOTER
         ══════════════════════════════════════════════════════════════════════ -->
    <footer id="contact" class="bg-slate-50 border-t border-slate-200 py-16" role="contentinfo">
        <div class="max-w-7xl mx-auto px-6 lg:px-8">

            <!-- Footer columns -->
            <div class="grid grid-cols-1 md:grid-cols-12 gap-10 lg:gap-12">

                <!-- Brand column -->
                <div class="md:col-span-4 space-y-4">
                    <div class="text-2xl sm:text-3xl uppercase tracking-[0.2em] mb-3" style="font-family: 'Playfair Display', Georgia, serif; color: var(--brand-rose-gold); font-weight: 500;">
                        INVEETAIRE
                    </div>
                    <p class="text-slate-500 text-sm leading-relaxed max-w-xs">
                        A premium digital wedding coordination engine. Providing couples and coordination crews with complete logistics overview.
                    </p>
                </div>

                <!-- Link columns -->
                <div class="md:col-span-8 grid grid-cols-2 sm:grid-cols-3 gap-8">

                    <div class="space-y-4">
                        <h3 class="text-slate-700 text-xs font-bold uppercase tracking-wider">Features</h3>
                        <ul class="space-y-2 text-sm" role="list">
                            <li><a href="#why-inveetaire" class="text-slate-500 hover:text-[#D4A28C] transition-colors">Why Inveetaire</a></li>
                            <li><a href="#features" class="text-slate-500 hover:text-[#D4A28C] transition-colors">Operations</a></li>
                            <li><a href="#features" class="text-slate-500 hover:text-[#D4A28C] transition-colors">Invitation Builder</a></li>
                        </ul>
                    </div>

                    <div class="space-y-4">
                        <h3 class="text-slate-700 text-xs font-bold uppercase tracking-wider">Pricing</h3>
                        <ul class="space-y-2 text-sm" role="list">
                            <li><a href="#packages" class="text-slate-500 hover:text-[#D4A28C] transition-colors">Starter</a></li>
                            <li><a href="#packages" class="text-slate-500 hover:text-[#D4A28C] transition-colors">Professional</a></li>
                            <li><a href="#packages" class="text-slate-500 hover:text-[#D4A28C] transition-colors">Enterprise</a></li>
                        </ul>
                    </div>

                    <div class="space-y-4 col-span-2 sm:col-span-1">
                        <h3 class="text-slate-700 text-xs font-bold uppercase tracking-wider">Portals</h3>
                        <ul class="space-y-2 text-sm" role="list">
                            <li><a href="<?= escape_html($coupleLink) ?>" class="text-slate-500 hover:text-[#D4A28C] transition-colors">Couple Login</a></li>
                            <li><a href="<?= escape_html($adminLink) ?>" class="text-slate-500 hover:text-[#D4A28C] transition-colors">Admin Login</a></li>
                        </ul>
                    </div>

                </div>
            </div>

            <!-- Copyright bar -->
            <div class="mt-12 pt-8 border-t border-slate-200 flex flex-col md:flex-row items-center justify-between gap-4 md:gap-0">
                <!-- Left Column -->
                <div class="flex-1 text-center md:text-left">
                    <p class="text-slate-500 text-xs uppercase tracking-wider font-semibold">&copy; INVEETAIRE</p>
                </div>
                <!-- Center Column -->
                <div class="flex-shrink-0 flex justify-center py-2 md:py-0">
                    <img src="<?= asset('/assets/branding/logo/Secondary-Logo-Light-TransparentBG.png') ?>" alt="INVEETAIRE Logo" style="height: 38px; width: auto; object-fit: contain;" class="opacity-70">
                </div>
                <!-- Right Column -->
                <div class="flex-1 text-center md:text-right">
                    <p class="text-slate-500 text-xs uppercase tracking-wider font-semibold">All Rights Reserved &copy; <?= date('Y') ?></p>
                </div>
            </div>

        </div>
    </footer>

    <!-- ══════════════════════════════════════════════════════════════════════
         SCRIPTS
         ══════════════════════════════════════════════════════════════════════ -->
    <script>
        // ── Sticky navbar: transparent → solid on scroll ─────────────────────
        (function() {
            var header = document.getElementById('site-header');
            if (!header) return;
            function updateNav() {
                if (window.scrollY > 40) {
                    header.classList.remove('nav-transparent');
                    header.classList.add('nav-solid');
                } else {
                    header.classList.remove('nav-solid');
                    header.classList.add('nav-transparent');
                }
            }
            window.addEventListener('scroll', updateNav, { passive: true });
            updateNav();
        })();

        // ── Mobile hamburger toggle ───────────────────────────────────────────
        (function() {
            var btn          = document.getElementById('mobile-menu-btn');
            var menu         = document.getElementById('mobile-menu');
            var iconHamburger = document.getElementById('hamburger-icon');
            var iconClose    = document.getElementById('close-icon');
            if (!btn || !menu) return;

            var isOpen = false;

            btn.addEventListener('click', function() {
                isOpen = !isOpen;
                btn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
                if (isOpen) {
                    menu.classList.remove('mobile-menu-hidden');
                    menu.classList.add('mobile-menu-visible');
                    iconHamburger.classList.add('hidden');
                    iconClose.classList.remove('hidden');
                } else {
                    menu.classList.remove('mobile-menu-visible');
                    menu.classList.add('mobile-menu-hidden');
                    iconHamburger.classList.remove('hidden');
                    iconClose.classList.add('hidden');
                }
            });

            // Close menu when clicking any nav link inside it
            menu.querySelectorAll('a').forEach(function(link) {
                link.addEventListener('click', function() {
                    isOpen = false;
                    btn.setAttribute('aria-expanded', 'false');
                    menu.classList.remove('mobile-menu-visible');
                    menu.classList.add('mobile-menu-hidden');
                    iconHamburger.classList.remove('hidden');
                    iconClose.classList.add('hidden');
                });
            });
        })();
    </script>

</body>
</html>
