<template>
  <div class="home-container">
    <template v-if="isAuthenticated && isTtVereinProduct">
      <section class="club-dashboard-hero card">
        <div>
          <span class="club-dashboard-kicker">TT-Verein</span>
          <h2 class="club-dashboard-title">Dashboard</h2>
          <p class="club-dashboard-subtitle">
            Die zentrale Arbeitsplattform für den täglichen Vereinsbetrieb:
            Mitglieder, Anfragen, Kommunikation, Termine, Dokumente und Zahlungen.
          </p>
        </div>
        <div class="club-dashboard-quick-links">
          <router-link
            v-for="link in clubQuickLinks"
            :key="link.to"
            :to="link.to"
            class="club-dashboard-quick-link"
          >
            <span class="quick-link-icon">{{ link.icon }}</span>
            <span>{{ link.label }}</span>
          </router-link>
        </div>
      </section>

      <section v-if="clubDashboardSpotlightCards.length" class="club-dashboard-spotlight card">
        <div class="section-header">
          <h3 class="section-title">Sofort relevant</h3>
          <p class="club-dashboard-spotlight-note">
            Die wichtigsten Vereinsaufgaben und Statuswerte auf einen Blick.
          </p>
        </div>
        <div class="club-dashboard-spotlight-grid">
          <article
            v-for="card in clubDashboardSpotlightCards"
            :key="`spotlight-${card.title}`"
            class="club-dashboard-spotlight-card"
            :class="`accent-${card.accent || 'neutral'}`"
          >
            <div class="club-dashboard-spotlight-topline">
              <strong>{{ card.title }}</strong>
              <span v-if="card.value" class="club-dashboard-spotlight-value">{{ card.value }}</span>
            </div>
            <p v-if="card.meta" class="club-dashboard-spotlight-meta">{{ card.meta }}</p>
            <ul v-if="card.items?.length" class="club-dashboard-spotlight-list">
              <li v-for="item in card.items.slice(0, 2)" :key="typeof item === 'string' ? item : `${item?.to || 'no-link'}-${item?.label || 'empty'}`">
                <router-link
                  v-if="typeof item !== 'string' && item?.to"
                  :to="item.to"
                  class="club-dashboard-item-link"
                >
                  {{ typeof item === 'string' ? item : item?.label || '' }}
                </router-link>
                <template v-else>{{ typeof item === 'string' ? item : item?.label || '' }}</template>
              </li>
            </ul>
          </article>
        </div>
      </section>

      <section
        v-for="section in clubDashboardSections"
        :key="section.id"
        class="club-dashboard-section"
      >
        <div class="section-header">
          <h3 class="section-title">{{ section.title }}</h3>
        </div>
        <div class="club-dashboard-grid">
          <article
            v-for="card in section.cards"
            :key="card.title"
            class="card club-dashboard-card"
            :class="`accent-${card.accent || 'neutral'}`"
          >
            <h4>
              <router-link v-if="card.to" :to="card.to" class="club-dashboard-card-link">
                {{ card.title }}
              </router-link>
              <template v-else>{{ card.title }}</template>
            </h4>
            <p v-if="card.value" class="club-dashboard-value">
              <router-link v-if="card.to" :to="card.to" class="club-dashboard-card-link club-dashboard-value-link">
                {{ card.value }}
              </router-link>
              <template v-else>{{ card.value }}</template>
            </p>
            <p v-if="card.meta" class="club-dashboard-meta">{{ card.meta }}</p>
            <ul v-if="card.items" class="club-dashboard-list">
              <li
                v-for="item in card.items"
                :key="typeof item === 'string' ? item : `${item?.to || 'no-link'}-${item?.label || 'empty'}`"
                :class="{ 'club-dashboard-item-personal': typeof item !== 'string' && item?.isAssignedToCurrentUser }"
              >
                <router-link
                  v-if="typeof item !== 'string' && item?.to"
                  :to="item.to"
                  class="club-dashboard-item-link"
                >
                  {{ typeof item === 'string' ? item : item?.label || '' }}
                </router-link>
                <template v-else>{{ typeof item === 'string' ? item : item?.label || '' }}</template>
              </li>
            </ul>
          </article>
        </div>
      </section>
      <section v-if="!dashboardLoading && clubDashboardSections.length === 0" class="card club-dashboard-empty">
        <h3>Noch keine Dashboard-Daten</h3>
        <p v-if="!currentClub">
          Wähle zuerst einen Verein aus, damit Aufgaben, Mitglieder, Trainings und Termine geladen werden.
        </p>
        <p v-else>
          Für diesen Verein sind noch keine auswertbaren Dashboard-Daten vorhanden.
        </p>
      </section>
    </template>
    <template v-else>
    <div class="welcome-section">
      <div class="welcome-card card">
        <div class="card-header">
          <h2 class="card-title">{{ $t('home.welcome') }}</h2>
        </div>
        <div class="card-body">
          <div v-if="!isAuthenticated" class="marketing">
            <div class="auth-actions auth-actions-top">
              <router-link to="/register" class="btn-primary">
                <span class="btn-icon">🚀</span>
                {{ $t('home.startFree') }}
              </router-link>
              <router-link to="/login" class="btn-secondary">
                <span class="btn-icon">🔐</span>
                {{ $t('navigation.login') }}
              </router-link>
            </div>
            <template v-if="isPlayerProduct">
              <section class="hero">
                <h1 class="hero-title">Tischtennis für Spieler, nicht für Verwaltung</h1>
                <p class="hero-subtitle">
                  Mein TT bündelt deine persönlichen Tischtennisbereiche: Kalender,
                  Kontoverknüpfungen, Bestellungen und Einstellungen in einer ruhigen, reduzierten Oberfläche.
                </p>
                <div class="auth-actions">
                  <router-link to="/register" class="btn-primary">
                    <span class="btn-icon">🚀</span>
                    {{ $t('home.startFree') }}
                  </router-link>
                  <router-link to="/login" class="btn-secondary">
                    <span class="btn-icon">🔐</span>
                    {{ $t('navigation.login') }}
                  </router-link>
                </div>
                <ul class="hero-bullets">
                  <li>✔️ Persönlicher Kalender und Termine im Blick</li>
                  <li>✔️ myTischtennis- und click-TT-Konten zentral verknüpfen</li>
                  <li>✔️ Eigene Bestellungen und persönliche Einstellungen verwalten</li>
                  <li>✔️ Kein Vereinsverwaltungsmenü, keine überflüssigen Admin-Bereiche</li>
                </ul>
              </section>

              <section class="seo-intro card">
                <div class="seo-intro-copy">
                  <h2>Die persönliche Tischtennisoberfläche</h2>
                  <p>
                    Mein TT ist für einzelne Spieler gedacht, die keinen kompletten Vereinsarbeitsplatz
                    brauchen. Die Oberfläche konzentriert sich auf persönliche Themen statt auf
                    Mitgliederverwaltung, Budget oder Vereinsorganisation.
                  </p>
                  <p>
                    So bleibt der Einstieg schlank. Neue Spielerfunktionen wie individuelle Programme
                    und Zielsetzungen können später auf dieser getrennten Produktfläche sauber wachsen.
                  </p>
                </div>
                <div class="seo-intro-points">
                  <div class="seo-point">
                    <strong>Persönlich</strong>
                    <span>Fokus auf den einzelnen Spieler statt auf Vereinsrollen.</span>
                  </div>
                  <div class="seo-point">
                    <strong>Reduziert</strong>
                    <span>Nur Funktionen, die für den Spieler heute relevant sind.</span>
                  </div>
                  <div class="seo-point">
                    <strong>Ausbaufähig</strong>
                    <span>Saubere Grundlage für spätere Trainings- und Zielmodule.</span>
                  </div>
                </div>
              </section>

              <section class="features-section">
                <h3 class="section-title">Was du hier bereits nutzen kannst</h3>
                <div class="features-grid">
                  <div class="feature-card card">
                    <div class="feature-icon">📆</div>
                    <h4 class="feature-title">Kalender</h4>
                    <p class="feature-description">Termine, Trainingsbezug und persönliche Orientierung an einem Ort.</p>
                  </div>
                  <div class="feature-card card">
                    <div class="feature-icon">🔗</div>
                    <h4 class="feature-title">Kontoverknüpfungen</h4>
                    <p class="feature-description">myTischtennis und click-TT können direkt aus der persönlichen Oberfläche gepflegt werden.</p>
                  </div>
                  <div class="feature-card card">
                    <div class="feature-icon">📦</div>
                    <h4 class="feature-title">Bestellungen</h4>
                    <p class="feature-description">Persönliche Bestellungen bleiben sichtbar, ohne durch Vereinsverwaltung überlagert zu werden.</p>
                  </div>
                  <div class="feature-card card">
                    <div class="feature-icon">⚙️</div>
                    <h4 class="feature-title">Einstellungen</h4>
                    <p class="feature-description">Persönliche Einstellungen und Kontodaten sind direkt erreichbar.</p>
                  </div>
                </div>
              </section>
            </template>
            <template v-else-if="isClubProduct">
            <section class="hero">
              <h1 class="hero-title">TT-Verein für den täglichen Vereinsbetrieb</h1>
              <p class="hero-subtitle">
                Mitglieder verwalten, Anfragen bearbeiten, Kommunikation organisieren,
                Termine planen, Dokumente verwalten und Zahlungen im Blick behalten.
              </p>
              <div class="auth-actions">
                <router-link to="/register" class="btn-primary">
                  <span class="btn-icon">🚀</span>
                  {{ $t('home.startFree') }}
                </router-link>
                <router-link to="/login" class="btn-secondary">
                  <span class="btn-icon">🔐</span>
                  {{ $t('navigation.login') }}
                </router-link>
              </div>
              <ul class="hero-bullets">
                <li>✔️ Dashboard statt Statistikflut</li>
                <li>✔️ Anfragen, Mitglieder und Kommunikation zentral steuern</li>
                <li>✔️ Dokumente, Veranstaltungen und Zahlungen im Vereinskontext</li>
                <li>✔️ Rollenbasiert, historisiert und für APIs vorbereitet</li>
              </ul>
            </section>

            <section class="seo-intro card">
              <div class="seo-intro-copy">
                <h2>Die Arbeitsplattform für kleine und mittlere TT-Vereine</h2>
                <p>
                  TT-Verein richtet sich an Vereine mit etwa 30 bis 300 Mitgliedern und fokussiert
                  sich auf die täglichen Aufgaben der Vereinsarbeit statt auf Spezialwerkzeuge für
                  Statistik oder Vollbuchhaltung.
                </p>
                <p>
                  Im Mittelpunkt steht nicht die Frage, wie viele Kennzahlen es gibt, sondern was
                  heute erledigt werden muss: Anfragen, fehlende Daten, offene Zahlungen,
                  Vereinskommunikation und anstehende Termine.
                </p>
              </div>
              <div class="seo-intro-points">
                <div class="seo-point">
                  <strong>Mitglieder</strong>
                  <span>Stammdaten, Vereinsdaten, Mannschaften, Funktionen und Dokumente.</span>
                </div>
                <div class="seo-point">
                  <strong>Organisation</strong>
                  <span>Anfragen, Kommunikation, Termine, Aufgaben und Veranstaltungen.</span>
                </div>
                <div class="seo-point">
                  <strong>Verantwortung</strong>
                  <span>Rollen, Historie, Archiv und spätere Finanzprozesse aus einem System.</span>
                </div>
              </div>
            </section>

            <section class="search-topic-grid">
              <article class="search-topic card">
                <h2>Dashboard mit Handlungsbedarf</h2>
                <p>
                  Offene Aufgaben, neue Anfragen, fehlende Mitgliedsdaten, offene Zahlungen und die
                  nächsten Termine stehen auf der Startseite im Vordergrund.
                </p>
              </article>
              <article class="search-topic card">
                <h2>Vereinsbetrieb statt Werkzeugmix</h2>
                <p>
                  TT-Verein verbindet Mitglieder, Kommunikation, Dokumente und Termine in einem
                  gemeinsamen Arbeitskontext, damit Vorstand und Funktionsträger nicht zwischen
                  mehreren Systemen springen müssen.
                </p>
              </article>
              <article class="search-topic card">
                <h2>Historie überall</h2>
                <p>
                  Jede Änderung soll nachvollziehbar bleiben: wer, wann, was, alter Wert und neuer
                  Wert. Archivierung ersetzt später konsequent das Löschen.
                </p>
              </article>
              <article class="search-topic card">
                <h2>API-fähig gedacht</h2>
                <p>
                  Externe Vereinsseiten und Formulare können künftig Anfragen, Mitgliedsanträge,
                  Veranstaltungen und Nachrichten direkt an TT-Verein übergeben.
                </p>
              </article>
            </section>
            </template>
            <template v-else>
            <section class="hero">
              <h1 class="hero-title">{{ $t('home.heroTitle') }}</h1>
              <p class="hero-subtitle">
                {{ $t('home.heroSubtitle') }}
              </p>
              <div class="auth-actions">
                <router-link to="/register" class="btn-primary">
                  <span class="btn-icon">🚀</span>
                  {{ $t('home.startFree') }}
                </router-link>
                <router-link to="/login" class="btn-secondary">
                  <span class="btn-icon">🔐</span>
                  {{ $t('navigation.login') }}
                </router-link>
              </div>
              <ul class="hero-bullets">
                <li>✔️ {{ $t('home.heroFeatures.memberManagement') }}</li>
                <li>✔️ {{ $t('home.heroFeatures.trainingGroups') }}</li>
                <li>✔️ {{ $t('home.heroFeatures.trainingDiary') }}</li>
                <li>✔️ {{ $t('home.heroFeatures.tournaments') }}</li>
                <li>✔️ {{ $t('home.heroFeatures.teamManagement') }}</li>
                <li>✔️ {{ $t('home.heroFeatures.myTischtennis') }}</li>
                <li>✔️ {{ $t('home.heroFeatures.statistics') }}</li>
                <li>✔️ {{ $t('home.rolesAndPrivacy') }}</li>
              </ul>
            </section>

            <section class="seo-intro card">
              <div class="seo-intro-copy">
                <h2>Vereinssoftware für Tischtennisvereine</h2>
                <p>
                  Trainingstagebuch ist eine spezialisierte Vereinssoftware für Tischtennisvereine,
                  Trainerteams und Abteilungen. Die Anwendung bündelt Mitgliederverwaltung,
                  Trainingsplanung, Trainingstagebuch, Gruppensteuerung, Team-Management und
                  Turnierorganisation in einer Oberfläche.
                </p>
                <p>
                  Statt Insellösungen für Teilnehmerlisten, Trainingsgruppen, Anwesenheit,
                  Mannschaften und Turniere zu pflegen, arbeitet der Verein mit einem zentralen
                  System. Das spart Zeit in der Organisation und macht Abläufe für Trainer,
                  Jugendwarte, Mannschaftsführer und Vorstände transparenter.
                </p>
              </div>
              <div class="seo-intro-points">
                <div class="seo-point">
                  <strong>Mitgliederverwaltung Verein</strong>
                  <span>Mit Status, Kontakten, Gruppen, Historien und Rollen.</span>
                </div>
                <div class="seo-point">
                  <strong>Trainingsplanung Tischtennis</strong>
                  <span>Mit Gruppen, Teilnehmern, Aktivitäten und Trainingstagen.</span>
                </div>
                <div class="seo-point">
                  <strong>Turnierorganisation</strong>
                  <span>Für interne, offene und offizielle Wettbewerbe.</span>
                </div>
              </div>
            </section>

            <section class="search-topic-grid">
              <article class="search-topic card">
                <h2>Mitgliederverwaltung für Vereine</h2>
                <p>
                  Die Mitgliederverwaltung bildet aktive Mitglieder, Probemitglieder, Kontaktdaten,
                  Altersklassen, Gruppen, Status und Vereinsrollen sauber ab. So lassen sich
                  Trainingsgruppen, Teilnahmen und Team-Zuordnungen direkt mit den Mitgliedsdaten
                  verknüpfen.
                </p>
                <router-link to="/mitgliederverwaltung-verein" class="topic-link">
                  Mehr zur Mitgliederverwaltung
                </router-link>
              </article>
              <article class="search-topic card">
                <h2>Trainingsplanung und Trainingstagebuch</h2>
                <p>
                  Trainer planen Einheiten, dokumentieren Anwesenheiten, ordnen Gruppen zu und
                  halten Aktivitäten im Trainingstagebuch fest. Das eignet sich besonders für
                  Tischtennistraining mit wechselnden Gruppen, Anwesenheiten und Stationsformen.
                </p>
                <router-link to="/trainingsplanung-tischtennis" class="topic-link">
                  Mehr zur Trainingsplanung
                </router-link>
              </article>
              <article class="search-topic card">
                <h2>Turniersoftware für Vereinswettbewerbe</h2>
                <p>
                  Das System unterstützt Turniere im Verein ebenso wie offene und offizielle
                  Wettbewerbe. Teilnehmer, Gruppen, Auslosungen, Ergebnisse und Übersichten lassen
                  sich in einer Anwendung verwalten.
                </p>
                <router-link to="/turniersoftware-tischtennis" class="topic-link">
                  Mehr zur Turniersoftware
                </router-link>
              </article>
              <article class="search-topic card">
                <h2>Team-Management und Statistiken</h2>
                <p>
                  Mannschaften, Einsätze, Dokumente, Statistiken und Auswertungen greifen ineinander.
                  Damit eignet sich Trainingstagebuch nicht nur für die Trainingsorganisation, sondern
                  auch für die laufende Vereinsarbeit über die ganze Saison.
                </p>
                <router-link to="/vereinssoftware-tischtennis" class="topic-link">
                  Mehr zur Vereinssoftware
                </router-link>
              </article>
            </section>

            <section class="seo-hub card">
              <h3 class="section-title">Öffentliche Themenseiten</h3>
              <div class="seo-hub-links">
                <router-link to="/vereinssoftware-tischtennis" class="seo-hub-link">
                  Vereinssoftware für Tischtennisvereine
                </router-link>
                <router-link to="/mitgliederverwaltung-verein" class="seo-hub-link">
                  Mitgliederverwaltung für Vereine
                </router-link>
                <router-link to="/trainingsplanung-tischtennis" class="seo-hub-link">
                  Trainingsplanung für Tischtennisvereine
                </router-link>
                <router-link to="/turniersoftware-tischtennis" class="seo-hub-link">
                  Turniersoftware für Tischtennis
                </router-link>
              </div>
            </section>

            <section class="features-section">
              <h3 class="section-title">{{ $t('home.whatCanYouDo') }}</h3>
              <div class="features-grid">
                <div class="feature-card card">
                  <div class="feature-icon">👥</div>
                  <h4 class="feature-title">{{ $t('home.features.manageMembers') }}</h4>
                  <p class="feature-description">
                    {{ $t('home.features.manageMembersDesc') }}
                  </p>
                </div>

                <div class="feature-card card">
                  <div class="feature-icon">📝</div>
                  <h4 class="feature-title">{{ $t('home.features.keepDiary') }}</h4>
                  <p class="feature-description">
                    {{ $t('home.features.keepDiaryDesc') }}
                  </p>
                </div>

                <div class="feature-card card">
                  <div class="feature-icon">📅</div>
                  <h4 class="feature-title">{{ $t('home.features.organizeSchedules') }}</h4>
                  <p class="feature-description">
                    {{ $t('home.features.organizeSchedulesDesc') }}
                  </p>
                </div>

                <div class="feature-card card">
                  <div class="feature-icon">📊</div>
                  <h4 class="feature-title">{{ $t('home.features.statistics') }}</h4>
                  <p class="feature-description">
                    {{ $t('home.features.statisticsDesc') }}
                  </p>
                </div>

                <div class="feature-card card">
                  <div class="feature-icon">🔒</div>
                  <h4 class="feature-title">{{ $t('home.features.security') }}</h4>
                  <p class="feature-description">
                    {{ $t('home.features.securityDesc') }}
                  </p>
                </div>

                <div class="feature-card card">
                  <div class="feature-icon">⚙️</div>
                  <h4 class="feature-title">{{ $t('home.features.predefinedActivities') }}</h4>
                  <p class="feature-description">
                    {{ $t('home.features.predefinedActivitiesDesc') }}
                  </p>
                </div>

                <div class="feature-card card">
                  <div class="feature-icon">👥</div>
                  <h4 class="feature-title">{{ $t('home.features.trainingGroups') }}</h4>
                  <p class="feature-description">
                    {{ $t('home.features.trainingGroupsDesc') }}
                  </p>
                </div>

                <div class="feature-card card">
                  <div class="feature-icon">🏅</div>
                  <h4 class="feature-title">{{ $t('home.features.officialTournaments') }}</h4>
                  <p class="feature-description">
                    {{ $t('home.features.officialTournamentsDesc') }}
                  </p>
                </div>

                <div class="feature-card card">
                  <div class="feature-icon">👔</div>
                  <h4 class="feature-title">{{ $t('home.features.teamManagement') }}</h4>
                  <p class="feature-description">
                    {{ $t('home.features.teamManagementDesc') }}
                  </p>
                </div>

                <div class="feature-card card">
                  <div class="feature-icon">🔗</div>
                  <h4 class="feature-title">{{ $t('home.features.myTischtennisIntegration') }}</h4>
                  <p class="feature-description">
                    {{ $t('home.features.myTischtennisIntegrationDesc') }}
                  </p>
                </div>

                <div class="feature-card card">
                  <div class="feature-icon">📄</div>
                  <h4 class="feature-title">{{ $t('home.features.pdfExport') }}</h4>
                  <p class="feature-description">
                    {{ $t('home.features.pdfExportDesc') }}
                  </p>
                </div>

                <div class="feature-card card">
                  <div class="feature-icon">🔐</div>
                  <h4 class="feature-title">{{ $t('home.features.permissionSystem') }}</h4>
                  <p class="feature-description">
                    {{ $t('home.features.permissionSystemDesc') }}
                  </p>
                </div>

                <div class="feature-card card">
                  <div class="feature-icon">📋</div>
                  <h4 class="feature-title">{{ $t('home.features.activityLog') }}</h4>
                  <p class="feature-description">
                    {{ $t('home.features.activityLogDesc') }}
                  </p>
                </div>
              </div>
            </section>

            <section class="how-it-works">
              <h3 class="section-title">{{ $t('home.howItWorks') }}</h3>
              <div class="steps">
                <div class="step">
                  <div class="step-number">1</div>
                  <h4 class="step-title">{{ $t('home.step1.title') }}</h4>
                  <p>{{ $t('home.step1.description') }}</p>
                </div>
                <div class="step">
                  <div class="step-number">2</div>
                  <h4 class="step-title">{{ $t('home.step2.title') }}</h4>
                  <p>{{ $t('home.step2.description') }}</p>
                </div>
                <div class="step">
                  <div class="step-number">3</div>
                  <h4 class="step-title">{{ $t('home.step3.title') }}</h4>
                  <p>{{ $t('home.step3.description') }}</p>
                </div>
              </div>
            </section>

            <section class="seo-copy">
              <h3 class="section-title">{{ $t('home.forWhom') }}</h3>
              <p class="long-text">
                {{ $t('home.forWhomText') }}
              </p>
            </section>

            <section class="seo-copy seo-copy-secondary">
              <h3 class="section-title">Warum die Software in Suchergebnissen relevant sein soll</h3>
              <p class="long-text">
                Wer nach Vereinssoftware für Tischtennis, einer Lösung für Mitgliederverwaltung im
                Verein oder nach einer Software für Trainingsplanung und Turnierorganisation sucht,
                sucht in der Regel kein generisches Tool. Gesucht wird eine Anwendung, die die
                Abläufe im Sportverein wirklich versteht: Trainingsgruppen, Anwesenheiten,
                Mannschaftsbetrieb, Jugend- und Erwachsenentraining, Auswertungen und die Verbindung
                zu bestehenden Tischtennis-Datenquellen. Genau dafür ist Trainingstagebuch ausgelegt.
              </p>
            </section>

            <section class="faq">
              <h3 class="section-title">{{ $t('home.faq') }}</h3>
              <details>
                <summary>{{ $t('home.faqFree.question') }}</summary>
                <p>{{ $t('home.faqFree.answer') }}</p>
              </details>
              <details>
                <summary>{{ $t('home.faqPrivacy.question') }}</summary>
                <p>{{ $t('home.faqPrivacy.answer') }}</p>
              </details>
              <details>
                <summary>{{ $t('home.faqInstallation.question') }}</summary>
                <p>{{ $t('home.faqInstallation.answer') }}</p>
              </details>
              <details>
                <summary>{{ $t('home.faqTournaments.question') }}</summary>
                <p>{{ $t('home.faqTournaments.answer') }}</p>
              </details>
              <details>
                <summary>{{ $t('home.faqMyTischtennis.question') }}</summary>
                <p>{{ $t('home.faqMyTischtennis.answer') }}</p>
              </details>
              <details>
                <summary>{{ $t('home.faqTrainingGroups.question') }}</summary>
                <p>{{ $t('home.faqTrainingGroups.answer') }}</p>
              </details>
              <details>
                <summary>{{ $t('home.faqPermissions.question') }}</summary>
                <p>{{ $t('home.faqPermissions.answer') }}</p>
              </details>
            </section>

            <div class="cta-bottom">
              <router-link to="/register" class="btn-primary">
                <span class="btn-icon">✅</span>
                {{ $t('home.registerNow') }}
              </router-link>
              <router-link to="/login" class="btn-secondary">
                <span class="btn-icon">🔐</span>
                {{ $t('home.haveAccount') }}
              </router-link>
            </div>
            </template>
          </div>

          <div v-else class="user-welcome">
            <div class="user-avatar">
              <span class="avatar-icon">👋</span>
            </div>
            <p class="welcome-text">
              {{ $t('home.welcomeBack') }}
            </p>
            <div class="user-actions">
              <button @click="logout" class="btn-secondary">
                <span class="btn-icon">🚪</span>
                {{ $t('navigation.logout') }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="isAuthenticated" class="features-section">
      <h3 class="section-title">{{ $t('home.whatCanYouDo') }}</h3>
      <div v-if="isTrainerProduct" class="features-grid">
        <div class="feature-card card">
          <div class="feature-icon">👥</div>
          <h4 class="feature-title">{{ $t('home.authenticatedFeatures.manageMembers') }}</h4>
          <p class="feature-description">
            {{ $t('home.authenticatedFeatures.manageMembersDesc') }}
          </p>
        </div>
        
        <div class="feature-card card">
          <div class="feature-icon">📝</div>
          <h4 class="feature-title">{{ $t('home.authenticatedFeatures.keepDiary') }}</h4>
          <p class="feature-description">
            {{ $t('home.authenticatedFeatures.keepDiaryDesc') }}
          </p>
        </div>
        
        <div class="feature-card card">
          <div class="feature-icon">👥</div>
          <h4 class="feature-title">{{ $t('home.authenticatedFeatures.trainingGroups') }}</h4>
          <p class="feature-description">
            {{ $t('home.authenticatedFeatures.trainingGroupsDesc') }}
          </p>
        </div>
        
        <div class="feature-card card">
          <div class="feature-icon">🏆</div>
          <h4 class="feature-title">{{ $t('home.authenticatedFeatures.manageTournaments') }}</h4>
          <p class="feature-description">
            {{ $t('home.authenticatedFeatures.manageTournamentsDesc') }}
          </p>
        </div>

        <div class="feature-card card">
          <div class="feature-icon">👔</div>
          <h4 class="feature-title">{{ $t('home.authenticatedFeatures.teamManagement') }}</h4>
          <p class="feature-description">
            {{ $t('home.authenticatedFeatures.teamManagementDesc') }}
          </p>
        </div>

        <div class="feature-card card">
          <div class="feature-icon">🔗</div>
          <h4 class="feature-title">{{ $t('home.authenticatedFeatures.myTischtennisIntegration') }}</h4>
          <p class="feature-description">
            {{ $t('home.authenticatedFeatures.myTischtennisIntegrationDesc') }}
          </p>
        </div>

        <div class="feature-card card">
          <div class="feature-icon">📊</div>
          <h4 class="feature-title">{{ $t('home.authenticatedFeatures.statistics') }}</h4>
          <p class="feature-description">
            {{ $t('home.authenticatedFeatures.statisticsDesc') }}
          </p>
        </div>

        <div class="feature-card card">
          <div class="feature-icon">📄</div>
          <h4 class="feature-title">{{ $t('home.authenticatedFeatures.pdfExport') }}</h4>
          <p class="feature-description">
            {{ $t('home.authenticatedFeatures.pdfExportDesc') }}
          </p>
        </div>
      </div>
      <div v-else class="features-grid">
        <div class="feature-card card">
          <div class="feature-icon">📆</div>
          <h4 class="feature-title">Kalender</h4>
          <p class="feature-description">Deine verfügbaren Tischtennistermine und Vereinsbezüge bleiben schnell auffindbar.</p>
        </div>
        <div class="feature-card card">
          <div class="feature-icon">🔗</div>
          <h4 class="feature-title">Konten</h4>
          <p class="feature-description">myTischtennis- und click-TT-Verknüpfungen sind direkt aus deinem Bereich erreichbar.</p>
        </div>
        <div class="feature-card card">
          <div class="feature-icon">📦</div>
          <h4 class="feature-title">Bestellungen</h4>
          <p class="feature-description">Persönliche Bestellungen lassen sich ohne Vereinsmenü öffnen und verfolgen.</p>
        </div>
        <div class="feature-card card">
          <div class="feature-icon">⚙️</div>
          <h4 class="feature-title">Persönliche Einstellungen</h4>
          <p class="feature-description">Dein Konto bleibt die Startbasis für spätere individuelle Trainings- und Zielmodule.</p>
        </div>
      </div>
    </div>
    </template>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import apiClient from '../apiClient.js';
import { CLUB_DASHBOARD_QUICK_LINKS } from '../config/clubWorkspace.js';

export default {
  name: 'Home',
  data() {
    return {
      dashboardSectionsOverride: null,
      dashboardLoading: false,
    };
  },
  computed: {
    ...mapGetters(['isAuthenticated', 'appProduct', 'currentClub']),
    isPlayerProduct() {
      return this.appProduct === 'player';
    },
    isClubProduct() {
      return this.appProduct === 'club';
    },
    isTrainerProduct() {
      return this.appProduct === 'trainer';
    },
    isTtVereinProduct() {
      return this.isClubProduct;
    },
    clubDashboardSections() {
      return this.dashboardSectionsOverride || [];
    },
    clubDashboardSpotlightCards() {
      const priorityTitles = [
        'Offene Zahlungen',
        'Offene Aufgaben',
        'Kommunikation',
        'Rechnungen',
        'Fehlende Daten',
        'Archiv',
        'Neue Anfragen',
      ];
      const allCards = this.clubDashboardSections.flatMap((section) => (
        Array.isArray(section.cards)
          ? section.cards.map((card) => ({ ...card, sectionId: section.id }))
          : []
      ));
      return priorityTitles
        .map((title) => allCards.find((card) => card.title === title))
        .filter(Boolean)
        .slice(0, 4);
    },
    clubQuickLinks() {
      return CLUB_DASHBOARD_QUICK_LINKS;
    },
  },
  watch: {
    currentClub: {
      immediate: true,
      async handler() {
        await this.loadClubDashboard();
      },
    },
  },
  methods: {
    ...mapActions(['logout']),
    async loadClubDashboard() {
      if (!this.isTtVereinProduct || !this.isAuthenticated || !this.currentClub) {
        this.dashboardSectionsOverride = null;
        return;
      }

      this.dashboardLoading = true;
      try {
        const response = await apiClient.get(`/club-dashboard/${this.currentClub}`);
        const sections = Array.isArray(response.data?.sections) ? response.data.sections : null;
        this.dashboardSectionsOverride = sections && sections.length > 0 ? sections : null;
      } catch (_error) {
        this.dashboardSectionsOverride = null;
      } finally {
        this.dashboardLoading = false;
      }
    },
  },
};
</script>

<style scoped>
.home-container {
  max-width: 1200px;
  margin: 0 auto;
}

.club-dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
  gap: 1rem;
  padding: 1.5rem;
  margin-bottom: 1rem;
  background:
    linear-gradient(140deg, rgba(24, 70, 54, 0.08), rgba(47, 122, 95, 0.04)),
    radial-gradient(circle at top right, rgba(160, 112, 64, 0.12), transparent 42%);
}

