import { useState, useEffect, useRef } from "react";

// ─── THEME ───────────────────────────────────────────────────────────────────
const T = {
  bg: "#0A0E1A",
  surface: "#111827",
  card: "#1A2235",
  border: "#1E2D45",
  gold: "#F0B429",
  goldLight: "#F7D070",
  goldDark: "#C98D00",
  green: "#10B981",
  red: "#EF4444",
  blue: "#3B82F6",
  purple: "#8B5CF6",
  cyan: "#06B6D4",
  text: "#F1F5F9",
  muted: "#64748B",
  sub: "#94A3B8",
};

// ─── MOCK DATA ────────────────────────────────────────────────────────────────
const mockUser = {
  name: "Alex Tumwine",
  username: "alex_t",
  phone: "0701234567",
  avatar: "AT",
  cuBalance: 42500,
  ugxBalance: 8500,
  notifications: 3,
};

const mockTransactions = [
  { id: 1, type: "deposit", label: "Wallet Deposit", amount: 50000, cu: 42500, date: "Today, 10:32 AM", status: "completed" },
  { id: 2, type: "queue", label: "Queue Commit", amount: -20000, cu: -20000, date: "Yesterday", status: "pending" },
  { id: 3, type: "sacco", label: "SACCO Savings", amount: -20000, cu: -20000, date: "Mon, Apr 21", status: "completed" },
  { id: 4, type: "reward", label: "Blogger Reward", amount: 5000, cu: 5000, date: "Sun, Apr 20", status: "completed" },
];

const mockQueue = [
  { id: 1, username: "james_k", committed: 85000, position: 1, progress: 92 },
  { id: 2, username: "sarah_m", committed: 50000, position: 2, progress: 65 },
  { id: 3, username: "alex_t", committed: 20000, position: 3, progress: 30, isMe: true },
  { id: 4, username: "grace_n", committed: 100000, position: 4, progress: 10 },
];

const mockBusinesses = [
  { id: 1, name: "Kampala Bakers Ltd", category: "Food & Beverage", status: "verified", loan: 500000, repaid: 320000 },
  { id: 2, name: "TechHub Uganda", category: "Technology", status: "pending", loan: 0, repaid: 0 },
];

const mockBloggers = [
  { id: 1, name: "Sarah Mukasa", platform: "Instagram", followers: "12.4K", posts: 8, rewards: 35000, status: "active" },
  { id: 2, name: "David Ojo", platform: "TikTok", followers: "45K", posts: 15, rewards: 82000, status: "active" },
  { id: 3, name: "Faith Apio", platform: "Twitter/X", followers: "8.2K", posts: 5, rewards: 18000, status: "review" },
];

const mockAds = [
  { id: 1, business: "Kampala Bakers", type: "image", expires: "23h 14m", views: 1240 },
  { id: 2, business: "TechHub UG", type: "video", expires: "8h 45m", views: 3870 },
];

const mockSacco = {
  joined: true,
  savings: 80000,
  loanEligible: 240000,
  activeLoan: 100000,
  loanRepaid: 40000,
  weeklyTarget: 20000,
  streak: 4,
};

// ─── UTILS ───────────────────────────────────────────────────────────────────
const fmtCU = (n) => n?.toLocaleString() + " CU";
const fmtUGX = (n) => "UGX " + n?.toLocaleString();
const fmtNum = (n) => n?.toLocaleString();

// ─── STYLES ──────────────────────────────────────────────────────────────────
const gbl = `
  @import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');
  *{box-sizing:border-box;margin:0;padding:0;}
  body{background:${T.bg};color:${T.text};font-family:'Sora',sans-serif;overflow:hidden;}
  ::-webkit-scrollbar{width:4px;}
  ::-webkit-scrollbar-track{background:${T.surface};}
  ::-webkit-scrollbar-thumb{background:${T.border};border-radius:2px;}
  .mono{font-family:'Space Mono',monospace;}
  @keyframes slideUp{from{transform:translateY(100%);opacity:0;}to{transform:translateY(0);opacity:1;}}
  @keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.5;}}
  @keyframes shimmer{0%{background-position:-200% 0;}100%{background-position:200% 0;}}
  @keyframes ringPop{0%{transform:scale(1);}50%{transform:scale(1.2);}100%{transform:scale(1);}}
  @keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}};
  .slide-up{animation:slideUp .35s cubic-bezier(.22,1,.36,1) forwards;}
  .fade-in{animation:fadeIn .3s ease forwards;}
  .ring-pop{animation:ringPop .4s ease;}
`;

// ─── COMPONENTS ──────────────────────────────────────────────────────────────

function Badge({ color = T.gold, children, small }) {
  return (
    <span style={{
      background: color + "22", color, border: `1px solid ${color}44`,
      borderRadius: 20, padding: small ? "2px 8px" : "4px 12px",
      fontSize: small ? 10 : 11, fontWeight: 600, letterSpacing: .5,
    }}>{children}</span>
  );
}

function Card({ children, style, onClick, glow }) {
  return (
    <div onClick={onClick} style={{
      background: T.card, border: `1px solid ${T.border}`,
      borderRadius: 16, padding: 16,
      boxShadow: glow ? `0 0 24px ${T.gold}22` : "0 2px 12px #00000044",
      cursor: onClick ? "pointer" : "default",
      transition: "all .2s", ...style,
    }}>{children}</div>
  );
}

function ProgressBar({ value, color = T.gold, height = 6 }) {
  return (
    <div style={{ background: T.border, borderRadius: 99, height, overflow: "hidden" }}>
      <div style={{
        width: `${Math.min(value, 100)}%`, height: "100%",
        background: `linear-gradient(90deg, ${color}, ${color}bb)`,
        borderRadius: 99, transition: "width .6s ease",
      }} />
    </div>
  );
}

function Avatar({ initials, size = 38, color = T.gold }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: "50%",
      background: `linear-gradient(135deg, ${color}33, ${color}11)`,
      border: `2px solid ${color}44`, display: "flex",
      alignItems: "center", justifyContent: "center",
      fontSize: size * .35, fontWeight: 700, color,
    }}>{initials}</div>
  );
}

function Divider({ style }) {
  return <div style={{ height: 1, background: T.border, margin: "12px 0", ...style }} />;
}

function Btn({ children, onClick, variant = "primary", small, full, disabled, style }) {
  const base = {
    border: "none", borderRadius: 12, fontFamily: "Sora, sans-serif",
    fontWeight: 600, cursor: disabled ? "not-allowed" : "pointer",
    transition: "all .2s", display: "flex", alignItems: "center",
    justifyContent: "center", gap: 6, opacity: disabled ? .5 : 1,
    padding: small ? "8px 16px" : "12px 20px",
    fontSize: small ? 12 : 14, width: full ? "100%" : "auto", ...style,
  };
  const variants = {
    primary: { background: `linear-gradient(135deg, ${T.gold}, ${T.goldDark})`, color: "#0A0E1A" },
    ghost: { background: "transparent", color: T.sub, border: `1px solid ${T.border}` },
    danger: { background: T.red + "22", color: T.red, border: `1px solid ${T.red}44` },
    success: { background: T.green + "22", color: T.green, border: `1px solid ${T.green}44` },
    blue: { background: T.blue + "22", color: T.blue, border: `1px solid ${T.blue}44` },
  };
  return <button style={{ ...base, ...variants[variant] }} onClick={onClick} disabled={disabled}>{children}</button>;
}

function Input({ label, placeholder, type = "text", value, onChange, icon }) {
  return (
    <div style={{ marginBottom: 14 }}>
      {label && <div style={{ fontSize: 12, color: T.muted, marginBottom: 6, fontWeight: 600, letterSpacing: .5 }}>{label}</div>}
      <div style={{ position: "relative" }}>
        {icon && <span style={{ position: "absolute", left: 14, top: "50%", transform: "translateY(-50%)", color: T.muted }}>{icon}</span>}
        <input
          type={type} value={value} onChange={e => onChange(e.target.value)}
          placeholder={placeholder}
          style={{
            width: "100%", background: T.surface, border: `1px solid ${T.border}`,
            borderRadius: 12, padding: icon ? "12px 14px 12px 40px" : "12px 14px",
            color: T.text, fontSize: 14, fontFamily: "Sora, sans-serif",
            outline: "none", transition: "border .2s",
          }}
        />
      </div>
    </div>
  );
}

// ─── AUTH SCREENS ─────────────────────────────────────────────────────────────

