import { useState, useEffect, useRef, useCallback } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  Wallet, Users, History, Landmark, Plus, Minus, Send,
  ArrowRightLeft, TrendingUp, Zap, ChevronRight, X, Check,
  CreditCard, DollarSign, Activity, Shield
} from "lucide-react";

const STARTING_BALANCE = 1500;
const NEON_GREEN = "#00ff9d";
const NEON_CYAN = "#00e5ff";
const GOLD = "#ffd700";

const formatMoney = (amount) =>
  new Intl.NumberFormat("de-DE", { style: "currency", currency: "USD", maximumFractionDigits: 0 }).format(amount);

const GlowCard = ({ children, className = "", accent = "green", onClick, hover = true }) => {
  const accents = {
    green: "border-emerald-500/30 hover:border-emerald-400/60 hover:shadow-emerald-500/20",
    cyan: "border-cyan-500/30 hover:border-cyan-400/60 hover:shadow-cyan-500/20",
    gold: "border-yellow-500/30 hover:border-yellow-400/60 hover:shadow-yellow-500/20",
    red: "border-red-500/30 hover:border-red-400/60 hover:shadow-red-500/20",
  };
  return (
    <div
      onClick={onClick}
      className={`
        relative rounded-2xl border backdrop-blur-xl bg-black/40
        transition-all duration-300 shadow-xl
        ${hover ? `${accents[accent]} hover:shadow-2xl cursor-pointer` : `${accents[accent]}`}
        ${className}
      `}
      style={{ background: "linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(10,20,15,0.8) 100%)" }}
    >
      {children}
    </div>
  );
};

const NeonButton = ({ children, onClick, variant = "green", size = "md", disabled = false, className = "" }) => {
  const variants = {
    green: "bg-emerald-500/20 border-emerald-400/50 text-emerald-300 hover:bg-emerald-500/40 hover:border-emerald-300 hover:shadow-emerald-500/40",
    cyan: "bg-cyan-500/20 border-cyan-400/50 text-cyan-300 hover:bg-cyan-500/40 hover:border-cyan-300 hover:shadow-cyan-500/40",
    gold: "bg-yellow-500/20 border-yellow-400/50 text-yellow-300 hover:bg-yellow-500/40 hover:border-yellow-300 hover:shadow-yellow-500/40",
    red: "bg-red-500/20 border-red-400/50 text-red-300 hover:bg-red-500/40 hover:border-red-300 hover:shadow-red-500/40",
    ghost: "bg-white/5 border-white/10 text-white/70 hover:bg-white/10 hover:border-white/20",
  };
  const sizes = {
    sm: "px-3 py-1.5 text-xs",
    md: "px-4 py-2 text-sm",
    lg: "px-6 py-3 text-base",
  };
  return (
    <motion.button
      whileTap={{ scale: 0.95 }}
      whileHover={{ scale: 1.02 }}
      onClick={onClick}
      disabled={disabled}
      className={`
        border rounded-xl font-semibold tracking-wider transition-all duration-200
        hover:shadow-lg disabled:opacity-40 disabled:cursor-not-allowed
        ${variants[variant]} ${sizes[size]} ${className}
      `}
    >
      {children}
    </motion.button>
  );
};

const NeonInput = ({ value, onChange, placeholder, type = "text", className = "" }) => (
  <input
    type={type}
    value={value}
    onChange={onChange}
    placeholder={placeholder}
    className={`
      w-full bg-black/50 border border-emerald-500/20 rounded-xl px-4 py-2.5
      text-white placeholder-white/30 text-sm
      focus:outline-none focus:border-emerald-400/60 focus:bg-black/70
      transition-all duration-200 backdrop-blur-sm
      ${className}
    `}
  />
);

const NeonSelect = ({ value, onChange, children, className = "" }) => (
  <select
    value={value}
    onChange={onChange}
    className={`
      w-full bg-black/50 border border-emerald-500/20 rounded-xl px-4 py-2.5
      text-white text-sm focus:outline-none focus:border-emerald-400/60
      transition-all duration-200 backdrop-blur-sm appearance-none cursor-pointer
      ${className}
    `}
  >
    {children}
  </select>
);