.club-dashboard-kicker {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: rgba(24, 70, 54, 0.1);
  color: var(--primary-strong);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.club-dashboard-card-link,
.club-dashboard-item-link {
  color: inherit;
  text-decoration: none;
}

.club-dashboard-card-link:hover,
.club-dashboard-item-link:hover {
  text-decoration: underline;
}

.club-dashboard-value-link {
  display: inline-block;
}

.club-dashboard-empty {
  padding: 1.25rem 1.5rem;
}

.club-dashboard-title {
  margin: 0.75rem 0 0.35rem;
  font-size: 2rem;
}

.club-dashboard-subtitle {
  margin: 0;
  max-width: 64ch;
  color: var(--text-secondary);
}

.club-dashboard-quick-links {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.club-dashboard-quick-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(24, 70, 54, 0.08);
  border-radius: 14px;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 600;
}

.quick-link-icon {
  font-size: 1.2rem;
}

.club-dashboard-section {
  margin-bottom: 1.25rem;
}

.club-dashboard-spotlight {
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
  background:
    linear-gradient(135deg, rgba(24, 70, 54, 0.05), rgba(160, 112, 64, 0.06)),
    rgba(255, 255, 255, 0.96);
}

.club-dashboard-spotlight-note {
  margin: 0;
  color: var(--text-secondary);
}

.club-dashboard-spotlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
}