function LoginScreen({ onLogin }) {
  const [tab, setTab] = useState("login");
  const [form, setForm] = useState({ identifier: "", password: "", username: "", phone: "", confirm: "" });
  const [checking, setChecking] = useState(false);
  const [usernameOk, setUsernameOk] = useState(null);
  const [loading, setLoading] = useState(false);

  const checkUsername = (val) => {
    setForm(f => ({ ...f, username: val }));
    if (val.length > 2) {
      setChecking(true);
      setTimeout(() => {
        setUsernameOk(!["admin", "awish", "capitallock"].includes(val.toLowerCase()));
        setChecking(false);
      }, 600);
    } else setUsernameOk(null);
  };

  const handleSubmit = () => {
    setLoading(true);
    setTimeout(() => { setLoading(false); onLogin(); }, 1200);
  };

  return (
    <div style={{
      minHeight: "100vh", background: T.bg,
      display: "flex", flexDirection: "column", alignItems: "center",
      justifyContent: "center", padding: 24,
    }}>
      <style>{gbl}</style>
      {/* Logo */}
      <div style={{ textAlign: "center", marginBottom: 36 }}>
        <div style={{
          fontSize: 52, marginBottom: 8,
          filter: "drop-shadow(0 0 20px #F0B42966)",
        }}>🔒</div>
        <div style={{ fontSize: 28, fontWeight: 800, letterSpacing: -1, color: T.gold }}>CAPITAL LOCK</div>
        <div style={{ fontSize: 12, color: T.muted, letterSpacing: 3, marginTop: 4 }}>BY AWISH</div>
      </div>

      <div style={{ width: "100%", maxWidth: 380 }}>
        {/* Tabs */}
        <div style={{ display: "flex", background: T.surface, borderRadius: 12, padding: 4, marginBottom: 24 }}>
          {["login", "register"].map(t => (
            <button key={t} onClick={() => setTab(t)} style={{
              flex: 1, padding: "10px", borderRadius: 10, border: "none", cursor: "pointer",
              background: tab === t ? T.gold : "transparent",
              color: tab === t ? "#0A0E1A" : T.muted,
              fontFamily: "Sora", fontWeight: 600, fontSize: 13,
              transition: "all .2s", textTransform: "capitalize",
            }}>{t}</button>
          ))}
        </div>

        {tab === "login" ? (
          <div className="fade-in">
            <Input label="USERNAME OR PHONE NUMBER" placeholder="e.g. alex_t or 0701234567"
              value={form.identifier} onChange={v => setForm(f => ({ ...f, identifier: v }))} icon="👤" />
            <Input label="PASSWORD" type="password" placeholder="Your password"
              value={form.password} onChange={v => setForm(f => ({ ...f, password: v }))} icon="🔑" />
            <Btn full onClick={handleSubmit} disabled={loading} style={{ marginTop: 8 }}>
              {loading ? "Signing in…" : "Sign In →"}
            </Btn>
          </div>
        ) : (
          <div className="fade-in">
            <Input label="FULL NAME" placeholder="Your full name"
              value={form.fullname} onChange={v => setForm(f => ({ ...f, fullname: v }))} icon="🧑" />
            <div style={{ marginBottom: 14 }}>
              <div style={{ fontSize: 12, color: T.muted, marginBottom: 6, fontWeight: 600, letterSpacing: .5 }}>USERNAME</div>
              <div style={{ position: "relative" }}>
                <span style={{ position: "absolute", left: 14, top: "50%", transform: "translateY(-50%)", color: T.muted }}>@</span>
                <input value={form.username} onChange={e => checkUsername(e.target.value)}
                  placeholder="choose a unique username"
                  style={{
                    width: "100%", background: T.surface,
                    border: `1px solid ${usernameOk === false ? T.red : usernameOk ? T.green : T.border}`,
                    borderRadius: 12, padding: "12px 14px 12px 36px",
                    color: T.text, fontSize: 14, fontFamily: "Sora", outline: "none",
                  }} />
                {checking && <span style={{ position: "absolute", right: 14, top: "50%", transform: "translateY(-50%)", fontSize: 12, color: T.muted }}>…</span>}
                {!checking && usernameOk === true && <span style={{ position: "absolute", right: 14, top: "50%", transform: "translateY(-50%)" }}>✅</span>}
                {!checking && usernameOk === false && <span style={{ position: "absolute", right: 14, top: "50%", transform: "translateY(-50%)" }}>❌</span>}
              </div>
              {usernameOk === false && <div style={{ fontSize: 11, color: T.red, marginTop: 4 }}>Username already taken</div>}
            </div>
            <Input label="PHONE NUMBER" type="tel" placeholder="07XXXXXXXX"
              value={form.phone} onChange={v => setForm(f => ({ ...f, phone: v }))} icon="📱" />
            <Input label="PASSWORD" type="password" placeholder="Create a password"
              value={form.password} onChange={v => setForm(f => ({ ...f, password: v }))} icon="🔑" />
            <Input label="CONFIRM PASSWORD" type="password" placeholder="Repeat password"
              value={form.confirm} onChange={v => setForm(f => ({ ...f, confirm: v }))} icon="🔏" />
            <Btn full onClick={handleSubmit} disabled={loading} style={{ marginTop: 8 }}>
              {loading ? "Creating account…" : "Create Account →"}
            </Btn>
          </div>
        )}
      </div>
    </div>
  );
}

// ─── NOTIFICATIONS SHEET ──────────────────────────────────────────────────────
function NotifSheet({ onClose }) {
  const notifs = [
    { icon: "💰", title: "Queue Progress", body: "Your queue position moved to #3", time: "2 min ago" },
    { icon: "🏦", title: "SACCO Reminder", body: "Weekly savings due in 2 days", time: "1 hr ago" },
    { icon: "🎉", title: "Blogger Reward", body: "You earned 5,000 CU for your post!", time: "Yesterday" },
  ];
  return (
    <Sheet onClose={onClose} title="🛎️ Notifications">
      {notifs.map((n, i) => (
        <Card key={i} style={{ marginBottom: 10 }}>
          <div style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
            <div style={{ fontSize: 24 }}>{n.icon}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 600, fontSize: 14 }}>{n.title}</div>
              <div style={{ color: T.sub, fontSize: 13, marginTop: 2 }}>{n.body}</div>
              <div style={{ color: T.muted, fontSize: 11, marginTop: 4 }}>{n.time}</div>
            </div>
          </div>
        </Card>
      ))}
    </Sheet>
  );
}

// ─── BOTTOM SHEET WRAPPER ────────────────────────────────────────────────────
function Sheet({ children, title, onClose }) {
  return (
    <div style={{
      position: "fixed", inset: 0, background: "#00000088",
      zIndex: 100, display: "flex", alignItems: "flex-end",
    }} onClick={onClose}>
      <div className="slide-up" onClick={e => e.stopPropagation()} style={{
        background: T.surface, borderRadius: "24px 24px 0 0",
        width: "100%", maxHeight: "88vh", overflow: "hidden",
        display: "flex", flexDirection: "column",
        border: `1px solid ${T.border}`, borderBottom: "none",
      }}>
        {/* Handle */}
        <div style={{ display: "flex", justifyContent: "center", paddingTop: 12 }}>
          <div style={{ width: 40, height: 4, background: T.border, borderRadius: 99 }} />
        </div>
        {/* Header */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "12px 20px 8px" }}>
          <div style={{ fontWeight: 700, fontSize: 18 }}>{title}</div>
          <button onClick={onClose} style={{ background: "none", border: "none", color: T.muted, fontSize: 20, cursor: "pointer" }}>✕</button>
        </div>
        <div style={{ overflowY: "auto", padding: "8px 20px 32px", flex: 1 }}>
          {children}
        </div>
      </div>
    </div>
  );
}

