@extends('layouts.public')

@section('title', 'Ticket-System — TacForce Pro')
@section('meta_description', 'Professionelle Support-, Bestell- und Anfrage-Tickets für deinen Discord-Server. Panel, private Channels, Transkripte und Logs.')

@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">
      <div class="grid items-center gap-12 lg:grid-cols-2">
        <div>
          <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">Ticket-System</span>
          <h1 class="mt-5 text-4xl font-extrabold tracking-tight text-zinc-900 dark:text-white sm:text-5xl">
            Support, der professionell aussieht.
          </h1>
          <p class="mt-5 text-lg leading-relaxed text-zinc-600 dark:text-zinc-400">
            Verwandle Anfragen in strukturierte, private Ticket-Channels. Dein Team behält den Überblick, deine Mitglieder bekommen schnelle Hilfe — mit Panel, Transkript und Log.
          </p>
          <div class="mt-8 flex flex-col gap-3 sm:flex-row">
            <a href="{{ route('login') }}" class="inline-flex 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">
              <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 einrichten
            </a>
            <a href="{{ route('pricing') }}" class="inline-flex 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">
              Preise ansehen
            </a>
          </div>
        </div>

        {{-- Mockup: Ticket-Panel + Channel --}}
        <div class="space-y-4">
          {{-- Panel --}}
          <div class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-5 shadow-sm">
            <div class="flex items-start gap-3 border-l-2 border-blue-500 pl-3">
              <div>
                <p class="text-sm font-semibold text-zinc-900 dark:text-white">🎫 Support-Center</p>
                <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">Wähle eine Kategorie und öffne ein Ticket. Unser Team meldet sich zeitnah.</p>
              </div>
            </div>
            <div class="mt-4 flex flex-wrap gap-2">
              <span class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-medium text-white">Support</span>
              <span class="inline-flex items-center gap-1.5 rounded-lg border border-zinc-200 dark:border-zinc-700 px-3 py-1.5 text-xs font-medium text-zinc-600 dark:text-zinc-300">Bestellung</span>
              <span class="inline-flex items-center gap-1.5 rounded-lg border border-zinc-200 dark:border-zinc-700 px-3 py-1.5 text-xs font-medium text-zinc-600 dark:text-zinc-300">Beschwerde</span>
              <span class="inline-flex items-center gap-1.5 rounded-lg border border-zinc-200 dark:border-zinc-700 px-3 py-1.5 text-xs font-medium text-zinc-600 dark:text-zinc-300">Partner</span>
            </div>
          </div>
          {{-- Channel --}}
          <div class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-5 shadow-sm">
            <div class="flex items-center justify-between border-b border-zinc-100 dark:border-zinc-800 pb-3">
              <p class="text-xs font-mono text-zinc-500 dark:text-zinc-400"># ticket-0421</p>
              <span class="inline-flex items-center rounded-full bg-blue-500/10 px-2 py-0.5 text-[10px] font-medium text-blue-600 dark:text-blue-400 ring-1 ring-blue-500/20">Offen</span>
            </div>
            <div class="mt-3 space-y-3 text-xs">
              <div class="flex gap-2">
                <span class="h-6 w-6 shrink-0 rounded-full bg-zinc-200 dark:bg-zinc-700"></span>
                <p class="text-zinc-600 dark:text-zinc-300"><span class="font-semibold text-zinc-900 dark:text-white">Mitglied:</span> Hey, mein Voice-Channel funktioniert nicht.</p>
              </div>
              <div class="flex gap-2">
                <span class="h-6 w-6 shrink-0 rounded-full bg-blue-500/80"></span>
                <p class="text-zinc-600 dark:text-zinc-300"><span class="font-semibold text-blue-600 dark:text-blue-400">Team:</span> Danke für die Meldung! Wir schauen es uns sofort an.</p>
              </div>
            </div>
            <div class="mt-4 flex gap-2">
              <span class="inline-flex items-center gap-1 rounded-lg bg-zinc-100 dark:bg-zinc-800 px-2.5 py-1 text-[10px] font-medium text-zinc-600 dark:text-zinc-300">Claim</span>
              <span class="inline-flex items-center gap-1 rounded-lg bg-zinc-100 dark:bg-zinc-800 px-2.5 py-1 text-[10px] font-medium text-zinc-600 dark:text-zinc-300">Nutzer hinzufügen</span>
              <span class="inline-flex items-center gap-1 rounded-lg bg-red-500/10 px-2.5 py-1 text-[10px] font-medium text-red-600 dark:text-red-400">Schließen</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  {{-- SO FUNKTIONIERT'S --}}
  <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">So läuft ein Ticket ab</h2>
        <p class="mt-4 text-lg text-zinc-600 dark:text-zinc-400">Vom Klick auf den Button bis zum archivierten Transkript.</p>
      </div>
      <div class="mt-14 grid grid-cols-1 gap-6 md:grid-cols-4">
        @php
          $flow = [
            ['01', 'Panel platzieren', 'Du erstellst Kategorien im Dashboard und sendest das Panel mit einem Klick in deinen Channel.'],
            ['02', 'Ticket öffnen', 'Ein Mitglied klickt auf den Button — TacForce erstellt einen privaten Channel für die Anfrage.'],
            ['03', 'Team bearbeitet', 'Das zuständige Team wird gepingt, kann das Ticket claimen und weitere Nutzer hinzufügen.'],
            ['04', 'Schließen & loggen', 'Beim Schließen wird ein Transkript im Log-Channel gesichert, der Status landet in der DB.'],
          ];
        @endphp
        @foreach ($flow as [$num, $title, $text])
          <div class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-6">
            <span class="text-2xl font-extrabold text-blue-600/20 dark:text-blue-500/30">{{ $num }}</span>
            <h3 class="mt-2 text-sm 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>

  {{-- VORTEILE --}}
  <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 grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
        @php
          $benefits = [
            ['Klare Kategorien', 'Support, Bewerbung, Beschwerde, Bestellung, Partneranfrage — jede mit eigener Team-Rolle und Log.', 'M4 7h16M4 12h16M4 17h10'],
            ['Private Channels', 'Jedes Ticket bekommt einen eigenen, geschützten Channel. Nur Betroffene und das Team sehen mit.', 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'],
            ['Team-Zuweisung', 'Mit /ticket claim übernimmt ein Teammitglied die Verantwortung. Kein Durcheinander mehr.', 'M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2 M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'],
            ['Transkripte (Pro)', 'Beim Schließen wird der komplette Verlauf sauber gesichert — nachvollziehbar und ohne HTML-Injection.', 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6'],
            ['Volle Kontrolle', 'Commands wie panel, close, add, remove, rename und claim machen die Verwaltung schnell und flexibel.', 'M12 20h9 M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'],
            ['Sauber geloggt', 'Ticket erstellt / geschlossen landet im Log — ohne unnötige private Daten zu speichern.', 'M4 4v16h16 M9 9h6M9 13h6M9 17h4'],
          ];
        @endphp
        @foreach ($benefits 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>

  {{-- 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 Struktur in deinen Support</h2>
      <p class="mx-auto mt-4 max-w-xl text-lg text-zinc-600 dark:text-zinc-400">Free-Plan enthält bereits eine Ticket-Kategorie und 50 Tickets pro Monat.</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('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">Alle Features</a>
      </div>
    </div>
  </section>

@endsection