@extends('frontend::layouts.master')

@section('title', 'รายละเอียดปฏิทินแข่งขัน | ศูนย์ความรู้ อ.อ๊อบ')

@section('content')
<main class="pt-[80px] sm:pt-[88px] bg-gradient-to-b from-white to-kru-light-strong min-h-screen">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
    <a
      href="{{ route('frontend.competition-calendar') }}"
      class="inline-flex items-center gap-2 text-kru-orange hover:underline text-sm font-medium mb-8"
    >
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
      </svg>
      ย้อนกลับไปหน้าปฏิทินแข่งขัน
    </a>

    <div class="overflow-hidden border-2 border-gray-200 rounded-xl shadow-lg bg-white">
      {{-- Hero (รูปแบบเดียวกับหน้าลิส) --}}
      <div class="relative h-[15rem] sm:h-[24rem] flex items-center justify-center text-white overflow-hidden">
        <img
          src="{{ asset('modules/frontend/images/mockup/competition-calendar-cover.jpg') }}"
          alt="{{ $event['title'] }}"
          class="absolute inset-0 w-full h-full object-cover"
          loading="eager"
          onerror="this.style.display='none'"
        />
      </div>

      <div class="p-6 sm:p-8">
        <div class="flex flex-wrap items-center gap-3 mb-4">
          <h1 class="text-2xl sm:text-3xl font-bold text-kru-dark">
            {{ $event['title'] }}
          </h1>
        </div>

        <div class="flex flex-wrap gap-3 mb-6 text-sm text-gray-600">
          <div class="flex items-center gap-2">
            <svg class="w-4 h-4 text-kru-orange flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
            </svg>
            <span>{{ $event['period'] }}</span>
          </div>
        </div>

        <p class="text-gray-700 mb-6">{{ $event['description'] }}</p>

        <!-- Start Text Editor -->
        <div>
          <div class="mb-8">
            <div class="relative overflow-hidden rounded-2xl border border-kru-orange/10 bg-white shadow-md">
              <img
                src="{{ asset('modules/frontend/images/mockup/competition-calendar-01.jpg') }}"
                alt="..."
                class="w-full h-full object-cover"
                loading="lazy"
                onerror="this.style.display='none'"
              />
            </div>
          </div>
        </div>
        <!-- End Text Editor -->

        <div class="flex flex-wrap gap-3 pt-4 border-t border-gray-200">
          <a
            href="#"
            class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-gradient-to-r from-kru-orange to-kru-red text-white font-medium hover:opacity-90 transition-opacity"
            target="_blank"
          >
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
            </svg>
            ดาวน์โหลดปฏิทินแข่งขัน (PDF)
          </a>
        </div>
      </div>
    </div>
  </div>
</main>
@endsection