@extends('layouts.public')

@section('title', 'Preise — TacForce Pro')
@section('meta_description', 'Vom kostenlosen Free-Plan bis White-Label: transparente Preise für TacForce Pro. Monatlich kündbar, ohne versteckte Kosten.')

@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">Preise</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">
        Fair, planbar, monatlich kündbar
      </h1>
      <p class="mx-auto mt-5 max-w-2xl text-lg text-zinc-600 dark:text-zinc-400">
        Starte kostenlos und wechsle jederzeit. Keine versteckten Kosten, keine langen Verträge.
      </p>
    </div>
  </section>

  {{-- PLÄNE --}}
  <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">
      @php
        $plans = [
          [
            'name' => 'Free',
            'price' => '0 €',
            'period' => 'für immer',
            'desc' => 'Für den Einstieg und kleine Server.',
            'features' => [
              '1 Server',
              '1 Ticket-Kategorie',
              '50 Tickets / Monat',
              '1 Bewerbungsformular',
              'Basis Welcome & Logs',
              'TacForce-Branding',
            ],
            'cta' => 'Kostenlos starten',
            'highlight' => false,
          ],
          [
            'name' => 'Starter',
            'price' => '4,99 €',
            'period' => '/ Monat',
            'desc' => 'Mehr Kategorien und Formulare.',
            'features' => [
              '1 Server',
              '3 Ticket-Kategorien',
              '250 Tickets / Monat',
              '3 Bewerbungsformulare',
              'Einfache Auto-Rollen',
              'Welcome & Logs',
            ],
            'cta' => 'Starter wählen',
            'highlight' => false,
          ],
          [
            'name' => 'Pro',
            'price' => '9,99 €',
            'period' => '/ Monat',
            'desc' => 'Für ernsthafte Communitys.',
            'features' => [
              'Unbegrenzte Tickets',
              'Unbegrenzte Formulare',
              'Ticket-Transkripte',
              'Rollen-Automation',
              'Eigene Branding-Farben',
              'Bessere Logs',
            ],
            'cta' => 'Pro wählen',
            'highlight' => true,
          ],
          [
            'name' => 'Elite',
            'price' => '19,99 €',
            'period' => '/ Monat',
            'desc' => 'Mehrere Server & erweiterte Tools.',
            'features' => [
              'Alles aus Pro',
              'Mehrere Server',
              'Faction / Shop / Soundboard (später)',
              'Erweiterte Statistiken',
              'Prioritäts-Support',
            ],
            'cta' => 'Elite wählen',
            'highlight' => false,
          ],
          [
            'name' => 'Custom / White-Label',
            'price' => '149 €',
            'period' => 'Setup + 19–49 € / Monat',
            'desc' => 'Dein Botname, dein Logo.',
            'features' => [
              'Eigener Botname & Logo',
              'Individuelles Setup',
              'Alles aus Elite',
              'Dediziertes Onboarding',
              'Bevorzugter Support',
            ],
            'cta' => 'Kontakt aufnehmen',
            'highlight' => false,
          ],
        ];
      @endphp

      <div class="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
        @foreach ($plans as $plan)
          <div @class([
              'relative flex flex-col rounded-2xl border bg-white dark:bg-zinc-900 p-6',
              'border-blue-500/50 ring-1 ring-blue-500/20 shadow-lg shadow-blue-500/5' => $plan['highlight'],
              'border-zinc-200 dark:border-zinc-800' => ! $plan['highlight'],
            ])>
            @if ($plan['highlight'])
              <span class="absolute -top-3 left-1/2 -translate-x-1/2 inline-flex items-center rounded-full bg-blue-600 px-3 py-1 text-xs font-semibold text-white shadow">Beliebt</span>
            @endif

            <h3 class="text-base font-bold text-zinc-900 dark:text-white">{{ $plan['name'] }}</h3>
            <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{{ $plan['desc'] }}</p>

            <div class="mt-5">
              <span class="text-3xl font-extrabold text-zinc-900 dark:text-white">{{ $plan['price'] }}</span>
              <span class="ml-1 text-xs font-medium text-zinc-500 dark:text-zinc-400">{{ $plan['period'] }}</span>
            </div>

            <ul class="mt-6 flex-1 space-y-3 text-sm">
              @foreach ($plan['features'] as $feature)
                <li class="flex items-start gap-2.5 text-zinc-700 dark:text-zinc-300">
                  <svg class="mt-0.5 h-4 w-4 shrink-0 {{ $plan['highlight'] ? 'text-blue-500' : 'text-emerald-500' }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                  <span>{{ $feature }}</span>
                </li>
              @endforeach
            </ul>

            <a href="{{ route('login') }}" @class([
                'mt-7 inline-flex w-full items-center justify-center rounded-lg text-sm font-semibold px-4 py-2.5 transition',
                'bg-blue-600 hover:bg-blue-500 text-white' => $plan['highlight'],
                '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' => ! $plan['highlight'],
              ])>
              {{ $plan['cta'] }}
            </a>
          </div>
        @endforeach
      </div>

      <p class="mt-8 text-center text-xs text-zinc-500 dark:text-zinc-400">
        Alle Preise inkl. gesetzlicher Umsatzsteuer. Pläne werden im Admin-Bereich freigeschaltet; die Zahlungsintegration (Stripe / Discord) folgt.
      </p>
    </div>
  </section>

  {{-- FAQ --}}
  <section>
    <div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8 py-16 sm:py-20">
      <h2 class="text-center text-3xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-4xl">Häufige Fragen</h2>

      <div class="mt-10 space-y-3" x-data="{ open: 0 }">
        @php
          $faqs = [
            ['Wie funktioniert die Zahlung?', 'Im MVP schaltet unser Team die Pläne manuell frei. Die automatische Zahlung über Stripe bzw. die Discord App Monetization wird derzeit vorbereitet. Sobald verfügbar, kannst du bequem monatlich per Karte bezahlen — inkl. Rechnung.'],
            ['Kann ich jederzeit kündigen?', 'Ja. Alle bezahlten Pläne sind monatlich kündbar. Nach dem Ende des Abrechnungszeitraums fällst du automatisch auf den kostenlosen Free-Plan zurück — deine Server und Einstellungen bleiben erhalten.'],
            ['Was bedeutet White-Label?', 'Beim Custom-/White-Label-Plan tritt der Bot unter deinem eigenen Namen und Logo auf. Wir übernehmen das individuelle Setup, sodass deine Community den Bot als Teil deiner Marke wahrnimmt. Der Preis besteht aus einer einmaligen Setup-Gebühr (149 €) plus laufender Monatsgebühr (19–49 €).'],
            ['Ist TacForce Pro DSGVO-konform?', 'Wir verarbeiten nur die Daten, die für den Betrieb nötig sind, und speichern keine privaten Inhalte unnötig. Die Anmeldung läuft über Discord-OAuth, Zugriffe sind rollenbasiert abgesichert. Details findest du in unserer Datenschutzerklärung.'],
          ];
        @endphp
        @foreach ($faqs as $index => $faq)
          <div class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
            <button type="button" @click="open === {{ $index }} ? open = null : open = {{ $index }}"
              class="flex w-full items-center justify-between gap-4 px-5 py-4 text-left">
              <span class="text-sm font-semibold text-zinc-900 dark:text-white">{{ $faq[0] }}</span>
              <svg class="h-5 w-5 shrink-0 text-zinc-400 transition-transform duration-200" :class="open === {{ $index }} ? 'rotate-180' : ''" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
            </button>
            <div x-show="open === {{ $index }}" x-collapse.duration.200ms x-cloak
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
              <p class="px-5 pb-5 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">{{ $faq[1] }}</p>
            </div>
          </div>
        @endforeach
      </div>

      <div class="mt-12 text-center">
        <p class="text-sm text-zinc-600 dark:text-zinc-400">Noch Fragen offen?</p>
        <a href="{{ route('page.tickets') }}" class="mt-3 inline-flex items-center gap-1.5 text-sm font-semibold text-blue-600 dark:text-blue-400 hover:gap-2.5 transition-all">
          Support-Ticket eröffnen
          <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>
  </section>

@endsection