.club-dashboard-spotlight-card {
  padding: 1rem;
  border-radius: 16px;
  border: 1px solid rgba(24, 70, 54, 0.08);
  background: rgba(255, 255, 255, 0.92);
}

.club-dashboard-spotlight-topline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.club-dashboard-spotlight-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--primary-strong);
}

.club-dashboard-spotlight-meta {
  margin: 0 0 0.65rem;
  color: var(--text-secondary);
  font-size: 0.92rem;
}

.club-dashboard-spotlight-list {
  margin: 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.35rem;
  color: var(--text-primary);
}

.club-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.club-dashboard-card {
  padding: 1.1rem;
  border-top: 4px solid transparent;
}

.club-dashboard-card h4 {
  margin-top: 0;
  margin-bottom: 0.65rem;
}

.club-dashboard-value {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.club-dashboard-meta {
  margin: 0.35rem 0 0;
  color: var(--text-secondary);
}

.club-dashboard-list {
  margin: 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.45rem;
  color: var(--text-secondary);
}

.club-dashboard-item-personal {
  background: rgba(214, 110, 160, 0.14);
  border: 1px solid rgba(214, 110, 160, 0.24);
  border-radius: 10px;
  padding: 0.35rem 0.55rem;
  color: var(--text-primary);
}

.accent-amber {
  border-top-color: #d6961c;
}

.accent-red {
  border-top-color: #cf5454;
}

.accent-blue {
  border-top-color: #3d76c4;
}

.accent-green {
  border-top-color: #2f7a5f;
}

.accent-neutral {
  border-top-color: rgba(24, 70, 54, 0.28);
}

.welcome-section {
  margin-bottom: 2rem;
}

.welcome-card {
  text-align: center;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.05), rgba(160, 112, 64, 0.05));
  border: 1px solid rgba(76, 175, 80, 0.2);
}

