breakpilot-lehrer/website/app/admin/game/wizard/page.tsx

'use client'

/**
 * Breakpilot Drive - Test & Lern-Wizard
 *
 * Interaktiver Wizard zum Kennenlernen aller Breakpilot Drive Features:
 * - Game Dashboard Funktionen
 * - API Integration
 * - WebGL Embedding
 * - Quiz-System
 * - Lernniveau-Anpassung
 * - Statistiken & Leaderboards
 */

import { useState, useEffect, useCallback } from 'react'
import Link from 'next/link'

// ==============================================
// Types
// ==============================================

type StepStatus = 'pending' | 'active' | 'completed' | 'failed'

interface WizardStep {
  id: string
  name: string
  icon: string
  status: StepStatus
  testable?: boolean
}

interface TestResult {
  name: string
  status: 'passed' | 'failed' | 'pending'
  message: string
  details?: string
}

// ==============================================
// Constants
// ==============================================

const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:8000'
const GAME_URL = process.env.NEXT_PUBLIC_GAME_URL || 'http://localhost:3001'

const STEPS: WizardStep[] = [
  { id: 'welcome', name: 'Willkommen', icon: '🎮', status: 'pending' },
  { id: 'overview', name: 'Dashboard Uebersicht', icon: '📊', status: 'pending' },
  { id: 'stats', name: 'Statistiken', icon: '📈', status: 'pending' },
  { id: 'leaderboard', name: 'Leaderboard', icon: '🏆', status: 'pending' },
  { id: 'webgl', name: 'WebGL Embedding', icon: '🎯', status: 'pending', testable: true },
  { id: 'api', name: 'API Integration', icon: '🔌', status: 'pending', testable: true },
  { id: 'quiz', name: 'Quiz-System', icon: '❓', status: 'pending' },
  { id: 'learning', name: 'Lernniveau', icon: '📚', status: 'pending' },
  { id: 'summary', name: 'Zusammenfassung', icon: '✅', status: 'pending' },
]

