@extends('layouts.public')

@section('title', 'TacForce Pro für FiveM-Server')
@section('meta_description', 'Bewerbungen, Tickets, Rollen und Teamverwaltung für deinen FiveM-Server — sauber im Discord organisiert. Fraktionssystem in Vorbereitung.')

@section('content')

  {{-- HERO --}}
  <section class="relative overflow-hidden border-b border-zinc-200 dark:border-zinc-800">
    <div class="pointer-events-none absolute inset-0 -z-10">
      <div class="absolute left-1/2 top-0 h-72 w-[700px] -translate-x-1/2 rounded-full bg-blue-500/10 blur-3xl"></div>
    </div>
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16 sm:py-24 text-center">
      <span class="inline-flex items-center gap-2 rounded-full bg-blue-500/10 px-3 py-1 text-xs font-medium text-blue-600 dark:text-blue-400 ring-1 ring-blue-500/20">Für FiveM-Server</span>
      <h1 class="mx-auto mt-6 max-w-3xl text-4xl font-extrabold tracking-tight text-zinc-900 dark:text-white sm:text-5xl">
        Dein FiveM-Server. Endlich sauber organisiert.
      </h1>
      <p class="mx-auto mt-5 max-w-2xl text-lg leading-relaxed text-zinc-600 dark:text-zinc-400">
        Bewerbungen, Tickets, Rollen und Teamverwaltung — alles im Discord, alles an einem Ort. TacForce Pro bringt Struktur in dein Roleplay-Projekt, ohne dass du drei Bots jonglieren musst.
      </p>
      <div class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
        <a href="{{ route('login') }}" class="inline-flex w-full items-center justify-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-semibold px-6 py-3 transition sm:w-auto">
          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
          Kostenlos starten
        </a>
        <a href="{{ route('features') }}" class="inline-flex w-full items-center justify-center gap-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-700 dark:text-zinc-200 text-sm font-semibold px-6 py-3 transition sm:w-auto">
          Features ansehen
        </a>
      </div>
    </div>
  </section>

  {{-- KERN-FUNKTIONEN --}}
  <section class="border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900/30">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16 sm:py-20">
      <div class="mx-auto max-w-2xl text-center">
        <h2 class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-4xl">Gemacht für Roleplay-Communitys</h2>
        <p class="mt-4 text-lg text-zinc-600 dark:text-zinc-400">Die Werkzeuge, die ein FiveM-Server wirklich braucht — heute schon einsatzbereit.</p>
      </div>
      <div class="mt-14 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
        @php
          $core = [
            ['Bewerbungen', 'Whitelist- und Fraktionsbewerbungen mit eigenen Fragen, Modal-Eingabe und Annehmen/Ablehnen per Button.', 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M9 15l2 2 4-4'],
            ['Tickets', 'Support, Beschwerden, Bug-Reports und Bestellungen als private Ticket-Channels mit Team-Zuweisung.', 'M9 16H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-5l-4 4v-4z'],
            ['Rollen', 'Automatische Rollenvergabe bei Whitelist-Annahme — inklusive Regelbestätigungs-Rolle beim Beitritt.', 'M9 12l2 2 4-4 M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z'],
            ['Teamverwaltung', 'Klare Team-Rollen pro Kategorie, Claim-Funktion und saubere Logs für ein professionelles Auftreten.', 'M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2 M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z M23 21v-2a4 4 0 0 0-3-3.87'],
          ];
        @endphp
        @foreach ($core as [$title, $text, $icon])
          <div class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-6">
            <span class="inline-flex h-11 w-11 items-center justify-center rounded-lg bg-blue-500/10 text-blue-600 dark:text-blue-400 ring-1 ring-blue-500/20">
              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="{{ $icon }}"/></svg>
            </span>
            <h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-white">{{ $title }}</h3>
            <p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">{{ $text }}</p>
          </div>
        @endforeach
      </div>
    </div>
  </section>

  {{-- ANWENDUNGSFÄLLE --}}
  <section class="border-b border-zinc-200 dark:border-zinc-800">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16 sm:py-20">
      <div class="grid items-center gap-12 lg:grid-cols-2">
        <div>
          <h2 class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-4xl">Vom Whitelist-Antrag bis zum Support</h2>
          <p class="mt-4 text-lg text-zinc-600 dark:text-zinc-400">
            Egal ob Bürger-Whitelist, Fraktionsbeitritt oder Bug-Report — TacForce Pro deckt die typischen Abläufe eines FiveM-Servers strukturiert ab.
          </p>
          <ul class="mt-6 space-y-3.5">
            @php
              $cases = [
                'Whitelist-Bewerbung mit Regelfragen und Auto-Rolle bei Annahme',
                'Fraktionsbewerbungen (Polizei, Medic, Mechaniker, Gangs) je eigenes Formular',
                'Support-Tickets für technische Probleme und Verbindungsfehler',
                'Beschwerde- und Report-Tickets mit dediziertem Team',
                'Bestell-Tickets für Fahrzeuge, Immobilien oder Custom-Content',
                'Saubere Logs über Joins, Rollen und Ticket-Aktivität',
              ];
            @endphp
            @foreach ($cases as $case)
              <li class="flex items-start gap-3">
                <span class="mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 ring-1 ring-emerald-500/20">
                  <svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                </span>
                <span class="text-sm leading-relaxed text-zinc-700 dark:text-zinc-300">{{ $case }}</span>
              </li>
            @endforeach
          </ul>
        </div>

        {{-- Mockup: Fraktions-Bewerbungspanel --}}
        <div class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-5 shadow-sm">
          <div class="border-l-2 border-blue-500 pl-4">
            <p class="text-sm font-semibold text-zinc-900 dark:text-white">Fraktions-Bewerbungen</p>
            <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">Wähle eine Fraktion und reiche deine Bewerbung ein.</p>
          </div>
          <div class="mt-4 grid grid-cols-2 gap-2">
            @foreach (['Polizei (LSPD)', 'Rettungsdienst', 'Mechaniker', 'Justiz'] as $frac)
              <span class="inline-flex items-center justify-center rounded-lg border border-zinc-200 dark:border-zinc-700 px-3 py-2 text-xs font-medium text-zinc-600 dark:text-zinc-300">{{ $frac }}</span>
            @endforeach
          </div>
          <div class="mt-4 rounded-lg bg-zinc-50 dark:bg-zinc-950/40 p-3 text-xs text-zinc-500 dark:text-zinc-400">
            <span class="font-medium text-zinc-700 dark:text-zinc-200">Auto-Rolle:</span> bei Annahme wird die passende Fraktions-Rolle automatisch vergeben.
          </div>
        </div>
      </div>
    </div>
  </section>

  {{-- BALD: FACTION --}}
  <section class="border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900/30">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16 sm:py-20">
      <div class="rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-8 sm:p-10">
        <div class="flex flex-wrap items-center gap-3">
          <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-3xl">TacForce Faction</h2>
          <span class="inline-flex items-center rounded-full bg-amber-500/10 px-2.5 py-0.5 text-xs font-medium text-amber-600 dark:text-amber-400 ring-1 ring-amber-500/20">Bald verfügbar</span>
        </div>
        <p class="mt-4 max-w-2xl text-lg text-zinc-600 dark:text-zinc-400">
          Das dedizierte Fraktionssystem für FiveM ist in Vorbereitung. Geplant sind Ränge, Dienstnummern, Dienstzeiten, Blacklists und Einsatzberichte — direkt im Dashboard und im Discord.
        </p>
        <div class="mt-8 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
          @foreach (['Ränge', 'Dienstnummern', 'Dienstzeiten', 'Blacklist', 'Einsatzberichte'] as $item)
            <div class="rounded-lg border border-dashed border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-950/40 px-3 py-4 text-center">
              <span class="text-sm font-medium text-zinc-600 dark:text-zinc-300">{{ $item }}</span>
            </div>
          @endforeach
        </div>
        <p class="mt-6 text-xs text-zinc-500 dark:text-zinc-400">
          Bis dahin läuft dein Server bereits vollständig über Bewerbungen, Tickets, Rollen und Teamverwaltung.
        </p>
      </div>
    </div>
  </section>

  {{-- CTA --}}
  <section>
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-20 text-center">
      <h2 class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-4xl">Bring dein FiveM-Projekt auf das nächste Level</h2>
      <p class="mx-auto mt-4 max-w-xl text-lg text-zinc-600 dark:text-zinc-400">Starte kostenlos mit Bewerbungen und Tickets — Elite schaltet später Faction, Shop &amp; mehr frei.</p>
      <div class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
        <a href="{{ route('login') }}" class="inline-flex w-full items-center justify-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-semibold px-6 py-3 transition sm:w-auto">Kostenlos starten</a>
        <a href="{{ route('pricing') }}" class="inline-flex w-full items-center justify-center gap-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-700 dark:text-zinc-200 text-sm font-semibold px-6 py-3 transition sm:w-auto">Elite ansehen</a>
      </div>
    </div>
  </section>

@endsection