@props(['storeLink'])
<section class="band paths-section" aria-labelledby="paths-heading">
    <div class="scallop-wrap" aria-hidden="true"><x-marketing.scallop /></div>
    <div class="section-inner">
        <h2 id="paths-heading" class="paths-heading">Which one are you? <span class="pin-pop"><x-marketing.icon name="pin" /></span></h2>
        <div class="paths-grid" data-paths-grid>
            <svg class="paths-connector" viewBox="0 0 60 110" aria-hidden="true"><path d="M2 20C40 20 20 90 58 90" fill="none" stroke="var(--primary)" stroke-width="3.5" stroke-dasharray="2 9" stroke-linecap="round"/><circle cx="2" cy="20" r="4" fill="var(--civic)"/><circle cx="58" cy="90" r="4" fill="var(--primary)"/></svg>
            <article class="path-card tilt" style="--tilt:-1.5deg;--path-offset:0px;--path-delay:0ms" data-path-card>
                <div class="skeleton" aria-hidden="true"><span class="shimmer skeleton-icon"></span><span class="shimmer skeleton-title"></span><span class="shimmer skeleton-copy"></span><span class="shimmer skeleton-button"></span></div>
                <div class="path-content">
                    <div class="path-copy">
                        <div class="path-icon civic-icon"><span class="pin-drop"><x-marketing.icon name="pin" /></span></div>
                        <h3><span class="path-title">I'm exploring</span></h3>
                        <p>Discover local businesses and places nearby.</p>
                        <div class="path-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></div>
                    </div>
                    <div class="path-art civic-art"><x-marketing.illustration type="customer" /></div>
                </div>
            </article>

            <article class="path-card tilt offset-y" style="--tilt:1.5deg;--path-offset:32px;--path-delay:180ms" data-path-card>
                <div class="skeleton" aria-hidden="true"><span class="shimmer skeleton-icon"></span><span class="shimmer skeleton-title"></span><span class="shimmer skeleton-copy"></span><span class="shimmer skeleton-button"></span></div>
                <div class="path-content">
                    <div class="path-copy">
                        <div class="path-icon primary-icon"><x-marketing.icon name="store" /></div>
                        <h3><span class="path-title">I run a business</span></h3>
                        <p>Get listed and be easier to find.</p>
                        <div class="path-actions"><a href="{{ route('partner.login') }}" class="btn btn-primary">Get listed <span aria-hidden="true">→</span></a><a href="{{ route('partner.login') }}" class="btn btn-ghost">Business login</a></div>
                    </div>
                    <div class="path-art primary-art"><x-marketing.illustration type="owner" /></div>
                </div>
            </article>
        </div>
    </div>
</section>