{% extends "pos/base.html" %}
{% load static %}

{% block title %}{{ page_title }}{% endblock %}
{% block heading %}{{ page_title }}{% endblock %}

{% block stylesheets %}
<style>
    .guest-demo-page {
        --bg1: #0f172a;
        --bg2: #1d4ed8;
        --bg3: #7c3aed;
        --text-dark: #0f172a;
        --text-muted: #64748b;
        --card-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
        --card-radius: 24px;
        --border-soft: rgba(226, 232, 240, 0.9);
    }

    .guest-demo-page .hero {
        position: relative;
        overflow: hidden;
        border-radius: 28px;
        background: linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 50%, var(--bg3) 100%);
        padding: 42px 34px;
        color: #fff;
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
        margin-bottom: 24px;
    }

    .guest-demo-page .hero::before,
    .guest-demo-page .hero::after {
        content: "";
        position: absolute;
        border-radius: 999px;
        background: rgba(255,255,255,0.08);
        animation: pulseFloat 7s ease-in-out infinite;
    }

    .guest-demo-page .hero::before {
        width: 220px;
        height: 220px;
        top: -70px;
        right: -40px;
    }

    .guest-demo-page .hero::after {
        width: 140px;
        height: 140px;
        bottom: -30px;
        left: 40%;
        animation-delay: 1.6s;
    }

    .guest-demo-page .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(255,255,255,0.14);
        border: 1px solid rgba(255,255,255,0.22);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-bottom: 16px;
    }

    .guest-demo-page .hero-title {
        font-size: 40px;
        line-height: 1.12;
        font-weight: 800;
        margin: 0 0 12px;
        color: #fff;
    }

    .guest-demo-page .hero-text {
        max-width: 760px;
        margin: 0;
        font-size: 15px;
        line-height: 1.75;
        color: rgba(255,255,255,0.92);
    }

    .guest-demo-page .hero-actions {
        margin-top: 22px;
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    .guest-demo-page .hero-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 18px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none !important;
        transition: all .25s ease;
    }

    .guest-demo-page .hero-btn-primary {
        background: #fff;
        color: #0f172a;
    }

    .guest-demo-page .hero-btn-primary:hover {
        color: #0f172a;
        transform: translateY(-2px);
    }

    .guest-demo-page .hero-btn-light {
        background: rgba(255,255,255,0.12);
        color: #fff;
        border: 1px solid rgba(255,255,255,0.2);
    }

    .guest-demo-page .hero-btn-light:hover {
        color: #fff;
        transform: translateY(-2px);
        background: rgba(255,255,255,0.16);
    }

    .guest-demo-page .demo-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }

    .guest-demo-page .demo-card {
        position: relative;
        overflow: hidden;
        border-radius: var(--card-radius);
        background: rgba(255,255,255,0.92);
        border: 1px solid var(--border-soft);
        box-shadow: var(--card-shadow);
        transition: transform .30s ease, box-shadow .30s ease;
    }

    .guest-demo-page .demo-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 28px 55px rgba(15, 23, 42, 0.16);
    }

    .guest-demo-page .demo-card::before {
        content: "";
        position: absolute;
        inset: 0 auto auto 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, #2563eb, #7c3aed);
    }

    .guest-demo-page .demo-image-wrap {
        position: relative;
        padding: 18px 18px 0;
    }

    .guest-demo-page .phone-frame {
        background: linear-gradient(180deg, #0f172a, #111827);
        border-radius: 26px;
        padding: 10px;
        box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
        animation: floatCard 6s ease-in-out infinite;
    }

    .guest-demo-page .phone-notch {
        width: 92px;
        height: 16px;
        border-radius: 0 0 14px 14px;
        background: #020617;
        margin: 0 auto 8px;
    }

    .guest-demo-page .phone-screen {
        border-radius: 20px;
        overflow: hidden;
        background: #e2e8f0;
        aspect-ratio: 9 / 18;
    }

    .guest-demo-page .phone-screen img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .guest-demo-page .demo-body {
        padding: 18px 20px 22px;
    }

    .guest-demo-page .top-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 10px;
    }

    .guest-demo-page .icon-box {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #2563eb, #7c3aed);
        color: #fff;
        font-size: 20px;
        box-shadow: 0 12px 26px rgba(37, 99, 235, 0.25);
    }

    .guest-demo-page .tag {
        display: inline-block;
        padding: 6px 10px;
        border-radius: 999px;
        background: #eff6ff;
        color: #1d4ed8;
        font-size: 12px;
        font-weight: 700;
    }

    .guest-demo-page .demo-title {
        font-size: 22px;
        font-weight: 800;
        margin: 0 0 8px;
        color: var(--text-dark);
    }

    .guest-demo-page .demo-subtitle {
        font-size: 14px;
        line-height: 1.7;
        color: var(--text-muted);
        min-height: 72px;
        margin-bottom: 14px;
    }

    .guest-demo-page .feature-list {
        list-style: none;
        margin: 0 0 18px;
        padding: 0;
    }

    .guest-demo-page .feature-list li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 13px;
        color: #334155;
        margin-bottom: 8px;
        line-height: 1.6;
    }

    .guest-demo-page .feature-list li i {
        color: #059669;
        margin-top: 3px;
    }

    .guest-demo-page .actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .guest-demo-page .btn-open,
    .guest-demo-page .btn-local {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 11px 16px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none !important;
        transition: all .25s ease;
    }

    .guest-demo-page .btn-open {
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        color: #fff;
    }

    .guest-demo-page .btn-open:hover {
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(37,99,235,.24);
    }

    .guest-demo-page .btn-local {
        background: #fff;
        color: #0f172a;
        border: 1px solid #dbe3ef;
    }

    .guest-demo-page .btn-local:hover {
        color: #0f172a;
        transform: translateY(-2px);
    }

    .guest-demo-page .bottom-note {
        margin-top: 26px;
        border-radius: 20px;
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        border: 1px solid #e5eefc;
        box-shadow: 0 14px 35px rgba(15, 23, 42, .08);
        padding: 22px;
    }

    .guest-demo-page .bottom-note h4 {
        margin: 0 0 8px;
        font-size: 20px;
        font-weight: 800;
        color: var(--text-dark);
    }

    .guest-demo-page .bottom-note p {
        margin: 0;
        color: var(--text-muted);
        line-height: 1.7;
        font-size: 14px;
    }

    @keyframes floatCard {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-8px); }
    }

    @keyframes pulseFloat {
        0%, 100% { transform: scale(1); opacity: .55; }
        50% { transform: scale(1.08); opacity: .9; }
    }

    @media (max-width: 1199.98px) {
        .guest-demo-page .demo-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 767.98px) {
        .guest-demo-page .hero {
            padding: 30px 18px;
            border-radius: 22px;
        }

        .guest-demo-page .hero-title {
            font-size: 28px;
        }

        .guest-demo-page .demo-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="guest-demo-page">
    <div class="hero">
        <div class="eyebrow">
            <i class="fas fa-mobile-alt"></i>
            Guest App Demo Screens
        </div>

        <h2 class="hero-title">Login, dashboard and bookings demo in one modern guest app page</h2>
        <p class="hero-text">
            This page shows dummy guest app demo cards with online preview links. You can later replace these URLs, screenshots and actions from backend settings or your own app deployment.
        </p>

        <div class="hero-actions">
            <a href="{% url 'hotel:guest:app_dashboard' %}" class="hero-btn hero-btn-primary">
                <i class="fas fa-th-large"></i> Back to Guest Dashboard
            </a>
            <a href="{% url 'hotel:guest:app_config' %}" class="hero-btn hero-btn-light">
                <i class="fas fa-cog"></i> Open App Configuration
            </a>
        </div>
    </div>

    <div class="demo-grid">
        {% for item in demo_pages %}
            <div class="demo-card">
                <div class="demo-image-wrap">
                    <div class="phone-frame">
                        <div class="phone-notch"></div>
                        <div class="phone-screen">
                            <img src="{{ item.image }}" alt="{{ item.title }}">
                        </div>
                    </div>
                </div>

                <div class="demo-body">
                    <div class="top-row">
                        <div class="icon-box">
                            <i class="{{ item.icon }}"></i>
                        </div>
                        <div class="tag">{{ item.key|title }}</div>
                    </div>

                    <h3 class="demo-title">{{ item.title }}</h3>
                    <div class="demo-subtitle">{{ item.subtitle }}</div>

                    <ul class="feature-list">
                        {% for point in item.points %}
                            <li>
                                <i class="fas fa-check-circle"></i>
                                <span>{{ point }}</span>
                            </li>
                        {% endfor %}
                    </ul>

                    <div class="actions">
                        <a href="{{ item.demo_url }}" target="_blank" rel="noopener" class="btn-open">
                            <i class="fas fa-external-link-alt"></i>
                            Open Online Demo
                        </a>

                        {% if item.key == "login" %}
                            <a href="{% url 'hotel:guest:login' %}" class="btn-local">
                                <i class="fas fa-sign-in-alt"></i>
                                Local Page
                            </a>
                        {% elif item.key == "dashboard" %}
                            <a href="{% url 'hotel:guest:dashboard' %}" class="btn-local">
                                <i class="fas fa-home"></i>
                                Local Page
                            </a>
                        {% elif item.key == "bookings" %}
                            <a href="{% url 'hotel:guest:bookings' %}" class="btn-local">
                                <i class="fas fa-list"></i>
                                Local Page
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>

    <div class="bottom-note">
        <h4>Later backend integration</h4>
        <p>
            Right now the online demo links are placeholder URLs. Later you can store real demo URLs in configuration and show live guest app previews from your own backend or deployed frontend.
        </p>
    </div>
</div>
{% endblock %}