@extends('layouts.public')

@section('title', 'TacForce Pro — Der Discord-Bot für professionelle Server')
@section('meta_description', 'Verwalte Tickets, Bewerbungen, Rollen, Logs und Community-Prozesse in einem modernen Dashboard. Kostenlos starten.')

@section('content')

  {{-- ============================ HERO ============================ --}}
  <section class="relative">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-16 pb-10 sm:pt-24 text-center">

      <div class="mx-auto inline-flex items-center gap-2 rounded-md border border-zinc-200 dark:border-zinc-800 bg-white/70 dark:bg-zinc-900/60 px-3 py-1.5 font-mono text-[11px] font-medium tracking-wide text-zinc-600 dark:text-zinc-300 backdrop-blur">
        <span class="text-blue-500">▸</span> {{ __('TICKETS · BEWERBUNGEN · WELCOME · LOGS') }}
      </div>

      <h1 class="mx-auto mt-7 max-w-4xl text-4xl font-extrabold tracking-tight text-zinc-900 dark:text-white sm:text-5xl lg:text-6xl">
        {{ __('Das Kontrollzentrum für Server, die') }}
        <span class="relative whitespace-nowrap text-blue-600 dark:text-blue-500">{{ __('professionell wirken') }}</span>
        {{ __('wollen.') }}
      </h1>

      <p class="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-zinc-600 dark:text-zinc-400">
        {{ __('Tickets, Bewerbungen, Rollen und Logs — gesteuert aus einem modernen Dashboard. Ein Bot, klare Prozesse, volle Kontrolle.') }}
      </p>

      {{-- Terminal-Zeile --}}
      <div class="mx-auto mt-7 inline-flex items-center gap-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white/80 dark:bg-black/40 px-4 py-2 font-mono text-[13px] text-zinc-500 dark:text-zinc-400 backdrop-blur">
        <span class="text-emerald-500">➜</span>
        <span class="text-zinc-400 dark:text-zinc-600">~</span>
        <span class="text-zinc-800 dark:text-zinc-200">tacforce</span> deploy --server <span class="tf-cursor text-blue-500"></span>
      </div>

      <div class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
        <a href="{{ route('login') }}"
           class="group 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 shadow-lg shadow-blue-600/20 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 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="{{ loc('features') }}"
           class="inline-flex w-full items-center justify-center gap-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white/70 dark:bg-zinc-900/60 hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-700 dark:text-zinc-200 text-sm font-semibold px-6 py-3 backdrop-blur 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="m10 8 6 4-6 4V8z"/><circle cx="12" cy="12" r="10"/></svg>
          {{ __('Demo ansehen') }}
        </a>
      </div>

      <p class="mt-5 font-mono text-[11px] text-zinc-500 dark:text-zinc-500">{{ __('KOSTENLOSER PLAN · KEINE KREDITKARTE · SETUP IN ~2 MIN') }}</p>

      {{-- Telemetrie-Leiste --}}
      <div class="tf-hud mx-auto mt-12 grid max-w-3xl grid-cols-2 gap-px overflow-hidden rounded-xl border border-zinc-200 bg-zinc-200 dark:border-zinc-800 dark:bg-zinc-800 sm:grid-cols-4">
        @php
          $telemetry = [
            ['SERVER', number_format($stats['guilds'] ?? 0, 0, ',', '.'), 'text-blue-500'],
            ['MITGLIEDER', number_format($stats['members'] ?? 0, 0, ',', '.'), 'text-emerald-500'],
            ['BEFEHLE', ($stats['commands'] ?? 34), 'text-cyan-500'],
            ['HOSTING', 'EU · DSGVO', 'text-zinc-500'],
          ];
        @endphp
        @foreach ($telemetry as [$k, $v, $c])
          <div class="bg-white dark:bg-zinc-950/60 px-4 py-4 text-left">
            <p class="font-mono text-[10px] uppercase tracking-[0.15em] text-zinc-400 dark:text-zinc-500">{{ __($k) }}</p>
            <p class="mt-1 font-mono text-lg font-semibold {{ $c }}">{{ $v }}</p>
          </div>
        @endforeach
      </div>
    </div>

    {{-- ==================== KONSOLEN-MOCKUP ==================== --}}
    <div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 pb-20">
      <div class="tf-hud tf-scan relative overflow-hidden rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-2xl shadow-blue-900/10 dark:shadow-black/40">
        {{-- Konsolen-Leiste --}}
        <div class="flex items-center gap-2 border-b border-zinc-200 dark:border-zinc-800 px-4 py-3">
          <span class="h-3 w-3 rounded-full bg-red-400/80"></span>
          <span class="h-3 w-3 rounded-full bg-amber-400/80"></span>
          <span class="h-3 w-3 rounded-full bg-emerald-400/80"></span>
          <span class="ml-3 truncate font-mono text-xs text-zinc-400 dark:text-zinc-500">tacforce.pro/dashboard/mein-server</span>
          <span class="ml-auto hidden items-center gap-1.5 font-mono text-[10px] text-emerald-600 dark:text-emerald-400 sm:inline-flex">
            <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span> LIVE
          </span>
        </div>

        <div class="grid grid-cols-12">
          {{-- Mini-Sidebar --}}
          <aside class="hidden md:block col-span-3 lg:col-span-2 border-r border-zinc-200 dark:border-zinc-800 p-4">
            <div class="flex items-center gap-2 pb-4">
              <span class="inline-flex h-7 w-7 items-center justify-center rounded-lg bg-blue-600 text-white">
                <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="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
              </span>
              <span class="text-xs font-bold text-zinc-900 dark:text-white">TacForce</span>
            </div>
            <nav class="space-y-1 text-xs">
              <span class="flex items-center gap-2 rounded-lg bg-zinc-100 dark:bg-zinc-800 px-2.5 py-2 font-medium text-zinc-900 dark:text-white border-l-2 border-blue-500">Übersicht</span>
              <span class="flex items-center gap-2 rounded-lg px-2.5 py-2 text-zinc-500 dark:text-zinc-400">Einstellungen</span>
              <span class="flex items-center gap-2 rounded-lg px-2.5 py-2 text-zinc-500 dark:text-zinc-400">Tickets</span>
              <span class="flex items-center gap-2 rounded-lg px-2.5 py-2 text-zinc-500 dark:text-zinc-400">Bewerbungen</span>
              <span class="flex items-center gap-2 rounded-lg px-2.5 py-2 text-zinc-500 dark:text-zinc-400">Logs</span>
              <span class="flex items-center gap-2 rounded-lg px-2.5 py-2 text-zinc-500 dark:text-zinc-400">Billing</span>
            </nav>
          </aside>

          {{-- Content --}}
          <div class="col-span-12 md:col-span-9 lg:col-span-10 p-5 space-y-5">
            <div class="flex items-center justify-between">
              <div>
                <h3 class="text-sm font-semibold text-zinc-900 dark:text-white">Übersicht</h3>
                <p class="font-mono text-[11px] text-zinc-500 dark:text-zinc-400">// echtzeit-telemetrie</p>
              </div>
              <span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-500/10 px-2.5 py-1 text-xs font-medium text-emerald-600 dark:text-emerald-400 ring-1 ring-emerald-500/20">
                <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span> Bot Online
              </span>
            </div>

            {{-- Stat-Cards --}}
            <div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
              @php
                $stats = [
                  ['Offene Tickets', '12', 'text-blue-600 dark:text-blue-400'],
                  ['Bewerbungen', '38', 'text-emerald-600 dark:text-emerald-400'],
                  ['Mitglieder', '4 210', 'text-zinc-900 dark:text-white'],
                  ['Ø Antwortzeit', '4 min', 'text-amber-600 dark:text-amber-400'],
                ];
              @endphp
              @foreach ($stats as [$label, $value, $color])
                <div class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-950/40 p-3.5">
                  <p class="font-mono text-[10px] font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400">{{ $label }}</p>
                  <p class="mt-1.5 font-mono text-xl font-bold {{ $color }}">{{ $value }}</p>
                </div>
              @endforeach
            </div>

            <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
              {{-- Ticket-Tabelle --}}
              <div class="lg:col-span-2 rounded-xl border border-zinc-200 dark:border-zinc-800 overflow-hidden">
                <div class="border-b border-zinc-200 dark:border-zinc-800 px-4 py-3">
                  <h4 class="text-xs font-semibold text-zinc-900 dark:text-white">Aktuelle Tickets</h4>
                </div>
                <table class="w-full text-xs">
                  <tbody>
                    @php
                      $rows = [
                        ['#0421', 'Support · Voice-Problem', 'Offen', 'bg-blue-500/10 text-blue-600 dark:text-blue-400 ring-blue-500/20'],
                        ['#0420', 'Bestellung · Design-Paket', 'In Bearbeitung', 'bg-amber-500/10 text-amber-600 dark:text-amber-400 ring-amber-500/20'],
                        ['#0418', 'Bewerbung · Moderator', 'Geschlossen', 'bg-zinc-500/10 text-zinc-500 ring-zinc-500/20'],
                        ['#0417', 'Partneranfrage', 'Geschlossen', 'bg-zinc-500/10 text-zinc-500 ring-zinc-500/20'],
                      ];
                    @endphp
                    @foreach ($rows as [$id, $subject, $status, $badge])
                      <tr class="border-t border-zinc-100 dark:border-zinc-800 first:border-t-0">
                        <td class="px-4 py-2.5 font-mono text-zinc-500 dark:text-zinc-400">{{ $id }}</td>
                        <td class="px-4 py-2.5 text-zinc-700 dark:text-zinc-200">{{ $subject }}</td>
                        <td class="px-4 py-2.5 text-right">
                          <span class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ring-1 {{ $badge }}">{{ $status }}</span>
                        </td>
                      </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>

              {{-- Modul-Toggles --}}
              <div class="rounded-xl border border-zinc-200 dark:border-zinc-800 p-4">
                <h4 class="text-xs font-semibold text-zinc-900 dark:text-white">Module</h4>
                <div class="mt-3 space-y-3">
                  @php
                    $modules = [['Ticket-System', true], ['Bewerbungen', true], ['Welcome & Logs', true], ['Rollen-Automation', false]];
                  @endphp
                  @foreach ($modules as [$name, $on])
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-zinc-600 dark:text-zinc-300">{{ $name }}</span>
                      <span class="relative inline-flex h-5 w-9 items-center rounded-full {{ $on ? 'bg-blue-600' : 'bg-zinc-300 dark:bg-zinc-700' }}">
                        <span class="absolute h-4 w-4 rounded-full bg-white shadow {{ $on ? 'right-0.5' : 'left-0.5' }}"></span>
                      </span>
                    </div>
                  @endforeach
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  {{-- ============================ LIVE-FLOTTE ============================ --}}
  @if (isset($fleet) && $fleet->isNotEmpty())
  <section class="relative border-t border-zinc-200/80 dark:border-zinc-800/80">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-14">
      <div class="flex items-center gap-3">
        <span class="font-mono text-xs font-medium uppercase tracking-[0.2em] text-blue-600 dark:text-blue-400">// Flotte</span>
        <span class="h-px flex-1 bg-zinc-200 dark:bg-zinc-800"></span>
        <span class="font-mono text-[11px] text-zinc-400 dark:text-zinc-500">LIVE-TELEMETRIE AUS DER ZENTRALVERWALTUNG</span>
      </div>
      <div class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        @foreach ($fleet as $fleetBot)
          @php $online = $fleetBot->isOnline(); @endphp
          <div class="tf-hud relative overflow-hidden rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900/70 p-5 backdrop-blur-sm">
            <div class="absolute inset-x-0 top-0 h-1" style="background-color: {{ $fleetBot->accent_color }}"></div>
            <div class="flex items-center justify-between gap-3">
              <div class="flex items-center gap-3 min-w-0">
                <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-white font-bold" style="background-color: {{ $fleetBot->accent_color }}">
                  {{ strtoupper(substr($fleetBot->name, 0, 1)) }}
                </span>
                <div class="min-w-0">
                  <p class="truncate text-sm font-semibold text-zinc-900 dark:text-white">{{ $fleetBot->name }}</p>
                  <p class="font-mono text-[11px] text-zinc-400 dark:text-zinc-500">{{ $fleetBot->isExternal() ? 'EIGENER PROZESS · SUPERVISED' : 'MULTI-BOT-WORKER' }}</p>
                </div>
              </div>
              @if ($online)
                <span class="inline-flex shrink-0 items-center gap-1.5 rounded-full bg-emerald-500/10 px-2.5 py-1 font-mono text-[10px] font-semibold text-emerald-600 dark:text-emerald-400 ring-1 ring-emerald-500/20">
                  <span class="relative flex h-1.5 w-1.5"><span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75"></span><span class="relative inline-flex h-1.5 w-1.5 rounded-full bg-emerald-500"></span></span>
                  ONLINE
                </span>
              @else
                <span class="inline-flex shrink-0 items-center gap-1.5 rounded-full bg-zinc-500/10 px-2.5 py-1 font-mono text-[10px] font-semibold text-zinc-500 ring-1 ring-zinc-500/20">
                  <span class="h-1.5 w-1.5 rounded-full bg-zinc-400"></span> STANDBY
                </span>
              @endif
            </div>
          </div>
        @endforeach
      </div>
    </div>
  </section>
  @endif

  {{-- ============================ FEATURE-GRID ============================ --}}
  <section class="relative border-t border-zinc-200/80 dark:border-zinc-800/80">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-20">
      <div class="mx-auto max-w-2xl text-center">
        <div class="flex items-center justify-center gap-3">
          <span class="h-px w-8 bg-blue-500/40"></span>
          <span class="font-mono text-xs font-medium uppercase tracking-[0.2em] text-blue-600 dark:text-blue-400">// Module</span>
          <span class="h-px w-8 bg-blue-500/40"></span>
        </div>
        <h2 class="mt-5 text-3xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-4xl">{{ __('Alles, was ein seriöser Server braucht') }}</h2>
        <p class="mt-4 text-lg text-zinc-600 dark:text-zinc-400">Ein Bot, ein Dashboard, klare Prozesse — statt fünf halbgare Tools.</p>
      </div>

      <div class="mt-14 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
        @php
          $features = [
            ['Tickets', 'Support, Bestellungen, Beschwerden und Partneranfragen als private Ticket-Channels — mit Panel, Transkript und Log.', 'M8 10h.01M12 10h.01M16 10h.01M9 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'],
            ['Bewerbungen', 'Formulare mit eigenen Fragen, Modal-Eingabe, Annehmen/Ablehnen per Button und automatischer Rollenvergabe.', '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'],
            ['Welcome & Logs', 'Begrüße neue Mitglieder automatisch und protokolliere Joins, Bans, Rollen und gelöschte Nachrichten sauber.', 'M4 4v16h16 M4 14l4-4 4 4 6-6'],
            ['Rollen-Automation', 'Vergib Rollen automatisch bei Bewerbungsannahme oder Regelbestätigung — konsistent und ohne manuelle Klicks.', 'M9 12l2 2 4-4 M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z'],
            ['Multi-Bot', 'Ein Dashboard, mehrere Server. Auf Wunsch mit eigenem Botnamen und Logo (White-Label).', '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'],
            ['Sicherheit', 'Discord-OAuth, rollenbasierte Rechte, keine unnötigen Berechtigungen und DSGVO-konforme Verarbeitung.', 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z M9 12l2 2 4-4'],
          ];
        @endphp
        @foreach ($features as $i => [$title, $text, $icon])
          <div class="tf-hud group relative rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900/70 p-6 backdrop-blur-sm transition hover:border-blue-500/50 hover:shadow-lg hover:shadow-blue-500/5">
            <span class="pointer-events-none absolute inset-x-5 top-0 h-px bg-gradient-to-r from-transparent via-blue-500/60 to-transparent opacity-0 transition group-hover:opacity-100"></span>
            <div class="flex items-center justify-between">
              <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>
              <span class="font-mono text-[11px] text-zinc-300 dark:text-zinc-600">{{ sprintf('%02d', $i + 1) }}</span>
            </div>
            <h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-white">{{ $title }}</h3>
            <p class="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">{{ $text }}</p>
          </div>
        @endforeach
      </div>
    </div>
  </section>

  {{-- ============================ ZIELGRUPPEN ============================ --}}
  <section class="relative border-t border-zinc-200/80 dark:border-zinc-800/80">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-20">
      <div class="mx-auto max-w-2xl text-center">
        <div class="flex items-center justify-center gap-3">
          <span class="h-px w-8 bg-blue-500/40"></span>
          <span class="font-mono text-xs font-medium uppercase tracking-[0.2em] text-blue-600 dark:text-blue-400">// Einsatzgebiete</span>
          <span class="h-px w-8 bg-blue-500/40"></span>
        </div>
        <h2 class="mt-5 text-3xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-4xl">{{ __('Gebaut für ambitionierte Communitys') }}</h2>
        <p class="mt-4 text-lg text-zinc-600 dark:text-zinc-400">Egal ob Gaming, Roleplay oder Service — TacForce Pro passt sich deinem Server an.</p>
      </div>

      <div class="mt-14 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        @php
          $groups = [
            ['FiveM-Server', 'Bewerbungen, Tickets, Rollen und Teamverwaltung — vorbereitet für Fraktionssysteme.', 'M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'],
            ['Minecraft-Server', 'Whitelist-Bewerbungen, Support-Tickets und saubere Rollen für dein Netzwerk.', 'M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'],
            ['Communitys', 'Onboarding, Support und Moderation strukturiert — auch bei tausenden Mitgliedern.', '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 M16 3.13a4 4 0 0 1 0 7.75'],
            ['Creator', 'Bestell- und Anfrage-Tickets für Abos, Mitgliedschaften und Kooperationen.', 'm23 7-7 5 7 5V7z M14 5H3a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2z'],
            ['Designer &amp; Services', 'Auftragsabwicklung über Tickets: von der Anfrage bis zur Abnahme, alles dokumentiert.', 'M12 19l7-7 3 3-7 7-3-3z M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z M2 2l7.586 7.586'],
            ['Clans &amp; Teams', 'Beitrittsbewerbungen, interne Rollen und Logs für ein professionelles Auftreten.', 'M12 2 4 7v6c0 5 4 8 8 9 4-1 8-4 8-9V7l-8-5z'],
          ];
        @endphp
        @foreach ($groups as [$title, $text, $icon])
          <div class="flex items-start gap-4 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900/70 p-5 backdrop-blur-sm transition hover:border-blue-500/40">
            <span class="mt-0.5 inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-200">
              <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>
            <div>
              <h3 class="text-sm font-semibold text-zinc-900 dark:text-white">{!! $title !!}</h3>
              <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{!! $text !!}</p>
            </div>
          </div>
        @endforeach
      </div>
    </div>
  </section>

  {{-- ============================ SO FUNKTIONIERT'S ============================ --}}
  <section class="relative border-t border-zinc-200/80 dark:border-zinc-800/80">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-20">
      <div class="mx-auto max-w-2xl text-center">
        <div class="flex items-center justify-center gap-3">
          <span class="h-px w-8 bg-blue-500/40"></span>
          <span class="font-mono text-xs font-medium uppercase tracking-[0.2em] text-blue-600 dark:text-blue-400">// Deployment</span>
          <span class="h-px w-8 bg-blue-500/40"></span>
        </div>
        <h2 class="mt-5 text-3xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-4xl">{{ __("So funktioniert's") }}</h2>
        <p class="mt-4 text-lg text-zinc-600 dark:text-zinc-400">In drei Schritten von der Anmeldung zum laufenden System.</p>
      </div>

      <div class="mt-14 grid grid-cols-1 gap-8 md:grid-cols-3">
        @php
          $steps = [
            ['01', 'Mit Discord anmelden', 'Melde dich per Discord-OAuth an. Du siehst nur die Server, auf denen du ausreichende Rechte hast.'],
            ['02', 'Bot hinzufügen', 'Füge TacForce Operator zu deinem Server hinzu — nur mit den Berechtigungen, die er wirklich braucht.'],
            ['03', 'Module konfigurieren', 'Aktiviere Tickets, Bewerbungen, Welcome und Logs im Dashboard. Panels landen mit einem Klick auf deinem Server.'],
          ];
        @endphp
        @foreach ($steps as [$num, $title, $text])
          <div class="tf-hud relative rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900/70 p-6 backdrop-blur-sm">
            <span class="font-mono text-4xl font-extrabold text-blue-600/20 dark:text-blue-500/30">{{ $num }}</span>
            <h3 class="mt-2 text-base font-semibold text-zinc-900 dark:text-white">{{ $title }}</h3>
            <p class="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">{{ $text }}</p>
          </div>
        @endforeach
      </div>
    </div>
  </section>

  {{-- ============================ PRICING-TEASER ============================ --}}
  <section class="relative border-t border-zinc-200/80 dark:border-zinc-800/80">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-20">
      <div class="grid items-center gap-10 lg:grid-cols-2">
        <div>
          <div class="flex items-center gap-3">
            <span class="font-mono text-xs font-medium uppercase tracking-[0.2em] text-blue-600 dark:text-blue-400">// Preise</span>
            <span class="h-px w-10 bg-blue-500/40"></span>
          </div>
          <h2 class="mt-5 text-3xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-4xl">{{ __('Fair, planbar, ohne Überraschungen') }}</h2>
          <p class="mt-4 text-lg text-zinc-600 dark:text-zinc-400">
            Starte kostenlos und wechsle jederzeit auf einen größeren Plan. Vom kostenlosen Einstieg bis White-Label ist alles dabei — monatlich kündbar.
          </p>
          <ul class="mt-6 space-y-3 text-sm">
            @foreach (['Free ab 0 € — für den Einstieg', 'Pro ab 9,99 € — unbegrenzte Tickets & Automation', 'Custom / White-Label — dein Botname, dein Logo'] as $item)
              <li class="flex items-center gap-2.5 text-zinc-700 dark:text-zinc-300">
                <svg class="h-5 w-5 shrink-0 text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                {{ $item }}
              </li>
            @endforeach
          </ul>
          <div class="mt-8">
            <a href="{{ route('pricing') }}"
               class="inline-flex items-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-semibold px-5 py-2.5 shadow-lg shadow-blue-600/20 transition">
              Alle Preise ansehen
              <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>
          </div>
        </div>

        {{-- Mini-Preiskarte --}}
        <div class="tf-hud relative rounded-2xl border border-blue-500/40 bg-white dark:bg-zinc-900 p-6 shadow-lg shadow-blue-500/10 ring-1 ring-blue-500/10">
          <div class="flex items-center justify-between">
            <h3 class="text-lg font-bold text-zinc-900 dark:text-white">Pro</h3>
            <span class="inline-flex items-center rounded-full bg-blue-500/10 px-2.5 py-0.5 font-mono text-[11px] font-medium text-blue-600 dark:text-blue-400 ring-1 ring-blue-500/20">BELIEBT</span>
          </div>
          <p class="mt-4 text-4xl font-extrabold text-zinc-900 dark:text-white">9,99 €<span class="text-base font-medium text-zinc-500 dark:text-zinc-400"> / Monat</span></p>
          <ul class="mt-6 space-y-3 text-sm text-zinc-600 dark:text-zinc-300">
            @foreach (['Unbegrenzte Tickets & Formulare', 'Ticket-Transkripte', 'Rollen-Automation', 'Eigene Branding-Farben', 'Bessere Logs'] as $item)
              <li class="flex items-center gap-2.5">
                <svg class="h-4 w-4 shrink-0 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                {{ $item }}
              </li>
            @endforeach
          </ul>
          <a href="{{ route('pricing') }}" class="mt-6 inline-flex w-full items-center justify-center 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-medium px-4 py-2.5 transition">
            Plan vergleichen
          </a>
        </div>
      </div>
    </div>
  </section>

  {{-- ============================ FINALE CTA ============================ --}}
  <section class="relative border-t border-zinc-200/80 dark:border-zinc-800/80">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-20">
      <div class="tf-hud tf-scan relative overflow-hidden rounded-2xl border border-zinc-800 bg-zinc-950 px-6 py-16 text-center sm:px-16">
        <div class="pointer-events-none absolute inset-0">
          <div class="absolute inset-0 tf-grid opacity-60"></div>
          <div class="absolute left-1/2 top-0 h-64 w-96 -translate-x-1/2 rounded-full bg-blue-500/25 blur-3xl"></div>
        </div>
        <div class="relative">
          <span class="font-mono text-xs font-medium uppercase tracking-[0.2em] text-blue-400">// Ready to deploy</span>
          <h2 class="mx-auto mt-4 max-w-2xl text-3xl font-bold tracking-tight text-white sm:text-4xl">
            Bereit, deinen Server professionell wirken zu lassen?
          </h2>
          <p class="mx-auto mt-4 max-w-xl text-lg text-zinc-300">
            Richte Tickets und Bewerbungen in wenigen Minuten ein — kostenlos, ohne Kreditkarte.
          </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 shadow-lg shadow-blue-600/30 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-white/15 bg-white/5 hover:bg-white/10 text-white text-sm font-semibold px-6 py-3 transition sm:w-auto">
              Features entdecken
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>

@endsection