@extends('app.shell')

@section('body')
  <div class="min-h-screen safe-bottom bg-background animate-sheet-up">
    <div class="app-page-wrap pt-6 md:pt-6 lg:pt-8 pb-10 md:pb-10 space-y-8">
      <x-page-header title="{{ __('Shared lists') }}" back />

      <div class="text-center space-y-4">
        <div class="w-[72px] h-[72px] rounded-[20px] bg-primary-muted flex items-center justify-center text-[36px] mx-auto">
          🛒
        </div>
        <p class="text-[15px] text-muted-foreground leading-relaxed px-2">
          {{ __('Create a shared checklist, add items, and split checkout costs.') }}
        </p>
      </div>

      <ul class="space-y-3 px-1">
        @foreach ([
          'Add items as you go',
          'Record a checkout and split it',
          'Settle up with suggested payments',
        ] as $line)
          <li class="flex gap-3 items-start">
            <span class="mt-0.5 w-6 h-6 rounded-full bg-primary/15 flex items-center justify-center shrink-0">
              <x-lucide-check class="w-3.5 h-3.5 text-primary" />
            </span>
            <span class="text-[15px] text-foreground leading-snug pt-0.5">{{ $line }}</span>
          </li>
        @endforeach
      </ul>

      <a
        href="{{ route('app.shared-lists.new') }}"
        class="w-full py-4 rounded-2xl bg-primary text-primary-foreground text-[17px] font-semibold active:scale-[0.98] transition-transform text-center block"
      >
        {{ __('Create a shared list') }}
      </a>
    </div>
  </div>
@endsection