@extends('layouts.app')

@section('content')

    <h1 class="text-3xl font-bold mb-8 text-center">
        Select Contest Type
    </h1>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

        @foreach($types as $type)
        <a href="{{ url('/contests/' . ($type->id == 1 ? 'match_predictor' : 'trivia_quiz')) }}"
                class="bg-[#111827] border border-gray-800 p-6 rounded-2xl shadow hover:border-red-600 hover:shadow-lg transition">

                <h2 class="text-xl font-semibold mb-3">
                    {{ $type->name }}
                </h2>

                <ul class="text-gray-400 text-sm space-y-1">
                    @foreach($type->rules as $rule)
                        <li>
                            • {{ $rule->rule_name }}
                            <span class="text-red-500 font-medium">({{ $rule->points }} pts)</span>
                        </li>
                    @endforeach
                </ul>

            </a>
        @endforeach

    </div>

@endsection