import { ref, computed, mergeProps, unref, useSSRContext } from 'vue';
import { ssrRenderAttrs, ssrRenderList, ssrRenderClass, ssrInterpolate, ssrRenderComponent } from 'vue/server-renderer';
import { Users, Calendar, Hash, Star, Settings, BookOpen, ExternalLink } from 'lucide-vue-next';
import { u as useHead } from './composables-BzCA61rX.mjs';
import './server.mjs';
import '../nitro/nitro.mjs';
import 'node:http';
import 'node:https';
import 'node:events';
import 'node:buffer';
import 'node:fs';
import 'node:path';
import 'node:crypto';
import 'node:url';
import '../routes/renderer.mjs';
import 'vue-bundle-renderer/runtime';
import 'unhead/server';
import 'devalue';
import 'unhead/utils';
import 'vue-router';

const _sfc_main = {
  __name: "spielsysteme",
  __ssrInlineRender: true,
  setup(__props) {
    const systems = ref([]);
    const selectedCategory = ref("alle");
    const verfuegbareKategorien = computed(() => {
      const kategorien = [...new Set(systems.value.map((s) => s.kategorie).filter((k) => k !== ""))];
      return kategorien.sort();
    });
    const filteredSystems = computed(() => {
      if (selectedCategory.value === "alle") {
        return systems.value;
      }
      return systems.value.filter((s) => s.kategorie === selectedCategory.value);
    });
    const getCategoryColor = (kategorie) => {
      const colors = {
        "Klassisch": "bg-blue-100 text-blue-800",
        "Flexibel": "bg-green-100 text-green-800",
        "Strukturiert": "bg-purple-100 text-purple-800",
        "Modifiziert": "bg-orange-100 text-orange-800",
        "International": "bg-red-100 text-red-800",
        "Standard": "bg-gray-100 text-gray-800",
        "Professionell": "bg-yellow-100 text-yellow-800"
      };
      return colors[kategorie] || "bg-gray-100 text-gray-800";
    };
    useHead({
      title: "Spielsysteme - Harheimer TC"
    });
    return (_ctx, _push, _parent, _attrs) => {
      _push(`<div${ssrRenderAttrs(mergeProps({ class: "min-h-full py-16 bg-gray-50" }, _attrs))}><div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"><h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-6"> Spielsysteme </h1><div class="w-24 h-1 bg-primary-600 mb-8"></div><p class="text-xl text-gray-600 mb-12"> \xDCbersicht der verschiedenen Mannschafts-Spielsysteme im Tischtennis </p><div class="mb-8 flex flex-wrap gap-4"><!--[-->`);
      ssrRenderList(verfuegbareKategorien.value, (kategorie) => {
        _push(`<button class="${ssrRenderClass([
          "px-4 py-2 rounded-lg font-medium transition-colors",
          selectedCategory.value === kategorie ? "bg-primary-600 text-white" : "bg-white text-gray-700 hover:bg-gray-100 border border-gray-300"
        ])}">${ssrInterpolate(kategorie)}</button>`);
      });
      _push(`<!--]--><button class="${ssrRenderClass([
        "px-4 py-2 rounded-lg font-medium transition-colors",
        selectedCategory.value === "alle" ? "bg-primary-600 text-white" : "bg-white text-gray-700 hover:bg-gray-100 border border-gray-300"
      ])}"> Alle Kategorien </button></div>`);
      if (filteredSystems.value.length > 0) {
        _push(`<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"><!--[-->`);
        ssrRenderList(filteredSystems.value, (system) => {
          _push(`<div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow border border-gray-100"><div class="flex items-start justify-between mb-4"><div class="flex-1"><h3 class="text-xl font-display font-bold text-gray-900 mb-2">${ssrInterpolate(system.name)}</h3><div class="flex items-center mb-3">`);
          _push(ssrRenderComponent(unref(Users), {
            size: 16,
            class: "text-primary-600 mr-2"
          }, null, _parent));
          _push(`<span class="text-sm font-medium text-gray-600">${ssrInterpolate(system.mannschaftsgroesse)}</span></div></div><div class="${ssrRenderClass([
            "px-3 py-1 rounded-full text-xs font-medium",
            getCategoryColor(system.kategorie)
          ])}">${ssrInterpolate(system.kategorie)}</div></div><p class="text-gray-700 mb-4 leading-relaxed">${ssrInterpolate(system.description)}</p><div class="space-y-2 text-sm">`);
          if (system.spielabfolge) {
            _push(`<div class="flex items-center">`);
            _push(ssrRenderComponent(unref(Calendar), {
              size: 14,
              class: "text-primary-600 mr-2 flex-shrink-0"
            }, null, _parent));
            _push(`<span class="text-gray-600"><strong>Spielabfolge:</strong> ${ssrInterpolate(system.spielabfolge)}</span></div>`);
          } else {
            _push(`<!---->`);
          }
          if (system.anzahl_spiele) {
            _push(`<div class="flex items-center">`);
            _push(ssrRenderComponent(unref(Hash), {
              size: 14,
              class: "text-primary-600 mr-2 flex-shrink-0"
            }, null, _parent));
            _push(`<span class="text-gray-600"><strong>Anzahl Spiele:</strong> ${ssrInterpolate(system.anzahl_spiele)}</span></div>`);
          } else {
            _push(`<!---->`);
          }
          if (system.besonderheiten) {
            _push(`<div class="flex items-center">`);
            _push(ssrRenderComponent(unref(Star), {
              size: 14,
              class: "text-primary-600 mr-2 flex-shrink-0"
            }, null, _parent));
            _push(`<span class="text-gray-600"><strong>Besonderheiten:</strong> ${ssrInterpolate(system.besonderheiten)}</span></div>`);
          } else {
            _push(`<!---->`);
          }
          _push(`</div></div>`);
        });
        _push(`<!--]--></div>`);
      } else {
        _push(`<div class="text-center py-12 bg-white rounded-xl shadow-lg">`);
        _push(ssrRenderComponent(unref(Settings), {
          size: 48,
          class: "text-gray-400 mx-auto mb-4"
        }, null, _parent));
        _push(`<p class="text-gray-600">Keine Spielsysteme f\xFCr die ausgew\xE4hlte Kategorie gefunden.</p></div>`);
      }
      _push(`<div class="mt-12 bg-gradient-to-r from-primary-600 to-primary-700 rounded-xl p-8 text-white"><h3 class="text-2xl font-display font-bold mb-6 flex items-center">`);
      _push(ssrRenderComponent(unref(BookOpen), {
        size: 28,
        class: "mr-3"
      }, null, _parent));
      _push(` Weitere Informationen </h3><div class="space-y-4"><p class="text-primary-100 leading-relaxed"> Die Spielsysteme werden je nach Liga und Verband unterschiedlich eingesetzt. Die meisten regionalen Ligen verwenden das Bundessystem oder das Braunschweiger System. </p><p class="text-primary-100 leading-relaxed"> Internationale Wettk\xE4mpfe folgen meist den FIT-Systemen (Corbillon-Cup f\xFCr Damen, Swaythling-Cup f\xFCr Herren). </p><div class="mt-6"><a href="https://www.wikiwand.com/de/Tischtennis#Spielsysteme" target="_blank" class="inline-flex items-center px-6 py-3 bg-white text-primary-600 font-semibold rounded-lg hover:bg-gray-100 transition-colors">`);
      _push(ssrRenderComponent(unref(ExternalLink), {
        size: 20,
        class: "mr-2"
      }, null, _parent));
      _push(` Detaillierte Erkl\xE4rungen auf Wikiwand </a></div></div></div></div></div>`);
    };
  }
};
const _sfc_setup = _sfc_main.setup;
_sfc_main.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("pages/spielsysteme.vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};

export { _sfc_main as default };
//# sourceMappingURL=spielsysteme-Bnq6t-L4.mjs.map