{# Premium Marketing - Comparison Table + Pricing Card (Spec 035)
   Matches /land/team-plus/ comparison and pricing sections #}

    {# ── Comparison Section ── #}
    <div class="premium-section--gray">
        <div class="premium-section__header">
            <span class="premium-section__label">Why Team+</span>
            <h2 class="premium-section__title">Stop Paying for Multiple Apps</h2>
            <p class="premium-section__subtitle">
                Team+ replaces expensive third-party scheduling and communication tools
            </p>
        </div>

        <div class="premium-table-wrap">
            <table class="premium-comparison-table">
                <thead>
                    <tr>
                        <th>Feature</th>
                        <th>WhenIWork</th>
                        <th>Homebase</th>
                        <th class="highlight">Team+</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Staff Scheduling</td>
                        <td><span class="check">&#x2713;</span></td>
                        <td><span class="check">&#x2713;</span></td>
                        <td class="highlight"><span class="check">&#x2713;</span></td>
                    </tr>
                    <tr>
                        <td>Time Tracking</td>
                        <td><span class="check">&#x2713;</span></td>
                        <td><span class="check">&#x2713;</span></td>
                        <td class="highlight"><span class="check">&#x2713;</span></td>
                    </tr>
                    <tr>
                        <td>Team Messaging</td>
                        <td><span class="check">&#x2713;</span></td>
                        <td><span class="limited">Limited</span></td>
                        <td class="highlight"><span class="check">&#x2713;</span></td>
                    </tr>
                    <tr>
                        <td>Mobile Apps</td>
                        <td><span class="check">&#x2713;</span></td>
                        <td><span class="check">&#x2713;</span></td>
                        <td class="highlight"><span class="check">&#x2713;</span></td>
                    </tr>
                    <tr>
                        <td>AI Schedule Generation</td>
                        <td><span class="cross">&#x2717;</span></td>
                        <td><span class="cross">&#x2717;</span></td>
                        <td class="highlight"><span class="check">&#x2713;</span></td>
                    </tr>
                    <tr>
                        <td>Integrated with POS Data</td>
                        <td><span class="cross">&#x2717;</span></td>
                        <td><span class="cross">&#x2717;</span></td>
                        <td class="highlight"><span class="check">&#x2713;</span></td>
                    </tr>
                    <tr>
                        <td>Uses Historical Wait Times</td>
                        <td><span class="cross">&#x2717;</span></td>
                        <td><span class="cross">&#x2717;</span></td>
                        <td class="highlight"><span class="check">&#x2713;</span></td>
                    </tr>
                    <tr>
                        <td>Resale Store Specific</td>
                        <td><span class="cross">&#x2717;</span></td>
                        <td><span class="cross">&#x2717;</span></td>
                        <td class="highlight"><span class="check">&#x2713;</span></td>
                    </tr>
                    <tr>
                        <td>Price</td>
                        <td>$4/user/mo</td>
                        <td>$24.95/loc + $4/user</td>
                        <td class="highlight"><strong>$30/store</strong><br><small>Unlimited users</small></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="premium-savings-card">
            <div class="premium-savings-card__emoji">&#x1F4B0;</div>
            <div class="premium-savings-card__title">Save $50-$150/month</div>
            <div class="premium-savings-card__desc">
                A store with 10 employees typically pays $65-$175/month for WhenIWork or Homebase.
                Team+ is just $30/month with unlimited employees.
            </div>
        </div>
    </div>

    {# ── Pricing Card ── #}
    <div class="premium-section">
        <div class="premium-pricing-card">
            <span class="premium-badge premium-badge--addon">Premium Add-on</span>
            <h2 class="premium-pricing-card__title">Team+ Module</h2>

            <div>
                <span class="premium-pricing-card__amount">$30</span>
                <span class="premium-pricing-card__period">/month per store</span>
            </div>
            <p class="premium-pricing-card__note">Unlimited employees included &mdash; no per-seat fees</p>

            <ul class="premium-pricing-card__features">
                <li><i class="fa-solid fa-check check-icon"></i> Native Staff Scheduling</li>
                <li><i class="fa-solid fa-check check-icon"></i> AI Smart Scheduling</li>
                <li><i class="fa-solid fa-check check-icon"></i> Staff Chat Channels</li>
                <li><i class="fa-solid fa-check check-icon"></i> BuyerKiosk Team App (Employee)</li>
                <li><i class="fa-solid fa-check check-icon"></i> BuyerKiosk Live App (Manager)</li>
                <li><i class="fa-solid fa-check check-icon"></i> Time Tracking &amp; Timesheets</li>
                <li><i class="fa-solid fa-check check-icon"></i> Schedule Templates &amp; Overlays</li>
                <li><i class="fa-solid fa-check check-icon"></i> Overtime Tracking &amp; Alerts</li>
            </ul>