const EDUCATION_CONTENT: Record<string, { title: string; content: string[]; tips?: string[] }> = {
  'welcome': {
    title: 'Willkommen bei Breakpilot Drive!',
    content: [
      'Breakpilot Drive ist ein **Endless Runner Lernspiel** fuer Schueler der Klassen 2-6.',
      'Das Spiel kombiniert Spielspass mit Lernen:',
      '• Fahre so weit wie moeglich',
      '• Beantworte Quiz-Fragen um Punkte zu sammeln',
      '• Das System passt sich automatisch an dein Lernniveau an',
      'In diesem Wizard lernst du alle Admin-Features kennen und testest die Integration.',
    ],
    tips: [
      'Das Spiel laeuft auf Port 3001 als Unity WebGL Build',
      'Die API-Endpoints sind unter /api/game/* verfuegbar',
    ],
  },
  'overview': {
    title: 'Das Game Dashboard',
    content: [
      'Das Dashboard unter **/admin/game** bietet drei Hauptbereiche:',
      '**1. Uebersicht-Tab:**',
      '• Statistik-Karten mit KPIs (Spieler, Sessions, Genauigkeit)',
      '• Top 5 Leaderboard',
      '• Schnellzugriff-Buttons',
      '**2. Spielen-Tab:**',
      '• Embedded WebGL Game im iframe',
      '• Direkt im Admin-Panel spielbar',
      '**3. Statistiken-Tab:**',
      '• Genauigkeit nach Fach',
      '• Aktivitaets-Feed',
      '• Lernniveau-Verteilung',
    ],
    tips: [
      'Die Tabs sind oben im Dashboard als Buttons sichtbar',
      'Klicke auf "Aktualisieren" um die neuesten Daten zu laden',
    ],
  },
  'stats': {
    title: 'Statistiken verstehen',
    content: [
      'Die Statistik-Karten zeigen wichtige KPIs:',
      '**Aktive Spieler heute:** Anzahl der Spieler mit mindestens einer Session heute',
      '**Spielsessions:** Gesamtzahl aller abgeschlossenen Spielsessions',
      '**Quiz-Fragen beantwortet:** Kumulative Anzahl beantworteter Fragen',
      '**Durchschnittliche Genauigkeit:** Prozent der richtig beantworteten Fragen',
      '**Gesamte Spielzeit:** Summe aller Spielzeiten in Stunden',
      'Trends zeigen die Veraenderung zur Vorwoche.',
    ],
    tips: [
      'Gruene Trends = Verbesserung',
      'Rote Trends = Bereich mit Aufmerksamkeitsbedarf',
    ],
  },
  'leaderboard': {
    title: 'Leaderboard & Gamification',
    content: [
      'Das Leaderboard motiviert Schueler durch:',
      '**Ranking:** Top 5 Spieler nach Gesamtpunktzahl',
      '**Goldene Medaille:** Platz 1 ist besonders hervorgehoben',
      '**Genauigkeit:** Zeigt wie viele Fragen richtig beantwortet wurden',
      'Spaeter kommen hinzu:',
      '• Klassen-Ranglisten',
      '• Wochen/Monats-Ranglisten',
      '• Achievements & Badges',
    ],
    tips: [
      'Leaderboards koennen pro Klasse oder schulweit sein',
      'Datenschutz: Nur Vornamen + erster Buchstabe des Nachnamens werden gezeigt',
    ],
  },
  'webgl': {
    title: 'WebGL Embedding',
    content: [
      'Das Spiel wird als **Unity WebGL Build** eingebettet:',
      '**Technologie:**',
      '• Unity 6 (Version 6000.0)',
      '• Universal Render Pipeline (URP)',
      '• WebAssembly (WASM) fuer Performance',
      '**Embedding:**',
      '• Das Spiel laeuft in einem iframe auf Port 3001',
      '• Parameter wie ?embed=true optimieren fuer Einbettung',
      '• Fullscreen und Gamepad werden unterstuetzt',
      '**Wichtig:** Der Game-Container muss laufen:',
      '`docker-compose --profile game up -d`',
    ],
    tips: [
      'Bei Ladefehlern: Container-Status pruefen',
      'CORS muss korrekt konfiguriert sein',
    ],
  },
  'api': {
    title: 'API Integration',
    content: [
      'Die Game API stellt folgende Endpoints bereit:',
      '**GET /api/game/learning-level**',
      '→ Aktuelles Lernniveau des Spielers',
      '**GET /api/game/questions?difficulty=3&count=5**',
      '→ Quiz-Fragen basierend auf Schwierigkeit',
      '**POST /api/game/session**',
      '→ Spielsession speichern (Score, Zeit, Antworten)',
      '**GET /api/game/achievements**',
      '→ Freigeschaltete Achievements',
      '**GET /api/game/leaderboard?limit=10**',
      '→ Top-Spieler Rangliste',
    ],
    tips: [
      'Alle Endpoints erfordern JWT-Token in Produktion',
      'Im Dev-Modus ist Auth optional',
    ],
  },
  'quiz': {
    title: 'Das Quiz-System',
    content: [
      'Quiz-Fragen erscheinen waehrend des Spiels:',
      '**Quick-Modus (5 Sekunden):**',
      '• 2-3 Antwortmoeglichkeiten',
      '• Wird durch visuelle Trigger ausgeloest (Bruecke, Baum)',
      '• Schnelle Punkte bei richtiger Antwort',
      '**Pause-Modus (unbegrenzt):**',
      '• 4 Antwortmoeglichkeiten',
      '• Spieler kann nachdenken',
      '• Mehr Punkte moeglich',
      '**Faecher:** Mathematik, Deutsch, Englisch',
      '**LLM-Generierung:** Fragen werden dynamisch erstellt',
    ],
    tips: [
      'Fragen werden im Valkey-Cache gespeichert',
      'Schwierigkeit passt sich automatisch an',
    ],
  },
  'learning': {
    title: 'Adaptives Lernniveau',
    content: [
      'Das System passt sich automatisch an:',
      '**5 Lernstufen:**',
      '• Level 1: Klasse 2-3 (Beginner)',
      '• Level 2: Klasse 3-4 (Elementary)',
      '• Level 3: Klasse 4-5 (Intermediate)',
      '• Level 4: Klasse 5-6 (Advanced)',
      '• Level 5: Klasse 6+ (Expert)',
      '**Anpassung:**',
      '• ≥80% richtig ueber 10 Fragen → Level Up',
      '• <40% richtig ueber 5 Fragen → Level Down',
      '• Schwache Faecher werden identifiziert',
      '**State Engine:** Nutzt die bestehende Breakpilot State Machine',
    ],
    tips: [
      'Eltern sehen das Niveau ihrer Kinder im Dashboard',
      'Lehrer sehen Klassen-Durchschnitte',
    ],
  },
  'summary': {
    title: 'Zusammenfassung',
    content: [
      'Du hast alle Breakpilot Drive Features kennengelernt:',
      '✅ Dashboard mit Uebersicht, Spielen, Statistiken',
      '✅ Statistik-Karten und KPIs',
      '✅ Leaderboard & Gamification',
      '✅ WebGL Embedding',
      '✅ API Integration',
      '✅ Quiz-System mit Quick/Pause-Modus',
      '✅ Adaptives Lernniveau',
      '**Naechste Schritte:**',
      '• Teste das Dashboard unter /admin/game',
      '• Starte den Game-Container',
      '• Spiele eine Runde im "Spielen"-Tab',
    ],
    tips: [
      'Bei Fragen: Siehe docs/breakpilot-drive/README.md',
      'API-Doku: docs/breakpilot-drive/architecture.md',
    ],
  },
}

