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

/* ═══════════════════════════════════════════
   SIMPLO COURT — DUAL INTERFACE
   1. Mobile Booking App (Penyewa)
   2. Tablet Room Management Display (Venue)
   ═══════════════════════════════════════════ */

const BRAND = {
  primary: "#004AAD",
  primaryDark: "#00296B",
  primaryMid: "#1B5FCC",
  primaryLight: "#4B8BF5",
  primaryPale: "#EBF2FF",
  primaryTint: "#F6F9FF",
  accent: "#00D4A1",
  accentDark: "#00B087",
  accentPale: "#E6FBF5",
  orange: "#FF7A3D",
  orangePale: "#FFF2EC",
  red: "#EF4444",
  redPale: "#FEF2F2",
  yellow: "#F59E0B",
  yellowPale: "#FFFBEB",
  dark: "#0A1628",
  darkCard: "#111D33",
  darkBorder: "#1E3050",
  darkMuted: "#3A5070",
  darkText: "#8BA3C7",
  text: "#1A2340",
  textSoft: "#5B6B8A",
  textMuted: "#94A3BF",
  border: "#E2E8F4",
  bg: "#F4F6FB",
  white: "#FFFFFF",
};

const COURTS = [
  { id: 1, name: "Court A", type: "Full Court", capacity: 10, priceWeekday: 150000, priceWeekend: 200000, amenities: ["Lighting", "Scoreboard", "AC", "Sound System"], image: "🏀" },
  { id: 2, name: "Court B", type: "Half Court", capacity: 6, priceWeekday: 100000, priceWeekend: 130000, amenities: ["Lighting", "AC"], image: "🏀" },
  { id: 3, name: "Court C", type: "Full Court", capacity: 10, priceWeekday: 150000, priceWeekend: 200000, amenities: ["Lighting", "Scoreboard", "AC", "Sound System", "CCTV"], image: "🏀" },
];

const TIMESLOTS = [
  { time: "06:00", label: "06:00" }, { time: "07:00", label: "07:00" },
  { time: "08:00", label: "08:00" }, { time: "09:00", label: "09:00" },
  { time: "10:00", label: "10:00" }, { time: "11:00", label: "11:00" },
  { time: "12:00", label: "12:00" }, { time: "13:00", label: "13:00" },
  { time: "14:00", label: "14:00" }, { time: "15:00", label: "15:00" },
  { time: "16:00", label: "16:00" }, { time: "17:00", label: "17:00" },
  { time: "18:00", label: "18:00" }, { time: "19:00", label: "19:00" },
  { time: "20:00", label: "20:00" }, { time: "21:00", label: "21:00" },
  { time: "22:00", label: "22:00" },
];

const BOOKED_SLOTS = {
  1: ["08:00", "09:00", "14:00", "15:00", "19:00", "20:00", "21:00"],
  2: ["10:00", "11:00", "18:00", "19:00"],
  3: ["07:00", "08:00", "09:00", "16:00", "17:00", "20:00", "21:00", "22:00"],
};

const TABLET_SCHEDULE = [
  { court: "Court A", time: "08:00 - 10:00", tenant: "Raka & Friends", status: "completed", players: 8 },
  { court: "Court A", time: "14:00 - 16:00", tenant: "BasketID Club", status: "active", players: 10 },
  { court: "Court A", time: "19:00 - 22:00", tenant: "Night Hoopers", status: "upcoming", players: 10 },
  { court: "Court B", time: "10:00 - 12:00", tenant: "Kevin Santoso", status: "completed", players: 4 },
  { court: "Court B", time: "18:00 - 20:00", tenant: "Pickup Game", status: "upcoming", players: 6 },
  { court: "Court C", time: "07:00 - 10:00", tenant: "Morning Drills", status: "completed", players: 6 },
  { court: "Court C", time: "16:00 - 18:00", tenant: "SMA 5 Training", status: "active", players: 10 },
  { court: "Court C", time: "20:00 - 23:00", tenant: "Pro League Practice", status: "upcoming", players: 10 },
];

const PAYMENT_METHODS = [
  { id: "qris", name: "QRIS", icon: "📱", desc: "Scan & pay" },
  { id: "va_bca", name: "VA BCA", icon: "🏦", desc: "Transfer BCA" },
  { id: "va_mandiri", name: "VA Mandiri", icon: "🏦", desc: "Transfer Mandiri" },
  { id: "gopay", name: "GoPay", icon: "💚", desc: "Gojek wallet" },
  { id: "ovo", name: "OVO", icon: "💜", desc: "OVO wallet" },
  { id: "dana", name: "DANA", icon: "💙", desc: "DANA wallet" },
];

const formatRp = (n) => `Rp ${n.toLocaleString("id-ID")}`;
const getDayName = (d) => ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"][d.getDay()];
const isWeekend = (d) => d.getDay() === 0 || d.getDay() === 6;

/* ═══════════════════════════════════════════
   MOBILE BOOKING APP
   ═══════════════════════════════════════════ */