.card-title {
  color: var(--primary-color);
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
}

.auth-message, .user-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.marketing {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  text-align: left;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.hero-title {
  font-size: 1.875rem;
  line-height: 1.3;
  text-align: center;
  margin: 0.25rem 0 0.25rem 0;
  color: var(--text-primary);
}

.hero-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 780px;
  text-align: center;
  margin: 0;
}

.hero-bullets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem 1rem;
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0 0;
  color: var(--text-secondary);
}

.seo-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(240px, 1fr);
  gap: 1.25rem;
  padding: 1.5rem;
  border: 1px solid rgba(47, 122, 95, 0.18);
  background: linear-gradient(180deg, rgba(47, 122, 95, 0.05), rgba(255, 255, 255, 0.96));
}

.seo-intro-copy h2,
.search-topic h2 {
  margin: 0 0 0.75rem 0;
  color: var(--text-primary);
  font-size: 1.35rem;
}

.seo-intro-copy p,
.search-topic p {
  margin: 0 0 0.9rem 0;
  color: var(--text-secondary);
  line-height: 1.65;
}

.seo-intro-copy p:last-child,
.search-topic p:last-child {
  margin-bottom: 0;
}

.topic-link,
.seo-hub-link {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
}

.topic-link:hover,
.seo-hub-link:hover {
  text-decoration: underline;
}