// ==============================================
// Components
// ==============================================

function WizardStepper({
  steps,
  currentStep,
  onStepClick
}: {
  steps: WizardStep[]
  currentStep: number
  onStepClick: (index: number) => void
}) {
  return (
    <div className="flex items-center justify-between mb-8 overflow-x-auto pb-4">
      {steps.map((step, index) => (
        <div key={step.id} className="flex items-center">
          <button
            onClick={() => onStepClick(index)}
            className={`flex flex-col items-center min-w-[80px] p-2 rounded-lg transition-colors ${
              index === currentStep
                ? 'bg-primary-100 text-primary-700'
                : step.status === 'completed'
                ? 'bg-green-100 text-green-700 cursor-pointer hover:bg-green-200'
                : step.status === 'failed'
                ? 'bg-red-100 text-red-700 cursor-pointer hover:bg-red-200'
                : 'text-slate-400 hover:bg-slate-100'
            }`}
          >
            <span className="text-2xl mb-1">{step.icon}</span>
            <span className="text-xs font-medium text-center">{step.name}</span>
            {step.status === 'completed' && <span className="text-xs text-green-600">✓</span>}
            {step.status === 'failed' && <span className="text-xs text-red-600">✗</span>}
          </button>
          {index < steps.length - 1 && (
            <div className={`h-0.5 w-8 mx-1 ${
              index < currentStep ? 'bg-green-400' : 'bg-slate-200'
            }`} />
          )}
        </div>
      ))}
    </div>
  )
}

function EducationCard({ stepId }: { stepId: string }) {
  const content = EDUCATION_CONTENT[stepId]
  if (!content) return null

  return (
    <div className="bg-primary-50 border border-primary-200 rounded-lg p-6 mb-6">
      <h3 className="text-lg font-semibold text-primary-800 mb-4 flex items-center">
        <span className="mr-2">📖</span>
        {content.title}
      </h3>
      <div className="space-y-2 text-primary-900">
        {content.content.map((line, index) => (
          <p
            key={index}
            className={`${line.startsWith('•') ? 'ml-4' : ''} ${line.startsWith('**') ? 'font-semibold mt-3' : ''}`}
            dangerouslySetInnerHTML={{
              __html: line
                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
                .replace(/`(.*?)`/g, '<code class="bg-primary-100 px-1 rounded">$1</code>')
            }}
          />
        ))}
      </div>
      {content.tips && content.tips.length > 0 && (
        <div className="mt-4 pt-4 border-t border-primary-200">
          <p className="text-sm font-semibold text-primary-700 mb-2">💡 Tipps:</p>
          {content.tips.map((tip, index) => (
            <p key={index} className="text-sm text-primary-700 ml-4">• {tip}</p>
          ))}
        </div>
      )}
    </div>
  )
}