// ─── WALLET SHEET ─────────────────────────────────────────────────────────────
function WalletSheet({ onClose }) {
  const [tab, setTab] = useState("overview");
  const [depositAmount, setDepositAmount] = useState("");
  const [step, setStep] = useState(1);

  const calcCU = (ugx) => Math.floor(ugx * 0.85);
  const calcFee = (ugx) => Math.floor(ugx * 0.15);

  const handleDeposit = () => {
    if (step === 1) setStep(2);
    else { setStep(1); setDepositAmount(""); setTab("overview"); }
  };

  return (
    <Sheet onClose={onClose} title="💼 Wallet">
      {/* Tabs */}
      <div style={{ display: "flex", gap: 8, marginBottom: 20 }}>
        {["overview", "deposit", "history"].map(t => (
          <button key={t} onClick={() => { setTab(t); setStep(1); }} style={{
            padding: "8px 14px", borderRadius: 10, border: "none", cursor: "pointer",
            background: tab === t ? T.gold + "22" : T.card,
            color: tab === t ? T.gold : T.muted,
            fontFamily: "Sora", fontWeight: 600, fontSize: 12,
            border: `1px solid ${tab === t ? T.gold + "44" : T.border}`,
          }}>{t.charAt(0).toUpperCase() + t.slice(1)}</button>
        ))}
      </div>

      {tab === "overview" && (
        <div className="fade-in">
          {/* Balances */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 16 }}>
            <Card glow style={{ textAlign: "center" }}>
              <div style={{ color: T.muted, fontSize: 11, marginBottom: 4 }}>CU BALANCE</div>
              <div className="mono" style={{ fontSize: 22, fontWeight: 700, color: T.gold }}>{fmtNum(mockUser.cuBalance)}</div>
              <div style={{ color: T.muted, fontSize: 10, marginTop: 2 }}>Capital Units</div>
            </Card>
            <Card style={{ textAlign: "center" }}>
              <div style={{ color: T.muted, fontSize: 11, marginBottom: 4 }}>UGX BALANCE</div>
              <div className="mono" style={{ fontSize: 22, fontWeight: 700, color: T.green }}>{fmtNum(mockUser.ugxBalance)}</div>
              <div style={{ color: T.muted, fontSize: 10, marginTop: 2 }}>Ugandan Shilling</div>
            </Card>
          </div>

          {/* CU Explain */}
          <Card style={{ background: T.gold + "11", border: `1px solid ${T.gold}22`, marginBottom: 16 }}>
            <div style={{ fontSize: 12, color: T.goldLight, fontWeight: 600, marginBottom: 8 }}>⚡ HOW CU WORKS</div>
            <div style={{ fontSize: 12, color: T.sub, lineHeight: 1.6 }}>
              When you deposit UGX, <strong style={{ color: T.gold }}>15%</strong> goes to the Reserve Fund and
              the remaining <strong style={{ color: T.gold }}>85%</strong> becomes CU — your in-app currency used across all services.
            </div>
          </Card>

          <Btn full onClick={() => setTab("deposit")}>+ Deposit Funds</Btn>
        </div>
      )}

      {tab === "deposit" && (
        <div className="fade-in">
          {step === 1 && (
            <>
              <Input label="AMOUNT (UGX)" type="number" placeholder="Minimum 10,000 UGX"
                value={depositAmount} onChange={setDepositAmount} icon="💵" />
              {depositAmount >= 10000 && (
                <Card style={{ marginBottom: 16, background: T.gold + "11", border: `1px solid ${T.gold}22` }}>
                  <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
                    <span style={{ color: T.muted, fontSize: 13 }}>Deposit Amount</span>
                    <span className="mono" style={{ color: T.text, fontWeight: 600 }}>{fmtUGX(+depositAmount)}</span>
                  </div>
                  <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
                    <span style={{ color: T.muted, fontSize: 13 }}>Reserve Fund (15%)</span>
                    <span className="mono" style={{ color: T.red, fontWeight: 600 }}>-{fmtUGX(calcFee(+depositAmount))}</span>
                  </div>
                  <Divider />
                  <div style={{ display: "flex", justifyContent: "space-between" }}>
                    <span style={{ color: T.gold, fontWeight: 700, fontSize: 14 }}>You Receive (CU)</span>
                    <span className="mono" style={{ color: T.gold, fontWeight: 700 }}>{fmtNum(calcCU(+depositAmount))} CU</span>
                  </div>
                </Card>
              )}
              <div style={{ marginBottom: 16 }}>
                <div style={{ fontSize: 12, color: T.muted, marginBottom: 8, fontWeight: 600 }}>PAYMENT METHOD</div>
                {["Mobile Money (MTN)", "Mobile Money (Airtel)", "Bank Transfer"].map((m, i) => (
                  <Card key={i} style={{ marginBottom: 8, cursor: "pointer", display: "flex", alignItems: "center", gap: 12 }}>
                    <div style={{ width: 20, height: 20, borderRadius: "50%", border: `2px solid ${i === 0 ? T.gold : T.border}`, display: "flex", alignItems: "center", justifyContent: "center" }}>
                      {i === 0 && <div style={{ width: 10, height: 10, borderRadius: "50%", background: T.gold }} />}
                    </div>
                    <span style={{ fontSize: 14 }}>{m}</span>
                  </Card>
                ))}
              </div>
              <Btn full onClick={handleDeposit} disabled={depositAmount < 10000}>Continue →</Btn>
            </>
          )}
          {step === 2 && (
            <div className="fade-in" style={{ textAlign: "center", padding: "20px 0" }}>
              <div style={{ fontSize: 56, marginBottom: 16 }}>📱</div>
              <div style={{ fontWeight: 700, fontSize: 18, marginBottom: 8 }}>Confirm on your phone</div>
              <div style={{ color: T.sub, fontSize: 14, marginBottom: 24 }}>
                A payment prompt has been sent to <strong>0701234567</strong>.<br />
                Enter your Mobile Money PIN to confirm.
              </div>
              <Card style={{ background: T.gold + "11", border: `1px solid ${T.gold}22`, marginBottom: 24 }}>
                <div className="mono" style={{ fontSize: 28, fontWeight: 700, color: T.gold }}>{fmtUGX(+depositAmount)}</div>
                <div style={{ color: T.muted, fontSize: 12, marginTop: 4 }}>≈ {fmtNum(calcCU(+depositAmount))} CU after conversion</div>
              </Card>
              <Btn full onClick={handleDeposit} variant="success">✓ Payment Confirmed</Btn>
            </div>
          )}
        </div>
      )}

      {tab === "history" && (
        <div className="fade-in">
          {mockTransactions.map(tx => (
            <Card key={tx.id} style={{ marginBottom: 10, display: "flex", alignItems: "center", gap: 12 }}>
              <div style={{
                width: 40, height: 40, borderRadius: 12,
                background: (tx.amount > 0 ? T.green : T.red) + "22",
                display: "flex", alignItems: "center", justifyContent: "center", fontSize: 18,
              }}>
                {tx.type === "deposit" ? "⬇️" : tx.type === "reward" ? "🎁" : "⬆️"}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 600, fontSize: 14 }}>{tx.label}</div>
                <div style={{ color: T.muted, fontSize: 11, marginTop: 2 }}>{tx.date}</div>
              </div>
              <div style={{ textAlign: "right" }}>
                <div className="mono" style={{ fontWeight: 700, color: tx.amount > 0 ? T.green : T.red, fontSize: 13 }}>
                  {tx.amount > 0 ? "+" : ""}{fmtNum(tx.cu)} CU
                </div>
                <Badge color={tx.status === "completed" ? T.green : T.gold} small>{tx.status}</Badge>
              </div>
            </Card>
          ))}
        </div>
      )}
    </Sheet>
  );
}

