@extends('layouts.app')
@section('title', 'Presaver — обмен пресейвами')

@section('content')
<div class="text-center py-10">
    <h1 class="text-3xl font-bold tracking-tight">Обмен пресейвами для музыкантов</h1>
    <p class="mt-3 text-gray-600 max-w-xl mx-auto">
        Делайте пресейвы чужих треков, получайте баллы и заказывайте пресейвы на свой релиз.
        Честное распределение — каждому достаётся аудитория.
    </p>
    <div class="mt-8">
        <a href="{{ route('login') }}"
           class="inline-flex items-center rounded-lg bg-brand px-6 py-3 text-white font-medium hover:bg-brand-dark">
            Войти и начать
        </a>
    </div>

    <div class="mt-12 grid gap-4 sm:grid-cols-3 text-left">
        @foreach([
            ['1', 'Делаете пресейвы', 'Сервис выдаёт чужие ссылки band.link. Пресейвите и грузите скриншоты — по одному или пачкой.'],
            ['2', 'Получаете баллы', 'За каждый подтверждённый пресейв +1 балл. Дубликаты и фейки отсеиваются.'],
            ['3', 'Заказываете свои', 'Публикуете свою ссылку и выбираете, сколько пресейвов хотите — в пределах баллов.'],
        ] as [$n, $t, $d])
            <div class="rounded-xl bg-white border border-gray-200 p-4">
                <div class="w-7 h-7 rounded-full bg-indigo-50 text-brand-dark flex items-center justify-center font-semibold text-sm">{{ $n }}</div>
                <h3 class="mt-3 font-semibold">{{ $t }}</h3>
                <p class="mt-1 text-sm text-gray-600">{{ $d }}</p>
            </div>
        @endforeach
    </div>
</div>
@endsection