'use client';

import React, { useState } from 'react';
import SandboxDemo from '@/components/modules/sandbox/SandboxDemo';
import ScannerDemo from '@/components/modules/scanner/ScannerDemo';
import InsiderDemo from '@/components/modules/insider/InsiderDemo';
import CryptoDemo from '@/components/modules/crypto/CryptoDemo';
import EventsDemo from '@/components/modules/events/EventsDemo';
import { BarChart3, TrendingUp, ShieldAlert, Radio, Landmark, RefreshCw } from 'lucide-react';

export default function Home() {
  const [activeTab, setActiveTab] = useState<'sandbox' | 'scanner' | 'insider' | 'crypto' | 'events'>('sandbox');

  return (
    <div className="min-h-screen bg-[#070b13] text-slate-100 flex flex-col font-sans selection:bg-teal-500/30 selection:text-teal-200">
      {/* Background Decorative Blur Gradients */}
      <div className="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-blue-900/20 rounded-full blur-[140px] pointer-events-none -z-10" />
      <div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-teal-900/20 rounded-full blur-[140px] pointer-events-none -z-10" />

      {/* Main Header / Navigation */}
      <header className="border-b border-slate-900 bg-slate-950/80 backdrop-blur-md sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-gradient-to-tr from-teal-500 to-indigo-600 flex items-center justify-center shadow-lg shadow-teal-500/20">
              <TrendingUp className="w-6 h-6 text-slate-950 stroke-[2.5]" />
            </div>
            <div>
              <h1 className="text-xl font-bold bg-gradient-to-r from-teal-400 via-sky-300 to-indigo-400 bg-clip-text text-transparent">
                QuantSandbox &Ouml;konometrie
              </h1>
              <p className="text-[10px] text-slate-400 uppercase tracking-widest font-mono">KI-gestützte Investment-Sandbox</p>
            </div>
          </div>

          <div className="hidden md:flex items-center gap-6 text-xs text-slate-400">
            <div className="flex items-center gap-2 border-r border-slate-800 pr-4">
              <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
              <span>Verbindung aktiv</span>
            </div>
            <div className="flex items-center gap-1.5 font-mono">
              <span className="text-slate-500">Workspace:</span>
              <span className="text-slate-300 font-bold bg-slate-900 px-2 py-0.5 rounded border border-slate-800">investment-sandbox</span>
            </div>
          </div>
        </div>
      </header>

      {/* Hero Banner Section */}
      <section className="bg-slate-950/40 border-b border-slate-900 py-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6">
            <div className="space-y-2 max-w-2xl">
              <span className="px-2.5 py-1 rounded-full text-[10px] font-bold bg-teal-500/10 text-teal-400 border border-teal-500/20 uppercase tracking-widest">
                Scaffolding Version 1.0.0
              </span>
              <h2 className="text-3xl font-extrabold text-white tracking-tight sm:text-4xl">
                Statistische Investment-Analyse & Sandbox
              </h2>
              <p className="text-slate-400 text-sm leading-relaxed">
                Diese modulare Architektur bündelt fortgeschrittene &ouml;konometrische Modelle &ndash; von EWMA und GJR-GARCH Volatilit&auml;tsprognosen über Bayesianisches On-Chain-Lernen bis hin zu Überlebens- und LMM-Regressionsmodellen.
              </p>
            </div>

            <div className="flex flex-wrap gap-2 bg-slate-950/90 p-1.5 rounded-2xl border border-slate-800/80 w-full lg:w-auto">
              <button
                onClick={() => setActiveTab('sandbox')}
                className={`flex-1 lg:flex-none px-4 py-2.5 rounded-xl text-xs font-semibold flex items-center justify-center gap-2 transition-all ${activeTab === 'sandbox' ? 'bg-gradient-to-r from-teal-500 to-emerald-500 text-slate-950 font-bold shadow-lg shadow-teal-500/25' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-900/50'}`}
              >
                <TrendingUp className="w-4 h-4" /> Sandbox
              </button>
              <button
                onClick={() => setActiveTab('scanner')}
                className={`flex-1 lg:flex-none px-4 py-2.5 rounded-xl text-xs font-semibold flex items-center justify-center gap-2 transition-all ${activeTab === 'scanner' ? 'bg-gradient-to-r from-amber-500 to-orange-500 text-slate-950 font-bold shadow-lg shadow-amber-500/25' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-900/50'}`}
              >
                <ShieldAlert className="w-4 h-4" /> Scanner
              </button>
              <button
                onClick={() => setActiveTab('insider')}
                className={`flex-1 lg:flex-none px-4 py-2.5 rounded-xl text-xs font-semibold flex items-center justify-center gap-2 transition-all ${activeTab === 'insider' ? 'bg-gradient-to-r from-purple-500 to-indigo-500 text-white font-bold shadow-lg shadow-purple-500/25' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-900/50'}`}
              >
                <Radio className="w-4 h-4" /> Insider
              </button>
              <button
                onClick={() => setActiveTab('crypto')}
                className={`flex-1 lg:flex-none px-4 py-2.5 rounded-xl text-xs font-semibold flex items-center justify-center gap-2 transition-all ${activeTab === 'crypto' ? 'bg-gradient-to-r from-cyan-500 to-sky-500 text-slate-950 font-bold shadow-lg shadow-cyan-500/25' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-900/50'}`}
              >
                <BarChart3 className="w-4 h-4" /> Krypto Bayes
              </button>
              <button
                onClick={() => setActiveTab('events')}
                className={`flex-1 lg:flex-none px-4 py-2.5 rounded-xl text-xs font-semibold flex items-center justify-center gap-2 transition-all ${activeTab === 'events' ? 'bg-gradient-to-r from-rose-500 to-pink-500 text-slate-950 font-bold shadow-lg shadow-rose-500/25' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-900/50'}`}
              >
                <Landmark className="w-4 h-4" /> Ökonometrie
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Main Content Area */}
      <main className="flex-1 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 w-full">
        {/* Active Module Rendering */}
        <div className="transition-all duration-300 transform opacity-100 translate-y-0">
          {activeTab === 'sandbox' && <SandboxDemo />}
          {activeTab === 'scanner' && <ScannerDemo />}
          {activeTab === 'insider' && <InsiderDemo />}
          {activeTab === 'crypto' && <CryptoDemo />}
          {activeTab === 'events' && <EventsDemo />}
        </div>
      </main>

      {/* Footer */}
      <footer className="border-t border-slate-900 bg-slate-950/60 py-6 text-center text-xs text-slate-500 mt-auto">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row justify-between items-center gap-4">
          <p>&copy; 2026 QuantSandbox Inc. Alle Rechte vorbehalten.</p>
          <div className="flex items-center gap-4">
            <span className="flex items-center gap-1"><RefreshCw className="w-3.5 h-3.5 text-teal-400 animate-spin-slow" /> Zustand State Engine</span>
            <span>|</span>
            <span>Next.js App Router (TypeScript + Tailwind v4)</span>
          </div>
        </div>
      </footer>
    </div>
  );
}