const StatCard = ({ icon: Icon, label, value, accent = "green", delay = 0 }) => {
  const colors = {
    green: { text: "text-emerald-400", bg: "bg-emerald-500/10", glow: "shadow-emerald-500/20" },
    cyan: { text: "text-cyan-400", bg: "bg-cyan-500/10", glow: "shadow-cyan-500/20" },
    gold: { text: "text-yellow-400", bg: "bg-yellow-500/10", glow: "shadow-yellow-500/20" },
    purple: { text: "text-purple-400", bg: "bg-purple-500/10", glow: "shadow-purple-500/20" },
  };
  const c = colors[accent];
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay, duration: 0.5 }}
    >
      <GlowCard accent={accent} hover={false} className="p-5">
        <div className="flex items-center gap-4">
          <div className={`p-3 rounded-xl ${c.bg} shadow-lg ${c.glow}`}>
            <Icon className={`w-5 h-5 ${c.text}`} />
          </div>
          <div>
            <p className="text-white/40 text-xs tracking-widest uppercase font-medium">{label}</p>
            <p className={`text-xl font-bold mt-0.5 ${c.text}`}>{value}</p>
          </div>
        </div>
      </GlowCard>
    </motion.div>
  );
};

const PlayerCard = ({ player, onAdjust, onRemove, index }) => {
  const isRich = player.balance >= 2000;
  const isPoor = player.balance < 500;
  const balanceColor = isRich ? "text-emerald-400" : isPoor ? "text-red-400" : "text-cyan-300";

  return (
    <motion.div
      initial={{ opacity: 0, x: -20 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ delay: index * 0.08, duration: 0.4 }}
      layout
    >
      <GlowCard accent={isRich ? "green" : isPoor ? "red" : "cyan"} className="p-5 group">
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-3">
            <div className="relative">
              <div className="w-10 h-10 rounded-full bg-gradient-to-br from-emerald-500/30 to-cyan-500/30 border border-emerald-400/30 flex items-center justify-center">
                <span className="text-white font-bold text-sm">{player.name.charAt(0).toUpperCase()}</span>
              </div>
              <div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full bg-emerald-400 border-2 border-black"></div>
            </div>
            <div>
              <p className="text-white font-semibold text-sm">{player.name}</p>
              <p className="text-white/30 text-xs">ID: #{String(player.id).padStart(4, "0")}</p>
            </div>
          </div>
          <button
            onClick={() => onRemove(player.id)}
            className="opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-red-500/20 rounded-lg"
          >
            <X className="w-4 h-4 text-red-400" />
          </button>
        </div>

        <div className="mb-4">
          <p className="text-white/30 text-xs tracking-widest uppercase mb-1">Kontostand</p>
          <p className={`text-2xl font-bold tabular-nums tracking-tight ${balanceColor}`}>
            {formatMoney(player.balance)}
          </p>
        </div>

        <div className="flex gap-2">
          <NeonButton
            variant="green"
            size="sm"
            onClick={() => onAdjust(player.id, 100)}
            className="flex-1 flex items-center justify-center gap-1"
          >
            <Plus className="w-3 h-3" /> $100
          </NeonButton>
          <NeonButton
            variant="green"
            size="sm"
            onClick={() => onAdjust(player.id, 50)}
            className="flex-1 flex items-center justify-center gap-1"
          >
            <Plus className="w-3 h-3" /> $50
          </NeonButton>
          <NeonButton
            variant="red"
            size="sm"
            onClick={() => onAdjust(player.id, -100)}
            className="flex-1 flex items-center justify-center gap-1"
          >
            <Minus className="w-3 h-3" /> $100
          </NeonButton>
        </div>
      </GlowCard>
    </motion.div>
  );
};

