{#
    Demo CTA Banner

    Displays contextual call-to-action banners throughout the demo.
    Positioned at bottom of page content or inline.

    Required context:
    - concept: Store concept (pc, ou, se)
    - conceptInfo: Concept display information

    Optional context:
    - ctaType: Type of CTA (tour_complete, feature_highlight, session_ending)
    - ctaPosition: Position (bottom, inline, sidebar)

    @see docs/specs/021-demo-dashboard/product-requirements.md (Feature 8)
#}

{% set ctaType = ctaType|default('default') %}
{% set ctaPosition = ctaPosition|default('bottom') %}

{% if ctaType == 'tour_complete' %}
{# Tour completion CTA - emphasis on conversion #}
<div class="cta-banner cta-banner-{{ ctaPosition }} cta-tour-complete">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h5 class="mb-1">
                    <i class="fa-solid fa-trophy text-warning me-2"></i>
                    You've explored all the features!
                </h5>
                <p class="text-muted mb-0">
                    Ready to see how BuyerKiosk can transform your {{ conceptInfo.name }} store?
                </p>
            </div>
            <div class="col-md-4 text-md-end mt-3 mt-md-0">
                <button class="btn btn-success btn-lg" data-bs-toggle="modal" data-bs-target="#contactModal" data-cta="tour_complete">
                    <i class="fa-solid fa-calendar-check me-2"></i>
                    Schedule a Call
                </button>
            </div>
        </div>
    </div>
</div>

{% elseif ctaType == 'session_ending' %}
{# Session ending soon CTA #}
<div class="cta-banner cta-banner-{{ ctaPosition }} cta-session-ending alert alert-warning">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h6 class="mb-1">
                    <i class="fa-solid fa-hourglass-half me-2"></i>
                    Your demo session is ending soon
                </h6>
                <p class="mb-0 small">
                    Want to continue exploring? Contact us to set up a full demo or start a free trial.
                </p>
            </div>
            <div class="col-md-4 text-md-end mt-2 mt-md-0">
                <button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#contactModal" data-cta="session_ending">
                    <i class="fa-solid fa-envelope me-1"></i>
                    Contact Us
                </button>
            </div>
        </div>
    </div>
</div>

{% elseif ctaType == 'feature_highlight' %}
{# Feature-specific CTA #}
<div class="cta-banner cta-banner-inline bg-light border rounded p-3 mb-4">
    <div class="d-flex align-items-center justify-content-between">
        <div>
            <h6 class="mb-1">
                <i class="fa-solid fa-lightbulb text-info me-2"></i>
                Want this feature for your store?
            </h6>
            <p class="text-muted mb-0 small">
                See how {{ featureName|default('this feature') }} can boost your operations.
            </p>
        </div>
        <a href="#" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#contactModal" data-cta="feature_{{ featureName|default('generic') }}">
            Learn More
        </a>
    </div>
</div>

{% else %}
{# Default sticky bottom CTA #}
<div class="cta-banner cta-banner-bottom">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-md-7">
                <div class="d-flex align-items-center">
                    <img src="/images/buyerkiosk-icon.svg" alt="BuyerKiosk" height="40" class="me-3" onerror="this.style.display='none'">
                    <div>
                        <h6 class="mb-0">Like what you see?</h6>
                        <p class="mb-0 text-muted small">Get BuyerKiosk for your {{ conceptInfo.name }} franchise</p>
                    </div>
                </div>
            </div>
            <div class="col-md-5 text-md-end mt-3 mt-md-0">
                <button class="btn btn-outline-secondary btn-sm me-2" data-bs-toggle="modal" data-bs-target="#demoHelpModal">
                    <i class="fa-solid fa-circle-question me-1"></i>
                    Learn More
                </button>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#contactModal" data-cta="bottom_banner">
                    <i class="fa-solid fa-calendar me-1"></i>
                    Schedule Demo
                </button>
            </div>
        </div>
    </div>
</div>
{% endif %}

<style>
.cta-banner-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid var(--neutral-200, #e5e7eb);
    padding: 16px 0;
    z-index: 1020;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.cta-banner-inline {
    animation: ctaSlideIn 0.3s ease;
}

@keyframes ctaSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cta-tour-complete {
    background: linear-gradient(135deg, var(--success-50, #ecfdf5), var(--success-100, #d1fae5));
    border-top: 3px solid var(--success-500, #22c55e);
    padding: 24px 0;
}

.cta-session-ending {
    animation: ctaPulse 2s ease infinite;
}

@keyframes ctaPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* Adjust main content when bottom CTA is visible */
body.has-cta-bottom {
    padding-bottom: 80px;
}
</style>