.seo-intro-points {
  display: grid;
  gap: 0.85rem;
  align-content: start;
}

.seo-hub {
  padding: 1.5rem;
}

.seo-hub-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem 1rem;
}

.seo-point {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border-color);
}

.seo-point strong {
  color: var(--primary-strong);
}

.seo-point span {
  color: var(--text-secondary);
  line-height: 1.45;
}

.search-topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.search-topic {
  padding: 1.35rem 1.25rem;
  border: 1px solid var(--border-color);
}

.message-text, .welcome-text {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 600px;
  margin: 0;
}

.auth-actions, .user-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

.auth-actions-top {
  justify-content: flex-end;
}

.user-avatar {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.avatar-icon {
  font-size: 2rem;
}

.btn-icon {
  margin-right: 0.375rem;
  font-size: 1rem;
}

/* Features Section */
.features-section {
  margin-top: 3rem;
}

.section-title {
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
  font-size: 1.5rem;
  font-weight: 600;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.feature-card {
  text-align: center;
  padding: 1.5rem 1.25rem;
  transition: var(--transition);
  border: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.feature-card:hover::before {
  transform: scaleX(1);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-heavy);
}

.feature-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  display: block;
}

.feature-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.75rem 0;
}

.feature-description {
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  font-size: 0.9rem;
}

