@extends('layouts.public')

@section('title', 'Features — TacForce Pro')
@section('meta_description', 'Ticket-System, Bewerbungs-System, Welcome & Logs, Sicherheit/DSGVO und Multi-Bot/White-Label — alle Funktionen von TacForce Pro im Detail.')

@section('content')

  {{-- HERO --}}
  <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 text-center">
      <span class="inline-flex items-center gap-2 rounded-full border border-zinc-200 dark:border-zinc-800 bg-white/60 dark:bg-zinc-900/60 px-3.5 py-1.5 text-xs font-medium text-zinc-600 dark:text-zinc-300">Funktionen</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">
        Ein Bot. Ein Dashboard. Klare Prozesse.
      </h1>
      <p class="mx-auto mt-5 max-w-2xl text-lg text-zinc-600 dark:text-zinc-400">
        TacForce Pro bündelt die Werkzeuge, die ein professioneller Discord-Server wirklich braucht — sauber gebaut, statt zwanzig halbfertige Module.
      </p>
    </div>
  </section>

  @php
    $sections = [
      [
        'eyebrow' => 'Hauptprodukt',
        'title' => 'Ticket-System',
        'text' => 'Support, Bestellungen, Beschwerden und Partneranfragen laufen strukturiert über private Ticket-Channels — mit Panel, Team-Zuweisung und Transkript.',
        'icon' => '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',
        'bullets' => [
          'Kategorien: Support, Bewerbung, Beschwerde, Bestellung, Partneranfrage',
          'Pro Kategorie: Name, Beschreibung, Emoji, Team-Rolle, Channel-Kategorie, Log-Channel',
          'Panel mit Button → privater Ticket-Channel → Start-Embed',
          'Commands: /ticket panel · close · add · remove · rename · claim',
          'Transkript wird beim Schließen im Log-Channel gesichert (Pro)',
          'Status jederzeit im Dashboard nachvollziehbar',
        ],
        'link' => ['page.tickets', 'Mehr zum Ticket-System'],
      ],
      [
        'eyebrow' => 'Hauptprodukt',
        'title' => 'Bewerbungs-System',
        'text' => 'Erstelle Bewerbungsformulare mit eigenen Fragen, sammle Antworten sauber ein und entscheide per Button — inklusive automatischer Rollenvergabe.',
        'icon' => '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',
        'bullets' => [
          'Formular: Titel, Beschreibung, Fragen, Ziel-Channel, Team-Rolle',
          'Panel-Button → Modal → Antworten als übersichtliches Embed',
          'Annehmen / Ablehnen per Button, mit eigenen Nachrichten',
          'Automatische Rolle bei Annahme (Rollen-Automation)',
          'Commands: /apply panel · create · list · status · close',
          'Mehrere Formulare, Archiv & interne Notizen (Pro)',
        ],
        'link' => ['page.apply', 'Mehr zum Bewerbungs-System'],
      ],
      [
        'eyebrow' => 'Modul',
        'title' => 'Welcome & Logs',
        'text' => 'Begrüße neue Mitglieder automatisch und behalte den Überblick über alles Wichtige — ohne unnötig private Daten zu speichern.',
        'icon' => 'M4 4v16h16 M4 14l4-4 4 4 6-6',
        'bullets' => [
          'Welcome: Channel, Nachricht, Embed-Farbe, Auto-Rolle',
          'Optionale Regelbestätigungs-Rolle',
          'Logs: Join / Leave, Nachricht gelöscht / bearbeitet',
          'Logs: Ban / Unban, Rolle hinzugefügt / entfernt',
          'Logs: Ticket erstellt / geschlossen, Bewerbung eingereicht / angenommen / abgelehnt',
          'Nur sauber Loggbares — keine unnötige Speicherung privater Daten',
        ],
        'link' => null,
      ],
      [
        'eyebrow' => 'Vertrauen',
        'title' => 'Sicherheit & DSGVO',
        'text' => 'TacForce Pro ist auf langfristigen, seriösen Betrieb ausgelegt: klare Rechte, minimale Berechtigungen und datenschutzkonforme Verarbeitung.',
        'icon' => 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z M9 12l2 2 4-4',
        'bullets' => [
          'Discord-OAuth — du siehst nur Server mit ausreichenden Rechten',
          'Rollenbasierte Rechte-Checks in allen Aktionen',
          'Keine unnötigen Bot-Berechtigungen',
          'Tokens & Secrets ausschließlich serverseitig',
          'Keine HTML-Injection in Transkripten, Eingaben werden validiert',
          'Keine Fake-Member, keine Boosts, kein Spam, keine Mass-DMs',
        ],
        'link' => ['legal.privacy', 'Datenschutzerklärung lesen'],
      ],
      [
        'eyebrow' => 'Skalierung',
        'title' => 'Multi-Bot & White-Label',
        'text' => 'Verwalte mehrere Server aus einem Dashboard und tritt auf Wunsch unter eigenem Namen auf — mit individuellem Setup.',
        'icon' => 'M9 3H5a2 2 0 0 0-2 2v4M15 3h4a2 2 0 0 1 2 2v4M9 21H5a2 2 0 0 1-2-2v-4M15 21h4a2 2 0 0 0 2-2v-4',
        'bullets' => [
          'Mehrere Server im Elite-Plan',
          'Eigener Botname und eigenes Logo (White-Label)',
          'Individuelles Setup durch das TacForce-Team',
          'Erweiterte Statistiken & Prio-Support',
          'Vorbereitet für Faction, Shop & Soundboard',
          'Ideal für Netzwerke, Agenturen und größere Communitys',
        ],
        'link' => ['pricing', 'White-Label-Preise ansehen'],
      ],
    ];
  @endphp

  @foreach ($sections as $i => $section)
    <section @class([
        'border-b border-zinc-200 dark:border-zinc-800',
        'bg-white dark:bg-zinc-900/30' => $i % 2 === 1,
      ])>
      <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-10 lg:grid-cols-2 {{ $i % 2 === 1 ? 'lg:[&>*:first-child]:order-2' : '' }}">

          {{-- Text --}}
          <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">{{ $section['eyebrow'] }}</span>
            <div class="mt-4 flex items-center gap-3">
              <span class="inline-flex h-11 w-11 items-center justify-center rounded-lg bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-white">
                <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="{{ $section['icon'] }}"/></svg>
              </span>
              <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-3xl">{{ $section['title'] }}</h2>
            </div>
            <p class="mt-4 text-lg leading-relaxed text-zinc-600 dark:text-zinc-400">{{ $section['text'] }}</p>
            @if ($section['link'])
              <a href="{{ route($section['link'][0]) }}" class="mt-6 inline-flex items-center gap-1.5 text-sm font-semibold text-blue-600 dark:text-blue-400 hover:gap-2.5 transition-all">
                {{ $section['link'][1] }}
                <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 5 7 7-7 7"/></svg>
              </a>
            @endif
          </div>

          {{-- Bullet-Card --}}
          <div class="rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-6 sm:p-8">
            <ul class="space-y-3.5">
              @foreach ($section['bullets'] as $bullet)
                <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">{{ $bullet }}</span>
                </li>
              @endforeach
            </ul>
          </div>
        </div>
      </div>
    </section>
  @endforeach

  {{-- 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">Überzeug dich selbst</h2>
      <p class="mx-auto mt-4 max-w-xl text-lg text-zinc-600 dark:text-zinc-400">Starte kostenlos und aktiviere die Module, die du brauchst.</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">Preise ansehen</a>
      </div>
    </div>
  </section>

@endsection