// ─── QUEUE SHEET ──────────────────────────────────────────────────────────────
function QueueSheet({ onClose }) {
  const [committing, setCommitting] = useState(false);
  const [amount, setAmount] = useState("");

  return (
    <Sheet onClose={onClose} title="🔄 Capital Queue">
      <Card style={{ background: T.blue + "11", border: `1px solid ${T.blue}22`, marginBottom: 16 }}>
        <div style={{ fontSize: 12, color: T.cyan, fontWeight: 600, marginBottom: 6 }}>⚙️ HOW THE QUEUE WORKS</div>
        <div style={{ fontSize: 12, color: T.sub, lineHeight: 1.6 }}>
          Commit your CU to the FIFO queue. Your funds grow through new deposits, business loan repayments, and reserve support. <strong style={{ color: T.text }}>Fully transparent — track your position live.</strong>
        </div>
      </Card>

      {/* My Position */}
      <Card glow style={{ marginBottom: 16 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
          <div>
            <div style={{ color: T.muted, fontSize: 11 }}>MY QUEUE POSITION</div>
            <div style={{ fontSize: 32, fontWeight: 800, color: T.gold }}>#3</div>
          </div>
          <div style={{ textAlign: "right" }}>
            <div style={{ color: T.muted, fontSize: 11, marginBottom: 4 }}>COMMITTED</div>
            <div className="mono" style={{ color: T.text, fontWeight: 700 }}>20,000 CU</div>
          </div>
        </div>
        <ProgressBar value={30} />
        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 6 }}>
          <span style={{ color: T.muted, fontSize: 11 }}>Progress: 30%</span>
          <span style={{ color: T.gold, fontSize: 11 }}>Estimated: ~18 days</span>
        </div>
      </Card>

      {/* Queue List */}
      <div style={{ fontWeight: 700, fontSize: 14, marginBottom: 10, color: T.sub }}>LIVE QUEUE</div>
      {mockQueue.map(q => (
        <Card key={q.id} style={{ marginBottom: 8, border: q.isMe ? `1px solid ${T.gold}44` : `1px solid ${T.border}` }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <div style={{
              width: 32, height: 32, borderRadius: "50%",
              background: q.isMe ? T.gold + "33" : T.border,
              display: "flex", alignItems: "center", justifyContent: "center",
              fontWeight: 800, fontSize: 14, color: q.isMe ? T.gold : T.muted,
            }}>#{q.position}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 600, fontSize: 13 }}>@{q.username}{q.isMe ? " (you)" : ""}</div>
              <ProgressBar value={q.progress} color={q.isMe ? T.gold : T.blue} height={4} />
            </div>
            <div className="mono" style={{ fontSize: 12, color: T.sub }}>{fmtNum(q.committed)} CU</div>
          </div>
        </Card>
      ))}

      <Divider />
      <div style={{ fontWeight: 700, fontSize: 14, marginBottom: 10 }}>COMMIT MORE CU</div>
      <Input label="AMOUNT (CU)" type="number" placeholder="Min 10,000 CU"
        value={amount} onChange={setAmount} icon="🔒" />
      <Btn full onClick={() => setCommitting(true)} disabled={amount < 10000}>
        Lock CU into Queue
      </Btn>
    </Sheet>
  );
}

// ─── SACCO SHEET ──────────────────────────────────────────────────────────────
function SaccoSheet({ onClose }) {
  const [tab, setTab] = useState("dashboard");
  const [loanAmt, setLoanAmt] = useState("");

  return (
    <Sheet onClose={onClose} title="🏦 SACCO">
      <div style={{ display: "flex", gap: 8, marginBottom: 20, overflowX: "auto", paddingBottom: 4 }}>
        {["dashboard", "save", "loans"].map(t => (
          <button key={t} onClick={() => setTab(t)} style={{
            padding: "8px 14px", borderRadius: 10, border: "none", cursor: "pointer", whiteSpace: "nowrap",
            background: tab === t ? T.purple + "22" : T.card,
            color: tab === t ? T.purple : T.muted,
            fontFamily: "Sora", fontWeight: 600, fontSize: 12,
            border: `1px solid ${tab === t ? T.purple + "44" : T.border}`,
          }}>{t.charAt(0).toUpperCase() + t.slice(1)}</button>
        ))}
      </div>

      {tab === "dashboard" && (
        <div className="fade-in">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 16 }}>
            <Card style={{ textAlign: "center" }}>
              <div style={{ color: T.muted, fontSize: 10 }}>TOTAL SAVINGS</div>
              <div className="mono" style={{ fontSize: 20, fontWeight: 700, color: T.purple, marginTop: 4 }}>{fmtUGX(mockSacco.savings)}</div>
            </Card>
            <Card style={{ textAlign: "center" }}>
              <div style={{ color: T.muted, fontSize: 10 }}>LOAN ELIGIBLE</div>
              <div className="mono" style={{ fontSize: 20, fontWeight: 700, color: T.green, marginTop: 4 }}>{fmtUGX(mockSacco.loanEligible)}</div>
            </Card>
          </div>

          <Card style={{ marginBottom: 16 }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
              <span style={{ fontWeight: 600 }}>🔥 Savings Streak</span>
              <Badge color={T.gold}>{mockSacco.streak} weeks</Badge>
            </div>
            <div style={{ color: T.sub, fontSize: 13 }}>Keep saving weekly to increase your loan eligibility!</div>
          </Card>

          {mockSacco.activeLoan > 0 && (
            <Card style={{ border: `1px solid ${T.red}33` }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
                <span style={{ fontWeight: 600, color: T.red }}>Active Loan</span>
                <span className="mono" style={{ color: T.red }}>{fmtUGX(mockSacco.activeLoan)}</span>
              </div>
              <ProgressBar value={(mockSacco.loanRepaid / mockSacco.activeLoan) * 100} color={T.green} />
              <div style={{ display: "flex", justifyContent: "space-between", marginTop: 6 }}>
                <span style={{ color: T.muted, fontSize: 11 }}>Repaid: {fmtUGX(mockSacco.loanRepaid)}</span>
                <span style={{ color: T.red, fontSize: 11 }}>Remaining: {fmtUGX(mockSacco.activeLoan - mockSacco.loanRepaid)}</span>
              </div>
            </Card>
          )}
        </div>
      )}

      {tab === "save" && (
        <div className="fade-in">
          <Card style={{ background: T.purple + "11", border: `1px solid ${T.purple}22`, marginBottom: 16 }}>
            <div style={{ fontSize: 12, color: T.muted }}>WEEKLY TARGET</div>
            <div className="mono" style={{ fontSize: 28, fontWeight: 700, color: T.purple }}>{fmtUGX(mockSacco.weeklyTarget)}</div>
          </Card>
          <Input label="SAVINGS AMOUNT (UGX)" type="number" placeholder="20,000 UGX minimum"
            value={""} onChange={() => { }} icon="💰" />
          <Btn full variant="blue" style={{ background: T.purple + "22", color: T.purple, border: `1px solid ${T.purple}44` }}>
            Save This Week
          </Btn>
          <div style={{ marginTop: 20 }}>
            <div style={{ fontWeight: 700, fontSize: 14, marginBottom: 10, color: T.sub }}>SAVINGS HISTORY</div>
            {[1, 2, 3, 4].map(w => (
              <Card key={w} style={{ marginBottom: 8, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 13 }}>Week {w}</div>
                  <div style={{ color: T.muted, fontSize: 11 }}>Apr {28 - w * 7}, 2025</div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div className="mono" style={{ color: T.green, fontWeight: 600 }}>+{fmtUGX(20000)}</div>
                  <Badge color={T.green} small>saved</Badge>
                </div>
              </Card>
            ))}
          </div>
        </div>
      )}

      {tab === "loans" && (
        <div className="fade-in">
          <Card style={{ background: T.green + "11", border: `1px solid ${T.green}22`, marginBottom: 16 }}>
            <div style={{ fontSize: 12, color: T.muted, marginBottom: 4 }}>YOUR LOAN LIMIT</div>
            <div className="mono" style={{ fontSize: 28, fontWeight: 700, color: T.green }}>{fmtUGX(mockSacco.loanEligible)}</div>
            <div style={{ color: T.sub, fontSize: 12, marginTop: 4 }}>Based on 3× your total savings</div>
          </Card>
          <Input label="LOAN AMOUNT (UGX)" type="number" placeholder="How much do you need?"
            value={loanAmt} onChange={setLoanAmt} icon="🏦" />
          {loanAmt >= 50000 && (
            <Card style={{ marginBottom: 12, background: T.card }}>
              <div style={{ fontSize: 12, color: T.muted, marginBottom: 8 }}>LOAN SUMMARY</div>
              {[
                ["Principal", fmtUGX(+loanAmt)],
                ["Interest (15%/month)", fmtUGX(Math.floor(+loanAmt * 0.15))],
                ["Total Repayable", fmtUGX(Math.floor(+loanAmt * 1.15))],
              ].map(([l, v]) => (
                <div key={l} style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
                  <span style={{ color: T.muted, fontSize: 13 }}>{l}</span>
                  <span className="mono" style={{ fontWeight: 600 }}>{v}</span>
                </div>
              ))}
            </Card>
          )}
          <Btn full disabled={loanAmt < 50000 || loanAmt > mockSacco.loanEligible}>Apply for Loan</Btn>
        </div>
      )}
    </Sheet>
  );
}

// ─── BUSINESS SHEET ───────────────────────────────────────────────────────────
function BusinessSheet({ onClose }) {
  const [tab, setTab] = useState("list");
  const [step, setStep] = useState(1);

  return (
    <Sheet onClose={onClose} title="🏢 Business Hub">
      <div style={{ display: "flex", gap: 8, marginBottom: 20 }}>
        {["list", "register", "funding"].map(t => (
          <button key={t} onClick={() => setTab(t)} style={{
            padding: "8px 14px", borderRadius: 10, border: "none", cursor: "pointer",
            background: tab === t ? T.cyan + "22" : T.card,
            color: tab === t ? T.cyan : T.muted,
            fontFamily: "Sora", fontWeight: 600, fontSize: 12,
            border: `1px solid ${tab === t ? T.cyan + "44" : T.border}`,
          }}>{t.charAt(0).toUpperCase() + t.slice(1)}</button>
        ))}
      </div>

      {tab === "list" && (
        <div className="fade-in">
          {mockBusinesses.map(b => (
            <Card key={b.id} style={{ marginBottom: 12 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 8 }}>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 15 }}>{b.name}</div>
                  <div style={{ color: T.muted, fontSize: 12 }}>{b.category}</div>
                </div>
                <Badge color={b.status === "verified" ? T.green : T.gold}>{b.status}</Badge>
              </div>
              {b.loan > 0 && (
                <>
                  <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: T.muted, marginBottom: 4 }}>
                    <span>Loan: {fmtUGX(b.loan)}</span>
                    <span>Repaid: {fmtUGX(b.repaid)}</span>
                  </div>
                  <ProgressBar value={(b.repaid / b.loan) * 100} color={T.cyan} />
                </>
              )}
            </Card>
          ))}
          <Btn full variant="blue" style={{ color: T.cyan, background: T.cyan + "22", border: `1px solid ${T.cyan}44` }}
            onClick={() => setTab("register")}>
            + Register a Business
          </Btn>
        </div>
      )}

      {tab === "register" && (
        <div className="fade-in">
          <Card style={{ background: T.cyan + "11", border: `1px solid ${T.cyan}22`, marginBottom: 16 }}>
            <div style={{ fontSize: 12, color: T.cyan, fontWeight: 600, marginBottom: 4 }}>VERIFICATION FEE</div>
            <div className="mono" style={{ fontSize: 24, fontWeight: 700, color: T.text }}>UGX 50,000</div>
            <div style={{ color: T.sub, fontSize: 12, marginTop: 4 }}>One-time fee to verify your business</div>
          </Card>
          <Input label="BUSINESS NAME" placeholder="Your business name" value="" onChange={() => { }} icon="🏢" />
          <Input label="CATEGORY" placeholder="e.g. Food & Beverage" value="" onChange={() => { }} icon="📂" />
          <Input label="CONTACT PHONE" placeholder="Business phone number" value="" onChange={() => { }} icon="📱" />
          <Input label="PHYSICAL ADDRESS" placeholder="Business location" value="" onChange={() => { }} icon="📍" />
          <div style={{ marginBottom: 14 }}>
            <div style={{ fontSize: 12, color: T.muted, marginBottom: 6, fontWeight: 600 }}>UPLOAD DOCUMENTS</div>
            <Card style={{ border: `2px dashed ${T.border}`, textAlign: "center", padding: 24 }}>
              <div style={{ fontSize: 32, marginBottom: 8 }}>📎</div>
              <div style={{ color: T.muted, fontSize: 13 }}>Tap to upload business documents</div>
            </Card>
          </div>
          <Btn full style={{ background: `linear-gradient(135deg, ${T.cyan}, ${T.blue})`, color: T.bg }}>
            Pay Fee & Register →
          </Btn>
        </div>
      )}

      {tab === "funding" && (
        <div className="fade-in">
          <Card style={{ marginBottom: 16 }}>
            <div style={{ fontWeight: 700, marginBottom: 4 }}>Kampala Bakers Ltd</div>
            <Badge color={T.green}>Verified Business</Badge>
            <Divider />
            <div style={{ fontSize: 12, color: T.muted, marginBottom: 4 }}>CURRENT FUNDING STATUS</div>
            <div className="mono" style={{ color: T.cyan, fontWeight: 700, fontSize: 20 }}>{fmtUGX(500000)}</div>
            <ProgressBar value={64} color={T.cyan} />
            <div style={{ fontSize: 11, color: T.muted, marginTop: 4 }}>64% repaid (UGX 320,000)</div>
          </Card>
          <Input label="FUNDING AMOUNT (UGX)" type="number" placeholder="How much do you need?" value="" onChange={() => { }} icon="💼" />
          <Input label="PURPOSE" placeholder="What will you use this for?" value="" onChange={() => { }} icon="📋" />
          <Input label="REPAYMENT PERIOD (WEEKS)" type="number" placeholder="e.g. 12 weeks" value="" onChange={() => { }} icon="📅" />
          <Btn full>Apply for Business Funding</Btn>
        </div>
      )}
    </Sheet>
  );
}