function TestResultCard({ results }: { results: TestResult[] }) {
  return (
    <div className="bg-white border border-slate-200 rounded-lg p-4 mb-4">
      <h4 className="font-semibold text-slate-800 mb-3">Test-Ergebnisse</h4>
      <div className="space-y-2">
        {results.map((result, index) => (
          <div
            key={index}
            className={`flex items-center justify-between p-3 rounded-lg ${
              result.status === 'passed' ? 'bg-green-50' :
              result.status === 'failed' ? 'bg-red-50' : 'bg-slate-50'
            }`}
          >
            <div className="flex items-center gap-2">
              <span className={`text-lg ${
                result.status === 'passed' ? 'text-green-600' :
                result.status === 'failed' ? 'text-red-600' : 'text-slate-400'
              }`}>
                {result.status === 'passed' ? '✓' : result.status === 'failed' ? '✗' : '○'}
              </span>
              <div>
                <p className="font-medium text-slate-800">{result.name}</p>
                <p className="text-sm text-slate-600">{result.message}</p>
              </div>
            </div>
            {result.details && (
              <code className="text-xs bg-slate-100 px-2 py-1 rounded">{result.details}</code>
            )}
          </div>
        ))}
      </div>
    </div>
  )
}

function InteractiveDemo({ stepId }: { stepId: string }) {
  // Step-specific interactive demos
  if (stepId === 'stats') {
    return (
      <div className="bg-white border border-slate-200 rounded-lg p-4 mb-4">
        <h4 className="font-semibold text-slate-800 mb-3">Live-Vorschau: Statistik-Karten</h4>
        <div className="grid grid-cols-3 gap-4">
          {[
            { label: 'Aktive Spieler', value: '42', icon: '👥', color: 'blue' },
            { label: 'Genauigkeit', value: '78%', icon: '✓', color: 'green' },
            { label: 'Spielzeit', value: '156h', icon: '⏱️', color: 'purple' },
          ].map((stat) => (
            <div key={stat.label} className={`bg-${stat.color}-50 rounded-lg p-4 text-center`}>
              <span className="text-2xl">{stat.icon}</span>
              <p className="text-2xl font-bold mt-1">{stat.value}</p>
              <p className="text-sm text-slate-600">{stat.label}</p>
            </div>
          ))}
        </div>
      </div>
    )
  }

  if (stepId === 'leaderboard') {
    return (
      <div className="bg-white border border-slate-200 rounded-lg p-4 mb-4">
        <h4 className="font-semibold text-slate-800 mb-3">Live-Vorschau: Leaderboard</h4>
        <div className="space-y-2">
          {[
            { rank: 1, name: 'Max M.', score: 25000, color: 'yellow' },
            { rank: 2, name: 'Lisa K.', score: 23500, color: 'slate' },
            { rank: 3, name: 'Tim S.', score: 21000, color: 'orange' },
          ].map((entry) => (
            <div key={entry.rank} className="flex items-center justify-between py-2 border-b border-slate-100">
              <div className="flex items-center gap-3">
                <span className={`w-8 h-8 rounded-full bg-${entry.color}-100 flex items-center justify-center font-bold`}>
                  {entry.rank}
                </span>
                <span className="font-medium">{entry.name}</span>
              </div>
              <span className="text-slate-600">{entry.score.toLocaleString()} Punkte</span>
            </div>
          ))}
        </div>
      </div>
    )
  }

  if (stepId === 'learning') {
    return (
      <div className="bg-white border border-slate-200 rounded-lg p-4 mb-4">
        <h4 className="font-semibold text-slate-800 mb-3">Live-Vorschau: Lernniveau</h4>
        <div className="space-y-3">
          {[
            { subject: 'Mathematik', level: 3.2, color: 'blue' },
            { subject: 'Deutsch', level: 2.8, color: 'green' },
            { subject: 'Englisch', level: 3.5, color: 'purple' },
          ].map((item) => (
            <div key={item.subject}>
              <div className="flex justify-between text-sm mb-1">
                <span>{item.subject}</span>
                <span className="font-medium">Level {item.level.toFixed(1)}</span>
              </div>
              <div className="h-3 bg-slate-100 rounded-full overflow-hidden">
                <div
                  className={`h-full bg-${item.color}-500 rounded-full`}
                  style={{ width: `${(item.level / 5) * 100}%` }}
                />
              </div>
            </div>
          ))}
        </div>
      </div>
    )
  }

  return null
}

// ==============================================
// Main Component
// ==============================================

