{# Premium Marketing - Hero Section (Spec 035)
   Purple gradient hero matching /land/team-plus/ design #}
<div class="premium-marketing">

    <div class="premium-hero">
        <div class="premium-hero__inner">
            <div class="premium-hero__content">
                <div class="premium-hero__badges">
                    <span class="premium-badge premium-badge--new">NEW</span>
                    <span class="premium-badge premium-badge--addon">Premium Add-on</span>
                </div>

                <h1 class="premium-hero__title">Team+ Module</h1>

                <p class="premium-hero__subtitle">
                    Replace WhenIWork and Homebase with native scheduling built right into BuyerKiosk.
                    AI-powered schedule generation, staff chat, and mobile apps for your entire team.
                </p>

                <div class="premium-hero__pricing">
                    <span class="premium-hero__amount">$30</span>
                    <span class="premium-hero__period"> /month per store</span>
                    <p class="premium-hero__note">Unlimited employees included &mdash; no per-seat fees</p>
                </div>

                <div class="premium-hero__cta">
                    {% if isOwner %}
                        {% if not trialUsed %}
                            <button type="button" class="btn-premium-white" id="premiumStartTrialBtn">
                                <i class="fa-solid fa-rocket"></i> Start Free Trial
                            </button>
                            <a href="#features" class="btn-premium-outline">Explore Features</a>
                        {% elseif premiumStatus == 'expired' %}
                            <button type="button" class="btn-premium-white" id="premiumActivateBtn">
                                <i class="fa-solid fa-star"></i> Reactivate Premium
                            </button>
                        {% else %}
                            <button type="button" class="btn-premium-white" id="premiumActivateBtn">
                                <i class="fa-solid fa-star"></i> Enable Premium ($30/mo)
                            </button>
                        {% endif %}
                    {% else %}
                        <span class="btn-premium-outline" style="cursor: default;">
                            <i class="fa-solid fa-lock"></i> Ask your store owner to enable
                        </span>
                    {% endif %}
                </div>
            </div>

            <div class="premium-hero__image">
                <img src="/images/front/features/schedule_large.png"
                     alt="Team+ scheduling calendar with AI-generated schedule"
                     loading="eager">
            </div>
        </div>
    </div>