// ─── BLOGGER SHEET ────────────────────────────────────────────────────────────
function BloggerSheet({ onClose }) {
  const [tab, setTab] = useState("bloggers");

  return (
    <Sheet onClose={onClose} title="📣 Blogger Hub">
      <div style={{ display: "flex", gap: 8, marginBottom: 20 }}>
        {["bloggers", "apply", "ads"].map(t => (
          <button key={t} onClick={() => setTab(t)} style={{
            padding: "8px 14px", borderRadius: 10, border: "none", cursor: "pointer",
            background: tab === t ? T.purple + "22" : T.card,
            color: tab === t ? T.purple : T.muted,
            fontFamily: "Sora", fontWeight: 600, fontSize: 12,
            border: `1px solid ${tab === t ? T.purple + "44" : T.border}`,
          }}>{t.charAt(0).toUpperCase() + t.slice(1)}</button>
        ))}
      </div>

      {tab === "bloggers" && (
        <div className="fade-in">
          <Card style={{ background: T.purple + "11", border: `1px solid ${T.purple}22`, marginBottom: 16 }}>
            <div style={{ fontSize: 12, color: T.purple, fontWeight: 600, marginBottom: 4 }}>💡 HOW TO EARN</div>
            <div style={{ fontSize: 12, color: T.sub, lineHeight: 1.6 }}>
              Apply as a blogger, post about CAPITAL LOCK on your socials, submit post links, and earn CU rewards based on your engagement!
            </div>
          </Card>
          {mockBloggers.map(b => (
            <Card key={b.id} style={{ marginBottom: 10 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
                  <Avatar initials={b.name.split(" ").map(x => x[0]).join("")} color={T.purple} />
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 14 }}>{b.name}</div>
                    <div style={{ color: T.muted, fontSize: 11 }}>{b.platform} • {b.followers}</div>
                  </div>
                </div>
                <Badge color={b.status === "active" ? T.green : T.gold}>{b.status}</Badge>
              </div>
              <Divider style={{ margin: "10px 0" }} />
              <div style={{ display: "flex", justifyContent: "space-between" }}>
                <div style={{ textAlign: "center" }}>
                  <div className="mono" style={{ fontWeight: 700 }}>{b.posts}</div>
                  <div style={{ color: T.muted, fontSize: 10 }}>Posts</div>
                </div>
                <div style={{ textAlign: "center" }}>
                  <div className="mono" style={{ fontWeight: 700, color: T.gold }}>{fmtNum(b.rewards)} CU</div>
                  <div style={{ color: T.muted, fontSize: 10 }}>Rewards</div>
                </div>
              </div>
            </Card>
          ))}
        </div>
      )}

      {tab === "apply" && (
        <div className="fade-in">
          <Input label="PLATFORM" placeholder="Instagram, TikTok, Twitter, YouTube…" value="" onChange={() => { }} icon="📲" />
          <Input label="PROFILE LINK" placeholder="https://instagram.com/yourhandle" value="" onChange={() => { }} icon="🔗" />
          <Input label="FOLLOWERS COUNT" type="number" placeholder="Your approximate followers" value="" onChange={() => { }} icon="👥" />
          <Input label="SUBMIT POST LINK" placeholder="Link to your post about Capital Lock" value="" onChange={() => { }} icon="📝" />
          <div style={{ marginBottom: 14 }}>
            <div style={{ fontSize: 12, color: T.muted, marginBottom: 6, fontWeight: 600 }}>SCREENSHOT OF POST</div>
            <Card style={{ border: `2px dashed ${T.border}`, textAlign: "center", padding: 20 }}>
              <div style={{ fontSize: 32, marginBottom: 8 }}>📸</div>
              <div style={{ color: T.muted, fontSize: 12 }}>Upload screenshot as proof</div>
            </Card>
          </div>
          <Btn full style={{ background: `linear-gradient(135deg, ${T.purple}, ${T.blue})`, color: "white" }}>
            Submit for Review →
          </Btn>
        </div>
      )}

      {tab === "ads" && (
        <div className="fade-in">
          <div style={{ fontWeight: 700, fontSize: 14, marginBottom: 12 }}>📢 ACTIVE ADS FEED</div>
          {mockAds.map(ad => (
            <Card key={ad.id} style={{ marginBottom: 10, position: "relative", overflow: "hidden" }}>
              <div style={{
                height: 80, background: `linear-gradient(135deg, ${T.gold}22, ${T.purple}22)`,
                borderRadius: 10, marginBottom: 10, display: "flex", alignItems: "center",
                justifyContent: "center", fontSize: 28,
              }}>
                {ad.type === "video" ? "🎬" : "🖼️"}
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 13 }}>{ad.business}</div>
                  <div style={{ color: T.muted, fontSize: 11 }}>👁️ {fmtNum(ad.views)} views</div>
                </div>
                <Badge color={T.red}>⏱️ {ad.expires}</Badge>
              </div>
            </Card>
          ))}
          <Divider />
          <div style={{ fontWeight: 700, fontSize: 14, marginBottom: 12 }}>POST YOUR AD</div>
          <Card style={{ background: T.gold + "11", border: `1px solid ${T.gold}22`, marginBottom: 12 }}>
            <div style={{ fontSize: 12, color: T.muted }}>AD FEE</div>
            <div className="mono" style={{ fontSize: 22, fontWeight: 700, color: T.gold }}>UGX 10,000</div>
            <div style={{ color: T.sub, fontSize: 12, marginTop: 2 }}>Ad visible for 24 hours</div>
          </Card>
          <Card style={{ border: `2px dashed ${T.border}`, textAlign: "center", padding: 24, marginBottom: 12 }}>
            <div style={{ fontSize: 36, marginBottom: 8 }}>📤</div>
            <div style={{ color: T.muted, fontSize: 13 }}>Upload image or video</div>
          </Card>
          <Btn full>Post Ad (10,000 UGX)</Btn>
        </div>
      )}
    </Sheet>
  );
}

