@props(['storeLink'])
<section class="grid items-center gap-12 py-16 sm:py-20 lg:grid-cols-[1fr_1.05fr] lg:gap-16 lg:py-20">
    <div>
        <span
            class="inline-flex rounded-full border border-emerald-400/15 bg-emerald-500/10 px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-emerald-400">Discover
            more. Grow faster.</span>
        <h1 class="mt-5 text-5xl font-bold leading-[0.98] tracking-[-0.06em] sm:text-6xl lg:text-[3.65rem]">Find
            what's<br><span class="text-[#ff303c]">Right around you.</span></h1>
        <p class="mt-5 max-w-lg text-[15px] leading-7 text-zinc-400">Zoshop connects people with local businesses and
            gives every great business a better way to be found.</p>
        <div class="mt-5 flex items-center gap-4">
            <a href="{{ $storeLink }}" aria-label="Get the app (placeholder link)"
                class="inline-flex items-center gap-4 rounded-md bg-[#ff303c] px-3 py-2 text-xs font-medium text-white shadow-[0_12px_32px_rgba(255,48,60,0.18)] transition hover:bg-red-500">Get
                the app <span aria-hidden="true">→</span></a>
            <a href="{{ route('partner.login') }}" class="text-xs text-zinc-400 transition hover:text-white">List your
                business</a>
        </div>
    </div>
    <div class="rounded-xl border border-white/[0.09] bg-[#18181b] p-4 shadow-[0_24px_80px_rgba(0,0,0,0.25)] sm:p-5">
        <div
            class="flex items-center justify-between border-b border-white/[0.08] pb-4 text-xs font-medium text-zinc-300">
            <span>Discover nearby</span><span class="text-lg">◎</span></div>
        <div class="grid grid-cols-2 gap-3 pt-4">
            <div
                class="flex min-h-28 flex-col justify-between rounded-lg border border-white/[0.07] bg-emerald-500/[0.10] p-4">
                <span class="text-emerald-400">⌂</span>
                <div>
                    <p class="text-xs font-semibold">Local favorites</p>
                    <p class="mt-1 text-[10px] text-zinc-500">Places people love nearby</p>
                </div>
            </div>
            <div class="flex min-h-28 flex-col justify-between rounded-lg border border-white/[0.07] bg-[#09090b] p-4">
                <span class="text-amber-400">⌖</span>
                <div>
                    <p class="text-xs font-semibold">Open now</p>
                    <p class="mt-1 text-[10px] text-zinc-500">Find what fits your day</p>
                </div>
            </div>
        </div>
        <div
            class="mt-3 flex items-center justify-between rounded-lg border border-white/[0.08] bg-zinc-800/80 px-3 py-3 text-[10px] text-zinc-400">
            <span>Discover local businesses</span><span class="text-emerald-400">↗</span></div>
    </div>
</section>