function MobileBookingApp() {
  const [step, setStep] = useState(0); // 0=courts, 1=detail, 2=timeslot, 3=confirm, 4=payment, 5=success
  const [selectedCourt, setSelectedCourt] = useState(null);
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [selectedSlots, setSelectedSlots] = useState([]);
  const [paymentMethod, setPaymentMethod] = useState(null);
  const [isProcessing, setIsProcessing] = useState(false);
  const [animIn, setAnimIn] = useState(true);

  const dates = Array.from({ length: 7 }, (_, i) => {
    const d = new Date();
    d.setDate(d.getDate() + i);
    return d;
  });

  const goStep = (s) => {
    setAnimIn(false);
    setTimeout(() => { setStep(s); setAnimIn(true); }, 150);
  };

  const toggleSlot = (time) => {
    if (BOOKED_SLOTS[selectedCourt?.id]?.includes(time)) return;
    setSelectedSlots((prev) =>
      prev.includes(time) ? prev.filter((t) => t !== time) : [...prev, time].sort()
    );
  };

  const court = selectedCourt;
  const pricePerHour = court ? (isWeekend(selectedDate) ? court.priceWeekend : court.priceWeekday) : 0;
  const totalPrice = selectedSlots.length * pricePerHour;
  const serviceFee = Math.round(totalPrice * 0.03);

  const handlePay = () => {
    setIsProcessing(true);
    setTimeout(() => { setIsProcessing(false); goStep(5); }, 2000);
  };

  return (
    <div style={{
      width: 375, height: 812, background: BRAND.bg, borderRadius: 40, overflow: "hidden",
      boxShadow: "0 25px 80px rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.15)",
      position: "relative", display: "flex", flexDirection: "column",
      border: "8px solid #1a1a2e",
    }}>
      {/* Status Bar */}
      <div style={{
        background: step >= 4 ? BRAND.primaryDark : BRAND.white, padding: "8px 24px 6px",
        display: "flex", justifyContent: "space-between", fontSize: 12, fontWeight: 600,
        color: step >= 4 ? "#fff" : BRAND.text, flexShrink: 0,
      }}>
        <span>9:41</span>
        <div style={{ display: "flex", gap: 4, alignItems: "center" }}>
          <span style={{ fontSize: 10 }}>●●●●</span>
          <span style={{ fontSize: 10 }}>WiFi</span>
          <span>🔋</span>
        </div>
      </div>

      {/* Content */}
      <div style={{
        flex: 1, overflow: "auto", transition: "opacity 0.15s, transform 0.15s",
        opacity: animIn ? 1 : 0, transform: animIn ? "translateY(0)" : "translateY(8px)",
      }}>
        {/* ── STEP 0: Court Listing ── */}
        {step === 0 && (
          <div>
            <div style={{ padding: "20px 20px 16px" }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
                <div>
                  <div style={{ fontSize: 13, color: BRAND.textMuted, fontWeight: 500 }}>Selamat datang 👋</div>
                  <div style={{ fontSize: 22, fontWeight: 800, color: BRAND.text, letterSpacing: -0.5 }}>Arena Basket</div>
                </div>
                <div style={{
                  width: 40, height: 40, borderRadius: 12, background: BRAND.primaryPale,
                  display: "flex", alignItems: "center", justifyContent: "center", fontSize: 18,
                }}>
                  👤
                </div>
              </div>

              {/* Search */}
              <div style={{
                background: BRAND.white, borderRadius: 14, padding: "12px 16px",
                border: `1px solid ${BRAND.border}`, display: "flex", alignItems: "center", gap: 10,
                boxShadow: "0 2px 8px rgba(0,0,0,0.04)",
              }}>
                <span style={{ fontSize: 16, opacity: 0.4 }}>🔍</span>
                <span style={{ fontSize: 14, color: BRAND.textMuted }}>Cari lapangan...</span>
              </div>
            </div>

            {/* Date Selector */}
            <div style={{ padding: "0 20px 14px" }}>
              <div style={{ display: "flex", gap: 8, overflowX: "auto", paddingBottom: 4 }}>
                {dates.map((d, i) => {
                  const isSelected = d.toDateString() === selectedDate.toDateString();
                  return (
                    <button key={i} onClick={() => setSelectedDate(d)} style={{
                      minWidth: 52, padding: "8px 4px", borderRadius: 12, border: "none", cursor: "pointer",
                      background: isSelected ? BRAND.primary : BRAND.white,
                      color: isSelected ? "#fff" : BRAND.text,
                      boxShadow: isSelected ? `0 4px 12px ${BRAND.primary}40` : "0 1px 3px rgba(0,0,0,0.06)",
                      transition: "all 0.2s", textAlign: "center",
                    }}>
                      <div style={{ fontSize: 10, fontWeight: 600, opacity: 0.7, textTransform: "uppercase" }}>{getDayName(d)}</div>
                      <div style={{ fontSize: 18, fontWeight: 800, margin: "2px 0" }}>{d.getDate()}</div>
                      <div style={{ fontSize: 9, opacity: 0.6 }}>{d.toLocaleDateString("id-ID", { month: "short" })}</div>
                    </button>
                  );
                })}
              </div>
            </div>

            {/* Courts */}
            <div style={{ padding: "0 20px 100px" }}>
              <div style={{ fontSize: 15, fontWeight: 700, marginBottom: 12, color: BRAND.text }}>Pilih Lapangan</div>
              {COURTS.map((c) => {
                const booked = BOOKED_SLOTS[c.id]?.length || 0;
                const available = TIMESLOTS.length - booked;
                return (
                  <button key={c.id} onClick={() => { setSelectedCourt(c); setSelectedSlots([]); goStep(1); }} style={{
                    width: "100%", background: BRAND.white, borderRadius: 16, padding: 0, border: `1px solid ${BRAND.border}`,
                    marginBottom: 12, cursor: "pointer", overflow: "hidden", textAlign: "left",
                    boxShadow: "0 2px 8px rgba(0,0,0,0.04)", transition: "all 0.2s",
                  }}>
                    {/* Court Image Placeholder */}
                    <div style={{
                      height: 100, background: `linear-gradient(135deg, ${BRAND.primaryDark}, ${BRAND.primaryMid})`,
                      display: "flex", alignItems: "center", justifyContent: "center", position: "relative",
                    }}>
                      <span style={{ fontSize: 40, filter: "grayscale(0.3)" }}>{c.image}</span>
                      <div style={{
                        position: "absolute", top: 10, right: 10, background: "rgba(0,0,0,0.4)",
                        borderRadius: 8, padding: "4px 10px", fontSize: 11, color: "#fff", fontWeight: 600,
                        backdropFilter: "blur(8px)",
                      }}>
                        {c.type}
                      </div>
                      <div style={{
                        position: "absolute", bottom: 10, left: 10, background: available > 5 ? BRAND.accent : BRAND.orange,
                        borderRadius: 8, padding: "3px 8px", fontSize: 10, color: "#fff", fontWeight: 700,
                      }}>
                        {available} slot tersedia
                      </div>
                    </div>
                    <div style={{ padding: "14px 16px" }}>
                      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                        <div>
                          <div style={{ fontSize: 16, fontWeight: 700, color: BRAND.text }}>{c.name}</div>
                          <div style={{ fontSize: 12, color: BRAND.textMuted, marginTop: 2 }}>
                            Max {c.capacity} orang · {c.amenities.length} fasilitas
                          </div>
                        </div>
                        <div style={{ textAlign: "right" }}>
                          <div style={{ fontSize: 16, fontWeight: 800, color: BRAND.primary }}>{formatRp(c.priceWeekday)}</div>
                          <div style={{ fontSize: 10, color: BRAND.textMuted }}>/jam</div>
                        </div>
                      </div>
                      {/* Amenity chips */}
                      <div style={{ display: "flex", gap: 4, marginTop: 10, flexWrap: "wrap" }}>
                        {c.amenities.map((a) => (
                          <span key={a} style={{
                            fontSize: 10, padding: "3px 8px", background: BRAND.primaryPale,
                            color: BRAND.primary, borderRadius: 6, fontWeight: 600,
                          }}>{a}</span>
                        ))}
                      </div>
                    </div>
                  </button>
                );
              })}
            </div>
          </div>
        )}

        {/* ── STEP 1: Court Detail ── */}
        {step === 1 && court && (
          <div>
            <div style={{
              height: 200, background: `linear-gradient(135deg, ${BRAND.primaryDark}, ${BRAND.primaryMid})`,
              display: "flex", alignItems: "center", justifyContent: "center", position: "relative",
            }}>
              <span style={{ fontSize: 64 }}>{court.image}</span>
              <button onClick={() => goStep(0)} style={{
                position: "absolute", top: 12, left: 12, width: 36, height: 36, borderRadius: 12,
                background: "rgba(0,0,0,0.3)", border: "none", color: "#fff", fontSize: 18, cursor: "pointer",
                backdropFilter: "blur(8px)", display: "flex", alignItems: "center", justifyContent: "center",
              }}>←</button>
            </div>
            <div style={{ padding: "20px 20px 100px", marginTop: -20, background: BRAND.bg, borderRadius: "20px 20px 0 0", position: "relative" }}>
              <div style={{ fontSize: 22, fontWeight: 800, color: BRAND.text }}>{court.name}</div>
              <div style={{ fontSize: 13, color: BRAND.textSoft, marginTop: 4 }}>{court.type} · Max {court.capacity} pemain</div>

              <div style={{ display: "flex", gap: 8, marginTop: 16 }}>
                <div style={{ flex: 1, background: BRAND.white, borderRadius: 12, padding: "12px 14px", border: `1px solid ${BRAND.border}`, textAlign: "center" }}>
                  <div style={{ fontSize: 10, color: BRAND.textMuted, fontWeight: 600 }}>WEEKDAY</div>
                  <div style={{ fontSize: 16, fontWeight: 800, color: BRAND.primary, marginTop: 4 }}>{formatRp(court.priceWeekday)}</div>
                  <div style={{ fontSize: 10, color: BRAND.textMuted }}>/jam</div>
                </div>
                <div style={{ flex: 1, background: BRAND.white, borderRadius: 12, padding: "12px 14px", border: `1px solid ${BRAND.border}`, textAlign: "center" }}>
                  <div style={{ fontSize: 10, color: BRAND.textMuted, fontWeight: 600 }}>WEEKEND</div>
                  <div style={{ fontSize: 16, fontWeight: 800, color: BRAND.orange, marginTop: 4 }}>{formatRp(court.priceWeekend)}</div>
                  <div style={{ fontSize: 10, color: BRAND.textMuted }}>/jam</div>
                </div>
              </div>

              <div style={{ marginTop: 20, fontSize: 14, fontWeight: 700, color: BRAND.text }}>Fasilitas</div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginTop: 10 }}>
                {court.amenities.map((a) => (
                  <div key={a} style={{
                    background: BRAND.white, borderRadius: 10, padding: "10px 12px", border: `1px solid ${BRAND.border}`,
                    fontSize: 12, fontWeight: 600, color: BRAND.text, display: "flex", alignItems: "center", gap: 8,
                  }}>
                    <span style={{ fontSize: 14 }}>
                      {a === "Lighting" ? "💡" : a === "AC" ? "❄️" : a === "Scoreboard" ? "📊" : a === "Sound System" ? "🔊" : a === "CCTV" ? "📹" : "✅"}
                    </span>
                    {a}
                  </div>
                ))}
              </div>

              <div style={{ marginTop: 20, fontSize: 14, fontWeight: 700, color: BRAND.text, marginBottom: 8 }}>Ulasan</div>
              {[
                { name: "Raka S.", stars: 5, text: "Lapangan bersih, lighting bagus banget!" },
                { name: "Deni P.", stars: 4, text: "AC dingin, cuma parkir agak sempit" },
              ].map((r, i) => (
                <div key={i} style={{
                  background: BRAND.white, borderRadius: 12, padding: "12px 14px", border: `1px solid ${BRAND.border}`, marginBottom: 8,
                }}>
                  <div style={{ display: "flex", justifyContent: "space-between" }}>
                    <span style={{ fontSize: 13, fontWeight: 700 }}>{r.name}</span>
                    <span style={{ fontSize: 12 }}>{"⭐".repeat(r.stars)}</span>
                  </div>
                  <div style={{ fontSize: 12, color: BRAND.textSoft, marginTop: 4 }}>{r.text}</div>
                </div>
              ))}
            </div>
            {/* CTA */}
            <div style={{
              position: "absolute", bottom: 0, left: 0, right: 0, padding: "12px 20px 28px",
              background: "linear-gradient(transparent, #F4F6FB 30%)",
            }}>
              <button onClick={() => goStep(2)} style={{
                width: "100%", padding: "16px", borderRadius: 14, border: "none", cursor: "pointer",
                background: `linear-gradient(135deg, ${BRAND.primary}, ${BRAND.primaryMid})`,
                color: "#fff", fontSize: 15, fontWeight: 700, boxShadow: `0 6px 20px ${BRAND.primary}50`,
              }}>
                Pilih Jadwal →
              </button>
            </div>
          </div>
        )}

        {/* ── STEP 2: Time Slot Selection ── */}
        {step === 2 && court && (
          <div>
            {/* Header */}
            <div style={{
              background: BRAND.white, padding: "14px 20px", borderBottom: `1px solid ${BRAND.border}`,
              display: "flex", alignItems: "center", gap: 12,
            }}>
              <button onClick={() => goStep(1)} style={{
                width: 32, height: 32, borderRadius: 10, background: BRAND.primaryPale, border: "none",
                cursor: "pointer", fontSize: 14, display: "flex", alignItems: "center", justifyContent: "center",
              }}>←</button>
              <div>
                <div style={{ fontSize: 16, fontWeight: 700 }}>{court.name}</div>
                <div style={{ fontSize: 11, color: BRAND.textMuted }}>Pilih jam yang tersedia</div>
              </div>
            </div>

            {/* Date Selector */}
            <div style={{ padding: "14px 20px 8px" }}>
              <div style={{ display: "flex", gap: 6, overflowX: "auto" }}>
                {dates.map((d, i) => {
                  const sel = d.toDateString() === selectedDate.toDateString();
                  return (
                    <button key={i} onClick={() => { setSelectedDate(d); setSelectedSlots([]); }} style={{
                      minWidth: 48, padding: "6px 4px", borderRadius: 10, border: "none", cursor: "pointer",
                      background: sel ? BRAND.primary : BRAND.white, color: sel ? "#fff" : BRAND.text, textAlign: "center",
                      boxShadow: sel ? `0 3px 10px ${BRAND.primary}40` : "0 1px 3px rgba(0,0,0,0.06)",
                    }}>
                      <div style={{ fontSize: 9, fontWeight: 600, opacity: 0.7 }}>{getDayName(d)}</div>
                      <div style={{ fontSize: 16, fontWeight: 800, margin: "1px 0" }}>{d.getDate()}</div>
                    </button>
                  );
                })}
              </div>
              {isWeekend(selectedDate) && (
                <div style={{
                  marginTop: 10, padding: "6px 10px", background: BRAND.orangePale, borderRadius: 8,
                  fontSize: 11, color: BRAND.orange, fontWeight: 600, display: "inline-block",
                }}>
                  🔥 Weekend rate: {formatRp(court.priceWeekend)}/jam
                </div>
              )}
            </div>

            {/* Legend */}
            <div style={{ padding: "6px 20px 10px", display: "flex", gap: 12 }}>
              {[
                { color: BRAND.accent, label: "Tersedia" },
                { color: BRAND.primary, label: "Dipilih" },
                { color: "#D1D5DB", label: "Terisi" },
              ].map((l) => (
                <div key={l.label} style={{ display: "flex", alignItems: "center", gap: 4, fontSize: 10, color: BRAND.textMuted }}>
                  <div style={{ width: 10, height: 10, borderRadius: 3, background: l.color }} />
                  {l.label}
                </div>
              ))}
            </div>

            {/* Time Slots Grid */}
            <div style={{ padding: "0 20px 120px" }}>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8 }}>
                {TIMESLOTS.map((slot) => {
                  const isBooked = BOOKED_SLOTS[court.id]?.includes(slot.time);
                  const isSelected = selectedSlots.includes(slot.time);
                  return (
                    <button key={slot.time} onClick={() => toggleSlot(slot.time)} disabled={isBooked} style={{
                      padding: "14px 8px", borderRadius: 12, border: "none", cursor: isBooked ? "not-allowed" : "pointer",
                      background: isBooked ? "#F1F3F5" : isSelected ? BRAND.primary : BRAND.white,
                      color: isBooked ? "#C4C9D1" : isSelected ? "#fff" : BRAND.text,
                      fontSize: 15, fontWeight: 700, transition: "all 0.15s",
                      boxShadow: isSelected ? `0 4px 14px ${BRAND.primary}40` : isBooked ? "none" : "0 1px 4px rgba(0,0,0,0.06)",
                      transform: isSelected ? "scale(1.03)" : "scale(1)",
                      textDecoration: isBooked ? "line-through" : "none",
                      opacity: isBooked ? 0.5 : 1,
                    }}>
                      {slot.label}
                      {isBooked && <div style={{ fontSize: 8, marginTop: 2, fontWeight: 500, textDecoration: "none" }}>Terisi</div>}
                    </button>
                  );
                })}
              </div>
            </div>

            {/* Bottom Bar */}
            {selectedSlots.length > 0 && (
              <div style={{
                position: "absolute", bottom: 0, left: 0, right: 0, padding: "14px 20px 28px",
                background: BRAND.white, borderTop: `1px solid ${BRAND.border}`,
                boxShadow: "0 -4px 20px rgba(0,0,0,0.06)",
              }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
                  <div>
                    <div style={{ fontSize: 12, color: BRAND.textMuted }}>{selectedSlots.length} jam dipilih</div>
                    <div style={{ fontSize: 11, color: BRAND.textSoft }}>{selectedSlots[0]} - {parseInt(selectedSlots[selectedSlots.length-1]) + 1}:00</div>
                  </div>
                  <div style={{ fontSize: 20, fontWeight: 800, color: BRAND.primary }}>{formatRp(totalPrice)}</div>
                </div>
                <button onClick={() => goStep(3)} style={{
                  width: "100%", padding: "14px", borderRadius: 14, border: "none", cursor: "pointer",
                  background: `linear-gradient(135deg, ${BRAND.primary}, ${BRAND.primaryMid})`,
                  color: "#fff", fontSize: 15, fontWeight: 700, boxShadow: `0 6px 20px ${BRAND.primary}50`,
                }}>
                  Lanjut ke Pembayaran →
                </button>
              </div>
            )}
          </div>
        )}

        {/* ── STEP 3: Confirmation & Payment ── */}
        {step === 3 && court && (
          <div>
            <div style={{
              background: BRAND.white, padding: "14px 20px", borderBottom: `1px solid ${BRAND.border}`,
              display: "flex", alignItems: "center", gap: 12,
            }}>
              <button onClick={() => goStep(2)} style={{
                width: 32, height: 32, borderRadius: 10, background: BRAND.primaryPale, border: "none",
                cursor: "pointer", fontSize: 14, display: "flex", alignItems: "center", justifyContent: "center",
              }}>←</button>
              <div style={{ fontSize: 16, fontWeight: 700 }}>Konfirmasi Booking</div>
            </div>

            <div style={{ padding: "16px 20px 120px" }}>
              {/* Summary Card */}
              <div style={{
                background: BRAND.white, borderRadius: 16, padding: "18px", border: `1px solid ${BRAND.border}`,
                marginBottom: 14,
              }}>
                <div style={{ display: "flex", gap: 14, alignItems: "center", marginBottom: 14, paddingBottom: 14, borderBottom: `1px solid ${BRAND.border}` }}>
                  <div style={{
                    width: 56, height: 56, borderRadius: 14,
                    background: `linear-gradient(135deg, ${BRAND.primaryDark}, ${BRAND.primaryMid})`,
                    display: "flex", alignItems: "center", justifyContent: "center", fontSize: 28,
                  }}>🏀</div>
                  <div>
                    <div style={{ fontSize: 17, fontWeight: 800, color: BRAND.text }}>{court.name}</div>
                    <div style={{ fontSize: 12, color: BRAND.textMuted }}>{court.type}</div>
                  </div>
                </div>
                {[
                  { label: "Tanggal", value: selectedDate.toLocaleDateString("id-ID", { weekday: "long", day: "numeric", month: "long", year: "numeric" }) },
                  { label: "Waktu", value: `${selectedSlots[0]} - ${parseInt(selectedSlots[selectedSlots.length-1]) + 1}:00` },
                  { label: "Durasi", value: `${selectedSlots.length} jam` },
                ].map((r, i) => (
                  <div key={i} style={{ display: "flex", justifyContent: "space-between", marginBottom: 8, fontSize: 13 }}>
                    <span style={{ color: BRAND.textMuted }}>{r.label}</span>
                    <span style={{ fontWeight: 700, color: BRAND.text }}>{r.value}</span>
                  </div>
                ))}
              </div>

              {/* Payment Method */}
              <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 10 }}>Metode Pembayaran</div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, marginBottom: 14 }}>
                {PAYMENT_METHODS.map((pm) => (
                  <button key={pm.id} onClick={() => setPaymentMethod(pm.id)} style={{
                    padding: "12px 8px", borderRadius: 12, border: paymentMethod === pm.id ? `2px solid ${BRAND.primary}` : `1px solid ${BRAND.border}`,
                    background: paymentMethod === pm.id ? BRAND.primaryPale : BRAND.white, cursor: "pointer", textAlign: "center",
                    transition: "all 0.15s",
                  }}>
                    <div style={{ fontSize: 20 }}>{pm.icon}</div>
                    <div style={{ fontSize: 11, fontWeight: 700, color: BRAND.text, marginTop: 4 }}>{pm.name}</div>
                    <div style={{ fontSize: 9, color: BRAND.textMuted }}>{pm.desc}</div>
                  </button>
                ))}
              </div>

              {/* Price Breakdown */}
              <div style={{
                background: BRAND.white, borderRadius: 14, padding: "16px", border: `1px solid ${BRAND.border}`,
              }}>
                <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 10 }}>Rincian Harga</div>
                {[
                  { label: `${selectedSlots.length}x ${formatRp(pricePerHour)}`, value: formatRp(totalPrice) },
                  { label: "Biaya layanan (3%)", value: formatRp(serviceFee) },
                ].map((r, i) => (
                  <div key={i} style={{ display: "flex", justifyContent: "space-between", marginBottom: 6, fontSize: 12, color: BRAND.textSoft }}>
                    <span>{r.label}</span><span>{r.value}</span>
                  </div>
                ))}
                <div style={{ borderTop: `1px dashed ${BRAND.border}`, margin: "10px 0", paddingTop: 10, display: "flex", justifyContent: "space-between" }}>
                  <span style={{ fontSize: 14, fontWeight: 700 }}>Total</span>
                  <span style={{ fontSize: 18, fontWeight: 800, color: BRAND.primary }}>{formatRp(totalPrice + serviceFee)}</span>
                </div>
              </div>
            </div>

            {/* Pay Button */}
            <div style={{
              position: "absolute", bottom: 0, left: 0, right: 0, padding: "14px 20px 28px",
              background: BRAND.white, borderTop: `1px solid ${BRAND.border}`,
            }}>
              <button onClick={handlePay} disabled={!paymentMethod} style={{
                width: "100%", padding: "16px", borderRadius: 14, border: "none",
                cursor: paymentMethod ? "pointer" : "not-allowed",
                background: paymentMethod ? `linear-gradient(135deg, ${BRAND.accent}, ${BRAND.accentDark})` : "#E2E8F4",
                color: paymentMethod ? "#fff" : "#94A3BF", fontSize: 15, fontWeight: 700,
                boxShadow: paymentMethod ? `0 6px 20px ${BRAND.accent}50` : "none",
              }}>
                💳 Bayar {formatRp(totalPrice + serviceFee)}
              </button>
            </div>
          </div>
        )}

        {/* ── STEP 4: Processing ── */}
        {step === 4 && (
          <div style={{
            height: "100%", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
            background: `linear-gradient(135deg, ${BRAND.primaryDark}, ${BRAND.primary})`, color: "#fff",
          }}>
            <div style={{ fontSize: 48, marginBottom: 16, animation: "spin 1.5s linear infinite" }}>⏳</div>
            <div style={{ fontSize: 18, fontWeight: 700 }}>Memproses Pembayaran...</div>
            <div style={{ fontSize: 13, opacity: 0.7, marginTop: 6 }}>Mohon tunggu sebentar</div>
          </div>
        )}

        {/* ── STEP 5: Success ── */}
        {step === 5 && court && (
          <div style={{ padding: "40px 20px 20px", textAlign: "center" }}>
            <div style={{
              width: 80, height: 80, borderRadius: "50%", background: BRAND.accentPale,
              display: "flex", alignItems: "center", justifyContent: "center", fontSize: 40, margin: "0 auto 16px",
              boxShadow: `0 8px 30px ${BRAND.accent}30`,
            }}>✅</div>
            <div style={{ fontSize: 22, fontWeight: 800, color: BRAND.text }}>Booking Berhasil!</div>
            <div style={{ fontSize: 13, color: BRAND.textMuted, marginTop: 6 }}>Kode booking kamu sudah dikirim via WhatsApp</div>

            {/* QR Code area */}
            <div style={{
              margin: "24px auto", width: 180, height: 180, background: BRAND.white, borderRadius: 20,
              border: `2px solid ${BRAND.border}`, display: "flex", flexDirection: "column",
              alignItems: "center", justifyContent: "center", boxShadow: "0 4px 20px rgba(0,0,0,0.06)",
            }}>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(7,1fr)", gap: 2, width: 100, marginBottom: 8 }}>
                {Array.from({ length: 49 }).map((_, i) => (
                  <div key={i} style={{
                    width: 12, height: 12, borderRadius: 2,
                    background: Math.random() > 0.4 ? BRAND.primaryDark : "transparent",
                  }} />
                ))}
              </div>
              <div style={{ fontSize: 11, fontWeight: 700, color: BRAND.primary, letterSpacing: 2 }}>SC-2026-0847</div>
            </div>
            <div style={{ fontSize: 11, color: BRAND.textMuted }}>Tunjukkan QR ini saat check-in di venue</div>

            {/* Booking summary */}
            <div style={{
              background: BRAND.white, borderRadius: 14, padding: "16px", border: `1px solid ${BRAND.border}`,
              margin: "20px 0", textAlign: "left",
            }}>
              {[
                { label: "Lapangan", value: court.name },
                { label: "Tanggal", value: selectedDate.toLocaleDateString("id-ID", { weekday: "short", day: "numeric", month: "short" }) },
                { label: "Waktu", value: `${selectedSlots[0]} - ${parseInt(selectedSlots[selectedSlots.length-1]) + 1}:00` },
                { label: "Total", value: formatRp(totalPrice + serviceFee), bold: true },
              ].map((r, i) => (
                <div key={i} style={{ display: "flex", justifyContent: "space-between", marginBottom: 6, fontSize: 13 }}>
                  <span style={{ color: BRAND.textMuted }}>{r.label}</span>
                  <span style={{ fontWeight: r.bold ? 800 : 600, color: r.bold ? BRAND.primary : BRAND.text }}>{r.value}</span>
                </div>
              ))}
            </div>

            <div style={{ display: "flex", gap: 8 }}>
              <button style={{
                flex: 1, padding: "12px", borderRadius: 12, border: `1px solid ${BRAND.border}`,
                background: BRAND.white, cursor: "pointer", fontSize: 12, fontWeight: 700, color: BRAND.text,
              }}>
                📅 Add to Calendar
              </button>
              <button style={{
                flex: 1, padding: "12px", borderRadius: 12, border: "none",
                background: "#25D366", cursor: "pointer", fontSize: 12, fontWeight: 700, color: "#fff",
              }}>
                💬 Share via WA
              </button>
            </div>

            <button onClick={() => { setStep(0); setSelectedCourt(null); setSelectedSlots([]); setPaymentMethod(null); }} style={{
              width: "100%", padding: "14px", borderRadius: 14, border: "none", cursor: "pointer",
              background: BRAND.primaryPale, color: BRAND.primary, fontSize: 14, fontWeight: 700, marginTop: 12,
            }}>
              🏠 Kembali ke Home
            </button>
          </div>
        )}
      </div>

      {/* Bottom Navigation (step 0 only) */}
      {step === 0 && (
        <div style={{
          position: "absolute", bottom: 0, left: 0, right: 0, background: BRAND.white,
          borderTop: `1px solid ${BRAND.border}`, padding: "8px 16px 24px",
          display: "flex", justifyContent: "space-around",
        }}>
          {[
            { icon: "🏠", label: "Home", active: true },
            { icon: "📅", label: "Booking", active: false },
            { icon: "🔔", label: "Notifikasi", active: false },
            { icon: "👤", label: "Profil", active: false },
          ].map((nav) => (
            <div key={nav.label} style={{
              textAlign: "center", fontSize: 10, fontWeight: 600,
              color: nav.active ? BRAND.primary : BRAND.textMuted, cursor: "pointer",
            }}>
              <div style={{ fontSize: 20, marginBottom: 2 }}>{nav.icon}</div>
              {nav.label}
            </div>
          ))}
        </div>
      )}

      <style>{`@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`}</style>
    </div>
  );
}