// ─── ADMIN PANEL ──────────────────────────────────────────────────────────────
function AdminPanel({ onExit }) {
  const [section, setSection] = useState("dashboard");
  const stats = [
    { label: "Total Users", value: "1,247", icon: "👥", color: T.blue },
    { label: "Total CU in System", value: "8.4M", icon: "💎", color: T.gold },
    { label: "Reserve Fund", value: "UGX 2.1M", icon: "🏛️", color: T.green },
    { label: "Active Queue", value: "89 users", icon: "🔄", color: T.purple },
    { label: "Verified Businesses", value: "23", icon: "🏢", color: T.cyan },
    { label: "Active Bloggers", value: "41", icon: "📣", color: T.red },
  ];
  const sections = ["dashboard", "users", "businesses", "bloggers", "queue", "transactions", "settings"];

  return (
    <div style={{ minHeight: "100vh", background: T.bg, display: "flex" }}>
      <style>{gbl}</style>
      {/* Sidebar */}
      <div style={{ width: 220, background: T.surface, borderRight: `1px solid ${T.border}`, padding: 20, flexShrink: 0, overflowY: "auto" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 24 }}>
          <span style={{ fontSize: 24 }}>🔒</span>
          <div>
            <div style={{ fontWeight: 800, fontSize: 14, color: T.gold }}>CAPITAL LOCK</div>
            <div style={{ fontSize: 10, color: T.muted }}>Admin Panel</div>
          </div>
        </div>
        {sections.map(s => (
          <button key={s} onClick={() => setSection(s)} style={{
            width: "100%", textAlign: "left", padding: "10px 12px", borderRadius: 10,
            border: "none", cursor: "pointer", marginBottom: 4,
            background: section === s ? T.gold + "22" : "transparent",
            color: section === s ? T.gold : T.sub,
            fontFamily: "Sora", fontWeight: 600, fontSize: 13,
            textTransform: "capitalize",
          }}>
            {["📊", "👥", "🏢", "📣", "🔄", "💳", "⚙️"][sections.indexOf(s)]} {s}
          </button>
        ))}
        <div style={{ marginTop: 24 }}>
          <Btn full variant="ghost" small onClick={onExit}>← Exit Admin</Btn>
        </div>
      </div>

      {/* Content */}
      <div style={{ flex: 1, overflowY: "auto", padding: 24 }}>
        {section === "dashboard" && (
          <>
            <div style={{ fontWeight: 800, fontSize: 22, marginBottom: 4 }}>Admin Dashboard</div>
            <div style={{ color: T.muted, fontSize: 14, marginBottom: 24 }}>AWISH Capital Lock — System Overview</div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginBottom: 24 }}>
              {stats.map(s => (
                <Card key={s.label} style={{ textAlign: "center" }}>
                  <div style={{ fontSize: 28, marginBottom: 4 }}>{s.icon}</div>
                  <div className="mono" style={{ fontSize: 20, fontWeight: 700, color: s.color }}>{s.value}</div>
                  <div style={{ color: T.muted, fontSize: 11, marginTop: 4 }}>{s.label}</div>
                </Card>
              ))}
            </div>
            <Card>
              <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 16 }}>📈 Reserve Fund Flow</div>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12, flexWrap: "wrap" }}>
                {[["Total Deposited", "UGX 12.4M", T.blue], ["Reserve (15%)", "UGX 1.86M", T.gold], ["In Queue", "UGX 8.4M", T.purple], ["Business Loans", "UGX 2.1M", T.cyan]].map(([l, v, c]) => (
                  <Card key={l} style={{ flex: 1, minWidth: 100, background: c + "11", border: `1px solid ${c}22`, textAlign: "center" }}>
                    <div className="mono" style={{ color: c, fontWeight: 700, fontSize: 14 }}>{v}</div>
                    <div style={{ color: T.muted, fontSize: 10, marginTop: 2 }}>{l}</div>
                  </Card>
                ))}
              </div>
            </Card>
          </>
        )}

        {section === "users" && (
          <>
            <div style={{ fontWeight: 800, fontSize: 22, marginBottom: 20 }}>User Management</div>
            {[
              { name: "Alex Tumwine", username: "alex_t", phone: "0701234567", cu: 42500, status: "active" },
              { name: "Sarah Mukasa", username: "sarah_m", phone: "0782345678", cu: 128000, status: "active" },
              { name: "James Kato", username: "james_k", phone: "0753456789", cu: 320000, status: "active" },
              { name: "Grace Nakato", username: "grace_n", phone: "0714567890", cu: 85000, status: "suspended" },
            ].map((u, i) => (
              <Card key={i} style={{ marginBottom: 10, display: "flex", alignItems: "center", gap: 12 }}>
                <Avatar initials={u.name.split(" ").map(x => x[0]).join("")} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600 }}>{u.name}</div>
                  <div style={{ color: T.muted, fontSize: 12 }}>@{u.username} • {u.phone}</div>
                </div>
                <div style={{ textAlign: "right", marginRight: 12 }}>
                  <div className="mono" style={{ color: T.gold, fontSize: 13 }}>{fmtNum(u.cu)} CU</div>
                </div>
                <Badge color={u.status === "active" ? T.green : T.red}>{u.status}</Badge>
                <div style={{ display: "flex", gap: 6 }}>
                  <Btn small variant="ghost">View</Btn>
                  <Btn small variant="danger">Suspend</Btn>
                </div>
              </Card>
            ))}
          </>
        )}

        {section === "businesses" && (
          <>
            <div style={{ fontWeight: 800, fontSize: 22, marginBottom: 20 }}>Business Management</div>
            {[...mockBusinesses, { id: 3, name: "Nakawa Market Vendors", category: "Retail", status: "pending", loan: 0, repaid: 0 }].map(b => (
              <Card key={b.id} style={{ marginBottom: 10 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <div>
                    <div style={{ fontWeight: 700 }}>{b.name}</div>
                    <div style={{ color: T.muted, fontSize: 12 }}>{b.category}</div>
                  </div>
                  <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                    <Badge color={b.status === "verified" ? T.green : T.gold}>{b.status}</Badge>
                    {b.status === "pending" && <Btn small variant="success">✓ Verify</Btn>}
                    <Btn small variant="ghost">Details</Btn>
                  </div>
                </div>
                {b.loan > 0 && (
                  <div style={{ marginTop: 8 }}>
                    <ProgressBar value={(b.repaid / b.loan) * 100} color={T.cyan} />
                    <div style={{ fontSize: 11, color: T.muted, marginTop: 4 }}>Loan: {fmtUGX(b.loan)} | Repaid: {fmtUGX(b.repaid)}</div>
                  </div>
                )}
              </Card>
            ))}
          </>
        )}

        {section === "bloggers" && (
          <>
            <div style={{ fontWeight: 800, fontSize: 22, marginBottom: 20 }}>Blogger Management</div>
            {mockBloggers.map(b => (
              <Card key={b.id} style={{ marginBottom: 10 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
                    <Avatar initials={b.name.split(" ").map(x => x[0]).join("")} color={T.purple} size={34} />
                    <div>
                      <div style={{ fontWeight: 600 }}>{b.name}</div>
                      <div style={{ color: T.muted, fontSize: 12 }}>{b.platform} • {b.followers} followers • {b.posts} posts</div>
                    </div>
                  </div>
                  <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                    <Badge color={b.status === "active" ? T.green : T.gold}>{b.status}</Badge>
                    {b.status === "review" && <Btn small variant="success">Approve</Btn>}
                    <Btn small variant="ghost">Reward CU</Btn>
                  </div>
                </div>
              </Card>
            ))}
          </>
        )}

        {section === "queue" && (
          <>
            <div style={{ fontWeight: 800, fontSize: 22, marginBottom: 20 }}>Queue Management</div>
            {mockQueue.map(q => (
              <Card key={q.id} style={{ marginBottom: 10 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <div style={{
                    width: 36, height: 36, borderRadius: "50%", background: T.blue + "22",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    fontWeight: 800, color: T.blue,
                  }}>#{q.position}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 600 }}>@{q.username}</div>
                    <ProgressBar value={q.progress} color={T.blue} height={4} />
                    <div style={{ fontSize: 11, color: T.muted, marginTop: 4 }}>Progress: {q.progress}%</div>
                  </div>
                  <div className="mono" style={{ color: T.gold, fontWeight: 700 }}>{fmtNum(q.committed)} CU</div>
                </div>
              </Card>
            ))}
          </>
        )}

        {section === "transactions" && (
          <>
            <div style={{ fontWeight: 800, fontSize: 22, marginBottom: 20 }}>All Transactions</div>
            {[
              ...mockTransactions,
              { id: 5, type: "deposit", label: "Deposit – james_k", amount: 100000, cu: 85000, date: "Yesterday", status: "completed" },
              { id: 6, type: "loan", label: "Business Loan – Kampala Bakers", amount: 500000, cu: 500000, date: "Apr 20", status: "completed" },
            ].map(tx => (
              <Card key={tx.id} style={{ marginBottom: 8, display: "flex", alignItems: "center", gap: 12 }}>
                <div style={{
                  width: 38, height: 38, borderRadius: 10,
                  background: (tx.amount > 0 ? T.green : T.red) + "22",
                  display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16,
                }}>
                  {tx.type === "deposit" ? "⬇️" : tx.type === "loan" ? "🏦" : tx.type === "reward" ? "🎁" : "⬆️"}
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600, fontSize: 13 }}>{tx.label}</div>
                  <div style={{ color: T.muted, fontSize: 11 }}>{tx.date}</div>
                </div>
                <div className="mono" style={{ color: tx.amount > 0 ? T.green : T.red, fontWeight: 700 }}>
                  {tx.amount > 0 ? "+" : ""}{fmtUGX(Math.abs(tx.amount))}
                </div>
                <Badge color={tx.status === "completed" ? T.green : T.gold} small>{tx.status}</Badge>
              </Card>
            ))}
          </>
        )}

        {section === "settings" && (
          <>
            <div style={{ fontWeight: 800, fontSize: 22, marginBottom: 20 }}>System Settings</div>
            <Card style={{ marginBottom: 12 }}>
              <div style={{ fontWeight: 700, marginBottom: 16 }}>⚙️ Economy Parameters</div>
              {[
                ["Reserve Fund Rate", "15%"],
                ["CU Conversion Rate", "85% of deposit"],
                ["Minimum Deposit", "UGX 10,000"],
                ["SACCO Weekly Minimum", "UGX 20,000"],
                ["Business Verification Fee", "UGX 50,000"],
                ["Loan Interest Rate", "15% / month"],
                ["Ad Fee (24h)", "UGX 10,000"],
              ].map(([k, v]) => (
                <div key={k} style={{ display: "flex", justifyContent: "space-between", padding: "10px 0", borderBottom: `1px solid ${T.border}` }}>
                  <span style={{ color: T.sub, fontSize: 13 }}>{k}</span>
                  <span className="mono" style={{ color: T.gold, fontWeight: 700, fontSize: 13 }}>{v}</span>
                </div>
              ))}
            </Card>
            <Card>
              <div style={{ fontWeight: 700, marginBottom: 16 }}>🔑 Admin Accounts</div>
              <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 0" }}>
                <Avatar initials="SA" color={T.gold} size={36} />
                <div>
                  <div style={{ fontWeight: 600 }}>Super Admin</div>
                  <div style={{ color: T.muted, fontSize: 12 }}>admin@capitallock.ug</div>
                </div>
                <Badge color={T.gold} small>SUPER</Badge>
              </div>
            </Card>
          </>
        )}
      </div>
    </div>
  );
}

// ─── MAIN APP ─────────────────────────────────────────────────────────────────
export default function App() {
  const [route, setRoute] = useState("login"); // login | app | admin | install
  const [activeSheet, setActiveSheet] = useState(null);
  const [notifOpen, setNotifOpen] = useState(false);
  const [notifRing, setNotifRing] = useState(false);
  const [url, setUrl] = useState("/index");

  // Simulate URL routing
  useEffect(() => {
    if (url === "/supperaccount/login") setRoute("admin");
    else if (url === "/supperaccount/install") setRoute("install");
    else if (url === "/index") setRoute("login");
  }, [url]);

  const openSheet = (name) => setActiveSheet(name);
  const closeSheet = () => setActiveSheet(null);

  const ringNotif = () => {
    setNotifRing(true);
    setTimeout(() => setNotifRing(false), 400);
    setNotifOpen(true);
  };

  if (route === "install") return <InstallScreen onDone={() => setRoute("admin")} />;
  if (route === "admin") return <AdminPanel onExit={() => setRoute("app")} />;
  if (route === "login") return <LoginScreen onLogin={() => setRoute("app")} />;

  const tabs = [
    { id: "queue", icon: "🔄", label: "Queue" },
    { id: "sacco", icon: "🏦", label: "SACCO" },
    { id: "wallet", icon: "💼", label: "Wallet", big: true },
    { id: "business", icon: "🏢", label: "Business" },
    { id: "blogger", icon: "📣", label: "Blogger" },
  ];

  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100vh", background: T.bg }}>
      <style>{gbl}</style>

      {/* TOP BAR */}
      <div style={{
        padding: "16px 20px 12px",
        background: T.surface,
        borderBottom: `1px solid ${T.border}`,
        display: "flex", justifyContent: "space-between", alignItems: "center",
        flexShrink: 0,
      }}>
        {/* Balance */}
        <div>
          <div style={{ fontSize: 10, color: T.muted, fontWeight: 600, letterSpacing: .5, marginBottom: 2 }}>ACTIVE BALANCE</div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
            <span className="mono" style={{ fontSize: 22, fontWeight: 800, color: T.gold }}>{fmtNum(mockUser.cuBalance)}</span>
            <span style={{ fontSize: 11, color: T.muted }}>CU</span>
          </div>
        </div>

        {/* Right: notif + profile */}
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          {/* Admin shortcut */}
          <button onClick={() => setRoute("admin")} style={{
            background: "none", border: "none", cursor: "pointer",
            fontSize: 10, color: T.muted, fontFamily: "Sora",
          }}>Admin</button>

          {/* Bell */}
          <div style={{ position: "relative" }}>
            <button onClick={ringNotif} style={{
              background: T.card, border: `1px solid ${T.border}`,
              width: 40, height: 40, borderRadius: 12,
              display: "flex", alignItems: "center", justifyContent: "center",
              cursor: "pointer", fontSize: 18,
              className: notifRing ? "ring-pop" : "",
              transition: "all .2s",
            }}>🛎️</button>
            <div style={{
              position: "absolute", top: -4, right: -4,
              width: 18, height: 18, borderRadius: "50%",
              background: T.red, display: "flex", alignItems: "center",
              justifyContent: "center", fontSize: 10, fontWeight: 700,
              color: "white", border: `2px solid ${T.surface}`,
            }}>{mockUser.notifications}</div>
          </div>

          <Avatar initials={mockUser.avatar} size={36} />
        </div>
      </div>

      {/* HOME CONTENT */}
      <div style={{ flex: 1, overflowY: "auto", padding: 16 }}>
        {/* Welcome */}
        <div style={{ marginBottom: 20 }}>
          <div style={{ color: T.muted, fontSize: 13 }}>Good morning,</div>
          <div style={{ fontWeight: 800, fontSize: 22 }}>{mockUser.name} 👋</div>
        </div>

        {/* Quick Stats */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 16 }}>
          <Card glow onClick={() => openSheet("queue")} style={{ cursor: "pointer" }}>
            <div style={{ color: T.muted, fontSize: 10, marginBottom: 4 }}>QUEUE POSITION</div>
            <div style={{ fontSize: 28, fontWeight: 800, color: T.gold }}>#3</div>
            <ProgressBar value={30} />
            <div style={{ color: T.muted, fontSize: 10, marginTop: 4 }}>30% funded</div>
          </Card>
          <Card onClick={() => openSheet("sacco")} style={{ cursor: "pointer" }}>
            <div style={{ color: T.muted, fontSize: 10, marginBottom: 4 }}>SACCO SAVINGS</div>
            <div className="mono" style={{ fontSize: 20, fontWeight: 800, color: T.purple }}>UGX 80K</div>
            <div style={{ color: T.muted, fontSize: 10, marginTop: 8 }}>🔥 4-week streak</div>
          </Card>
        </div>

        {/* Ads Feed */}
        <div style={{ marginBottom: 16 }}>
          <div style={{ fontWeight: 700, fontSize: 14, marginBottom: 10, color: T.sub }}>📢 ADS FEED</div>
          <div style={{ display: "flex", gap: 10, overflowX: "auto", paddingBottom: 8 }}>
            {mockAds.map(ad => (
              <div key={ad.id} style={{
                minWidth: 140, background: T.card, borderRadius: 14,
                border: `1px solid ${T.border}`, padding: 12, flexShrink: 0,
              }}>
                <div style={{
                  height: 70, background: `linear-gradient(135deg, ${T.gold}22, ${T.purple}22)`,
                  borderRadius: 8, marginBottom: 8, display: "flex",
                  alignItems: "center", justifyContent: "center", fontSize: 28,
                }}>
                  {ad.type === "video" ? "🎬" : "🖼️"}
                </div>
                <div style={{ fontWeight: 600, fontSize: 12 }}>{ad.business}</div>
                <div style={{ color: T.red, fontSize: 10, marginTop: 2 }}>⏱️ {ad.expires}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Recent Transactions */}
        <div>
          <div style={{ fontWeight: 700, fontSize: 14, marginBottom: 10, color: T.sub }}>🕐 RECENT ACTIVITY</div>
          {mockTransactions.slice(0, 3).map(tx => (
            <Card key={tx.id} style={{ marginBottom: 8, display: "flex", alignItems: "center", gap: 10 }}>
              <div style={{
                width: 36, height: 36, borderRadius: 10,
                background: (tx.amount > 0 ? T.green : T.red) + "22",
                display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16,
              }}>
                {tx.type === "deposit" ? "⬇️" : tx.type === "reward" ? "🎁" : "⬆️"}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 600, fontSize: 13 }}>{tx.label}</div>
                <div style={{ color: T.muted, fontSize: 11 }}>{tx.date}</div>
              </div>
              <div className="mono" style={{ fontWeight: 700, color: tx.cu > 0 ? T.green : T.red, fontSize: 13 }}>
                {tx.cu > 0 ? "+" : ""}{fmtNum(tx.cu)} CU
              </div>
            </Card>
          ))}
        </div>
      </div>

      {/* BOTTOM NAV */}
      <div style={{
        background: T.surface,
        borderTop: `1px solid ${T.border}`,
        padding: "12px 16px 20px",
        display: "flex", justifyContent: "space-around", alignItems: "flex-end",
        flexShrink: 0,
      }}>
        {tabs.map(t => (
          t.big ? (
            <button key={t.id} onClick={() => openSheet(t.id)} style={{
              width: 64, height: 64, borderRadius: "50%", border: "none",
              background: `linear-gradient(135deg, ${T.gold}, ${T.goldDark})`,
              display: "flex", flexDirection: "column", alignItems: "center",
              justifyContent: "center", cursor: "pointer",
              boxShadow: `0 0 24px ${T.gold}66`,
              transform: "translateY(-16px)", fontSize: 26,
              transition: "transform .2s",
            }}>
              {t.icon}
            </button>
          ) : (
            <button key={t.id} onClick={() => openSheet(t.id)} style={{
              background: "none", border: "none", cursor: "pointer",
              display: "flex", flexDirection: "column", alignItems: "center",
              gap: 4, padding: "4px 8px",
            }}>
              <span style={{ fontSize: 22 }}>{t.icon}</span>
              <span style={{ fontSize: 10, color: T.muted, fontFamily: "Sora", fontWeight: 600 }}>{t.label}</span>
            </button>
          )
        ))}
      </div>

      {/* SHEETS */}
      {notifOpen && <NotifSheet onClose={() => setNotifOpen(false)} />}
      {activeSheet === "wallet" && <WalletSheet onClose={closeSheet} />}
      {activeSheet === "queue" && <QueueSheet onClose={closeSheet} />}
      {activeSheet === "sacco" && <SaccoSheet onClose={closeSheet} />}
      {activeSheet === "business" && <BusinessSheet onClose={closeSheet} />}
      {activeSheet === "blogger" && <BloggerSheet onClose={closeSheet} />}
    </div>
  );
}