export default function GameWizardPage() {
  const [currentStep, setCurrentStep] = useState(0)
  const [steps, setSteps] = useState<WizardStep[]>(STEPS)
  const [testResults, setTestResults] = useState<TestResult[]>([])
  const [isLoading, setIsLoading] = useState(false)

  const currentStepData = steps[currentStep]
  const isWelcome = currentStepData?.id === 'welcome'
  const isSummary = currentStepData?.id === 'summary'

  // Test functions
  const runWebGLTest = useCallback(async () => {
    setIsLoading(true)
    const results: TestResult[] = []

    // Test 1: Game URL erreichbar
    try {
      const response = await fetch(GAME_URL, { mode: 'no-cors' })
      results.push({
        name: 'Game Server Erreichbarkeit',
        status: 'passed',
        message: 'Der Game-Server antwortet',
        details: GAME_URL,
      })
    } catch {
      results.push({
        name: 'Game Server Erreichbarkeit',
        status: 'failed',
        message: 'Game-Server nicht erreichbar. Container gestartet?',
        details: 'docker-compose --profile game up -d',
      })
    }

    // Test 2: Iframe simulieren
    results.push({
      name: 'Iframe Embedding',
      status: 'passed',
      message: 'Iframe-Einbettung ist konfiguriert',
      details: '?embed=true',
    })

    setTestResults(results)
    setIsLoading(false)

    // Update step status
    const allPassed = results.every(r => r.status === 'passed')
    setSteps(prev => prev.map(s =>
      s.id === 'webgl' ? { ...s, status: allPassed ? 'completed' : 'failed' } : s
    ))
  }, [])

  const runAPITest = useCallback(async () => {
    setIsLoading(true)
    const results: TestResult[] = []

    // Test 1: Learning Level API
    try {
      const response = await fetch(`${BACKEND_URL}/api/game/learning-level?user_id=test-user`)
      if (response.ok) {
        const data = await response.json()
        results.push({
          name: 'Learning Level Endpoint',
          status: 'passed',
          message: 'API antwortet korrekt',
          details: `Level: ${data.overall_level || 'Mock'}`,
        })
      } else {
        results.push({
          name: 'Learning Level Endpoint',
          status: 'failed',
          message: `HTTP ${response.status}`,
        })
      }
    } catch {
      results.push({
        name: 'Learning Level Endpoint',
        status: 'failed',
        message: 'Backend nicht erreichbar',
        details: 'docker-compose up -d backend',
      })
    }

    // Test 2: Questions API
    try {
      const response = await fetch(`${BACKEND_URL}/api/game/questions?difficulty=3&count=2`)
      if (response.ok) {
        const data = await response.json()
        results.push({
          name: 'Questions Endpoint',
          status: 'passed',
          message: 'Quiz-Fragen API funktioniert',
          details: `${data.questions?.length || 0} Fragen`,
        })
      } else {
        results.push({
          name: 'Questions Endpoint',
          status: 'failed',
          message: `HTTP ${response.status}`,
        })
      }
    } catch {
      results.push({
        name: 'Questions Endpoint',
        status: 'failed',
        message: 'Endpoint nicht erreichbar',
      })
    }

    // Test 3: Leaderboard API
    try {
      const response = await fetch(`${BACKEND_URL}/api/game/leaderboard?limit=5`)
      if (response.ok) {
        results.push({
          name: 'Leaderboard Endpoint',
          status: 'passed',
          message: 'Leaderboard API funktioniert',
        })
      } else {
        results.push({
          name: 'Leaderboard Endpoint',
          status: 'failed',
          message: `HTTP ${response.status}`,
        })
      }
    } catch {
      results.push({
        name: 'Leaderboard Endpoint',
        status: 'failed',
        message: 'Endpoint nicht erreichbar',
      })
    }

    setTestResults(results)
    setIsLoading(false)

    // Update step status
    const passedCount = results.filter(r => r.status === 'passed').length
    setSteps(prev => prev.map(s =>
      s.id === 'api' ? { ...s, status: passedCount >= 2 ? 'completed' : 'failed' } : s
    ))
  }, [])

  const goToNext = () => {
    if (currentStep < steps.length - 1) {
      setSteps(prev => prev.map((step, idx) =>
        idx === currentStep && step.status === 'pending'
          ? { ...step, status: 'completed' }
          : step
      ))
      setCurrentStep(prev => prev + 1)
      setTestResults([])
    }
  }

  const goToPrev = () => {
    if (currentStep > 0) {
      setCurrentStep(prev => prev - 1)
      setTestResults([])
    }
  }

  const handleStepClick = (index: number) => {
    setCurrentStep(index)
    setTestResults([])
  }

  return (
    <div className="min-h-screen bg-slate-100 py-8">
      <div className="max-w-4xl mx-auto px-4">
        {/* Header */}
        <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-2xl font-bold text-slate-800">🎮 Breakpilot Drive - Lern-Wizard</h1>
              <p className="text-slate-600 mt-1">
                Interaktive Tour durch alle Game-Features
              </p>
            </div>
            <Link
              href="/admin/game"
              className="text-primary-600 hover:text-primary-800 text-sm"
            >
              ← Zurueck zum Dashboard
            </Link>
          </div>
        </div>

        {/* Stepper */}
        <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
          <WizardStepper
            steps={steps}
            currentStep={currentStep}
            onStepClick={handleStepClick}
          />
        </div>

        {/* Content */}
        <div className="bg-white rounded-lg shadow-lg p-6">
          {/* Step Header */}
          <div className="flex items-center mb-6">
            <span className="text-4xl mr-4">{currentStepData?.icon}</span>
            <div>
              <h2 className="text-xl font-bold text-slate-800">
                Schritt {currentStep + 1}: {currentStepData?.name}
              </h2>
              <p className="text-slate-500 text-sm">
                {currentStep + 1} von {steps.length}
              </p>
            </div>
          </div>

          {/* Education Card */}
          <EducationCard stepId={currentStepData?.id || ''} />

          {/* Interactive Demo */}
          <InteractiveDemo stepId={currentStepData?.id || ''} />

          {/* Test Section for testable steps */}
          {currentStepData?.testable && (
            <div className="mb-6">
              {testResults.length === 0 ? (
                <div className="text-center py-6">
                  <button
                    onClick={currentStepData.id === 'webgl' ? runWebGLTest : runAPITest}
                    disabled={isLoading}
                    className={`px-6 py-3 rounded-lg font-medium transition-colors ${
                      isLoading
                        ? 'bg-slate-400 cursor-not-allowed'
                        : 'bg-green-600 text-white hover:bg-green-700'
                    }`}
                  >
                    {isLoading ? '⏳ Tests laufen...' : '🧪 Integration testen'}
                  </button>
                </div>
              ) : (
                <TestResultCard results={testResults} />
              )}
            </div>
          )}

          {/* Welcome Start Button */}
          {isWelcome && (
            <div className="text-center py-8">
              <button
                onClick={goToNext}
                className="bg-primary-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-primary-700 transition-colors"
              >
                🚀 Tour starten
              </button>
            </div>
          )}

          {/* Summary Actions */}
          {isSummary && (
            <div className="text-center py-6 space-y-4">
              <div className="flex justify-center gap-4">
                <Link
                  href="/admin/game"
                  className="px-6 py-3 bg-primary-600 text-white rounded-lg font-medium hover:bg-primary-700 transition-colors"
                >
                  📊 Zum Dashboard
                </Link>
                <button
                  onClick={() => {
                    setCurrentStep(0)
                    setSteps(STEPS.map(s => ({ ...s, status: 'pending' })))
                  }}
                  className="px-6 py-3 bg-slate-200 text-slate-700 rounded-lg font-medium hover:bg-slate-300 transition-colors"
                >
                  🔄 Wizard neu starten
                </button>
              </div>
            </div>
          )}

          {/* Navigation */}
          {!isWelcome && (
            <div className="flex justify-between mt-8 pt-6 border-t">
              <button
                onClick={goToPrev}
                disabled={currentStep === 0}
                className={`px-6 py-2 rounded-lg transition-colors ${
                  currentStep === 0
                    ? 'bg-slate-200 text-slate-400 cursor-not-allowed'
                    : 'bg-slate-200 text-slate-700 hover:bg-slate-300'
                }`}
              >
                ← Zurueck
              </button>

              {!isSummary && (
                <button
                  onClick={goToNext}
                  className="bg-primary-600 text-white px-6 py-2 rounded-lg hover:bg-primary-700 transition-colors"
                >
                  Weiter →
                </button>
              )}
            </div>
          )}
        </div>

        {/* Footer Info */}
        <div className="text-center text-slate-500 text-sm mt-6">
          Breakpilot Drive - Endless Runner Lernspiel fuer Klasse 2-6
        </div>
      </div>
    </div>
  )
}