/* ═══════════════════════════════════════════
   TABLET ROOM MANAGEMENT DISPLAY
   ═══════════════════════════════════════════ */
function TabletRoomDisplay() {
  const [currentTime, setCurrentTime] = useState(new Date());
  const [selectedCourt, setSelectedCourt] = useState("all");

  useEffect(() => {
    const t = setInterval(() => setCurrentTime(new Date()), 1000);
    return () => clearInterval(t);
  }, []);

  const courtStatuses = [
    {
      name: "Court A", status: "active", tenant: "BasketID Club", timeLeft: "1j 23m",
      progress: 58, devices: { lights: true, ac: true, scoreboard: true, door: "locked" },
    },
    {
      name: "Court B", status: "idle", tenant: null, timeLeft: null,
      progress: 0, devices: { lights: false, ac: false, scoreboard: false, door: "locked" },
    },
    {
      name: "Court C", status: "active", tenant: "SMA 5 Training", timeLeft: "47m",
      progress: 72, devices: { lights: true, ac: true, scoreboard: false, door: "unlocked" },
    },
  ];

  const filteredSchedule = selectedCourt === "all" ? TABLET_SCHEDULE : TABLET_SCHEDULE.filter(s => s.court === selectedCourt);

  const statusColor = (s) => s === "active" ? BRAND.accent : s === "upcoming" ? BRAND.primary : BRAND.textMuted;
  const statusBg = (s) => s === "active" ? BRAND.accentPale : s === "upcoming" ? BRAND.primaryPale : "#F3F4F6";
  const statusLabel = (s) => s === "active" ? "BERLANGSUNG" : s === "upcoming" ? "AKAN DATANG" : "SELESAI";

  return (
    <div style={{
      width: 1024, height: 680, background: BRAND.dark, borderRadius: 20, overflow: "hidden",
      boxShadow: "0 25px 80px rgba(0,0,0,0.4)", display: "flex", flexDirection: "column",
      border: "6px solid #2a2a3e", fontFamily: "'Segoe UI', -apple-system, sans-serif",
      color: "#fff",
    }}>
      {/* Top Bar */}
      <div style={{
        background: BRAND.dark, padding: "16px 24px", display: "flex", justifyContent: "space-between",
        alignItems: "center", borderBottom: `1px solid ${BRAND.darkBorder}`, flexShrink: 0,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <div style={{
            background: `linear-gradient(135deg, ${BRAND.primary}, ${BRAND.primaryLight})`,
            borderRadius: 10, padding: "6px 14px", fontSize: 14, fontWeight: 800, letterSpacing: 0.5,
          }}>
            SIMPLO
          </div>
          <div>
            <div style={{ fontSize: 16, fontWeight: 700 }}>Arena Basket — Room Management</div>
            <div style={{ fontSize: 11, color: BRAND.darkText }}>Live Court Status & Schedule</div>
          </div>
        </div>
        <div style={{ textAlign: "right" }}>
          <div style={{ fontSize: 28, fontWeight: 800, letterSpacing: -1, fontVariantNumeric: "tabular-nums" }}>
            {currentTime.toLocaleTimeString("id-ID", { hour: "2-digit", minute: "2-digit", second: "2-digit" })}
          </div>
          <div style={{ fontSize: 11, color: BRAND.darkText }}>
            {currentTime.toLocaleDateString("id-ID", { weekday: "long", day: "numeric", month: "long", year: "numeric" })}
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div style={{ flex: 1, display: "flex", overflow: "hidden" }}>
        {/* Left: Court Status Cards */}
        <div style={{ width: 360, padding: "16px", borderRight: `1px solid ${BRAND.darkBorder}`, overflowY: "auto", flexShrink: 0 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: BRAND.darkText, textTransform: "uppercase", letterSpacing: 1.5, marginBottom: 12 }}>
            Status Lapangan
          </div>
          {courtStatuses.map((c) => (
            <div key={c.name} style={{
              background: BRAND.darkCard, borderRadius: 14, padding: "16px", marginBottom: 10,
              border: `1px solid ${c.status === "active" ? BRAND.accent + "40" : BRAND.darkBorder}`,
              position: "relative", overflow: "hidden",
            }}>
              {c.status === "active" && (
                <div style={{
                  position: "absolute", top: 0, left: 0, right: 0, height: 3,
                  background: `linear-gradient(90deg, ${BRAND.accent}, ${BRAND.accentDark})`,
                }} />
              )}
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
                <div style={{ fontSize: 16, fontWeight: 800 }}>{c.name}</div>
                <div style={{
                  fontSize: 9, fontWeight: 800, letterSpacing: 1, textTransform: "uppercase",
                  padding: "3px 8px", borderRadius: 6,
                  background: c.status === "active" ? `${BRAND.accent}20` : c.status === "idle" ? `${BRAND.darkMuted}30` : "",
                  color: c.status === "active" ? BRAND.accent : BRAND.darkText,
                }}>
                  {c.status === "active" ? "● AKTIF" : "○ IDLE"}
                </div>
              </div>

              {c.status === "active" ? (
                <>
                  <div style={{ fontSize: 13, color: BRAND.darkText, marginBottom: 8 }}>
                    {c.tenant} — <span style={{ color: BRAND.accent, fontWeight: 700 }}>{c.timeLeft} tersisa</span>
                  </div>
                  {/* Progress bar */}
                  <div style={{ height: 6, background: BRAND.darkBorder, borderRadius: 3, overflow: "hidden", marginBottom: 12 }}>
                    <div style={{
                      height: "100%", width: `${c.progress}%`, borderRadius: 3,
                      background: `linear-gradient(90deg, ${BRAND.accent}, ${BRAND.accentDark})`,
                      transition: "width 1s",
                    }} />
                  </div>
                </>
              ) : (
                <div style={{ fontSize: 13, color: BRAND.darkMuted, marginBottom: 12 }}>Tidak ada sesi aktif</div>
              )}

              {/* IoT Device Status */}
              <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6 }}>
                {[
                  { label: "Lampu", on: c.devices.lights, icon: "💡" },
                  { label: "AC", on: c.devices.ac, icon: "❄️" },
                  { label: "Score", on: c.devices.scoreboard, icon: "📊" },
                  { label: "Pintu", on: c.devices.door === "unlocked", icon: c.devices.door === "unlocked" ? "🔓" : "🔒" },
                ].map((d) => (
                  <div key={d.label} style={{
                    textAlign: "center", padding: "6px 4px", borderRadius: 8,
                    background: d.on ? `${BRAND.accent}15` : `${BRAND.darkMuted}20`,
                    border: `1px solid ${d.on ? BRAND.accent + "30" : BRAND.darkBorder}`,
                  }}>
                    <div style={{ fontSize: 14 }}>{d.icon}</div>
                    <div style={{ fontSize: 8, fontWeight: 700, color: d.on ? BRAND.accent : BRAND.darkMuted, marginTop: 2 }}>{d.label}</div>
                  </div>
                ))}
              </div>
            </div>
          ))}

          {/* Quick Stats */}
          <div style={{
            background: BRAND.darkCard, borderRadius: 14, padding: "14px 16px",
            border: `1px solid ${BRAND.darkBorder}`, marginTop: 6,
          }}>
            <div style={{ fontSize: 10, fontWeight: 700, color: BRAND.darkText, textTransform: "uppercase", letterSpacing: 1, marginBottom: 10 }}>
              Hari Ini
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
              {[
                { label: "Total Booking", value: "8", color: BRAND.primary },
                { label: "Pendapatan", value: "Rp 2.1jt", color: BRAND.accent },
                { label: "Occupancy", value: "73%", color: BRAND.orange },
                { label: "Check-in Rate", value: "100%", color: BRAND.accent },
              ].map((s) => (
                <div key={s.label} style={{ padding: "8px 10px", background: `${s.color}10`, borderRadius: 8, border: `1px solid ${s.color}20` }}>
                  <div style={{ fontSize: 9, color: BRAND.darkText, fontWeight: 600 }}>{s.label}</div>
                  <div style={{ fontSize: 18, fontWeight: 800, color: s.color, marginTop: 2 }}>{s.value}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Right: Schedule Timeline */}
        <div style={{ flex: 1, padding: "16px 20px", overflowY: "auto" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: BRAND.darkText, textTransform: "uppercase", letterSpacing: 1.5 }}>
              Jadwal Hari Ini
            </div>
            <div style={{ display: "flex", gap: 4 }}>
              {["all", "Court A", "Court B", "Court C"].map((f) => (
                <button key={f} onClick={() => setSelectedCourt(f)} style={{
                  padding: "5px 12px", borderRadius: 8, border: "none", cursor: "pointer",
                  background: selectedCourt === f ? BRAND.primary : BRAND.darkCard,
                  color: selectedCourt === f ? "#fff" : BRAND.darkText,
                  fontSize: 11, fontWeight: 600, transition: "all 0.15s",
                }}>
                  {f === "all" ? "Semua" : f}
                </button>
              ))}
            </div>
          </div>

          {/* Schedule Cards */}
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {filteredSchedule.map((s, i) => (
              <div key={i} style={{
                background: BRAND.darkCard, borderRadius: 14, padding: "14px 18px",
                border: `1px solid ${s.status === "active" ? BRAND.accent + "40" : BRAND.darkBorder}`,
                display: "flex", alignItems: "center", gap: 16, position: "relative", overflow: "hidden",
                opacity: s.status === "completed" ? 0.5 : 1,
              }}>
                {s.status === "active" && (
                  <div style={{
                    position: "absolute", left: 0, top: 0, bottom: 0, width: 4,
                    background: BRAND.accent,
                  }} />
                )}

                {/* Time */}
                <div style={{ minWidth: 100, textAlign: "center" }}>
                  <div style={{ fontSize: 15, fontWeight: 800, letterSpacing: -0.3 }}>{s.time.split(" - ")[0]}</div>
                  <div style={{ fontSize: 10, color: BRAND.darkText, margin: "2px 0" }}>sampai</div>
                  <div style={{ fontSize: 15, fontWeight: 800, letterSpacing: -0.3 }}>{s.time.split(" - ")[1]}</div>
                </div>

                <div style={{ width: 1, height: 44, background: BRAND.darkBorder }} />

                {/* Info */}
                <div style={{ flex: 1 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
                    <span style={{ fontSize: 14, fontWeight: 700 }}>{s.tenant}</span>
                    <span style={{
                      fontSize: 8, fontWeight: 800, letterSpacing: 1, padding: "2px 6px", borderRadius: 4,
                      background: statusBg(s.status).replace("#", ""),
                      color: statusColor(s.status),
                      backgroundColor: `${statusColor(s.status)}20`,
                    }}>
                      {statusLabel(s.status)}
                    </span>
                  </div>
                  <div style={{ fontSize: 11, color: BRAND.darkText }}>
                    {s.court} · {s.players} pemain
                  </div>
                </div>

                {/* Actions */}
                <div style={{ display: "flex", gap: 6 }}>
                  {s.status === "active" && (
                    <button style={{
                      padding: "8px 14px", borderRadius: 8, border: "none", cursor: "pointer",
                      background: `${BRAND.accent}20`, color: BRAND.accent, fontSize: 11, fontWeight: 700,
                    }}>
                      ⏱ Extend
                    </button>
                  )}
                  {s.status === "upcoming" && (
                    <button style={{
                      padding: "8px 14px", borderRadius: 8, border: "none", cursor: "pointer",
                      background: `${BRAND.primary}20`, color: BRAND.primaryLight, fontSize: 11, fontWeight: 700,
                    }}>
                      ✓ Check-in
                    </button>
                  )}
                  {s.status === "completed" && (
                    <span style={{ fontSize: 11, color: BRAND.darkMuted }}>✓ Done</span>
                  )}
                </div>
              </div>
            ))}
          </div>

          {/* Timeline Bar Visual */}
          <div style={{
            marginTop: 20, background: BRAND.darkCard, borderRadius: 14, padding: "16px 18px",
            border: `1px solid ${BRAND.darkBorder}`,
          }}>
            <div style={{ fontSize: 10, fontWeight: 700, color: BRAND.darkText, textTransform: "uppercase", letterSpacing: 1, marginBottom: 12 }}>
              Timeline Visual — Occupancy
            </div>
            {["Court A", "Court B", "Court C"].map((court) => {
              const bookings = TABLET_SCHEDULE.filter(s => s.court === court);
              return (
                <div key={court} style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
                  <div style={{ width: 60, fontSize: 11, fontWeight: 700, color: BRAND.darkText }}>{court}</div>
                  <div style={{ flex: 1, height: 24, background: BRAND.darkBorder, borderRadius: 6, position: "relative", overflow: "hidden" }}>
                    {bookings.map((b, i) => {
                      const startH = parseInt(b.time.split(" - ")[0]);
                      const endH = parseInt(b.time.split(" - ")[1]);
                      const left = ((startH - 6) / 18) * 100;
                      const width = ((endH - startH) / 18) * 100;
                      return (
                        <div key={i} title={`${b.tenant} (${b.time})`} style={{
                          position: "absolute", top: 2, bottom: 2, left: `${left}%`, width: `${width}%`,
                          borderRadius: 4,
                          background: b.status === "active"
                            ? `linear-gradient(90deg, ${BRAND.accent}, ${BRAND.accentDark})`
                            : b.status === "upcoming"
                            ? `linear-gradient(90deg, ${BRAND.primary}, ${BRAND.primaryMid})`
                            : BRAND.darkMuted,
                          display: "flex", alignItems: "center", justifyContent: "center",
                          fontSize: 8, fontWeight: 700, color: "#fff", overflow: "hidden", textOverflow: "ellipsis",
                          whiteSpace: "nowrap", padding: "0 4px",
                        }}>
                          {b.tenant}
                        </div>
                      );
                    })}
                    {/* Current time indicator */}
                    {(() => {
                      const nowH = 14.5; // simulated
                      const pos = ((nowH - 6) / 18) * 100;
                      return (
                        <div style={{
                          position: "absolute", top: -2, bottom: -2, left: `${pos}%`, width: 2,
                          background: BRAND.red, borderRadius: 1, zIndex: 2,
                        }}>
                          <div style={{
                            position: "absolute", top: -4, left: -3, width: 8, height: 8,
                            borderRadius: "50%", background: BRAND.red,
                          }} />
                        </div>
                      );
                    })()}
                  </div>
                </div>
              );
            })}
            {/* Time labels */}
            <div style={{ display: "flex", marginLeft: 70, marginTop: 4 }}>
              {["06", "09", "12", "15", "18", "21", "00"].map((h, i) => (
                <div key={i} style={{ flex: 1, fontSize: 9, color: BRAND.darkMuted, textAlign: i === 0 ? "left" : "center" }}>{h}:00</div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ═══════════════════════════════════════════
   MAIN: DUAL INTERFACE VIEWER
   ═══════════════════════════════════════════ */
export default function SimploCourtDualUI() {
  const [activeView, setActiveView] = useState("both");

  return (
    <div style={{
      background: "#0D1117", minHeight: "100vh", fontFamily: "'Segoe UI', -apple-system, sans-serif",
      display: "flex", flexDirection: "column", alignItems: "center", padding: "24px 16px",
    }}>
      {/* Title */}
      <div style={{ textAlign: "center", marginBottom: 20, color: "#fff" }}>
        <div style={{ display: "flex", gap: 8, justifyContent: "center", marginBottom: 8 }}>
          <span style={{
            background: BRAND.primary, borderRadius: 8, padding: "4px 12px",
            fontSize: 11, fontWeight: 800, letterSpacing: 1,
          }}>SIMPLO COURT</span>
          <span style={{
            background: "rgba(255,255,255,0.1)", borderRadius: 8, padding: "4px 12px",
            fontSize: 11, fontWeight: 600, letterSpacing: 0.5,
          }}>UI/UX PROTOTYPE</span>
        </div>
        <h1 style={{ fontSize: 22, fontWeight: 800, margin: "4px 0", letterSpacing: -0.5 }}>
          Dual Interface Design
        </h1>
        <p style={{ fontSize: 12, color: "#8BA3C7", margin: 0 }}>
          Mobile Booking App (Penyewa) + Tablet Room Management (Venue)
        </p>
      </div>

      {/* View Toggle */}
      <div style={{ display: "flex", gap: 4, marginBottom: 24, background: "rgba(255,255,255,0.06)", borderRadius: 10, padding: 4 }}>
        {[
          { id: "both", label: "📱 + 🖥 Both" },
          { id: "mobile", label: "📱 Mobile Only" },
          { id: "tablet", label: "🖥 Tablet Only" },
        ].map((v) => (
          <button key={v.id} onClick={() => setActiveView(v.id)} style={{
            padding: "8px 18px", borderRadius: 8, border: "none", cursor: "pointer",
            background: activeView === v.id ? BRAND.primary : "transparent",
            color: activeView === v.id ? "#fff" : "#8BA3C7",
            fontSize: 12, fontWeight: 600, transition: "all 0.2s",
          }}>
            {v.label}
          </button>
        ))}
      </div>

      {/* Devices */}
      <div style={{
        display: "flex", gap: 32, alignItems: "flex-start", justifyContent: "center",
        flexWrap: "wrap", width: "100%", maxWidth: 1500,
      }}>
        {(activeView === "both" || activeView === "mobile") && (
          <div style={{ textAlign: "center" }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: "#8BA3C7", textTransform: "uppercase", letterSpacing: 2, marginBottom: 10 }}>
              📱 Mobile App — Penyewa
            </div>
            <MobileBookingApp />
            <div style={{ fontSize: 10, color: "#5A6685", marginTop: 10 }}>Klik untuk navigate antar halaman</div>
          </div>
        )}
        {(activeView === "both" || activeView === "tablet") && (
          <div style={{ textAlign: "center" }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: "#8BA3C7", textTransform: "uppercase", letterSpacing: 2, marginBottom: 10 }}>
              🖥 Tablet Display — Di Venue
            </div>
            <TabletRoomDisplay />
            <div style={{ fontSize: 10, color: "#5A6685", marginTop: 10 }}>Tampilan real-time di samping court / resepsionis</div>
          </div>
        )}
      </div>
    </div>
  );
}