@props(['storeLink'])
<section class="hero-section" aria-labelledby="hero-title">
    <div class="hero-glow" aria-hidden="true"></div>
    <div class="hero-copy">
        <h1 id="hero-title" class="hero-title">Discover<br>
            <span class="word-roll text-primary">
                <span class="sr-only">places nearby</span>
                <span class="reel" aria-hidden="true"><span class="reel-track" data-word-track>
                    <span>places nearby</span><span>shops around you</span><span>what's local</span><span>your neighbourhood</span><span>places nearby</span>
                </span></span>
                <svg class="squiggle" viewBox="0 0 300 20" preserveAspectRatio="none" aria-hidden="true"><path d="M4 14C60 4 110 18 160 9s100-2 136 3" fill="none" stroke="var(--primary)" stroke-width="5" stroke-linecap="round"/></svg>
            </span>
        </h1>
        <p class="hero-description">Local businesses, gathered around you. Find it nearby.</p>
        <div class="hero-actions">
            <a href="{{ $storeLink }}" class="btn btn-primary"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="6" y="2.5" width="12" height="19" rx="2.5"/><path d="M10 18.5h4"/></svg>Get the app</a>
            <a href="{{ route('partner.login') }}" class="btn btn-secondary">List your business <span aria-hidden="true">→</span></a>
        </div>
    </div>
    <x-marketing.hero-scene />
</section>