const TransactionItem = ({ tx, index }) => {
  const isBank = tx.from === "Bank" || tx.to === "Bank";
  return (
    <motion.div
      initial={{ opacity: 0, x: 20 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ delay: index * 0.05 }}
      className="flex items-start gap-3 p-3 rounded-xl bg-white/5 border border-white/5 hover:border-emerald-500/20 transition-all duration-200"
    >
      <div className={`mt-0.5 p-1.5 rounded-lg ${isBank ? "bg-yellow-500/20" : "bg-cyan-500/20"}`}>
        {isBank ? <Landmark className="w-3 h-3 text-yellow-400" /> : <ArrowRightLeft className="w-3 h-3 text-cyan-400" />}
      </div>
      <div className="flex-1 min-w-0">
        <div className="flex items-center justify-between gap-2">
          <span className="text-white/80 text-xs font-medium truncate">
            {tx.from} → {tx.to}
          </span>
          <span className="text-emerald-400 text-xs font-bold whitespace-nowrap shrink-0">
            {formatMoney(tx.amount)}
          </span>
        </div>
        <p className="text-white/25 text-xs mt-0.5">{tx.time}</p>
      </div>
    </motion.div>
  );
};

export default function MonopolyBank() {
  const [players, setPlayers] = useState([
    { id: 1, name: "Alice", balance: 1500 },
    { id: 2, name: "Bob", balance: 1500 },
  ]);
  const [transactions, setTransactions] = useState([
    { id: 1, from: "Bank", to: "Alice", amount: 1500, time: "Spielstart" },
    { id: 2, from: "Bank", to: "Bob", amount: 1500, time: "Spielstart" },
  ]);
  const [newPlayerName, setNewPlayerName] = useState("");
  const [transferFrom, setTransferFrom] = useState("");
  const [transferTo, setTransferTo] = useState("");
  const [transferAmount, setTransferAmount] = useState("");
  const [toast, setToast] = useState(null);
  const [activeTab, setActiveTab] = useState("players");
  const nextId = useRef(3);

  const totalMoney = players.reduce((s, p) => s + p.balance, 0);

  const showToast = (msg, type = "success") => {
    setToast({ msg, type });
    setTimeout(() => setToast(null), 2800);
  };

  const addPlayer = () => {
    const name = newPlayerName.trim();
    if (!name) return showToast("Bitte Namen eingeben", "error");
    if (players.find(p => p.name.toLowerCase() === name.toLowerCase()))
      return showToast("Spieler bereits vorhanden", "error");
    const player = { id: nextId.current++, name, balance: STARTING_BALANCE };
    setPlayers(prev => [...prev, player]);
    setTransactions(prev => [
      { id: Date.now(), from: "Bank", to: name, amount: STARTING_BALANCE, time: new Date().toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit", second: "2-digit" }) },
      ...prev,
    ]);
    setNewPlayerName("");
    showToast(`${name} hat ${formatMoney(STARTING_BALANCE)} erhalten`);
  };

  const removePlayer = (id) => {
    const player = players.find(p => p.id === id);
    if (!player) return;
    setPlayers(prev => prev.filter(p => p.id !== id));
    showToast(`${player.name} wurde entfernt`, "error");
  };

  const adjustBalance = useCallback((id, delta) => {
    const player = players.find(p => p.id === id);
    if (!player) return;
    if (player.balance + delta < 0) return showToast("Nicht genug Geld!", "error");
    
    setPlayers(prev => prev.map(p => p.id === id ? { ...p, balance: p.balance + delta } : p));
    
    const desc = delta > 0 ? "Bank" : player.name;
    const dest = delta > 0 ? player.name : "Bank";
    setTransactions(prev => [
      { 
        id: Date.now(), 
        from: desc, 
        to: dest, 
        amount: Math.abs(delta), 
        time: new Date().toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit", second: "2-digit" }) 
      },
      ...prev,
    ]);
  }, [players]);

  const transfer = useCallback(() => {
    const amount = parseInt(transferAmount);
    
    if (!transferFrom || !transferTo) {
      return showToast("Bitte Sender und Empfänger auswählen", "error");
    }
    if (transferFrom === transferTo) {
      return showToast("Sender und Empfänger müssen unterschiedlich sein", "error");
    }
    if (!amount || amount <= 0 || isNaN(amount)) {
      return showToast("Bitte einen gültigen Betrag eingeben", "error");
    }
    
    const sender = players.find(p => String(p.id) === String(transferFrom));
    const receiver = players.find(p => String(p.id) === String(transferTo));
    
    if (!sender || !receiver) {
      return showToast("Spieler nicht gefunden", "error");
    }
    if (sender.balance < amount) {
      return showToast(`${sender.name} hat nicht genug Guthaben!`, "error");
    }
    
    setPlayers(prev => prev.map(p => {
      if (String(p.id) === String(transferFrom)) {
        return { ...p, balance: p.balance - amount };
      }
      if (String(p.id) === String(transferTo)) {
        return { ...p, balance: p.balance + amount };
      }
      return p;
    }));
    
    setTransactions(prev => [
      { 
        id: Date.now(), 
        from: sender.name, 
        to: receiver.name, 
        amount: amount, 
        time: new Date().toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit", second: "2-digit" }) 
      },
      ...prev,
    ]);
    
    setTransferAmount("");
    showToast(`${formatMoney(amount)} von ${sender.name} an ${receiver.name} transferiert`);
  }, [transferFrom, transferTo, transferAmount, players]);

  const tabs = [
    { id: "players", label: "Spieler", icon: Users },
    { id: "transfer", label: "Transfer", icon: Send },
    { id: "history", label: "Verlauf", icon: History },
  ];

  return (
    <div
      className="min-h-screen text-white font-mono"
      style={{
        background: "radial-gradient(ellipse 80% 60% at 50% -20%, rgba(0,255,157,0.08) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 80%, rgba(0,229,255,0.06) 0%, transparent 50%), #050a07",
        fontFamily: "'Courier New', monospace",
      }}
    >
      {/* Animated background grid */}
      <div className="fixed inset-0 pointer-events-none opacity-5" style={{
        backgroundImage: "linear-gradient(rgba(0,255,157,0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,157,0.3) 1px, transparent 1px)",
        backgroundSize: "60px 60px",
      }} />

      {/* Toast */}
      <AnimatePresence>
        {toast && (
          <motion.div
            initial={{ opacity: 0, y: -20, scale: 0.9 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: -20, scale: 0.9 }}
            className="fixed top-6 left-1/2 -translate-x-1/2 z-50"
          >
            <div className={`
              flex items-center gap-2 px-5 py-3 rounded-2xl border backdrop-blur-xl text-sm font-semibold shadow-2xl
              ${toast.type === "error"
                ? "bg-red-500/20 border-red-400/40 text-red-300 shadow-red-500/20"
                : "bg-emerald-500/20 border-emerald-400/40 text-emerald-300 shadow-emerald-500/30"
              }
            `}>
              {toast.type === "error" ? <X className="w-4 h-4" /> : <Check className="w-4 h-4" />}
              {toast.msg}
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      <div className="max-w-7xl mx-auto px-4 py-6 lg:py-8">

        {/* Header */}
        <motion.header
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          className="flex items-center justify-between mb-8"
        >
          <div className="flex items-center gap-3">
            <div className="relative">
              <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-emerald-500/30 to-cyan-500/20 border border-emerald-400/40 flex items-center justify-center shadow-lg shadow-emerald-500/20">
                <Landmark className="w-6 h-6 text-emerald-400" />
              </div>
              <div className="absolute -top-1 -right-1 w-3 h-3 rounded-full bg-emerald-400 animate-pulse" />
            </div>
            <div>
              <h1 className="text-xl font-bold tracking-widest text-white uppercase">
                <span style={{ color: NEON_GREEN }}>MONO</span>
                <span className="text-white/80">BANK</span>
              </h1>
              <p className="text-white/30 text-xs tracking-widest uppercase">Digital Banking System</p>
            </div>
          </div>
          <div className="flex items-center gap-2 px-4 py-2 rounded-xl bg-emerald-500/10 border border-emerald-500/20">
            <div className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
            <span className="text-emerald-400 text-xs font-bold tracking-widest uppercase">AKTIV</span>
          </div>
        </motion.header>

        {/* Stats */}
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-8">
          <StatCard icon={Users} label="Spieler" value={players.length} accent="green" delay={0} />
          <StatCard icon={DollarSign} label="Gesamt" value={formatMoney(totalMoney)} accent="gold" delay={0.1} />
          <StatCard icon={Activity} label="Transaktionen" value={transactions.length} accent="cyan" delay={0.2} />
          <StatCard icon={Shield} label="Bankstatus" value="Gesichert" accent="purple" delay={0.3} />
        </div>

        <div className="flex flex-col lg:flex-row gap-6">

          {/* Main Panel */}
          <div className="flex-1 min-w-0">

            {/* Add Player */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.4 }}
              className="mb-6"
            >
              <GlowCard accent="cyan" hover={false} className="p-5">
                <div className="flex items-center gap-2 mb-4">
                  <Plus className="w-4 h-4 text-cyan-400" />
                  <h2 className="text-sm font-bold tracking-widest uppercase text-white/70">Spieler hinzufügen</h2>
                </div>
                <div className="flex gap-3">
                  <NeonInput
                    value={newPlayerName}
                    onChange={e => setNewPlayerName(e.target.value)}
                    placeholder="Spielername eingeben…"
                    className="flex-1"
                    onKeyPress={e => e.key === 'Enter' && addPlayer()}
                  />
                  <NeonButton
                    variant="cyan"
                    onClick={addPlayer}
                    className="flex items-center gap-2 whitespace-nowrap"
                  >
                    <Plus className="w-4 h-4" />
                    <span className="hidden sm:inline">Hinzufügen</span>
                    <span className="sm:hidden">+</span>
                  </NeonButton>
                </div>
                <p className="text-white/25 text-xs mt-2">Startguthaben: {formatMoney(STARTING_BALANCE)} automatisch</p>
              </GlowCard>
            </motion.div>

            {/* Mobile tabs */}
            <div className="flex lg:hidden gap-1 mb-5 bg-black/40 p-1 rounded-2xl border border-white/10">
              {tabs.map(t => (
                <button
                  key={t.id}
                  onClick={() => setActiveTab(t.id)}
                  className={`flex-1 flex items-center justify-center gap-1.5 py-2 rounded-xl text-xs font-bold tracking-wider transition-all duration-200 ${
                    activeTab === t.id
                      ? "bg-emerald-500/20 text-emerald-300 border border-emerald-500/30"
                      : "text-white/40 hover:text-white/60"
                  }`}
                >
                  <t.icon className="w-3.5 h-3.5" />
                  {t.label}
                </button>
              ))}
            </div>

            {/* Transfer Panel */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.5 }}
              className={`mb-6 ${activeTab !== "transfer" ? "hidden lg:block" : ""}`}
            >
              <GlowCard accent="gold" hover={false} className="p-5">
                <div className="flex items-center gap-2 mb-4">
                  <ArrowRightLeft className="w-4 h-4 text-yellow-400" />
                  <h2 className="text-sm font-bold tracking-widest uppercase text-white/70">Geld transferieren</h2>
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                  <div>
                    <label className="text-white/30 text-xs tracking-widest uppercase mb-2 block">Von</label>
                    <NeonSelect value={transferFrom} onChange={e => setTransferFrom(e.target.value)}>
                      <option value="">— Sender —</option>
                      {players.map(p => (
                        <option key={p.id} value={p.id}>
                          {p.name} ({formatMoney(p.balance)})
                        </option>
                      ))}
                    </NeonSelect>
                  </div>
                  <div>
                    <label className="text-white/30 text-xs tracking-widest uppercase mb-2 block">An</label>
                    <NeonSelect value={transferTo} onChange={e => setTransferTo(e.target.value)}>
                      <option value="">— Empfänger —</option>
                      {players.map(p => (
                        <option key={p.id} value={p.id}>
                          {p.name} ({formatMoney(p.balance)})
                        </option>
                      ))}
                    </NeonSelect>
                  </div>
                  <div>
                    <label className="text-white/30 text-xs tracking-widest uppercase mb-2 block">Betrag ($)</label>
                    <NeonInput
                      type="number"
                      value={transferAmount}
                      onChange={e => setTransferAmount(e.target.value)}
                      placeholder="z.B. 200"
                      onKeyPress={e => e.key === 'Enter' && transfer()}
                    />
                  </div>
                </div>
                <div className="mt-4 flex justify-end">
                  <NeonButton
                    variant="gold"
                    size="md"
                    onClick={transfer}
                    className="flex items-center gap-2"
                  >
                    <Send className="w-4 h-4" />
                    Transfer senden
                  </NeonButton>
                </div>
              </GlowCard>
            </motion.div>

            {/* Players Grid */}
            <div className={activeTab !== "players" ? "hidden lg:block" : ""}>
              <div className="flex items-center gap-2 mb-4">
                <Wallet className="w-4 h-4 text-emerald-400" />
                <h2 className="text-sm font-bold tracking-widest uppercase text-white/70">Kontoübersicht</h2>
                <div className="ml-auto text-white/25 text-xs">{players.length} Spieler</div>
              </div>

              {players.length === 0 ? (
                <div className="text-center py-16 text-white/20">
                  <Users className="w-12 h-12 mx-auto mb-3 opacity-30" />
                  <p className="text-sm">Keine Spieler vorhanden</p>
                  <p className="text-xs mt-1">Füge oben einen Spieler hinzu</p>
                </div>
              ) : (
                <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4">
                  <AnimatePresence>
                    {players.map((player, i) => (
                      <PlayerCard 
                        key={player.id} 
                        player={player} 
                        onAdjust={adjustBalance}
                        onRemove={removePlayer}
                        index={i} 
                      />
                    ))}
                  </AnimatePresence>
                </div>
              )}
            </div>
          </div>

          {/* Sidebar – Transactions */}
          <div className={`lg:w-80 xl:w-96 ${activeTab !== "history" ? "hidden lg:block" : ""}`}>
            <div className="lg:sticky lg:top-6">
              <GlowCard accent="cyan" hover={false} className="p-5">
                <div className="flex items-center gap-2 mb-5">
                  <History className="w-4 h-4 text-cyan-400" />
                  <h2 className="text-sm font-bold tracking-widest uppercase text-white/70">Transaktionsverlauf</h2>
                  <div className="ml-auto flex items-center gap-1 text-xs text-emerald-400">
                    <Zap className="w-3 h-3" />
                    <span>Live</span>
                  </div>
                </div>

                <div
                  className="space-y-2 overflow-y-auto"
                  style={{
                    maxHeight: "calc(100vh - 280px)",
                    scrollbarWidth: "thin",
                    scrollbarColor: "rgba(0,255,157,0.3) transparent",
                  }}
                >
                  <AnimatePresence initial={false}>
                    {transactions.length === 0 ? (
                      <div className="text-center py-8 text-white/20">
                        <History className="w-8 h-8 mx-auto mb-2 opacity-30" />
                        <p className="text-xs">Keine Transaktionen</p>
                      </div>
                    ) : (
                      transactions.slice(0, 30).map((tx, i) => (
                        <TransactionItem key={tx.id} tx={tx} index={i} />
                      ))
                    )}
                  </AnimatePresence>
                </div>
              </GlowCard>
            </div>
          </div>
        </div>

        {/* Footer */}
        <footer className="mt-10 text-center">
          <p className="text-white/15 text-xs tracking-widest uppercase">
            MonoBank v2.0 · Digitales Monopoly-Bankingsystem
          </p>
        </footer>
      </div>
    </div>
  );
}