{#
    Homepage Hero Section Partial
    PRD: Feature 1 - Integrated Platform Hero Section (lines 113-123)
    SDD: PRD Mapping (lines 273-284)

    Requirements:
    - Headline max 10 words
    - Subhead max 25 words
    - Primary CTA "Schedule Demo" above fold
    - Secondary CTA below primary
    - At least 3 franchise logos
    - data-posthog-section="hero" for analytics
#}
<section class="modern-hero" id="hero" data-posthog-section="hero">
    <div class="modern-container">
        <div class="modern-hero__inner">
            <div class="modern-hero__content">
                {# Trust badges #}
                <div class="modern-hero__badges">
                    <div class="modern-hero__badge">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                        </svg>
                        Built for Resale
                    </div>
                    <div class="modern-hero__badge modern-hero__badge--rating">
                        <span class="modern-hero__stars" aria-hidden="true">⭐️</span>
                        <span>4.8/5 rating — from stores in USA/Canada</span>
                    </div>
                </div>

                {# Headline - max 10 words per PRD #}
                <h1 class="modern-hero__title">
                    {{ hero.headline|default('Your entire buying process, streamlined.') }}
                </h1>

                {# Subhead - max 25 words per PRD #}
                <p class="modern-hero__description">
                    {{ hero.subhead|default('BuyerKiosk handles customer check-in, organizes the buying queue, tracks offers and payouts, and keeps your team moving — all in one platform.') }}
                </p>

                {# Social proof #}
                <p class="modern-hero__social-proof">
                    Trusted by 250+ resale stores, including top-volume locations at Play It Again Sports, Plato's Closet, Once Upon a Child, and Style Encore.
                </p>

                {# Franchise Logos - Trust Bar (min 3 required per PRD) #}
                <div class="hero-trust-logos">
                    {% for logo in hero.logos|default(['PIAS', 'PC', 'OUAC', 'SE']) %}
                    <div class="hero-trust-logos__item">
                        <svg class="brand-logo" viewBox="0 0 {% if logo == 'PIAS' %}121 11{% elseif logo == 'PC' %}108 10{% elseif logo == 'OUAC' %}101 13{% elseif logo == 'SE' %}99 11{% else %}100 10{% endif %}" aria-label="{{ logo }}">
                            <use href="#icon-brand-header-{{ logo }}"></use>
                        </svg>
                    </div>
                    {% endfor %}
                </div>

                {# CTAs - Primary and Secondary per PRD Feature 1 #}
                <div class="modern-hero__actions">
                    {# Primary CTA - links to quote request form #}
                    <a
                        href="/get-started"
                        class="modern-btn modern-btn--primary modern-btn--large"
                        data-posthog-event="hero_cta_clicked"
                        data-posthog-cta-type="primary"
                        data-posthog-position="hero"
                    >
                        Get Started
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
                        </svg>
                    </a>

                    {# Secondary CTA #}
                    <a href="#key-benefits" class="modern-btn modern-btn--secondary modern-btn--large">
                        Learn More
                    </a>
                </div>
            </div>

            {# Hero Image - NO lazy-load per SDD for LCP optimization #}
            <div class="modern-hero__image">
                <img
                    src="/images/front/main-feature2.png"
                    alt="BuyerKiosk Platform Dashboard showing queue management"
                    width="600"
                    height="400"
                    fetchpriority="high"
                >
            </div>
        </div>
    </div>

    {# Scroll Indicator - guides eye to features #}
    <div class="modern-hero__scroll-indicator">
        <a href="#features" class="modern-hero__scroll-link" aria-label="Scroll to features">
            <span class="modern-hero__scroll-text">Explore Features</span>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="modern-hero__scroll-icon">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
            </svg>
        </a>
    </div>

    {# Wave Divider - smooth transition to features #}
    <div class="modern-hero__divider" aria-hidden="true">
        <svg viewBox="0 0 1440 120" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0,60 C360,120 720,0 1080,60 C1260,90 1380,80 1440,60 L1440,120 L0,120 Z" fill="var(--white)"/>
        </svg>
    </div>
</section>