// ─── INSTALL SCREEN ───────────────────────────────────────────────────────────
function InstallScreen({ onDone }) {
  const [step, setStep] = useState(1);
  const [form, setForm] = useState({ dbHost: "localhost", dbPort: "3306", dbName: "", dbUser: "", dbPass: "", adminName: "", adminEmail: "", adminPass: "" });
  const [installing, setInstalling] = useState(false);

  const runInstall = () => {
    setInstalling(true);
    setTimeout(() => { setInstalling(false); onDone(); }, 2500);
  };

  return (
    <div style={{ minHeight: "100vh", background: T.bg, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: 24 }}>
      <style>{gbl}</style>
      <div style={{ textAlign: "center", marginBottom: 32 }}>
        <div style={{ fontSize: 48, marginBottom: 8 }}>🔒</div>
        <div style={{ fontWeight: 800, fontSize: 24, color: T.gold }}>CAPITAL LOCK</div>
        <div style={{ color: T.muted, fontSize: 13, marginTop: 4 }}>Installation Wizard</div>
      </div>

      <div style={{ width: "100%", maxWidth: 500 }}>
        {/* Steps */}
        <div style={{ display: "flex", justifyContent: "center", gap: 8, marginBottom: 28 }}>
          {[1, 2, 3].map(s => (
            <div key={s} style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <div style={{
                width: 32, height: 32, borderRadius: "50%",
                background: s <= step ? T.gold : T.surface,
                border: `2px solid ${s <= step ? T.gold : T.border}`,
                display: "flex", alignItems: "center", justifyContent: "center",
                fontWeight: 700, fontSize: 13, color: s <= step ? T.bg : T.muted,
              }}>{s < step ? "✓" : s}</div>
              {s < 3 && <div style={{ width: 32, height: 2, background: s < step ? T.gold : T.border }} />}
            </div>
          ))}
        </div>

        {step === 1 && (
          <div className="fade-in">
            <div style={{ fontWeight: 700, fontSize: 18, marginBottom: 16 }}>🗄️ Database Configuration</div>
            <Input label="DB HOST" value={form.dbHost} onChange={v => setForm(f => ({ ...f, dbHost: v }))} placeholder="localhost" />
            <Input label="DB PORT" value={form.dbPort} onChange={v => setForm(f => ({ ...f, dbPort: v }))} placeholder="3306" />
            <Input label="DATABASE NAME" value={form.dbName} onChange={v => setForm(f => ({ ...f, dbName: v }))} placeholder="capitallock_db" />
            <Input label="DB USERNAME" value={form.dbUser} onChange={v => setForm(f => ({ ...f, dbUser: v }))} placeholder="root" />
            <Input label="DB PASSWORD" type="password" value={form.dbPass} onChange={v => setForm(f => ({ ...f, dbPass: v }))} placeholder="••••••••" />
            <Btn full onClick={() => setStep(2)}>Next: Admin Account →</Btn>
          </div>
        )}
        {step === 2 && (
          <div className="fade-in">
            <div style={{ fontWeight: 700, fontSize: 18, marginBottom: 16 }}>👤 Admin Account Setup</div>
            <Input label="ADMIN FULL NAME" value={form.adminName} onChange={v => setForm(f => ({ ...f, adminName: v }))} placeholder="Super Administrator" />
            <Input label="ADMIN EMAIL" type="email" value={form.adminEmail} onChange={v => setForm(f => ({ ...f, adminEmail: v }))} placeholder="admin@capitallock.ug" />
            <Input label="ADMIN PASSWORD" type="password" value={form.adminPass} onChange={v => setForm(f => ({ ...f, adminPass: v }))} placeholder="Create a strong password" />
            <div style={{ display: "flex", gap: 10 }}>
              <Btn variant="ghost" onClick={() => setStep(1)}>← Back</Btn>
              <Btn full onClick={() => setStep(3)}>Next: Review & Install →</Btn>
            </div>
          </div>
        )}
        {step === 3 && (
          <div className="fade-in">
            <div style={{ fontWeight: 700, fontSize: 18, marginBottom: 16 }}>✅ Review & Install</div>
            <Card style={{ marginBottom: 20 }}>
              {[
                ["Database Host", form.dbHost || "localhost"],
                ["Database Port", form.dbPort || "3306"],
                ["Database", form.dbName || "(not set)"],
                ["Admin Name", form.adminName || "(not set)"],
                ["Admin Email", form.adminEmail || "(not set)"],
              ].map(([k, v]) => (
                <div key={k} style={{ display: "flex", justifyContent: "space-between", padding: "8px 0", borderBottom: `1px solid ${T.border}` }}>
                  <span style={{ color: T.muted, fontSize: 13 }}>{k}</span>
                  <span style={{ fontWeight: 600, fontSize: 13 }}>{v}</span>
                </div>
              ))}
            </Card>
            {installing ? (
              <div style={{ textAlign: "center", padding: 24 }}>
                <div style={{ fontSize: 40, animation: "spin 1s linear infinite", display: "inline-block", marginBottom: 12 }}>⚙️</div>
                <div style={{ color: T.muted }}>Installing Capital Lock…</div>
              </div>
            ) : (
              <div style={{ display: "flex", gap: 10 }}>
                <Btn variant="ghost" onClick={() => setStep(2)}>← Back</Btn>
                <Btn full onClick={runInstall}>🚀 Install Now</Btn>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}