<?php

use Livewire\Component;

new class extends Component
{
    //
};
?>

<div class="px-6 pt-16 pb-10 text-center">
    <div>
        <div class="mx-auto flex items-center justify-center gap-2">
            <div class="grid h-12 w-12 place-items-center rounded-xl bg-primary text-primary-foreground shadow-sm">
                <svg class="h-7 w-7" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                    <path d="M12 2l7 4v6c0 5-3 9-7 10-4-1-7-5-7-10V6l7-4Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
                </svg>
            </div>
            <span class="text-2xl font-bold tracking-tight">PatchBook</span>
        </div>

        <h1 class="mt-6 text-3xl font-bold leading-tight tracking-tight text-balance">
            Earn patches. <span class="text-primary">Challenge friends.</span> Build your sash.
        </h1>

        <p class="mx-auto mt-4 max-w-[320px] text-sm leading-relaxed text-muted-foreground">
            Create fun challenges with your crew, earn badges, track progress, and see who tops the leaderboard.
        </p>

        <div class="mx-auto mt-8 flex w-full max-w-[360px] flex-col gap-3">
            <a href="{{ route('register') }}" wire:navigate class="btn-primary w-full text-base">
                Get Started
            </a>
            <a href="{{ route('login') }}" wire:navigate class="btn-outline w-full text-base">
                I already have an account
            </a>
        </div>
    </div>

    <hr class="mt-5 mb-5 border-t border-muted-foreground opacity-20">

    <div class="text-left">
        <h2 class="text-2xl mb-5"><b>How it works</b></h2>
        <div>
            <div class="flex items-start gap-4">
                <div class="relative w-10 flex justify-center self-stretch">
                    <div class="h-10 w-10 rounded-full bg-primary text-primary-foreground grid place-items-center shrink-0">
                        <x-bi-people class="h-6 w-6" />
                    </div>
                    <div class="absolute top-12 bottom-0 w-px bg-muted-foreground/20"></div>
                </div>
                <div>
                    <p class="text-primary text-sm">STEP 1</p>
                    <h3 class="font-semibold">Start or join a group</h3>
                    <p class="text-muted-foreground text-sm">Create a crew with friends, family, or coworkers. Share an invite code to get everyone on board.</p>
                </div>
            </div>
        </div>
        <div>
            <div class="flex items-start gap-4 mt-5">
                <div class="relative w-10 flex justify-center self-stretch">
                    <div class="h-10 w-10 rounded-full bg-primary text-primary-foreground grid place-items-center shrink-0">
                        <x-solar-medal-ribbon-linear class="h-6 w-6" />
                    </div>
                    <div class="absolute top-12 bottom-0 w-px bg-muted-foreground/20"></div>
                </div>
                <div>
                    <p class="text-primary text-sm">STEP 2</p>
                    <h3 class="font-semibold">Design your patches</h3>
                    <p class="text-muted-foreground text-sm">Dream up custom challenges with icons, colors, and step-by-step requirements to complete.</p>
                </div>
            </div>
        </div>
        <div>
            <div class="flex items-start gap-4 mt-5">
                <div class="relative w-10 flex justify-center self-stretch">
                    <div class="h-10 w-10 rounded-full bg-primary text-primary-foreground grid place-items-center shrink-0">
                        <x-solar-shield-minimalistic-linear class="h-6 w-6" />
                    </div>
                    <div class="absolute top-12 bottom-0 w-px bg-muted-foreground/20"></div>
                </div>
                <div>
                    <p class="text-primary text-sm">STEP 3</p>
                    <h3 class="font-semibold">Earn and collect</h3>
                    <p class="text-muted-foreground text-sm">Complete challenges, get verified by your crew, and watch your sash fill up with patches.</p>
                </div>
            </div>
        </div>
    </div>

    <hr class="mt-5 mb-5 border-t border-muted-foreground opacity-20">

    <div class="text-left">
        <h2 class="text-2xl mb-5"><b>Built for your crew</b></h2>
        <div class="grid grid-cols-2 gap-4">
            <div class="aspect-square rounded-2xl bg-card ring-1 ring-border p-4 text-sm">
                <div class="grid h-10 w-10 place-items-center rounded-xl bg-primary/15 text-primary-foreground shadow-sm mb-2">
                    <x-bi-people class="h-6 w-6 text-primary" />
                </div>
                    <b>Groups</b>
                    <p class="text-muted-foreground">Private crews with invite codes</p>
            </div>
            <div class="aspect-square rounded-2xl bg-card ring-1 ring-border p-4 text-sm">
                <div class="grid h-10 w-10 place-items-center rounded-xl bg-primary/15 text-primary-foreground shadow-sm mb-2">
                    <x-solar-medal-ribbon-linear class="h-6 w-6 text-primary" />
                </div>
                <b>Patches</b>
                <p class="text-muted-foreground">Custom badges with requirements</p>
            </div>
            <div class="aspect-square rounded-2xl bg-card ring-1 ring-border p-4 text-sm">
                <div class="grid h-10 w-10 place-items-center rounded-xl bg-primary/15 text-primary-foreground shadow-sm mb-2">
                    <x-bi-shield class="h-6 w-6 text-primary" />
                </div>
                <b>Your sash</b>
                <p class="text-muted-foreground">Show off everything you earned</p>
            </div>
            <div class="aspect-square rounded-2xl bg-card ring-1 ring-border p-4 text-sm">
                <div class="grid h-10 w-10 place-items-center rounded-xl bg-primary/15 text-primary-foreground shadow-sm mb-2">
                    <x-feathericon-target class="h-6 w-6 text-primary" />
                </div>
                <b>Progress</b>
                <p class="text-muted-foreground">Track steps toward each patch</p>
            </div>

        </div>
    </div>

    <p class="mt-8 text-xs text-muted-foreground">
        Made for fun, inspired by scouting.
    </p>
</div>