/* How it works */
.how-it-works .steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.step {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 1rem;
  background: white;
}

.step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.step-title {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
}

.seo-copy .long-text {
  max-width: 900px;
  margin: 0 auto;
  color: var(--text-secondary);
  line-height: 1.7;
}

.seo-copy-secondary {
  margin-top: -0.5rem;
}

.faq details {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: white;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
}

.cta-bottom {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* Responsive Design */
@media (max-width: 768px) {
  .home-container {
    padding: 0 0.75rem;
  }

  .club-dashboard-hero {
    grid-template-columns: 1fr;
  }
  
  .welcome-card {
    margin: 0;
  }
  
  .card-title {
    font-size: 1.5rem;
  }

  .marketing {
    gap: 1.5rem;
  }

  .hero {
    align-items: stretch;
    text-align: left;
  }

  .hero-title,
  .hero-subtitle {
    text-align: left;
  }

  .hero-bullets {
    grid-template-columns: 1fr;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .seo-intro,
  .search-topic-grid {
    grid-template-columns: 1fr;
  }

  .seo-intro {
    padding: 1.15rem;
  }
  
  .feature-card {
    padding: 1.25rem 1rem;
  }
  
  .auth-actions, .user-actions {
    flex-direction: column;
    width: 100%;
    max-width: none;
  }

  .auth-actions-top {
    justify-content: stretch;
  }
  
  .btn-primary, .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .card-title {
    font-size: 1.375rem;
  }

  .hero-title {
    font-size: 1.55rem;
    line-height: 1.25;
  }

  .hero-subtitle,
  .seo-intro-copy p,
  .search-topic p,
  .seo-copy .long-text {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .seo-point,
  .search-topic,
  .feature-card,
  .faq details {
    padding-left: 0.95rem;
    padding-right: 0.95rem;
  }
  
  .section-title {
    font-size: 1.375rem;
  }
  
  .feature-icon {
    font-size: 2.25rem;
  }
  
  .user-avatar {
    width: 56px;
    height: 56px;
  }
  
  .avatar-icon {
    font-size: 1.75rem;
  }
}
</style>
