@props(['storeLink'])
<section id="choose-path" class="py-16 sm:py-20">
    <div class="mb-7 flex flex-col justify-between gap-4 sm:flex-row sm:items-end">
        <div>
            <p class="text-[10px] font-semibold uppercase tracking-[0.18em] text-emerald-400">Choose your path</p>
            <h2 class="mt-2 text-3xl font-semibold tracking-[-0.05em] sm:text-4xl">One platform. Three ways in.</h2>
        </div>
        <p class="max-w-xs text-xs leading-5 text-zinc-400">Pick the path that fits your role and make local discovery
            work harder for you.</p>
    </div>
    <div class="grid gap-4 lg:grid-cols-2">
        <article
            class="relative flex min-h-[300px] flex-col overflow-hidden rounded-xl border border-white/[0.09] bg-[#18181b] p-5 sm:p-6">
            <div class="flex items-center gap-2 text-[10px] font-semibold uppercase tracking-[0.16em] text-zinc-500">
                <span
                    class="grid h-8 w-8 place-items-center rounded-lg border border-emerald-400/15 bg-emerald-500/10 text-sm text-emerald-400">◎</span>
                For customers</div>
            <h3 class="mt-5 text-2xl font-semibold tracking-[-0.04em]">Find places you’ll love.</h3>
            <ul class="mt-3 space-y-2 text-xs text-zinc-400">
                <li><span class="mr-2 text-emerald-400">✓</span>Explore nearby stores and services</li>
                <li><span class="mr-2 text-emerald-400">✓</span>See what’s open, popular, and new</li>
                <li><span class="mr-2 text-emerald-400">✓</span>Save time with one simple app</li>
            </ul>
            <div class="mt-auto flex items-end justify-between pt-8"><a href="{{ $storeLink }}"
                    class="inline-flex items-center gap-3 rounded-md bg-[#ff303c] px-3 py-2 text-xs text-white shadow-[0_10px_24px_rgba(255,48,60,0.16)]">Get
                    the app <span>→</span></a>
                <div aria-hidden="true"
                    class="grid h-20 w-20 place-items-center rounded-t-xl border border-emerald-400/10 bg-emerald-500/[0.08] p-2">
                    <div class="flex h-full w-full flex-col gap-1 rounded-md bg-[#09090b] p-2"><i
                            class="mt-1 h-1.5 w-10 rounded bg-amber-500/70"></i><i
                            class="mt-1 h-5 rounded bg-emerald-500/20"></i></div>
                </div>
            </div>
        </article>
        <article
            class="relative flex min-h-[300px] flex-col overflow-hidden rounded-xl border border-white/[0.09] bg-[#18181b] p-5 sm:p-6">
            <div class="flex items-center gap-2 text-[10px] font-semibold uppercase tracking-[0.16em] text-zinc-500">
                <span
                    class="grid h-8 w-8 place-items-center rounded-lg border border-amber-400/15 bg-amber-500/10 text-sm text-amber-400">⌂</span>
                For businesses</div>
            <h3 class="mt-5 text-2xl font-semibold tracking-[-0.04em]">Turn local attention into loyal customers.</h3>
            <ul class="mt-3 space-y-2 text-xs text-zinc-400">
                <li><span class="mr-2 text-amber-400">✓</span>Create your business profile</li>
                <li><span class="mr-2 text-amber-400">✓</span>Reach people searching nearby</li>
                <li><span class="mr-2 text-amber-400">✓</span>Manage your listing in one place</li>
            </ul>
            <div class="mt-auto flex items-end justify-between pt-8"><a href="{{ route('partner.login') }}"
                    class="inline-flex items-center gap-3 rounded-md border border-white/10 bg-zinc-800 px-3 py-2 text-xs text-zinc-100 transition hover:bg-zinc-700">Start
                    listing <span>→</span></a>
                <div aria-hidden="true"
                    class="grid h-20 w-20 place-items-center rounded-t-xl border border-amber-400/10 bg-amber-500/[0.08] p-2">
                    <div class="grid h-full w-full grid-cols-2 gap-1 rounded-md bg-[#09090b] p-2"><i
                            class="rounded-sm bg-amber-500/70"></i><i class="rounded-sm bg-zinc-700"></i><i
                            class="rounded-sm bg-amber-500/30"></i><i class="rounded-sm bg-emerald-500/20"></i></div>
                </div>
            </div>
        </article>
    </div>
</section>