const { useState, useRef, useEffect } = React;

const D = "#5B5BD6";
const DEEP = "#3A3A8A";
const M = "#6B6BC4";
const L = "#EEEEFB";
const G = { bg: "#E9F7E4", fg: "#3B6D11" };
const A = { bg: "#FDF1DD", fg: "#8A5A0B" };
const R = { bg: "#FDEDED", fg: "#C0392B" };
const GOLD = "#F5A623";
const BORDER = "#ECECF3";
const GREY = "#FAFAFE";
const CORAL = "#1FB8C4";
const GIG = "#D97A8B";       // soft rose accent for the Gigs section
const GIG_DEEP = "#C26678";  // slightly deeper rose for gradients

const css = {
  phone: { width: 375, height: 780, background: "#fff", borderRadius: 44, border: "8px solid #2A2A3A", overflow: "hidden", display: "flex", flexDirection: "column", boxShadow: "0 30px 70px rgba(91,91,214,.35)", position: "relative" },
  notch: { background: "#111", height: 36, display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0 20px", flexShrink: 0 },
  sw: { flex: 1, overflow: "hidden", position: "relative" },
  sc: { position: "absolute", inset: 0, display: "flex", flexDirection: "column", background: GREY, overflowY: "auto" },
  ph: (extra = {}) => ({ background: `linear-gradient(135deg, ${D}, ${DEEP})`, padding: "14px 16px 18px", color: "#fff", flexShrink: 0, ...extra }),
  card: (extra = {}) => ({ background: "#fff", borderRadius: 16, border: `0.5px solid ${BORDER}`, boxShadow: "0 1px 3px rgba(26,26,46,.05)", overflow: "hidden", margin: "0 16px 10px", ...extra }),
  pbtn: (extra = {}) => ({ background: D, color: "#fff", border: "none", borderRadius: 15, padding: 14, width: "calc(100% - 32px)", margin: "8px 16px", fontSize: 14, fontWeight: 600, cursor: "pointer", display: "block", textAlign: "center", fontFamily: "inherit", ...extra }),
  sbtn: (extra = {}) => ({ background: "#fff", color: D, border: `1px solid ${BORDER}`, borderRadius: 15, padding: 12, width: "calc(100% - 32px)", margin: "4px 16px", fontSize: 13, fontWeight: 500, cursor: "pointer", display: "block", textAlign: "center", fontFamily: "inherit", ...extra }),
  gbtn: (extra = {}) => ({ background: GREY, color: D, border: "none", borderRadius: 10, padding: "8px 14px", fontSize: 11, fontWeight: 500, cursor: "pointer", fontFamily: "inherit", ...extra }),
  dbtn: { background: R.bg, color: R.fg, border: "none", borderRadius: 10, padding: "8px 14px", fontSize: 11, fontWeight: 500, cursor: "pointer", fontFamily: "inherit" },
  pill: (c) => ({ fontSize: 10, padding: "3px 9px", borderRadius: 10, background: c.bg, color: c.fg, display: "inline-block", whiteSpace: "nowrap" }),
  tag: { fontSize: 10, background: GREY, color: M, padding: "2px 7px", borderRadius: 8 },
  av: (bg = M, size = 68) => ({ width: size, height: size, borderRadius: "50%", background: bg, display: "flex", alignItems: "center", justifyContent: "center", fontSize: size * 0.38, fontWeight: 700, color: "#fff", border: "2px solid rgba(255,255,255,.2)", flexShrink: 0 }),
  row: (extra = {}) => ({ display: "flex", alignItems: "center", gap: 12, padding: "11px 14px", borderBottom: `0.5px solid #f5f5f5`, cursor: "pointer", ...extra }),
  modeBtn: (active) => ({ flex: 1, textAlign: "center", fontSize: 13, fontWeight: 500, padding: 8, borderRadius: 18, cursor: "pointer", color: active ? D : "rgba(255,255,255,.6)", background: active ? "#fff" : "transparent", border: "none", transition: "all .2s", fontFamily: "inherit" }),
  fc: (active) => ({ fontSize: 11, padding: "7px 13px", borderRadius: 18, border: `0.5px solid ${active ? D : BORDER}`, background: active ? D : "#fff", color: active ? "#fff" : "#555", whiteSpace: "nowrap", cursor: "pointer", flexShrink: 0, fontFamily: "inherit" }),
  fcC: (active) => ({ fontSize: 11, padding: "7px 13px", borderRadius: 18, border: `0.5px solid ${active ? CORAL : BORDER}`, background: active ? CORAL : "#fff", color: active ? "#fff" : "#555", whiteSpace: "nowrap", cursor: "pointer", flexShrink: 0, fontFamily: "inherit" }),
  chip: (active, c) => ({ fontSize: 11, padding: "7px 13px", borderRadius: 18, border: `0.5px solid ${active ? c : BORDER}`, background: active ? c : "#fff", color: active ? "#fff" : "#555", whiteSpace: "nowrap", cursor: "pointer", flexShrink: 0, fontFamily: "inherit" }),
  input: { width: "100%", padding: "11px 13px", border: `1px solid ${BORDER}`, borderRadius: 12, fontSize: 13, color: D, background: "#fff", outline: "none", fontFamily: "inherit", boxSizing: "border-box" },
  bnav: { background: "#fff", borderTop: `0.5px solid ${BORDER}`, display: "flex", padding: "8px 0 12px", flexShrink: 0 },
  label: { fontSize: 12, color: "#888", display: "block", marginBottom: 5 },
};

const lt = (variant = "", size = 66) => {
  const map = { g: ["#4CAF8A", "#6FCBA8"], r: ["#E07A7A", "#F09A9A"], n: ["#5B8AD6", "#7FA8E0"], p: ["#9A6FD0", "#B68FE0"], "": ["#5B5BD6", "#8A8AE0"] };
  const [a, b] = map[variant] || map[""];
  return { width: size, height: size, borderRadius: 12, background: `linear-gradient(135deg,${a},${b})`, flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center", fontSize: size * 0.36 };
};

const INSTRUMENTS = ["Guitar", "Bass", "Drums", "Vocals", "Piano", "Keyboard", "Synth", "Violin", "Viola", "Cello", "Double bass", "Saxophone", "Trumpet", "Trombone", "Clarinet", "Flute", "Oboe", "French horn", "Tuba", "Harmonica", "Accordion", "Banjo", "Mandolin", "Ukulele", "Harp", "Percussion", "Cajon", "DJ / Decks", "Other"];

const EQUIP_OPTS = ["Drum kit", "PA system", "Bass amp", "Guitar amp", "Keyboard", "Piano", "Mixing desk", "Vocal booth", "Monitors"];
const AMEN_OPTS = ["🅿 Parking", "📶 Free WiFi", "🚻 Toilets", "♿ Step-free access", "❄ Air conditioning", "☕ Coffee / drinks", "🛗 Lift", "🔌 Backline storage"];

const COUNTRIES = { Italy: ["Rome", "Milan", "Bologna"], Austria: ["Vienna", "Graz", "Linz", "Salzburg"], Spain: ["Madrid", "Barcelona", "Valencia"] };
// International dialling codes for the phone-number country selector. Sorted A–Z; Austria default for Vienna launch.
const DIAL_CODES = [
  { c: "AT", f: "🇦🇹", d: "+43", n: "Austria" }, { c: "DE", f: "🇩🇪", d: "+49", n: "Germany" }, { c: "IT", f: "🇮🇹", d: "+39", n: "Italy" },
  { c: "CH", f: "🇨🇭", d: "+41", n: "Switzerland" }, { c: "ES", f: "🇪🇸", d: "+34", n: "Spain" }, { c: "FR", f: "🇫🇷", d: "+33", n: "France" },
  { c: "GB", f: "🇬🇧", d: "+44", n: "United Kingdom" }, { c: "NL", f: "🇳🇱", d: "+31", n: "Netherlands" }, { c: "BE", f: "🇧🇪", d: "+32", n: "Belgium" },
  { c: "PL", f: "🇵🇱", d: "+48", n: "Poland" }, { c: "CZ", f: "🇨🇿", d: "+420", n: "Czechia" }, { c: "SK", f: "🇸🇰", d: "+421", n: "Slovakia" },
  { c: "HU", f: "🇭🇺", d: "+36", n: "Hungary" }, { c: "SI", f: "🇸🇮", d: "+386", n: "Slovenia" }, { c: "HR", f: "🇭🇷", d: "+385", n: "Croatia" },
  { c: "RS", f: "🇷🇸", d: "+381", n: "Serbia" }, { c: "RO", f: "🇷🇴", d: "+40", n: "Romania" }, { c: "PT", f: "🇵🇹", d: "+351", n: "Portugal" },
  { c: "SE", f: "🇸🇪", d: "+46", n: "Sweden" }, { c: "DK", f: "🇩🇰", d: "+45", n: "Denmark" }, { c: "NO", f: "🇳🇴", d: "+47", n: "Norway" },
  { c: "FI", f: "🇫🇮", d: "+358", n: "Finland" }, { c: "IE", f: "🇮🇪", d: "+353", n: "Ireland" }, { c: "GR", f: "🇬🇷", d: "+30", n: "Greece" },
  { c: "US", f: "🇺🇸", d: "+1", n: "United States" }, { c: "CA", f: "🇨🇦", d: "+1", n: "Canada" }, { c: "AU", f: "🇦🇺", d: "+61", n: "Australia" },
  { c: "UA", f: "🇺🇦", d: "+380", n: "Ukraine" }, { c: "TR", f: "🇹🇷", d: "+90", n: "Turkey" }, { c: "BG", f: "🇧🇬", d: "+359", n: "Bulgaria" },
];

const MONTHS12 = [["June 2026", 30, 0], ["July 2026", 31, 2], ["August 2026", 31, 5], ["September 2026", 30, 1], ["October 2026", 31, 3], ["November 2026", 30, 6], ["December 2026", 31, 1], ["January 2027", 31, 4], ["February 2027", 28, 0], ["March 2027", 31, 0], ["April 2027", 30, 3], ["May 2027", 31, 5]];

const EXTRAS = [
  { k: "cym", label: "🥁 Pro cymbal set", p: 2 },
  { k: "gamp", label: "🎸 Guitar amp", p: 3 },
  { k: "bamp", label: "🎸 Bass amp", p: 3 },
  { k: "keys", label: "🎹 Stage keyboard", p: 4 },
  { k: "mic", label: "🎤 Vocal mic + PA", p: 2 },
  { k: "rec", label: "⏺ Room recording", p: 10 },
];

const SERVICE_OPTS = ["🎙 Recording", "🎚 Mixing (in-studio)", "💿 Mastering", "🗣 Voice-over / ADR", "🔊 Immersive / Dolby Atmos", "🎧 Music production"];

// Rooms inside "Proberaum Wien Mitte". Each lists which bookable extras (by key) it already has,
// plus its own busy schedule so availability is shown per-room.
const REHEARSAL_ROOMS = [
  { id: "A", name: "Room A — Live Room", rate: 12, cap: "large", capN: 6, has: ["cym", "gamp", "bamp", "mic", "rec"], gearCats: { "Backline & amps": ["Marshall JCM800", "Ampeg SVT"], "Drums": ["Pearl Export drum kit", "Zildjian cymbals"], "Microphones": ["Shure SM58", "Shure SM57"] }, desc: "Big live room, full backline & house drum kit.",
    busy: { "0-11": [10, 11, 16], "0-12": [9,10,11,12,13,14,15,16,17,18,19,20], "0-13": [14, 15], "0-14": [18, 19], "0-16": [9,10,11,12,13,14,15,16,17,18,19,20], "0-18": [12] } },
  { id: "B", name: "Room B — Band Room", rate: 10, cap: "small", capN: 4, has: ["gamp", "bamp", "keys"], gearCats: { "Backline & amps": ["Fender Twin Reverb", "Gallien-Krueger"], "Keys": ["Nord Stage 3"] }, desc: "Cosy band room, amps & stage keyboard.",
    busy: { "0-11": [13, 14, 15, 19], "0-12": [9, 10, 11], "0-13": [10, 11, 16, 17], "0-14": [12, 13], "0-16": [15, 16], "0-17": [18] } },
  { id: "C", name: "Room C — Vocal & Writing", rate: 9, cap: "small", capN: 3, has: ["mic", "keys", "rec"], gearCats: { "Microphones": ["Shure SM7B"], "Keys": ["Nord Electro 6"], "Monitors": ["Yamaha HS8"] }, desc: "Smaller room for vocals, writing & production.",
    busy: { "0-11": [9, 12, 17, 18], "0-12": [14, 15, 16], "0-13": [9, 10], "0-15": [11, 12], "0-16": [10, 11] } },
];

// Recording studios price differently from rehearsal rooms: the hourly rate already includes the
// core engineering setup. Only specialty rentals, backline Only specialty rentals, backline, consumables & extra staff cost more. consumables cost more.
const REC_CORE = ["🎛 Console & interface", "💻 DAW (Pro Tools)", "🔊 Studio monitors", "🎤 House mic locker", "🎧 Headphones & cue mixes", "🔌 Cables & stands"];
// Bookable studio gear. type: "incl" = free in the rate, "hr" = €/hr, "flat" = one-off per session.
const REC_GEAR = [
  { k: "rmic", label: "🎤 Standard mics", type: "incl", note: "in the rate" },
  { k: "vmic", label: "🎙 Vintage mic (U47)", type: "hr", p: 35, note: "specialty rental" },
  { k: "comp", label: "🎚 1176 / outboard comp", type: "hr", p: 25, note: "specialty rental" },
  { k: "amp", label: "🎸 Amp rental", type: "hr", p: 6, note: "backline" },
  { k: "drums", label: "🥁 Backline drum kit", type: "hr", p: 40, note: "backline rental" },
  { k: "piano", label: "🎹 Grand piano", type: "hr", p: 15, note: "backline" },
  { k: "tape", label: "📼 2-inch tape reel", type: "hr", p: 120, note: "consumable" },
];

// Rooms inside "Studio 7 Recording". `free` = gear keys this room includes at no extra cost (beyond core).
const REC_ROOMS = [
  { id: "L", name: "Live Room A — Full Band", rate: 55, capN: 8, svc: ["🎙 Recording", "🎧 Music production", "🔊 Immersive / Dolby Atmos"], free: ["rmic", "piano"], gearCats: { "Control room": ["SSL console", "Universal Audio Apollo"], "Microphones": ["Neumann U87", "Shure SM57"], "DAW": ["Pro Tools"], "Instruments": ["Steinway grand piano"] }, desc: "Big tracking room for full bands & live takes. House grand piano.",
    busy: { "0-11": [10, 11, 16], "0-12": [9,10,11,12,13,14,15,16,17,18,19,20], "0-13": [14, 15], "0-14": [18, 19], "0-16": [9,10,11,12,13,14,15,16,17,18,19,20], "0-18": [12] } },
  { id: "V", name: "Vocal Booth B", rate: 45, capN: 3, svc: ["🎙 Recording", "🗣 Voice-over / ADR", "🎧 Music production"], free: ["rmic"], gearCats: { "Microphones": ["Neumann U47", "Shure SM7B"], "Outboard": ["1176 compressor"], "DAW": ["Pro Tools"] }, desc: "Treated booth for vocals, VO & overdubs.",
    busy: { "0-11": [13, 14, 19], "0-12": [9, 10, 11], "0-13": [10, 11, 16, 17], "0-14": [12, 13], "0-16": [15, 16] } },
  { id: "M", name: "Mix Suite C", rate: 50, capN: 4, svc: ["🎚 Mixing (in-studio)", "💿 Mastering", "🔊 Immersive / Dolby Atmos"], free: ["rmic"], gearCats: { "Outboard": ["LA-2A compressor"], "Monitors": ["Genelec 8040"], "DAW": ["Logic Pro"], "Plugins": ["Waves plugins", "UAD plugins"] }, desc: "Engineer's suite for mixing & mastering.",
    busy: { "0-11": [9, 12, 17, 18], "0-12": [14, 15, 16], "0-13": [9, 10], "0-15": [11, 12], "0-16": [10, 11] } },
];

// Human labels for room equipment/instrument tags. The filter only shows tags studios actually have (derived below).
const EQUIP_LABELS = { guitar: "Guitar amp", bass: "Bass amp", drum: "Drums", piano: "Piano", keyboard: "Keyboard", synth: "Synth", pa: "PA / Vocals", vocals: "Vocals / PA", percussion: "Percussion", cajon: "Cajon", dj: "DJ / Decks", violin: "Violin", cello: "Cello", sax: "Saxophone", trumpet: "Trumpet", ukulele: "Ukulele", accordion: "Accordion", harmonica: "Harmonica", banjo: "Banjo", mandolin: "Mandolin", harp: "Harp" };

const SERVICE_FILTER = { key: "svc", title: "🎙 Studio services", opts: [["rec", "Recording"], ["mix", "Mixing"], ["master", "Mastering"], ["vo", "Voice-over / ADR"], ["atmos", "Immersive / Atmos"], ["prod", "Production"]] };

// Levelling: 12 animal tiers in glasses, each with 3 sub-levels (I, II, III). Rising mastery.
const LEVELS = [
  { animal: "🐣", name: "Rookie Chick", color: "#FDF1DD" },
  { animal: "🐭", name: "Garage Mouse", color: "#F0F0F7" },
  { animal: "🐱", name: "Cool Cat", color: "#E7F0FB" },
  { animal: "🦝", name: "Night Raccoon", color: "#ECE7F6" },
  { animal: "🦊", name: "Sly Fox", color: "#FCE9DE" },
  { animal: "🐺", name: "Lone Wolf", color: "#ECECF6" },
  { animal: "🦉", name: "Wise Owl", color: "#EAF6EE" },
  { animal: "🦅", name: "Soaring Eagle", color: "#E7F0FB" },
  { animal: "🐎", name: "Road Stallion", color: "#FCE9DE" },
  { animal: "🦁", name: "Studio Lion", color: "#FDF3DC" },
  { animal: "🐯", name: "Stage Tiger", color: "#FDEEDD" },
  { animal: "🐉", name: "Legend Dragon", color: "#E9F7E4" },
];
const SUBS = 3;                 // sub-levels (I, II, III) within each animal tier
const PER_SUB = 15;             // sessions to clear one sub-level
const PER_LEVEL = SUBS * PER_SUB; // sessions to fully promote to the next animal (45) — top tier (Legend Dragon) reached at 11×45 = 495 sessions
const DRAGON_AT = (LEVELS.length - 1) * PER_LEVEL; // sessions at which Legend Dragon (max) is reached (495)
const PRESTIGE_EVERY = 45;         // once max level, every 45 completed bookings still awards a bonus
const PRESTIGE_BONUS = 25;         // credits for each prestige milestone at max level
// VAT is determined by the STUDIO's country (where the studio is located), not the company or the musician.
const COUNTRY_VAT = { Austria: 20, Italy: 22, Spain: 21, Germany: 19, Netherlands: 21 };
// Vienna districts / demo locations → country. In the real app this comes from the studio's registered address.
const studioCountry = () => "Austria"; // all v1 studios are in Vienna
const studioVatRate = () => COUNTRY_VAT[studioCountry()];
const ROMAN = ["I", "II", "III"];
const levelFromSessions = (n) => Math.min(LEVELS.length - 1, Math.floor(n / PER_LEVEL));
// sub-level 0..2 within the current animal (capped at III on the final animal)
const subFromSessions = (n) => {
  const idx = levelFromSessions(n);
  if (idx >= LEVELS.length - 1) return SUBS - 1;
  return Math.floor((n % PER_LEVEL) / PER_SUB);
};
// a single number that increases on every sub-level OR animal promotion (for "did I level up?")
const rankFromSessions = (n) => levelFromSessions(n) * SUBS + subFromSessions(n);
const GENRES = ["Rock", "Indie", "Pop", "Funk", "Jazz", "Blues", "Metal", "Punk", "Hip-hop", "R&B", "Soul", "Electronic", "Folk", "Classical", "Reggae", "Latin", "Other"];
const LFB_PEOPLE = [
  { init: "EM", name: "Elena Moser", role: "🎤 Vocalist & lyricist", genres: ["Indie", "Soul"], note: "Singer-songwriter with a notebook full of lyrics, after a band to gig with.", bg: "#5a2a6a" },
  { init: "DK", name: "David Keller", role: "🥁 Drummer", genres: ["Rock", "Funk"], note: "10 years behind the kit, free weekday evenings. Pocket for days.", bg: "#2a4a6a" },
  { init: "SR", name: "Sofia Roth", role: "✍️ Songwriter", genres: ["Pop", "Electronic"], note: "I write songs & toplines, looking for collaborators to build a project.", bg: "#6a4a2a" },
  { init: "MT", name: "Max Tanner", role: "🎸 Guitarist", genres: ["Blues", "Rock"], note: "Lead/rhythm, into jamming and writing originals. Got a practice space.", bg: "#2a6a4a" },
];

// Studio subscription: first room €39, each extra €15. Annual = pay 11 months (1 free).
const SUB_FIRST = 39;
const SUB_EXTRA = 15;
const subMonthly = (rooms) => SUB_FIRST + Math.max(0, rooms - 1) * SUB_EXTRA;
const subAnnual = (rooms) => subMonthly(rooms) * 11; // 1 month free

function ReckiLogo({ size = 64, animated = false, radius }) {
  const r = radius != null ? radius : size * 0.26;
  const id = "rkg" + size + (animated ? "a" : "");
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: "block" }}>
      <defs>
        <linearGradient id={id} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#6D5BE0" />
          <stop offset="55%" stopColor="#4F5BD5" />
          <stop offset="100%" stopColor="#22B8C4" />
        </linearGradient>
      </defs>
      <rect x="0" y="0" width="100" height="100" rx={r * 100 / size} fill={`url(#${id})`} />
      {/* R stem */}
      <path d="M33 24 L33 76" stroke="#fff" strokeWidth="9" strokeLinecap="round" fill="none" />
      {/* R bowl (upper closed loop) */}
      <path d="M33 24 L52 24 Q65 24 65 37 Q65 50 52 50 L33 50" stroke="#fff" strokeWidth="9" strokeLinecap="round" strokeLinejoin="round" fill="none" />
      {/* R diagonal leg, kicking out from the bowl junction to bottom-right */}
      <path d="M48 50 L66 76" stroke="#fff" strokeWidth="9" strokeLinecap="round" fill="none" />
      {/* the foot of the leg turns into equalizer bars (single warm accent) */}
      {[0, 1, 2].map(i => {
        const x = 60 + i * 9;
        return <rect key={i} x={x} y={58} width="6" height="18" rx="3" fill="#FF8A8A"
          style={animated ? { transformOrigin: `${x + 3}px 76px`, transformBox: "fill-box", animation: `rkEq 0.85s ease-in-out ${i * 0.13}s infinite` } : { transform: `scaleY(${[1, .6, .82][i]})`, transformOrigin: `${x + 3}px 76px`, transformBox: "fill-box" }} />;
      })}
    </svg>
  );
}

function Toast({ msg }) {
  if (!msg) return null;
  return <div style={{ position: "fixed", bottom: 90, left: "50%", transform: "translateX(-50%)", background: D, color: "#fff", padding: "11px 22px", borderRadius: 22, fontSize: 13, fontWeight: 500, whiteSpace: "nowrap", zIndex: 9999, pointerEvents: "none" }}>{msg}</div>;
}

function NavItem({ ico, label, active, onClick }) {
  return <div onClick={onClick} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 2, cursor: "pointer" }}>
    <div style={{ fontSize: 21 }}>{ico}</div>
    <div style={{ fontSize: 10, color: active ? D : "#999", fontWeight: active ? 700 : 400 }}>{label}</div>
  </div>;
}

function BackBtn({ onClick }) {
  return <button onClick={onClick} style={{ background: "rgba(255,255,255,.15)", border: "none", color: "#fff", fontSize: 12, padding: "6px 12px", borderRadius: 20, cursor: "pointer", marginBottom: 10, fontFamily: "inherit" }}>← Back</button>;
}

function SectionTitle({ children, extra = {} }) {
  return <div style={{ fontSize: 13, fontWeight: 600, color: D, margin: "14px 16px 8px", ...extra }}>{children}</div>;
}

function ProfileRow({ icon, title, sub, right, onClick, iconBg = L }) {
  return <div onClick={onClick} style={css.row()}>
    <div style={{ width: 34, height: 34, borderRadius: 9, background: iconBg, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 17, flexShrink: 0 }}>{icon}</div>
    <div style={{ flex: 1 }}>
      <div style={{ fontSize: 13, fontWeight: 500, color: D }}>{title}</div>
      {sub && <div style={{ fontSize: 11, color: "#888", marginTop: 1 }}>{sub}</div>}
    </div>
    {right}
  </div>;
}

function ConfirmItem({ icon, title, sub, onClick }) {
  return <div onClick={onClick} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 14px", borderBottom: `0.5px solid #f5f5f5`, cursor: onClick ? "pointer" : "default" }}>
    <div style={{ fontSize: 18, width: 24, flexShrink: 0 }}>{icon}</div>
    <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>{title}</div>{sub && <div style={{ fontSize: 11, color: "#888" }}>{sub}</div>}</div>
    {onClick && <span style={{ color: "#ccc" }}>›</span>}
  </div>;
}

function MemberDot({ initials, name, paid }) {
  return <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 3 }}>
    <div style={{ width: 30, height: 30, borderRadius: "50%", background: paid ? G.bg : GREY, color: paid ? G.fg : "#bbb", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 600 }}>{initials}</div>
    <span style={{ fontSize: 9, color: "#888" }}>{name}</span>
  </div>;
}

function Modal({ show = true, onClose, children }) {
  if (!show) return null;
  return <div onClick={onClose} style={{ position: "absolute", inset: 0, background: "rgba(0,0,0,.55)", zIndex: 200, display: "flex", alignItems: "flex-end" }}>
    <div onClick={e => e.stopPropagation()} style={{ background: "#fff", borderRadius: "22px 22px 0 0", width: "100%", padding: "20px 20px 26px", maxHeight: "82%", overflowY: "auto" }}>
      <div style={{ width: 36, height: 4, background: BORDER, borderRadius: 2, margin: "0 auto 16px" }} />
      {children}
    </div>
  </div>;
}

function EmptyState({ icon, title, body, cta, onCta, tone = "#5B5BD6" }) {
  return <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", padding: "48px 32px", minHeight: 280 }}>
    <div style={{ width: 76, height: 76, borderRadius: "50%", background: "#EEEEFB", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 34, marginBottom: 16 }}>{icon}</div>
    <div style={{ fontSize: 16, fontWeight: 700, color: "#3A3A8A", marginBottom: 8 }}>{title}</div>
    <div style={{ fontSize: 13, color: "#888", lineHeight: 1.6, maxWidth: 260, marginBottom: cta ? 20 : 0 }}>{body}</div>
    {cta && <button onClick={onCta} style={{ background: tone, color: "#fff", border: "none", borderRadius: 12, padding: "12px 24px", fontSize: 14, fontWeight: 600, cursor: "pointer", fontFamily: "inherit" }}>{cta}</button>}
  </div>;
}

function LockGate({ onUpgrade, note }) {
  return <div style={{ padding: "26px 16px" }}>
    <div style={css.card({ margin: 0, padding: 20, textAlign: "center" })}>
      <div style={{ width: 64, height: 64, borderRadius: "50%", background: D, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 28, margin: "0 auto 12px" }}>🔒</div>
      <div style={{ fontSize: 16, fontWeight: 700, color: D, marginBottom: 6 }}>Premium feature</div>
      <div style={{ fontSize: 12.5, color: "#666", lineHeight: 1.6, marginBottom: 14 }}>Searching the musician network, adding new people and messaging them is part of Recki Premium.</div>
      <button onClick={onUpgrade} style={{ ...css.pbtn(), width: "100%", margin: "0 0 8px" }}>Start 3-day free trial</button>
      <div style={{ background: G.bg, color: G.fg, borderRadius: 10, padding: "9px 12px", fontSize: 11.5, lineHeight: 1.5 }}>✓ {note || "Adding bandmates you already know via an invite link is always free."}</div>
    </div>
  </div>;
}

// --- Localization (demo: core surfaces in EN / DE / ES / IT) ---
const LANGS = [["en", "🇬🇧 English"], ["de", "🇩🇪 Deutsch"], ["es", "🇪🇸 Español"], ["it", "🇮🇹 Italiano"]];
const TRANS = {
  // bottom nav
  nav_home: { en: "Home", de: "Start", es: "Inicio", it: "Home" },
  nav_search: { en: "Search", de: "Suche", es: "Buscar", it: "Cerca" },
  nav_bookings: { en: "Bookings", de: "Buchungen", es: "Reservas", it: "Prenotazioni" },
  nav_profile: { en: "Profile", de: "Profil", es: "Perfil", it: "Profilo" },
  // home
  home_hi: { en: "Hi", de: "Hallo", es: "Hola", it: "Ciao" },
  home_find: { en: "Find your space", de: "Finde deinen Raum", es: "Encuentra tu espacio", it: "Trova il tuo spazio" },
  home_rehearse: { en: "Rehearse", de: "Proben", es: "Ensayar", it: "Provare" },
  home_record: { en: "Record", de: "Aufnehmen", es: "Grabar", it: "Registrare" },
  home_book_room: { en: "Book a rehearsal room", de: "Proberaum buchen", es: "Reservar sala de ensayo", it: "Prenota una sala prove" },
  home_book_studio: { en: "Book a recording studio", de: "Tonstudio buchen", es: "Reservar estudio de grabación", it: "Prenota uno studio di registrazione" },
  home_nearby: { en: "Studios near you", de: "Studios in deiner Nähe", es: "Estudios cerca de ti", it: "Studi vicino a te" },
  home_seeall: { en: "See all", de: "Alle ansehen", es: "Ver todo", it: "Vedi tutti" },
  home_upcoming: { en: "Upcoming", de: "Demnächst", es: "Próximas", it: "In arrivo" },
  // booking flow
  bk_title: { en: "Book a room", de: "Raum buchen", es: "Reservar sala", it: "Prenota una sala" },
  bk_who: { en: "Who's coming?", de: "Wer kommt mit?", es: "¿Quién viene?", it: "Chi viene?" },
  bk_solo: { en: "Solo", de: "Solo", es: "Solo", it: "Da solo" },
  bk_band: { en: "Band", de: "Band", es: "Banda", it: "Band" },
  bk_friends: { en: "With friends", de: "Mit Freunden", es: "Con amigos", it: "Con amici" },
  bk_equip: { en: "Equipment you'd like", de: "Gewünschte Ausrüstung", es: "Equipo que quieres", it: "Attrezzatura desiderata" },
  bk_optional: { en: "optional", de: "optional", es: "opcional", it: "facoltativo" },
  bk_addons: { en: "Add-on gear", de: "Zusatz-Equipment", es: "Equipo adicional", it: "Attrezzatura extra" },
  bk_optional_paid: { en: "optional, paid", de: "optional, kostenpflichtig", es: "opcional, de pago", it: "facoltativo, a pagamento" },
  bk_room: { en: "Your room", de: "Dein Raum", es: "Tu sala", it: "La tua sala" },
  bk_best: { en: "Best match", de: "Beste Wahl", es: "Mejor opción", it: "Migliore scelta" },
  bk_other: { en: "See other rooms", de: "Andere Räume ansehen", es: "Ver otras salas", it: "Vedi altre sale" },
  bk_other_hide: { en: "Hide other rooms", de: "Räume ausblenden", es: "Ocultar salas", it: "Nascondi sale" },
  bk_time: { en: "Pick a time in", de: "Wähle eine Zeit in", es: "Elige una hora en", it: "Scegli un orario in" },
  bk_special: { en: "Special requests", de: "Besondere Wünsche", es: "Peticiones especiales", it: "Richieste speciali" },
  bk_total: { en: "Approx. total", de: "Ungefährer Gesamtbetrag", es: "Total aprox.", it: "Totale appross." },
  bk_continue: { en: "Continue", de: "Weiter", es: "Continuar", it: "Continua" },
  bk_duration: { en: "Duration", de: "Dauer", es: "Duración", it: "Durata" },
  // profile
  pr_language: { en: "Language", de: "Sprache", es: "Idioma", it: "Lingua" },
  pr_choose_lang: { en: "Choose your language", de: "Wähle deine Sprache", es: "Elige tu idioma", it: "Scegli la tua lingua" },
};

function App() {
  const [screen, setScreen] = useState("splash");
  const [history, setHistory] = useState([]);
  const [toast, setToast] = useState("");
  const [sMode, setSMode] = useState("r");
  const [searchQ, setSearchQ] = useState("");
  const [sortBy, setSortBy] = useState("dist");
  const [bookTab, setBookTab] = useState("up");
  const [bookAs, setBookAs] = useState("solo");
  const [splitFriends, setSplitFriends] = useState([]); // friend initials chosen to split with
  const [friendPickerModal, setFriendPickerModal] = useState(false); // popup to pick from all friends
  const [roomEquip, setRoomEquip] = useState([]); // optional free equipment the room should have (rehearsal)
  const [recRoomEquip, setRecRoomEquip] = useState([]); // optional free named gear the stage should have (recording)
  const [stars, setStars] = useState(4);
  const [fav1, setFav1] = useState(false);
  const [fav2, setFav2] = useState(false);
  const [selTime, setSelTime] = useState("13:00");
  const [selDur, setSelDur] = useState("2h");
  const [selRoom, setSelRoom] = useState(null); // chosen rehearsal room id (set after gear picked)
  const [gearWanted, setGearWanted] = useState([]); // specific named gear/tech the user wants (rehearsal)
  const [recGearWanted, setRecGearWanted] = useState([]); // specific named gear/tech the user wants (recording)
  const [openGearCat, setOpenGearCat] = useState({}); // which gear categories are expanded, keyed "scope:Category"
  const [showRoomPicker, setShowRoomPicker] = useState(false);
  const [selRecRoom, setSelRecRoom] = useState(null); // chosen recording room id (set after services/gear picked)
  const [showRecRoomPicker, setShowRecRoomPicker] = useState(false);
  const [bkMonth, setBkMonth] = useState(0);
  const [bkDay, setBkDay] = useState(12); // default to tomorrow (same-day booking not allowed)
  const [selDateRec, setSelDateRec] = useState("10");
  const [cancelModal, setCancelModal] = useState(false);
  const [cancelCtx, setCancelCtx] = useState({ title: "Proberaum Wien Mitte", when: "Wed 11 Jun, 13:00–15:00", within24: true, amt: "€12.42", full: "€24.84" });
  const [vendorCancelModal, setVendorCancelModal] = useState(false);
  const [nav, setNav] = useState("home");
  const [lang, setLang] = useState("en"); // UI language (demo: core surfaces translated)
  const t = (key) => (TRANS[key] && TRANS[key][lang]) || (TRANS[key] && TRANS[key].en) || key;
  const [vnav, setVnav] = useState("vhome");
  const [userSearch, setUserSearch] = useState("");
  const [userOnlyLfb, setUserOnlyLfb] = useState(false);
  const [fuTab, setFuTab] = useState("players"); // players | bands
  const [lfbTab, setLfbTab] = useState("people"); // people = looking to join; bands = looking for members
  const [openBands, setOpenBands] = useState([
    { id: "ob1", name: "Neon Tides", genre: "Synth-pop", need: "Bassist, drummer", area: "Vienna · Neubau", note: "Gigging twice a month, EP in the works. Want a tight rhythm section.", by: "Lena Moser", init: "LM", bg: M },
    { id: "ob2", name: "The Back Room", genre: "Blues / rock", need: "Vocalist", area: "Vienna · Favoriten", note: "Covers + originals, weekly rehearsals. Looking for a frontperson.", by: "Tom Keller", init: "TK", bg: "#6a4a2a" },
    { id: "ob3", name: "Marble Arch", genre: "Indie folk", need: "Keys, violin", area: "Graz", note: "Recording an album this autumn. Session or permanent both fine.", by: "Anna Kovacs", init: "AK", bg: "#4a2a6a" },
  ]);
  const [isPrem, setIsPrem] = useState(false);
  const [planChoice, setPlanChoice] = useState("annual"); // monthly | annual
  const [premPlanName, setPremPlanName] = useState("Premium (annual)");
  const [cancelReason, setCancelReason] = useState(null);
  const [cancelStats, setCancelStats] = useState({ "Too expensive": 34, "Not using it enough": 28, "Missing features": 12, "Found an alternative": 9, "Just taking a break": 17, "Other": 6 });
  const [loginRole, setLoginRole] = useState("musician");
  const [linked, setLinked] = useState(false);
  const [myStudios, setMyStudios] = useState([
    { id: "s1", name: "Proberaum Wien Mitte", loc: "Landstrasse, Vienna", kind: "Rehearsal & Recording", earn: "€840", occ: "67%" },
    { id: "s2", name: "Klangkeller Graz", loc: "Lend, Graz", kind: "Rehearsal", earn: "€410", occ: "52%" },
  ]);
  const [activeStudio, setActiveStudio] = useState("s1");
  const [studioSwitcher, setStudioSwitcher] = useState(false);
  const [linkSameEmail, setLinkSameEmail] = useState(true);
  const [linkEmail, setLinkEmail] = useState("");
  const [myInstruments, setMyInstruments] = useState(["Guitar"]);
  const [jamFeedMine, setJamFeedMine] = useState(true);
  const [otherInput, setOtherInput] = useState("");
  const [showGenreOther, setShowGenreOther] = useState(false);
  const [genreOtherInput, setGenreOtherInput] = useState("");
  const [showOther, setShowOther] = useState(false);
  const [userCat, setUserCat] = useState("Amateur musician");
  const [genres, setGenres] = useState(["Rock", "Indie", "Funk"]);
  const [favMusicians, setFavMusicians] = useState(["Jeff Buckley", "Hiatus Kaiyote", "Radiohead"]);
  const [lookingForBand, setLookingForBand] = useState(false);
  const [offerSession, setOfferSession] = useState(false);
  const [sessionItems, setSessionItems] = useState([{ name: "Guitar", price: "40" }]); // [{name, price}]
  const [sesNewInstr, setSesNewInstr] = useState("");
  const [offerGhost, setOfferGhost] = useState(false);
  const [ghostItems, setGhostItems] = useState([{ name: "Lyrics", price: "80" }]); // [{name, price}]
  const [ghostOtherInput, setGhostOtherInput] = useState("");
  const GHOST_TYPES = ["Lyrics", "Topline / melody", "Full songs", "Beats", "Arrangements"];
  const SESSION_INSTR = ["Guitar", "Bass", "Drums", "Keys", "Vocals", "Saxophone", "Trumpet", "Violin"];
  const [sesTab, setSesTab] = useState("sessionists");
  const [hubTab, setHubTab] = useState("find");   // find | responses
  const [hubCat, setHubCat] = useState("all");    // all | bands | sessionists | ghosts | hiring
  const sessionists = [
    { init: "DK", name: "David Keller", instr: "Session drummer", rate: "45", area: "Vienna", bg: "#2a4a6a", note: "10 yrs studio + live. Tight, fast, great feel. Can track remotely too." },
    { init: "SR", name: "Sofia Roth", instr: "Violin & strings", rate: "60", area: "Vienna", bg: "#2a4a6a", note: "Classical + pop sessions, can arrange string parts for your track." },
    { init: "MT", name: "Max Tanner", instr: "Session guitarist", rate: "40", area: "Graz", bg: "#6a4a2a", note: "Rhythm & lead, big pedalboard, reads charts. Indie/rock/funk." },
  ];
  const ghostwriters = [
    { init: "EM", name: "Elena Moser", kind: "Lyrics · topline", rate: "80", area: "Vienna", bg: "#4a2a6a", note: "Singer-songwriter, notebook full of toplines. Credited or fully ghost." },
    { init: "JB", name: "Julia Berger", kind: "Full songs · beats", rate: "120", area: "Vienna", bg: G.fg, note: "Producer-writer, turns a brief into a finished demo. Pop & R&B." },
  ];
  const [sessionBands, setSessionBands] = useState([
    { id: "sb1", name: "Neon Tides", genre: "Synth-pop", need: "Session bassist · 1 gig", area: "Vienna · Neubau", pay: "120/gig", by: "Lena Moser", init: "LM", bg: M },
    { id: "sb2", name: "The Back Room", genre: "Blues / rock", need: "Session keys · studio day", area: "Vienna · Favoriten", pay: "200/day", by: "Tom Keller", init: "TK", bg: "#6a4a2a" },
  ]);
  const [sesGigForm, setSesGigForm] = useState({ name: "", genre: "", need: "", area: "", pay: "", kind: "gig" });
  const [offeredBands, setOfferedBands] = useState([]); // ids of band-hire posts I've offered to
  const [inquiryWith, setInquiryWith] = useState(null);  // the sessionist/ghostwriter being contacted
  const [hirePost, setHirePost] = useState(null); // which "post yourself" form is open: "band" | "session" | "ghost" | null
  const [myHireListings, setMyHireListings] = useState([]); // things the user has posted
  const [hpForm, setHpForm] = useState({ title: "", detail: "", rate: "", area: "Vienna" }); // light post form
  const [bookForm, setBookForm] = useState({ role: "", when: "", budget: "", note: "" });
  const [briefForm, setBriefForm] = useState({ type: "", deadline: "", budget: "", note: "" });
  const [castingForm, setCastingForm] = useState({ role: "", when: "", note: "" });
  const [offerForm, setOfferForm] = useState({ role: "", rate: "", note: "" });
  const [lfbRoles, setLfbRoles] = useState(["Guitarist"]);
  const [lfbNote, setLfbNote] = useState("");
  const [lfbOther, setLfbOther] = useState("");
  const [notif, setNotif] = useState({ reminder: true, booking: true, bands: true, payments: true, messages: true, jams: true, promos: false });
  // Notification inbox feed (the bell). Newest first. Each: {id, icon, title, body, when, read, dest?}
  const [inbox, setInbox] = useState([
    { id: "n_seed1", icon: "🎤", title: "Casting reply from Saturday Collective", body: "Nina liked your message — they'd love to set up a casting.", when: "2h", read: false, dest: "my-bands" },
    { id: "n_seed2", icon: "🪙", title: "You earned 5 credits", body: "Thanks for booking Proberaum Wien Mitte.", when: "1d", read: true, dest: "credits" },
  ]);
  const pushNotif = (n) => setInbox(list => [{ id: "n" + Date.now(), when: "now", read: false, ...n }, ...list]);
  const unreadNotifs = inbox.filter(n => !n.read).length;
  const [hasPhoto, setHasPhoto] = useState(false);
  const [sessions, setSessions] = useState(64); // sessions booked (demo: level 3, partway to 4)
  const [useAnimal, setUseAnimal] = useState(false); // use level animal as avatar
  const [levelUp, setLevelUp] = useState(null); // shows level-up celebration {animal, name}
  const [bugText, setBugText] = useState("");
  const [bugArea, setBugArea] = useState("General");
  const [vEquip, setVEquip] = useState(["Drum kit", "PA system", "Bass amp", "Guitar amp", "Keyboard"]);
  const [extrasList, setExtrasList] = useState(EXTRAS);
  const [vServices, setVServices] = useState([
    { label: "🎙 Recording", on: true, from: 40, to: 60 },
    { label: "🎚 Mixing (in-studio)", on: true, from: 35, to: 70 },
    { label: "💿 Mastering", on: true, from: 30, to: 80 },
    { label: "🗣 Voice-over / ADR", on: true, from: 45, to: 65 },
    { label: "🔊 Immersive / Dolby Atmos", on: false, from: 60, to: 120 },
    { label: "🎧 Music production", on: false, from: 40, to: 90 },
  ]);
  const [svcInput, setSvcInput] = useState("");
  const [newExtraLabel, setNewExtraLabel] = useState("");
  const [newExtraPrice, setNewExtraPrice] = useState("");
  const [vAmen, setVAmen] = useState(["🅿 Parking", "📶 Free WiFi", "🚻 Toilets", "❄ Air conditioning"]);
  const [equipInput, setEquipInput] = useState("");
  // Studio's gear organised BY category (so the app knows what each item is). Studio controls which categories show.
  const ALL_GEAR_CATS = ["Microphones", "DAWs / software", "Consoles / interfaces", "Outboard / plugins", "Monitors", "Instruments & amps", "Video", "Lights"];
  const [vGearCats, setVGearCats] = useState({ "Microphones": ["Shure SM58"], "Instruments & amps": ["Pearl Export drum kit", "Marshall JCM800", "Ampeg SVT", "Nord Stage 3"], "Monitors": ["Yamaha HS8"] });
  const [vGearActiveCats, setVGearActiveCats] = useState(["Microphones", "Instruments & amps", "Monitors"]); // which category sections this studio shows
  const [gearInput, setGearInput] = useState(""); // gear autocomplete input (per active category)
  const [gearInputCat, setGearInputCat] = useState(null); // which category the input is adding into
  const [amenInput, setAmenInput] = useState("");
  const [vTaxStatus, setVTaxStatus] = useState("vat"); // business with VAT / forfettario / private
  const [vVatNo, setVVatNo] = useState("ATU12345678");
  const [phone, setPhone] = useState(""); // mandatory account phone (local part) — unique key studios use to look up clients
  const [phoneCC, setPhoneCC] = useState("AT"); // selected country dial code
  const [bandSessionSettled, setBandSessionSettled] = useState(false); // has the awaiting-payment band session been finalised
  const [vLegalName, setVLegalName] = useState("Proberaum Wien GmbH");
  const [vBillingAddr, setVBillingAddr] = useState("Marxergasse 4, 1030 Wien, Austria");
  const [vCancelWindow, setVCancelWindow] = useState("24h"); // free-cancellation window
  const [vLateCharge, setVLateCharge] = useState("50"); // % charged for late cancellation
  const [vNoShow, setVNoShow] = useState("full"); // no-show charge
  const [vPolicyNote, setVPolicyNote] = useState("Please cancel ahead if your plans change so the room can be re-offered. Booking & payment stay in the app — never cash.");
  const [showEquipOther, setShowEquipOther] = useState(false);
  const [showAmenOther, setShowAmenOther] = useState(false); // reserved
  const [country, setCountry] = useState("Austria");
  const [city, setCity] = useState("Vienna");
  const [credits, setCredits] = useState(0);
  const [emptyMode, setEmptyMode] = useState(false); // demo toggle: true = show first-run empty states (new user)
  const [openFail, setOpenFail] = useState(null); // dev-failures accordion
  const [pendingInvites, setPendingInvites] = useState([{ name: "Jonas (jonas@email.com)", status: "pending" }]);
  const [payTiming, setPayTiming] = useState("now");
  const [openJam, setOpenJam] = useState(false);      // booking flow: open this slot as a jam
  const [jamSpots, setJamSpots] = useState(3);        // total spots incl. host
  const [jamWant, setJamWant] = useState("Anyone");   // instrument wanted
  const [jamVibe, setJamVibe] = useState("");         // short note
  const [jamSel, setJamSel] = useState(null);         // jam being viewed
  const [jams, setJams] = useState([
    { id: "j1", host: "Lena Moser", studio: "Proberaum Wien Mitte", area: "Landstrasse", when: "Today · 18:00–20:00", genre: "🎸 Indie / rock", want: "Bass, drums", spots: 4, joined: 2, perHead: "6.00", dist: "1.2 km", players: [{ init: "LM", name: "Lena Moser", role: "Guitar · host" }, { init: "PT", name: "Peter Toth", role: "Drums" }] },
    { id: "j2", host: "Tom Keller", studio: "Rockhaus Ottakring", area: "Ottakring", when: "Thu 12 · 19:00–21:00", genre: "🎹 Funk / jam", want: "Keys, sax", spots: 5, joined: 3, perHead: "5.00", dist: "3.4 km", players: [{ init: "TK", name: "Tom Keller", role: "Keys · host" }, { init: "SR", name: "Sofia Roth", role: "Bass" }, { init: "AK", name: "Anna Kovacs", role: "Sax" }] },
    { id: "j3", host: "Sara Pichler", studio: "Klangwerk Favoriten", area: "Favoriten", when: "Sat 14 · 15:00–17:00", genre: "🥁 Anything goes", want: "Anyone", spots: 3, joined: 1, perHead: "8.00", dist: "2.1 km", players: [{ init: "SP", name: "Sara Pichler", role: "Drums · host" }] },
  ]);
  // "Jam Together" — free social meet-ups at bars/venues (no booking, no payment).
  const [meetSel, setMeetSel] = useState(null);
  const [meets, setMeets] = useState([
    { id: "m1", host: "Lena Moser", title: "Post-gig jam at Loop", place: "Loop Bar", area: "Lerchenfelder Gürtel", address: "Lerchenfelder Gürtel 37, 1160 Wien", max: 8, when: "Tonight · 22:30", vibe: "After the Wiener Konzerthaus show — bring whatever's portable, we'll improvise.", want: "Anyone · acoustic-friendly", going: ["LK", "JB", "PT"], dist: "0.8 km", chat: [{ who: "Lena Moser", t: "I'll grab the corner table near the back 🎸" }, { who: "Peter Toth", t: "Bringing my cajon!" }] },
    { id: "m2", host: "Tom Keller", title: "Sunday afternoon acoustic hang", place: "Café Concerto", area: "Neubau", address: "Lindengasse 12, 1070 Wien", max: 6, when: "Sun 15 · 16:00", vibe: "Chilled acoustic session, all levels welcome, coffee + songs.", want: "Singers, guitarists", going: ["SR", "TM"], dist: "2.3 km", chat: [{ who: "Tom Keller", t: "Anyone know if they have a piano there?" }] },
    { id: "m3", host: "Sara Pichler", title: "Jazz jam after the festival", place: "Blue Note Vienna", area: "Innere Stadt", address: "Rotenturmstraße 19, 1010 Wien", max: 5, when: "Fri 20 · 23:00", vibe: "Late-night jazz blow after the festival closes. Standards & free playing.", want: "Horns, rhythm section", going: ["AK"], dist: "3.1 km", chat: [] },
  ]);
  const [meetChatInput, setMeetChatInput] = useState("");
  const [meetForm, setMeetForm] = useState({ title: "", place: "", address: "", when: "", vibe: "", want: ["Anyone"], max: 6 });
  // Social graph
  const [following, setFollowing] = useState(["LK", "SR"]);     // people I follow
  const [followers, setFollowers] = useState(["JB", "TM", "PT"]); // people following me
  const [friends, setFriends] = useState(["LK"]);                 // mutual / accepted friends
  const [friendReqIn, setFriendReqIn] = useState([                // incoming friend requests
    { init: "AK", name: "Anna Kovacs", sub: "Keys · Vienna" },
    { init: "TM", name: "Thomas Müller", sub: "Drums · Vienna" },
  ]);
  const [followReqIn, setFollowReqIn] = useState([]);             // (kept for parity; follows are open)
  const [netTab, setNetTab] = useState("friends");
  const [taxView, setTaxView] = useState("country"); // admin revenue breakdown: country | city
  const [friendSearch, setFriendSearch] = useState("");
  const [nickname, setNickname] = useState("");
  const [useNick, setUseNick] = useState(false);    // show nickname instead of real name
  const [hideRealName, setHideRealName] = useState(false); // hide first/surname from others
  const [bandInvitesIn, setBandInvitesIn] = useState([
    { id: "bi1", band: "Saturday Collective", genre: "Soul / funk", from: "Nina Brandt", fromInit: "NB", role: "Guitar", area: "Vienna · Mariahilf", msg: "Hey! Loved your playing in the jam last week — we rehearse Tuesdays and have a gig in July. Want to come try with us?", members: [{ init: "NB", name: "Nina Brandt", role: "Vocals · admin" }, { init: "DK", name: "David Keller", role: "Drums" }] },
  ]);
  const [inviteSel, setInviteSel] = useState(null);
  // Casting-before-join: a band books a rehearsal to try someone; after it, admin decides.
  const [castings, setCastings] = useState([]); // upcoming castings the user requested/was invited to
  const [castingDecide, setCastingDecide] = useState([
    { id: "cd1", band: "The Velvet Amps", bandId: 1, who: "Max Tanner", init: "MT", role: "Guitar", when: "Rehearsal done · today", done: true },
  ]); // finished castings awaiting the admin's add-or-not decision
  const [extras, setExtras] = useState([]);
  const [recSvc, setRecSvc] = useState({}); // studio services added to a recording booking, as {label: hours}
  const [recHrs, setRecHrs] = useState(2);  // hours for a recording booking (stepper)
  const [recExtras, setRecExtras] = useState([]); // equipment add-ons (keys) for a recording booking
  const [recRequest, setRecRequest] = useState(""); // free-text special requests to discuss with the studio
  const [filters, setFilters] = useState({ inst: [], svc: [], gear: [], priceMax: 100, ppl: null });
  const [gearFilterInput, setGearFilterInput] = useState(""); // gear search box inside the filters modal
  const [filterModal, setFilterModal] = useState(false);
  const [sortModal, setSortModal] = useState(false);
  const [chatMenu, setChatMenu] = useState(false);
  const [reportModal, setReportModal] = useState(false);
  const [noShowModal, setNoShowModal] = useState(false);
  const [adminDisputes, setAdminDisputes] = useState([
    { id: "dp1", who: "Marco Rossi", studio: "Proberaum Wien Mitte", issue: "Charged €26.91 after session — disputes the €2 cymbal add-on", orig: "24.84", claimed: "26.91", status: "open" },
    { id: "dp2", who: "Julia Krause", studio: "Studio 7 Recording", issue: "Card charged twice for one 3h session", orig: "139.73", claimed: "279.46", status: "open" },
    { id: "dp3", who: "The Velvet Amps", studio: "Rockhaus Ottakring", issue: "Refund not received after studio cancelled", orig: "31.05", claimed: "0.00", status: "open" },
  ]);
  const [adminReports, setAdminReports] = useState([
    { id: "rp1", from: "Proberaum Wien Mitte", target: "Marco Rossi", kind: "🔧 Damaged equipment", detail: "Snapped a mic stand, didn't mention it. Photos attached.", photos: 2, status: "open" },
    { id: "rp2", from: "Lukas K. (musician)", target: "Klangwerk Favoriten", kind: "🧹 Room not as described", detail: "Listing says PA included, there was none on arrival.", photos: 0, status: "open" },
    { id: "rp3", from: "Studio 7 Recording", target: "Anna Kovacs", kind: "⏰ Overstayed slot", detail: "Stayed 40 min past the booked end, blocked next booking.", photos: 1, status: "open" },
  ]);
  const [adminSel, setAdminSel] = useState(null);
  const [adminUserSearch, setAdminUserSearch] = useState("");
  const [musNoShows, setMusNoShows] = useState(1); // this musician's prior no-shows (demo)
  const [noShowDismissed, setNoShowDismissed] = useState(false); // hide the no-show banner
  const [resolveAmt, setResolveAmt] = useState("");
  const [resolveNote, setResolveNote] = useState("");
  const [adminMsg, setAdminMsg] = useState("");
  const [adminThreads, setAdminThreads] = useState([
    { id: "t1", who: "Marco Rossi", role: "Musician", reason: "Dispute · double charge", msgs: [{ adm: true, t: "Hi Marco, we're looking into the double-charge on your session. Could you confirm the time you arrived?" }, { adm: false, t: "Sure — I got there at 19:00 and left at 22:00, exactly 3 hours." }, { adm: true, t: "Thanks, that matches the booking. We'll have a decision shortly." }] },
    { id: "t2", who: "Proberaum Wien Mitte", role: "Studio", reason: "Dispute · reasoning requested", msgs: [{ adm: true, t: "Could you explain the extra charges added at session close for Marco R.'s booking?" }, { adm: false, t: "We charged for an extra 3 hours but that was a mistake in our system, apologies." }] },
    { id: "t3", who: "Studio 7 Recording", role: "Studio", reason: "Verification follow-up", msgs: [{ adm: true, t: "We need a utility bill to verify your studio address. Could you upload one?" }] },
  ]);
  const [adminThread, setAdminThread] = useState(null);
  const [bugReports, setBugReports] = useState([
    { id: "bg1", area: "Booking", from: "Lena Moser", role: "Musician", when: "2h ago", status: "new", text: "Calendar skipped a day when I scrolled fast to next month — booked the wrong date by accident." },
    { id: "bg2", area: "Payments", from: "Rockhaus Ottakring", role: "Studio", when: "Yesterday", status: "new", text: "Payout total didn't match my earnings page by €4. Might be a rounding thing on the booking fee." },
    { id: "bg3", area: "Chat", from: "Tom Keller", role: "Musician", when: "3 days ago", status: "triaged", text: "Group chat didn't show a new message badge until I reopened the app." },
  ]);
  const [bugSel, setBugSel] = useState(null);
  // Gear submitted by studios that isn't yet in the official library — admin reviews, fixes spelling, approves/merges.
  const [gearQueue, setGearQueue] = useState([
    { id: "gq1", raw: "neuman u87", studio: "Studio 7 Recording", room: "Live Room A", cat: "Microphones", when: "1h ago", suggest: "Neumann U87" },
    { id: "gq2", raw: "ssl ssl console", studio: "Studio 7 Recording", room: "Live Room A", cat: "Consoles / interfaces", when: "1h ago", suggest: "SSL console" },
    { id: "gq3", raw: "marshal jcm 800", studio: "Rockhaus Ottakring", room: "Room A", cat: "Instruments & amps", when: "Yesterday", suggest: "Marshall JCM800" },
    { id: "gq4", raw: "Moog Sub 37", studio: "RedRoom Studios", room: "Mix Suite C", cat: "Instruments & amps", when: "Yesterday", suggest: "Moog Sub 37" },
    { id: "gq5", raw: "protols", studio: "Klangwerk Favoriten", room: "Room B", cat: "DAWs / software", when: "2 days ago", suggest: "Pro Tools" },
  ]);
  const [gearSel, setGearSel] = useState(null);
  const [gearEdit, setGearEdit] = useState("");
  const [adminReply, setAdminReply] = useState("");
  const [reportReason, setReportReason] = useState("");
  const [reportDetails, setReportDetails] = useState("");
  const [reportPhotos, setReportPhotos] = useState(0);
  const [holidayModal, setHolidayModal] = useState(false);
  const [blockModal, setBlockModal] = useState(false);
  const [blocks, setBlocks] = useState([]);
  const [blkFrom, setBlkFrom] = useState("18:00");
  const [blkTo, setBlkTo] = useState("22:00");
  const [blkReason, setBlkReason] = useState("🔧 Maintenance");
  const [blkNote, setBlkNote] = useState("");
  const [vCountry, setVCountry] = useState("Austria");
  const [vCity, setVCity] = useState("Vienna");
  const [payoutFreq, setPayoutFreq] = useState("Monthly");
  const [payoutDom, setPayoutDom] = useState(1);   // day of month
  const [payoutDow, setPayoutDow] = useState("Monday"); // day of week
  const [payoutModal, setPayoutModal] = useState(false);
  const [holidays, setHolidays] = useState([{ date: "2026-12-24", label: "Christmas Eve", closed: true }]);
  const [holDate, setHolDate] = useState("2026-06-20");
  const [holName, setHolName] = useState("");
  const [holClosed, setHolClosed] = useState(true);
  const [holOpen, setHolOpen] = useState("12:00");
  const [holClose, setHolClose] = useState("18:00");
  const [blkDateFrom, setBlkDateFrom] = useState("2026-06-20");
  const [blkDateTo, setBlkDateTo] = useState("2026-06-22");
  const [blkAllDay, setBlkAllDay] = useState(true);
  const toastTimer = useRef(null);

  const [bands, setBands] = useState([
    { id: 1, name: "The Velvet Amps", genre: "Indie Rock", members: [{ init: "MR", name: "Marco Rossi", role: "You · Guitar", admin: true }, { init: "LK", name: "Lukas Klein", role: "Bass" }, { init: "JB", name: "Julia Berger", role: "Drums" }, { init: "PT", name: "Peter Toth", role: "Keys" }], chat: [{ who: "Lukas Klein", t: "Set list for Saturday — I made a draft 🎸" }, { who: "Julia Berger", t: "Nice! Can we run it Thursday?" }] },
    { id: 2, name: "Echo Static", genre: "Post-punk", members: [{ init: "MR", name: "Marco Rossi", role: "You · Guitar", admin: true }, { init: "SR", name: "Sofia Roth", role: "Violin" }, { init: "TM", name: "Thomas Müller", role: "Drums" }], chat: [] },
  ]);
  const [bandChatId, setBandChatId] = useState(null);
  const [bandChatInput, setBandChatInput] = useState("");
  const [spotForm, setSpotForm] = useState({ bandId: 1, need: "", note: "", paid: false });
  const [gigForm, setGigForm] = useState({ kind: "playing", band: "", venue: "", when: "", note: "", ticket: "" });
  const [myGigs, setMyGigs] = useState([]);
  const [activeBand, setActiveBand] = useState(1);
  const [newBandName, setNewBandName] = useState("");
  const [newBandGenre, setNewBandGenre] = useState("");

  const [chats, setChats] = useState({
    SUPPORT: [{ me: false, t: "Hi! This is the Recki team 👋 We're reaching out about your recent booking dispute — could you share a bit more detail on what happened?", unread: true }],
    LK: [{ me: false, t: "Hey, rehearsal on Friday?" }, { me: true, t: "Yes! 18:00 works for me 🎸" }],
    JB: [{ me: false, t: "Can you bring the cables?", unread: true }],
  });
  const [chatWith, setChatWith] = useState("LK");
  const [chatInput, setChatInput] = useState("");
  const chatNames = { SUPPORT: "Recki Support", LK: "Lukas Klein", JB: "Julia Berger", PT: "Peter Toth", SR: "Sofia Roth", TM: "Thomas Müller", AK: "Anna Kovacs", LM: "Lena Moser", TK: "Tom Keller", SP: "Sara Pichler", DK: "David Keller", MT: "Max Tanner", EM: "Elena Moser" };
  // Role + city shown for known musicians (e.g. in the friends list).
  const peopleInfo = { LK: { role: "Bassist", city: "Vienna" }, JB: { role: "Drummer", city: "Vienna" }, PT: { role: "Keyboardist", city: "Graz" }, SR: { role: "Songwriter & producer", city: "Vienna" }, TM: { role: "Session drummer", city: "Linz" }, AK: { role: "Vocalist", city: "Vienna" }, LM: { role: "Singer-songwriter", city: "Salzburg" }, TK: { role: "Guitarist", city: "Vienna" }, SP: { role: "Jazz pianist", city: "Vienna" } };
  // Last-message time shown next to each name in the chat list (demo values; real chats stamp "now").
  const [chatTimes, setChatTimes] = useState({ SUPPORT: "2h", LK: "18m", JB: "1h", PT: "Yesterday", SR: "3d", TM: "Mon", AK: "5h", LM: "Tue", TK: "1w", SP: "4h" });
  // Resolve a display name (or initials) to a profile id used by user-profile
  const idFromName = (s) => { if (!s) return "LK"; if (chatNames[s]) return s; const hit = Object.keys(chatNames).find(k => chatNames[k] === s); if (hit) return hit; return s.split(" ").filter(Boolean).map(w => w[0]).join("").slice(0, 2).toUpperCase(); };
  const openProfile = (s) => { setChatWith(idFromName(s)); go("user-profile"); };
  // Accept a band invite: create the band (with members) and auto-create its group chat.
  const acceptInvite = (inv) => {
    const members = (inv.members && inv.members.length ? inv.members : [{ init: inv.fromInit || "NB", name: inv.from, role: "Admin", admin: true }]).map(m => m.admin ? m : { ...m });
    const all = [...members, { init: "MR", name: "Marco Rossi", role: "You · " + inv.role }];
    const nb = { id: Date.now(), name: inv.band, genre: inv.genre, members: all, chat: [{ who: inv.from, t: `Welcome to ${inv.band}, Marco! 🎉` }] };
    setBands(bs => [...bs, nb]);
    setBandInvitesIn(r => r.filter(x => x.id !== inv.id));
  };

  const [vb, setVb] = useState(null);
  const [vbNote, setVbNote] = useState("");
  const [adjExtras, setAdjExtras] = useState(["cym"]);
  const [adjServices, setAdjServices] = useState({});
  const [adjHours, setAdjHours] = useState(2);
  const [adjCharges, setAdjCharges] = useState([]);
  // A session summary the studio sent the musician to confirm before charging.
  const [pendingAdj, setPendingAdj] = useState({
    studio: "Proberaum Wien Mitte", room: "Room A", date: "Wed, 11 Jun 2026", time: "13:00–15:00",
    bookedHours: 2, finalHours: 3, rate: 12,
    lines: [
      { label: "Room · 3h × €12", amt: 36, was: 24, note: "Ran 1h over" },
      { label: "Sound engineer", amt: 20, was: 0, note: "Added at session" },
      { label: "Cymbals · 3h × €3", amt: 9, was: 6 },
    ],
    bookedTotal: 30, finalTotal: 65,
    studioNote: "Thanks for coming in! You stayed an extra hour and used the house engineer for the last bit — added those below.",
    daysLeft: 5,
  });
  const [adjReviewMsg, setAdjReviewMsg] = useState("");
  const [chargeLabel, setChargeLabel] = useState("");
  const [chargeAmt, setChargeAmt] = useState("");
  const [calMonth, setCalMonth] = useState(0);
  const [calDay, setCalDay] = useState(11);
  const [rooms, setRooms] = useState([{ n: "Room A — Rehearsal", s: "from €9/hr · up to 6", q: "85%", paused: false }, { n: "Room B — Rehearsal", s: "from €10/hr · up to 4", q: "60%", paused: false }]);
  const [reviews, setReviews] = useState([
    { id: "rv1", name: "Marco Rossi", stars: "★★★★★", text: "Great room. Drum kit well tuned. Easy booking!", date: "11 Jun 2026", reply: "" },
    { id: "rv2", name: "Lukas Klein", stars: "★★★★☆", text: "Good value, slightly loud from next room. Will come back.", date: "2 Jun 2026", reply: "Thanks Lukas! We've added extra acoustic panels since 🙌" },
  ]);
  const [reviewReplyId, setReviewReplyId] = useState(null);
  const [reviewReplyText, setReviewReplyText] = useState("");
  const [trialDaysLeft, setTrialDaysLeft] = useState(52); // days left in 3-month free trial
  const [subActive, setSubActive] = useState(false); // has paid subscription
  const [subCycle, setSubCycle] = useState("monthly"); // chosen at checkout
  const [addRoomModal, setAddRoomModal] = useState(false);
  const monthsLeftInYear = 7; // demo: months until the annual plan renews
  // Musicians other studios have reported (mess / behaviour). Visible as a caution to other studios.
  const reportedMusicians = { "Max Tanner": { count: 2, reason: "Left the room messy · reported by 2 studios" }, "Tom Keller": { count: 1, reason: "No-show without cancelling · reported by 1 studio" } };
  const [planModal, setPlanModal] = useState(false);
  const [priceRules, setPriceRules] = useState([{ d: "Weekends", w: "Evening 18–23", p: 15 }, { d: "Weekdays", w: "Morning 9–12", p: 9 }]);
  const [ruleDay, setRuleDay] = useState("Weekdays");
  const [ruleWin, setRuleWin] = useState("Morning 9–12");
  const [ruleFrom, setRuleFrom] = useState("18:00");
  const [ruleTo, setRuleTo] = useState("23:00");
  const [rulePrice, setRulePrice] = useState(10);
  const [discounts, setDiscounts] = useState([{ pct: 20, days: "Mon 16, Tue 17" }]);
  const [discPct, setDiscPct] = useState(15);
  const [discDays, setDiscDays] = useState([]);
  const [discAllDay, setDiscAllDay] = useState(true);
  const [discFrom, setDiscFrom] = useState("09:00");
  const [discTo, setDiscTo] = useState("12:00");
  const [photos, setPhotos] = useState(["#5B5BD6", "#4CAF8A", "#5B8AD6", "#E07A7A"]);
  const [cover, setCover] = useState(0);
  const [vHours, setVHours] = useState([
    { d: "Monday", o: "09:00", c: "22:00", on: true, brk: false, bo: "12:00", bc: "13:00" }, { d: "Tuesday", o: "09:00", c: "22:00", on: true, brk: false, bo: "12:00", bc: "13:00" },
    { d: "Wednesday", o: "09:00", c: "22:00", on: true, brk: true, bo: "13:00", bc: "14:00" }, { d: "Thursday", o: "09:00", c: "22:00", on: true, brk: false, bo: "12:00", bc: "13:00" },
    { d: "Friday", o: "09:00", c: "23:00", on: true, brk: false, bo: "12:00", bc: "13:00" }, { d: "Saturday", o: "10:00", c: "23:00", on: true, brk: false, bo: "12:00", bc: "13:00" },
    { d: "Sunday", o: "10:00", c: "20:00", on: false, brk: false, bo: "12:00", bc: "13:00" },
  ]);

  useEffect(() => {
    if (screen === "splash") { const t = setTimeout(() => { setHistory(h => [...h, "splash"]); setScreen("role"); }, 1400); return () => clearTimeout(t); }
  }, [screen]);

  const go = (id) => { setHistory(h => [...h, screen]); setScreen(id); };
  const goBack = () => setHistory(h => { const prev = h[h.length - 1]; if (prev) setScreen(prev); return h.slice(0, -1); });
  const showToast = (m) => { setToast(m); clearTimeout(toastTimer.current); toastTimer.current = setTimeout(() => setToast(""), 2400); };
  const curStudio = myStudios.find(s => s.id === activeStudio) || myStudios[0];
  // --- Recording room matching: score by services + gear the room already includes free ---
  const recGearItem = (k) => REC_GEAR.find(g => g.k === k);
  // Is a gear item free for the chosen room? incl-type always free; room-type free only if room lists it; else paid.
  const recGearFree = (k, room) => { const g = recGearItem(k); if (!g) return false; if (g.type === "incl") return true; return room.free.includes(k); };
  const recRoomGearFlat = (room) => Object.values(room.gearCats || {}).flat();
  const REC_EQUIP = Array.from(new Set(REC_ROOMS.flatMap(recRoomGearFlat))); // optional equipment vocabulary (recording)
  const recRoomEquipHas = (room) => recRoomEquip.filter(g => recRoomGearFlat(room).includes(g));
  const recRoomScore = (room) => Object.keys(recSvc).filter(l => room.svc.includes(l)).length + recExtras.filter(k => room.free.includes(k)).length + recRoomEquipHas(room).length;
  const recPicked = Object.keys(recSvc).length + recExtras.length + recRoomEquip.length;
  const rankedRecRooms = [...REC_ROOMS].sort((a, b) => recRoomScore(b) - recRoomScore(a) || b.capN - a.capN);
  const suggestedRecRoom = rankedRecRooms[0];
  const currentRecRoom = REC_ROOMS.find(r => r.id === selRecRoom) || suggestedRecRoom;
  const recBusyByDay = currentRecRoom.busy;
  const recBusyToday = recBusyByDay[`${bkMonth}-${bkDay}`] || [];
  const recMaxDurFrom = (startH) => { let n = 0; for (let h = startH; h < 22; h++) { if (recBusyToday.includes(h)) break; n++; } return n; };
  const recMaxDur = selTime ? recMaxDurFrom(parseInt(selTime)) : 0;
  // Recording booking cost: room rate × hours + services (hourly) + gear (free / €/hr / one-off) + 3.5% fee (waived Premium).
  const REC_RATE = currentRecRoom.rate;
  const recHours = recHrs;
  const recRoom = REC_RATE * recHours;
  const recSvcLines = Object.entries(recSvc).map(([label, hrs]) => { const s = vServices.find(v => v.label === label); const rate = s ? s.from : 0; return { label, rate, hrs, amt: rate * hrs }; });
  const recSvcTotal = recSvcLines.reduce((a, l) => a + l.amt, 0);
  const recExtraLines = recExtras.map(k => { const g = recGearItem(k) || { label: k, type: "flat", p: 0 }; const free = recGearFree(k, currentRecRoom); const amt = free ? 0 : g.type === "hr" ? g.p * recHours : g.p; const detail = free ? "included" : g.type === "hr" ? `${recHours}h × €${g.p}` : "one-off"; return { label: g.label, amt, detail, free }; });
  const recExtraTotal = recExtraLines.reduce((a, l) => a + l.amt, 0);
  const recSub = recRoom + recSvcTotal + recExtraTotal;
  const recFee = isPrem ? 0 : +(recSub * 0.035).toFixed(2);
  const recTotal = +(recSub + recFee).toFixed(2);
  const lvlIdx = levelFromSessions(sessions);
  const lvl = LEVELS[lvlIdx];
  const isMaxLvl = lvlIdx >= LEVELS.length - 1;
  const subIdx = subFromSessions(sessions);              // 0..2
  const subRoman = ROMAN[subIdx];                         // I / II / III
  const intoSub = sessions - (lvlIdx * PER_LEVEL + subIdx * PER_SUB); // sessions into current sub-level
  const toNextSub = PER_SUB - intoSub;                    // sessions to next sub-level (or next animal)
  const atSubMax = subIdx >= SUBS - 1;                    // on the III of this animal
  const intoLevel = sessions - lvlIdx * PER_LEVEL;
  const toNext = PER_LEVEL - intoLevel;
  const ord = (n) => n + (n % 10 === 1 && n !== 11 ? "st" : n % 10 === 2 && n !== 12 ? "nd" : n % 10 === 3 && n !== 13 ? "rd" : "th");
  const payoutLabel = payoutFreq === "Daily" ? "Every business day" : payoutFreq === "Weekly" ? `Every ${payoutDow}` : `${ord(payoutDom)} of each month`;
  const nextPayout = payoutFreq === "Daily" ? "tomorrow" : payoutFreq === "Weekly" ? `next ${payoutDow}` : `${ord(payoutDom)} July`;
  const navGo = (id, tab) => { setNav(tab); go(id); };

  const studioData = [
    { id: "d1", name: "Proberaum Wien Mitte", loc: "Landstrasse", dist: 0.8, cap: "large", price: 12, equip: ["drum", "pa", "bass", "guitar", "keyboard"], tags: ["Drum kit", "PA", "Bass amp"], gear: ["Pearl Export drum kit", "Marshall JCM800", "Ampeg SVT", "Shure SM58", "Nord Stage 3", "Yamaha HS8"], rating: 4.8, variant: "", type: "r", screen: "detail" },
    { id: "d2", name: "Rockhaus Ottakring", loc: "Ottakring", dist: 3.2, cap: "large", price: 15, equip: ["piano", "pa", "guitar"], tags: ["Piano", "PA", "Guitar amp"], gear: ["Yamaha C3 grand piano", "Fender Twin Reverb", "Shure SM57", "Roland Jazz Chorus"], rating: 4.5, variant: "r", type: "r", screen: "detail" },
    { id: "d3", name: "Klangwerk Favoriten", loc: "Favoriten", dist: 4.5, cap: "large", price: 10, equip: ["drum", "keyboard"], tags: ["Drum kit", "Keyboard"], gear: ["Tama Imperialstar drum kit", "Nord Electro 6", "Korg Minilogue", "Shure SM58"], rating: 4.6, variant: "n", type: "r", screen: "detail" },
    { id: "d4", name: "Soundbase Neubau", loc: "Neubau", dist: 2.1, cap: "small", price: 14, equip: ["drum", "bass", "pa"], tags: ["Drum kit", "Bass amp"], gear: ["DW drum kit", "Fender Rumble", "Gallien-Krueger", "Shure SM57"], rating: 4.7, variant: "g", type: "r", screen: "detail" },
    { id: "d5", name: "GAB Music Factory", loc: "Atzgersdorf", dist: 5.3, cap: "large", price: 13, equip: ["drum", "pa", "bass", "guitar"], tags: ["Drum kit", "PA", "Full backline"], gear: ["Mapex drum kit", "Marshall JVM", "Ampeg BA", "Shure SM58", "Behringer mixer"], rating: 4.7, variant: "n", type: "r", screen: "detail" },
    { id: "d6", name: "beatboxx Margareten", loc: "Margareten", dist: 1.9, cap: "small", price: 11, equip: ["drum", "pa"], tags: ["Pro drum kit", "PA"], gear: ["Pearl Masters drum kit", "Zildjian cymbals", "Yamaha PA", "Shure SM57"], rating: 4.8, variant: "g", type: "r", screen: "detail" },
  ];

  // Master gear library — the canonical, autocomplete-backed list studios pick from and the
  // search bar suggests. Grouped by category. (Demo subset; in production this grows.)
  const GEAR_LIBRARY = {
    "Microphones": ["Neumann U87", "Neumann U47", "AKG C414", "Shure SM7B", "Shure SM57", "Shure SM58", "Sennheiser MD421", "Royer R-121"],
    "DAWs / software": ["Pro Tools", "Logic Pro", "Ableton Live", "Cubase", "FL Studio", "Studio One"],
    "Consoles / interfaces": ["SSL console", "Neve console", "Universal Audio Apollo", "API console", "Focusrite interface"],
    "Outboard / plugins": ["1176 compressor", "LA-2A compressor", "Pultec EQ", "Waves plugins", "FabFilter", "UAD plugins"],
    "Monitors": ["Yamaha NS-10", "Yamaha HS8", "Genelec 8040", "KRK Rokit", "Adam A7X"],
    "Instruments & amps": ["Steinway grand piano", "Yamaha C3 grand piano", "Nord Stage 3", "Nord Electro 6", "Korg Minilogue", "Fender Twin Reverb", "Marshall JCM800", "Ampeg SVT", "Pearl Export drum kit", "DW drum kit", "Tama Imperialstar drum kit"],
  };
  const ALL_GEAR = Object.values(GEAR_LIBRARY).flat();
  // Reverse lookup: which library category a known gear item belongs to (for auto-sorting from autocomplete).
  const gearCatOf = (item) => { for (const [cat, items] of Object.entries(GEAR_LIBRARY)) if (items.includes(item)) return cat; return null; };
  // Which of a studio's gear items match the current search query (for the "Has: …" label).
  // Match a query against a gear name by TOKENS, not loose substrings, so "SM57" doesn't match "SM58".
  // Each query word must be the start of some word in the gear name (prefix match per token).
  const gearTextMatch = (text, q) => {
    const words = text.toLowerCase().split(/[\s/+\-]+/).filter(Boolean);
    const terms = q.toLowerCase().split(/[\s/+\-]+/).filter(Boolean);
    return terms.every(term => words.some(w => w.startsWith(term)));
  };
  const gearMatches = (s, q) => !q ? [] : (s.gear || []).filter(g => gearTextMatch(g, q));
  // Only gear that at least one (rehearsal) studio actually has — so search never suggests gear nobody offers.
  const AVAILABLE_GEAR = Array.from(new Set(studioData.filter(s => s.type === "r").flatMap(s => s.gear || []))).sort();

  const filterMatch = (s) =>
    filters.inst.every(k => s.equip.includes(k)) &&
    filters.svc.every(k => (s.svc || []).includes(k)) &&
    filters.gear.every(g => (s.gear || []).includes(g)) &&
    (s.price <= filters.priceMax) &&
    (!filters.ppl || (filters.ppl === "s" ? s.cap === "small" : s.cap === "large"));
  const activeFilterCount = filters.inst.length + filters.svc.length + filters.gear.length + (filters.priceMax < 100 ? 1 : 0) + (filters.ppl ? 1 : 0);
  const studioSearchMatch = (s, q) => { const t = q.trim(); if (!t) return true; return (s.name + " " + s.loc).toLowerCase().includes(t.toLowerCase()) || (s.gear || []).some(g => gearTextMatch(g, t)); };
  const visibleStudios = studioData.filter(s => s.type === sMode && filterMatch(s) && studioSearchMatch(s, searchQ))
    .sort((a, b) => sortBy === "price" ? a.price - b.price : sortBy === "rating" ? b.rating - a.rating : a.dist - b.dist);
  const toggleCat = (cat, k, single) => setFilters(f => single
    ? { ...f, [cat]: f[cat] === k ? null : k }
    : { ...f, [cat]: f[cat].includes(k) ? f[cat].filter(x => x !== k) : [...f[cat], k] });
  // Instruments/equipment to offer in the filter = only what studios actually have (no dead options).
  const EQUIP_ORDER = ["guitar", "bass", "drum", "piano", "keyboard", "synth", "pa", "vocals", "percussion", "cajon", "dj", "violin", "cello", "sax", "trumpet", "ukulele", "accordion", "harmonica", "banjo", "mandolin", "harp"];
  const availableEquip = Array.from(new Set(studioData.filter(s => s.type === "r").flatMap(s => s.equip || [])));
  const instOpts = EQUIP_ORDER.filter(k => availableEquip.includes(k)).concat(availableEquip.filter(k => !EQUIP_ORDER.includes(k))).map(k => [k, EQUIP_LABELS[k] || k]);
  const filterCats = [{ key: "inst", title: "🎸 Instruments in the room", opts: instOpts }];

  const users = [
    { init: "LK", name: "Lukas Klein", sub: "Bass · Vienna", bg: M, lfb: true }, { init: "JB", name: "Julia Berger", sub: "Drums · Vienna", bg: G.fg, lfb: false },
    { init: "PT", name: "Peter Toth", sub: "Keys · Vienna", bg: R.fg, lfb: true }, { init: "SR", name: "Sofia Roth", sub: "Violin, Guitar · Vienna", bg: "#2a4a6a", lfb: false },
    { init: "TM", name: "Thomas Müller", sub: "Drums · Vienna", bg: "#6a4a2a", lfb: true }, { init: "AK", name: "Anna Kovacs", sub: "Vocals, Piano · Graz", bg: "#4a2a6a", lfb: false },
  ];
  const filteredUsers = users.filter(u => (!userSearch || u.name.toLowerCase().includes(userSearch.toLowerCase()) || u.sub.toLowerCase().includes(userSearch.toLowerCase())) && (!userOnlyLfb || u.lfb));
  // A Studio Jam is "for you" if it wants anyone, or wants an instrument you play.
  const jamMatchesMe = (j) => { const w = (j.want || "").toLowerCase(); if (!w || w.includes("any")) return true; return myInstruments.some(inst => { const t = inst.toLowerCase(); return w.includes(t) || (t === "guitar" && w.includes("guitar")) || (t === "keyboard" && w.includes("keys")) || (t === "piano" && w.includes("keys")) || (t === "synth" && w.includes("keys")) || (t === "saxophone" && w.includes("sax")); }); };
  const myJams = jams.filter(jamMatchesMe);

  // --- Room matching: score by chosen free equipment the room has + paid add-ons it already includes ---
  const roomGearFlat = (room) => Object.values(room.gearCats || {}).flat(); // all named gear in a room
  const REHEARSAL_EQUIP = Array.from(new Set(REHEARSAL_ROOMS.flatMap(roomGearFlat))); // optional equipment vocabulary
  const roomEquipHas = (room) => roomEquip.filter(g => roomGearFlat(room).includes(g));
  const roomScore = (room) => extras.filter(k => room.has.includes(k)).length + roomEquipHas(room).length;
  const rankedRooms = [...REHEARSAL_ROOMS].sort((a, b) => roomScore(b) - roomScore(a) || b.capN - a.capN);
  const suggestedRoom = rankedRooms[0];
  const currentRoom = REHEARSAL_ROOMS.find(r => r.id === selRoom) || suggestedRoom;
  const roomCovers = (room) => extras.filter(k => room.has.includes(k));
  const rehearsalPicked = extras.length + roomEquip.length;
  const hours = parseInt(selDur);
  const base = currentRoom.rate * hours;
  // Only charge for add-ons the chosen room does NOT already include for free
  const extrasSum = extras.filter(k => !currentRoom.has.includes(k)).reduce((a, k) => a + (extrasList.find(e => e.k === k)?.p || 0), 0) * hours;
  const subT = base + extrasSum;
  const fee = isPrem ? 0 : Math.round(subT * 3.5) / 100;
  const credDisc = credits >= 250 ? Math.round(subT * 15) / 100 : 0;
  const total = (subT + fee - credDisc).toFixed(2);
  const band = bands.find(b => b.id === activeBand) || bands[0];
  // Max musicians the booked room holds (jam capacity) — from the chosen room.
  const ROOM_CAP = { large: 8, medium: 6, small: 4 };
  const bookedStudio = studioData.find(s => s.name === "Proberaum Wien Mitte") || studioData[0];
  const jamCap = currentRoom.capN || ROOM_CAP[bookedStudio.cap] || 6;
  const share = ((subT + fee - credDisc) / band.members.length).toFixed(2);

  // --- Booking calendar / availability engine ---
  const TODAY_M = 0, TODAY_D = 11;          // "today" = 11 June 2026
  const FREE_WINDOW = 10;                    // free users: book up to 10 days ahead
  // Day index since today, for the 10-day premium gate
  const daysFromToday = (m, d) => {
    let total = 0;
    for (let i = TODAY_M; i < m; i++) total += MONTHS12[i][1];
    return total + (d - TODAY_D);
  };
  const dayLocked = (m, d) => !isPrem && daysFromToday(m, d) > FREE_WINDOW;
  const dayPast = (m, d) => daysFromToday(m, d) < 1; // same-day not bookable — earliest is tomorrow
  // Existing bookings (busy hours) keyed by "month-day", now per-room.
  const busyByDay = currentRoom.busy;
  const OPEN = 9, CLOSE = 22;                // studio hours 09:00–22:00 (last slot ends by 22)
  const busyToday = busyByDay[`${bkMonth}-${bkDay}`] || [];
  const allSlots = [];
  for (let h = OPEN; h < CLOSE; h++) allSlots.push(h);
  const fmtH = (h) => `${String(h).padStart(2, "0")}:00`;
  const selHour = parseInt(selTime);
  // Max hours bookable from a given start: stop at next busy hour or closing time
  const maxDurFrom = (startH) => {
    let n = 0;
    for (let h = startH; h < CLOSE; h++) {
      if (busyToday.includes(h)) break;
      n++;
    }
    return n;
  };
  const maxDur = busyToday.includes(selHour) ? 0 : maxDurFrom(selHour);
  const durOptions = Array.from({ length: Math.max(0, maxDur) }, (_, i) => i + 1);

  const removeMember = (bid, init) => setBands(bs => bs.map(b => b.id === bid ? { ...b, members: b.members.filter(m => m.init !== init) } : b));

  const sendChat = () => {
    if (!chatInput.trim()) return;
    setChats(c => ({ ...c, [chatWith]: [...(c[chatWith] || []), { me: true, t: chatInput.trim() }] }));
    setChatTimes(t => ({ ...t, [chatWith]: "now" }));
    setChatInput("");
  };
  const deleteChat = (k) => setChats(c => { const n = { ...c }; delete n[k]; return n; });
  const unreadCount = (k) => (chats[k] || []).filter(m => m.unread).length;
  const totalUnread = Object.keys(chats).reduce((s, k) => s + unreadCount(k), 0);
  // Everything awaiting the user, surfaced on the Profile tab badge: unread DMs + notifications + friend requests.
  const profileBadge = totalUnread + unreadNotifs + friendReqIn.length;
  const markRead = (k) => setChats(c => ({ ...c, [k]: (c[k] || []).map(m => m.unread ? { ...m, unread: false } : m) }));

  const gigs = [
    { id: "gig1", name: "The Velvet Amps", sub: "B72 · Rock / Indie", date: "Sat 14 Jun · 21:00", v: "", ico: "🎸", dist: 0.6 },
    { id: "gig2", name: "Klangraum", sub: "Flex · Electronic", date: "Wed 18 Jun · 22:00", v: "p", ico: "🎹", dist: 2.4 },
    { id: "gig3", name: "Maria & Band", sub: "WUK · Folk / Pop", date: "Sun 22 Jun · 20:00", v: "g", ico: "🎤", dist: 3.8 },
    { id: "gig4", name: "Dead Frequencies", sub: "B72 · Post-rock", date: "Sat 29 Jun · 21:30", v: "r", ico: "🎸", dist: 0.6, dest: "gig4" },
    { id: "gig5", name: "Nora Vale", sub: "Chelsea · Singer-songwriter", date: "Thu 26 Jun · 20:30", v: "p", ico: "🎤", dist: 1.7, dest: "gig5" },
  ];
  const gigsSorted = [...gigs].sort((a, b) => a.dist - b.dist);

  const vendorBookings = [
    { time: "13:00–15:00", room: "Room A", who: "Marco R. · 2 people", phone: "+43 660 123 4567", amount: "€24.84", src: "Boost placement" },
    { time: "16:00–18:00", room: "Room B", who: "The Velvet Amps · 4 people", phone: "+43 664 555 1212", amount: "€20.70", src: "Organic search" },
    { time: "19:00–21:00", room: "Room A", who: "Lena Moser + 3", phone: "+43 699 888 4433", amount: "€24.84", src: "Booking", jam: true },
  ];
  const calBookings = { "0-11": 3, "0-12": 1, "0-14": 2, "0-18": 1, "0-25": 1, "1-2": 1, "1-9": 2 };

  const discDayOpts = ["Thu 12", "Fri 13", "Sat 14", "Sun 15", "Mon 16", "Tue 17", "Wed 18", "Thu 19", "Fri 20", "Sat 21"];
  const vendorScreens = new Set(["vendor-home", "vendor-cal", "vendor-listings", "vendor-edit", "vendor-studio", "vendor-earnings", "vendor-reviews", "vendor-promos", "vendor-featured", "gig-submit", "vendor-bdetail", "vendor-photos", "vendor-hours", "vendor-payouts", "vendor-pricing", "vendor-insights", "vendor-adjust", "vendor-plan"]);
  const noMusNav = ["splash", "role", "welcome", "welcome-studio", "signup", "signup-studio", "login", "profilesetup", "vendor-setup", "chat", "account-link", "help", "report-bug", "support-chat", "notifications", "inbox", "language", "dev-failures", "adj-review", "payment-done", "session-review", "meet-create", "network", "find-sessionist", "hire-hub", "offer-to-play", "casting-request", "book-sessionist", "send-brief", "ses-gig-post", "invite-detail", "band-chat", "post-spot", "cancel-sub", "payment-methods", "gig-post", "dispute-options", "dispute-external", "admin-home", "admin-login", "admin-disputes", "admin-dispute-detail", "admin-breakdown", "admin-party-actions", "admin-messages", "admin-thread", "admin-reports", "admin-report-detail", "admin-users", "admin-bugs", "admin-bug-detail", "admin-cancellations", "admin-gear", "admin-gear-edit"];

  // Reusable categorised, expandable gear list (Control room / Microphones / DAW / …).
  // scope namespaces the open-state so studio-wide and per-room sections expand independently.
  // wantable: if true, each gear item is a tappable chip that toggles a "want" preference (used in booking).
  const gearAccordion = (scope, cats, { wantable = false, want = [], onToggle } = {}) => {
    const entries = Object.entries(cats || {}).filter(([, items]) => items && items.length);
    if (entries.length === 0) return <div style={{ fontSize: 11.5, color: "#aaa", padding: "2px 0" }}>No gear listed.</div>;
    return <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      {entries.map(([cat, items]) => {
        const key = scope + ":" + cat, open = !!openGearCat[key];
        return <div key={key} style={{ border: `1px solid ${BORDER}`, borderRadius: 10, overflow: "hidden" }}>
          <div onClick={() => setOpenGearCat(o => ({ ...o, [key]: !o[key] }))} style={{ display: "flex", alignItems: "center", gap: 8, padding: "10px 12px", cursor: "pointer", background: open ? L : "#fff" }}>
            <span style={{ flex: 1, fontSize: 12.5, fontWeight: 700, color: D }}>{cat}</span>
            <span style={{ fontSize: 10, color: "#bbb", flexShrink: 0 }}>{items.length} item{items.length > 1 ? "s" : ""}</span>
            <span style={{ fontSize: 14, color: M, flexShrink: 0, display: "inline-block", lineHeight: 1, transform: open ? "rotate(90deg)" : "none", transition: "transform .15s" }}>›</span>
          </div>
          {open && <div style={{ display: "flex", flexWrap: "wrap", gap: 6, padding: "9px 12px 11px", borderTop: `0.5px solid ${BORDER}`, background: "#fff" }}>
            {items.map(g => wantable
              ? <button key={g} onClick={() => onToggle(g)} style={{ ...css.fc(want.includes(g)), fontSize: 10.5, padding: "6px 11px" }}>{g}{want.includes(g) ? " ✓" : ""}</button>
              : <span key={g} style={{ ...css.tag, fontSize: 11, padding: "5px 10px", background: L, color: M }}>{g}</span>)}
          </div>}
        </div>;
      })}
    </div>;
  };
  // Merge all rooms' gear into one studio-wide categorised map (deduped per category).
  const studioGearOverview = (rooms) => { const out = {}; rooms.forEach(r => Object.entries(r.gearCats || {}).forEach(([cat, items]) => { out[cat] = Array.from(new Set([...(out[cat] || []), ...items])); })); return out; };

  // Studio-authored policy text → shown to musicians (single source of truth: studio edits drive this).
  const policyText = () => {
    const win = vCancelWindow === "12h" ? "12 hours" : vCancelWindow === "24h" ? "24 hours" : "48 hours";
    let s = vCancelWindow === "none"
      ? "No free cancellation. "
      : `Free cancellation with 100% refund up to ${win} before. ${vLateCharge === "0" ? "No charge for later cancellations. " : `${vLateCharge === "100" ? "Full amount" : vLateCharge + "%"} charged after that. `}`;
    s += vNoShow === "0" ? "No-shows aren't charged. " : vNoShow === "50" ? "No-shows charged 50%. " : "No-shows charged in full. ";
    if (vPolicyNote.trim()) s += vPolicyNote.trim();
    return s;
  };

  // Friends-to-split picker: shows your regular friends inline + a "More" button opening the full list popup.
  const toggleSplitFriend = (init) => setSplitFriends(p => p.includes(init) ? p.filter(x => x !== init) : [...p, init]);
  const friendChip = (u) => { const on = splitFriends.includes(u.init); return <button key={u.init} onClick={() => toggleSplitFriend(u.init)} style={{ display: "flex", alignItems: "center", gap: 6, padding: "5px 11px 5px 5px", borderRadius: 20, border: `1px solid ${on ? D : BORDER}`, background: on ? L : "#fff", cursor: "pointer", fontFamily: "inherit" }}>
    <span style={{ width: 22, height: 22, borderRadius: "50%", background: u.bg, color: "#fff", fontSize: 9, fontWeight: 700, display: "flex", alignItems: "center", justifyContent: "center" }}>{u.init}</span>
    <span style={{ fontSize: 11.5, fontWeight: 600, color: on ? D : "#555" }}>{u.name.split(" ")[0]}{on ? " ✓" : ""}</span>
  </button>; };
  const friendsPicker = () => {
    const regulars = users.filter(u => friends.includes(u.init)); // your saved friends shown inline
    const pickedNonRegulars = users.filter(u => !friends.includes(u.init) && splitFriends.includes(u.init)); // added via popup, keep visible
    return <div style={{ marginTop: 10 }}>
      <div style={{ fontSize: 12, color: "#888", marginBottom: 7 }}>Pick friends to split with. Each member pre-authorises only their own share — up to 24 hours before the session. If someone doesn't confirm in time, the booking is cancelled and confirmed shares released. Booking less than 24h before the slot? Everyone has a 2-hour window from booking to confirm.</div>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 7, alignItems: "center" }}>
        {regulars.map(friendChip)}
        {pickedNonRegulars.map(friendChip)}
        <button onClick={() => { setFriendSearch(""); setFriendPickerModal(true); }} style={{ display: "flex", alignItems: "center", gap: 5, padding: "6px 12px", borderRadius: 20, border: `1px dashed ${D}`, background: "#fff", color: D, cursor: "pointer", fontFamily: "inherit", fontSize: 11.5, fontWeight: 600 }}>
          <span style={{ fontSize: 14 }}>👥</span> More friends
        </button>
      </div>
      <div style={{ fontSize: 10.5, color: splitFriends.length ? G.fg : "#999", marginTop: 7 }}>{splitFriends.length ? `Splitting ${1 + splitFriends.length} ways — you + ${splitFriends.length} friend${splitFriends.length > 1 ? "s" : ""}` : "Pick at least one friend, or the cost is all yours."}</div>
    </div>;
  };

  const screens = {

    splash: <div style={{ flex: 1, background: "linear-gradient(160deg, #6D5BE0 0%, #4F5BD5 55%, #22B8C4 100%)", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" }}>
      <style>{`
        .rkSearch::placeholder { color: rgba(255,255,255,.55); }
        @keyframes rkPop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
        @keyframes rkFade { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }
        @keyframes rkBar { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
        @keyframes rkEq { 0%,100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
        @keyframes rkRing { 0% { transform: scale(.7); opacity: .55; } 100% { transform: scale(2.2); opacity: 0; } }
        @keyframes rkFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
      `}</style>
      <div style={{ textAlign: "center", position: "relative" }}>
        <div style={{ position: "absolute", top: -8, left: "50%", marginLeft: -56, width: 112, height: 112, borderRadius: 32, border: "2px solid rgba(255,255,255,.45)", animation: "rkRing 2s ease-out infinite" }} />
        <div style={{ position: "absolute", top: -8, left: "50%", marginLeft: -56, width: 112, height: 112, borderRadius: 32, border: "2px solid rgba(255,255,255,.3)", animation: "rkRing 2s ease-out .6s infinite" }} />
        <div style={{ display: "inline-block", animation: "rkPop 0.7s cubic-bezier(.2,.8,.3,1.4) both", filter: "drop-shadow(0 10px 24px rgba(0,0,0,.25))" }}>
          <div style={{ animation: "rkFloat 3s ease-in-out 0.7s infinite" }}><ReckiLogo size={96} animated radius={28} /></div>
        </div>
        <div style={{ fontSize: 44, fontWeight: 800, color: "#fff", letterSpacing: -1, marginTop: 22, animation: "rkFade 0.6s ease-out 0.3s both" }}>Recki</div>
        <div style={{ fontSize: 13, color: "rgba(255,255,255,.9)", marginTop: 6, animation: "rkFade 0.6s ease-out 0.45s both" }}>book · play · record</div>
      </div>
    </div>,

    role: <div style={{ flex: 1, background: `linear-gradient(165deg, #6E5DE0 0%, ${DEEP} 60%, #2A2A6E 100%)`, display: "flex", flexDirection: "column", justifyContent: "flex-end", position: "relative", overflow: "hidden" }}>
      {/* glowing aurora orbs */}
      <div style={{ position: "absolute", top: -70, right: -60, width: 240, height: 240, borderRadius: "50%", background: `radial-gradient(circle, ${CORAL}66, transparent 70%)`, filter: "blur(18px)" }} />
      <div style={{ position: "absolute", top: 120, left: -80, width: 260, height: 260, borderRadius: "50%", background: `radial-gradient(circle, ${GIG}55, transparent 70%)`, filter: "blur(22px)" }} />
      <div style={{ position: "absolute", top: -30, left: 40, width: 150, height: 150, borderRadius: "50%", background: `radial-gradient(circle, ${GOLD}44, transparent 70%)`, filter: "blur(20px)" }} />

      {/* hero: logo + name, floating in the coloured space */}
      <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", position: "relative", zIndex: 1, padding: "40px 28px 0" }}>
        <div style={{ filter: "drop-shadow(0 12px 34px rgba(0,0,0,.4))", marginBottom: 22 }}><ReckiLogo size={84} radius={26} /></div>
        <div style={{ fontSize: 40, fontWeight: 800, color: "#fff", letterSpacing: -1, marginBottom: 12 }}>Recki</div>
        <div style={{ fontSize: 15, color: "rgba(255,255,255,.72)", lineHeight: 1.6, textAlign: "center", maxWidth: 280 }}>Book rehearsal rooms near you to make some noise! 🔊</div>
      </div>

      {/* frosted-glass action card */}
      <div style={{ position: "relative", zIndex: 1, margin: "0 14px 20px", padding: "22px 20px 20px", borderRadius: 26, background: "rgba(255,255,255,.1)", backdropFilter: "blur(18px)", WebkitBackdropFilter: "blur(18px)", border: "1px solid rgba(255,255,255,.18)", boxShadow: "0 -4px 40px rgba(0,0,0,.25)" }}>
        <button onClick={() => { setLoginRole("musician"); go("login"); }} style={{ width: "100%", background: "rgba(255,255,255,.14)", color: "#fff", border: "1px solid rgba(255,255,255,.28)", borderRadius: 15, padding: "15px", fontSize: 14.5, fontWeight: 600, cursor: "pointer", fontFamily: "inherit", marginBottom: 10 }}>Log in</button>
        <button onClick={() => go("signup")} style={{ width: "100%", background: "rgba(255,255,255,.14)", color: "#fff", border: "1px solid rgba(255,255,255,.28)", borderRadius: 15, padding: "15px", fontSize: 14.5, fontWeight: 600, cursor: "pointer", fontFamily: "inherit" }}>Create account</button>
      </div>
    </div>,

    welcome: <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={{ background: `linear-gradient(160deg, ${D}, ${DEEP})`, flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", padding: "30px 22px", position: "relative" }}>
        <button onClick={() => go("role")} style={{ position: "absolute", top: 16, left: 16, background: "rgba(255,255,255,.18)", border: "none", borderRadius: "50%", width: 34, height: 34, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", fontSize: 17, color: "#fff", fontFamily: "inherit" }}>←</button>
        <div style={{ width: 88, height: 88, borderRadius: "50%", background: "rgba(255,255,255,.1)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 42, marginBottom: 18 }}>🎸</div>
        <div style={{ fontSize: 21, fontWeight: 800, color: "#fff", marginBottom: 8 }}>Find your sound, book your space</div>
        <div style={{ fontSize: 13, color: "rgba(255,255,255,.6)", lineHeight: 1.6 }}>Rehearsal rooms near you.</div>
      </div>
      <div style={{ padding: "16px 0 14px", background: "#fff" }}>
        <button style={css.pbtn()} onClick={() => go("signup")}>Create account</button>
        <button style={css.sbtn()} onClick={() => { setLoginRole("musician"); go("login"); }}>Log in</button>
      </div>
    </div>,

    "welcome-studio": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={{ background: `linear-gradient(160deg, ${D}, ${DEEP})`, flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", padding: "30px 22px", position: "relative" }}>
        <button onClick={() => go("role")} style={{ position: "absolute", top: 16, left: 16, background: "rgba(255,255,255,.18)", border: "none", borderRadius: "50%", width: 34, height: 34, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", fontSize: 17, color: "#fff", fontFamily: "inherit" }}>←</button>
        <div style={{ width: 88, height: 88, borderRadius: "50%", background: "rgba(255,255,255,.1)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 42, marginBottom: 18 }}>🏠</div>
        <div style={{ fontSize: 21, fontWeight: 800, color: "#fff", marginBottom: 8 }}>List your studio, fill your calendar</div>
        <div style={{ fontSize: 13, color: "rgba(255,255,255,.6)", lineHeight: 1.6 }}>Reach musicians in Italy, Austria & Spain. Manage everything in one place. Free to list.</div>
      </div>
      <div style={{ padding: "16px 0 14px", background: "#fff" }}>
        <button style={css.pbtn()} onClick={() => go("signup-studio")}>Create studio account</button>
        <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "6px 16px" }}><div style={{ flex: 1, height: 0.5, background: BORDER }} /><span style={{ fontSize: 11, color: "#888" }}>or</span><div style={{ flex: 1, height: 0.5, background: BORDER }} /></div>
        {["Google", "Apple"].map(name =>
          <button key={name} onClick={() => go("vendor-setup")} style={css.sbtn()}>Continue with {name}</button>)}
        <p style={{ textAlign: "center", fontSize: 12, color: "#888", padding: "10px 16px 0" }}>Have an account? <span onClick={() => { setLoginRole("studio"); go("login"); }} style={{ color: M, cursor: "pointer", fontWeight: 600 }}>Log in</span></p>
      </div>
    </div>,

    signup: <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Create account</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Step 1 of 2 · your login details</p></div>
      <div style={{ padding: "14px 0 0" }}>
        <div style={{ margin: "0 16px 4px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Login details</div>
        {[["Email", "marco@email.com", "email"], ["Password", "········", "password"], ["Confirm password", "········", "password"]].map(([l, v, t]) =>
          <div key={l} style={{ margin: "0 16px 10px" }}><label style={css.label}>{l} <span style={{ color: CORAL, fontWeight: 700 }}>· required</span></label><input defaultValue={v} type={t} style={css.input} /></div>)}
        <div style={{ margin: "0 16px 10px" }}>
          <label style={css.label}>Phone number <span style={{ color: CORAL, fontWeight: 700 }}>· required</span></label>
          <div style={{ display: "flex", gap: 8 }}>
            <select value={phoneCC} onChange={e => setPhoneCC(e.target.value)} style={{ ...css.input, width: 120, flexShrink: 0, padding: "0 8px", appearance: "menulist", fontSize: 14 }}>
              {DIAL_CODES.map(o => <option key={o.c} value={o.c}>{o.f} {o.d} ({o.c})</option>)}
            </select>
            <input value={phone} onChange={e => setPhone(e.target.value.replace(/[^0-9 ]/g, ""))} type="tel" inputMode="tel" placeholder="660 123 4567" style={{ ...css.input, flex: 1 }} />
          </div>
          <div style={{ fontSize: 10.5, color: "#999", marginTop: 5, lineHeight: 1.4 }}>Pick your country, then enter your number. This is your unique Recki ID — studios use it to find your booking.</div>
        </div>
        <div style={{ margin: "0 16px 12px", fontSize: 11, color: "#999", lineHeight: 1.5 }}>🔒 We'll only use your details for bookings, receipts and account security.</div>
        <button style={{ ...css.pbtn(), opacity: phone.replace(/[^0-9]/g, "").length >= 6 ? 1 : .5 }} onClick={() => { if (phone.replace(/[^0-9]/g, "").length < 6) { showToast("📱 Please enter a valid phone number"); return; } go("profilesetup"); }}>Continue →</button>
      </div>
    </div>,

    "signup-studio": <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Studio account</h2></div>
      <div style={{ padding: "14px 0 0" }}>
        <div style={{ margin: "0 16px 4px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Your name</div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>First name</label><input defaultValue="Hans" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Middle name <span style={{ color: "#bbb", fontWeight: 400 }}>· optional</span></label><input placeholder="Optional" style={css.input} /></div>
        <div style={{ margin: "0 16px 14px" }}><label style={css.label}>Surname</label><input defaultValue="Weber" style={css.input} /></div>
        <div style={{ height: 1, background: BORDER, margin: "0 16px 14px" }} />
        {[["Studio name", "Proberaum Wien Mitte"], ["Email", "hans@proberaum.at"], ["Password", "········"]].map(([l, v]) =>
          <div key={l} style={{ margin: "0 16px 10px" }}><label style={css.label}>{l}</label><input defaultValue={v} style={css.input} /></div>)}
        <button style={css.pbtn()} onClick={() => go("vendor-setup")}>Create account →</button>
      </div>
    </div>,

    login: <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Log in</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Welcome back</p></div>
      <div style={{ padding: "14px 0 0" }}>
        {[["Email or phone number", "marco@email.com", "text"], ["Password", "········", "password"]].map(([l, v, t]) =>
          <div key={l} style={{ margin: "0 16px 10px" }}><label style={css.label}>{l}</label><input defaultValue={v} type={t} style={css.input} /></div>)}
        <div style={{ margin: "0 16px 10px", fontSize: 11, color: "#999", lineHeight: 1.4 }}>You can log in with either the email or the phone number on your account.</div>
        <button style={css.pbtn()} onClick={() => { setNav("home"); go("home"); }}>Log in</button>
        <p style={{ textAlign: "center", fontSize: 12, color: M, padding: "8px 16px", cursor: "pointer" }} onClick={() => showToast("Reset link sent 📧")}>Forgot password?</p>
      </div>
    </div>,

    profilesetup: <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Your profile</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Step 2 of 2 · tell us about you</p></div>
      <div style={{ flex: 1, overflowY: "auto", padding: "14px 0 0" }}>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginBottom: 16 }}>
          <div onClick={() => { setHasPhoto(true); setUseAnimal(false); showToast("📷 Photo updated"); }} style={{ position: "relative", cursor: "pointer" }}>
            <div style={{ width: 84, height: 84, borderRadius: "50%", background: useAnimal ? lvl.color : hasPhoto ? "linear-gradient(135deg,#5B5BD6,#8A8AE0)" : GREY, border: `2px solid ${BORDER}`, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 34, color: "#fff", overflow: "hidden" }}>{useAnimal ? lvl.animal : hasPhoto ? "🧑‍🎤" : <span style={{ fontSize: 30, opacity: .4 }}>👤</span>}</div>
            <div style={{ position: "absolute", bottom: 0, right: 0, width: 28, height: 28, borderRadius: "50%", background: D, border: "2px solid #fff", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 13 }}>📷</div>
          </div>
          <div onClick={() => { setHasPhoto(true); setUseAnimal(false); showToast("📷 Photo updated"); }} style={{ fontSize: 12, color: M, fontWeight: 600, marginTop: 8, cursor: "pointer" }}>{hasPhoto ? "Change photo" : "Add profile photo"}</div>
          <div onClick={() => { setUseAnimal(true); setHasPhoto(false); showToast(`${lvl.animal} ${lvl.name} avatar set`); }} style={{ fontSize: 11, color: useAnimal ? G.fg : "#999", marginTop: 3, cursor: "pointer" }}>{useAnimal ? "✓ Using your level animal" : `Or use your level animal ${lvl.animal}`}</div>
        </div>
        <div style={{ margin: "0 16px 4px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Your name</div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>First name</label><input defaultValue="Marco" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Middle name <span style={{ color: "#bbb", fontWeight: 400 }}>· optional</span></label><input placeholder="Optional" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Surname</label><input defaultValue="Rossi" style={css.input} /></div>
        <div style={{ margin: "0 16px 14px" }}><label style={css.label}>Phone number <span style={{ color: CORAL, fontWeight: 700 }}>· your unique Recki ID</span></label>
          <div style={{ display: "flex", gap: 8 }}>
            <select value={phoneCC} onChange={e => setPhoneCC(e.target.value)} style={{ ...css.input, width: 120, flexShrink: 0, padding: "0 8px", appearance: "menulist", fontSize: 14 }}>
              {DIAL_CODES.map(o => <option key={o.c} value={o.c}>{o.f} {o.d} ({o.c})</option>)}
            </select>
            <input value={phone} onChange={e => setPhone(e.target.value.replace(/[^0-9 ]/g, ""))} type="tel" inputMode="tel" placeholder="660 123 4567" style={{ ...css.input, flex: 1 }} />
          </div>
          <div style={{ fontSize: 10.5, color: "#999", marginTop: 5, lineHeight: 1.4 }}>Studios use this to find your booking. Keep it up to date.</div>
        </div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Nickname / stage name <span style={{ color: "#bbb", fontWeight: 400 }}>· optional</span></label><input value={nickname} onChange={e => setNickname(e.target.value)} placeholder="e.g. MarcoBeats" style={css.input} /></div>
        <div style={{ background: GREY, borderRadius: 12, margin: "0 16px 6px", overflow: "hidden" }}>
          <div onClick={() => { const v = !useNick; setUseNick(v); if (!v) setHideRealName(false); }} style={{ display: "flex", alignItems: "center", gap: 11, padding: "11px 14px", cursor: "pointer", borderBottom: `0.5px solid ${BORDER}` }}>
            <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>Show nickname instead of my name</div><div style={{ fontSize: 11, color: "#888" }}>Others see “{nickname.trim() || "your nickname"}” across Recki</div></div>
            <div style={{ width: 42, height: 25, borderRadius: 13, background: useNick ? D : "#ccc", position: "relative", flexShrink: 0, transition: "background .15s" }}><div style={{ width: 21, height: 21, borderRadius: "50%", background: "#fff", position: "absolute", top: 2, left: useNick ? 19 : 2, transition: "left .15s" }} /></div>
          </div>
          <div onClick={() => { if (useNick) setHideRealName(h => !h); }} style={{ display: "flex", alignItems: "center", gap: 11, padding: "11px 14px", cursor: useNick ? "pointer" : "default", opacity: useNick ? 1 : .45 }}>
            <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>Hide my real name & surname</div><div style={{ fontSize: 11, color: "#888" }}>Keep your legal name private from other users</div></div>
            <div style={{ width: 42, height: 25, borderRadius: 13, background: hideRealName && useNick ? D : "#ccc", position: "relative", flexShrink: 0, transition: "background .15s" }}><div style={{ width: 21, height: 21, borderRadius: "50%", background: "#fff", position: "absolute", top: 2, left: hideRealName && useNick ? 19 : 2, transition: "left .15s" }} /></div>
          </div>
        </div>
        <div style={{ margin: "0 16px 12px", fontSize: 11, color: "#999", lineHeight: 1.5 }}>🔒 Studios always see the name on the booking & payment for safety, even if you use a nickname publicly.</div>
        <div style={{ display: "flex", gap: 8, margin: "0 16px 10px" }}>
          <div style={{ flex: 1 }}><label style={css.label}>Country</label>
            <select value={country} onChange={e => { setCountry(e.target.value); setCity(COUNTRIES[e.target.value][0]); }} style={css.input}>{Object.keys(COUNTRIES).map(c => <option key={c}>{c}</option>)}</select></div>
          <div style={{ flex: 1 }}><label style={css.label}>Home city</label>
            <select value={city} onChange={e => setCity(e.target.value)} style={css.input}>{COUNTRIES[country].map(c => <option key={c}>{c}</option>)}</select></div>
        </div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>I am a…</label>
          <select value={userCat} onChange={e => setUserCat(e.target.value)} style={css.input}><option>Amateur musician</option><option>Professional musician</option><option>Producer</option></select></div>
        <div style={{ margin: "0 16px 6px" }}><label style={css.label}>Your instruments — tap all that apply</label></div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 7, padding: "0 16px 6px" }}>
          {INSTRUMENTS.map(i => {
            const on = i === "Other" ? showOther : myInstruments.includes(i);
            return <button key={i} onClick={() => i === "Other" ? setShowOther(s => !s) : setMyInstruments(p => on ? p.filter(x => x !== i) : [...p, i])} style={css.fc(on)}>{i}</button>;
          })}
          {myInstruments.filter(i => !INSTRUMENTS.includes(i)).map(i =>
            <button key={i} onClick={() => setMyInstruments(p => p.filter(x => x !== i))} style={css.fc(true)}>{i} ✕</button>)}
        </div>
        {showOther && <div style={{ display: "flex", gap: 8, margin: "4px 16px 6px" }}>
          <input value={otherInput} onChange={e => setOtherInput(e.target.value)} placeholder="Which instrument? e.g. Sitar" style={{ ...css.input, flex: 1 }} />
          <button onClick={() => { const v = otherInput.trim(); if (!v) return; setMyInstruments(p => p.includes(v) ? p : [...p, v]); setOtherInput(""); showToast(`✅ ${v} added — add more if you like`); }} style={{ ...css.gbtn({ fontSize: 12, padding: "0 16px" }), flexShrink: 0 }}>Add</button>
        </div>}
        <div style={{ padding: "0 16px 8px", fontSize: 11, color: "#888" }}>{myInstruments.length} selected · tap “Other” to add your own (as many as you like)</div>

        <div style={{ padding: "4px 16px 6px" }}><label style={css.label}>🎼 Genres you play</label></div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 7, padding: "0 16px 8px" }}>
          {GENRES.map(g => {
            const on = g === "Other" ? showGenreOther : genres.includes(g);
            return <button key={g} onClick={() => g === "Other" ? setShowGenreOther(s => !s) : setGenres(p => p.includes(g) ? p.filter(x => x !== g) : [...p, g])} style={css.chip(on, "#1FB8C4")}>{g}</button>;
          })}
          {genres.filter(g => !GENRES.includes(g)).map(g =>
            <button key={g} onClick={() => setGenres(p => p.filter(x => x !== g))} style={css.chip(true, "#1FB8C4")}>{g} ✕</button>)}
        </div>
        {showGenreOther && <div style={{ display: "flex", gap: 8, margin: "0 16px 6px" }}>
          <input value={genreOtherInput} onChange={e => setGenreOtherInput(e.target.value)} placeholder="Which genre? e.g. Afrobeat, Shoegaze" style={{ ...css.input, flex: 1 }} />
          <button onClick={() => { const v = genreOtherInput.trim(); if (!v) return; setGenres(p => p.includes(v) ? p : [...p, v]); setGenreOtherInput(""); showToast(`✅ ${v} added — add more if you like`); }} style={{ ...css.gbtn({ fontSize: 12, padding: "0 16px" }), flexShrink: 0 }}>Add</button>
        </div>}
        {showGenreOther && <div style={{ padding: "0 16px 8px", fontSize: 11, color: "#888" }}>Add as many of your own genres as you like.</div>}

        <div style={{ padding: "4px 16px 2px" }}><label style={css.label}>⭐ Your 3 favourite artists / bands</label></div>
        <div style={{ padding: "0 16px 6px", fontSize: 11, color: "#888" }}>Tap a field to type your own — these are editable.</div>
        {[0, 1, 2].map(i =>
          <div key={i} style={{ margin: "0 16px 8px", position: "relative" }}>
            <input value={favMusicians[i] || ""} onChange={e => setFavMusicians(p => { const n = [...p]; n[i] = e.target.value; return n; })} placeholder={`Tap to add favourite ${i + 1}`} style={{ ...css.input, paddingRight: 34 }} />
            <span style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", fontSize: 13, color: "#bbb", pointerEvents: "none" }}>✎</span>
          </div>)}
        <div style={{ padding: "0 16px 8px", fontSize: 11, color: "#888" }}>Shown on your profile so others can find people with similar taste.</div>

        <div style={{ margin: "6px 16px 4px", background: `linear-gradient(135deg, ${A.fg}, #6a4a8a)`, borderRadius: 16, padding: "15px 16px", position: "relative", overflow: "hidden" }}>
          <span style={{ position: "absolute", top: 11, right: 12, fontSize: 9.5, fontWeight: 700, color: "#3A2E00", background: GOLD, padding: "3px 8px", borderRadius: 8 }}>PREMIUM</span>
          <div style={{ fontSize: 14.5, fontWeight: 700, color: "#fff", marginBottom: 4 }}>Want to get hired too?</div>
          <div style={{ fontSize: 11.5, color: "rgba(255,255,255,.85)", lineHeight: 1.5, marginBottom: 11 }}>With Premium you can also list yourself so bands and artists can find and hire you:</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {[["🎷", "Available as a sessionist", "Get booked for paid session work"], ["✍️", "Available as a ghostwriter", "Write lyrics, toplines & beats for others"]].map(([ic, t, s]) =>
              <div key={t} style={{ display: "flex", alignItems: "center", gap: 10, background: "rgba(255,255,255,.12)", borderRadius: 10, padding: "9px 11px" }}>
                <span style={{ fontSize: 18 }}>{ic}</span>
                <div style={{ flex: 1 }}><div style={{ fontSize: 12.5, fontWeight: 600, color: "#fff" }}>{t}</div><div style={{ fontSize: 10.5, color: "rgba(255,255,255,.75)" }}>{s}</div></div>
              </div>)}
          </div>
          <div style={{ fontSize: 10.5, color: "rgba(255,255,255,.7)", marginTop: 10 }}>You can set this up anytime from your profile — try Premium free for 3 days.</div>
        </div>

        <button style={css.pbtn()} onClick={() => { setNav("home"); go("home"); }}>Let's go →</button>
        <div style={{ height: 16 }} />
      </div>
    </div>,

    "vendor-setup": <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><h2 style={{ fontSize: 19, fontWeight: 700 }}>Set up your studio</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Free to list · this is the page musicians see in search</p></div>
      <div style={{ flex: 1, overflowY: "auto", padding: "14px 0 0" }}>
        <div style={{ margin: "0 16px 4px" }}><label style={css.label}>Cover photo & gallery</label></div>
        <div style={{ margin: "0 16px 12px" }}>
          <div onClick={() => go("vendor-photos")} style={{ height: 110, borderRadius: 14, background: "linear-gradient(135deg,#5B5BD6,#8A8AE0)", display: "flex", alignItems: "flex-end", justifyContent: "space-between", padding: 12, cursor: "pointer" }}>
            <span style={{ fontSize: 10, background: "rgba(0,0,0,.4)", color: "#fff", padding: "4px 9px", borderRadius: 8 }}>📷 Add photos of your studio</span>
            <span style={{ ...css.gbtn({ fontSize: 11 }) }}>Add photos</span>
          </div>
        </div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Studio name</label><input defaultValue="" placeholder="e.g. Proberaum Wien Mitte" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Tagline <span style={{ color: "#bbb", fontWeight: 400 }}>· shown under the name</span></label><input defaultValue="" placeholder="e.g. Soundproofed rehearsal & recording in central Vienna" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>About the studio</label>
          <textarea defaultValue="" placeholder="Describe your space, the vibe, what makes it great, load-in, staff…" style={{ ...css.input, resize: "none", height: 84 }} /></div>
        <div style={{ display: "flex", gap: 8, margin: "0 16px 10px" }}>
          <div style={{ flex: 1 }}><label style={css.label}>Country</label><select value={vCountry} onChange={e => { setVCountry(e.target.value); setVCity(COUNTRIES[e.target.value][0]); }} style={css.input}>{Object.keys(COUNTRIES).map(c => <option key={c}>{c}</option>)}</select></div>
          <div style={{ flex: 1 }}><label style={css.label}>City</label><select value={vCity} onChange={e => setVCity(e.target.value)} style={css.input}>{COUNTRIES[vCountry].map(c => <option key={c}>{c}</option>)}</select></div>
        </div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Address</label><input defaultValue="" placeholder="Street, number, postcode, city" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Public contact phone</label><input defaultValue="" placeholder="+43 …" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>What this studio offers <span style={{ color: "#bbb", fontWeight: 400 }}>· shown in search</span></label><select style={css.input}><option>Rehearsal & Recording</option><option>Rehearsal rooms only</option><option>Recording only</option></select><div style={{ fontSize: 11, color: "#888", marginTop: 5 }}>This is the building's overall badge. You'll set each room's own type, gear and pricing next.</div></div>
        <div style={{ margin: "0 16px 4px" }}><label style={css.label}>Studio amenities — tap to toggle</label></div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 7, padding: "0 16px 6px" }}>
          {AMEN_OPTS.map(t => { const on = vAmen.includes(t); return <button key={t} onClick={() => setVAmen(p => on ? p.filter(x => x !== t) : [...p, t])} style={css.chip(on, "#1FB8C4")}>{t}</button>; })}
          {vAmen.filter(t => !AMEN_OPTS.includes(t)).map(t => <button key={t} onClick={() => setVAmen(p => p.filter(x => x !== t))} style={css.chip(true, "#1FB8C4")}>{t} ✕</button>)}
        </div>
        <div style={{ display: "flex", gap: 8, margin: "0 16px 10px" }}>
          <input value={amenInput} onChange={e => setAmenInput(e.target.value)} placeholder="Add amenity, e.g. Kitchen" style={{ ...css.input, flex: 1 }} />
          <button onClick={() => { const v = amenInput.trim(); if (!v) return; setVAmen(p => p.includes(v) ? p : [...p, v]); setAmenInput(""); showToast(`✅ ${v} added`); }} style={{ ...css.gbtn({ fontSize: 12, padding: "0 16px" }), flexShrink: 0 }}>Add</button>
        </div>

        {/* Tax & billing */}
        <div style={{ margin: "14px 16px 4px" }}><label style={css.label}>🧾 Tax & billing <span style={{ color: CORAL, fontWeight: 700 }}>· required</span></label></div>
        <div style={{ margin: "0 16px 8px", fontSize: 11, color: "#888", lineHeight: 1.45 }}>Required to register — used to issue your invoices for Recki's subscription & commission and set the right VAT. Your own accountant handles the money you earn from bookings.</div>
        <div style={{ margin: "0 16px 10px" }}>
          <label style={css.label}>Tax status</label>
          <div style={{ display: "flex", flexDirection: "column", gap: 7, marginTop: 4 }}>
            {[["vat", "VAT-registered business", "You have a VAT number (partita IVA / UID)"], ["forfettario", "Flat-rate / small regime", "e.g. regime forfettario — usually no VAT charged"]].map(([k, title, sub]) =>
              <div key={k} onClick={() => setVTaxStatus(k)} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 12px", borderRadius: 11, border: `1px solid ${vTaxStatus === k ? D : BORDER}`, background: vTaxStatus === k ? L : "#fff", cursor: "pointer" }}>
                <div style={{ width: 18, height: 18, borderRadius: "50%", border: `2px solid ${vTaxStatus === k ? D : BORDER}`, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>{vTaxStatus === k && <div style={{ width: 9, height: 9, borderRadius: "50%", background: D }} />}</div>
                <div style={{ flex: 1 }}><div style={{ fontSize: 12.5, fontWeight: 600, color: vTaxStatus === k ? D : "#333" }}>{title}</div><div style={{ fontSize: 10.5, color: "#888" }}>{sub}</div></div>
              </div>)}
          </div>
        </div>
        {vTaxStatus === "vat" && <div style={{ margin: "0 16px 10px" }}><label style={css.label}>VAT number <span style={{ color: "#bbb", fontWeight: 400 }}>· partita IVA / UID</span></label><input value={vVatNo} onChange={e => setVVatNo(e.target.value)} placeholder="e.g. ATU12345678 or IT01234567890" style={css.input} /></div>}
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Legal / billing name</label><input value={vLegalName} onChange={e => setVLegalName(e.target.value)} placeholder="Registered business or your full legal name" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Billing address</label><input value={vBillingAddr} onChange={e => setVBillingAddr(e.target.value)} placeholder="Street, postcode, city, country" style={css.input} /></div>

        <div style={{ background: G.bg, borderRadius: 12, margin: "8px 16px 8px", padding: "10px 12px", fontSize: 11, color: G.fg, lineHeight: 1.45 }}>✓ Next you'll add your rooms — each with its own gear, services, pricing and policies.</div>
        <button style={css.pbtn()} onClick={() => { if (!vLegalName.trim() || !vBillingAddr.trim()) { showToast("Add your tax & billing details to register"); return; } if (vTaxStatus === "vat" && !vVatNo.trim()) { showToast("Add your VAT number to register"); return; } setVnav("vhome"); go("vendor-home"); showToast("✅ Studio registered"); }}>Save & add rooms →</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    home: <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}>
        <div style={{ fontSize: 19, fontWeight: 700, color: "#fff" }}>{t("home_hi")}, Marco 👋</div>
        <div style={{ fontSize: 12, opacity: .6, color: "#fff", marginTop: 3 }}>📍 {city}, {country} · Wednesday 11 June</div>
      </div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 14 }}>
        {pendingAdj && <div onClick={() => go("session-review")} style={{ background: G.bg, borderRadius: 16, margin: "0 16px 12px", padding: "13px 15px", display: "flex", alignItems: "center", gap: 12, cursor: "pointer", border: `1px solid ${G.fg}44` }}>
          <span style={{ fontSize: 22 }}>🧾</span>
          <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 700, color: G.fg }}>Your session receipt is ready</div><div style={{ fontSize: 11.5, color: G.fg }}>{pendingAdj.studio} · €{pendingAdj.finalTotal.toFixed(2)} charged across the band · tap to view</div></div>
          <span style={{ color: G.fg, fontSize: 18 }}>›</span>
        </div>}
        {emptyMode ? <EmptyState icon="🎸" title={`Welcome to Recki, Marco`} body="Find a rehearsal room or recording studio near you, book it, and pay securely in the app. Your sessions will show up right here." cta="Find a studio" onCta={() => navGo("search", "search")} />
        : <>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "2px 16px 8px" }}>
          <div style={{ fontSize: 15, fontWeight: 700, color: D }}>⏰ Next session</div>
          <span style={{ fontSize: 11, fontWeight: 600, color: A.fg, background: A.bg, padding: "3px 9px", borderRadius: 8 }}>in 3 hours</span>
        </div>
        <div style={{ background: "#fff", borderRadius: 16, border: `0.5px solid ${BORDER}`, boxShadow: "0 4px 14px rgba(26,26,46,.08)", margin: "0 16px", position: "relative", zIndex: 2 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 14px 10px" }}>
            <div style={lt("", 46)}>🎸</div>
            <div><div style={{ fontSize: 14, fontWeight: 600, color: D }}>Proberaum Wien Mitte</div><div style={{ fontSize: 11, color: "#888" }}>Landstrasse · Room A</div></div>
          </div>
          <div style={{ display: "flex", gap: 7, padding: "0 14px 10px" }}>
            {[["Time", "13:00–15:00"], ["Duration", "2 hours"], ["Paid in app", "€24.84"]].map(([l, v]) =>
              <div key={l} style={{ flex: 1, background: GREY, borderRadius: 9, padding: 8 }}><div style={{ fontSize: 9, color: "#888", marginBottom: 2 }}>{l}</div><div style={{ fontSize: 11, fontWeight: 600, color: D }}>{v}</div></div>)}
          </div>
          <div style={{ display: "flex", gap: 7, padding: "0 14px 12px" }}>
            <button onClick={() => showToast("📞 Opening phone app…")} style={{ flex: 1, padding: 10, borderRadius: 10, fontSize: 12, fontWeight: 600, cursor: "pointer", border: "none", background: D, color: "#fff", fontFamily: "inherit" }}>📞 Call studio</button>
            <button onClick={() => go("booking-detail")} style={{ flex: 1, padding: 10, borderRadius: 10, fontSize: 12, fontWeight: 600, cursor: "pointer", border: "none", background: GREY, color: D, fontFamily: "inherit" }}>Details</button>
            <button onClick={() => { setCancelCtx({ title: "Proberaum Wien Mitte", when: "Wed 11 Jun, 13:00–15:00", within24: true, amt: "€12.42", full: "€24.84" }); setCancelModal(true); }} style={{ flex: 1, padding: 10, borderRadius: 10, fontSize: 12, fontWeight: 600, cursor: "pointer", border: "none", background: R.bg, color: R.fg, fontFamily: "inherit" }}>✕ Cancel</button>
          </div>
        </div>
        <div style={{ padding: "18px 16px 8px", fontSize: 15, fontWeight: 700, color: D }}>📅 Also upcoming</div>
        <div style={{ background: "#fff", borderRadius: 16, border: `0.5px solid ${BORDER}`, boxShadow: "0 4px 14px rgba(26,26,46,.08)", margin: "0 16px" }}>
          <div onClick={() => go("booking-detail-band")} style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 14px", cursor: "pointer" }}>
            <div style={lt("", 44)}>🎸</div>
            <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>Rockhaus Ottakring</div><div style={{ fontSize: 10, color: "#888" }}>The Velvet Amps · Sat 14 Jun</div></div>
            <span style={css.pill(A)}>Band pending</span>
          </div>
        </div>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "18px 16px 6px" }}>
          <div style={{ fontSize: 15, fontWeight: 700, color: D }}>🕘 Recently visited</div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, padding: "0 16px 4px" }}>
          {[["Proberaum", "2 Jun · Rehearsal", "detail"], ["Klangwerk", "28 May · Rehearsal", "detail"], ["Rockhaus", "20 May · Rehearsal", "detail"]].map(([name, sub2, dest]) =>
            <div key={name} onClick={() => go(dest)} style={{ background: "#fff", borderRadius: 14, padding: 10, border: `0.5px solid ${BORDER}`, cursor: "pointer", minWidth: 0 }}>
              <div style={{ fontSize: 11, fontWeight: 600, color: D, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{name}</div>
              <div style={{ fontSize: 9.5, color: "#888", margin: "2px 0 7px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{sub2}</div>
              <button onClick={e => { e.stopPropagation(); setExtras([]); go("slots"); }} style={css.gbtn({ fontSize: 9.5, padding: "4px 8px" })}>↩ Rebook</button>
            </div>)}
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", margin: "18px 16px 8px" }}>
          <div style={{ fontSize: 15, fontWeight: 700, color: D }}>🎫 Gigs in {city}</div>
          <span onClick={() => go("gigs-all")} style={{ fontSize: 12, color: GIG, cursor: "pointer", fontWeight: 600 }}>See all →</span>
        </div>
        <div style={{ background: "#fff", borderRadius: 16, border: `0.5px solid ${BORDER}`, boxShadow: "0 4px 14px rgba(26,26,46,.08)", margin: "0 16px" }}>
          <div style={{ display: "flex", gap: 10, padding: 11, overflowX: "auto" }}>
            {gigs.map(g =>
              <div key={g.id} onClick={() => go(g.dest || g.id)} style={{ minWidth: 168, background: "#fff", borderRadius: 14, border: `0.5px solid ${BORDER}`, flexShrink: 0, cursor: "pointer", overflow: "hidden" }}>
                <div style={{ ...lt(g.v, 168), width: "100%", height: 84, borderRadius: 0, fontSize: 34, position: "relative" }}>
                  {g.ico}
                  <span style={{ position: "absolute", bottom: 6, right: 8, fontSize: 9, background: "rgba(0,0,0,.45)", color: "#fff", padding: "2px 7px", borderRadius: 8 }}>📷 Band photo</span>
                </div>
                <div style={{ padding: 11 }}>
                  <div style={{ fontSize: 12, fontWeight: 600, color: D, marginBottom: 3 }}>{g.name}</div>
                  <div style={{ fontSize: 10, color: "#888", lineHeight: 1.5 }}>{g.sub}</div>
                  <div style={{ fontSize: 10, color: GIG, fontWeight: 600, marginTop: 5 }}>📅 {g.date}</div>
                </div>
              </div>)}
          </div>
        </div>
        </>}
        <div style={{ height: 16 }} />
      </div>
    </div>,

    gig1: <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={{ height: 170, background: "linear-gradient(135deg,#5B5BD6,#8A8AE0)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 60, position: "relative", flexShrink: 0 }}>
        <button onClick={goBack} style={{ position: "absolute", top: 12, left: 12, background: "rgba(0,0,0,.4)", border: "none", borderRadius: "50%", width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", fontSize: 16, color: "#fff" }}>←</button>🎸
        <span style={{ position: "absolute", bottom: 10, right: 12, fontSize: 10, background: "rgba(0,0,0,.45)", color: "#fff", padding: "3px 9px", borderRadius: 10 }}>📷 Band photo</span>
      </div>
      <div style={{ flex: 1, overflowY: "auto" }}>
        <div style={{ padding: "16px 16px 0" }}>
          <div style={{ fontSize: 20, fontWeight: 800, color: D, marginBottom: 4 }}>The Velvet Amps</div>
          <div style={{ fontSize: 13, color: "#888", marginBottom: 14 }}>Indie Rock · Vienna</div>
          <div style={css.card({ margin: "0 0 12px" })}>
            {[["📅", "Saturday, 14 June 2026", "Doors 20:00 · Show starts 21:00"], ["📍", "B72 — Hernalser Gürtel 72", "1080 Vienna · U6 Alser Straße"], ["🎟", "€12 advance / €15 door", "Available at Oeticket"]].map(([ico, t, s]) =>
              <ConfirmItem key={t} icon={ico} title={t} sub={s} />)}
          </div>
          <div style={{ fontSize: 13, fontWeight: 600, color: D, marginBottom: 8 }}>About</div>
          <div style={{ fontSize: 13, color: "#555", lineHeight: 1.6, marginBottom: 14 }}>Vienna-based indie rock quartet known for atmospheric sound and energetic live shows. Formed 2021, 50+ gigs across Austria and Germany.</div>
          <div style={{ fontSize: 13, fontWeight: 600, color: D, marginBottom: 8 }}>Line-up</div>
          <div style={{ background: GREY, borderRadius: 12, padding: "12px 14px", marginBottom: 14, fontSize: 12, color: "#555", lineHeight: 2 }}>🎸 Alex K. — Guitar / Vocals<br />🎸 Sarah M. — Guitar<br />🎵 Tom R. — Bass<br />🥁 Lea B. — Drums</div>
        </div>
      </div>
      <button style={css.pbtn()} onClick={() => showToast("🎟 Opening ticket link…")}>Get tickets — €12</button>
    </div>,

    gig2: <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={{ height: 170, background: "linear-gradient(135deg,#9A6FD0,#B68FE0)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 60, position: "relative", flexShrink: 0 }}>
        <button onClick={goBack} style={{ position: "absolute", top: 12, left: 12, background: "rgba(0,0,0,.4)", border: "none", borderRadius: "50%", width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", fontSize: 16, color: "#fff" }}>←</button>🎹
        <span style={{ position: "absolute", bottom: 10, right: 12, fontSize: 10, background: "rgba(0,0,0,.45)", color: "#fff", padding: "3px 9px", borderRadius: 10 }}>📷 Band photo</span>
      </div>
      <div style={{ flex: 1, overflowY: "auto" }}>
        <div style={{ padding: "16px 16px 0" }}>
          <div style={{ fontSize: 20, fontWeight: 800, color: D, marginBottom: 4 }}>Klangraum</div>
          <div style={{ fontSize: 13, color: "#888", marginBottom: 14 }}>Electronic / Ambient · Vienna</div>
          <div style={css.card({ margin: "0 0 12px" })}>
            {[["📅", "Wednesday, 18 June 2026", "Doors 21:00 · Live set 22:00"], ["📍", "Flex — Augartenbrücke 1", "1020 Vienna · Tram D"], ["🎟", "€8 advance / €10 door", "Limited capacity"]].map(([ico, t, s]) =>
              <ConfirmItem key={t} icon={ico} title={t} sub={s} />)}
          </div>
          <div style={{ fontSize: 13, color: "#555", lineHeight: 1.6, marginBottom: 14 }}>Vienna-based electronic project blending ambient textures with driving rhythms. Expect visuals, haze, and a 90-minute immersive set.</div>
        </div>
      </div>
      <button style={css.pbtn()} onClick={() => showToast("🎟 Opening ticket link…")}>Get tickets — €8</button>
    </div>,

    gig3: <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={{ height: 170, background: "linear-gradient(135deg,#4CAF8A,#6FCBA8)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 60, position: "relative", flexShrink: 0 }}>
        <button onClick={goBack} style={{ position: "absolute", top: 12, left: 12, background: "rgba(0,0,0,.4)", border: "none", borderRadius: "50%", width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", fontSize: 16, color: "#fff" }}>←</button>🎤
        <span style={{ position: "absolute", bottom: 10, right: 12, fontSize: 10, background: "rgba(0,0,0,.45)", color: "#fff", padding: "3px 9px", borderRadius: 10 }}>📷 Band photo</span>
      </div>
      <div style={{ flex: 1, overflowY: "auto" }}>
        <div style={{ padding: "16px 16px 0" }}>
          <div style={{ fontSize: 20, fontWeight: 800, color: D, marginBottom: 4 }}>Maria & Band</div>
          <div style={{ fontSize: 13, color: "#888", marginBottom: 14 }}>Folk / Pop · Vienna</div>
          <div style={css.card({ margin: "0 0 12px" })}>
            {[["📅", "Sunday, 22 June 2026", "Doors 19:00 · Show 20:00"], ["📍", "WUK — Währinger Straße 59", "1090 Vienna · U6"], ["🎟", "€14 advance / €18 door", "All ages welcome"]].map(([ico, t, s]) =>
              <ConfirmItem key={t} icon={ico} title={t} sub={s} />)}
          </div>
          <div style={{ fontSize: 13, color: "#555", lineHeight: 1.6 }}>Maria Hofer and her 5-piece band bring warm folk-pop songs to the WUK stage. Intimate storytelling and beautiful harmonies.</div>
        </div>
      </div>
      <button style={css.pbtn()} onClick={() => showToast("🎟 Opening ticket link…")}>Get tickets — €14</button>
    </div>,

    gig4: <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={{ height: 170, background: "linear-gradient(135deg,#C0554F,#E08079)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 60, position: "relative", flexShrink: 0 }}>
        <button onClick={goBack} style={{ position: "absolute", top: 12, left: 12, background: "rgba(0,0,0,.4)", border: "none", borderRadius: "50%", width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", fontSize: 16, color: "#fff" }}>←</button>🎸
        <span style={{ position: "absolute", bottom: 10, right: 12, fontSize: 10, background: "rgba(0,0,0,.45)", color: "#fff", padding: "3px 9px", borderRadius: 10 }}>📷 Band photo</span>
      </div>
      <div style={{ flex: 1, overflowY: "auto" }}>
        <div style={{ padding: "16px 16px 0" }}>
          <div style={{ fontSize: 20, fontWeight: 800, color: D, marginBottom: 4 }}>Dead Frequencies</div>
          <div style={{ fontSize: 13, color: "#888", marginBottom: 14 }}>Post-rock · Vienna</div>
          <div style={css.card({ margin: "0 0 12px" })}>
            {[["📅", "Saturday, 29 June 2026", "Doors 21:00 · Show 21:30"], ["📍", "B72 — Hernalser Gürtel 72", "1080 Vienna · U6 Alser Straße"], ["🎟", "€13 advance / €16 door", "Available at Oeticket"]].map(([ico, t, s]) =>
              <ConfirmItem key={t} icon={ico} title={t} sub={s} />)}
          </div>
          <div style={{ fontSize: 13, color: "#555", lineHeight: 1.6 }}>Instrumental post-rock trio building slow-burning walls of sound. Expect crescendos, delay pedals and cinematic dynamics.</div>
        </div>
      </div>
      <button style={css.pbtn()} onClick={() => showToast("🎟 Opening ticket link…")}>Get tickets — €13</button>
    </div>,

    gig5: <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={{ height: 170, background: "linear-gradient(135deg,#9A6FD0,#B68FE0)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 60, position: "relative", flexShrink: 0 }}>
        <button onClick={goBack} style={{ position: "absolute", top: 12, left: 12, background: "rgba(0,0,0,.4)", border: "none", borderRadius: "50%", width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", fontSize: 16, color: "#fff" }}>←</button>🎤
        <span style={{ position: "absolute", bottom: 10, right: 12, fontSize: 10, background: "rgba(0,0,0,.45)", color: "#fff", padding: "3px 9px", borderRadius: 10 }}>📷 Band photo</span>
      </div>
      <div style={{ flex: 1, overflowY: "auto" }}>
        <div style={{ padding: "16px 16px 0" }}>
          <div style={{ fontSize: 20, fontWeight: 800, color: D, marginBottom: 4 }}>Nora Vale</div>
          <div style={{ fontSize: 13, color: "#888", marginBottom: 14 }}>Singer-songwriter · Vienna</div>
          <div style={css.card({ margin: "0 0 12px" })}>
            {[["📅", "Thursday, 26 June 2026", "Doors 20:00 · Show 20:30"], ["📍", "Chelsea — Lerchenfelder Gürtel 29", "1080 Vienna · U6 Thaliastraße"], ["🎟", "€11 advance / €14 door", "Seated show"]].map(([ico, t, s]) =>
              <ConfirmItem key={t} icon={ico} title={t} sub={s} />)}
          </div>
          <div style={{ fontSize: 13, color: "#555", lineHeight: 1.6 }}>Intimate solo set of confessional songs on guitar and piano. Warm, quiet and honest — bring a friend and a drink.</div>
        </div>
      </div>
      <button style={css.pbtn()} onClick={() => showToast("🎟 Opening ticket link…")}>Get tickets — €11</button>
    </div>,

    search: <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={{ background: `linear-gradient(135deg, ${D}, ${DEEP})`, padding: "14px 16px 14px", flexShrink: 0 }}>
        <div style={{ fontSize: 19, fontWeight: 700, color: "#fff", marginBottom: 10 }}>Find a rehearsal room</div>
        <div style={{ background: "rgba(255,255,255,.15)", borderRadius: 12, padding: "10px 14px", display: "flex", alignItems: "center", gap: 8 }}>
          <span>🔍</span>
          <input value={searchQ} onChange={e => setSearchQ(e.target.value)} placeholder="Studio name — or search gear to filter…" className="rkSearch" style={{ flex: 1, background: "transparent", border: "none", outline: "none", fontSize: 13, color: "#fff", minWidth: 0 }} />
          {searchQ && <span onClick={() => setSearchQ("")} style={{ color: "rgba(255,255,255,.7)", fontSize: 15, cursor: "pointer", flexShrink: 0 }}>✕</span>}
        </div>
        {searchQ.trim() && (() => {
          const q = searchQ.trim().toLowerCase();
          const sugg = AVAILABLE_GEAR.filter(g => g.toLowerCase().includes(q) && !filters.gear.includes(g)).slice(0, 4);
          return sugg.length > 0 ? <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 8, alignItems: "center" }}>
            <span style={{ fontSize: 10, color: "rgba(255,255,255,.7)", alignSelf: "center" }}>Add gear filter:</span>
            {sugg.map(g => <button key={g} onClick={() => { setFilters(f => ({ ...f, gear: [...f.gear, g] })); setSearchQ(""); }} style={{ fontSize: 10.5, padding: "4px 9px", borderRadius: 11, border: "none", background: "rgba(255,255,255,.25)", color: "#fff", cursor: "pointer", fontFamily: "inherit", fontWeight: 600 }}>+ {g}</button>)}
          </div> : null;
        })()}
      </div>
      <div style={{ display: "flex", gap: 7, padding: "10px 16px 10px", background: "#fff", flexShrink: 0, alignItems: "center", borderBottom: activeFilterCount > 0 ? "none" : `0.5px solid ${BORDER}` }}>
        <button style={{ ...css.fc(activeFilterCount > 0), fontWeight: 600 }} onClick={() => setFilterModal(true)}>⚙ Filters{activeFilterCount > 0 ? ` · ${activeFilterCount}` : ""}</button>
        <button style={{ ...css.fc(false), fontWeight: 600 }} onClick={() => setSortModal(true)}>↕ Sort: {sortBy === "dist" ? "Nearest" : sortBy === "price" ? "Price" : "Rating"}</button>
        {sortBy === "dist" && <span style={{ fontSize: 10, color: G.fg, whiteSpace: "nowrap" }}>using your location</span>}
      </div>
      {activeFilterCount > 0 && <div style={{ display: "flex", gap: 7, padding: "0 16px 10px", overflowX: "auto", background: "#fff", borderBottom: `0.5px solid ${BORDER}`, flexShrink: 0, alignItems: "center" }}>
        {filterCats.flatMap(c => (c.single ? (filters[c.key] ? [[c, filters[c.key]]] : []) : filters[c.key].map(k => [c, k]))).map(([c, k]) => {
          const lbl = c.opts.find(o => o[0] === k)?.[1];
          return <button key={c.key + k} style={css.fc(true)} onClick={() => toggleCat(c.key, k, c.single)}>{lbl} ✕</button>;
        })}
        {filters.gear.map(g => <button key={"g" + g} style={css.fc(true)} onClick={() => setFilters(f => ({ ...f, gear: f.gear.filter(x => x !== g) }))}>🎛 {g} ✕</button>)}
        {filters.priceMax < 100 && <button style={css.fc(true)} onClick={() => setFilters(f => ({ ...f, priceMax: 100 }))}>≤ €{filters.priceMax}/hr ✕</button>}
        {filters.ppl && <button style={css.fc(true)} onClick={() => setFilters(f => ({ ...f, ppl: null }))}>{filters.ppl === "s" ? "1–4 people" : "5+ people"} ✕</button>}
        <span onClick={() => setFilters({ inst: [], svc: [], gear: [], priceMax: 100, ppl: null })} style={{ fontSize: 11, color: M, cursor: "pointer", whiteSpace: "nowrap", fontWeight: 600 }}>Clear all</span>
      </div>}
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 8, paddingBottom: 10 }}>
        {visibleStudios.length === 0
          ? <div style={{ textAlign: "center", padding: "32px 20px", color: "#888", fontSize: 13 }}><div style={{ fontSize: 32, marginBottom: 10 }}>🔍</div>No studios match{searchQ.trim() ? ` “${searchQ.trim()}”` : ""}.<br /><span onClick={() => { setFilters({ inst: [], svc: [], gear: [], priceMax: 100, ppl: null }); setSearchQ(""); }} style={{ color: M, cursor: "pointer", fontWeight: 600 }}>Clear search & filters</span></div>
          : visibleStudios.map(s =>
            <div key={s.id} onClick={() => go(s.screen)} style={{ ...css.card(), cursor: "pointer" }}>
              <div style={{ display: "flex", gap: 11, padding: 12 }}>
                <div style={lt(s.variant)}>{s.type === "rec" ? "🎙" : "🎸"}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ display: "flex", gap: 5, marginBottom: 4, flexWrap: "wrap" }}>
                    {s.type === "rec" && <span style={css.pill({ bg: "#E1F5EE", fg: "#0F6E56" })}>Recording</span>}
                  </div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: D, marginBottom: 3 }}>{s.name}</div>
                  <div style={{ fontSize: 11, color: "#888", marginBottom: 4 }}>📍 {s.dist} km · {s.loc} · {s.cap === "small" ? "up to 4" : "5+"} people</div>
                  <div style={{ display: "flex", flexWrap: "wrap", gap: 4, marginBottom: 6 }}>{s.tags.map(t => <span key={t} style={css.tag}>{t}</span>)}</div>
                  {(() => { const m = gearMatches(s, searchQ.trim()); return m.length > 0 ? <div style={{ display: "flex", alignItems: "center", gap: 5, marginBottom: 6, background: G.bg, borderRadius: 8, padding: "5px 8px" }}><span style={{ fontSize: 11, fontWeight: 700, color: G.fg }}>✓ Has:</span><span style={{ fontSize: 11, color: G.fg }}>{m.join(", ")}</span></div> : null; })()}
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                    <div style={{ fontSize: 11, color: "#888" }}>⭐ {s.rating}</div>
                    <div style={{ fontSize: 13, fontWeight: 700, color: D }}>from €{s.price}/hr</div>
                  </div>
                </div>
              </div>
            </div>)}
        <div style={{ height: 10 }} />
      </div>
    </div>,

    detail: <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={{ height: 175, background: "linear-gradient(135deg,#5B5BD6,#8A8AE0)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 56, position: "relative", flexShrink: 0 }}>
        <button onClick={goBack} style={{ position: "absolute", top: 12, left: 12, background: "rgba(0,0,0,.4)", border: "none", borderRadius: "50%", width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", fontSize: 16, color: "#fff" }}>←</button>
        🎸
        <div style={{ position: "absolute", bottom: 10, display: "flex", gap: 4 }}>{[0, 1, 2, 3].map(i => <div key={i} style={{ width: i === 0 ? 16 : 6, height: 6, borderRadius: 3, background: i === 0 ? "#fff" : "rgba(255,255,255,.4)" }} />)}</div>
      </div>
      <div style={{ flex: 1, overflowY: "auto" }}>
        <div style={{ padding: "14px 16px 0" }}>
          <span style={css.pill({ bg: L, fg: M })}>Rehearsal room</span>
          <div style={{ fontSize: 18, fontWeight: 700, color: D, marginTop: 6 }}>Proberaum Wien Mitte</div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 4 }}>
            <div style={{ fontSize: 22, fontWeight: 700, color: D }}>€9–15 <span style={{ fontSize: 13, fontWeight: 400, color: "#888" }}>/hr</span></div>
            <div style={{ fontSize: 13, color: "#888" }}>⭐ 4.8 <span style={{ color: "#ccc" }}>(34)</span></div>
          </div>
          <div style={{ fontSize: 11, color: "#888", marginTop: 2 }}>📍 0.8 km from you · price varies by day & time · base €12/hr</div>
        </div>
        <div style={{ padding: "12px 16px 0" }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5, marginBottom: 7 }}>About this studio</div>
          <div style={{ fontSize: 12.5, color: "#555", lineHeight: 1.6 }}>Spacious, soundproofed rehearsal studio in the heart of Landstrasse. Multiple rooms with well-tuned house drum kits, full backline and a relaxed vibe — perfect for bands who want to focus on playing.</div>
        </div>
        <div style={{ padding: "12px 16px 0" }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5, marginBottom: 7 }}>🎛 Gear & technology</div>
          {gearAccordion("studio-r", studioGearOverview(REHEARSAL_ROOMS))}
          <div style={{ fontSize: 10.5, color: "#999", marginTop: 6 }}>Everything across all rooms. Search any item (e.g. “Marshall”, “Nord”) to find this studio — you'll see exactly which room has what when you pick your room.</div>
        </div>
        <div style={{ padding: "12px 16px 0" }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5, marginBottom: 7 }}>🚪 Rooms</div>
          <div style={{ ...css.card({ margin: 0 }), padding: "11px 13px", display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ fontSize: 20 }}>🎸</span>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12.5, fontWeight: 700, color: D }}>{REHEARSAL_ROOMS.length} rooms · €{Math.min(...REHEARSAL_ROOMS.map(r => r.rate))}–{Math.max(...REHEARSAL_ROOMS.map(r => r.rate))}/hr</div>
              <div style={{ fontSize: 11, color: "#888", marginTop: 1 }}>Up to {Math.max(...REHEARSAL_ROOMS.map(r => r.capN))} people · see each room's gear when you book</div>
            </div>
          </div>
        </div>
        <div style={{ padding: "12px 16px 0" }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>🕒 Opening hours</div>
            {(() => { const today = new Date().getDay(); const openNow = today !== 0 ? true : false; return <span style={{ fontSize: 10.5, fontWeight: 700, color: openNow ? G.fg : R.fg, background: openNow ? G.bg : R.bg, padding: "3px 9px", borderRadius: 8 }}>{openNow ? "Open now" : "Closed today"}</span>; })()}
          </div>
          <div style={css.card({ margin: 0 })}>
            {[["Mon", "09:00 – 23:00", 1], ["Tue", "09:00 – 23:00", 2], ["Wed", "09:00 – 23:00", 3], ["Thu", "09:00 – 23:00", 4], ["Fri", "09:00 – 24:00", 5], ["Sat", "10:00 – 24:00", 6], ["Sun", "Closed", 0]].map(([day, hrs, dow], i, arr) => {
              const isToday = new Date().getDay() === dow;
              return <div key={day} style={{ display: "flex", justifyContent: "space-between", padding: "9px 14px", borderBottom: i < arr.length - 1 ? `0.5px solid #f5f5f5` : "none", background: isToday ? L : "transparent" }}>
                <span style={{ fontSize: 12, fontWeight: isToday ? 700 : 500, color: isToday ? D : "#555" }}>{day}{isToday ? " · Today" : ""}</span>
                <span style={{ fontSize: 12, fontWeight: isToday ? 700 : 400, color: hrs === "Closed" ? "#bbb" : isToday ? D : "#555" }}>{hrs}</span>
              </div>;
            })}
          </div>
          <div style={{ fontSize: 10.5, color: "#999", marginTop: 6 }}>You can only book slots within opening hours.</div>
        </div>
        <div style={{ padding: "12px 16px 0" }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5, marginBottom: 7 }}>Bookable extras</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>{extrasList.map(e => <span key={e.k} style={{ ...css.tag, fontSize: 11, padding: "4px 10px" }}>{e.label} €{e.p}/hr</span>)}</div>
        </div>
        <div style={{ padding: "12px 16px 0" }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5, marginBottom: 7 }}>Amenities</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>{["🅿 Parking", "📶 Free WiFi", "🚻 Toilets", "❄ Air conditioning"].map(t => <span key={t} style={{ ...css.tag, fontSize: 11, padding: "4px 10px" }}>{t}</span>)}</div>
        </div>
        <div style={{ padding: "12px 16px 0" }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5, marginBottom: 7 }}>Good to know</div>
          <div style={{ fontSize: 12.5, color: "#555", lineHeight: 1.6 }}>Ring the bell marked 'Studio' on arrival. Load-in via the rear courtyard. No smoking indoors; please clean up after your session.</div>
        </div>
        <div style={{ padding: "12px 16px 0" }}>
          <div onClick={() => showToast("📞 Opening phone app…")} style={{ background: L, borderRadius: 12, padding: "12px 14px", display: "flex", alignItems: "center", gap: 10, cursor: "pointer" }}>
            <span style={{ fontSize: 22 }}>📞</span><div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>+43 1 234 5678</div><div style={{ fontSize: 11, color: "#888" }}>Questions? Call — booking & payment stay in the app</div></div>
          </div>
        </div>
        <div style={{ padding: "12px 16px" }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5, marginBottom: 6 }}>Policies</div>
          <div style={{ fontSize: 12, color: "#555", lineHeight: 1.6 }}>{policyText()}</div>
        </div>
        <div style={css.card({ margin: "0 16px 10px" })}>
          <div style={{ padding: "12px 14px" }}><div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}><span style={{ fontSize: 12, fontWeight: 600, color: D }}>Marco R.</span><span style={{ color: GOLD, fontSize: 12 }}>★★★★★</span></div><div style={{ fontSize: 12, color: "#555", lineHeight: 1.5 }}>"Great room. Drum kit well tuned. Easy booking!"</div></div>
        </div>
        <div onClick={() => showToast("🚩 Reported — Recki will review this studio")} style={{ textAlign: "center", padding: "4px 16px 16px", fontSize: 12, color: "#999", cursor: "pointer" }}>🚩 Report this studio</div>
      </div>
      <button style={css.pbtn()} onClick={() => { setExtras([]); setRoomEquip([]); setRecRequest(""); setSelRoom(null); setShowRoomPicker(false); setSelTime(""); go("slots"); }}>Choose gear, room & time →</button>
    </div>,

    "detail-rec": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={{ height: 175, background: "linear-gradient(135deg,#4CAF8A,#6FCBA8)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 56, position: "relative", flexShrink: 0 }}>
        <button onClick={goBack} style={{ position: "absolute", top: 12, left: 12, background: "rgba(0,0,0,.4)", border: "none", borderRadius: "50%", width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", fontSize: 16, color: "#fff" }}>←</button>
        🎙
      </div>
      <div style={{ flex: 1, overflowY: "auto" }}>
        <div style={{ padding: "14px 16px 0" }}>
          <span style={css.pill({ bg: "#E1F5EE", fg: "#0F6E56" })}>Recording studio</span>
          <div style={{ fontSize: 18, fontWeight: 700, color: D, marginTop: 6 }}>Studio 7 Recording</div>
          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 4 }}><div style={{ fontSize: 22, fontWeight: 700, color: D }}>€45 <span style={{ fontSize: 13, fontWeight: 400, color: "#888" }}>/hr</span></div><div style={{ fontSize: 13, color: "#888" }}>⭐ 4.9 (47)</div></div>
          <div style={{ fontSize: 11, color: "#888", marginTop: 2 }}>📍 1.6 km from you</div>
        </div>
        <div style={{ padding: "12px 16px 0" }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5, marginBottom: 7 }}>About this studio</div>
          <div style={{ fontSize: 12.5, color: "#555", lineHeight: 1.6 }}>A professional recording studio in Mariahilf with a large live room, treated vocal booth and a dedicated mix suite. House engineer available, top-tier mic locker and analog outboard — set up for everything from full-band tracking to mixing & mastering.</div>
        </div>
        <div style={{ padding: "12px 16px 0" }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5, marginBottom: 7 }}>🎛 Gear & technology — whole studio</div>
          {gearAccordion("studio-rec", studioGearOverview(REC_ROOMS))}
          <div style={{ fontSize: 10.5, color: "#999", marginTop: 6 }}>Everything across all stages. You'll see which stage has what when you book.</div>
        </div>
        <div style={{ padding: "12px 16px 0" }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5, marginBottom: 7 }}>Services & price ranges</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>{vServices.filter(sv => sv.on).map(sv =>
            <div key={sv.label} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", background: "#E1F5EE", borderRadius: 10, padding: "8px 11px" }}>
              <span style={{ fontSize: 12, color: "#0F6E56", fontWeight: 500 }}>{sv.label}</span>
              <span style={{ fontSize: 12, color: "#0F6E56", fontWeight: 700 }}>€{sv.from}–{sv.to}</span>
            </div>)}</div>
          <div style={{ fontSize: 10.5, color: "#999", marginTop: 6 }}>Final price is confirmed by the studio at the end of your session, based on what was done — you review & pay in the app.</div>
        </div>
        <div style={{ padding: "12px 16px 0" }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5, marginBottom: 7 }}>Bookable extras</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>{REC_GEAR.filter(g => g.type !== "incl").map(g => <span key={g.k} style={{ ...css.tag, fontSize: 11, padding: "4px 10px" }}>{g.label} · €{g.p}/hr</span>)}</div>
          <div style={{ fontSize: 10.5, color: "#999", marginTop: 6 }}>Standard mics & core setup are free in the rate. Specialty rentals & consumables are billed per hour and added only if you choose them.</div>
        </div>
        <div style={{ padding: "12px 16px 0" }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5, marginBottom: 7 }}>Amenities</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>{["🅿 Parking", "📶 Free WiFi", "🚻 Toilets", "❄ Air conditioning", "☕ Coffee / drinks", "🛋 Lounge"].map(t => <span key={t} style={{ ...css.tag, fontSize: 11, padding: "4px 10px" }}>{t}</span>)}</div>
        </div>
        <div style={{ padding: "12px 16px 0" }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5, marginBottom: 7 }}>Good to know</div>
          <div style={{ fontSize: 12.5, color: "#555", lineHeight: 1.6 }}>Buzz 'Studio 7' at the main entrance. Load-in via the side door — let us know if you're bringing a lot of gear. Engineer included in the rate; tell us ahead if you'd prefer to bring your own.</div>
        </div>
        <div style={{ padding: "12px 16px 0" }}>
          <div onClick={() => showToast("📞 Opening phone app…")} style={{ background: L, borderRadius: 12, padding: "12px 14px", display: "flex", alignItems: "center", gap: 10, cursor: "pointer" }}>
            <span>📞</span><div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>+43 1 567 8901</div><div style={{ fontSize: 11, color: "#888" }}>Questions? Call — payment stays in the app</div></div>
          </div>
        </div>
        <div style={{ padding: "12px 16px" }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5, marginBottom: 6 }}>Policies</div>
          <div style={{ fontSize: 12, color: "#555", lineHeight: 1.6 }}>{policyText()}</div>
        </div>
        <div style={css.card({ margin: "0 16px 10px" })}>
          <div style={{ padding: "12px 14px" }}><div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}><span style={{ fontSize: 12, fontWeight: 600, color: D }}>Sofia R.</span><span style={{ color: GOLD, fontSize: 12 }}>★★★★★</span></div><div style={{ fontSize: 12, color: "#555", lineHeight: 1.5 }}>"Incredible live room and the engineer really knew the gear. Mix came back perfect."</div></div>
        </div>
        <div onClick={() => showToast("🚩 Reported — Recki will review this studio")} style={{ textAlign: "center", padding: "4px 16px 16px", fontSize: 12, color: "#999", cursor: "pointer" }}>🚩 Report this studio</div>
      </div>
      <button style={css.pbtn()} onClick={() => { setRecSvc({}); setRecExtras([]); setRecRoomEquip([]); setRecHrs(2); setSelRecRoom(null); setShowRecRoomPicker(false); setSelTime(""); go("slots-rec"); }}>Choose services, room & time →</button>
    </div>,

    slots: <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>{t("bk_title")}</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Proberaum Wien Mitte</p></div>
      <div style={{ flex: 1, overflowY: "auto" }}>
        {/* 1 · Who's coming */}
        <div style={{ padding: "14px 16px 4px" }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: D, marginBottom: 7 }}>1 · {t("bk_who")}</div>
          <div style={{ display: "flex", gap: 8 }}>
            {[["solo", "👤 " + t("bk_solo")], ["band", "👥 " + t("bk_band")], ["friends", "🧑‍🤝‍🧑 " + t("bk_friends")]].map(([k, l]) => <div key={k} onClick={() => setBookAs(k)} style={{ padding: "9px 14px", borderRadius: 22, border: `0.5px solid ${bookAs === k ? D : BORDER}`, background: bookAs === k ? D : "#fff", color: bookAs === k ? "#fff" : "#555", fontSize: 12, fontWeight: 500, cursor: "pointer" }}>{l}</div>)}
          </div>
          {bookAs === "band" && <div style={{ marginTop: 10 }}>
            <div style={{ fontSize: 12, color: "#888", marginBottom: 7 }}>Which band? Each member authorises their own share.</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 7 }}>
              {bands.map(b => <button key={b.id} onClick={() => setActiveBand(b.id)} style={css.fc(activeBand === b.id)}>{b.name} · {b.members.length}</button>)}
            </div>
          </div>}
          {bookAs === "friends" && friendsPicker()}
        </div>

        {/* 2 · Equipment you'd like (optional, free) — drives the room recommendation */}
        <div style={{ padding: "14px 16px 4px" }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: D, marginBottom: 4 }}>2 · {t("bk_equip")} <span style={{ color: "#bbb", fontWeight: 400, fontSize: 11 }}>· {t("bk_optional")}</span></div>
          <div style={{ fontSize: 11, color: "#888", marginBottom: 9, lineHeight: 1.4 }}>Tap any gear you'd like in the room — it's free and just helps us recommend the best-fitting room. Skip if you don't mind.</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 7 }}>
            {REHEARSAL_EQUIP.map(g => { const on = roomEquip.includes(g); return <button key={g} onClick={() => { setRoomEquip(p => on ? p.filter(x => x !== g) : [...p, g]); setSelRoom(null); }} style={css.fc(on)}>{g}{on ? " ✓" : ""}</button>; })}
          </div>
        </div>

        {/* 3 · Paid add-on gear (optional) */}
        <div style={{ padding: "14px 16px 4px" }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: D, marginBottom: 4 }}>3 · {t("bk_addons")} <span style={{ color: "#bbb", fontWeight: 400, fontSize: 11 }}>· {t("bk_optional_paid")}</span></div>
          <div style={{ fontSize: 11, color: "#888", marginBottom: 9, lineHeight: 1.4 }}>Extra gear billed per hour — only charged if the room doesn't already include it for free.</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 7 }}>
            {extrasList.map(e => { const on = extras.includes(e.k); return <button key={e.k} onClick={() => { setExtras(p => on ? p.filter(x => x !== e.k) : [...p, e.k]); setSelRoom(null); setShowRoomPicker(false); }} style={css.fc(on)}>{e.label} €{e.p}/hr{on ? " ✓" : ""}</button>; })}
          </div>
        </div>

        {/* 4 · Recommended room — adjusts to your gear choices */}
        <div style={{ padding: "14px 16px 4px" }}><div style={{ fontSize: 13, fontWeight: 700, color: D, marginBottom: 6 }}>4 · {t("bk_room")} <span style={{ color: "#bbb", fontWeight: 400, fontSize: 11 }}>· {rehearsalPicked > 0 ? "matched to your gear" : "our default pick"}</span></div></div>
        <div style={{ ...css.card({ margin: "0 16px 8px" }), padding: 13, border: `1.5px solid ${D}` }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 6 }}><span style={{ fontSize: 14, fontWeight: 700, color: D }}>{currentRoom.name}</span>{currentRoom.id === suggestedRoom.id && !showRoomPicker && rehearsalPicked > 0 && <span style={css.pill(G)}>{t("bk_best")}</span>}</div>
            <div style={{ fontSize: 12.5, fontWeight: 700, color: D }}>€{currentRoom.rate}<span style={{ fontSize: 10, color: "#999", fontWeight: 400 }}>/hr</span></div>
          </div>
          <div style={{ fontSize: 10.5, color: "#888", margin: "2px 0 6px" }}>👥 Up to {currentRoom.capN} people{rehearsalPicked > 0 ? ` · ${roomCovers(currentRoom).length + roomEquipHas(currentRoom).length}/${rehearsalPicked} of your gear built in` : ""}</div>
          <div style={{ fontSize: 12, color: "#555", lineHeight: 1.5, marginBottom: 9 }}>{currentRoom.desc}</div>
          {(roomEquip.length > 0 || extras.length > 0) && <div style={{ marginBottom: 9 }}>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 5 }}>
              {roomEquip.map(g => { const has = roomGearFlat(currentRoom).includes(g); return <span key={g} style={{ fontSize: 10, padding: "3px 8px", borderRadius: 8, background: has ? G.bg : "#f0f0f0", color: has ? G.fg : "#999", fontWeight: 600 }}>{has ? "✓" : "–"} {g}</span>; })}
              {extras.map(k => { const e = extrasList.find(x => x.k === k); const has = currentRoom.has.includes(k); return <span key={k} style={{ fontSize: 10, padding: "3px 8px", borderRadius: 8, background: has ? G.bg : A.bg, color: has ? G.fg : A.fg, fontWeight: 600 }}>{has ? "✓" : "+ €"} {e ? e.label : k}</span>; })}
            </div>
            <div style={{ fontSize: 9.5, color: "#999", marginTop: 6 }}>✓ in this room (free) · + € paid add-on · – not in this room</div>
          </div>}
          <div style={{ fontSize: 9.5, fontWeight: 700, color: "#aaa", textTransform: "uppercase", letterSpacing: .4, marginBottom: 6 }}>What's in this room</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
            {Object.entries(currentRoom.gearCats || {}).map(([cat, items]) => <div key={cat} style={{ display: "flex", gap: 8 }}>
              <div style={{ fontSize: 10, fontWeight: 700, color: M, width: 84, flexShrink: 0, lineHeight: 1.4 }}>{cat}</div>
              <div style={{ flex: 1, display: "flex", flexWrap: "wrap", gap: 4 }}>{items.map(g => <span key={g} style={{ fontSize: 10, background: L, color: M, padding: "3px 8px", borderRadius: 8, fontWeight: 500 }}>{g}</span>)}</div>
            </div>)}
          </div>
          <button onClick={() => setShowRoomPicker(v => !v)} style={{ ...css.gbtn(), marginTop: 11, width: "100%" }}>{showRoomPicker ? t("bk_other_hide") : t("bk_other")}</button>
          {showRoomPicker && <div style={{ marginTop: 8, display: "flex", flexDirection: "column", gap: 7 }}>
            {rankedRooms.map(r => { const active = r.id === currentRoom.id; const insts = Object.values(r.gearCats || {}).flat(); return <div key={r.id} onClick={() => { setSelRoom(r.id); setSelTime(""); }} style={{ padding: "11px 12px", borderRadius: 11, border: `1.5px solid ${active ? D : BORDER}`, background: active ? L : "#fff", cursor: "pointer" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
                <div style={{ width: 17, height: 17, borderRadius: "50%", border: `2px solid ${active ? D : BORDER}`, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>{active && <div style={{ width: 8, height: 8, borderRadius: "50%", background: D }} />}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                    <span style={{ fontSize: 12.5, fontWeight: 700, color: D }}>{r.name} {r.id === suggestedRoom.id && rehearsalPicked > 0 && <span style={{ fontSize: 9.5, color: G.fg, fontWeight: 700 }}>· best match</span>}</span>
                    <span style={{ fontSize: 11.5, fontWeight: 700, color: D }}>€{r.rate}/hr</span>
                  </div>
                  <div style={{ fontSize: 10, color: "#888", marginTop: 1 }}>👥 up to {r.capN}{rehearsalPicked > 0 ? ` · ${roomScore(r)}/${rehearsalPicked} gear built in` : ""}</div>
                </div>
              </div>
              <div style={{ fontSize: 11, color: "#666", lineHeight: 1.45, margin: "7px 0 0" }}>{r.desc}</div>
              {rehearsalPicked > 0 && <div style={{ display: "flex", flexWrap: "wrap", gap: 4, marginTop: 7 }}>
                {roomEquip.map(g => { const has = roomGearFlat(r).includes(g); return <span key={g} style={{ fontSize: 9.5, padding: "2px 7px", borderRadius: 7, background: has ? G.bg : "#f0f0f0", color: has ? G.fg : "#aaa", fontWeight: 600 }}>{has ? "✓" : "–"} {g}</span>; })}
                {extras.map(k => { const e = extrasList.find(x => x.k === k); const has = r.has.includes(k); return <span key={k} style={{ fontSize: 9.5, padding: "2px 7px", borderRadius: 7, background: has ? G.bg : A.bg, color: has ? G.fg : A.fg, fontWeight: 600 }}>{has ? "✓" : "+ €"} {e ? e.label : k}</span>; })}
              </div>}
            </div>; })}
          </div>}
        </div>

        {/* 4 · Calendar + times for THIS room */}
        <div style={{ padding: "8px 16px 0" }}><div style={{ fontSize: 13, fontWeight: 700, color: D }}>5 · {t("bk_time")} {currentRoom.name.split(" — ")[0]}</div></div>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "8px 16px 6px" }}>
          <button onClick={() => setBkMonth(m => Math.max(0, m - 1))} style={css.gbtn({ opacity: bkMonth === 0 ? .35 : 1, fontSize: 15, padding: "6px 12px" })}>‹</button>
          <div style={{ fontSize: 14, fontWeight: 700, color: D }}>{MONTHS12[bkMonth][0]}</div>
          <button onClick={() => setBkMonth(m => Math.min(11, m + 1))} style={css.gbtn({ opacity: bkMonth === 11 ? .35 : 1, fontSize: 15, padding: "6px 12px" })}>›</button>
        </div>
        {!isPrem && <div style={{ fontSize: 10.5, color: M, textAlign: "center", padding: "0 16px 6px" }}>Free plan: book up to 10 days ahead · later dates need Premium 🔒</div>}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(7,1fr)", gap: 4, padding: "0 16px 4px" }}>
          {["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map(h => <div key={h} style={{ textAlign: "center", fontSize: 9, fontWeight: 700, color: "#aaa", padding: "2px 0" }}>{h}</div>)}
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(7,1fr)", gap: 4, padding: "0 16px 6px" }}>
          {Array.from({ length: MONTHS12[bkMonth][2] }).map((_, i) => <div key={"b" + i} />)}
          {Array.from({ length: MONTHS12[bkMonth][1] }).map((_, i) => {
            const day = i + 1, sel = bkDay === day && bkMonth === bkMonth;
            const locked = dayLocked(bkMonth, day), past = dayPast(bkMonth, day);
            const disabled = locked || past;
            return <div key={day} onClick={() => { if (locked) { showToast("🔒 Premium needed to book more than 10 days ahead"); return; } if (past) return; setBkDay(day); setSelTime(""); }}
              style={{ position: "relative", textAlign: "center", padding: "8px 0", borderRadius: 9, fontSize: 12, fontWeight: sel ? 700 : 500, cursor: disabled ? "default" : "pointer", background: sel ? D : "#fff", color: sel ? "#fff" : past ? "#ddd" : locked ? "#ccc" : D, border: `0.5px solid ${sel ? D : BORDER}`, opacity: disabled ? .55 : 1 }}>
              {day}{locked && <span style={{ position: "absolute", top: 1, right: 3, fontSize: 7 }}>🔒</span>}
            </div>;
          })}
        </div>
        {!isPrem && <div style={{ background: L, borderRadius: 12, margin: "2px 16px 8px", padding: "9px 12px", fontSize: 11.5, color: M, display: "flex", alignItems: "center", gap: 6 }}>🔒 Dates past {MONTHS12[TODAY_M][0].split(" ")[0]} 21 are locked. <span onClick={() => go("premium")} style={{ fontWeight: 600, cursor: "pointer" }}>Go Premium →</span></div>}
        <div style={{ padding: "2px 16px 6px", fontSize: 12, color: "#888" }}>{MONTHS12[bkMonth][0].split(" ")[0]} {bkDay} · <span style={{ color: G.fg, fontWeight: 600 }}>day rate €{currentRoom.rate}/hr</span></div>
        <div style={{ padding: "0 16px 4px", fontSize: 10.5, color: "#aaa" }}>📅 Same-day booking isn't available — the earliest you can book is tomorrow.</div>
        <div style={{ padding: "0 16px 4px", fontSize: 11, color: "#888" }}>Tap a start time — durations adjust to the next booking</div>
        {allSlots.filter(h => busyToday.includes(h)).length === allSlots.length
          ? <div style={{ textAlign: "center", padding: "20px 16px", color: "#888", fontSize: 13 }}><div style={{ fontSize: 28, marginBottom: 8 }}>🚫</div>{currentRoom.name.split(" — ")[0]} is fully booked this day — try another date or room.</div>
          : <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 8, padding: "8px 16px" }}>
            {allSlots.map(h => {
              const taken = busyToday.includes(h), t = fmtH(h);
              return <div key={t} onClick={() => { if (!taken) { setSelTime(t); setSelDur("1h"); } }} style={{ textAlign: "center", padding: "11px 4px", borderRadius: 11, fontSize: 12, fontWeight: 500, cursor: taken ? "default" : "pointer", border: `0.5px solid ${BORDER}`, background: taken ? GREY : selTime === t ? D : "#fff", color: taken ? "#bbb" : selTime === t ? "#fff" : "#333", textDecoration: taken ? "line-through" : "none" }}>{t}</div>;
            })}
          </div>}
        {selTime && <div style={{ padding: "12px 16px 8px" }}>
          <div style={{ fontSize: 12, color: "#888", marginBottom: 4 }}>{t("bk_duration")}</div>
          {maxDur === 0
            ? <div style={{ fontSize: 11, color: R.fg }}>That start time isn't available — pick another slot.</div>
            : <>
              <div style={{ fontSize: 10.5, color: G.fg, marginBottom: 8 }}>✓ Up to {maxDur}h available from {selTime}{maxDur < allSlots.length ? " (next booking after that)" : " — free all day"}</div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                {durOptions.map(n => { const d = `${n}h`; return <div key={d} onClick={() => setSelDur(d)} style={{ padding: "9px 16px", borderRadius: 22, border: `0.5px solid ${BORDER}`, background: selDur === d ? D : "#fff", color: selDur === d ? "#fff" : "#555", fontSize: 12, fontWeight: 500, cursor: "pointer" }}>{d}</div>; })}
              </div>
            </>}
        </div>}

        {/* 5 · Special requests */}
        <div style={{ padding: "10px 16px 4px" }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: D, marginBottom: 6 }}>6 · {t("bk_special")} <span style={{ color: "#bbb", fontWeight: 400, fontSize: 11 }}>· {t("bk_optional")}</span></div>
          <textarea value={recRequest} onChange={e => setRecRequest(e.target.value)} placeholder="Anything to discuss with the studio? e.g. extra gear, a particular room setup, arriving early to load in." rows={3} style={{ ...css.input, resize: "none", lineHeight: 1.4 }} />
          <div style={{ fontSize: 10.5, color: "#999", marginTop: 5, lineHeight: 1.4 }}>Sent to the studio with your booking. Anything that changes the price is agreed with you and settled in the app at the end — never cash.</div>
        </div>

        {/* price summary */}
        <div style={{ padding: "8px 16px 4px", display: selTime ? "block" : "none" }}>
          <div style={css.card()}>
            {[[`${currentRoom.name.split(" — ")[0]} · ${hours}h × €${currentRoom.rate}`, `€${base.toFixed(2)}`],
              ...extras.filter(k => !currentRoom.has.includes(k)).map(k => { const e = extrasList.find(x => x.k === k); return e ? [`${e.label} · ${hours}h × €${e.p}`, `+€${(e.p * hours).toFixed(2)}`] : null; }).filter(Boolean),
              ...extras.filter(k => currentRoom.has.includes(k)).map(k => { const e = extrasList.find(x => x.k === k); return e ? [`${e.label} · in room`, "free"] : null; }).filter(Boolean),
              ...(credDisc > 0 ? [["Credits −15%", `−€${credDisc.toFixed(2)}`]] : []),
              [isPrem ? "Booking fee · waived (Premium)" : "Booking fee (3.5%)", isPrem ? "€0.00" : `+€${fee.toFixed(2)}`]].map(([l, v], i) =>
              <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "10px 14px", borderBottom: `0.5px solid #f5f5f5` }}><span style={{ fontSize: 13, color: "#888" }}>{l}</span><strong style={{ fontSize: 13, color: String(l).includes("waived") || String(l).includes("−15%") || v === "free" ? G.fg : D }}>{v}</strong></div>)}
            <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 14px", borderTop: `1px solid ${BORDER}`, background: GREY }}><span style={{ fontSize: 14, fontWeight: 600, color: D }}>{t("bk_total")}</span><strong style={{ fontSize: 16, color: D }}>€{total}</strong></div>
            {bookAs === "friends" && splitFriends.length > 0 && <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 14px", borderTop: `0.5px solid #f5f5f5` }}><span style={{ fontSize: 12.5, color: M }}>Your share (split {1 + splitFriends.length} ways)</span><strong style={{ fontSize: 13, color: M }}>≈ €{(parseFloat(total) / (1 + splitFriends.length)).toFixed(2)}</strong></div>}
          </div>
          <div style={{ fontSize: 10.5, color: "#999", margin: "6px 2px 0", lineHeight: 1.4 }}>Prices include {studioVatRate()}% VAT ({studioCountry()}) — set by the studio's country.</div>
        </div>
        <div style={{ height: 6 }} />
        <button style={{ ...css.pbtn(), opacity: (selTime && maxDur !== 0) ? 1 : .5 }} onClick={() => { if (!selTime || maxDur === 0) { showToast("Pick an available time slot first"); return; } go(bookAs === "band" ? "checkout-band" : "checkout"); }}>{t("bk_continue")} · €{total} →</button>
        <div style={{ height: 10 }} />
      </div>
    </div>,

    "slots-rec": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>{t("bk_title")}</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Studio 7</p></div>
      <div style={{ flex: 1, overflowY: "auto" }}>
        {/* 1 · Who's coming */}
        <div style={{ padding: "14px 16px 4px" }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: D, marginBottom: 7 }}>1 · {t("bk_who")}</div>
          <div style={{ display: "flex", gap: 8 }}>
            {[["solo", "👤 " + t("bk_solo")], ["band", "👥 " + t("bk_band")], ["friends", "🧑‍🤝‍🧑 " + t("bk_friends")]].map(([k, l]) => <div key={k} onClick={() => setBookAs(k)} style={{ padding: "9px 14px", borderRadius: 22, border: `0.5px solid ${bookAs === k ? D : BORDER}`, background: bookAs === k ? D : "#fff", color: bookAs === k ? "#fff" : "#555", fontSize: 12, fontWeight: 500, cursor: "pointer" }}>{l}</div>)}
          </div>
          {bookAs === "band" && <div style={{ marginTop: 10 }}>
            <div style={{ fontSize: 12, color: "#888", marginBottom: 7 }}>Which band? Each member authorises their own share.</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 7 }}>
              {bands.map(b => <button key={b.id} onClick={() => setActiveBand(b.id)} style={css.fc(activeBand === b.id)}>{b.name} · {b.members.length}</button>)}
            </div>
          </div>}
          {bookAs === "friends" && friendsPicker()}
        </div>

        {/* 2 · Services */}
        <div style={{ padding: "14px 16px 4px" }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: D, marginBottom: 4 }}>2 · What do you need?</div>
          <div style={{ fontSize: 11, color: "#888", marginBottom: 9, lineHeight: 1.4 }}>Pick the services for your session — we'll suggest the room set up for it.</div>
          <label style={css.label}>Studio services</label>
          {vServices.filter(sv => sv.on).map(sv => { const on = recSvc[sv.label] !== undefined; const hrs = recSvc[sv.label] || 0; return <div key={sv.label} style={{ ...css.card({ margin: "6px 0" }), padding: "11px 13px" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <span style={{ flex: 1, fontSize: 13, fontWeight: 500, color: on ? D : "#888" }}>{sv.label} <span style={{ fontSize: 10.5, color: "#bbb" }}>· €{sv.from}/hr</span></span>
              {on && <span style={{ fontSize: 11, color: G.fg, fontWeight: 600 }}>+€{(sv.from * hrs).toFixed(2)}</span>}
              <button onClick={() => { setRecSvc(p => { const n = { ...p }; if (on) delete n[sv.label]; else n[sv.label] = recHrs; return n; }); setSelRecRoom(null); setShowRecRoomPicker(false); setSelTime(""); }} style={{ width: 44, height: 26, borderRadius: 13, border: "none", cursor: "pointer", background: on ? G.bg : "#e5e5e8", position: "relative", flexShrink: 0, padding: 0 }}>
                <div style={{ width: 20, height: 20, borderRadius: "50%", background: on ? G.fg : "#bbb", position: "absolute", top: 3, left: on ? 21 : 3, transition: "left .15s" }} />
              </button>
            </div>
            {on && <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 9 }}>
              <span style={{ flex: 1, fontSize: 11, color: "#888" }}>Hours of {sv.label.replace(/^[^\sA-Za-z]+\s*/, "")}</span>
              <button onClick={() => setRecSvc(p => ({ ...p, [sv.label]: Math.max(1, (p[sv.label] || 1) - 1) }))} style={{ width: 28, height: 28, borderRadius: 7, border: `1px solid ${BORDER}`, background: "#fff", color: D, fontSize: 15, cursor: "pointer", fontFamily: "inherit" }}>–</button>
              <span style={{ fontSize: 13, fontWeight: 700, color: D, minWidth: 26, textAlign: "center" }}>{hrs}h</span>
              <button onClick={() => setRecSvc(p => ({ ...p, [sv.label]: Math.min(12, (p[sv.label] || 0) + 1) }))} style={{ width: 28, height: 28, borderRadius: 7, border: `1px solid ${BORDER}`, background: "#fff", color: D, fontSize: 15, cursor: "pointer", fontFamily: "inherit" }}>+</button>
            </div>}
          </div>; })}
        </div>

        {/* 3 · Equipment you'd like (optional, free) */}
        <div style={{ padding: "14px 16px 4px" }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: D, marginBottom: 4 }}>3 · {t("bk_equip")} <span style={{ color: "#bbb", fontWeight: 400, fontSize: 11 }}>· {t("bk_optional")}</span></div>
          <div style={{ fontSize: 11, color: "#888", marginBottom: 9, lineHeight: 1.4 }}>Tap any gear you'd like in the room — it's free and just helps us match the best-fitting stage. Skip if you don't mind.</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 7 }}>
            {REC_EQUIP.map(g => { const on = recRoomEquip.includes(g); return <button key={g} onClick={() => { setRecRoomEquip(p => on ? p.filter(x => x !== g) : [...p, g]); setSelRecRoom(null); }} style={css.fc(on)}>{g}{on ? " ✓" : ""}</button>; })}
          </div>
        </div>

        {/* 4 · Specialty / paid gear */}
        <div style={{ padding: "14px 16px 4px" }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: D, marginBottom: 4 }}>4 · {t("bk_addons")} <span style={{ color: "#bbb", fontWeight: 400, fontSize: 11 }}>· {t("bk_optional_paid")}</span></div>
          <div style={{ background: G.bg, borderRadius: 10, padding: "9px 11px", margin: "4px 0 9px" }}>
            <div style={{ fontSize: 10.5, fontWeight: 700, color: G.fg, marginBottom: 4 }}>✓ Included in the hourly rate</div>
            <div style={{ fontSize: 10.5, color: G.fg, lineHeight: 1.5 }}>{REC_CORE.join(" · ")}</div>
          </div>
          <div style={{ fontSize: 10.5, color: "#999", marginBottom: 7 }}>Add specialty gear below — most rooms include standard mics free; rentals & consumables are charged.</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 7 }}>
            {REC_GEAR.map(g => { const on = recExtras.includes(g.k); const free = recGearFree(g.k, currentRecRoom); const price = free ? "free" : g.type === "hr" ? `€${g.p}/hr` : `€${g.p}`; return <button key={g.k} onClick={() => { setRecExtras(p => on ? p.filter(x => x !== g.k) : [...p, g.k]); setSelRecRoom(null); setShowRecRoomPicker(false); setSelTime(""); }} style={css.fc(on)}>{g.label} · {price}</button>; })}
          </div>
        </div>

        {/* 5 · Suggested room */}
        <>
            <div style={{ padding: "14px 16px 4px" }}><div style={{ fontSize: 13, fontWeight: 700, color: D, marginBottom: 6 }}>5 · {t("bk_room")} <span style={{ color: "#bbb", fontWeight: 400, fontSize: 11 }}>· {recPicked > 0 ? "matched to your choices" : "our default pick"}</span></div></div>
            <div style={{ ...css.card({ margin: "0 16px 8px" }), padding: 13, border: `1.5px solid ${D}` }}>
              <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
                <div style={{ ...css.av("#0F6E56", 44), borderRadius: 12 }}>🎙</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 6 }}><span style={{ fontSize: 13.5, fontWeight: 700, color: D }}>{currentRecRoom.name}</span>{currentRecRoom.id === suggestedRecRoom.id && !showRecRoomPicker && recPicked > 0 && <span style={css.pill(G)}>{t("bk_best")}</span>}</div>
                  <div style={{ fontSize: 11, color: "#888", marginTop: 2 }}>€{currentRecRoom.rate}/hr · up to {currentRecRoom.capN}{recPicked > 0 ? ` · ${recRoomScore(currentRecRoom)}/${recPicked} of your picks built in` : ""}</div>
                </div>
              </div>
              {(Object.keys(recSvc).length > 0 || recExtras.length > 0 || recRoomEquip.length > 0) && <>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 5, marginTop: 9 }}>
                  {Object.keys(recSvc).map(l => { const has = currentRecRoom.svc.includes(l); return <span key={l} style={{ fontSize: 10, padding: "3px 8px", borderRadius: 8, background: has ? G.bg : A.bg, color: has ? G.fg : A.fg, fontWeight: 600 }}>{has ? "✓" : "!"} {l}</span>; })}
                  {recRoomEquip.map(g => { const has = recRoomGearFlat(currentRecRoom).includes(g); return <span key={g} style={{ fontSize: 10, padding: "3px 8px", borderRadius: 8, background: has ? G.bg : "#f0f0f0", color: has ? G.fg : "#999", fontWeight: 600 }}>{has ? "✓" : "–"} {g}</span>; })}
                  {recExtras.map(k => { const g = recGearItem(k); const free = recGearFree(k, currentRecRoom); return <span key={k} style={{ fontSize: 10, padding: "3px 8px", borderRadius: 8, background: free ? G.bg : A.bg, color: free ? G.fg : A.fg, fontWeight: 600 }}>{free ? "✓" : "+"} {g ? g.label : k}</span>; })}
                </div>
                <div style={{ fontSize: 10, color: "#999", marginTop: 8, lineHeight: 1.4 }}>✓ included free · ! studio arranges it · + charged add-on · – not in this stage</div>
              </>}
              <div style={{ marginTop: 10 }}>
                <div style={{ fontSize: 10.5, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5, marginBottom: 6 }}>🎛 Gear in {currentRecRoom.name.split(" — ")[0]}</div>
                {gearAccordion("bookrec-" + currentRecRoom.id, currentRecRoom.gearCats)}
              </div>
              <button onClick={() => setShowRecRoomPicker(v => !v)} style={{ ...css.gbtn(), marginTop: 10, width: "100%" }}>{showRecRoomPicker ? t("bk_other_hide") : t("bk_other")}</button>
              {showRecRoomPicker && <div style={{ marginTop: 8, display: "flex", flexDirection: "column", gap: 7 }}>
                {rankedRecRooms.map(r => { const active = r.id === currentRecRoom.id; return <div key={r.id} onClick={() => { setSelRecRoom(r.id); setSelTime(""); }} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 11px", borderRadius: 11, border: `1px solid ${active ? D : BORDER}`, background: active ? L : "#fff", cursor: "pointer" }}>
                  <div style={{ width: 18, height: 18, borderRadius: "50%", border: `2px solid ${active ? D : BORDER}`, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>{active && <div style={{ width: 9, height: 9, borderRadius: "50%", background: D }} />}</div>
                  <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontSize: 12.5, fontWeight: 600, color: D }}>{r.name} {r.id === suggestedRecRoom.id && recPicked > 0 && <span style={{ fontSize: 9.5, color: G.fg, fontWeight: 700 }}>· best match</span>}</div><div style={{ fontSize: 10.5, color: "#888" }}>€{r.rate}/hr · up to {r.capN}{recPicked > 0 ? ` · ${recRoomScore(r)}/${recPicked} built in` : ""} · {r.desc}</div></div>
                </div>; })}
              </div>}
            </div>

            {/* 6 · Calendar + times for THIS room */}
            <div style={{ padding: "8px 16px 0" }}><div style={{ fontSize: 13, fontWeight: 700, color: D }}>6 · {t("bk_time")} {currentRecRoom.name.split(" — ")[0]}</div></div>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "8px 16px 6px" }}>
              <button onClick={() => setBkMonth(m => Math.max(0, m - 1))} style={css.gbtn({ opacity: bkMonth === 0 ? .35 : 1, fontSize: 15, padding: "6px 12px" })}>‹</button>
              <div style={{ fontSize: 14, fontWeight: 700, color: D }}>{MONTHS12[bkMonth][0]}</div>
              <button onClick={() => setBkMonth(m => Math.min(11, m + 1))} style={css.gbtn({ opacity: bkMonth === 11 ? .35 : 1, fontSize: 15, padding: "6px 12px" })}>›</button>
            </div>
            {!isPrem && <div style={{ fontSize: 10.5, color: M, textAlign: "center", padding: "0 16px 6px" }}>Free plan: book up to 10 days ahead · later dates need Premium 🔒</div>}
            <div style={{ display: "grid", gridTemplateColumns: "repeat(7,1fr)", gap: 4, padding: "0 16px 4px" }}>
              {["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map(h => <div key={h} style={{ textAlign: "center", fontSize: 9, fontWeight: 700, color: "#aaa", padding: "2px 0" }}>{h}</div>)}
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(7,1fr)", gap: 4, padding: "0 16px 6px" }}>
              {Array.from({ length: MONTHS12[bkMonth][2] }).map((_, i) => <div key={"b" + i} />)}
              {Array.from({ length: MONTHS12[bkMonth][1] }).map((_, i) => {
                const day = i + 1, sel = bkDay === day;
                const locked = dayLocked(bkMonth, day), past = dayPast(bkMonth, day);
                const disabled = locked || past;
                return <div key={day} onClick={() => { if (locked) { showToast("🔒 Premium needed to book more than 10 days ahead"); return; } if (past) return; setBkDay(day); setSelTime(""); }}
                  style={{ position: "relative", textAlign: "center", padding: "8px 0", borderRadius: 9, fontSize: 12, fontWeight: sel ? 700 : 500, cursor: disabled ? "default" : "pointer", background: sel ? D : "#fff", color: sel ? "#fff" : past ? "#ddd" : locked ? "#ccc" : D, border: `0.5px solid ${sel ? D : BORDER}`, opacity: disabled ? .55 : 1 }}>
                  {day}{locked && <span style={{ position: "absolute", top: 1, right: 3, fontSize: 7 }}>🔒</span>}
                </div>;
              })}
            </div>
            {!isPrem && <div style={{ background: L, borderRadius: 12, margin: "2px 16px 8px", padding: "9px 12px", fontSize: 11.5, color: M, display: "flex", alignItems: "center", gap: 6 }}>🔒 Dates past {MONTHS12[TODAY_M][0].split(" ")[0]} 21 are locked. <span onClick={() => go("premium")} style={{ fontWeight: 600, cursor: "pointer" }}>Go Premium →</span></div>}
            <div style={{ padding: "2px 16px 6px", fontSize: 12, color: "#888" }}>{MONTHS12[bkMonth][0].split(" ")[0]} {bkDay} · <span style={{ color: G.fg, fontWeight: 600 }}>room rate €{currentRecRoom.rate}/hr</span></div>
            <div style={{ padding: "0 16px 4px", fontSize: 11, color: "#888" }}>Tap a start time — hours adjust to the next booking</div>
            {allSlots.filter(h => recBusyToday.includes(h)).length === allSlots.length
              ? <div style={{ textAlign: "center", padding: "20px 16px", color: "#888", fontSize: 13 }}><div style={{ fontSize: 28, marginBottom: 8 }}>🚫</div>{currentRecRoom.name.split(" — ")[0]} is fully booked this day — try another date or room.</div>
              : <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 8, padding: "8px 16px" }}>
                {allSlots.map(h => {
                  const taken = recBusyToday.includes(h), t = fmtH(h);
                  return <div key={t} onClick={() => { if (!taken) { setSelTime(t); setRecHrs(1); } }} style={{ textAlign: "center", padding: "11px 4px", borderRadius: 11, fontSize: 12, fontWeight: 500, cursor: taken ? "default" : "pointer", border: `0.5px solid ${BORDER}`, background: taken ? GREY : selTime === t ? D : "#fff", color: taken ? "#bbb" : selTime === t ? "#fff" : "#333", textDecoration: taken ? "line-through" : "none" }}>{t}</div>;
                })}
              </div>}
            {selTime && <div style={{ padding: "12px 16px 8px" }}>
              <div style={{ fontSize: 12, color: "#888", marginBottom: 4 }}>Studio / room hours <span style={{ color: "#bbb" }}>· room & equipment bill on this</span></div>
              {recMaxDur === 0
                ? <div style={{ fontSize: 11, color: R.fg }}>That start time isn't available — pick another slot.</div>
                : <>
                  <div style={{ fontSize: 10.5, color: G.fg, marginBottom: 8 }}>✓ Up to {recMaxDur}h available from {selTime}{recMaxDur < allSlots.length ? " (next booking after that)" : " — free until close"}</div>
                  <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                    {Array.from({ length: recMaxDur }, (_, i) => i + 1).map(n => <div key={n} onClick={() => setRecHrs(n)} style={{ padding: "9px 16px", borderRadius: 22, border: `0.5px solid ${BORDER}`, background: recHrs === n ? D : "#fff", color: recHrs === n ? "#fff" : "#555", fontSize: 12, fontWeight: 500, cursor: "pointer" }}>{n}h</div>)}
                  </div>
                </>}
            </div>}
          </>
        <div style={{ padding: "12px 16px 6px" }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: D, marginBottom: 6 }}>7 · {t("bk_special")} <span style={{ color: "#bbb", fontWeight: 400, fontSize: 11 }}>· {t("bk_optional")}</span></div>
          <textarea value={recRequest} onChange={e => setRecRequest(e.target.value)} placeholder="Anything to discuss with the studio? e.g. extra mics, a longer mixing session, a specific engineer, gear you'd like ready." rows={3} style={{ ...css.input, resize: "none", lineHeight: 1.4 }} />
          <div style={{ fontSize: 10.5, color: "#999", marginTop: 5, lineHeight: 1.4 }}>Sent to the studio with your booking. Anything that changes the price is agreed with you and settled in the app at the end — never cash.</div>
        </div>
        <div style={{ display: selTime ? "block" : "none" }}>
        <div style={css.card()}>
          {[[`${currentRecRoom.name.split(" — ")[0]} · ${recHrs}h × €${currentRecRoom.rate}`, `€${recRoom.toFixed(2)}`],
            ...recSvcLines.map(l => [`${l.label} · ${l.hrs}h × €${l.rate}`, `+€${l.amt.toFixed(2)}`]),
            ...recExtraLines.map(l => [`${l.label} · ${l.detail}`, l.free ? "free" : `+€${l.amt.toFixed(2)}`]),
            [isPrem ? "Booking fee · waived (Premium)" : "Booking fee (3.5%)", isPrem ? "€0.00" : `+€${recFee.toFixed(2)}`]].map(([l, v], i) =>
            <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "10px 14px", borderBottom: `0.5px solid #f5f5f5` }}><span style={{ fontSize: 13, color: "#888" }}>{l}</span><strong style={{ fontSize: 13, color: String(l).includes("waived") || v === "free" ? G.fg : D }}>{v}</strong></div>)}
          <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 14px", borderTop: `1px solid ${BORDER}`, background: GREY }}><span style={{ fontSize: 14, fontWeight: 600, color: D }}>{t("bk_total")}</span><strong style={{ fontSize: 16, color: D }}>€{recTotal.toFixed(2)}</strong></div>
          {bookAs === "friends" && splitFriends.length > 0 && <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 14px", borderTop: `0.5px solid #f5f5f5` }}><span style={{ fontSize: 12.5, color: M }}>Your share (split {1 + splitFriends.length} ways)</span><strong style={{ fontSize: 13, color: M }}>≈ €{(recTotal / (1 + splitFriends.length)).toFixed(2)}</strong></div>}
        </div>
        </div>
      </div>
      <button style={{ ...css.pbtn(), opacity: (selTime && recMaxDur !== 0) ? 1 : .5 }} onClick={() => { if (!selTime || recMaxDur === 0) { showToast("Pick an available time slot first"); return; } go(bookAs === "band" ? "checkout-band" : "checkout-rec"); }}>{t("bk_continue")} · €{recTotal.toFixed(2)} →</button>
    </div>,

    checkout: <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Checkout</h2></div>
      <div style={{ flex: 1, overflowY: "auto" }}>
        <div style={css.card({ marginTop: 10 })}>
          {[["Studio", "Proberaum Wien Mitte"], ["Room", currentRoom.name.split(" — ")[0]], ["Date", "Wed, 11 Jun 2026"], ["Time", `${selTime} · ${selDur}`], [`Room · €${currentRoom.rate}/hr`, `€${base.toFixed(2)}`],
          ...extras.filter(k => !currentRoom.has.includes(k)).map(k => { const e = extrasList.find(x => x.k === k); return e ? [`${e.label} · ${hours}h × €${e.p}`, `€${(e.p * hours).toFixed(2)}`] : null; }).filter(Boolean),
          ...extras.filter(k => currentRoom.has.includes(k)).map(k => { const e = extrasList.find(x => x.k === k); return e ? [`${e.label} · in room`, "free"] : null; }).filter(Boolean),
          ["Booking fee (3.5%)", isPrem ? "€0.00 · Premium" : `€${fee.toFixed(2)}`],
          ...(credDisc > 0 ? [["🪙 Credits (−15%)", `−€${credDisc.toFixed(2)}`]] : [])].map(([l, v]) =>
            <div key={l} style={{ display: "flex", justifyContent: "space-between", padding: "10px 14px", borderBottom: `0.5px solid #f5f5f5` }}><span style={{ fontSize: 13, color: "#888" }}>{l}</span><strong style={{ fontSize: 13, color: String(v).includes("Premium") || String(l).includes("Credits") || v === "free" ? G.fg : D }}>{v}</strong></div>)}
          <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 14px", borderTop: `1px solid ${BORDER}` }}><span style={{ fontSize: 14, fontWeight: 600, color: D }}>{t("bk_total")}</span><strong style={{ fontSize: 16, color: D }}>€{total}</strong></div>
        </div>
        {!isPrem && <div style={{ margin: "6px 16px", fontSize: 11, color: M }}>💎 Premium = no fee. <span onClick={() => go("premium")} style={{ fontWeight: 600, cursor: "pointer" }}>Upgrade →</span></div>}
        <div style={{ ...css.card({ marginTop: 8 }), background: A.bg, border: `1px solid ${A.fg}33` }}>
          <div style={{ display: "flex", gap: 11, padding: "12px 14px" }}>
            <span style={{ fontSize: 19 }}>⏱</span>
            <div style={{ flex: 1, fontSize: 11.5, color: A.fg, lineHeight: 1.5 }}><strong>You're not charged now.</strong> We pre-authorise about €{total} on your card to hold the slot. After the session you have <strong>36 hours</strong> to tap “Finalise & pay” — or the final amount is charged automatically. The final total can go up or down (e.g. overtime or extra gear).</div>
          </div>
        </div>
        <div style={css.card({ marginTop: 8 })}>
          <div style={{ padding: "11px 14px 6px", fontSize: 12, fontWeight: 600, color: D }}>Payment method</div>
          <div style={{ display: "flex", alignItems: "center", gap: 11, padding: "12px 14px", borderBottom: `0.5px solid #f5f5f5` }}>
            <div style={{ width: 18, height: 18, borderRadius: "50%", border: `2px solid ${D}`, display: "flex", alignItems: "center", justifyContent: "center" }}><div style={{ width: 9, height: 9, borderRadius: "50%", background: D }} /></div>
            <span style={{ fontSize: 19 }}>💳</span><div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 500, color: D }}>Visa ending 4242</div><div style={{ fontSize: 11, color: "#888" }}>Expires 09/28</div></div>
          </div>
          <div onClick={() => showToast("📲 Apple Pay selected")} style={{ display: "flex", alignItems: "center", gap: 11, padding: "12px 14px", cursor: "pointer" }}>
            <div style={{ width: 18, height: 18, borderRadius: "50%", border: `2px solid ${BORDER}` }} />
            <span style={{ fontSize: 17 }}>📲</span><div style={{ flex: 1 }}><div style={{ fontSize: 13, color: D, fontWeight: 500 }}>Apple Pay / Google Pay</div></div>
          </div>
        </div>
        <div style={{ margin: "0 16px 8px", fontSize: 11, color: "#888", display: "flex", gap: 6 }}><span>🔒</span><span>All payments are processed securely in Recki — never pay cash at the studio.</span></div>
      </div>
      <button style={css.pbtn()} onClick={() => { go("confirm"); }}>Confirm booking · hold €{total}</button>
    </div>,

    "checkout-band": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Band checkout</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{band.name} · everyone pre-authorises their share</p></div>
      <div style={{ flex: 1, overflowY: "auto" }}>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 7, padding: "10px 16px 0" }}>
          {bands.map(b => <button key={b.id} onClick={() => setActiveBand(b.id)} style={css.fc(activeBand === b.id)}>{b.name}</button>)}
        </div>
        <div style={css.card({ marginTop: 10 })}>
          {[["Studio", "Proberaum Wien Mitte"], ["Time", `${selTime} · ${selDur}`], [`Approx. total (${band.members.length} members)`, `€${total}`]].map(([l, v]) =>
            <div key={l} style={{ display: "flex", justifyContent: "space-between", padding: "10px 14px", borderBottom: `0.5px solid #f5f5f5` }}><span style={{ fontSize: 13, color: "#888" }}>{l}</span><strong style={{ fontSize: 13, color: D }}>{v}</strong></div>)}
          <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 14px", borderTop: `1px solid ${BORDER}` }}><span style={{ fontSize: 14, fontWeight: 600, color: D }}>Your share</span><strong style={{ fontSize: 16, color: D }}>€{share}</strong></div>
        </div>
        <button onClick={() => showToast(`You'll cover the full approx. €${total}`)} style={{ ...css.sbtn(), fontWeight: 600 }}>Or cover the full amount yourself</button>
        <div style={{ background: A.bg, borderRadius: 12, margin: "8px 16px", padding: "12px 14px", fontSize: 12, color: A.fg, lineHeight: 1.5 }}>⏱ You pre-authorise <strong>your share (€{share})</strong> now — not the whole amount. Each bandmate gets a request to pre-authorise theirs, with until <strong>24 hours before the session</strong> to confirm. If someone doesn't, the booking is <strong>cancelled</strong> and confirmed shares released — so no one's ever charged for a session that didn't lock in. Nobody's actually charged until after the session.</div>
        <div style={css.card({ marginTop: 8 })}>
          {band.members.map((m, i) =>
            <div key={m.init} style={{ display: "flex", alignItems: "center", gap: 11, padding: "12px 14px", borderBottom: `0.5px solid #f5f5f5` }}>
              <div style={{ width: 32, height: 32, borderRadius: 9, background: i === 0 ? G.bg : GREY, color: i === 0 ? G.fg : "#bbb", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 12, fontWeight: 600 }}>{m.init}</div>
              <div style={{ flex: 1 }}><div style={{ fontSize: 13, color: D }}>{i === 0 ? "Marco (you)" : m.name}</div><div style={{ fontSize: 11, color: "#888" }}>€{share}{i === 0 ? " · your share" : " · to pre-authorise their share"}</div></div>
              {i === 0 ? <span style={css.pill(A)}>Your share</span> : <span style={css.pill({ bg: L, fg: M })}>Request sent</span>}
            </div>)}
        </div>
        <div style={{ background: "#FFF7E8", borderRadius: 12, margin: "0 16px 8px", padding: "11px 13px", fontSize: 11.5, color: "#8A5A0B", lineHeight: 1.5 }}>⚡ Booking less than 24 hours before the session? Everyone gets a 2-hour window from booking to pre-authorise their share — if the band doesn't confirm in time, the booking is cancelled.</div>
      </div>
      <button style={css.pbtn()} onClick={() => go("confirm-band")}>Confirm · pre-authorise my €{share}</button>
    </div>,

    "checkout-rec": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Checkout</h2></div>
      <div style={{ flex: 1, overflowY: "auto" }}>
        <div style={css.card({ marginTop: 10 })}>
          {[["Studio", "Studio 7 Recording"], ["Room", currentRecRoom.name.split(" — ")[0]], ["Date", `${MONTHS12[bkMonth][0].split(" ")[0]} ${bkDay}`], ["Time", `${selTime} · ${recHrs} hrs`], ["Room · " + recHrs + "h × €" + currentRecRoom.rate, "€" + recRoom.toFixed(2)],
            ...recSvcLines.map(l => [`${l.label} · ${l.hrs}h × €${l.rate}`, "€" + l.amt.toFixed(2)]),
            ...recExtraLines.map(l => [`${l.label} · ${l.detail}`, l.free ? "free" : "€" + l.amt.toFixed(2)]),
            ["Booking fee (3.5%)", isPrem ? "€0.00 · Premium" : "€" + recFee.toFixed(2)]].map(([l, v], i) =>
            <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "10px 14px", borderBottom: `0.5px solid #f5f5f5` }}><span style={{ fontSize: 13, color: "#888" }}>{l}</span><strong style={{ fontSize: 13, color: String(v).includes("Premium") || v === "free" ? G.fg : D }}>{v}</strong></div>)}
          <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 14px", borderTop: `1px solid ${BORDER}` }}><span style={{ fontSize: 14, fontWeight: 600, color: D }}>Approx. total</span><strong style={{ fontSize: 16, color: D }}>€{recTotal.toFixed(2)}</strong></div>
        </div>
        <div style={{ ...css.card({ marginTop: 8 }), background: A.bg, border: `1px solid ${A.fg}33` }}>
          <div style={{ display: "flex", gap: 11, padding: "12px 14px" }}>
            <span style={{ fontSize: 19 }}>⏱</span>
            <div style={{ flex: 1, fontSize: 11.5, color: A.fg, lineHeight: 1.5 }}><strong>You're not charged now.</strong> We place a hold of about €{recTotal.toFixed(2)} to confirm the slot. Recording often runs over or under — after the session the studio finalises the real hours and services used, and only then is your card settled (up or down).</div>
          </div>
        </div>
        <div style={css.card({ marginTop: 8 })}>
          <div style={{ display: "flex", alignItems: "center", gap: 11, padding: "12px 14px" }}>
            <div style={{ width: 18, height: 18, borderRadius: "50%", border: `2px solid ${D}`, display: "flex", alignItems: "center", justifyContent: "center" }}><div style={{ width: 9, height: 9, borderRadius: "50%", background: D }} /></div>
            <span>💳</span><div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 500, color: D }}>Visa ending 4242</div></div>
          </div>
        </div>
        <div style={{ margin: "0 16px 8px", fontSize: 11, color: "#888", display: "flex", gap: 6 }}><span>🔒</span><span>All payments are processed securely in Recki.</span></div>
      </div>
      <button style={css.pbtn()} onClick={() => { go("confirm-rec"); }}>Confirm booking · hold €{recTotal.toFixed(2)}</button>
    </div>,

    confirm: <div style={{ flex: 1, overflowY: "auto", background: "#fff" }}>
      <style>{`
        @keyframes rkBounce { 0% { transform: scale(0) rotate(-20deg); } 60% { transform: scale(1.15) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
        @keyframes rkPiece { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(46px) rotate(220deg); opacity: 0; } }
        @keyframes rkSlide { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
      `}</style>
      <div style={{ position: "relative", width: 70, height: 70, margin: "26px auto 14px" }}>
        {["🎉", "🎵", "✨", "🥁", "🎸", "⭐"].map((e, i) => <div key={i} style={{ position: "absolute", top: 22, left: 28, fontSize: 15, animation: `rkPiece 0.9s ease-out ${0.15 + i * 0.05}s both`, transform: `rotate(${i * 60}deg) translateX(${20 + (i % 3) * 8}px)` }}>{e}</div>)}
        <div style={{ width: 70, height: 70, borderRadius: "50%", background: G.bg, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 34, animation: "rkBounce 0.6s cubic-bezier(.2,.8,.3,1.4) both" }}>🎉</div>
      </div>
      <div style={{ textAlign: "center", padding: "0 20px 14px", animation: "rkSlide 0.5s ease-out 0.2s both" }}><div style={{ fontSize: 20, fontWeight: 700, color: D, marginBottom: 5 }}>You're booked! 🤘</div><div style={{ fontSize: 13, color: "#888" }}>Your slot is locked in — pay nothing now, settle after the session. Go make some noise!</div></div>
      <div style={{ background: G.bg, borderRadius: 12, margin: "0 16px 10px", padding: "11px 14px", display: "flex", alignItems: "center", gap: 11, animation: "rkSlide 0.5s ease-out 0.35s both" }}>
        <div style={{ fontSize: 22 }}>🎁</div>
        <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 700, color: G.fg }}>+{levelUp ? "30" : "5"} credits earned!</div><div style={{ fontSize: 11, color: G.fg }}>Every booking earns 5 credits · 250 credits = 15% off your next session.</div></div>
      </div>
      {levelUp && <div style={{ background: levelUp.color, borderRadius: 12, margin: "0 16px 10px", padding: "13px 14px", display: "flex", alignItems: "center", gap: 12, animation: "rkSlide 0.5s ease-out 0.5s both" }}>
        <div style={{ fontSize: 34, animation: "rkBounce 0.6s cubic-bezier(.2,.8,.3,1.4) both" }}>{levelUp.animal}</div>
        <div style={{ flex: 1 }}><div style={{ fontSize: 14, fontWeight: 800, color: D }}>{levelUp.promoted ? `New tier! You're a ${levelUp.name} 🎉` : `Level up! ${levelUp.name} ${levelUp.sub} ⭐`}</div><div style={{ fontSize: 11.5, color: "#666" }}>{levelUp.promoted ? `You reached a brand-new animal — bonus +25 credits added.` : `Reached ${levelUp.name} ${levelUp.sub} — bonus +25 credits added.`}</div></div>
      </div>}
      <div style={css.card({ marginBottom: 10 })}>
        <ConfirmItem icon="🏢" title="Proberaum Wien Mitte" sub={`${currentRoom.name.split(" — ")[0]} · Landstrasse`} />
        <ConfirmItem icon="📅" title="Wednesday, 11 June 2026" sub={`${selTime} · ${selDur}${extras.length ? ` · ${extras.length} extras` : ""}`} />
        <ConfirmItem icon="💳" title={`€${total} held — settled after the session`} sub="Visa ending 4242 · in-app" />
        <div onClick={() => showToast("📞 Opening phone app…")} style={{ display: "flex", alignItems: "flex-start", gap: 12, padding: "10px 14px", cursor: "pointer" }}>
          <div style={{ fontSize: 18, width: 24 }}>📞</div><div><div style={{ fontSize: 13, fontWeight: 600, color: D }}>+43 1 234 5678</div><div style={{ fontSize: 11, color: "#888" }}>Tap to call</div></div>
        </div>
        {recRequest.trim() && <ConfirmItem icon="✍️" title="Special requests sent" sub={recRequest.trim()} />}
      </div>
      <div style={{ background: L, borderRadius: 12, margin: "0 16px 10px", padding: "10px 13px", fontSize: 12, color: M, lineHeight: 1.5 }}>⏱ This €{total} is just a hold. After the session the studio finalises what was actually used — the final amount may be higher or lower — and that's when your card is settled.</div>
      <button style={css.sbtn()} onClick={() => showToast("📆 Added to calendar")}>📆 Add to calendar</button>
      <div style={{ textAlign: "center", fontSize: 11, color: "#888", padding: "8px 16px" }}>🔔 Reminder 2 hours before your session</div>
      <button style={css.pbtn()} onClick={() => navGo("bookings", "bookings")}>View bookings</button>
      <button style={css.sbtn()} onClick={() => navGo("home", "home")}>Back to home</button>
      <div style={{ height: 14 }} />
    </div>,

    "confirm-band": <div style={{ flex: 1, overflowY: "auto", background: "#fff" }}>
      <div style={{ width: 70, height: 70, borderRadius: "50%", background: A.bg, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 34, margin: "24px auto 14px" }}>⏳</div>
      <div style={{ textAlign: "center", padding: "0 20px 14px" }}><div style={{ fontSize: 19, fontWeight: 700, color: D, marginBottom: 5 }}>Your share is in!</div><div style={{ fontSize: 13, color: "#888" }}>The slot locks in once every member confirms their share.</div></div>
      <div style={css.card({ marginBottom: 10 })}>
        <ConfirmItem icon="🏢" title="Proberaum Wien Mitte" />
        <ConfirmItem icon="👥" title={band.name} sub={`${band.members.length} members · €${share} each`} />
        <ConfirmItem icon="💳" title={`€${share} pre-authorised (your share)`} sub="Held on your card · not yet charged" />
      </div>
      <div style={{ background: A.bg, borderRadius: 12, margin: "0 16px 12px", padding: "12px 14px", fontSize: 12, color: A.fg, lineHeight: 1.5 }}>⏱ Each member has until <strong>24 hours before the session</strong> to pre-authorise their own share. If everyone confirms, the booking's locked; if someone doesn't, it's <strong>cancelled</strong> and all confirmed shares are released. Nobody's actually charged until after the session.</div>
      <div style={{ background: L, borderRadius: 12, margin: "0 16px 12px", padding: "12px 14px", fontSize: 12, color: M, lineHeight: 1.5 }}>🔧 If anything changes the total afterwards (overtime, breakage, extra gear), it's split and charged automatically against each confirmed share — you'll get a receipt, which you can dispute if something's off.</div>
      <button style={css.pbtn()} onClick={() => navGo("bookings", "bookings")}>View bookings</button>
    </div>,

    "confirm-rec": <div style={{ flex: 1, overflowY: "auto", background: "#fff" }}>
      <style>{`
        @keyframes rkBounce { 0% { transform: scale(0) rotate(-20deg); } 60% { transform: scale(1.15) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
        @keyframes rkSlide { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
        @keyframes rkBurst { 0% { transform: rotate(var(--a)) translateX(0) scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: rotate(var(--a)) translateX(42px) scale(1); opacity: 0; } }
      `}</style>
      <div style={{ position: "relative", width: 88, height: 88, margin: "28px auto 14px" }}>
        {["🎙", "✨", "🎶", "💿", "⭐", "🔥"].map((e, i) => <div key={i} style={{ position: "absolute", top: 34, left: 36, fontSize: 16, animation: `rkBurst 1s ease-out ${0.1 + i * 0.05}s both`, ["--a"]: `${i * 60}deg` }}>{e}</div>)}
        <div style={{ width: 88, height: 88, borderRadius: "50%", background: G.bg, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 40, animation: "rkBounce 0.6s cubic-bezier(.2,.8,.3,1.4) both" }}>🎙</div>
      </div>
      <div style={{ textAlign: "center", padding: "0 24px 14px", animation: "rkSlide 0.5s ease-out 0.2s both" }}><div style={{ fontSize: 21, fontWeight: 800, color: D, marginBottom: 5 }}>Studio's yours. 🎙🔥</div><div style={{ fontSize: 13, color: "#888", lineHeight: 1.5 }}>The red light is on at Studio 7. Hit record and make something that outlives you. 🎧</div></div>
      <div style={{ background: G.bg, borderRadius: 12, margin: "0 16px 10px", padding: "11px 14px", display: "flex", alignItems: "center", gap: 11, animation: "rkSlide 0.5s ease-out 0.35s both" }}>
        <div style={{ fontSize: 22 }}>🎁</div>
        <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 700, color: G.fg }}>+{levelUp ? "30" : "5"} credits earned!</div><div style={{ fontSize: 11, color: G.fg }}>Every booking earns 5 credits · 250 credits = 15% off your next session.</div></div>
      </div>
      {levelUp && <div style={{ background: levelUp.color, borderRadius: 12, margin: "0 16px 10px", padding: "13px 14px", display: "flex", alignItems: "center", gap: 12, animation: "rkSlide 0.5s ease-out 0.5s both" }}>
        <div style={{ fontSize: 34, animation: "rkBounce 0.6s cubic-bezier(.2,.8,.3,1.4) both" }}>{levelUp.animal}</div>
        <div style={{ flex: 1 }}><div style={{ fontSize: 14, fontWeight: 800, color: D }}>{levelUp.promoted ? `New tier! You're a ${levelUp.name} 🎉` : `Level up! ${levelUp.name} ${levelUp.sub} ⭐`}</div><div style={{ fontSize: 11.5, color: "#666" }}>{levelUp.promoted ? `You reached a brand-new animal — bonus +25 credits added.` : `Reached ${levelUp.name} ${levelUp.sub} — bonus +25 credits added.`}</div></div>
      </div>}
      <div style={css.card({ marginBottom: 10 })}>
        <ConfirmItem icon="🎙" title="Studio 7 Recording" sub={`${currentRecRoom.name.split(" — ")[0]} · Mariahilf`} />
        <ConfirmItem icon="📅" title={`${MONTHS12[bkMonth][0].split(" ")[0]} ${bkDay}, 2026`} sub={(() => { const n = Object.keys(recSvc).length + recExtras.length; return `${selTime} · ${recHrs} hours${n ? ` · ${n} add-on${n === 1 ? "" : "s"}` : ""}`; })()} />
        <ConfirmItem icon="💳" title={`€${recTotal.toFixed(2)} held — settled after the session`} sub="Visa ending 4242 · in-app" />
        {recRequest.trim() && <ConfirmItem icon="✍️" title="Special requests sent" sub={recRequest.trim()} />}
        <div onClick={() => showToast("📞 Opening phone app…")} style={{ display: "flex", alignItems: "flex-start", gap: 12, padding: "10px 14px", cursor: "pointer" }}>
          <div style={{ fontSize: 18, width: 24 }}>📞</div><div><div style={{ fontSize: 13, fontWeight: 600, color: D }}>+43 1 234 5678</div><div style={{ fontSize: 11, color: "#888" }}>Tap to call</div></div>
        </div>
      </div>
      <div style={{ background: L, borderRadius: 12, margin: "0 16px 10px", padding: "10px 13px", fontSize: 12, color: M, lineHeight: 1.5 }}>⏱ This €{recTotal.toFixed(2)} is just a hold. After the session the studio finalises the real hours and services used — the final amount may be higher or lower — and that's when your card is settled.</div>
      <button style={css.sbtn()} onClick={() => showToast("📆 Added to calendar")}>📆 Add to calendar</button>
      <div style={{ textAlign: "center", fontSize: 11, color: "#888", padding: "8px 16px" }}>🔔 Reminder 2 hours before your session</div>
      <button style={css.pbtn()} onClick={() => navGo("bookings", "bookings")}>View bookings</button>
      <button style={css.sbtn()} onClick={() => navGo("home", "home")}>Back to home</button>
      <div style={{ height: 14 }} />
    </div>,

    rating: <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Rate your session</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Studio 7 · 2 Jun</p></div>
      <div style={{ flex: 1, overflowY: "auto" }}>
        <div style={{ textAlign: "center", padding: "20px 20px 10px" }}>
          <div style={{ fontSize: 15, fontWeight: 600, color: D, marginBottom: 5 }}>How was your session?</div>
          <div style={{ fontSize: 12, color: "#888", marginBottom: 18 }}>Star rating required · written review optional</div>
          <div style={{ display: "flex", justifyContent: "center", gap: 8, marginBottom: 8 }}>
            {[1, 2, 3, 4, 5].map(n => <span key={n} onClick={() => setStars(n)} style={{ fontSize: 40, cursor: "pointer", color: n <= stars ? GOLD : "#ddd" }}>★</span>)}
          </div>
          <div style={{ fontSize: 12, color: "#888", marginBottom: 12 }}>{stars} stars — {["", "Terrible", "Not great", "OK", "Good", "Excellent!"][stars]}</div>
          <div style={{ display: "flex", justifyContent: "center", gap: 6, flexWrap: "wrap" }}>
            {["✨ Clean", "🎸 Great gear", "🅿 Easy access", "🔇 Good sound"].map(t => <button key={t} onClick={() => showToast("Tag added")} style={css.fc(false)}>{t}</button>)}
          </div>
        </div>
        <div style={{ padding: "10px 16px 6px", fontSize: 12, color: "#888" }}>Written review (optional)</div>
        <div style={{ margin: "0 16px 8px" }}><textarea placeholder="Tell others about the equipment, space, experience…" style={{ ...css.input, resize: "none", height: 76 }} /></div>
        <button style={css.pbtn()} onClick={() => { setBookTab("past"); navGo("bookings", "bookings"); showToast("⭐ Review submitted!"); }}>Submit rating</button>
      </div>
    </div>,

    bookings: <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><h2 style={{ fontSize: 19, fontWeight: 700 }}>My bookings</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{city} · {emptyMode ? "no bookings yet" : "2 upcoming"}</p></div>
      <div style={{ display: "flex", background: "#fff", borderBottom: `0.5px solid ${BORDER}`, flexShrink: 0 }}>
        {[["up", "Upcoming"], ["past", "Past"]].map(([k, l]) =>
          <div key={k} onClick={() => setBookTab(k)} style={{ flex: 1, textAlign: "center", padding: 12, fontSize: 13, color: bookTab === k ? D : "#888", fontWeight: bookTab === k ? 600 : 400, cursor: "pointer", borderBottom: `2px solid ${bookTab === k ? D : "transparent"}` }}>{l}</div>)}
      </div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 10 }}>
        {emptyMode ? (bookTab === "up"
          ? <EmptyState icon="📅" title="No upcoming bookings" body="When you book a rehearsal room or recording studio, it'll show up here with your time, room and confirmation." cta="Find a studio" onCta={() => navGo("search", "search")} />
          : <EmptyState icon="🎵" title="No past sessions yet" body="Your completed sessions and receipts will appear here once you've played your first booking." cta="Find a studio" onCta={() => navGo("search", "search")} />)
        : bookTab === "up" ? <>
          <div onClick={() => go("booking-detail")} style={{ ...css.card(), padding: 14, cursor: "pointer" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
              <div style={lt("", 44)}>🎸</div>
              <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>Proberaum Wien Mitte</div><div style={{ fontSize: 10, color: "#888" }}>Rehearsal</div></div>
              <span style={css.pill(G)}>Confirmed</span>
            </div>
            <div style={{ display: "flex", gap: 6, marginBottom: 10 }}>{[["Date", "Wed 11 Jun"], ["Time", "13:00–15:00"], ["Held", "€24.84"]].map(([l, v]) => <div key={l} style={{ flex: 1, background: GREY, borderRadius: 8, padding: "7px 8px" }}><div style={{ fontSize: 9, color: "#888", marginBottom: 1 }}>{l}</div><div style={{ fontSize: 11, fontWeight: 600, color: D }}>{v}</div></div>)}</div>
            <div style={{ display: "flex", gap: 7 }}>
              <button onClick={e => { e.stopPropagation(); showToast("📞 Calling…"); }} style={css.gbtn()}>📞 Call studio</button>
              <button onClick={e => { e.stopPropagation(); setCancelCtx({ title: "Proberaum Wien Mitte", when: "Wed 11 Jun, 13:00–15:00", within24: true, amt: "€12.42", full: "€24.84" }); setCancelModal(true); }} style={css.dbtn}>✕ Cancel</button>
            </div>
          </div>
          <div onClick={() => go("booking-detail-band")} style={{ ...css.card(), padding: 14, cursor: "pointer" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
              <div style={lt("", 44)}>🎸</div>
              <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>Rockhaus Ottakring</div><div style={{ fontSize: 10, color: "#888" }}>Rehearsal</div></div>
              <span style={css.pill(A)}>Band pending</span>
            </div>
            <div style={{ background: A.bg, borderRadius: 10, padding: "10px 12px", marginBottom: 10, display: "flex", gap: 8 }}><span>⏱</span><div style={{ fontSize: 11, color: A.fg }}>2 of 4 authorised · slot held <strong>19h 32m</strong></div></div>
            <div style={{ display: "flex", gap: 8, marginBottom: 12 }}><MemberDot initials="MR" name="You ✓" paid /><MemberDot initials="LK" name="Lukas ✓" paid /><MemberDot initials="JB" name="Julia" /><MemberDot initials="PT" name="Peter" /></div>
            <div style={{ display: "flex", gap: 7 }}>
              <button onClick={e => { e.stopPropagation(); showToast("📞 Calling…"); }} style={css.gbtn()}>📞 Call studio</button>
              <button onClick={e => { e.stopPropagation(); showToast("📨 Reminder sent!"); }} style={css.gbtn()}>📨 Remind</button>
              <button onClick={e => { e.stopPropagation(); setCancelCtx({ title: "Rockhaus Ottakring", when: "Sat 14 Jun, 18:00–20:00", within24: false, amt: "€0.00", full: "€31.05" }); setCancelModal(true); }} style={css.dbtn}>✕ Cancel</button>
            </div>
          </div>
        </> : <>
          <div style={{ ...css.card(), padding: 14 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
              <div style={lt("g", 44)}>🎸</div>
              <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>Proberaum Wien Mitte</div><div style={{ fontSize: 10, color: "#888" }}>Rehearsal · with {band.name}</div></div>
              <span style={css.pill({ bg: L, fg: M })}>Completed</span>
            </div>
            <div style={{ display: "flex", gap: 6, marginBottom: 9 }}>{[["Date", "Today"], ["Time", "15:00–17:00"], ["Your share", "€9.50"]].map(([l, v]) => <div key={l} style={{ flex: 1, background: GREY, borderRadius: 8, padding: "7px 8px" }}><div style={{ fontSize: 9, color: "#888", marginBottom: 1 }}>{l}</div><div style={{ fontSize: 11, fontWeight: 600, color: D }}>{v}</div></div>)}</div>
            <div style={{ fontSize: 10.5, color: "#888", lineHeight: 1.4, marginBottom: 10 }}>🧾 €28.50 split across the band and charged automatically to each confirmed share. Your receipt's ready.</div>
            <div style={{ display: "flex", gap: 7 }}>
              <button onClick={() => go("session-review")} style={css.gbtn()}>🧾 Receipt</button>
              <button onClick={() => { setExtras([]); go("slots"); }} style={css.gbtn()}>↩ Rebook</button>
              <button onClick={() => go("rating")} style={css.gbtn()}>⭐ Rate</button>
            </div>
          </div>
          {[{ ico: "🎸", name: "Proberaum Wien Mitte", type: "Rehearsal", variant: "g", date: "Mon 2 Jun", time: "18:00–21:00", paid: "€38.70", dest: "rating" }, { ico: "🎸", name: "Klangwerk Favoriten", type: "Rehearsal", variant: "n", date: "Tue 28 May", time: "15:00–17:00", paid: "€20.70", dest: null }, { ico: "🎸", name: "Rockhaus Ottakring", type: "Rehearsal", variant: "r", date: "Fri 23 May", time: "18:00–20:00", paid: "€31.05 refund", dest: null, cancelled: true }].map(b =>
            <div key={b.name + b.date} onClick={() => b.dest && go(b.dest)} style={{ ...css.card(), padding: 14, cursor: b.dest ? "pointer" : "default" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
                <div style={lt(b.variant, 44)}>{b.ico}</div>
                <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>{b.name}</div><div style={{ fontSize: 10, color: "#888" }}>{b.type}</div></div>
                <span style={css.pill(b.cancelled ? R : { bg: L, fg: M })}>{b.cancelled ? "Cancelled" : "Completed"}</span>
              </div>
              <div style={{ display: "flex", gap: 6, marginBottom: b.cancelled ? 0 : 10 }}>{[["Date", b.date], ["Time", b.time], [b.cancelled ? "Refund" : "Paid", b.paid]].map(([l, v]) => <div key={l} style={{ flex: 1, background: GREY, borderRadius: 8, padding: "7px 8px" }}><div style={{ fontSize: 9, color: "#888", marginBottom: 1 }}>{l}</div><div style={{ fontSize: 11, fontWeight: 600, color: D }}>{v}</div></div>)}</div>
              {!b.cancelled ? <div style={{ display: "flex", gap: 7 }}>
                <button onClick={e => { e.stopPropagation(); setExtras([]); go("slots"); }} style={css.gbtn()}>↩ Rebook</button>
                {b.dest ? <button onClick={e => { e.stopPropagation(); go("rating"); }} style={css.gbtn()}>⭐ Rate</button> : <button style={css.gbtn({ opacity: .5 })}>⭐ Rated ✓</button>}
              </div> : <div style={{ display: "flex", gap: 7, marginTop: 10 }}>
                <button onClick={e => { e.stopPropagation(); setExtras([]); go("slots"); }} style={css.gbtn()}>↩ Rebook</button>
              </div>}
            </div>)}
        </>}
        <div style={{ height: 10 }} />
      </div>
    </div>,

    "session-review": (() => {
      const sr = { studio: "Proberaum Wien Mitte", date: "Mon 9 Jun", room: "Room A", time: "13:00–15:00", bookedHours: 2, finalHours: 2, daysLeft: 5,
        studioNote: "Thanks for coming in! You used the pro cymbal set this session — added it below. Everything else was as booked.",
        lines: [ { label: "Room · 2 hours", amt: 24.00, was: 24.00 }, { label: "🥁 Pro cymbal set", amt: 2.00, was: 0 }, { label: "Booking fee (3.5%)", amt: 0.91, was: 0.84 } ],
        bookedTotal: 24.84, finalTotal: 26.91 };
      return <div style={{ flex: 1, background: GREY, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Receipt</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{sr.studio} · {sr.date}</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={{ background: G.bg, borderRadius: 12, margin: "0 16px 12px", padding: "11px 13px", display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{ fontSize: 18 }}>✅</span>
          <div style={{ fontSize: 11.5, color: G.fg, lineHeight: 1.5 }}><strong>Paid — €{sr.finalTotal.toFixed(2)} split across the band.</strong> Each member's share was charged automatically to their pre-authorised card. No action needed — this is your receipt.</div>
        </div>

        <div style={css.card()}>
          <ConfirmItem icon="🏢" title={sr.studio} sub={`${sr.room} · ${sr.time}`} />
          <ConfirmItem icon="⏱" title={`${sr.bookedHours}h booked → ${sr.finalHours}h used`} sub={sr.finalHours > sr.bookedHours ? `Ran ${sr.finalHours - sr.bookedHours}h over` : "As booked"} />
        </div>

        {sr.studioNote && <div style={{ ...css.card(), padding: "12px 14px", display: "flex", gap: 10 }}><span style={{ fontSize: 16 }}>💬</span><div><div style={{ fontSize: 11, fontWeight: 700, color: "#888", marginBottom: 2 }}>Note from the studio</div><div style={{ fontSize: 12.5, color: D, lineHeight: 1.5 }}>{sr.studioNote}</div></div></div>}

        <div style={{ margin: "2px 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>What you were charged</div>
        <div style={css.card()}>
          {sr.lines.map((l, i) => {
            const changed = l.was !== undefined && l.amt !== l.was;
            const isNew = l.was === 0;
            return <div key={i} style={{ padding: "11px 14px", borderBottom: i < sr.lines.length - 1 ? `0.5px solid #f5f5f5` : "none", background: changed ? "#FFFBF2" : "#fff" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span style={{ fontSize: 13, color: D, display: "flex", alignItems: "center", gap: 6 }}>{l.label}{isNew && <span style={css.pill(A)}>added</span>}{changed && !isNew && <span style={css.pill(A)}>changed</span>}</span>
                <strong style={{ fontSize: 13, color: D }}>€{l.amt.toFixed(2)}</strong>
              </div>
              {changed && <div style={{ fontSize: 10.5, color: "#999", marginTop: 2 }}>{isNew ? "Not in your original booking" : `Was €${l.was.toFixed(2)}`}{l.note ? ` · ${l.note}` : ""}</div>}
            </div>;
          })}
          <div style={{ display: "flex", justifyContent: "space-between", padding: "11px 14px", borderTop: `1px solid ${BORDER}` }}><span style={{ fontSize: 12.5, color: "#888" }}>Originally authorised</span><span style={{ fontSize: 12.5, color: "#888", textDecoration: "line-through" }}>€{sr.bookedTotal.toFixed(2)}</span></div>
          <div style={{ display: "flex", justifyContent: "space-between", padding: "11px 14px", background: GREY }}><span style={{ fontSize: 14, fontWeight: 700, color: D }}>Total charged</span><strong style={{ fontSize: 17, color: D }}>€{sr.finalTotal.toFixed(2)}</strong></div>
          <div style={{ display: "flex", justifyContent: "space-between", padding: "9px 14px", borderTop: `0.5px solid #f5f5f5` }}><span style={{ fontSize: 12, color: M }}>Your share</span><span style={{ fontSize: 12, color: M, fontWeight: 600 }}>≈ €{(sr.finalTotal / 3).toFixed(2)}</span></div>
        </div>
        <div style={{ margin: "0 16px 12px", fontSize: 11, color: "#999" }}>Charged in-app to each member's pre-authorised card.</div>

        <button style={css.pbtn()} onClick={() => navGo("bookings", "bookings")}>Done</button>

        <div style={{ textAlign: "center", fontSize: 11, color: "#999", padding: "8px 24px 4px", lineHeight: 1.5 }}>Charges look wrong? You can dispute within 48 hours and Recki will review.</div>
        <button style={css.sbtn({ color: R.fg, borderColor: R.bg })} onClick={() => { go("dispute-options"); showToast("Opening a dispute — Recki will review"); }}>Dispute these charges</button>
        <div style={{ height: 14 }} />
      </div>
    </div>;
    })(),

    "dispute-options": <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Your dispute</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Proberaum Wien Mitte · session of Mon 9 Jun</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={css.card()}>
          <ConfirmItem icon="🧾" title="What you're disputing" sub="€2.00 cymbal add-on you say wasn't used" />
          <ConfirmItem icon="💳" title="On hold" sub="€26.91 · nothing is captured while under review" />
          <ConfirmItem icon="⏱" title="Status" sub="Under review by Recki · decision within 48h" />
        </div>
        <div style={{ margin: "0 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>How disputes are settled</div>
        <div style={css.card()}>
          <div style={{ padding: "11px 14px", borderBottom: `0.5px solid #f5f5f5`, display: "flex", gap: 10 }}><span style={{ fontSize: 16 }}>1️⃣</span><div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>Recki reviews</div><div style={{ fontSize: 11.5, color: "#888", lineHeight: 1.5 }}>We look at the booking, the studio's charges and any evidence, then set the final amount. The rest is refunded to your card.</div></div></div>
          <div style={{ padding: "11px 14px", borderBottom: `0.5px solid #f5f5f5`, display: "flex", gap: 10 }}><span style={{ fontSize: 16 }}>2️⃣</span><div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>Ask for a second look</div><div style={{ fontSize: 11.5, color: "#888", lineHeight: 1.5 }}>If you disagree with our decision, a senior reviewer takes a fresh look — once per dispute.</div></div></div>
          <div style={{ padding: "11px 14px", display: "flex", gap: 10 }}><span style={{ fontSize: 16 }}>3️⃣</span><div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>Independent options</div><div style={{ fontSize: 11.5, color: "#888", lineHeight: 1.5 }}>You always keep your legal rights — see the options below.</div></div></div>
        </div>
        <button style={css.sbtn()} onClick={() => showToast("💬 Message sent to Recki support")}>💬 Add a message or photo</button>
        <button style={css.sbtn()} onClick={() => go("dispute-external")}>Still disagree after our decision? See your options →</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "dispute-external": <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Independent options</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>If Recki's decision doesn't resolve it</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={{ background: L, borderRadius: 12, margin: "0 16px 10px", padding: "11px 13px", fontSize: 12, color: M, lineHeight: 1.5 }}>Recki's decision is final on the platform, but you keep these independent routes — free of charge for consumers.</div>
        <div style={css.card()}>
          <ConfirmItem icon="⚖️" title="National consumer dispute body (ADR)" sub="Italy, Austria & Spain each have official out-of-court bodies for consumer disputes. We'll point you to the right one." onClick={() => showToast("🔗 Opening the list of national dispute bodies")} />
          <ConfirmItem icon="🏦" title="Your bank (chargeback)" sub="You can ask your card provider to review the charge." onClick={() => showToast("ℹ️ Contact your bank to start a chargeback")} />
          <ConfirmItem icon="🏛" title="Small-claims court" sub="The final backstop for unresolved money disputes." onClick={() => showToast("ℹ️ Information about local small-claims procedures")} />
        </div>
        <div style={{ margin: "10px 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Contesting an account suspension?</div>
        <div style={css.card()}>
          <ConfirmItem icon="🛡" title="Out-of-court settlement body (DSA)" sub="If your account was suspended, you can contest it via a certified body under the EU Digital Services Act." onClick={() => showToast("🔗 Opening info on certified DSA settlement bodies")} />
        </div>
        <div style={{ margin: "8px 16px 14px", fontSize: 11, color: "#999", lineHeight: 1.5 }}>Recki cooperates with these bodies and shares the records of your case where required by law.</div>
      </div>
    </div>,

    "booking-detail": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Booking detail</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Manage your session</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={css.card()}>
          <ConfirmItem icon="🏢" title="Proberaum Wien Mitte" sub="Rehearsal · Landstrasse" onClick={() => go("detail")} />
          <ConfirmItem icon="📅" title="Wednesday, 11 June 2026" sub="13:00–15:00 · 2 hours" />
          <ConfirmItem icon="📍" title="Marxergasse 4, 1030 Wien" sub="Tap for directions" onClick={() => showToast("🗺 Opening in maps…")} />
          <ConfirmItem icon="💳" title="€24.84 paid in app" sub="Visa ···· 4242 · Room €24.00 + 3.5% fee €0.84" onClick={() => showToast("🧾 Room €24.00 + booking fee €0.84 = €24.84")} />
          <ConfirmItem icon="📋" title="100% refund before 11 Jun 11:00" sub="50% charge within 24h of start" />
        </div>
        <div style={{ margin: "0 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Manage</div>
        <div style={{ display: "flex", gap: 8, padding: "0 16px 4px" }}>
          <button style={{ ...css.gbtn(), flex: 1 }} onClick={() => showToast("📞 Calling…")}>📞 Call studio</button>
          <button style={{ ...css.gbtn(), flex: 1 }} onClick={() => showToast("📆 Added to calendar")}>📆 Calendar</button>
        </div>
        <button style={css.sbtn()} onClick={() => showToast("🔁 Reschedule request sent — the studio will confirm a new time")}>🔁 Request reschedule</button>
        <button style={css.sbtn({ color: A.fg, borderColor: A.bg })} onClick={() => { setReportReason(""); setReportDetails(""); go("report-bug"); }}>🚩 Report an issue with this session</button>
        <button style={css.sbtn({ color: R.fg, borderColor: R.bg })} onClick={() => { setCancelCtx({ title: "Proberaum Wien Mitte", when: "Wed 11 Jun, 13:00–15:00", within24: true, amt: "€12.42", full: "€24.84" }); setCancelModal(true); }}>Cancel booking</button>
        <div style={{ textAlign: "center", fontSize: 10.5, color: "#999", padding: "6px 16px 0", lineHeight: 1.5 }}>Everything's handled in-app — payments, changes and any dispute stay on Recki for your protection.</div>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "booking-detail-band": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Band booking</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Authorisations pending</p></div>
      <div style={{ flex: 1, overflowY: "auto" }}>
        <div style={css.card({ marginTop: 12 })}>
          <ConfirmItem icon="🏢" title="Rockhaus Ottakring" />
          <ConfirmItem icon="📅" title="Saturday, 14 June 2026" sub="18:00–20:00 · 2 hours" />
          <ConfirmItem icon="💳" title="≈ €31.05 total · €7.77 per member" sub="Held now · settled after the session" />
        </div>
        <div style={css.card({ marginTop: 0 })}>
          <div style={{ padding: "11px 14px 6px", fontSize: 12, fontWeight: 600, color: D }}>Card authorisations</div>
          <div style={{ background: A.bg, borderRadius: 10, margin: "0 14px 10px", padding: "10px 12px", display: "flex", gap: 8 }}><span>⏱</span><div style={{ fontSize: 11, color: A.fg }}>Slot held <strong>19h 32m</strong>. Each member authorises their card — nobody's charged until the studio finalises the total after the session.</div></div>
          <div style={{ display: "flex", gap: 8, padding: "0 14px 12px" }}><MemberDot initials="MR" name="You ✓" paid /><MemberDot initials="LK" name="Lukas ✓" paid /><MemberDot initials="JB" name="Julia" /><MemberDot initials="PT" name="Peter" /></div>
        </div>
        <button style={css.pbtn()} onClick={() => showToast("📨 Reminder sent to Julia and Peter!")}>📨 Remind to authorise</button>
        <button style={css.sbtn({ color: R.fg, borderColor: R.bg })} onClick={() => { setCancelCtx({ title: "Rockhaus Ottakring", when: "Sat 14 Jun, 18:00–20:00", within24: false, amt: "€0.00", full: "€31.05" }); setCancelModal(true); }}>Cancel reservation</button>
      </div>
    </div>,

    profile: <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={{ background: `linear-gradient(135deg, ${D}, ${DEEP})`, padding: "22px 16px 28px", display: "flex", flexDirection: "column", alignItems: "center", flexShrink: 0 }}>
        <div style={{ ...css.av(), marginBottom: 10, fontSize: (useAnimal || hasPhoto) ? 34 : 26, background: useAnimal ? lvl.color : hasPhoto ? undefined : "#fff", color: useAnimal ? "#000" : hasPhoto ? undefined : D, border: "2px solid rgba(255,255,255,.5)", fontWeight: 800 }}>{useAnimal ? lvl.animal : hasPhoto ? "🧑‍🎤" : "MR"}</div>
        <div style={{ fontSize: 17, fontWeight: 600, color: "#fff" }}>{useNick && nickname.trim() ? nickname.trim() : "Marco Rossi"}</div>
        {useNick && nickname.trim() && <div style={{ fontSize: 11, color: "rgba(255,255,255,.6)", marginTop: 2 }}>{hideRealName ? "🔒 Real name hidden from others" : "Marco Rossi"}</div>}
        <div style={{ fontSize: 12, color: "rgba(255,255,255,.7)", marginTop: 3 }}>{lvl.animal} {lvl.name} {subRoman}{isPrem ? " · Premium 💎" : ""}</div>
      </div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 14 }}>
        {!isPrem ? <div onClick={() => go("premium")} style={{ background: "#fff", borderRadius: 16, margin: "0 16px 12px", padding: 14, border: `0.5px solid ${BORDER}`, boxShadow: "0 4px 14px rgba(26,26,46,.08)", display: "flex", alignItems: "center", gap: 12, cursor: "pointer", position: "relative", zIndex: 2 }}>
          <div style={{ width: 40, height: 40, borderRadius: 10, background: D, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 20 }}>💎</div>
          <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>Upgrade to Premium</div><div style={{ fontSize: 11, color: "#888" }}>No fees · Network & messaging · Book past 10 days</div></div>
          <div style={{ fontSize: 12, fontWeight: 700, background: D, color: "#fff", padding: "7px 13px", borderRadius: 20 }}>Free trial</div>
        </div> : <div style={{ background: `linear-gradient(135deg, ${D}, ${DEEP})`, borderRadius: 16, margin: "0 16px 12px", padding: 14, display: "flex", alignItems: "center", gap: 12, position: "relative", zIndex: 2 }}>
          <div style={{ width: 40, height: 40, borderRadius: 10, background: "rgba(255,255,255,.1)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 20 }}>💎</div>
          <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: "#fff" }}>Premium member</div><div style={{ fontSize: 11, color: "rgba(255,255,255,.55)" }}>You saved €23 in fees so far 🎉</div></div>
          <span style={{ fontSize: 11, color: GOLD, fontWeight: 600 }}>Active</span>
        </div>}
        <div onClick={() => go("credits")} style={{ ...css.card({ margin: "0 16px 10px" }), padding: 14, cursor: "pointer" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 8 }}>
            <div style={{ width: 36, height: 36, borderRadius: 10, background: "#FDF3DC", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 18 }}>🪙</div>
            <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>{credits} credits</div><div style={{ fontSize: 11, color: "#888" }}>{credits >= 250 ? "15% off your next booking is active!" : `${250 - credits} more for 15% off a booking`}</div></div>
            <span style={{ color: "#ccc" }}>›</span>
          </div>
          <div style={{ height: 6, background: GREY, borderRadius: 3 }}><div style={{ width: `${Math.min(100, (credits / 250) * 100)}%`, height: 6, background: GOLD, borderRadius: 3 }} /></div>
        </div>
        <div onClick={() => go("levels")} style={{ ...css.card({ margin: "0 16px 10px" }), padding: 14, cursor: "pointer" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 8 }}>
            <div style={{ width: 40, height: 40, borderRadius: 12, background: lvl.color, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22 }}>{lvl.animal}</div>
            <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>{lvl.name} <span style={{ color: GOLD }}>{subRoman}</span></div><div style={{ fontSize: 11, color: "#888" }}>{isMaxLvl ? `🐉 Legend · +${PRESTIGE_BONUS} every ${PRESTIGE_EVERY} sessions` : atSubMax ? `${toNextSub} more session${toNextSub === 1 ? "" : "s"} to become a ${LEVELS[lvlIdx + 1].name} ${LEVELS[lvlIdx + 1].animal}` : `${toNextSub} more session${toNextSub === 1 ? "" : "s"} to ${lvl.name} ${ROMAN[subIdx + 1]}`}</div></div>
            <span style={{ color: "#ccc" }}>›</span>
          </div>
          <div style={{ display: "flex", gap: 4, marginBottom: 5 }}>
            {ROMAN.map((r, i) => <div key={r} style={{ flex: 1, height: 6, borderRadius: 3, background: GREY, position: "relative", overflow: "hidden" }}>{i === subIdx && !isMaxLvl && <div style={{ width: `${(intoSub / PER_SUB) * 100}%`, height: 6, background: D, borderRadius: 3 }} />}{i < subIdx && <div style={{ position: "absolute", inset: 0, background: D, borderRadius: 3 }} />}</div>)}
          </div>
          <div style={{ fontSize: 10, color: "#aaa", marginTop: 3 }}>{sessions} sessions · {lvl.name} {subRoman} · every {PER_SUB} sessions = next sub-level</div>
        </div>
        <div style={css.card({ margin: "0 16px 10px" })}>
          <div style={{ padding: "10px 14px 4px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Account</div>
          <ProfileRow icon="👤" title="Edit my profile" sub="Name, location, category & instruments" right={<span style={{ color: "#ccc" }}>›</span>} onClick={() => go("profilesetup")} />
        </div>
        <div style={css.card({ margin: "0 16px 10px" })}>
          <div style={{ padding: "10px 14px 4px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Band & Social</div>
          <ProfileRow icon="🎸" title="Hire & get hired" sub={isPrem ? "Bandmates, session players & writers" : "Find a band, get session work · Premium 🔒"} right={<span style={{ color: "#ccc" }}>›</span>} onClick={() => { setHubCat("bands"); go("hire-hub"); }} iconBg={A.bg} />
          <ProfileRow icon="👥" title="My bands" sub={`${bands.length} bands`} right={<span style={{ color: "#ccc" }}>›</span>} onClick={() => go("my-bands")} iconBg={A.bg} />
          <ProfileRow icon="🤝" title="My network" sub={`${friends.length} friends`} right={friendReqIn.length > 0 ? <span style={{ background: D, color: "#fff", fontSize: 11, fontWeight: 700, minWidth: 20, height: 20, borderRadius: 10, display: "flex", alignItems: "center", justifyContent: "center", padding: "0 6px" }}>{friendReqIn.length}</span> : <span style={{ color: "#ccc" }}>›</span>} onClick={() => { setNetTab(friendReqIn.length > 0 ? "requests" : "friends"); go("network"); }} iconBg={G.bg} />
          <ProfileRow icon="💬" title="Messages" sub={`${Object.keys(chats).length + bands.length} chats · ${bands.length} bands`} right={totalUnread > 0 ? <span style={{ background: D, color: "#fff", fontSize: 11, fontWeight: 700, minWidth: 20, height: 20, borderRadius: 10, display: "flex", alignItems: "center", justifyContent: "center", padding: "0 6px" }}>{totalUnread}</span> : <span style={{ color: "#ccc" }}>›</span>} onClick={() => go("chats")} />
          <ProfileRow icon="🔎" title="Find musicians" sub="Search & connect on Recki" right={<span style={{ color: "#ccc" }}>›</span>} onClick={() => go("find-users")} />
        </div>
        <div style={css.card({ margin: "0 16px 10px" })}>
          <div style={{ padding: "10px 14px 4px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Payments</div>
          <ProfileRow icon="💳" title="Payment methods" sub="Visa 4242 · all payments in-app" right={<span style={{ color: "#ccc" }}>›</span>} onClick={() => go("payment-methods")} iconBg={G.bg} />
          <ProfileRow icon="💎" title="Plan" sub={isPrem ? premPlanName : "Free plan"} right={<span style={{ background: isPrem ? D : GREY, color: isPrem ? GOLD : "#888", fontSize: 10, padding: "3px 9px", borderRadius: 10, fontWeight: isPrem ? 600 : 400 }}>{isPrem ? "Premium" : "Free"}</span>} onClick={() => go("premium")} />
        </div>
        <div style={css.card({ margin: "0 16px 10px" })}>
          <ProfileRow icon="❓" title="Get help" sub="FAQs & contact support" right={<span style={{ color: "#ccc" }}>›</span>} onClick={() => go("help")} iconBg={G.bg} />
          <ProfileRow icon="🐞" title="Report a bug" sub="Something not working? Tell us" right={<span style={{ color: "#ccc" }}>›</span>} onClick={() => { setBugText(""); setBugArea("General"); go("report-bug"); }} iconBg={A.bg} />
        </div>
        <div style={css.card({ margin: "0 16px 10px" })}>
          <ProfileRow icon="🔔" title="Notifications" sub={unreadNotifs > 0 ? `${unreadNotifs} new` : "Replies, offers & updates"} right={unreadNotifs > 0 ? <span style={{ background: "#E0556E", color: "#fff", fontSize: 11, fontWeight: 700, minWidth: 20, height: 20, borderRadius: 10, display: "flex", alignItems: "center", justifyContent: "center", padding: "0 6px" }}>{unreadNotifs}</span> : <span style={{ color: "#ccc" }}>›</span>} onClick={() => go("inbox")} />
          <ProfileRow icon="🚪" title={<span style={{ color: R.fg }}>Log out</span>} right={null} onClick={() => go("role")} iconBg={R.bg} />
        </div>
        <div style={{ ...css.card({ margin: "0 16px 10px" }), border: `1px dashed ${BORDER}`, background: "#FAFAFE" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 11, padding: "12px 14px" }}>
            <div style={{ width: 36, height: 36, borderRadius: 10, background: "#EEEEFB", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 17 }}>🧪</div>
            <div style={{ flex: 1 }}><div style={{ fontSize: 12.5, fontWeight: 600, color: D }}>Demo: show empty / first-run state</div><div style={{ fontSize: 10.5, color: "#888", lineHeight: 1.4 }}>For the developer — preview how a brand-new user with no bookings, friends or messages sees the app.</div></div>
            <button onClick={() => setEmptyMode(v => !v)} style={{ width: 44, height: 26, borderRadius: 13, border: "none", cursor: "pointer", background: emptyMode ? G.bg : "#e5e5e8", position: "relative", flexShrink: 0, padding: 0 }}>
              <div style={{ width: 20, height: 20, borderRadius: "50%", background: emptyMode ? G.fg : "#bbb", position: "absolute", top: 3, left: emptyMode ? 21 : 3, transition: "left .15s" }} />
            </button>
          </div>
          <div onClick={() => go("dev-failures")} style={{ display: "flex", alignItems: "center", gap: 11, padding: "12px 14px", borderTop: `0.5px solid ${BORDER}`, cursor: "pointer" }}>
            <div style={{ width: 36, height: 36, borderRadius: 10, background: A.bg, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 17 }}>⚠️</div>
            <div style={{ flex: 1 }}><div style={{ fontSize: 12.5, fontWeight: 600, color: D }}>Failure paths to build</div><div style={{ fontSize: 10.5, color: "#888", lineHeight: 1.4 }}>The error & edge cases the developer must handle (not just the happy path).</div></div>
            <span style={{ color: "#ccc" }}>›</span>
          </div>
        </div>
        <div style={{ height: 12 }} />
      </div>
    </div>,

    language: <div style={{ flex: 1, background: GREY, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>🌐 {t("pr_language")}</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{t("pr_choose_lang")}</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={css.card({ margin: "0 16px" })}>
          {LANGS.map(([code, label], i) => <div key={code} onClick={() => { setLang(code); showToast("✅ " + label.split(" ").slice(1).join(" ")); }} style={{ display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderBottom: i < LANGS.length - 1 ? `0.5px solid #f5f5f5` : "none", cursor: "pointer" }}>
            <span style={{ fontSize: 22 }}>{label.split(" ")[0]}</span>
            <span style={{ flex: 1, fontSize: 14, fontWeight: lang === code ? 700 : 500, color: lang === code ? D : "#333" }}>{label.split(" ").slice(1).join(" ")}</span>
            {lang === code && <span style={{ color: D, fontSize: 18, fontWeight: 700 }}>✓</span>}
          </div>)}
        </div>
        <div style={{ margin: "12px 16px", fontSize: 11, color: "#999", lineHeight: 1.5 }}>This demo translates the main navigation, home, and booking screens. In the full app, every screen is translated and your language is detected automatically from your region.</div>
      </div>
    </div>,

    "dev-failures": <div style={{ flex: 1, background: GREY, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>⚠️ Failure paths</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Developer reference — error & edge cases to build</p></div>
      <div style={{ flex: 1, overflowY: "auto", padding: "12px 0" }}>
        <div style={{ background: A.bg, borderRadius: 12, margin: "0 16px 12px", padding: "11px 13px", fontSize: 11.5, color: A.fg, lineHeight: 1.5 }}>The happy path is in the prototype. These are the <strong>unhappy paths</strong> the real app must handle — each needs a clear user-facing message and a safe outcome. Tap any to see the intended behaviour.</div>
        {[
          { ico: "⛔", title: "Slot taken / double-booking", sub: "Two users try to book the same slot", body: "If a slot is taken between loading and confirming, the booking must fail cleanly: show \u201CThat time was just taken \u2014 pick another,\u201D refresh the calendar, and never charge or hold money for a slot that wasn\u2019t secured.", tone: R },
          { ico: "💳", title: "Payment declined / hold fails", sub: "Card fails when placing the hold", body: "If the card is declined or the hold can\u2019t be placed, do not confirm the booking. Show \u201CPayment couldn\u2019t be authorised \u2014 try another card,\u201D keep the slot only briefly, and let the user retry. No booking exists until payment is secured.", tone: R },
          { ico: "🏚", title: "Studio cancels a confirmed booking", sub: "Studio cancels after you booked", body: "The musician must be notified immediately (push + in-app), any held/charged amount fully refunded automatically, the booking marked \u201CCancelled by studio,\u201D and ideally similar studios suggested. The musician is never out of pocket.", tone: A },
          { ico: "↩", title: "Musician cancels — refund logic", sub: "Cancelling inside / outside the window", body: "Apply the studio\u2019s authored policy: full refund outside the window; partial/none inside it, with the exact charge shown before they confirm. The refund (or charge) is processed in-app and a receipt is issued.", tone: A },
          { ico: "🕓", title: "Split settlement — each member pays own share", sub: "Per-share pre-auth; auto-charge + receipt; dispute", body: "Each member pre-authorises ONLY their own share — the full sum is never held on one card. Confirmation deadline: up to 24 hours BEFORE the session slot. If the booking is made less than 24h before the slot, members instead get a 2-hour window from booking to confirm. If any share is unconfirmed by the deadline, the WHOLE booking is cancelled and all confirmed shares released. After the session, the final total (incl. studio adjustments for overtime/breakage/extra gear) is split and captured AUTOMATICALLY against each member's pre-authorised share — no approval step, no re-authorisation. Each member gets a receipt, which they can dispute within 48h (Recki reviews). Handle: an adjustment exceeding a member's original authorised amount (re-auth or flag), a member's card failing at capture, pre-auth expiring before the session, and releasing holds cleanly on cancellation.", tone: A },
          { ico: "📅", title: "Stale studio availability", sub: "Studio forgot to update hours", body: "Availability must be the single source of truth. If a studio hasn\u2019t confirmed a slot is bookable, don\u2019t offer it. Prompt studios to keep their calendar current; never show a bookable slot the studio can\u2019t honour.", tone: A },
          { ico: "📡", title: "No connection / action fails", sub: "Network drops mid-action", body: "Any action that hits the server (book, pay, message) must handle failure: show \u201CCouldn\u2019t complete \u2014 check your connection and try again,\u201D never leave the user unsure whether it worked, and never double-charge on retry.", tone: { bg: "#f0f0f0", fg: "#666" } },
          { ico: "🚫", title: "Empty marketplace (new city)", sub: "No studios near the user yet", body: "At launch most cities are empty. Instead of a sad empty map, show \u201CWe\u2019re new in {city} \u2014 here\u2019s what\u2019s coming\u201D and optionally a waitlist, so the app never feels broken when there\u2019s no inventory.", tone: { bg: L, fg: M } },
        ].map(f => <div key={f.title} style={{ ...css.card({ margin: "0 16px 8px" }), padding: 0, overflow: "hidden" }}>
          <div onClick={() => setOpenFail(openFail === f.title ? null : f.title)} style={{ display: "flex", alignItems: "center", gap: 11, padding: "13px 14px", cursor: "pointer" }}>
            <div style={{ width: 36, height: 36, borderRadius: 10, background: f.tone.bg, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 17, flexShrink: 0 }}>{f.ico}</div>
            <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>{f.title}</div><div style={{ fontSize: 10.5, color: "#888" }}>{f.sub}</div></div>
            <span style={{ color: "#ccc", fontSize: 14, transform: openFail === f.title ? "rotate(90deg)" : "none", transition: "transform .15s", display: "inline-block" }}>›</span>
          </div>
          {openFail === f.title && <div style={{ padding: "0 14px 13px 61px", fontSize: 12, color: "#555", lineHeight: 1.6 }}>{f.body}</div>}
        </div>)}
        <div style={{ fontSize: 10.5, color: "#999", margin: "10px 16px 0", lineHeight: 1.5 }}>This screen is a build checklist, not a user-facing feature — remove it before launch. It exists so the developer scopes the error handling, not just the happy path.</div>
        <div style={{ height: 16 }} />
      </div>
    </div>,

    inbox: <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}>
        <BackBtn onClick={() => { setInbox(list => list.map(n => ({ ...n, read: true }))); goBack(); }} />
        <h2 style={{ fontSize: 19, fontWeight: 700, marginTop: 6 }}>Notifications</h2>
        <p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Replies, offers & updates · ⚙️ <span onClick={() => go("notifications")} style={{ textDecoration: "underline", cursor: "pointer" }}>settings</span></p>
      </div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 8 }}>
        {inbox.length === 0 ? <div style={{ textAlign: "center", padding: "40px 20px", color: "#888", fontSize: 13 }}><div style={{ fontSize: 30, marginBottom: 10 }}>🔔</div>You're all caught up.</div> :
        inbox.map(n =>
          <div key={n.id} onClick={() => { setInbox(list => list.map(x => x.id === n.id ? { ...x, read: true } : x)); if (n.dest) go(n.dest); }} style={{ display: "flex", gap: 12, padding: "13px 16px", borderBottom: `0.5px solid ${BORDER}`, background: n.read ? "#fff" : L, cursor: n.dest ? "pointer" : "default" }}>
            <div style={{ ...css.av(n.read ? "#c9c9d6" : D, 40), fontSize: 18, flexShrink: 0 }}>{n.icon}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                <span style={{ fontSize: 13, fontWeight: n.read ? 600 : 700, color: D, flex: 1 }}>{n.title}</span>
                {!n.read && <span style={{ fontSize: 9, fontWeight: 700, color: "#fff", background: "#E0556E", padding: "1px 6px", borderRadius: 7, flexShrink: 0 }}>NEW</span>}
                <span style={{ fontSize: 10.5, color: "#aaa", flexShrink: 0 }}>{n.when}</span>
              </div>
              <div style={{ fontSize: 11.5, color: n.read ? "#777" : "#555", lineHeight: 1.45, marginTop: 2 }}>{n.body}</div>
              {n.dest && <div style={{ fontSize: 11, fontWeight: 700, color: D, marginTop: 5 }}>{n.dest === "chats" ? "Tap to reply →" : "Tap to view →"}</div>}
            </div>
            <span style={{ color: "#ccc", fontSize: 18, alignSelf: "center", flexShrink: 0 }}>›</span>
          </div>)}
        <div style={{ height: 14 }} />
      </div>
    </div>,

    notifications: <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Notifications</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Choose what you hear about</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={css.card()}>
          {[["reminder", "⏰ Session reminders", "2 hours before each booking"], ["booking", "✅ Booking updates", "Confirmations, changes & cancellations"], ["payments", "🧾 Payment reminders", "Before a session total auto-charges (2 days & 3 hours before)"], ["messages", "💬 Messages", "Direct messages & band group chats"], ["promos", "🎁 Offers & credits", "Discounts, credit bonuses & news"]].map(([k, t, s], i, arr) =>
            <div key={k} style={{ display: "flex", alignItems: "center", gap: 12, padding: "13px 14px", borderBottom: i < arr.length - 1 ? `0.5px solid #f5f5f5` : "none" }}>
              <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>{t}</div><div style={{ fontSize: 11, color: "#888", marginTop: 1 }}>{s}</div></div>
              <div onClick={() => { setNotif(n => ({ ...n, [k]: !n[k] })); }} style={{ width: 44, height: 26, borderRadius: 13, background: notif[k] ? G.fg : "#d8d8e0", position: "relative", cursor: "pointer", flexShrink: 0, transition: "background .2s" }}><div style={{ width: 22, height: 22, borderRadius: "50%", background: "#fff", position: "absolute", top: 2, left: notif[k] ? 20 : 2, transition: "left .2s" }} /></div>
            </div>)}
        </div>
        <div style={{ margin: "2px 16px", fontSize: 11, color: "#888", lineHeight: 1.5 }}>You can also manage push permissions in your phone's settings.</div>
        <button style={css.pbtn()} onClick={() => { goBack(); showToast("✅ Notification settings saved"); }}>Save</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    help: <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Get help</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Answers & ways to reach us</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={{ margin: "0 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Common questions</div>
        <div style={css.card()}>
          {[["💳", "How do payments work?", "All bookings are paid in the app — never cash. You're charged when you book, or after the session if you chose pay-later."], ["↩️", "How do refunds & cancellations work?", "Cancel more than 24h before: full refund. Within 24h: 50%. No-shows are charged in full."], ["🪙", "How do credits & levels work?", "Every booking earns 5 credits; 250 = 15% off. Every 15 sessions you clear a sub-level (I→II→III) for +25 bonus credits; clear all three to reach the next animal tier. The top tier is reached at 500 sessions."], ["⚠️", "I was charged the wrong amount", "Open the booking, tap “Something's wrong — dispute”. Recki reviews and your funds stay on hold until it's resolved."]].map(([ic, q, a], i) =>
            <div key={i} style={{ padding: "12px 14px", borderBottom: i < 3 ? `0.5px solid #f5f5f5` : "none" }}>
              <div style={{ display: "flex", gap: 10 }}><span style={{ fontSize: 16 }}>{ic}</span><div><div style={{ fontSize: 13, fontWeight: 600, color: D, marginBottom: 3 }}>{q}</div><div style={{ fontSize: 11.5, color: "#777", lineHeight: 1.5 }}>{a}</div></div></div>
            </div>)}
        </div>
        <div style={{ margin: "10px 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Still need help?</div>
        <div style={css.card()}>
          <ConfirmItem icon="💬" title="Chat with support" sub="Typically replies within a few hours" onClick={() => showToast("💬 Opening support chat…")} />
          <ConfirmItem icon="✉️" title="Email us" sub="help@recki.app" onClick={() => showToast("✉️ Opening your email app…")} />
        </div>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "report-bug": <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Report a bug</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Help us fix it faster</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={{ background: L, borderRadius: 12, margin: "0 16px 12px", padding: "10px 13px", fontSize: 11.5, color: M, lineHeight: 1.5 }}>Thanks for flagging it 🙏 The more detail you give, the quicker we can sort it out.</div>
        <div style={{ margin: "0 16px 6px" }}><label style={css.label}>Where did it happen?</label></div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 7, padding: "0 16px 12px" }}>
          {["General", "Booking", "Payments", "Calendar", "Messages", "Profile", "Other"].map(a => <button key={a} onClick={() => setBugArea(a)} style={css.fc(bugArea === a)}>{a}</button>)}
        </div>
        <div style={{ margin: "0 16px 12px" }}><label style={css.label}>What went wrong?</label>
          <textarea value={bugText} onChange={e => setBugText(e.target.value)} placeholder="Describe what you did and what happened. What did you expect instead?" style={{ ...css.input, resize: "none", height: 120 }} /></div>
        <div style={{ margin: "0 16px 12px" }}><button style={{ ...css.sbtn(), width: "100%" }} onClick={() => showToast("📷 Screenshot attached")}>📷 Attach a screenshot</button></div>
        <div style={{ margin: "0 16px 12px", fontSize: 11, color: "#999", lineHeight: 1.5 }}>We'll automatically include your app version and device so you don't have to.</div>
        <button style={css.pbtn()} onClick={() => { if (!bugText.trim()) { showToast("Add a short description first"); return; } setBugReports(bs => [{ id: "bg" + Date.now(), area: bugArea, from: "Marco Rossi", role: "Musician", when: "Just now", status: "new", text: bugText.trim() }, ...bs]); setBugText(""); goBack(); showToast("✅ Bug report sent — thank you!"); }}>Send report</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    meets: <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={{ background: "linear-gradient(135deg, #1FB8C4, #2A8FA8)", padding: "20px 16px 18px", flexShrink: 0 }}>
        <BackBtn onClick={goBack} />
        <h2 style={{ fontSize: 20, fontWeight: 800, color: "#fff", marginTop: 6 }}>🍻 Jam Together</h2>
        <div style={{ fontSize: 12, color: "rgba(255,255,255,.9)", marginTop: 3 }}>Free meet-ups to play & hang near {city} · no booking, no cost</div>
      </div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={{ background: "#E2F5F6", borderRadius: 12, margin: "0 16px 12px", padding: "11px 13px", fontSize: 11.5, color: "#137E88", lineHeight: 1.5 }}>💡 Jam Togethers are free, casual hangs musicians organise — meet at a bar or after a show and improvise together. No room is booked and nothing is charged.</div>
        <div style={{ padding: "0 16px 12px" }}><button style={{ ...css.pbtn(), background: "#1FB8C4", margin: 0, width: "100%" }} onClick={() => { setMeetForm({ title: "", place: "", address: "", when: "", vibe: "", want: ["Anyone"], max: 6 }); go("meet-create"); }}>+ Organise a Jam Together</button></div>
        {meets.map(m =>
          <div key={m.id} onClick={() => { setMeetSel(m); go("meet-detail"); }} style={{ ...css.card(), padding: 14, cursor: "pointer", borderLeft: `4px solid #1FB8C4` }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: D, marginBottom: 3 }}>{m.title}</div>
            <div style={{ fontSize: 12, color: "#137E88", fontWeight: 600 }}>📍 {m.place} · {m.area} · {m.dist}</div>
            <div style={{ fontSize: 11.5, color: "#888", marginTop: 2 }}>{m.when} · hosted by {m.host}</div>
            <div style={{ fontSize: 12, color: "#666", lineHeight: 1.5, marginTop: 7 }}>{m.vibe}</div>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 9 }}>
              <div style={{ display: "flex" }}>{m.going.slice(0, 4).map((g, i) => <div key={i} style={{ ...css.av(M, 24), marginLeft: i ? -8 : 0, fontSize: 9, border: "2px solid #fff" }}>{g}</div>)}</div>
              <span style={{ fontSize: 11, color: "#888" }}>{m.going.length} going</span>
              <span style={{ marginLeft: "auto", ...css.pill({ bg: "#E2F5F6", fg: "#137E88" }) }}>🎸 {m.want}</span>
            </div>
          </div>)}
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "meet-detail": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Jam Together</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{meetSel ? meetSel.place : ""}</p></div>
      {!meetSel ? <div style={{ flex: 1 }} /> : <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={{ background: "linear-gradient(135deg, #1FB8C4, #2A8FA8)", borderRadius: 16, margin: "0 16px 12px", padding: 16, color: "#fff" }}>
          <div style={{ fontSize: 17, fontWeight: 800 }}>{meetSel.title}</div>
          <div style={{ fontSize: 12.5, marginTop: 4, opacity: .95 }}>📍 {meetSel.place}{meetSel.area ? ` · ${meetSel.area}` : ""}</div>
          <div style={{ fontSize: 12.5, opacity: .95 }}>{meetSel.when}</div>
          <span style={{ display: "inline-block", marginTop: 8, fontSize: 11, background: "rgba(255,255,255,.2)", padding: "3px 10px", borderRadius: 12 }}>Free · just turn up</span>
        </div>
        <div style={css.card()}>
          <ConfirmItem icon="🎤" title={`Hosted by ${meetSel.host}`} sub="Tap to view profile" onClick={() => openProfile(meetSel.host)} />
          {meetSel.address && <ConfirmItem icon="📍" title={meetSel.address} sub="Tap to open in maps" onClick={() => showToast("🗺 Opening in maps…")} />}
          <ConfirmItem icon="🎸" title={`Looking for: ${meetSel.want}`} sub="Bring what you can carry" />
          {meetSel.max && <ConfirmItem icon="👥" title={`${meetSel.going.length} of ${meetSel.max} going`} sub={meetSel.going.length >= meetSel.max ? "This meet-up is full" : `${meetSel.max - meetSel.going.length} spot(s) left`} />}
          <ConfirmItem icon="💬" title={meetSel.vibe} sub="The vibe" />
        </div>
        <div style={{ margin: "2px 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Who's going · {meetSel.going.length}{meetSel.max ? `/${meetSel.max}` : ""}</div>
        <div style={{ ...css.card(), padding: "10px 14px", display: "flex", flexWrap: "wrap", gap: 8 }}>
          {meetSel.going.map((g, i) => <div key={i} onClick={() => openProfile(g)} style={{ display: "flex", alignItems: "center", gap: 6, cursor: "pointer" }}><div style={{ ...css.av(M, 28), fontSize: 10 }}>{g}</div><span style={{ fontSize: 12, color: D }}>{chatNames[g] || g}</span></div>)}
        </div>
        {(() => { const meId = "MR"; const going = meetSel.going.includes(meId); const full = meetSel.max && meetSel.going.length >= meetSel.max; return going
          ? <button style={css.sbtn({ color: R.fg, borderColor: R.bg })} onClick={() => { setMeets(ms => ms.map(x => x.id === meetSel.id ? { ...x, going: x.going.filter(g => g !== meId) } : x)); setMeetSel(s => ({ ...s, going: s.going.filter(g => g !== meId) })); showToast("You're no longer going"); }}>Can't make it</button>
          : full ? <button style={{ ...css.pbtn(), background: "#1FB8C4", opacity: .5 }} disabled>This meet-up is full</button>
          : <button style={{ ...css.pbtn(), background: "#1FB8C4" }} onClick={() => { setMeets(ms => ms.map(x => x.id === meetSel.id ? { ...x, going: [...x.going, meId] } : x)); setMeetSel(s => ({ ...s, going: [...s.going, meId] })); showToast("🍻 You're going! Added to the group chat"); }}>I'm in 🍻</button>; })()}

        <div style={{ margin: "8px 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Group chat</div>
        <div style={{ ...css.card(), padding: "12px 14px" }}>
          {meetSel.chat.length === 0 ? <div style={{ fontSize: 12, color: "#aaa", textAlign: "center", padding: "8px 0" }}>No messages yet — say hi 👋</div> :
            meetSel.chat.map((c, i) => <div key={i} style={{ marginBottom: i < meetSel.chat.length - 1 ? 8 : 0 }}><span style={{ fontSize: 11, fontWeight: 700, color: "#137E88" }}>{c.who}</span><div style={{ fontSize: 12.5, color: D, lineHeight: 1.4 }}>{c.t}</div></div>)}
          <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
            <input value={meetChatInput} onChange={e => setMeetChatInput(e.target.value)} onKeyDown={e => { if (e.key === "Enter" && meetChatInput.trim()) { const t = meetChatInput.trim(); setMeets(ms => ms.map(x => x.id === meetSel.id ? { ...x, chat: [...x.chat, { who: "You", t }] } : x)); setMeetSel(s => ({ ...s, chat: [...s.chat, { who: "You", t }] })); setMeetChatInput(""); } }} placeholder="Message the group…" style={{ ...css.input, flex: 1 }} />
            <button onClick={() => { if (!meetChatInput.trim()) return; const t = meetChatInput.trim(); setMeets(ms => ms.map(x => x.id === meetSel.id ? { ...x, chat: [...x.chat, { who: "You", t }] } : x)); setMeetSel(s => ({ ...s, chat: [...s.chat, { who: "You", t }] })); setMeetChatInput(""); }} style={{ width: 42, height: 42, borderRadius: 12, background: "#1FB8C4", color: "#fff", border: "none", fontSize: 16, cursor: "pointer", flexShrink: 0 }}>➤</button>
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "center", gap: 18, padding: "10px 16px" }}>
          <span onClick={() => showToast("🔗 Invite link copied")} style={{ fontSize: 12, color: "#137E88", cursor: "pointer", fontWeight: 600 }}>🔗 Share</span>
          <span onClick={() => showToast("🚩 Reported — Recki will review")} style={{ fontSize: 12, color: "#999", cursor: "pointer" }}>🚩 Report</span>
        </div>
        <div style={{ height: 14 }} />
      </div>}
    </div>,

    "meet-create": <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Organise a Jam Together</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Free meet-up · invite the community</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={{ background: "#E2F5F6", borderRadius: 12, margin: "0 16px 12px", padding: "10px 13px", fontSize: 11.5, color: "#137E88", lineHeight: 1.5 }}>🍻 This is a free hang — no room is booked and no one is charged. Just pick a spot and a time.</div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Title</label><input value={meetForm.title} onChange={e => setMeetForm(f => ({ ...f, title: e.target.value }))} placeholder="e.g. Post-gig jam at Loop" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Place / venue</label><input value={meetForm.place} onChange={e => setMeetForm(f => ({ ...f, place: e.target.value }))} placeholder="Loop Bar" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Exact address</label><input value={meetForm.address} onChange={e => setMeetForm(f => ({ ...f, address: e.target.value }))} placeholder="e.g. Lerchenfelder Gürtel 37, 1160 Wien" style={css.input} /><div style={{ fontSize: 10.5, color: "#999", marginTop: 4 }}>📍 Shown to people who join so they know exactly where to go.</div></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>When</label><input value={meetForm.when} onChange={e => setMeetForm(f => ({ ...f, when: e.target.value }))} placeholder="e.g. Tonight · 22:30" style={css.input} /></div>
        <div style={{ margin: "0 16px 6px" }}><label style={css.label}>Who are you hoping to meet? <span style={{ color: "#bbb", fontWeight: 400 }}>· pick all that apply</span></label></div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 7, padding: "0 16px 10px" }}>
          {["Anyone", "Guitarists", "Bassists", "Singers", "Drummers", "Keys", "Horns", "Rhythm section", "Acoustic-friendly"].map(w => {
            const on = meetForm.want.includes(w);
            return <button key={w} onClick={() => setMeetForm(f => { if (w === "Anyone") return { ...f, want: ["Anyone"] }; const base = f.want.filter(x => x !== "Anyone"); const nx = base.includes(w) ? base.filter(x => x !== w) : [...base, w]; return { ...f, want: nx.length ? nx : ["Anyone"] }; })} style={css.chip(on, "#1FB8C4")}>{w}</button>;
          })}
        </div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Max people</label>
          <div style={{ display: "flex", alignItems: "center", gap: 14, background: GREY, borderRadius: 12, padding: "10px 14px" }}>
            <button onClick={() => setMeetForm(f => ({ ...f, max: Math.max(2, f.max - 1) }))} style={{ width: 34, height: 34, borderRadius: 9, border: `1px solid ${BORDER}`, background: "#fff", fontSize: 18, cursor: "pointer", color: D }}>−</button>
            <div style={{ flex: 1, textAlign: "center" }}><div style={{ fontSize: 18, fontWeight: 700, color: D }}>{meetForm.max}</div><div style={{ fontSize: 10, color: "#888" }}>people max</div></div>
            <button onClick={() => setMeetForm(f => ({ ...f, max: Math.min(30, f.max + 1) }))} style={{ width: 34, height: 34, borderRadius: 9, border: `1px solid ${BORDER}`, background: "#fff", fontSize: 18, cursor: "pointer", color: D }}>+</button>
          </div>
          <div style={{ fontSize: 10.5, color: "#999", marginTop: 4 }}>Once it's full, no one else can join — same as a paid jam.</div>
        </div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>The vibe</label><textarea value={meetForm.vibe} onChange={e => setMeetForm(f => ({ ...f, vibe: e.target.value }))} placeholder="What's the plan? e.g. After the festival, relaxed acoustic improv, all levels welcome." style={{ ...css.input, resize: "none", height: 84 }} /></div>
        <button style={{ ...css.pbtn(), background: "#1FB8C4" }} onClick={() => { if (!meetForm.title.trim() || !meetForm.place.trim() || !meetForm.when.trim()) { showToast("Add a title, place and time"); return; } const m = { id: "m" + Date.now(), host: "You (Marco)", title: meetForm.title.trim(), place: meetForm.place.trim(), address: meetForm.address.trim(), area: meetForm.address.trim() || city, when: meetForm.when.trim(), vibe: meetForm.vibe.trim() || "Come hang and play!", want: meetForm.want.join(", "), max: meetForm.max, going: ["MR"], dist: "0 km", chat: [] }; setMeets(ms => [m, ...ms]); go("meets"); showToast("🍻 Posted! Musicians nearby can see it"); }}>Post meet-up</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    jams: <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={{ background: "linear-gradient(135deg, #E0951C, #C9781A)", padding: "20px 16px 18px", flexShrink: 0 }}>
        <BackBtn onClick={goBack} />
        <h2 style={{ fontSize: 20, fontWeight: 800, color: "#fff", marginTop: 6 }}>🎶 Studio Jams for <span style={{ color: "#FFE3A3" }}>you</span></h2>
        <div style={{ fontSize: 12, color: "rgba(255,255,255,.9)", marginTop: 3 }}>Matched to your instruments · split the room cost</div>
      </div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={{ background: L, borderRadius: 12, margin: "0 16px 10px", padding: "11px 13px", fontSize: 11.5, color: M, lineHeight: 1.5 }}>💡 Jams looking for what you play ({myInstruments.join(", ")}) show first. A Studio Jam is a booked slot someone opened for others to join — everyone shares the room cost.</div>
        {[...jams].sort((a, b) => (jamMatchesMe(b) ? 1 : 0) - (jamMatchesMe(a) ? 1 : 0)).map(j => {
          const left = j.spots - j.joined; const mine = jamMatchesMe(j);
          return <div key={j.id} onClick={() => { setJamSel(j); go("jam-detail"); }} style={{ ...css.card(), padding: 14, cursor: "pointer", borderLeft: `4px solid ${mine ? "#F5A623" : BORDER}` }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 7 }}>
              <span style={{ fontSize: 13, fontWeight: 700, color: D, flex: 1 }}>{j.genre}</span>
              {mine && <span style={css.pill({ bg: "#FDF1DD", fg: GOLD })}>for you</span>}
              <span style={css.pill(left > 0 ? G : R)}>{left > 0 ? `${left} spot${left === 1 ? "" : "s"} left` : "Full"}</span>
            </div>
            <div style={{ fontSize: 12.5, color: D, fontWeight: 600 }}>{j.studio} <span style={{ color: "#aaa", fontWeight: 400 }}>· {j.area} · {j.dist}</span></div>
            <div style={{ fontSize: 11.5, color: "#888", marginTop: 2 }}>{j.when} · hosted by {j.host}</div>
            <div style={{ display: "flex", gap: 7, marginTop: 9 }}>
              <div style={{ flex: 1, background: GREY, borderRadius: 8, padding: "6px 9px" }}><div style={{ fontSize: 9, color: "#888" }}>Looking for</div><div style={{ fontSize: 11.5, fontWeight: 600, color: D }}>{j.want}</div></div>
              <div style={{ flex: 1, background: GREY, borderRadius: 8, padding: "6px 9px" }}><div style={{ fontSize: 9, color: "#888" }}>Your share</div><div style={{ fontSize: 11.5, fontWeight: 600, color: D }}>€{j.perHead}</div></div>
              <div style={{ flex: 1, background: GREY, borderRadius: 8, padding: "6px 9px" }}><div style={{ fontSize: 9, color: "#888" }}>Players</div><div style={{ fontSize: 11.5, fontWeight: 600, color: D }}>{j.joined}/{j.spots}</div></div>
            </div>
          </div>;
        })}
        <div style={{ padding: "6px 16px 0", fontSize: 11.5, color: "#888", textAlign: "center" }}>Want to host your own? Open any booking as a jam when you book a room.</div>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "jam-detail": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Studio Jam</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{jamSel ? jamSel.genre : ""}</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={{ background: "linear-gradient(135deg, #E0951C, #C9781A)", borderRadius: 16, margin: "0 16px 12px", padding: "16px", color: "#fff" }}>
          <div style={{ fontSize: 17, fontWeight: 800 }}>{jamSel ? jamSel.genre : ""}</div>
          <div style={{ fontSize: 12.5, marginTop: 4, opacity: .95 }}>{jamSel ? `${jamSel.studio} · ${jamSel.area}` : ""}</div>
          <div style={{ fontSize: 12.5, opacity: .95 }}>{jamSel ? jamSel.when : ""}</div>
        </div>
        <div style={css.card()}>
          <ConfirmItem icon="🎤" title={jamSel ? `Hosted by ${jamSel.host}` : "Host"} sub="Tap to view profile" onClick={() => jamSel && openProfile(jamSel.host)} />
          <ConfirmItem icon="🎸" title={jamSel ? `Looking for: ${jamSel.want}` : ""} sub="Bring your instrument" />
          <ConfirmItem icon="👥" title={jamSel ? `${jamSel.joined} of ${jamSel.spots} players in` : ""} sub={jamSel ? `${jamSel.spots - jamSel.joined} spot(s) left` : ""} />
          <ConfirmItem icon="💶" title={jamSel ? `€${jamSel.perHead} your share` : ""} sub="Room cost is split evenly between players · paid in app" />
        </div>
        <div style={{ margin: "2px 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Who's in · {jamSel ? (jamSel.players ? jamSel.players.length : jamSel.joined) : 0}/{jamSel ? jamSel.spots : 0}</div>
        <div style={css.card()}>
          {(jamSel && jamSel.players ? jamSel.players : []).map((p, i, arr) =>
            <div key={i} onClick={() => openProfile(p.init)} style={{ display: "flex", alignItems: "center", gap: 11, padding: "11px 14px", borderBottom: i < arr.length - 1 ? `0.5px solid #f5f5f5` : "none", cursor: "pointer" }}>
              <div style={{ ...css.av(M, 36), fontSize: 12 }}>{p.init}</div>
              <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>{p.name}</div><div style={{ fontSize: 11, color: "#888" }}>{p.role}</div></div>
              <span style={{ color: "#ccc" }}>›</span>
            </div>)}
          {jamSel && jamSel.spots - (jamSel.players ? jamSel.players.length : jamSel.joined) > 0 && <div style={{ padding: "10px 14px", fontSize: 11.5, color: "#aaa" }}>{jamSel.spots - (jamSel.players ? jamSel.players.length : jamSel.joined)} spot(s) open</div>}
        </div>
        <div style={{ background: L, borderRadius: 12, margin: "0 16px 12px", padding: "11px 13px", fontSize: 11.5, color: M, lineHeight: 1.5 }}>By joining you agree to share the room cost. You'll be added to a group chat with the other players to sort out the details.</div>
        {jamSel && jamSel.spots - jamSel.joined > 0
          ? <button style={css.pbtn()} onClick={() => { const me = { init: "MR", name: "You (Marco)", role: "Guitar" }; setJams(js => js.map(x => x.id === jamSel.id ? { ...x, joined: x.joined + 1, players: [...(x.players || []), me] } : x)); setJamSel(s => ({ ...s, joined: s.joined + 1, players: [...(s.players || []), me] })); showToast(`🎶 You're in! €${jamSel.perHead} · group chat opened`); }}>Join this jam · €{jamSel.perHead}</button>
          : <button style={{ ...css.pbtn(), opacity: .5 }} disabled>This jam is full</button>}
        <button style={css.sbtn()} onClick={() => showToast("💬 Message sent to the host")}>💬 Message the host</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "hire-hub": <div style={{ flex: 1, display: "flex", flexDirection: "column", background: GREY }}>
      <div style={{ background: `linear-gradient(135deg, ${A.fg}, #6a4a8a)`, padding: "18px 16px 16px", flexShrink: 0 }}>
        <BackBtn onClick={goBack} light />
        <h2 style={{ fontSize: 20, fontWeight: 800, color: "#fff", marginTop: 6 }}>🎸 Hire & get hired</h2>
        <p style={{ fontSize: 12, color: "rgba(255,255,255,.8)", marginTop: 3 }}>Find bandmates, session players & writers {isPrem ? "" : "· Premium"}</p>
      </div>
      {!isPrem
        ? <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", padding: "40px 32px" }}>
            <div style={{ width: 76, height: 76, borderRadius: "50%", background: "#FFF3DC", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 34, marginBottom: 16 }}>🔒</div>
            <div style={{ fontSize: 16, fontWeight: 700, color: D, marginBottom: 8 }}>A Premium feature</div>
            <div style={{ fontSize: 13, color: "#888", lineHeight: 1.6, maxWidth: 270, marginBottom: 20 }}>Browse and post to Hire & get hired with Premium — find a band to join, offer paid session work, or list yourself as a writer.</div>
            <button onClick={() => go("premium")} style={{ background: GOLD, color: "#3A2E00", border: "none", borderRadius: 12, padding: "12px 28px", fontSize: 14, fontWeight: 700, cursor: "pointer", fontFamily: "inherit" }}>Go Premium →</button>
          </div>
        : <>
          <div style={{ display: "flex", background: "#fff", borderBottom: `0.5px solid ${BORDER}`, flexShrink: 0 }}>
            {[["bands", "🎸 Bands"], ["sessionists", "🎷 Sessionists"], ["ghosts", "✍️ Writers"]].map(([k, l]) =>
              <div key={k} onClick={() => setHubCat(k)} style={{ flex: 1, textAlign: "center", padding: "12px 4px", fontSize: 12.5, color: hubCat === k ? A.fg : "#888", fontWeight: hubCat === k ? 700 : 500, cursor: "pointer", borderBottom: `2px solid ${hubCat === k ? A.fg : "transparent"}` }}>{l}</div>)}
          </div>
          <div style={{ flex: 1, overflowY: "auto", padding: "12px 0" }}>
            {/* BANDS looking for members */}
            {hubCat === "bands" && <>
              <div style={{ padding: "0 16px 6px", fontSize: 11.5, color: "#888" }}>Bands looking for a member to join them.</div>
              {[...myHireListings.filter(l => l.type === "band"), ...sessionBands].map(b => <div key={b.id} style={{ ...css.card({ margin: "0 16px 8px" }), padding: 13 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 11, marginBottom: 8 }}>
                  <span style={{ ...css.av(b.bg || M, 40), fontSize: 13 }}>{b.init || "🎸"}</span>
                  <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontSize: 14, fontWeight: 700, color: D }}>{b.name || b.title}</div><div style={{ fontSize: 11, color: "#888" }}>{b.genre || ""}{b.genre && b.area ? " · " : ""}{b.area}</div></div>
                  {b.mine && <span style={{ fontSize: 9.5, fontWeight: 700, color: G.fg, background: G.bg, padding: "2px 7px", borderRadius: 7 }}>YOU</span>}
                </div>
                <div style={{ background: L, borderRadius: 10, padding: "8px 11px", fontSize: 12, color: M, fontWeight: 600 }}>Looking for: {b.need || b.detail}</div>
                {!b.mine && <button onClick={() => { const who = b.by || b.name || "the band"; const k = b.byInit || (b.init && b.init !== "🎸" ? b.init : idFromName(who)); setChats(c => ({ ...c, [k]: c[k] || [] })); setChatTimes(t => ({ ...t, [k]: t[k] || "now" })); setChatWith(k); go("chat"); }} style={{ ...css.gbtn(), margin: "10px 0 0", width: "100%" }}>💬 Message {(b.by || b.name || "band").split(" ")[0]}</button>}
              </div>)}
              <div style={{ padding: "6px 16px 0" }}><button onClick={() => { setHirePost("band"); setHpForm({ title: "", detail: "", rate: "", area: "Vienna" }); }} style={{ ...css.gbtn(), width: "100%" }}>+ Post: my band needs someone</button></div>
            </>}
            {/* SESSIONISTS available */}
            {hubCat === "sessionists" && <>
              <div style={{ padding: "0 16px 6px", fontSize: 11.5, color: "#888" }}>Session players available for paid work.</div>
              {[...myHireListings.filter(l => l.type === "session"), ...sessionists].map((s, i) => <div key={s.init + i} style={{ ...css.card({ margin: "0 16px 8px" }), padding: 13 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
                  <span style={{ ...css.av(s.bg || "#2a4a6a", 42), fontSize: 14 }}>{s.init}</span>
                  <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontSize: 14, fontWeight: 700, color: D }}>{s.name}{s.mine && <span style={{ fontSize: 9.5, fontWeight: 700, color: G.fg, background: G.bg, padding: "2px 7px", borderRadius: 7, marginLeft: 6 }}>YOU</span>}</div><div style={{ fontSize: 11.5, color: A.fg, fontWeight: 600 }}>{s.instr || s.title}</div><div style={{ fontSize: 11, color: "#888", marginTop: 1 }}>📍 {s.area} · from €{s.rate}{s.instr ? "/session" : ""}</div></div>
                </div>
                {s.note && <div style={{ fontSize: 11.5, color: "#666", lineHeight: 1.5, marginTop: 8 }}>{s.note}</div>}
                {!s.mine && <button onClick={() => { const k = s.init || idFromName(s.name); setChats(c => ({ ...c, [k]: c[k] || [] })); setChatTimes(t => ({ ...t, [k]: t[k] || "now" })); setChatWith(k); go("chat"); }} style={{ ...css.gbtn(), margin: "10px 0 0", width: "100%" }}>💬 Message {s.name.split(" ")[0]}</button>}
              </div>)}
              <div style={{ padding: "6px 16px 0" }}><button onClick={() => { setHirePost("session"); setHpForm({ title: "", detail: "", rate: "", area: "Vienna" }); }} style={{ ...css.gbtn(), width: "100%" }}>+ Post: I'm available for sessions</button></div>
            </>}
            {/* GHOSTWRITERS available */}
            {hubCat === "ghosts" && <>
              <div style={{ padding: "0 16px 6px", fontSize: 11.5, color: "#888" }}>Writers available to write songs, lyrics or beats.</div>
              {[...myHireListings.filter(l => l.type === "ghost"), ...ghostwriters].map((g, i) => <div key={g.init + i} style={{ ...css.card({ margin: "0 16px 8px" }), padding: 13 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
                  <span style={{ ...css.av(g.bg || "#4a2a6a", 42), fontSize: 14 }}>{g.init}</span>
                  <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontSize: 14, fontWeight: 700, color: D }}>{g.name}{g.mine && <span style={{ fontSize: 9.5, fontWeight: 700, color: G.fg, background: G.bg, padding: "2px 7px", borderRadius: 7, marginLeft: 6 }}>YOU</span>}</div><div style={{ fontSize: 11.5, color: "#137E88", fontWeight: 600 }}>{g.kind || g.title}</div><div style={{ fontSize: 11, color: "#888", marginTop: 1 }}>📍 {g.area} · from €{g.rate}</div></div>
                </div>
                {g.note && <div style={{ fontSize: 11.5, color: "#666", lineHeight: 1.5, marginTop: 8 }}>{g.note}</div>}
                {!g.mine && <button onClick={() => { const k = g.init || idFromName(g.name); setChats(c => ({ ...c, [k]: c[k] || [] })); setChatTimes(t => ({ ...t, [k]: t[k] || "now" })); setChatWith(k); go("chat"); }} style={{ ...css.gbtn(), margin: "10px 0 0", width: "100%" }}>💬 Message {g.name.split(" ")[0]}</button>}
              </div>)}
              <div style={{ padding: "6px 16px 0" }}><button onClick={() => { setHirePost("ghost"); setHpForm({ title: "", detail: "", rate: "", area: "Vienna" }); }} style={{ ...css.gbtn(), width: "100%" }}>+ Post: I write for others</button></div>
            </>}
            <div style={{ height: 16 }} />
          </div>
        </>}
    </div>,

    levels: <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Your level</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Book sessions, level up, earn credits</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={{ background: lvl.color, borderRadius: 16, margin: "0 16px 12px", padding: "18px 16px", textAlign: "center" }}>
          <div style={{ fontSize: 56, lineHeight: 1 }}>{lvl.animal}</div>
          <div style={{ fontSize: 18, fontWeight: 800, color: D, marginTop: 8 }}>{lvl.name} <span style={{ color: GOLD }}>{subRoman}</span></div>
          <div style={{ fontSize: 12, color: "#666", marginTop: 3 }}>Tier {lvlIdx + 1} of {LEVELS.length} · {sessions} sessions booked</div>
          <div style={{ display: "flex", gap: 5, marginTop: 12 }}>
            {ROMAN.map((r, i) => <div key={r} style={{ flex: 1, textAlign: "center" }}>
              <div style={{ height: 8, borderRadius: 4, background: "rgba(0,0,0,.08)", overflow: "hidden" }}>{i < subIdx ? <div style={{ height: 8, background: D }} /> : i === subIdx && !isMaxLvl ? <div style={{ width: `${(intoSub / PER_SUB) * 100}%`, height: 8, background: D, borderRadius: 4 }} /> : i === subIdx && isMaxLvl ? <div style={{ height: 8, background: D }} /> : null}</div>
              <div style={{ fontSize: 9, color: i <= subIdx ? D : "#aaa", fontWeight: i === subIdx ? 700 : 400, marginTop: 3 }}>{lvl.name.split(" ").pop()} {r}</div>
            </div>)}
          </div>
          <div style={{ fontSize: 11.5, color: "#666", marginTop: 8 }}>{isMaxLvl ? `🐉 Top tier — you're a legend! Every ${PRESTIGE_EVERY} sessions from here earns +${PRESTIGE_BONUS} bonus credits (${PRESTIGE_EVERY - ((sessions - DRAGON_AT) % PRESTIGE_EVERY || PRESTIGE_EVERY)} to your next milestone).` : atSubMax ? `${toNextSub} more session${toNextSub === 1 ? "" : "s"} to become a ${LEVELS[lvlIdx + 1].name} ${LEVELS[lvlIdx + 1].animal}` : `${toNextSub} more session${toNextSub === 1 ? "" : "s"} to ${lvl.name} ${ROMAN[subIdx + 1]}`}</div>
        </div>
        <div onClick={() => { setUseAnimal(a => !a); showToast(useAnimal ? "Switched to your photo" : `${lvl.animal} ${lvl.name} set as your avatar`); }} style={{ ...css.card({ margin: "0 16px 12px" }), padding: 14, cursor: "pointer", display: "flex", alignItems: "center", gap: 12 }}>
          <div style={{ width: 40, height: 40, borderRadius: 12, background: lvl.color, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22 }}>{lvl.animal}</div>
          <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>Use my animal as avatar</div><div style={{ fontSize: 11, color: "#888" }}>Show your level animal instead of a photo</div></div>
          <div style={{ width: 44, height: 26, borderRadius: 13, background: useAnimal ? G.fg : "#d8d8e0", position: "relative", transition: "background .2s" }}><div style={{ width: 22, height: 22, borderRadius: "50%", background: "#fff", position: "absolute", top: 2, left: useAnimal ? 20 : 2, transition: "left .2s" }} /></div>
        </div>
        <div style={{ margin: "0 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>All 12 tiers · 3 sub-levels each</div>
        {LEVELS.map((L, i) => {
          const reached = i <= lvlIdx, current = i === lvlIdx;
          return <div key={i} style={{ ...css.card(), padding: "12px 14px", opacity: reached ? 1 : .55, border: current ? `1.5px solid ${D}` : `0.5px solid ${BORDER}` }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <div style={{ width: 44, height: 44, borderRadius: 12, background: reached ? L.color : GREY, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 24, filter: reached ? "none" : "grayscale(1)" }}>{L.animal}</div>
              <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>Tier {i + 1} · {L.name}</div><div style={{ fontSize: 11, color: "#888" }}>Reach at {i * PER_LEVEL} sessions{i > 0 ? " · +25 credits" : ""}</div></div>
              {current && <span style={css.pill({ bg: D, fg: "#fff" })}>You</span>}
              {reached && !current && <span style={{ color: G.fg, fontSize: 16 }}>✓</span>}
              {!reached && <span style={{ fontSize: 14 }}>🔒</span>}
            </div>
            {current && <div style={{ display: "flex", gap: 5, marginTop: 9 }}>
              {ROMAN.map((r, si) => <div key={r} style={{ flex: 1, padding: "4px 0", textAlign: "center", borderRadius: 7, fontSize: 10, fontWeight: 700, background: si <= subIdx ? D : GREY, color: si <= subIdx ? "#fff" : "#aaa" }}>{r}{si < subIdx ? " ✓" : si === subIdx ? " •" : ""}</div>)}
            </div>}
          </div>;
        })}
        <div style={{ background: L, borderRadius: 12, margin: "8px 16px 0", padding: "10px 13px", fontSize: 11, color: M, lineHeight: 1.5 }}>Every {PER_SUB} sessions you clear a sub-level — each level-up gives +25 credits. Clear all three (I → II → III) to be promoted to the next animal.</div>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    credits: <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>🪙 Recki credits</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Earn credits, unlock discounts</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={css.card()}>
          <div style={{ padding: "18px 14px", textAlign: "center", borderBottom: `0.5px solid ${BORDER}` }}>
            <div style={{ fontSize: 36, fontWeight: 800, color: D }}>{credits}</div>
            <div style={{ fontSize: 12, color: "#888", marginTop: 2 }}>credits</div>
            <div style={{ height: 8, background: GREY, borderRadius: 4, margin: "14px 10px 6px" }}><div style={{ width: `${Math.min(100, (credits / 250) * 100)}%`, height: 8, background: GOLD, borderRadius: 4, transition: "width .3s" }} /></div>
            <div style={{ fontSize: 11, color: credits >= 250 ? G.fg : "#888", fontWeight: credits >= 250 ? 700 : 400 }}>{credits >= 250 ? "🎉 15% off your next booking — applied automatically at checkout" : `${250 - credits} credits to your 15% discount`}</div>
          </div>
          <div style={{ padding: "12px 14px" }}>
            {[["📩", "Invite a friend who joins Recki", "+25 credits"], ["🎫", "Complete & pay for a session", "+5 credits"], ["🎯", "Reach 250 credits", "15% off next booking"]].map(([ico, t, v]) =>
              <div key={t} style={{ display: "flex", alignItems: "center", gap: 10, padding: "7px 0" }}>
                <span style={{ fontSize: 17 }}>{ico}</span>
                <span style={{ flex: 1, fontSize: 12.5, color: D }}>{t}</span>
                <span style={{ fontSize: 11, fontWeight: 700, color: M }}>{v}</span>
              </div>)}
          </div>
        </div>
        <div style={{ margin: "0 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Invite friends</div>
        <div style={{ ...css.card(), padding: "12px 14px" }}>
          <div style={{ fontSize: 12, color: "#666", lineHeight: 1.5, marginBottom: 10 }}>You only get the <strong>+25 credits once your friend creates an account</strong> and finishes signup — not just when the invite is sent.</div>
          <button style={{ ...css.pbtn(), width: "100%", margin: "0 0 8px" }} onClick={() => { setPendingInvites(p => [...p, { name: "New invite · pending signup", status: "pending" }]); showToast("📩 Invite sent — you'll earn 25 credits when they join"); }}>📩 Send an invite</button>
          {pendingInvites.length > 0 && <>
            <div style={{ fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5, margin: "6px 0 4px" }}>Pending</div>
            {pendingInvites.map((p, i) =>
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 8, padding: "7px 0", borderBottom: i < pendingInvites.length - 1 ? `0.5px solid #f5f5f5` : "none" }}>
                <span style={{ fontSize: 14 }}>⏳</span>
                <span style={{ flex: 1, fontSize: 12, color: "#666" }}>{p.name}</span>
                <button onClick={() => { setPendingInvites(ps => ps.filter((_, j) => j !== i)); setCredits(c => { const n = c + 25; if (n >= 250 && c < 250) setTimeout(() => showToast("🎉 250 reached — 15% off unlocked!"), 100); return n; }); showToast("✅ Friend joined · +25 credits added"); }} style={css.gbtn({ color: G.fg, background: G.bg, fontSize: 10, padding: "5px 9px" })}>Simulate join</button>
              </div>)}
            <div style={{ fontSize: 10, color: "#aaa", marginTop: 4 }}>“Simulate join” is just for this demo — in the real app credits land automatically when they sign up.</div>
          </>}
        </div>
        <div style={{ margin: "0 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Redeem your credits</div>
        <div style={css.card()}>
          {[["🎯", "15% off your next booking", 250, "Applied automatically at checkout"], ["🎁", "Gift 100 credits to a friend", 100, "Send credits to another member"]].map(([ico, t, cost, sub]) => {
            const ok = credits >= cost;
            return <div key={t} style={{ display: "flex", alignItems: "center", gap: 11, padding: "12px 14px", borderBottom: `0.5px solid #f5f5f5` }}>
              <span style={{ fontSize: 18 }}>{ico}</span>
              <div style={{ flex: 1 }}><div style={{ fontSize: 12.5, fontWeight: 600, color: D }}>{t}</div><div style={{ fontSize: 10.5, color: "#888" }}>{sub} · {cost} credits</div></div>
              <button disabled={!ok} onClick={() => { setCredits(c => c - cost); showToast(`✅ Redeemed: ${t}`); }} style={{ ...css.gbtn({ color: ok ? D : "#bbb" }), opacity: ok ? 1 : .5, whiteSpace: "nowrap" }}>{ok ? "Redeem" : `Need ${cost}`}</button>
            </div>;
          })}
        </div>
        <div style={{ background: L, borderRadius: 12, margin: "0 16px 10px", padding: "10px 13px", fontSize: 12, color: M, lineHeight: 1.5 }}>Credits are deducted when you redeem. The 15% booking discount also applies automatically once you pass 250.</div>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    premium: <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={{ background: `linear-gradient(135deg, ${D}, ${DEEP})`, padding: "20px 20px 24px", textAlign: "center" }}>
        <div style={{ textAlign: "left" }}><BackBtn onClick={goBack} /></div>
        <div style={{ fontSize: 34, marginBottom: 6 }}>💎</div>
        <div style={{ fontSize: 21, fontWeight: 800, color: "#fff", marginBottom: 4 }}>Recki Premium</div>
        <div style={{ fontSize: 13, color: "rgba(255,255,255,.6)" }}>{isPrem ? `You're on ${premPlanName}` : "Start with 3 days free"}</div>
      </div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 14 }}>
        {!isPrem && <div style={{ margin: "0 16px 12px", background: "#FFF7E8", border: `1.5px solid ${GOLD}`, borderRadius: 14, padding: "12px 14px", display: "flex", alignItems: "center", gap: 11 }}>
          <span style={{ fontSize: 24 }}>🎁</span>
          <div style={{ flex: 1 }}><div style={{ fontSize: 13.5, fontWeight: 700, color: "#8A5A0B" }}>3 days free</div><div style={{ fontSize: 11, color: "#8A5A0B", lineHeight: 1.4 }}>Try everything free for 3 days. Cancel before it ends and you won't be charged.</div></div>
        </div>}
        <div style={{ display: "flex", gap: 10, padding: "0 16px 12px" }}>
          {[["monthly", "Monthly", "€9.99", "/mo", "Billed monthly · cancel anytime", false], ["annual", "Yearly", "€104.99", "/yr", "Save ~€15 — about 1.5 months free", true]].map(([k, name, price, per, sub, best]) =>
            <div key={k} onClick={() => setPlanChoice(k)} style={{ flex: 1, borderRadius: 16, border: `2px solid ${planChoice === k ? D : BORDER}`, background: planChoice === k ? L : "#fff", padding: 14, cursor: "pointer", position: "relative" }}>
              {best && <span style={{ position: "absolute", top: -9, right: 10, fontSize: 9, fontWeight: 700, color: "#fff", background: GOLD, padding: "2px 8px", borderRadius: 8 }}>BEST VALUE</span>}
              <div style={{ fontSize: 13, fontWeight: 700, color: D }}>{name}</div>
              <div style={{ marginTop: 4 }}><span style={{ fontSize: 22, fontWeight: 800, color: D }}>{price}</span><span style={{ fontSize: 12, color: "#888" }}>{per}</span></div>
              <div style={{ fontSize: 10.5, color: "#888", marginTop: 4, lineHeight: 1.4 }}>{sub}</div>
              <div style={{ marginTop: 8, width: 18, height: 18, borderRadius: "50%", border: `2px solid ${planChoice === k ? D : "#ccc"}`, background: planChoice === k ? D : "#fff", display: "flex", alignItems: "center", justifyContent: "center" }}>{planChoice === k && <span style={{ color: "#fff", fontSize: 11 }}>✓</span>}</div>
            </div>)}
        </div>
        <div style={{ margin: "0 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>What's included</div>
        <div style={{ ...css.card({ margin: "0 16px 12px" }), overflow: "hidden" }}>
          <div style={{ display: "flex", padding: "9px 12px", borderBottom: `1px solid ${BORDER}`, background: GREY }}>
            <div style={{ flex: 1, fontSize: 11, fontWeight: 700, color: "#888" }}>Feature</div>
            <div style={{ width: 48, textAlign: "center", fontSize: 11, fontWeight: 700, color: "#888" }}>Free</div>
            <div style={{ width: 60, textAlign: "center", fontSize: 11, fontWeight: 700, color: D }}>Premium</div>
          </div>
          {[["Book rooms & studios", true, true], ["3.5% booking fee", "3.5%", "waived"], ["Book beyond 10 days", false, true], ["Find & message musicians", true, true], ["Find a band to join", false, true], ["List as sessionist / writer", false, true], ["Hire sessionists & writers", false, true], ["Priority support", false, true]].map(([feat, f, pr], i, arr) =>
            <div key={feat} style={{ display: "flex", alignItems: "center", padding: "9px 12px", borderBottom: i < arr.length - 1 ? `0.5px solid #f5f5f5` : "none" }}>
              <div style={{ flex: 1, fontSize: 11.5, color: D }}>{feat}</div>
              {[f, pr].map((v, j) => <div key={j} style={{ width: j === 1 ? 60 : 48, textAlign: "center", fontSize: 11.5, fontWeight: v === "waived" ? 700 : 400, color: v === true ? G.fg : v === false ? "#ccc" : v === "waived" ? G.fg : "#888" }}>{v === true ? "✓" : v === false ? "—" : v}</div>)}
            </div>)}
        </div>
        {isPrem
          ? <button style={css.sbtn({ color: R.fg, borderColor: R.bg })} onClick={() => go("cancel-sub")}>Cancel subscription</button>
          : <button style={css.pbtn()} onClick={() => { setIsPrem(true); setPremPlanName(planChoice === "annual" ? "Premium (yearly)" : "Premium (monthly)"); goBack(); showToast("🎉 Your 3-day free trial has started!"); }}>Start 3-day free trial →</button>}
        <div style={{ textAlign: "center", fontSize: 11, color: "#888", padding: "4px 16px 10px" }}>{isPrem ? "Renews automatically · manage in Payment methods." : `Free for 3 days, then ${planChoice === "annual" ? "€104.99/year" : "€9.99/month"}. Cancel anytime.`}</div>
        <div style={{ height: 8 }} />
      </div>
    </div>,

    "cancel-sub": <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Cancel subscription</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>We're sorry to see you go</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={{ background: A.bg, borderRadius: 12, margin: "0 16px 12px", padding: "11px 13px", fontSize: 11.5, color: A.fg, lineHeight: 1.5 }}>Your Premium stays active until <strong>June 2027</strong>. After that you'll lose fee-free booking and the band/sessionist tools.</div>
        <div style={{ margin: "0 16px 8px", fontSize: 13, fontWeight: 600, color: D }}>Why are you cancelling? <span style={{ fontSize: 11, fontWeight: 400, color: "#888" }}>· helps us improve</span></div>
        <div style={css.card()}>
          {["Too expensive", "Not using it enough", "Missing features", "Found an alternative", "Just taking a break", "Other"].map((r, i, arr) =>
            <div key={r} onClick={() => setCancelReason(r)} style={{ display: "flex", alignItems: "center", gap: 11, padding: "12px 14px", borderBottom: i < arr.length - 1 ? `0.5px solid #f5f5f5` : "none", cursor: "pointer" }}>
              <div style={{ width: 20, height: 20, borderRadius: "50%", border: `2px solid ${cancelReason === r ? D : "#ccc"}`, background: cancelReason === r ? D : "#fff", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>{cancelReason === r && <span style={{ color: "#fff", fontSize: 11 }}>✓</span>}</div>
              <span style={{ fontSize: 13, color: D }}>{r}</span>
            </div>)}
        </div>
        <div style={{ margin: "8px 16px 10px" }}><textarea placeholder="Anything else you'd like us to know? (optional)" style={{ ...css.input, resize: "none", height: 70 }} /></div>
        <button style={css.sbtn({ color: R.fg, borderColor: R.bg })} onClick={() => { if (!cancelReason) { showToast("Pick a reason so we can improve"); return; } setCancelStats(cs => ({ ...cs, [cancelReason]: (cs[cancelReason] || 0) + 1 })); setIsPrem(false); setCancelReason(null); showToast("Subscription cancelled · active until June 2027"); go("profile"); }}>Confirm cancellation</button>
        <button style={css.pbtn()} onClick={() => { setCancelReason(null); goBack(); }}>Keep my Premium</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "payment-methods": <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Payment methods</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Cards & subscription · all payments in-app</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={{ margin: "0 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Your cards</div>
        <div style={css.card()}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 14px", borderBottom: `0.5px solid #f5f5f5` }}>
            <span style={{ fontSize: 22 }}>💳</span>
            <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>Visa ···· 4242</div><div style={{ fontSize: 11, color: "#888" }}>Expires 08/27 · default</div></div>
            <span style={css.pill(G)}>Default</span>
          </div>
          <div onClick={() => showToast("💳 Add a card — opens secure form")} style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 14px", cursor: "pointer" }}>
            <span style={{ fontSize: 20 }}>＋</span><div style={{ fontSize: 13, fontWeight: 600, color: M }}>Add a payment method</div>
          </div>
        </div>
        <button style={css.sbtn()} onClick={() => showToast("💳 Update card — opens secure form")}>Change default card</button>
        <div style={{ margin: "10px 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Subscription</div>
        <div style={css.card()}>
          <div style={{ padding: "12px 14px", display: "flex", alignItems: "center", gap: 11 }}>
            <span style={{ fontSize: 20 }}>💎</span>
            <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>{isPrem ? premPlanName : "No active plan"}</div><div style={{ fontSize: 11, color: "#888" }}>{isPrem ? "Renews June 2027 · Visa ···· 4242" : "You're on the free plan"}</div></div>
            {isPrem && <span style={css.pill({ bg: L, fg: D })}>Active</span>}
          </div>
        </div>
        {isPrem
          ? <><button style={css.sbtn()} onClick={() => go("premium")}>Change plan</button>
            <button style={css.sbtn({ color: R.fg, borderColor: R.bg })} onClick={() => go("cancel-sub")}>Cancel subscription</button></>
          : <button style={css.pbtn()} onClick={() => go("premium")}>See plans</button>}
        <div style={{ textAlign: "center", fontSize: 11, color: "#999", padding: "8px 16px 0", lineHeight: 1.5 }}>🔒 Payments are processed securely in-app. Recki never stores your full card number.</div>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "offer-to-play": <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Offer to play</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{inquiryWith ? `for ${inquiryWith.name}` : ""}</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        {inquiryWith && <div style={{ ...css.card({ margin: "0 16px 12px" }), padding: 12, display: "flex", alignItems: "center", gap: 11 }}>
          <div style={{ ...css.av(inquiryWith.bg, 44), borderRadius: 12 }}>🎵</div>
          <div style={{ flex: 1 }}><div style={{ fontSize: 13.5, fontWeight: 700, color: D }}>{inquiryWith.name}</div><div style={{ fontSize: 11.5, color: "#888" }}>{inquiryWith.genre} · {inquiryWith.area} · needs {inquiryWith.need}</div></div>
          <span style={css.pill(G)}>€{inquiryWith.pay}</span>
        </div>}
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>What you'd play</label><input value={offerForm.role} onChange={e => setOfferForm(f => ({ ...f, role: e.target.value }))} placeholder="e.g. Bass for the gig" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Your rate <span style={{ color: "#bbb", fontWeight: 400 }}>· optional</span></label><input value={offerForm.rate} onChange={e => setOfferForm(f => ({ ...f, rate: e.target.value }))} placeholder={inquiryWith ? `they offer €${inquiryWith.pay}` : "e.g. €120/gig"} style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Message</label><textarea value={offerForm.note} onChange={e => setOfferForm(f => ({ ...f, note: e.target.value }))} placeholder="A bit about you, your experience, links to your playing." rows={4} style={{ ...css.input, resize: "none", lineHeight: 1.4 }} /></div>
        <div style={{ background: G.bg, borderRadius: 12, margin: "0 16px 10px", padding: "10px 13px", fontSize: 11.5, color: G.fg, lineHeight: 1.5 }}>🎸 This goes to {inquiryWith && inquiryWith.by ? inquiryWith.by.split(" ")[0] : "the band"}, the band's admin — agree the details together in chat.</div>
        <button style={css.pbtn()} onClick={() => { if (!inquiryWith) { goBack(); return; } if (!offerForm.role.trim()) { showToast("Add what you'd play"); return; } const k = inquiryWith.init; const msg = `🎸 Offer to play ${offerForm.role.trim()} for ${inquiryWith.name} (${inquiryWith.need})${offerForm.rate.trim() ? ` · my rate ${offerForm.rate.trim()}` : ""}.${offerForm.note.trim() ? ` ${offerForm.note.trim()}` : ""}`; setChats(c => ({ ...c, [k]: [...(c[k] || []), { me: true, t: msg }] })); setChatTimes(t => ({ ...t, [k]: "now" })); setOfferedBands(o => [...o, inquiryWith.id]); pushNotif({ icon: "🎸", title: `${inquiryWith.name} · new offer to play`, body: `Marco offered to play ${inquiryWith.need}. Tap to reply.`, dest: "chats" }); showToast(`📨 Sent to ${inquiryWith.by ? inquiryWith.by.split(" ")[0] : "the band"} (admin) — they'll be notified`); setChatWith(k); go("chat"); }}>Send offer</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "casting-request": <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Ask for a casting</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{inquiryWith ? `with ${inquiryWith.name}` : ""}</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        {inquiryWith && <div style={{ ...css.card({ margin: "0 16px 12px" }), padding: 12, display: "flex", alignItems: "center", gap: 11 }}>
          <div style={{ ...css.av(inquiryWith.bg, 44), borderRadius: 12 }}>🎵</div>
          <div style={{ flex: 1 }}><div style={{ fontSize: 13.5, fontWeight: 700, color: D }}>{inquiryWith.name}</div><div style={{ fontSize: 11.5, color: "#888" }}>{inquiryWith.genre} · {inquiryWith.area}</div></div>
          <span style={css.pill(A)}>needs {inquiryWith.need}</span>
        </div>}
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>What you'd play</label><input value={castingForm.role} onChange={e => setCastingForm(f => ({ ...f, role: e.target.value }))} placeholder="e.g. Bass — I can cover your set" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>When you're free to try <span style={{ color: "#bbb", fontWeight: 400 }}>· optional</span></label><input value={castingForm.when} onChange={e => setCastingForm(f => ({ ...f, when: e.target.value }))} placeholder="e.g. Weekday evenings, this Sat" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Message</label><textarea value={castingForm.note} onChange={e => setCastingForm(f => ({ ...f, note: e.target.value }))} placeholder="A bit about you, your experience, links to your playing." rows={4} style={{ ...css.input, resize: "none", lineHeight: 1.4 }} /></div>
        <div style={{ background: A.bg, borderRadius: 12, margin: "0 16px 10px", padding: "10px 13px", fontSize: 11.5, color: A.fg, lineHeight: 1.5 }}>🎤 A casting is a trial — this message goes to {inquiryWith && inquiryWith.by ? inquiryWith.by.split(" ")[0] : "the band"}, and you sort a rehearsal to play together in chat.</div>
        <button style={css.pbtn()} onClick={() => { if (!inquiryWith) { goBack(); return; } if (!castingForm.role.trim()) { showToast("Add what you'd play"); return; } const k = inquiryWith.init; const msg = `🎤 Casting request for ${inquiryWith.name} (${inquiryWith.need}): I'd play ${castingForm.role.trim()}${castingForm.when.trim() ? ` · free ${castingForm.when.trim()}` : ""}.${castingForm.note.trim() ? ` ${castingForm.note.trim()}` : ""}`; setChats(c => ({ ...c, [k]: [...(c[k] || []), { me: true, t: msg }] })); setChatTimes(t => ({ ...t, [k]: "now" })); pushNotif({ icon: "🎤", title: `${inquiryWith.name} · casting request`, body: `Marco asked for a casting (${inquiryWith.need}). Tap to reply.`, dest: "chats" }); showToast(`📨 Sent to ${inquiryWith.by ? inquiryWith.by.split(" ")[0] : "the band"} — they'll be notified`); setChatWith(k); go("chat"); }}>Send casting request</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "book-sessionist": <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Book a session</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{inquiryWith ? `with ${inquiryWith.name}` : ""}</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        {inquiryWith && <div style={{ ...css.card({ margin: "0 16px 12px" }), padding: 12, display: "flex", alignItems: "center", gap: 11 }}>
          <div style={css.av(inquiryWith.bg, 44)}>{inquiryWith.init}</div>
          <div style={{ flex: 1 }}><div style={{ fontSize: 13.5, fontWeight: 600, color: D }}>{inquiryWith.name}</div><div style={{ fontSize: 11.5, color: A.fg, fontWeight: 600 }}>{inquiryWith.instr} · {inquiryWith.area}</div></div>
          <span style={css.pill(A)}>€{inquiryWith.rate}/session</span>
        </div>}
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>What do you need them to play?</label><input value={bookForm.role} onChange={e => setBookForm(f => ({ ...f, role: e.target.value }))} placeholder="e.g. Session drums on 2 tracks" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>When</label><input value={bookForm.when} onChange={e => setBookForm(f => ({ ...f, when: e.target.value }))} placeholder="e.g. Sat 21 Jun, afternoon" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Your budget <span style={{ color: "#bbb", fontWeight: 400 }}>· per session</span></label><div style={{ display: "flex", alignItems: "center", background: "#fff", border: `1px solid ${BORDER}`, borderRadius: 10, padding: "0 12px" }}><span style={{ color: "#888" }}>€</span><input value={bookForm.budget} onChange={e => setBookForm(f => ({ ...f, budget: e.target.value.replace(/[^0-9]/g, "") }))} inputMode="numeric" placeholder="45" style={{ border: "none", outline: "none", padding: "11px 6px", width: "100%", fontSize: 14, color: D }} /></div></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Message <span style={{ color: "#bbb", fontWeight: 400 }}>· optional</span></label><textarea value={bookForm.note} onChange={e => setBookForm(f => ({ ...f, note: e.target.value }))} placeholder="Style, references, where to record, anything else." rows={3} style={{ ...css.input, resize: "none", lineHeight: 1.4 }} /></div>
        <div style={{ background: A.bg, borderRadius: 12, margin: "0 16px 10px", padding: "10px 13px", fontSize: 11.5, color: A.fg, lineHeight: 1.5 }}>🎷 This goes to {inquiryWith ? inquiryWith.name.split(" ")[0] : "the player"} as a message — you'll agree the final fee together in chat. Nothing is charged now.</div>
        <button style={css.pbtn()} onClick={() => { try { if (!inquiryWith) { goBack(); return; } if (!bookForm.role.trim()) { showToast("Add what you need them to play"); return; } const k = inquiryWith.init || idFromName(inquiryWith.name || ""); const msg = `🎷 Session request: ${bookForm.role.trim()}${bookForm.when.trim() ? ` · ${bookForm.when.trim()}` : ""}${bookForm.budget ? ` · budget €${bookForm.budget}` : ""}.${bookForm.note.trim() ? ` ${bookForm.note.trim()}` : ""}`; setChats(c => ({ ...c, [k]: [...(c[k] || []), { me: true, t: msg }] })); setChatTimes(t => ({ ...t, [k]: "now" })); pushNotif({ icon: "🎷", title: `Session request from Marco`, body: `${bookForm.role.trim()} — tap to reply.`, dest: "chats" }); showToast(`📨 Sent to ${inquiryWith.name} — they'll be notified`); setChatWith(k); go("chat"); } catch (err) { showToast("Couldn't send — please try again"); } }}>Send booking request</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "send-brief": <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Send a brief</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{inquiryWith ? `to ${inquiryWith.name}` : ""}</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        {inquiryWith && <div style={{ ...css.card({ margin: "0 16px 12px" }), padding: 12, display: "flex", alignItems: "center", gap: 11 }}>
          <div style={css.av(inquiryWith.bg, 44)}>{inquiryWith.init}</div>
          <div style={{ flex: 1 }}><div style={{ fontSize: 13.5, fontWeight: 600, color: D }}>{inquiryWith.name}</div><div style={{ fontSize: 11.5, color: "#137E88", fontWeight: 600 }}>{inquiryWith.kind} · {inquiryWith.area}</div></div>
          <span style={css.pill({ bg: "#E2F5F6", fg: "#137E88" })}>from €{inquiryWith.rate}</span>
        </div>}
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>What do you need written?</label><input value={briefForm.type} onChange={e => setBriefForm(f => ({ ...f, type: e.target.value }))} placeholder="e.g. Lyrics + topline for a pop track" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Deadline <span style={{ color: "#bbb", fontWeight: 400 }}>· optional</span></label><input value={briefForm.deadline} onChange={e => setBriefForm(f => ({ ...f, deadline: e.target.value }))} placeholder="e.g. In 2 weeks" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Your budget</label><div style={{ display: "flex", alignItems: "center", background: "#fff", border: `1px solid ${BORDER}`, borderRadius: 10, padding: "0 12px" }}><span style={{ color: "#888" }}>€</span><input value={briefForm.budget} onChange={e => setBriefForm(f => ({ ...f, budget: e.target.value.replace(/[^0-9]/g, "") }))} inputMode="numeric" placeholder="80" style={{ border: "none", outline: "none", padding: "11px 6px", width: "100%", fontSize: 14, color: D }} /></div></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>The brief</label><textarea value={briefForm.note} onChange={e => setBriefForm(f => ({ ...f, note: e.target.value }))} placeholder="Theme, mood, references, credited or fully ghost, who owns the rights." rows={4} style={{ ...css.input, resize: "none", lineHeight: 1.4 }} /></div>
        <div style={{ background: "#E2F5F6", borderRadius: 12, margin: "0 16px 10px", padding: "10px 13px", fontSize: 11.5, color: "#137E88", lineHeight: 1.5 }}>✍️ Sent to {inquiryWith ? inquiryWith.name.split(" ")[0] : "the writer"} as a message — agree credit, rights & fee together in chat.</div>
        <button style={css.pbtn()} onClick={() => { if (!inquiryWith) { goBack(); return; } if (!briefForm.type.trim()) { showToast("Add what you need written"); return; } const k = inquiryWith.init; const msg = `✍️ Writing brief: ${briefForm.type.trim()}${briefForm.deadline.trim() ? ` · by ${briefForm.deadline.trim()}` : ""}${briefForm.budget ? ` · budget €${briefForm.budget}` : ""}.${briefForm.note.trim() ? ` ${briefForm.note.trim()}` : ""}`; setChats(c => ({ ...c, [k]: [...(c[k] || []), { me: true, t: msg }] })); setChatTimes(t => ({ ...t, [k]: "now" })); pushNotif({ icon: "✍️", title: `New brief from Marco`, body: `${briefForm.type.trim()} — tap to reply.`, dest: "chats" }); showToast(`📨 Brief sent to ${inquiryWith.name} — they'll be notified`); setChatWith(k); go("chat"); }}>Send brief</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "ses-gig-post": <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Hire a sessionist</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Post the gig or studio day you need a player for</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={{ margin: "0 16px 6px" }}><label style={css.label}>This is for a…</label></div>
        <div style={{ display: "flex", gap: 8, padding: "0 16px 12px" }}>
          {[["gig", "🎤 A gig"], ["studio", "🎚 A studio day"]].map(([k, l]) => <button key={k} onClick={() => setSesGigForm(f => ({ ...f, kind: k }))} style={{ ...css.fc(sesGigForm.kind === k), flex: 1, padding: "10px 0" }}>{l}</button>)}
        </div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Band / act name</label><input value={sesGigForm.name} onChange={e => setSesGigForm(f => ({ ...f, name: e.target.value }))} placeholder="e.g. Neon Tides" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Genre / style</label><input value={sesGigForm.genre} onChange={e => setSesGigForm(f => ({ ...f, genre: e.target.value }))} placeholder="e.g. Synth-pop" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Who you need</label><input value={sesGigForm.need} onChange={e => setSesGigForm(f => ({ ...f, need: e.target.value }))} placeholder={sesGigForm.kind === "gig" ? "e.g. Session bassist · 1 gig" : "e.g. Session keys · studio day"} style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Where / area</label><input value={sesGigForm.area} onChange={e => setSesGigForm(f => ({ ...f, area: e.target.value }))} placeholder="Vienna · Neubau" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Pay <span style={{ color: "#bbb", fontWeight: 400 }}>· what you offer</span></label><div style={{ display: "flex", alignItems: "center", background: "#fff", border: `1px solid ${BORDER}`, borderRadius: 10, padding: "0 12px" }}><span style={{ color: "#888" }}>€</span><input value={sesGigForm.pay} onChange={e => setSesGigForm(f => ({ ...f, pay: e.target.value.replace(/[^0-9/a-z]/gi, "") }))} placeholder={sesGigForm.kind === "gig" ? "120/gig" : "200/day"} style={{ border: "none", outline: "none", padding: "11px 6px", width: "100%", fontSize: 14, color: D }} /></div></div>
        <div style={{ background: L, borderRadius: 12, margin: "0 16px 10px", padding: "10px 13px", fontSize: 11.5, color: M, lineHeight: 1.5 }}>💡 Shown on the “Bands hiring” board. Players can offer to play and message you — you agree the fee directly.</div>
        <button style={css.pbtn()} onClick={() => { if (!sesGigForm.name.trim() || !sesGigForm.need.trim()) { showToast("Add a name and who you need"); return; } setSessionBands(b => [{ id: "sb" + Date.now(), name: sesGigForm.name.trim(), genre: sesGigForm.genre.trim() || "Any style", need: sesGigForm.need.trim(), area: sesGigForm.area.trim() || "Vienna", pay: sesGigForm.pay.trim() || "negotiable", by: "You (Marco)", init: "MR", bg: D }, ...b]); showToast("📢 Posted to the Bands hiring board!"); setHubTab("find"); setHubCat("hiring"); go("hire-hub"); }}>Post to the board</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "invite-detail": <div style={{ flex: 1, background: GREY, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Band invite</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{inviteSel ? inviteSel.band : ""}</p></div>
      {!inviteSel ? <div style={{ flex: 1 }} /> : <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={{ background: `linear-gradient(135deg, ${D}, ${DEEP})`, borderRadius: 16, margin: "0 16px 12px", padding: 16, color: "#fff" }}>
          <div style={{ fontSize: 18, fontWeight: 800 }}>{inviteSel.band}</div>
          <div style={{ fontSize: 12.5, marginTop: 3, opacity: .9 }}>{inviteSel.genre}{inviteSel.area ? ` · ${inviteSel.area}` : ""}</div>
          <span style={{ display: "inline-block", marginTop: 8, fontSize: 11, background: "rgba(255,255,255,.2)", padding: "3px 10px", borderRadius: 12 }}>Invited as {inviteSel.role}</span>
        </div>
        <div style={css.card()}>
          <ConfirmItem icon="🎤" title={`${inviteSel.from} invited you`} sub="Tap to view their profile" onClick={() => openProfile(inviteSel.fromInit || inviteSel.from)} />
        </div>
        {inviteSel.msg && <div style={{ ...css.card(), padding: "12px 14px", display: "flex", gap: 10 }}><span style={{ fontSize: 16 }}>💬</span><div><div style={{ fontSize: 11, fontWeight: 700, color: "#888", marginBottom: 2 }}>Message from {inviteSel.from.split(" ")[0]}</div><div style={{ fontSize: 12.5, color: D, lineHeight: 1.5 }}>{inviteSel.msg}</div></div></div>}
        <div style={{ margin: "2px 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Current members · {inviteSel.members ? inviteSel.members.length : 0}</div>
        <div style={css.card()}>
          {(inviteSel.members || []).map((m, i, arr) =>
            <div key={i} onClick={() => openProfile(m.init)} style={{ display: "flex", alignItems: "center", gap: 11, padding: "11px 14px", borderBottom: i < arr.length - 1 ? `0.5px solid #f5f5f5` : "none", cursor: "pointer" }}>
              <div style={{ ...css.av(M, 36), fontSize: 12 }}>{m.init}</div>
              <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>{m.name}</div><div style={{ fontSize: 11, color: "#888" }}>{m.role}</div></div>
              <span style={{ color: "#ccc" }}>›</span>
            </div>)}
        </div>
        <button style={css.sbtn()} onClick={() => { setChatWith(inviteSel.fromInit || idFromName(inviteSel.from)); if (!chats[inviteSel.fromInit || idFromName(inviteSel.from)]) setChats(c => ({ ...c, [inviteSel.fromInit || idFromName(inviteSel.from)]: [] })); go("chat"); }}>💬 Message {inviteSel.from.split(" ")[0]} before deciding</button>
        <button style={css.pbtn()} onClick={() => { const b = inviteSel.band; acceptInvite(inviteSel); showToast(`✅ You joined ${b} · group chat created`); go("my-bands"); }}>Accept & join</button>
        <button style={css.sbtn({ color: A.fg, borderColor: A.bg })} onClick={() => { setCastings(cs => [{ id: "c" + Date.now(), band: inviteSel.band, role: inviteSel.role, with: inviteSel.from, init: inviteSel.fromInit, when: "To be scheduled" }, ...cs]); setBandInvitesIn(r => r.filter(x => x.id !== inviteSel.id)); showToast("🎫 Casting requested — book a rehearsal to try together first"); go("my-bands"); }}>🎫 Ask for a casting first</button>
        <div style={{ margin: "0 16px 8px", fontSize: 10.5, color: "#999", textAlign: "center", lineHeight: 1.5 }}>A casting is a trial rehearsal — you play together once, then the band decides. No commitment until then.</div>
        <button style={css.sbtn({ color: R.fg, borderColor: R.bg })} onClick={() => { setBandInvitesIn(r => r.filter(x => x.id !== inviteSel.id)); showToast("Invite declined"); go("my-bands"); }}>Decline</button>
        <div style={{ height: 14 }} />
      </div>}
    </div>,

    "band-chat": (() => {
      const b = bands.find(x => x.id === bandChatId);
      return <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
        <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 18, fontWeight: 700 }}>{b ? b.name : "Band"} · group chat</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{b ? `${b.members.length} members` : ""}</p></div>
        {!b ? <div style={{ flex: 1 }} /> : <>
        <div style={{ flex: 1, overflowY: "auto", padding: "12px 14px", display: "flex", flexDirection: "column", gap: 8 }}>
          <div style={{ textAlign: "center", fontSize: 10.5, color: "#aaa", marginBottom: 4 }}>🔒 Group chat for {b.name} — created when the band was formed</div>
          {b.chat.length === 0 ? <div style={{ textAlign: "center", color: "#bbb", fontSize: 12.5, marginTop: 20 }}>No messages yet — say hi to the band 👋</div> :
            b.chat.map((c, i) => { const me = c.who === "You" || c.who === "Marco Rossi"; return <div key={i} style={{ alignSelf: me ? "flex-end" : "flex-start", maxWidth: "78%" }}>
              {!me && <div style={{ fontSize: 10, fontWeight: 700, color: M, marginBottom: 2, marginLeft: 4 }}>{c.who}</div>}
              <div style={{ background: me ? D : GREY, color: me ? "#fff" : D, padding: "9px 13px", borderRadius: 14, fontSize: 13, lineHeight: 1.4 }}>{c.t}</div>
            </div>; })}
        </div>
        <div style={{ display: "flex", gap: 8, padding: "10px 14px", borderTop: `0.5px solid ${BORDER}` }}>
          <input value={bandChatInput} onChange={e => setBandChatInput(e.target.value)} onKeyDown={e => { if (e.key === "Enter" && bandChatInput.trim()) { const t = bandChatInput.trim(); setBands(bs => bs.map(x => x.id === bandChatId ? { ...x, chat: [...x.chat, { who: "You", t }] } : x)); if (notif.messages) pushNotif({ icon: "👥", title: `${b.name} · group chat`, body: `Marco: ${t}`, dest: "chats" }); setBandChatInput(""); } }} placeholder="Message the band…" style={{ ...css.input, flex: 1 }} />
          <button onClick={() => { if (!bandChatInput.trim()) return; const t = bandChatInput.trim(); setBands(bs => bs.map(x => x.id === bandChatId ? { ...x, chat: [...x.chat, { who: "You", t }] } : x)); if (notif.messages) pushNotif({ icon: "👥", title: `${b.name} · group chat`, body: `Marco: ${t}`, dest: "chats" }); setBandChatInput(""); }} style={{ width: 42, height: 42, borderRadius: 12, background: D, color: "#fff", border: "none", fontSize: 16, cursor: "pointer", flexShrink: 0 }}>➤</button>
        </div>
        </>}
      </div>;
    })(),

    "post-spot": <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Post an open spot</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Advertise a vacancy in one of your bands</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={{ background: L, borderRadius: 12, margin: "0 16px 12px", padding: "11px 13px", fontSize: 11.5, color: M, lineHeight: 1.5 }}>👥 This appears on the “Bands recruiting” board so musicians looking to join can find you and ask.</div>
        <div style={{ margin: "0 16px 6px" }}><label style={css.label}>Which band?</label></div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 7, padding: "0 16px 12px" }}>
          {bands.map(b => <button key={b.id} onClick={() => setSpotForm(f => ({ ...f, bandId: b.id }))} style={css.chip(spotForm.bandId === b.id, D)}>{b.name}</button>)}
        </div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Role you need</label><input value={spotForm.need} onChange={e => setSpotForm(f => ({ ...f, need: e.target.value }))} placeholder="e.g. Bassist, backing vocals" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>About the spot</label><textarea value={spotForm.note} onChange={e => setSpotForm(f => ({ ...f, note: e.target.value }))} placeholder="Rehearsal schedule, gigs coming up, the vibe you're after…" style={{ ...css.input, resize: "none", height: 90 }} /></div>
        <div onClick={() => setSpotForm(f => ({ ...f, paid: !f.paid }))} style={{ ...css.card({ margin: "0 16px 12px" }), padding: "11px 14px", display: "flex", alignItems: "center", gap: 11, cursor: "pointer" }}>
          <span style={{ fontSize: 18 }}>💶</span>
          <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>This is a paid session role</div><div style={{ fontSize: 11, color: "#888" }}>Also lists it under “Bands hiring” for sessionists</div></div>
          <div style={{ width: 42, height: 25, borderRadius: 13, background: spotForm.paid ? GOLD : "#ccc", position: "relative", flexShrink: 0 }}><div style={{ width: 21, height: 21, borderRadius: "50%", background: "#fff", position: "absolute", top: 2, left: spotForm.paid ? 19 : 2, transition: "left .15s" }} /></div>
        </div>
        <button style={css.pbtn()} onClick={() => { if (!spotForm.need.trim()) { showToast("Add the role you need"); return; } const b = bands.find(x => x.id === spotForm.bandId) || bands[0]; const entry = { id: "ob" + Date.now(), name: b.name, genre: b.genre, need: spotForm.need.trim(), area: city, note: spotForm.note.trim() || "Get in touch to find out more.", by: "You (Marco)", init: "MR", bg: M }; setOpenBands(o => [entry, ...o]); showToast("📣 Posted to the recruiting board!"); setHubTab("find"); setHubCat("bands"); go("hire-hub"); }}>Post open spot</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "my-bands": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>My bands</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{bands.length} bands</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        {bands.map(b =>
          <div key={b.id} onClick={() => { setActiveBand(b.id); go("band"); }} style={{ ...css.card(), padding: 14, cursor: "pointer" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <div style={lt(b.id === 1 ? "" : "p", 48)}>🎵</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 600, color: D }}>{b.name}</div>
                <div style={{ fontSize: 11, color: "#888", marginTop: 2 }}>{b.genre} · {b.members.length} members</div>
              </div>
              <span style={{ color: "#ccc", fontSize: 18 }}>›</span>
            </div>
            <div style={{ display: "flex", gap: 5, marginTop: 10 }}>
              {b.members.map(m => <div key={m.init} style={{ width: 28, height: 28, borderRadius: "50%", background: m.admin ? G.bg : GREY, color: m.admin ? G.fg : "#999", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 10, fontWeight: 600, border: "1.5px solid #fff" }}>{m.init}</div>)}
            </div>
          </div>)}
        {!isPrem && <div onClick={() => { setHubCat("bands"); go("hire-hub"); }} style={{ margin: "0 16px 10px", background: `linear-gradient(135deg, ${A.fg}, #6a4a8a)`, borderRadius: 16, padding: "15px 16px", cursor: "pointer", position: "relative", overflow: "hidden" }}>
          <span style={{ position: "absolute", top: 10, right: 12, fontSize: 9.5, fontWeight: 700, color: "#3A2E00", background: GOLD, padding: "3px 8px", borderRadius: 8 }}>PREMIUM</span>
          <div style={{ fontSize: 24, marginBottom: 6 }}>🔎</div>
          <div style={{ fontSize: 14.5, fontWeight: 700, color: "#fff", marginBottom: 4 }}>Need a new band member?</div>
          <div style={{ fontSize: 11.5, color: "rgba(255,255,255,.85)", lineHeight: 1.5, marginBottom: 10 }}>Post what your band is looking for and let musicians come to you — plus browse session players and writers.</div>
          <span style={{ fontSize: 12, fontWeight: 700, color: "#fff", background: "rgba(255,255,255,.2)", padding: "7px 14px", borderRadius: 20 }}>Try free for 3 days →</span>
        </div>}
        <button style={css.pbtn()} onClick={() => { setNewBandName(""); setNewBandGenre(""); go("band-create"); }}>+ Create new band</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "band-create": <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Create a band</h2></div>
      <div style={{ padding: "14px 0 0" }}>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Band name</label><input value={newBandName} onChange={e => setNewBandName(e.target.value)} placeholder="e.g. The Night Owls" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Genre</label><input value={newBandGenre} onChange={e => setNewBandGenre(e.target.value)} placeholder="e.g. Jazz fusion" style={css.input} /></div>
        <button style={css.pbtn()} onClick={() => {
          const nb = { id: Date.now(), name: newBandName.trim() || "New band", genre: newBandGenre.trim() || "—", members: [{ init: "MR", name: "Marco Rossi", role: "You · Guitar", admin: true }], chat: [] };
          setBands(bs => [...bs, nb]); setActiveBand(nb.id); showToast("✅ Band created!"); go("band");
        }}>Create band</button>
        <div style={{ background: G.bg, borderRadius: 12, margin: "8px 16px", padding: "10px 13px", fontSize: 12, color: G.fg }}>You'll be the admin. Invite members for free with a link.</div>
      </div>
    </div>,

    band: <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>{band.name}</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{band.genre} · {band.members.length} members</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 14 }}>
        <SectionTitle extra={{ marginTop: 0 }}>Members</SectionTitle>
        <div style={css.card({ margin: "0 16px 10px" })}>
          {band.members.map(m =>
            <div key={m.init} style={{ ...css.row({}), cursor: m.admin ? "default" : "pointer" }} onClick={() => { if (!m.admin && !m.pending) openProfile(m.init); }}>
              <div style={{ width: 34, height: 34, borderRadius: 9, background: m.admin ? G.bg : m.pending ? A.bg : GREY, color: m.admin ? G.fg : m.pending ? A.fg : "#999", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 13, fontWeight: 600, flexShrink: 0 }}>{m.init}</div>
              <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 500, color: D }}>{m.name}</div><div style={{ fontSize: 11, color: m.pending ? A.fg : "#888" }}>{m.pending ? "Invited · awaiting reply" : m.role}</div></div>
              {m.admin ? <span style={css.pill(G)}>Admin</span> : m.pending ? <button onClick={e => { e.stopPropagation(); removeMember(band.id, m.init); showToast("Invite cancelled"); }} style={css.gbtn({ color: A.fg, background: A.bg })}>Cancel</button> : <button onClick={e => { e.stopPropagation(); removeMember(band.id, m.init); showToast(`${m.name} removed`); }} style={css.dbtn}>Remove</button>}
            </div>)}
        </div>
        <button style={css.sbtn()} onClick={() => showToast("📩 Invite link copied — free for people you know!")}>📩 Share invite link · free</button>
        <button style={css.sbtn()} onClick={() => go("find-users")}>{isPrem ? "🔎 Find & add musician" : "🔎 Find musicians · Premium 🔒"}</button>
        <button style={css.pbtn()} onClick={() => showToast("✅ Band saved!")}>Save band</button>
        <button style={css.sbtn({ color: R.fg, borderColor: R.bg })} onClick={() => { if (bands.length <= 1) { showToast("You need at least one band"); return; } const name = band.name; setBands(bs => { const rest = bs.filter(b => b.id !== band.id); setActiveBand(rest[0].id); return rest; }); goBack(); showToast(`🗑 ${name} deleted`); }}>🗑 Delete this band</button>
        <div style={{ height: 16 }} />
      </div>
    </div>,

    "support-chat": <div style={{ flex: 1, display: "flex", flexDirection: "column", background: GREY }}>
      <div style={{ ...css.ph(), display: "flex", alignItems: "center", gap: 11 }}>
        <BackBtn onClick={() => { setVnav("vhome"); go("vendor-home"); }} />
        <div style={{ ...css.av("rgba(255,255,255,.2)", 36), fontSize: 17 }}>🛡</div>
        <div style={{ flex: 1 }}><div style={{ fontSize: 14, fontWeight: 600, color: "#fff" }}>Recki Support</div><div style={{ fontSize: 10, color: "rgba(255,255,255,.6)" }}>Official · the Recki team</div></div>
      </div>
      <div style={{ flex: 1, overflowY: "auto", padding: "14px 14px 6px", display: "flex", flexDirection: "column", gap: 8 }}>
        <div style={{ background: L, borderRadius: 10, padding: "9px 12px", fontSize: 11, color: M, textAlign: "center", lineHeight: 1.5 }}>🛡 This is your direct line to the Recki team. We'll never ask for your password or card number here.</div>
        {(chats.SUPPORT || []).map((m, i) =>
          <div key={i} style={{ alignSelf: m.me ? "flex-end" : "flex-start", maxWidth: "75%", background: m.me ? D : "#fff", color: m.me ? "#fff" : D, padding: "9px 13px", borderRadius: m.me ? "16px 16px 4px 16px" : "16px 16px 16px 4px", fontSize: 13, lineHeight: 1.45, boxShadow: "0 1px 2px rgba(0,0,0,.06)" }}>{m.t}</div>)}
        {(!chats.SUPPORT || chats.SUPPORT.length === 0) && <div style={{ textAlign: "center", padding: "30px 20px", color: "#888", fontSize: 13 }}><div style={{ fontSize: 28, marginBottom: 10 }}>🛡</div>No messages yet. Reach out any time.</div>}
      </div>
      <div style={{ display: "flex", gap: 8, padding: "10px 12px 14px", background: "#fff", borderTop: `0.5px solid ${BORDER}`, flexShrink: 0 }}>
        <input value={chatInput} onChange={e => setChatInput(e.target.value)} onKeyDown={e => { if (e.key === "Enter" && chatInput.trim()) { setChats(c => ({ ...c, SUPPORT: [...(c.SUPPORT || []), { me: true, t: chatInput.trim() }] })); setChatInput(""); } }} placeholder="Message Recki Support…" style={{ ...css.input, flex: 1, borderRadius: 20, background: GREY, border: "none" }} />
        <button onClick={() => { if (!chatInput.trim()) return; setChats(c => ({ ...c, SUPPORT: [...(c.SUPPORT || []), { me: true, t: chatInput.trim() }] })); setChatInput(""); showToast("📨 Sent to Recki Support"); }} style={{ width: 42, height: 42, borderRadius: "50%", background: D, color: "#fff", border: "none", fontSize: 16, cursor: "pointer", flexShrink: 0 }}>➤</button>
      </div>
    </div>,

    chats: <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Messages</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{loginRole === "studio" ? "Recki support & updates" : "Your chats"}</p></div>
      <div style={{ flex: 1, overflowY: "auto" }}>
        {chats.SUPPORT && (() => { const msgs = chats.SUPPORT; const un = msgs.filter(m => m.unread).length; return <>
          <div style={{ padding: "12px 16px 4px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Recki</div>
          <div onClick={() => { setChatWith("SUPPORT"); markRead("SUPPORT"); go("chat"); }} style={{ display: "flex", alignItems: "center", gap: 12, padding: "13px 16px", borderBottom: `0.5px solid ${BORDER}`, background: L, cursor: "pointer" }}>
            <div style={{ ...css.av(D, 44), fontSize: 20 }}>🛡</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                <span style={{ fontSize: 13, fontWeight: un > 0 ? 700 : 600, color: D, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>Recki team</span>
                <span style={css.pill({ bg: D, fg: "#fff" })}>Official</span>
                <span style={{ marginLeft: "auto", fontSize: 10.5, color: un > 0 ? D : "#aaa", fontWeight: un > 0 ? 700 : 400, flexShrink: 0 }}>{chatTimes.SUPPORT || ""}</span>
              </div>
              <div style={{ fontSize: 11, color: un > 0 ? D : "#888", fontWeight: un > 0 ? 600 : 400, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", marginTop: 2 }}>{msgs.length ? (msgs[msgs.length - 1].me ? "You: " : "") + msgs[msgs.length - 1].t : "The Recki team"}</div>
            </div>
            {un > 0 ? <span style={{ background: D, color: "#fff", fontSize: 11, fontWeight: 700, minWidth: 18, height: 18, borderRadius: 9, display: "flex", alignItems: "center", justifyContent: "center", padding: "0 5px", flexShrink: 0 }}>{un}</span> : <span style={{ color: "#ccc", fontSize: 18, flexShrink: 0 }}>›</span>}
          </div>
        </>; })()}
        {bands.length > 0 && <>
          <div style={{ padding: "12px 16px 4px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Band group chats</div>
          {bands.map(b => { const last = b.chat && b.chat.length ? b.chat[b.chat.length - 1] : null; const lastMe = last && (last.who === "You" || last.who === "Marco Rossi"); return (
            <div key={"band-" + b.id} onClick={() => { setBandChatId(b.id); go("band-chat"); }} style={{ display: "flex", alignItems: "center", gap: 12, padding: "13px 16px", borderBottom: `0.5px solid ${BORDER}`, cursor: "pointer" }}>
              <div style={{ ...css.av(DEEP, 44), borderRadius: 13, fontSize: 18 }}>👥</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                  <span style={{ fontSize: 13, fontWeight: 600, color: D, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{b.name}</span>
                  <span style={css.pill({ bg: L, fg: M })}>Band · {b.members.length}</span>
                </div>
                <div style={{ fontSize: 11, color: "#888", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", marginTop: 2 }}>{last ? `${lastMe ? "You" : last.who.split(" ")[0]}: ${last.t}` : "No messages yet — say hi 👋"}</div>
              </div>
              <span style={{ color: "#ccc", fontSize: 18, flexShrink: 0 }}>›</span>
            </div>); })}
        </>}
        <div style={{ padding: "12px 16px 4px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Direct messages</div>
        {Object.entries(chats).filter(([k]) => k !== "SUPPORT").map(([k, msgs]) => {
          const isSup = false;
          const un = msgs.filter(m => m.unread).length;
          return <div key={k} style={{ display: "flex", alignItems: "center", gap: 12, padding: "13px 16px", borderBottom: `0.5px solid ${BORDER}`, background: isSup ? L : "#fff" }}>
            <div onClick={() => { setChatWith(k); markRead(k); go("chat"); }} style={{ display: "flex", alignItems: "center", gap: 12, flex: 1, minWidth: 0, cursor: "pointer" }}>
              <div style={{ position: "relative" }}>
                <div style={{ ...css.av(isSup ? D : M, 44), fontSize: isSup ? 20 : undefined }}>{isSup ? "🛡" : k}</div>
                {un > 0 && <span style={{ position: "absolute", top: -2, right: -2, width: 13, height: 13, borderRadius: "50%", background: D, border: "2px solid #fff" }} />}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                  <span style={{ fontSize: 13, fontWeight: un > 0 ? 700 : 600, color: D, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{chatNames[k]}</span>
                  {isSup && <span style={css.pill({ bg: D, fg: "#fff" })}>Official</span>}
                  <span style={{ marginLeft: "auto", fontSize: 10.5, color: un > 0 ? D : "#aaa", fontWeight: un > 0 ? 700 : 400, flexShrink: 0 }}>{chatTimes[k] || ""}</span>
                </div>
                <div style={{ fontSize: 11, color: un > 0 ? D : "#888", fontWeight: un > 0 ? 600 : 400, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", marginTop: 2 }}>{isSup ? (msgs.length ? (msgs[msgs.length - 1].me ? "You: " : "") + msgs[msgs.length - 1].t : "The Recki team") : msgs.length ? (msgs[msgs.length - 1].me ? "You: " : "") + msgs[msgs.length - 1].t : "Say hi 👋"}</div>
              </div>
            </div>
            {un > 0 ? <span style={{ background: D, color: "#fff", fontSize: 11, fontWeight: 700, minWidth: 18, height: 18, borderRadius: 9, display: "flex", alignItems: "center", justifyContent: "center", padding: "0 5px", flexShrink: 0 }}>{un}</span> : null}
            {!isSup && <button onClick={() => { deleteChat(k); showToast("🗑 Chat deleted"); }} style={{ border: "none", background: R.bg, color: R.fg, width: 30, height: 30, borderRadius: 9, fontSize: 13, cursor: "pointer", flexShrink: 0, fontFamily: "inherit" }}>🗑</button>}
          </div>;
        })}
        {Object.keys(chats).filter(k => k !== "SUPPORT").length === 0 && <div style={{ textAlign: "center", padding: "24px 20px", color: "#aaa", fontSize: 12.5 }}>No direct messages yet.</div>}
        <div style={{ padding: "14px 16px", fontSize: 11.5, color: "#888", lineHeight: 1.5 }}>💬 You can always message your bandmates. Finding and messaging new musicians is a Premium feature.</div>
      </div>
    </div>,

    chat: <div style={{ flex: 1, background: GREY, display: "flex", flexDirection: "column" }}>
      <div style={css.ph({ display: "flex", alignItems: "center", gap: 10, padding: "12px 16px" })}>
        <button onClick={goBack} style={{ background: "rgba(255,255,255,.15)", border: "none", color: "#fff", fontSize: 14, width: 30, height: 30, borderRadius: "50%", cursor: "pointer" }}>←</button>
        <div style={{ ...css.av(chatWith === "SUPPORT" ? "rgba(255,255,255,.2)" : M, 36), fontSize: chatWith === "SUPPORT" ? 17 : undefined }}>{chatWith === "SUPPORT" ? "🛡" : chatWith}</div>
        <div style={{ flex: 1 }}><div style={{ fontSize: 14, fontWeight: 600 }}>{chatNames[chatWith] || chatWith}</div><div style={{ fontSize: 10, opacity: .6 }}>{chatWith === "SUPPORT" ? "Official · Recki team" : "Musician · Vienna"}</div></div>
        {chatWith !== "SUPPORT" && <button onClick={() => setChatMenu(true)} style={{ background: "rgba(255,255,255,.15)", border: "none", color: "#fff", fontSize: 16, width: 30, height: 30, borderRadius: "50%", cursor: "pointer", fontFamily: "inherit" }}>⋯</button>}
      </div>
      <div style={{ flex: 1, overflowY: "auto", padding: "14px 14px 6px", display: "flex", flexDirection: "column", gap: 8 }}>
        {chatWith === "SUPPORT" && <div style={{ background: L, borderRadius: 10, padding: "9px 12px", fontSize: 11, color: M, textAlign: "center", lineHeight: 1.5 }}>🛡 This is an official Recki channel. We'll never ask for your password or card number here.</div>}
        {(chats[chatWith] || []).map((m, i) =>
          <div key={i} style={{ alignSelf: m.me ? "flex-end" : "flex-start", maxWidth: "75%", background: m.me ? D : "#fff", color: m.me ? "#fff" : D, padding: "9px 13px", borderRadius: m.me ? "16px 16px 4px 16px" : "16px 16px 16px 4px", fontSize: 13, lineHeight: 1.45, boxShadow: "0 1px 2px rgba(0,0,0,.06)" }}>{m.t}</div>)}
      </div>
      <div style={{ display: "flex", gap: 8, padding: "10px 12px 14px", background: "#fff", borderTop: `0.5px solid ${BORDER}`, flexShrink: 0 }}>
        <input value={chatInput} onChange={e => setChatInput(e.target.value)} onKeyDown={e => e.key === "Enter" && sendChat()} placeholder="Message…" style={{ ...css.input, flex: 1, borderRadius: 20, background: GREY, border: "none" }} />
        <button onClick={sendChat} style={{ width: 42, height: 42, borderRadius: "50%", background: D, color: "#fff", border: "none", fontSize: 16, cursor: "pointer", flexShrink: 0 }}>➤</button>
      </div>
    </div>,

    "find-users": <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Find musicians</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Search by name or instrument · connect on Recki</p></div>
        <div style={{ padding: "10px 16px", background: "#fff", borderBottom: `0.5px solid ${BORDER}`, flexShrink: 0 }}>
          <input value={userSearch} onChange={e => setUserSearch(e.target.value)} placeholder="Name, instrument, city…" style={{ ...css.input, background: GREY }} />
        </div>
        <div style={{ flex: 1, overflowY: "auto" }}>
          {filteredUsers.length === 0 ? <div style={{ textAlign: "center", padding: "30px 20px", color: "#888", fontSize: 13 }}><div style={{ fontSize: 28, marginBottom: 10 }}>🔍</div>No musicians found.</div> :
            filteredUsers.map(u => <div key={u.init} onClick={() => { setChatWith(u.init); go("user-profile"); }} style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 16px", borderBottom: `0.5px solid ${BORDER}`, cursor: "pointer" }}>
              <div style={css.av(u.bg, 42)}>{u.init}</div>
              <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D, display: "flex", alignItems: "center", gap: 6 }}>{u.name}{u.lfb && <span style={css.pill(A)}>looking</span>}</div><div style={{ fontSize: 11, color: "#888" }}>{u.sub}</div></div>
              <span style={{ color: "#ccc", fontSize: 18 }}>›</span>
            </div>)}
        </div>
    </div>,

    network: <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>My network</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Friends & requests</p></div>
      <div style={{ display: "flex", background: "#fff", borderBottom: `0.5px solid ${BORDER}`, flexShrink: 0 }}>
        {[["friends", "Friends", friends.length], ["requests", "Requests", friendReqIn.length]].map(([k, l, n]) =>
          <div key={k} onClick={() => setNetTab(k)} style={{ flex: 1, textAlign: "center", padding: "11px 2px", fontSize: 13, color: netTab === k ? D : "#888", fontWeight: netTab === k ? 700 : 400, cursor: "pointer", borderBottom: `2px solid ${netTab === k ? D : "transparent"}`, position: "relative" }}>{l}{n > 0 && <span style={{ marginLeft: 4, fontSize: 10, color: netTab === k ? D : "#aaa" }}>{n}</span>}{k === "requests" && n > 0 && <span style={{ position: "absolute", top: 6, right: "50%", marginRight: -32, width: 7, height: 7, borderRadius: "50%", background: R.fg }} />}</div>)}
      </div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 8 }}>
        {netTab === "requests" ? (friendReqIn.length === 0
          ? <div style={{ textAlign: "center", padding: "36px 20px", color: "#888", fontSize: 13 }}><div style={{ fontSize: 30, marginBottom: 10 }}>📭</div>No pending requests.</div>
          : friendReqIn.map(p => <div key={p.init} style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 16px", borderBottom: `0.5px solid ${BORDER}` }}>
              <div onClick={() => { setChatWith(p.init); go("user-profile"); }} style={{ ...css.av(M, 42), cursor: "pointer" }}>{p.init}</div>
              <div onClick={() => { setChatWith(p.init); go("user-profile"); }} style={{ flex: 1, cursor: "pointer", minWidth: 0 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>{p.name}</div><div style={{ fontSize: 11, color: "#888" }}>{p.sub} · wants to be friends</div></div>
              <button onClick={() => { setFriends(f => [...f, p.init]); setFriendReqIn(r => r.filter(x => x.init !== p.init)); showToast(`✅ You and ${p.name.split(" ")[0]} are now friends`); }} style={css.gbtn({ color: G.fg, background: G.bg })}>Accept</button>
              <button onClick={() => { setFriendReqIn(r => r.filter(x => x.init !== p.init)); showToast("Request declined"); }} style={css.gbtn({ color: R.fg, background: R.bg })}>Decline</button>
            </div>))
          : (friends.length === 0
            ? <div style={{ textAlign: "center", padding: "36px 20px", color: "#888", fontSize: 13 }}><div style={{ fontSize: 30, marginBottom: 10 }}>🤝</div>No friends yet — send a request from someone's profile.</div>
            : (() => {
              const q = friendSearch.trim().toLowerCase();
              const shown = friends.filter(init => !q || (`${chatNames[init] || init} ${peopleInfo[init] ? peopleInfo[init].role + " " + peopleInfo[init].city : ""}`).toLowerCase().includes(q));
              return <>
                <div style={{ padding: "8px 16px 6px" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, background: GREY, borderRadius: 12, padding: "0 12px" }}>
                    <span style={{ fontSize: 14, color: "#999" }}>🔍</span>
                    <input value={friendSearch} onChange={e => setFriendSearch(e.target.value)} placeholder="Search friends by name, role or city" style={{ flex: 1, border: "none", outline: "none", background: "transparent", padding: "11px 0", fontSize: 13, color: D, fontFamily: "inherit" }} />
                    {friendSearch && <button onClick={() => setFriendSearch("")} style={{ border: "none", background: "transparent", color: "#999", fontSize: 16, cursor: "pointer", fontFamily: "inherit" }}>✕</button>}
                  </div>
                </div>
                {shown.length === 0
                  ? <div style={{ textAlign: "center", padding: "28px 20px", color: "#aaa", fontSize: 12.5 }}>No friends match “{friendSearch}”.</div>
                  : shown.map(init => <div key={init} style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 16px", borderBottom: `0.5px solid ${BORDER}` }}>
                      <div onClick={() => { setChatWith(init); go("user-profile"); }} style={{ ...css.av(M, 42), cursor: "pointer" }}>{init}</div>
                      <div onClick={() => { setChatWith(init); go("user-profile"); }} style={{ flex: 1, cursor: "pointer", minWidth: 0 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>{chatNames[init] || init}</div><div style={{ fontSize: 11, color: "#888" }}>{peopleInfo[init] ? `${peopleInfo[init].role} · ${peopleInfo[init].city}` : "Musician"}</div></div>
                      <button onClick={() => { setChatWith(init); if (!chats[init]) setChats(c => ({ ...c, [init]: [] })); go("chat"); }} style={css.gbtn()}>Message</button>
                    </div>)}
              </>;
            })())}
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "user-profile": <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Musician profile</h2></div>
      <div style={{ flex: 1, overflowY: "auto" }}>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", padding: "24px 16px 12px" }}>
          <div style={{ ...css.av(M, 72), marginBottom: 10 }}>{chatWith}</div>
          <div style={{ fontSize: 18, fontWeight: 700, color: D }}>{chatNames[chatWith] || "Musician"}</div>
          <div style={{ fontSize: 13, color: "#888", marginTop: 3 }}>Musician · Vienna</div>
          <div style={{ display: "flex", gap: 16, marginTop: 10 }}>
            {[[String(friends.length), "Friends"], ["4", "Bands"], ["47", "Sessions booked"]].map(([n, l]) => <div key={l} style={{ textAlign: "center" }}><div style={{ fontSize: 15, fontWeight: 700, color: D }}>{n}</div><div style={{ fontSize: 10, color: "#888" }}>{l}</div></div>)}
          </div>
        </div>
        <div style={{ display: "flex", gap: 8, padding: "0 16px 8px" }}>
          {friends.includes(chatWith)
            ? <button style={{ ...css.sbtn(), flex: 1, margin: 0, color: G.fg, borderColor: G.bg }} onClick={() => { setFriends(f => f.filter(x => x !== chatWith)); showToast("Removed from friends"); }}>✓ Friends</button>
            : <button style={{ ...css.pbtn(), flex: 1, margin: 0 }} onClick={() => showToast("👋 Friend request sent")}>+ Add friend</button>}
          <button style={{ ...css.sbtn(), flex: 1, margin: 0 }} onClick={() => { if (!chats[chatWith]) setChats(c => ({ ...c, [chatWith]: [] })); go("chat"); }}>💬 Message</button>
        </div>
        {(() => { const mutuals = friends.filter(x => x !== chatWith).slice(0, 3); if (!mutuals.length) return null; const names = mutuals.map(x => (chatNames[x] || x).split(" ")[0]); const label = names.length === 1 ? names[0] : names.length === 2 ? `${names[0]} and ${names[1]}` : `${names[0]}, ${names[1]} and ${mutuals.length - 2} other${mutuals.length - 2 === 1 ? "" : "s"}`;
          return <div onClick={() => { setNetTab("friends"); go("network"); }} style={{ display: "flex", alignItems: "center", gap: 10, margin: "0 16px 8px", padding: "9px 12px", background: GREY, borderRadius: 12, cursor: "pointer" }}>
            <div style={{ display: "flex" }}>{mutuals.map((x, i) => <div key={x} style={{ ...css.av(M, 26), marginLeft: i ? -8 : 0, fontSize: 9, border: "2px solid #fff" }}>{x}</div>)}</div>
            <div style={{ flex: 1, fontSize: 11.5, color: "#666" }}>Friends with <span style={{ fontWeight: 600, color: D }}>{label}</span></div>
            <span style={{ color: "#ccc" }}>›</span>
          </div>; })()}
        {loginRole === "studio" && (() => { const nm = chatNames[chatWith] || ""; const hit = Object.keys(reportedMusicians).find(n => nm.includes(n) || n === nm); if (!hit) return null; const r = reportedMusicians[hit]; return <div style={{ background: R.bg, borderRadius: 14, margin: "0 16px 10px", padding: "12px 14px", border: `1px solid ${R.fg}33` }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}><span style={{ fontSize: 16 }}>⚠️</span><span style={{ fontSize: 12.5, fontWeight: 700, color: R.fg }}>Reported by other studios</span></div>
          <div style={{ fontSize: 11.5, color: R.fg, marginTop: 5, lineHeight: 1.5 }}>{r.reason}. Visible to studios only — the musician can't see this. Use your judgement (deposit, house rules) before accepting.</div>
        </div>; })()}
        <div style={css.card()}>
          <ConfirmItem icon="📍" title="Vienna, Austria" />
          <ConfirmItem icon="🎵" title="Amateur musician" sub="Plays regularly with a band" />
          <ConfirmItem icon="📅" title="Member since May 2026" sub="12 sessions booked" />
        </div>
        <div style={{ margin: "0 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Plays</div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 7, padding: "0 16px 10px" }}>
          {["Indie", "Rock", "Funk"].map(g => <span key={g} style={css.pill({ bg: "#E2F5F6", fg: "#137E88" })}>{g}</span>)}
        </div>
        <div style={{ margin: "0 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Favourite artists</div>
        <div style={css.card()}>
          {["Jeff Buckley", "Tame Impala", "Vulfpeck"].map((f, i) => <div key={f} style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 14px", borderBottom: i < 2 ? `0.5px solid #f5f5f5` : "none" }}><span style={{ fontSize: 14 }}>⭐</span><span style={{ fontSize: 13, color: D }}>{f}</span></div>)}
        </div>
        <button style={css.pbtn()} onClick={() => { if (!chats[chatWith]) setChats(c => ({ ...c, [chatWith]: [] })); go("chat"); }}>💬 Message</button>
        <button style={css.sbtn()} onClick={() => { const nm = chatNames[chatWith] || "Musician"; setBands(bs => bs.map(b => b.id === activeBand ? (b.members.some(m => m.init === chatWith) ? b : { ...b, members: [...b.members, { init: chatWith, name: nm, role: "Invited", pending: true }] }) : b)); showToast(`📨 Invite sent to ${nm.split(" ")[0]} — they'll need to accept`); }}>+ Invite to my band</button>
        <div style={{ display: "flex", justifyContent: "center", gap: 18, padding: "12px 16px" }}>
          <span onClick={() => showToast("🚩 Reported — Recki will review this musician")} style={{ fontSize: 12, color: "#999", cursor: "pointer" }}>🚩 Report</span>
          <span onClick={() => { deleteChat(chatWith); showToast("🚫 Blocked"); goBack(); }} style={{ fontSize: 12, color: "#999", cursor: "pointer" }}>🚫 Block</span>
        </div>
      </div>
    </div>,

    "gigs-all": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={{ background: `linear-gradient(135deg, ${GIG}, ${GIG_DEEP})`, padding: "20px 16px 18px", flexShrink: 0 }}>
        <BackBtn onClick={goBack} />
        <h2 style={{ fontSize: 20, fontWeight: 800, color: "#fff", marginTop: 6 }}>🎫 Gigs in {city}</h2>
        <div style={{ fontSize: 12, color: "rgba(255,255,255,.9)", marginTop: 3 }}>📍 Sorted by distance from you</div>
      </div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={{ padding: "0 16px 12px" }}><button style={{ ...css.pbtn(), margin: 0, width: "100%", background: GIG }} onClick={() => { setGigForm({ kind: "playing", band: "", venue: "", when: "", note: "", ticket: "" }); go("gig-post"); }}>🎟 Post a gig ad</button></div>
        {gigsSorted.map(g =>
          <div key={g.id} onClick={() => go(g.dest || g.id)} style={{ ...css.card(), cursor: "pointer", overflow: "hidden" }}>
            <div style={{ display: "flex", gap: 11, padding: 12 }}>
              <div style={{ ...lt(g.v, 64), fontSize: 26, position: "relative" }}>{g.ico}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: D, marginBottom: 2 }}>{g.name}</div>
                <div style={{ fontSize: 11, color: "#888", marginBottom: 3 }}>{g.sub}</div>
                <div style={{ fontSize: 11, color: GIG, fontWeight: 600 }}>📅 {g.date}</div>
              </div>
              <div style={{ textAlign: "right", flexShrink: 0 }}>
                <div style={{ fontSize: 11, fontWeight: 700, color: G.fg }}>📍 {g.dist} km</div>
                <span style={{ color: "#ccc", fontSize: 16 }}>›</span>
              </div>
            </div>
          </div>)}
        <div style={{ textAlign: "center", fontSize: 11, color: "#888", padding: "8px 16px 16px" }}>Gigs are promoted by bands · €2/day</div>
      </div>
    </div>,

    "vendor-home": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}>
        <button onClick={() => { if (linked) { setNav("profile"); go("profile"); } else { go("account-link"); } }} style={{ background: "rgba(255,255,255,.15)", border: "none", color: "#fff", fontSize: 12, padding: "6px 12px", borderRadius: 20, cursor: "pointer", marginBottom: 10, fontFamily: "inherit" }}>{linked ? "🔄 Musician view" : "🔗 Link musician account"}</button>
        <button onClick={() => setStudioSwitcher(true)} style={{ background: "transparent", border: "none", color: "#fff", cursor: "pointer", padding: 0, textAlign: "left", fontFamily: "inherit", display: "flex", alignItems: "center", gap: 7 }}>
          <h2 style={{ fontSize: 18, fontWeight: 700, color: "#fff" }}>{curStudio.name}</h2>
          {myStudios.length > 1 && <span style={{ fontSize: 11, background: "rgba(255,255,255,.2)", padding: "3px 8px", borderRadius: 8 }}>▾ Switch</span>}
        </button>
        <div style={{ fontSize: 11, color: "rgba(255,255,255,.6)", marginTop: 2 }}>{curStudio.kind} · {curStudio.loc}</div>
        <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
          {[["June earnings", curStudio.earn, "vendor-earnings"], ["Occupancy", curStudio.occ, "vendor-insights"]].map(([l, v, dest]) => <div key={l} onClick={() => go(dest)} style={{ flex: 1, background: "rgba(255,255,255,.12)", borderRadius: 12, padding: 11, cursor: "pointer" }}><div style={{ fontSize: 10, color: "rgba(255,255,255,.6)", marginBottom: 3 }}>{l}</div><div style={{ fontSize: 20, fontWeight: 700, color: "#fff" }}>{v}</div></div>)}
        </div>
      </div>
      <div style={{ flex: 1, overflowY: "auto" }}>
        <div onClick={() => go("vendor-plan")} style={{ ...css.card({ margin: "12px 16px 0" }), padding: "12px 14px", display: "flex", alignItems: "center", gap: 11, cursor: "pointer", border: subActive ? `1px solid ${G.fg}33` : trialDaysLeft <= 14 ? `1px solid ${R.fg}44` : `1px solid ${A.fg}33` }}>
          <span style={{ fontSize: 20 }}>{subActive ? "✅" : "🎁"}</span>
          <div style={{ flex: 1 }}>
            {subActive
              ? <><div style={{ fontSize: 13, fontWeight: 600, color: D }}>{subCycle === "annual" ? "Annual" : "Monthly"} plan active</div><div style={{ fontSize: 11, color: "#888" }}>{rooms.length} room{rooms.length === 1 ? "" : "s"} · €{subCycle === "annual" ? subAnnual(rooms.length) + "/yr" : subMonthly(rooms.length) + "/mo"}</div></>
              : <><div style={{ fontSize: 13, fontWeight: 600, color: trialDaysLeft <= 14 ? R.fg : D }}>Free trial · {trialDaysLeft} days left</div><div style={{ fontSize: 11, color: "#888" }}>{trialDaysLeft <= 14 ? "Choose a plan to keep listing after the trial" : "Free for your first 3 months — listing & bookings"}</div></>}
          </div>
          <span style={{ color: "#ccc" }}>›</span>
        </div>
        <div style={{ padding: "12px 16px 0" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: D }}>Today's bookings</div>
            <span onClick={() => { setVnav("vcal"); go("vendor-cal"); }} style={{ fontSize: 12, color: M, cursor: "pointer" }}>Calendar →</span>
          </div>
          {vendorBookings.map(b =>
            <div key={b.time} onClick={() => { setVb(b); setVbNote(""); go("vendor-bdetail"); }} style={{ background: "#fff", borderRadius: 14, padding: 12, marginBottom: 8, display: "flex", gap: 10, alignItems: "center", border: `0.5px solid ${BORDER}`, cursor: "pointer" }}>
              <div style={{ background: L, color: M, fontSize: 11, fontWeight: 600, padding: "5px 9px", borderRadius: 8, whiteSpace: "nowrap" }}>{b.time}</div>
              <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>{b.room}</div><div style={{ fontSize: 11, color: "#888" }}>{b.who}</div></div>
              <div style={{ textAlign: "right" }}><div style={{ fontSize: 12, fontWeight: 700, color: D }}>{b.amount}</div><span style={{ color: "#ccc" }}>›</span></div>
            </div>)}
        </div>
        <div style={{ padding: "10px 16px 0" }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: D, marginBottom: 8 }}>This week's occupancy</div>
          <div style={{ background: "#fff", borderRadius: 14, border: `0.5px solid ${BORDER}`, padding: "12px 14px", display: "flex", alignItems: "flex-end", gap: 6, height: 92 }}>
            {[["M", 40], ["T", 55], ["W", 62], ["T", 85], ["F", 95], ["S", 70], ["S", 25]].map(([d, h], i) =>
              <div key={i} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 2 }}>
                <span style={{ fontSize: 8, fontWeight: 700, color: i === 4 ? D : "#999" }}>{h}%</span>
                <div style={{ width: "100%", height: h * 0.45, background: i === 4 ? D : L, borderRadius: 4 }} />
                <span style={{ fontSize: 8, color: "#888" }}>{d}</span>
              </div>)}
          </div>
        </div>
        <div style={{ padding: "14px 16px 0" }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: D, marginBottom: 8 }}>Manage</div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8 }}>
            {[["💰", "Earnings", "vendor-earnings"], ["🏦", "Payouts", "vendor-payouts"], ["💳", "Plan", "vendor-plan"], ["💬", "Support", "support-chat"], ["⭐", "Reviews", "vendor-reviews"], ["🕘", "Hours", "vendor-hours"], ["💶", "Pricing", "vendor-pricing"], ["🏷", "Discounts", "vendor-promos"], ["📈", "Boost", "vendor-featured"]].map(([ico, label, dest]) =>
              <div key={dest} onClick={() => { if (dest === "support-chat") { setChatWith("SUPPORT"); markRead("SUPPORT"); } go(dest); }} style={{ background: "#fff", borderRadius: 14, padding: "13px 6px", border: `0.5px solid ${BORDER}`, cursor: "pointer", textAlign: "center", position: "relative" }}>
                {dest === "support-chat" && unreadCount("SUPPORT") > 0 && <span style={{ position: "absolute", top: 8, right: 8, background: D, color: "#fff", fontSize: 10, fontWeight: 700, minWidth: 17, height: 17, borderRadius: 9, display: "flex", alignItems: "center", justifyContent: "center", padding: "0 4px" }}>{unreadCount("SUPPORT")}</span>}
                <div style={{ fontSize: 21, marginBottom: 4 }}>{ico}</div>
                <div style={{ fontSize: 11, fontWeight: 500, color: D }}>{label}</div>
              </div>)}
          </div>
        </div>
        <div style={{ height: 18 }} />
      </div>
    </div>,

    "vendor-bdetail": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Booking detail</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{vb ? vb.room : "Room A"} · today</p></div>
      <div style={{ flex: 1, overflowY: "auto" }}>
        <div style={css.card({ marginTop: 12 })}>
          {[["👤", vb ? vb.who : "Marco R. · 2 people", "Musician"], ["📞", vb ? vb.phone : "+43 660 123 4567", "Tap to call"], ["⏰", vb ? vb.time : "13:00–15:00", vb ? vb.room : "Room A"], ["🧾", vb ? vb.src : "Organic search", "Booking source"]].map(([ico, t, s]) =>
            <ConfirmItem key={String(t)} icon={ico} title={t} sub={s} />)}
          <div style={{ display: "flex", justifyContent: "space-between", padding: "12px 14px", background: GREY }}>
            <span style={{ fontSize: 13, fontWeight: 600, color: D }}>You receive · paid in app</span><strong style={{ fontSize: 16, color: D }}>{vb ? vb.amount : "€24.00"}</strong>
          </div>
        </div>
        {(() => { const who = vb ? vb.who : ""; const hit = Object.keys(reportedMusicians).find(n => who.includes(n)); if (!hit) return null; const r = reportedMusicians[hit]; return <div style={{ background: R.bg, borderRadius: 14, margin: "0 16px 10px", padding: "12px 14px", border: `1px solid ${R.fg}33` }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}><span style={{ fontSize: 16 }}>⚠️</span><span style={{ fontSize: 12.5, fontWeight: 700, color: R.fg }}>{hit} was reported by other studios</span></div>
          <div style={{ fontSize: 11.5, color: R.fg, marginTop: 5, lineHeight: 1.5 }}>{r.reason}. Shown only to studios, so you can take extra care (e.g. deposit, house rules reminder). Not visible to the musician.</div>
        </div>; })()}
        <div style={{ margin: "0 16px 8px" }}><label style={css.label}>Private note (only you see this)</label>
          <textarea value={vbNote} onChange={e => setVbNote(e.target.value)} placeholder="e.g. Brought own amp last time" style={{ ...css.input, resize: "none", height: 60 }} /></div>
        <button style={css.pbtn()} onClick={() => go("vendor-adjust")}>🧾 Adjust extras & close session</button>
        <button style={css.sbtn()} onClick={() => showToast("📞 Calling musician…")}>📞 Call musician</button>
        <button style={css.sbtn()} onClick={() => setNoShowModal(true)}>Mark as no-show</button>
        <button style={css.sbtn({ color: R.fg, borderColor: R.bg })} onClick={() => { setReportReason(""); setReportDetails(""); setReportPhotos(0); setReportModal(true); }}>🚩 Report musician (damage / issue)</button>
        <button style={css.sbtn({ color: R.fg, borderColor: R.bg })} onClick={() => setVendorCancelModal(true)}>Cancel & refund</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "vendor-cal": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><h2 style={{ fontSize: 19, fontWeight: 700 }}>Calendar</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{curStudio.name} · 12 months ahead</p></div>
      <div style={{ flex: 1, overflowY: "auto", padding: "12px 16px" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 10 }}>
          <button onClick={() => setCalMonth(m => Math.max(0, m - 1))} style={css.gbtn({ opacity: calMonth === 0 ? .35 : 1, fontSize: 14 })}>‹</button>
          <div style={{ fontSize: 15, fontWeight: 700, color: D }}>{MONTHS12[calMonth][0]}</div>
          <button onClick={() => setCalMonth(m => Math.min(11, m + 1))} style={css.gbtn({ opacity: calMonth === 11 ? .35 : 1, fontSize: 14 })}>›</button>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(7,1fr)", gap: 4, marginBottom: 6 }}>
          {["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map(h => <div key={h} style={{ textAlign: "center", fontSize: 10, fontWeight: 700, color: "#888", padding: "4px 0" }}>{h}</div>)}
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(7,1fr)", gap: 4, marginBottom: 12 }}>
          {Array.from({ length: MONTHS12[calMonth][2] }).map((_, i) => <div key={"b" + i} />)}
          {Array.from({ length: MONTHS12[calMonth][1] }).map((_, i) => {
            const day = i + 1, n = calBookings[`${calMonth}-${day}`], sel = calDay === day;
            return <div key={day} onClick={() => setCalDay(day)} style={{ position: "relative", textAlign: "center", padding: "9px 0", borderRadius: 10, fontSize: 12, fontWeight: sel ? 700 : 500, cursor: "pointer", background: sel ? D : n ? L : "#fff", color: sel ? "#fff" : D, border: `0.5px solid ${sel ? D : BORDER}` }}>
              {day}
              {n && <span style={{ position: "absolute", top: 2, right: 3, fontSize: 8, fontWeight: 700, background: sel ? "#fff" : M, color: sel ? D : "#fff", borderRadius: 7, padding: "1px 4px" }}>{n}</span>}
            </div>;
          })}
        </div>
        <div style={{ fontSize: 13, fontWeight: 600, color: D, marginBottom: 8 }}>{MONTHS12[calMonth][0].split(" ")[0]} {calDay} — {calBookings[`${calMonth}-${calDay}`] || 0} booking{(calBookings[`${calMonth}-${calDay}`] || 0) === 1 ? "" : "s"}</div>
        {calMonth === 0 && calDay === 11 ? vendorBookings.map(b =>
          <div key={b.time} onClick={() => { setVb(b); setVbNote(""); go("vendor-bdetail"); }} style={{ background: "#fff", borderRadius: 12, padding: 11, marginBottom: 7, display: "flex", gap: 10, alignItems: "center", border: `0.5px solid ${BORDER}`, cursor: "pointer" }}>
            <div style={{ background: L, color: M, fontSize: 11, fontWeight: 600, padding: "5px 9px", borderRadius: 8, whiteSpace: "nowrap" }}>{b.time}</div>
            <div style={{ flex: 1 }}><div style={{ fontSize: 12.5, fontWeight: 600, color: D }}>{b.room}</div><div style={{ fontSize: 11, color: "#888" }}>{b.who}</div></div>
            <span style={{ color: "#ccc" }}>›</span>
          </div>) : (calBookings[`${calMonth}-${calDay}`] ? <div style={{ background: "#fff", borderRadius: 12, padding: "11px 13px", marginBottom: 7, fontSize: 12, color: "#555", border: `0.5px solid ${BORDER}` }}>Bookings load here — tap any to manage.</div> : <div style={{ background: "#fff", borderRadius: 12, padding: "11px 13px", marginBottom: 7, fontSize: 12, color: "#888", border: `0.5px solid ${BORDER}` }}>No bookings on this day yet.</div>)}
        {blocks.filter(b => b.m === calMonth && b.d === calDay).map((b, i) =>
          <div key={"blk" + i} style={{ background: R.bg, borderRadius: 12, padding: "11px 13px", marginBottom: 7, display: "flex", gap: 10, alignItems: "center" }}>
            <span style={{ fontSize: 16 }}>⛔</span>
            <div style={{ flex: 1 }}><div style={{ fontSize: 12.5, fontWeight: 600, color: R.fg }}>Blocked · {b.from}–{b.to}</div><div style={{ fontSize: 11, color: "#a06" }}>{b.reason} · not bookable</div>{b.note && <div style={{ fontSize: 11, color: "#a06", marginTop: 3, fontStyle: "italic" }}>📝 {b.note}</div>}</div>
            <button onClick={() => { setBlocks(bs => bs.filter(x => x !== b)); showToast("Block removed"); }} style={{ border: "none", background: "#fff", color: R.fg, width: 28, height: 28, borderRadius: 8, fontSize: 12, cursor: "pointer", fontFamily: "inherit" }}>🗑</button>
          </div>)}
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap", margin: "4px 0 12px" }}>
          {[[L, "Has bookings"], ["#fff", "Free"], [D, "Selected"]].map(([bg, l]) => <div key={l} style={{ display: "flex", alignItems: "center", gap: 5, fontSize: 11, color: "#888" }}><div style={{ width: 14, height: 14, borderRadius: 4, background: bg, border: `0.5px solid ${BORDER}` }} />{l}</div>)}
        </div>
        <button style={css.pbtn({ margin: "0 0 8px", width: "100%" })} onClick={() => setBlockModal(true)}>+ Block a slot</button>
        <button style={css.sbtn({ margin: 0, width: "100%" })} onClick={() => showToast("🔁 Google Calendar synced")}>🔁 Sync with Google Calendar</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "vendor-listings": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><h2 style={{ fontSize: 19, fontWeight: 700 }}>My listings</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{curStudio.name}</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 10 }}>
        <div style={{ margin: "0 16px 4px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Studio profile</div>
        <div onClick={() => go("vendor-studio")} style={{ ...css.card(), cursor: "pointer", overflow: "hidden" }}>
          <div style={{ height: 76, background: "linear-gradient(135deg,#5B5BD6,#8A8AE0)", display: "flex", alignItems: "flex-end", padding: 10 }}>
            <span style={{ fontSize: 9, background: "rgba(0,0,0,.4)", color: "#fff", padding: "3px 8px", borderRadius: 8 }}>📷 Cover photo</span>
          </div>
          <div style={{ padding: "11px 14px", display: "flex", alignItems: "center", gap: 10 }}>
            <div style={{ flex: 1 }}><div style={{ fontSize: 14, fontWeight: 600, color: D }}>{curStudio.name}</div><div style={{ fontSize: 11, color: "#888", marginTop: 2 }}>The page musicians see in search · name, photos, description, address</div></div>
            <span style={{ ...css.gbtn({ fontSize: 11 }) }}>✏ Edit</span>
          </div>
        </div>
        <div style={{ margin: "10px 16px 4px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Rooms in this studio</div>
        {rooms.map((room, i) =>
          <div key={i} style={css.card()}>
            <div style={{ padding: "12px 14px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <div><div style={{ fontSize: 14, fontWeight: 600, color: D }}>{room.n}</div><div style={{ fontSize: 12, color: "#888", marginTop: 2 }}>{room.s}</div></div>
            </div>
            <div style={{ margin: "0 14px 10px", background: GREY, borderRadius: 8, padding: "7px 10px", fontSize: 11, color: M }}>Listing quality {room.q} — <span style={{ fontWeight: 600, cursor: "pointer" }} onClick={() => go("vendor-photos")}>add photos to rank higher</span></div>
            <div style={{ height: 0.5, background: BORDER, margin: "0 14px" }} />
            <div style={{ padding: "10px 14px", display: "flex", gap: 8 }}>
              <button style={css.gbtn()} onClick={() => go("vendor-edit")}>✏ Edit</button>
              <button style={css.gbtn()} onClick={() => go("vendor-photos")}>📷 Photos</button>
              <button style={{ ...css.dbtn, marginLeft: "auto" }} onClick={() => { const name = room.n; setRooms(rs => rs.filter((_, j) => j !== i)); showToast(`🗑 ${name} removed`); }}>🗑</button>
            </div>
          </div>)}
        {rooms.length === 0 && <div style={{ textAlign: "center", padding: "30px 20px", color: "#888", fontSize: 13 }}><div style={{ fontSize: 28, marginBottom: 10 }}>🎛</div>No rooms yet — add your first one.</div>}
        <button style={css.sbtn()} onClick={() => setAddRoomModal(true)}>+ Add new room</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "vendor-studio": <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Studio profile</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{curStudio.name} · what musicians see in search</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={{ margin: "0 16px 4px" }}><label style={css.label}>Cover photo & gallery</label></div>
        <div style={{ margin: "0 16px 12px" }}>
          <div onClick={() => go("vendor-photos")} style={{ height: 120, borderRadius: 14, background: "linear-gradient(135deg,#5B5BD6,#8A8AE0)", display: "flex", alignItems: "flex-end", justifyContent: "space-between", padding: 12, cursor: "pointer" }}>
            <span style={{ fontSize: 10, background: "rgba(0,0,0,.4)", color: "#fff", padding: "4px 9px", borderRadius: 8 }}>📷 4 photos · tap to manage</span>
            <span style={{ ...css.gbtn({ fontSize: 11 }) }}>Edit photos</span>
          </div>
        </div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Studio name</label><input key={curStudio.id} defaultValue={curStudio.name} style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Tagline <span style={{ color: "#bbb" }}>· shown under the name</span></label><input defaultValue="Soundproofed rehearsal & recording in the heart of Vienna" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>About the studio</label>
          <textarea defaultValue="Family-run space with three rooms, a relaxed vibe and well-maintained backline. Easy load-in, friendly staff, and a café around the corner. We welcome bands, solo artists and producers." style={{ ...css.input, resize: "none", height: 92 }} /></div>
        <div style={{ display: "flex", gap: 8, margin: "0 16px 10px" }}>
          <div style={{ flex: 1 }}><label style={css.label}>Country</label><select value={vCountry} onChange={e => { setVCountry(e.target.value); setVCity(COUNTRIES[e.target.value][0]); }} style={css.input}>{Object.keys(COUNTRIES).map(c => <option key={c}>{c}</option>)}</select></div>
          <div style={{ flex: 1 }}><label style={css.label}>City</label><select value={vCity} onChange={e => setVCity(e.target.value)} style={css.input}>{COUNTRIES[vCountry].map(c => <option key={c}>{c}</option>)}</select></div>
        </div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Address</label><input defaultValue="Marxergasse 4, 1030 Wien" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Public contact phone</label><input defaultValue="+43 1 234 5678" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>What this studio offers <span style={{ color: "#bbb" }}>· shown in search</span></label><select style={css.input}><option>Rehearsal & Recording</option><option>Rehearsal rooms only</option><option>Recording only</option></select><div style={{ fontSize: 11, color: "#888", marginTop: 5 }}>This is the building's overall badge. Each room still has its own type, equipment and pricing.</div></div>
        <div style={{ margin: "0 16px 4px" }}><label style={css.label}>Studio amenities — tap to toggle</label></div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 7, padding: "0 16px 6px" }}>
          {AMEN_OPTS.map(t => { const on = vAmen.includes(t); return <button key={t} onClick={() => setVAmen(p => on ? p.filter(x => x !== t) : [...p, t])} style={css.chip(on, "#1FB8C4")}>{t}</button>; })}
          {vAmen.filter(t => !AMEN_OPTS.includes(t)).map(t => <button key={t} onClick={() => setVAmen(p => p.filter(x => x !== t))} style={css.chip(true, "#1FB8C4")}>{t} ✕</button>)}
        </div>
        <div style={{ display: "flex", gap: 8, margin: "0 16px 8px" }}>
          <input value={amenInput} onChange={e => setAmenInput(e.target.value)} placeholder="Add amenity, e.g. Kitchen" style={{ ...css.input, flex: 1 }} />
          <button onClick={() => { const v = amenInput.trim(); if (!v) return; setVAmen(p => p.includes(v) ? p : [...p, v]); setAmenInput(""); showToast(`✅ ${v} added`); }} style={{ ...css.gbtn({ fontSize: 12, padding: "0 16px" }), flexShrink: 0 }}>Add</button>
        </div>
        <div style={{ background: L, borderRadius: 12, margin: "0 16px 8px", padding: "9px 12px", fontSize: 11, color: M }}>🎛 Per-room details (price, equipment, services) are set on each room in the list below the profile.</div>

        {/* Tax & billing — used to invoice you correctly for Recki's fees */}
        <div style={{ margin: "14px 16px 4px" }}><label style={css.label}>🧾 Tax & billing</label></div>
        <div style={{ margin: "0 16px 8px", fontSize: 11, color: "#888", lineHeight: 1.45 }}>This is used to issue your invoices for Recki's subscription & commission, and to set the right VAT. It doesn't file your taxes — your own accountant handles the money you earn from bookings.</div>
        <div style={{ margin: "0 16px 10px" }}>
          <label style={css.label}>Tax status</label>
          <div style={{ display: "flex", flexDirection: "column", gap: 7, marginTop: 4 }}>
            {[["vat", "VAT-registered business", "You have a VAT number (partita IVA / UID)"], ["forfettario", "Flat-rate / small regime", "e.g. regime forfettario — usually no VAT charged"]].map(([k, title, sub]) =>
              <div key={k} onClick={() => setVTaxStatus(k)} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 12px", borderRadius: 11, border: `1px solid ${vTaxStatus === k ? D : BORDER}`, background: vTaxStatus === k ? L : "#fff", cursor: "pointer" }}>
                <div style={{ width: 18, height: 18, borderRadius: "50%", border: `2px solid ${vTaxStatus === k ? D : BORDER}`, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>{vTaxStatus === k && <div style={{ width: 9, height: 9, borderRadius: "50%", background: D }} />}</div>
                <div style={{ flex: 1 }}><div style={{ fontSize: 12.5, fontWeight: 600, color: vTaxStatus === k ? D : "#333" }}>{title}</div><div style={{ fontSize: 10.5, color: "#888" }}>{sub}</div></div>
              </div>)}
          </div>
        </div>
        {vTaxStatus === "vat" && <div style={{ margin: "0 16px 10px" }}><label style={css.label}>VAT number <span style={{ color: "#bbb", fontWeight: 400 }}>· partita IVA / UID</span></label><input value={vVatNo} onChange={e => setVVatNo(e.target.value)} placeholder="e.g. ATU12345678 or IT01234567890" style={css.input} /><div style={{ fontSize: 10.5, color: "#999", marginTop: 5 }}>EU businesses with a valid VAT number are invoiced under reverse charge (no VAT added by Recki).</div></div>}
        {vTaxStatus === "forfettario" && <div style={{ margin: "0 16px 10px", background: G.bg, borderRadius: 10, padding: "9px 12px", fontSize: 11, color: G.fg, lineHeight: 1.45 }}>💡 On a flat-rate scheme, special VAT wording applies on invoices. Add your tax code/number if your accountant asks — we'll show the correct exemption note.</div>}
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Legal / billing name</label><input value={vLegalName} onChange={e => setVLegalName(e.target.value)} placeholder="Registered business or your full legal name" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Billing address</label><input value={vBillingAddr} onChange={e => setVBillingAddr(e.target.value)} placeholder="Street, postcode, city, country" style={css.input} /></div>
        <div style={{ background: L, borderRadius: 12, margin: "0 16px 8px", padding: "9px 12px", fontSize: 10.5, color: M, lineHeight: 1.45 }}>🔒 Used only for invoicing & tax compliance. Your earnings records are exportable anytime from <span style={{ fontWeight: 600, cursor: "pointer" }} onClick={() => go("vendor-earnings")}>Earnings →</span> for your accountant.</div>

        <button style={css.pbtn()} onClick={() => { goBack(); showToast("✅ Studio profile saved"); }}>Save studio profile</button>
        <div style={{ height: 16 }} />
      </div>
    </div>,

    "vendor-edit": <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Edit listing</h2></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 14 }}>
        {[["Room name", "Room A"], ["Base price per hour (€)", "12"], ["Min. duration (hours)", "1"], ["Capacity", "6"], ["Contact phone", "+43 1 234 5678"]].map(([l, v]) =>
          <div key={l} style={{ margin: "0 16px 10px" }}><label style={css.label}>{l}</label><input defaultValue={v} style={css.input} /></div>)}
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Description</label>
          <textarea defaultValue="Spacious, soundproofed rehearsal room in the heart of Landstrasse. Well-tuned house drum kit, full PA and a relaxed vibe — perfect for bands who want to focus on playing." style={{ ...css.input, resize: "none", height: 78 }} /></div>
        <div style={{ margin: "0 16px 6px" }}><label style={css.label}>Equipment in the room — tap to toggle</label></div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 7, padding: "0 16px 6px" }}>
          {EQUIP_OPTS.map(t => { const on = vEquip.includes(t); return <button key={t} onClick={() => setVEquip(p => on ? p.filter(x => x !== t) : [...p, t])} style={css.fc(on)}>{t}</button>; })}
          {vEquip.filter(t => !EQUIP_OPTS.includes(t)).map(t => <button key={t} onClick={() => setVEquip(p => p.filter(x => x !== t))} style={css.fc(true)}>{t} ✕</button>)}
          <button onClick={() => setShowEquipOther(s => !s)} style={css.fc(showEquipOther)}>+ Other</button>
        </div>
        {showEquipOther && <div style={{ display: "flex", gap: 8, margin: "0 16px 10px" }}>
          <input value={equipInput} onChange={e => setEquipInput(e.target.value)} placeholder="Add equipment, e.g. Hammond organ" style={{ ...css.input, flex: 1 }} />
          <button onClick={() => { const v = equipInput.trim(); if (!v) return; setVEquip(p => p.includes(v) ? p : [...p, v]); setEquipInput(""); showToast(`✅ ${v} added`); }} style={{ ...css.gbtn({ fontSize: 12, padding: "0 16px" }), flexShrink: 0 }}>Add</button>
        </div>}
        {!showEquipOther && <div style={{ height: 4 }} />}
        <div style={{ background: L, borderRadius: 12, margin: "0 16px 8px", padding: "9px 12px", fontSize: 11, color: M }}>🏛 Amenities (parking, WiFi, toilets…) apply to the whole studio — set them in <span style={{ fontWeight: 600, cursor: "pointer" }} onClick={() => go("vendor-studio")}>Studio profile →</span></div>

        {/* Gear & technology — organised by category so the app knows what each item is */}
        <div style={{ margin: "8px 16px 4px" }}><label style={css.label}>🎛 Gear & technology <span style={{ color: "#bbb", fontWeight: 400 }}>· makes you findable in search</span></label></div>
        <div style={{ margin: "0 16px 8px", fontSize: 11, color: "#888", lineHeight: 1.45 }}>Add your gear under each category so it shows in the right group (Microphones, DAWs, Monitors…). Turn categories on or off to match your studio — a rehearsal room might hide Video & Lights; a film studio shows them.</div>

        {/* category include/exclude */}
        <div style={{ margin: "0 16px 8px", padding: "10px 12px", border: `1px solid ${BORDER}`, borderRadius: 12, background: GREY }}>
          <div style={{ fontSize: 10.5, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5, marginBottom: 7 }}>Categories shown on your listing</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 7 }}>
            {ALL_GEAR_CATS.map(c => { const on = vGearActiveCats.includes(c); return <button key={c} onClick={() => { if (on) { setVGearActiveCats(p => p.filter(x => x !== c)); } else { setVGearActiveCats(p => [...p, c]); } }} style={{ ...css.fc(on), fontSize: 10.5 }}>{on ? "✓ " : "+ "}{c}</button>; })}
          </div>
          <div style={{ fontSize: 10, color: "#aaa", marginTop: 6 }}>Tap to show/hide. Hiding a category with gear in it just hides it — your gear is kept.</div>
        </div>

        {/* per-category gear editors */}
        {vGearActiveCats.map(cat => {
          const items = vGearCats[cat] || [];
          const isAdding = gearInputCat === cat;
          return <div key={cat} style={{ ...css.card({ margin: "0 16px 8px" }), padding: 12 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 8 }}>
              <span style={{ fontSize: 12.5, fontWeight: 700, color: D, flex: 1 }}>{cat}</span>
              <span style={{ fontSize: 10, color: "#aaa" }}>{items.length} item{items.length !== 1 ? "s" : ""}</span>
            </div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 7, marginBottom: items.length ? 8 : 0 }}>
              {items.map(g => <button key={g} onClick={() => setVGearCats(p => ({ ...p, [cat]: p[cat].filter(x => x !== g) }))} style={css.fc(true)}>{g} ✕</button>)}
            </div>
            {isAdding
              ? <div style={{ position: "relative" }}>
                  <input value={gearInput} onChange={e => setGearInput(e.target.value)} placeholder={`Add to ${cat}…`} style={css.input} autoFocus />
                  {gearInput.trim() && (() => {
                    const q = gearInput.trim().toLowerCase();
                    // suggest library items belonging to THIS category, plus anything matching
                    const inCat = (GEAR_LIBRARY[cat] || []).filter(g => g.toLowerCase().includes(q) && !items.includes(g));
                    const elsewhere = ALL_GEAR.filter(g => g.toLowerCase().includes(q) && gearCatOf(g) !== cat && !(vGearCats[cat] || []).includes(g)).slice(0, 3);
                    const exact = ALL_GEAR.some(g => g.toLowerCase() === q) || items.some(g => g.toLowerCase() === q);
                    const add = (g) => { setVGearCats(p => ({ ...p, [cat]: [...(p[cat] || []), g] })); setGearInput(""); showToast(`✅ ${g} added to ${cat}`); };
                    return <div style={{ border: `1px solid ${BORDER}`, borderRadius: 10, marginTop: 6, overflow: "hidden" }}>
                      {inCat.map(g => <div key={g} onClick={() => add(g)} style={{ padding: "9px 12px", fontSize: 12.5, color: D, cursor: "pointer", borderBottom: `0.5px solid #f5f5f5`, display: "flex", alignItems: "center", gap: 8 }}>🎛 {g}<span style={{ marginLeft: "auto", fontSize: 9.5, color: G.fg, fontWeight: 700 }}>in our list</span></div>)}
                      {elsewhere.map(g => <div key={g} onClick={() => add(g)} style={{ padding: "9px 12px", fontSize: 12, color: "#888", cursor: "pointer", borderBottom: `0.5px solid #f5f5f5`, display: "flex", alignItems: "center", gap: 8 }}>🎛 {g}<span style={{ marginLeft: "auto", fontSize: 9.5, color: "#bbb" }}>usually in {gearCatOf(g)}</span></div>)}
                      {!exact && <div onClick={() => add(gearInput.trim())} style={{ padding: "9px 12px", fontSize: 12.5, color: M, cursor: "pointer", background: L, display: "flex", alignItems: "center", gap: 8 }}><span style={{ fontSize: 14, fontWeight: 700 }}>+</span> Add “{gearInput.trim()}”<span style={{ marginLeft: "auto", fontSize: 9.5, color: "#999" }}>new · we'll review</span></div>}
                    </div>;
                  })()}
                  <button onClick={() => { setGearInputCat(null); setGearInput(""); }} style={{ ...css.gbtn(), marginTop: 7, fontSize: 11 }}>Done</button>
                </div>
              : <button onClick={() => { setGearInputCat(cat); setGearInput(""); }} style={{ ...css.gbtn({ color: D }), fontSize: 11.5, width: "100%" }}>+ Add gear to {cat}</button>}
          </div>;
        })}
        {vGearActiveCats.length === 0 && <div style={{ margin: "0 16px 8px", fontSize: 11.5, color: "#aaa", textAlign: "center", padding: "16px" }}>Turn on a category above to start adding gear.</div>}
        <div style={{ background: G.bg, borderRadius: 12, margin: "0 16px 10px", padding: "9px 12px", fontSize: 10.5, color: G.fg, lineHeight: 1.45 }}>💡 The more gear you list, the more searches you show up in. Picking from our list keeps spelling consistent; anything new is reviewed and added to Recki's gear library.</div>
        <div style={{ margin: "0 16px 4px" }}><label style={css.label}>Paid add-ons & their prices</label></div>
        <div style={{ margin: "0 16px 8px", fontSize: 11, color: "#888" }}>These are billed on top of the room rate when a musician adds them while booking.</div>
        {extrasList.map((e, i) =>
          <div key={e.k} style={{ ...css.card(), padding: "10px 12px", display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{ flex: 1, fontSize: 13, color: D }}>{e.label}</span>
            <span style={{ fontSize: 12, color: "#888" }}>€</span>
            <input type="number" value={e.p} onChange={ev => { const val = parseFloat(ev.target.value) || 0; setExtrasList(list => list.map((x, j) => j === i ? { ...x, p: val } : x)); }} style={{ ...css.input, width: 64, padding: "7px 8px", fontSize: 13, textAlign: "right" }} />
            <span style={{ fontSize: 11, color: "#aaa" }}>/session</span>
            <button onClick={() => { setExtrasList(list => list.filter((_, j) => j !== i)); showToast("Add-on removed"); }} style={{ border: "none", background: R.bg, color: R.fg, width: 28, height: 28, borderRadius: 8, fontSize: 12, cursor: "pointer", flexShrink: 0, fontFamily: "inherit" }}>🗑</button>
          </div>)}
        <div style={{ display: "flex", gap: 7, margin: "4px 16px 4px" }}>
          <input value={newExtraLabel} onChange={e => setNewExtraLabel(e.target.value)} placeholder="New add-on, e.g. 🎚 Extra monitor" style={{ ...css.input, flex: 1 }} />
          <input type="number" value={newExtraPrice} onChange={e => setNewExtraPrice(e.target.value)} placeholder="€" style={{ ...css.input, width: 64, textAlign: "right" }} />
        </div>
        <button style={css.sbtn()} onClick={() => { const lbl = newExtraLabel.trim(); const pr = parseFloat(newExtraPrice); if (!lbl || isNaN(pr)) { showToast("Enter a name and price"); return; } setExtrasList(list => [...list, { k: "x" + Date.now(), label: lbl, p: pr }]); setNewExtraLabel(""); setNewExtraPrice(""); showToast(`✅ ${lbl} added at €${pr.toFixed(2)}`); }}>+ Add paid add-on</button>
        <div style={{ height: 6 }} />
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Good to know / details</label>
          <textarea defaultValue="Ring the bell marked 'Studio' on arrival. Load-in via the rear courtyard. House rules: no smoking indoors, please clean up after your session." style={{ ...css.input, resize: "none", height: 70 }} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Type</label><select style={css.input}><option>Rehearsal room</option><option>Recording studio</option><option>Both</option></select></div>
        <div style={{ margin: "0 16px 4px" }}><label style={css.label}>Studio services — what you offer & their price range</label></div>
        <div style={{ margin: "0 16px 8px", fontSize: 11, color: "#888" }}>Toggle a service on, then set its typical price range. Musicians see "from €X"; you set the exact price at the end of the session based on what was actually done.</div>
        {vServices.map((sv, i) =>
          <div key={sv.label} style={{ ...css.card(), padding: "10px 12px" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <span style={{ flex: 1, fontSize: 13, fontWeight: 500, color: sv.on ? D : "#aaa" }}>{sv.label}{!SERVICE_OPTS.includes(sv.label) && <span style={{ ...css.pill(L && { bg: L, fg: M }), marginLeft: 6, fontSize: 9 }}>custom</span>}</span>
              {!SERVICE_OPTS.includes(sv.label) && <button onClick={() => setVServices(p => p.filter((_, j) => j !== i))} style={{ border: "none", background: R.bg, color: R.fg, width: 26, height: 26, borderRadius: 7, fontSize: 11, cursor: "pointer", fontFamily: "inherit" }}>🗑</button>}
              <button onClick={() => setVServices(p => p.map((x, j) => j === i ? { ...x, on: !x.on } : x))} style={{ width: 44, height: 26, borderRadius: 13, border: "none", cursor: "pointer", background: sv.on ? G.bg : "#e5e5e8", position: "relative", flexShrink: 0, padding: 0 }}>
                <div style={{ width: 20, height: 20, borderRadius: "50%", background: sv.on ? G.fg : "#bbb", position: "absolute", top: 3, left: sv.on ? 21 : 3, transition: "left .15s" }} />
              </button>
            </div>
            {sv.on && <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 8 }}>
              <span style={{ fontSize: 11, color: "#888", width: 64 }}>Price range</span>
              <span style={{ fontSize: 12, color: "#888" }}>€</span>
              <input type="number" value={sv.from} onChange={e => { const v = parseFloat(e.target.value) || 0; setVServices(p => p.map((x, j) => j === i ? { ...x, from: v } : x)); }} style={{ ...css.input, width: 58, padding: "7px 8px", fontSize: 13, textAlign: "right" }} />
              <span style={{ color: "#bbb" }}>–</span>
              <span style={{ fontSize: 12, color: "#888" }}>€</span>
              <input type="number" value={sv.to} onChange={e => { const v = parseFloat(e.target.value) || 0; setVServices(p => p.map((x, j) => j === i ? { ...x, to: v } : x)); }} style={{ ...css.input, width: 58, padding: "7px 8px", fontSize: 13, textAlign: "right" }} />
            </div>}
          </div>)}
        <div style={{ display: "flex", gap: 8, margin: "4px 16px 6px" }}>
          <input value={svcInput} onChange={e => setSvcInput(e.target.value)} placeholder="Add a service, e.g. 🎙 Podcast recording" style={{ ...css.input, flex: 1 }} />
          <button onClick={() => { const v = svcInput.trim(); if (!v) return; setVServices(p => p.some(x => x.label === v) ? p : [...p, { label: v, on: true, from: 40, to: 60 }]); setSvcInput(""); showToast(`✅ ${v} added`); }} style={{ ...css.gbtn({ fontSize: 12, padding: "0 16px" }), flexShrink: 0 }}>Add</button>
        </div>
        <div style={{ background: L, borderRadius: 12, margin: "0 16px 8px", padding: "9px 12px", fontSize: 11, color: M }}>💡 The final price for a service is confirmed by you at the end of the session — the musician reviews and pays in the app.</div>
        <div style={{ margin: "0 16px 4px" }}><label style={css.label}>Policies <span style={{ color: "#bbb", fontWeight: 400 }}>· musicians see this before booking</span></label></div>
        <div style={{ margin: "0 16px 8px" }}>
          <div style={{ fontSize: 11, color: "#888", marginBottom: 5 }}>Free cancellation up to</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 7, marginBottom: 10 }}>
            {[["12h", "12 hours"], ["24h", "24 hours"], ["48h", "48 hours"], ["none", "No free cancellation"]].map(([k, l]) => <button key={k} onClick={() => setVCancelWindow(k)} style={css.fc(vCancelWindow === k)}>{l}</button>)}
          </div>
          {vCancelWindow !== "none" && <>
            <div style={{ fontSize: 11, color: "#888", marginBottom: 5 }}>If they cancel later than that, charge</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 7, marginBottom: 10 }}>
              {[["0", "Nothing"], ["50", "50%"], ["100", "Full amount"]].map(([k, l]) => <button key={k} onClick={() => setVLateCharge(k)} style={css.fc(vLateCharge === k)}>{l}</button>)}
            </div>
          </>}
          <div style={{ fontSize: 11, color: "#888", marginBottom: 5 }}>No-show (doesn't turn up)</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 7, marginBottom: 10 }}>
            {[["0", "No charge"], ["50", "Charge 50%"], ["full", "Charge full amount"]].map(([k, l]) => <button key={k} onClick={() => setVNoShow(k)} style={css.fc(vNoShow === k)}>{l}</button>)}
          </div>
          <label style={css.label}>Extra note <span style={{ color: "#bbb", fontWeight: 400 }}>· optional</span></label>
          <textarea value={vPolicyNote} onChange={e => setVPolicyNote(e.target.value)} rows={2} placeholder="Anything else musicians should know about your policies." style={{ ...css.input, resize: "none", lineHeight: 1.4 }} />
          <div style={{ background: GREY, borderRadius: 10, padding: "10px 12px", marginTop: 8, fontSize: 11.5, color: "#555", lineHeight: 1.55 }}>
            <div style={{ fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5, marginBottom: 4 }}>Preview — what musicians see</div>
            {vCancelWindow === "none"
              ? "No free cancellation. "
              : `Free cancellation with 100% refund up to ${vCancelWindow === "12h" ? "12 hours" : vCancelWindow === "24h" ? "24 hours" : "48 hours"} before. ${vLateCharge === "0" ? "No charge for later cancellations. " : `${vLateCharge === "100" ? "Full amount" : vLateCharge + "%"} charged after that. `}`}
            {vNoShow === "0" ? "No-shows aren't charged. " : vNoShow === "50" ? "No-shows charged 50%. " : "No-shows charged in full. "}
            {vPolicyNote.trim() ? vPolicyNote.trim() : ""}
          </div>
        </div>
        <div style={{ background: L, borderRadius: 12, margin: "0 16px 4px", padding: "10px 13px", fontSize: 12, color: M }}>🕘 Opening hours & breaks live in <span style={{ fontWeight: 600, cursor: "pointer" }} onClick={() => go("vendor-hours")}>Hours →</span></div>
        <div style={{ background: L, borderRadius: 12, margin: "0 16px 8px", padding: "10px 13px", fontSize: 12, color: M }}>💶 Day & hour pricing rules live in <span style={{ fontWeight: 600, cursor: "pointer" }} onClick={() => go("vendor-pricing")}>Pricing →</span></div>
        <button style={css.pbtn()} onClick={() => { goBack(); showToast("✅ Listing saved!"); }}>Save changes</button>
        <div style={{ height: 16 }} />
      </div>
    </div>,

    "vendor-pricing": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Pricing</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Different prices for days & hours</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={{ background: L, borderRadius: 12, margin: "0 16px 10px", padding: "10px 13px", fontSize: 12, color: M }}>🎛 Prices for paid add-ons (cymbals, amps, recording…) are set per room in <span style={{ fontWeight: 600, cursor: "pointer" }} onClick={() => go("vendor-edit")}>Listings → Edit →</span></div>
        <div style={css.card()}>
          <div style={{ padding: "12px 14px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <div><div style={{ fontSize: 13, fontWeight: 600, color: D }}>Base rate — Room A</div><div style={{ fontSize: 11, color: "#888", marginTop: 2 }}>Applies when no rule matches</div></div>
            <strong style={{ fontSize: 16, color: D }}>€12/hr</strong>
          </div>
        </div>
        <SectionTitle>Price rules</SectionTitle>
        {priceRules.map((r, i) =>
          <div key={i} style={{ ...css.card(), padding: "12px 14px", display: "flex", alignItems: "center", gap: 10 }}>
            <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>{r.d} · {r.w}</div><div style={{ fontSize: 11, color: "#888", marginTop: 2 }}>Overrides base rate</div></div>
            <strong style={{ fontSize: 15, color: D }}>€{r.p}/hr</strong>
            <button onClick={() => { setPriceRules(rs => rs.filter((_, j) => j !== i)); showToast("Rule removed"); }} style={css.dbtn}>✕</button>
          </div>)}
        <SectionTitle>Add a rule</SectionTitle>
        <div style={css.card({ padding: 14 })}>
          <div style={{ marginBottom: 10 }}><label style={css.label}>Days</label><select value={ruleDay} onChange={e => setRuleDay(e.target.value)} style={css.input}><option>Weekdays</option><option>Weekends</option><option>All days</option></select></div>
          <div style={{ marginBottom: 10 }}><label style={css.label}>Time window <span style={{ color: "#bbb", fontWeight: 400 }}>· set your own hours</span></label>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <input type="time" value={ruleFrom} onChange={e => setRuleFrom(e.target.value)} style={{ ...css.input, flex: 1, minWidth: 0 }} />
              <span style={{ color: "#bbb" }}>–</span>
              <input type="time" value={ruleTo} onChange={e => setRuleTo(e.target.value)} style={{ ...css.input, flex: 1, minWidth: 0 }} />
            </div>
          </div>
          <div style={{ marginBottom: 12 }}><label style={css.label}>Price per hour (€)</label><input type="number" value={rulePrice} onChange={e => setRulePrice(e.target.value)} style={css.input} /></div>
          <button style={{ ...css.pbtn(), width: "100%", margin: 0 }} onClick={() => { if (ruleFrom >= ruleTo) { showToast("End time must be after start"); return; } setPriceRules(rs => [...rs, { d: ruleDay, w: `${ruleFrom}–${ruleTo}`, p: rulePrice }]); showToast("✅ Price rule added"); }}>+ Add rule</button>
        </div>
        <div style={{ background: L, borderRadius: 12, margin: "0 16px 10px", padding: "10px 13px", fontSize: 12, color: M }}>💡 Musicians see "from €9/hr" in search — your cheapest active rate.</div>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "vendor-promos": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Discounts</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Pick the days you want to fill</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        {discounts.map((dc, i) =>
          <div key={i} style={{ background: G.bg, borderRadius: 14, margin: "0 16px 10px", padding: "12px 14px", display: "flex", alignItems: "center", gap: 10 }}>
            <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 700, color: G.fg }}>−{dc.pct}% active</div><div style={{ fontSize: 11, color: G.fg, marginTop: 2 }}>{dc.days}</div></div>
            <button onClick={() => { setDiscounts(ds => ds.filter((_, j) => j !== i)); showToast("Discount ended"); }} style={css.dbtn}>End</button>
          </div>)}
        <SectionTitle>Create a discount</SectionTitle>
        <div style={css.card({ padding: 14 })}>
          <label style={css.label}>Discount %</label>
          <input type="number" value={discPct} onChange={e => setDiscPct(e.target.value)} style={{ ...css.input, marginBottom: 12 }} />
          <label style={css.label}>Choose the days</label>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 7, marginBottom: 12 }}>
            {discDayOpts.map(dd => {
              const on = discDays.includes(dd);
              return <button key={dd} onClick={() => setDiscDays(p => on ? p.filter(x => x !== dd) : [...p, dd])} style={css.fc(on)}>{dd}</button>;
            })}
          </div>
          <label style={css.label}>When in the day?</label>
          <div style={{ display: "flex", gap: 8, marginBottom: discAllDay ? 12 : 8 }}>
            <button onClick={() => setDiscAllDay(true)} style={{ ...css.fc(discAllDay), flex: 1, padding: "9px 0" }}>All opening hours</button>
            <button onClick={() => setDiscAllDay(false)} style={{ ...css.fc(!discAllDay), flex: 1, padding: "9px 0" }}>Specific hours</button>
          </div>
          {!discAllDay && <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
            <input type="time" value={discFrom} onChange={e => setDiscFrom(e.target.value)} style={{ ...css.input, flex: 1, minWidth: 0 }} />
            <span style={{ color: "#bbb" }}>–</span>
            <input type="time" value={discTo} onChange={e => setDiscTo(e.target.value)} style={{ ...css.input, flex: 1, minWidth: 0 }} />
          </div>}
          <button style={{ ...css.pbtn(), width: "100%", margin: 0 }} onClick={() => { if (!discDays.length) { showToast("Pick at least one day"); return; } if (!discAllDay && discFrom >= discTo) { showToast("End time must be after start"); return; } const when = discAllDay ? "all hours" : `${discFrom}–${discTo}`; setDiscounts(ds => [...ds, { pct: discPct, days: discDays.join(", ") + " · " + when }]); setDiscDays([]); setDiscAllDay(true); showToast("✅ Discount live — badge shown in search"); }}>Create discount</button>
        </div>
        <div style={{ background: L, borderRadius: 12, margin: "0 16px 10px", padding: "10px 13px", fontSize: 12, color: M }}>💡 Your mornings run 22% full — a weekday-morning discount could fill them.</div>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "vendor-featured": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Boost placement</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>€5/day · climb 5 positions in search</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 10 }}>
        <div style={css.card()}>
          <div style={{ padding: 14 }}>
            <div style={{ fontSize: 22, fontWeight: 800, color: D, marginBottom: 4 }}>€5 <span style={{ fontSize: 13, fontWeight: 400, color: "#888" }}>/day</span></div>
            <div style={{ fontSize: 12, color: "#555", lineHeight: 1.6, marginBottom: 10 }}>Your listing climbs <strong>5 positions higher</strong> in your city's results and gets an "↑ Boosted" badge. It doesn't jump the whole queue — search stays trustworthy for musicians.</div>
            <div style={{ fontSize: 12, color: "#888", marginBottom: 8 }}><span style={{ color: M, fontWeight: 600 }}>4 days used</span> · 3 remaining this month</div>
            <div style={{ fontSize: 12, fontWeight: 700, color: D, marginBottom: 6 }}>June 2026 — full month</div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(7,1fr)", gap: 5, marginBottom: 8 }}>
              {["M", "T", "W", "T", "F", "S", "S"].map((dl, i) => <div key={i} style={{ textAlign: "center", fontSize: 9, color: "#888" }}>{dl}</div>)}
              {Array.from({ length: 30 }).map((_, i) => {
                const n = i + 1, a = [12, 13, 14, 20].includes(n);
                return <div key={n} onClick={() => !a && showToast(`${n} June selected — €5`)} style={{ textAlign: "center", fontSize: 11, fontWeight: 600, background: a ? D : L, color: a ? "#fff" : M, borderRadius: 7, padding: "6px 0", cursor: a ? "default" : "pointer" }}>{n}</div>;
              })}
            </div>
            <div style={{ fontSize: 10, color: "#888" }}>Dark = boosted · light = tap to add</div>
          </div>
        </div>
        <div style={{ background: L, borderRadius: 12, margin: "0 16px 10px", padding: "10px 13px", fontSize: 12, color: M }}>📊 Last boost: +38 views, 3 extra bookings.</div>
        <button style={css.pbtn()} onClick={() => showToast("✅ Boost days updated!")}>Confirm boost days</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "vendor-photos": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Room photos</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Room A · {photos.length} of 6 · tap a photo to set cover</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, padding: "0 16px" }}>
          {photos.map((pc, i) =>
            <div key={i} onClick={() => { setCover(i); showToast("✅ Cover photo updated"); }} style={{ height: 96, borderRadius: 14, background: `linear-gradient(135deg, ${pc}, ${pc}cc)`, position: "relative", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", color: "rgba(255,255,255,.65)", fontSize: 10, fontWeight: 700, letterSpacing: 1.5 }}>
              PHOTO {i + 1}
              {cover === i && <span style={{ position: "absolute", top: 7, left: 7, background: GOLD, color: D, fontSize: 9, fontWeight: 700, padding: "3px 8px", borderRadius: 8 }}>COVER</span>}
              <button onClick={e => { e.stopPropagation(); setPhotos(p => p.filter((_, j) => j !== i)); if (cover === i) setCover(0); else if (cover > i) setCover(cover - 1); showToast("Photo removed"); }} style={{ position: "absolute", top: 6, right: 6, width: 22, height: 22, borderRadius: "50%", border: "none", background: "rgba(0,0,0,.45)", color: "#fff", fontSize: 11, cursor: "pointer" }}>✕</button>
            </div>)}
          {Array.from({ length: Math.max(0, 6 - photos.length) }).map((_, i) =>
            <div key={"add" + i} onClick={() => { setPhotos(p => [...p, ["#5B8AD6", "#E07A7A", "#4CAF8A"][p.length % 3]]); showToast("📷 Photo added"); }} style={{ height: 96, borderRadius: 14, border: `1.5px dashed ${BORDER}`, background: "#fff", display: "flex", alignItems: "center", justifyContent: "center", color: "#999", fontSize: 12, fontWeight: 600, cursor: "pointer" }}>+ Add photo</div>)}
        </div>
        <div style={{ background: L, borderRadius: 12, margin: "12px 16px 8px", padding: "10px 13px", fontSize: 12, color: M, lineHeight: 1.5 }}>💡 Show the full room and the drum kit — listings with 6 photos get the most bookings.</div>
        <button style={css.pbtn()} onClick={() => showToast("✅ Photos saved")}>Save</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "vendor-hours": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Opening hours</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Hours & breaks generate your bookable slots</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        {vHours.map((h, i) =>
          <div key={h.d} style={{ ...css.card(), padding: "11px 14px" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <div style={{ width: 76, fontSize: 12.5, fontWeight: 600, color: h.on ? D : "#bbb", flexShrink: 0 }}>{h.d}</div>
              {h.on ? <>
                <input type="time" value={h.o} onChange={e => setVHours(v => v.map((x, j) => j === i ? { ...x, o: e.target.value } : x))} style={{ ...css.input, width: 82, padding: "7px 6px", fontSize: 12 }} />
                <span style={{ color: "#bbb" }}>–</span>
                <input type="time" value={h.c} onChange={e => setVHours(v => v.map((x, j) => j === i ? { ...x, c: e.target.value } : x))} style={{ ...css.input, width: 82, padding: "7px 6px", fontSize: 12 }} />
              </> : <div style={{ flex: 1, fontSize: 12, color: "#bbb" }}>Closed</div>}
              <button onClick={() => setVHours(v => v.map((x, j) => j === i ? { ...x, on: !x.on } : x))} style={{ marginLeft: "auto", width: 44, height: 26, borderRadius: 13, border: "none", cursor: "pointer", background: h.on ? G.bg : "#e5e5e8", position: "relative", flexShrink: 0, padding: 0 }}>
                <div style={{ width: 20, height: 20, borderRadius: "50%", background: h.on ? G.fg : "#bbb", position: "absolute", top: 3, left: h.on ? 21 : 3, transition: "left .15s" }} />
              </button>
            </div>
            {h.on && (h.brk ?
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 8, paddingLeft: 8 }}>
                <div style={{ width: 68, fontSize: 11, color: A.fg, flexShrink: 0 }}>☕ Break</div>
                <input type="time" value={h.bo} onChange={e => setVHours(v => v.map((x, j) => j === i ? { ...x, bo: e.target.value } : x))} style={{ ...css.input, width: 82, padding: "6px", fontSize: 12, background: A.bg, border: "none" }} />
                <span style={{ color: "#bbb" }}>–</span>
                <input type="time" value={h.bc} onChange={e => setVHours(v => v.map((x, j) => j === i ? { ...x, bc: e.target.value } : x))} style={{ ...css.input, width: 82, padding: "6px", fontSize: 12, background: A.bg, border: "none" }} />
                <button onClick={() => setVHours(v => v.map((x, j) => j === i ? { ...x, brk: false } : x))} style={{ marginLeft: "auto", border: "none", background: "transparent", color: "#bbb", fontSize: 13, cursor: "pointer" }}>✕</button>
              </div>
              : <button onClick={() => setVHours(v => v.map((x, j) => j === i ? { ...x, brk: true } : x))} style={css.gbtn({ marginTop: 8, fontSize: 10, padding: "5px 11px" })}>+ Add break</button>)}
          </div>)}
        <div style={{ background: L, borderRadius: 12, margin: "0 16px 8px", padding: "10px 13px", fontSize: 12, color: M }}>☕ Slots inside a break aren't bookable — e.g. lunch or cleaning time.</div>
        <div style={{ margin: "0 16px 6px" }}><label style={css.label}>Holiday & one-off exceptions</label></div>
        {holidays.length === 0
          ? <div style={{ margin: "0 16px 6px", fontSize: 12, color: "#999" }}>No exceptions yet. Add days when you're closed or have special hours.</div>
          : holidays.map((h, i) =>
            <div key={i} style={{ ...css.card(), padding: "11px 14px", display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ fontSize: 18 }}>{h.closed ? "🚫" : "🕘"}</span>
              <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>{h.label || "Exception"}</div><div style={{ fontSize: 11, color: "#888" }}>{new Date(h.date).toLocaleDateString("en-GB", { weekday: "short", day: "numeric", month: "short", year: "numeric" })} · {h.closed ? "Closed all day" : `Open ${h.o}–${h.c}`}</div></div>
              <button onClick={() => { setHolidays(hs => hs.filter((_, j) => j !== i)); showToast("Exception removed"); }} style={{ border: "none", background: R.bg, color: R.fg, width: 30, height: 30, borderRadius: 9, fontSize: 13, cursor: "pointer", flexShrink: 0, fontFamily: "inherit" }}>🗑</button>
            </div>)}
        <button style={css.sbtn()} onClick={() => setHolidayModal(true)}>+ Add holiday exception</button>
        <button style={css.pbtn()} onClick={() => showToast("✅ Hours saved — slots regenerated")}>Save hours</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "vendor-plan": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Your plan</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{curStudio.name}</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        {!subActive && <div style={{ background: trialDaysLeft <= 14 ? R.bg : A.bg, borderRadius: 12, margin: "0 16px 12px", padding: "12px 14px" }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: trialDaysLeft <= 14 ? R.fg : A.fg }}>🎁 Free trial · {trialDaysLeft} days left</div>
          <div style={{ fontSize: 11.5, color: trialDaysLeft <= 14 ? R.fg : A.fg, lineHeight: 1.5, marginTop: 3 }}>Your first 3 months are free. After that, a subscription keeps your studio listed and bookable. Cancel anytime.</div>
        </div>}
        {subActive && <div style={{ background: G.bg, borderRadius: 12, margin: "0 16px 12px", padding: "12px 14px" }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: G.fg }}>✅ {subCycle === "annual" ? "Annual" : "Monthly"} plan active</div>
          <div style={{ fontSize: 11.5, color: G.fg, lineHeight: 1.5, marginTop: 3 }}>{subCycle === "annual" ? `€${subAnnual(rooms.length)}/year · renews automatically` : `€${subMonthly(rooms.length)}/month · renews automatically`}. Adding or removing rooms updates your price.</div>
        </div>}

        <div style={{ margin: "0 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Priced by your rooms</div>
        <div style={css.card()}>
          <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 14px", borderBottom: `0.5px solid #f5f5f5` }}><span style={{ fontSize: 12.5, color: "#555" }}>1st room</span><strong style={{ fontSize: 12.5, color: D }}>€{SUB_FIRST}/mo</strong></div>
          <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 14px", borderBottom: `0.5px solid #f5f5f5` }}><span style={{ fontSize: 12.5, color: "#555" }}>Each additional room</span><strong style={{ fontSize: 12.5, color: D }}>+€{SUB_EXTRA}/mo</strong></div>
          <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 14px", background: GREY }}><span style={{ fontSize: 12.5, fontWeight: 600, color: D }}>You have {rooms.length} room{rooms.length === 1 ? "" : "s"}</span><strong style={{ fontSize: 13, color: D }}>€{subMonthly(rooms.length)}/mo</strong></div>
        </div>

        <div style={{ margin: "10px 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Billing cycle</div>
        <div style={{ padding: "0 16px" }}>
          <div onClick={() => setSubCycle("monthly")} style={{ ...css.card({ margin: "0 0 8px" }), padding: "12px 14px", display: "flex", alignItems: "center", gap: 11, cursor: "pointer", border: `1.5px solid ${subCycle === "monthly" ? D : BORDER}` }}>
            <div style={{ width: 20, height: 20, borderRadius: "50%", border: `2px solid ${subCycle === "monthly" ? D : "#ccc"}`, display: "flex", alignItems: "center", justifyContent: "center" }}>{subCycle === "monthly" && <div style={{ width: 10, height: 10, borderRadius: "50%", background: D }} />}</div>
            <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>Monthly</div><div style={{ fontSize: 11, color: "#888" }}>Pay as you go · cancel anytime</div></div>
            <strong style={{ fontSize: 14, color: D }}>€{subMonthly(rooms.length)}<span style={{ fontSize: 11, color: "#888", fontWeight: 400 }}>/mo</span></strong>
          </div>
          <div onClick={() => setSubCycle("annual")} style={{ ...css.card({ margin: "0 0 8px" }), padding: "12px 14px", display: "flex", alignItems: "center", gap: 11, cursor: "pointer", border: `1.5px solid ${subCycle === "annual" ? D : BORDER}`, position: "relative" }}>
            <div style={{ width: 20, height: 20, borderRadius: "50%", border: `2px solid ${subCycle === "annual" ? D : "#ccc"}`, display: "flex", alignItems: "center", justifyContent: "center" }}>{subCycle === "annual" && <div style={{ width: 10, height: 10, borderRadius: "50%", background: D }} />}</div>
            <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>Annual <span style={{ ...css.pill(G), marginLeft: 4 }}>1 month free</span></div><div style={{ fontSize: 11, color: "#888" }}>€{subAnnual(rooms.length)}/yr · pay 11, get 12</div></div>
            <strong style={{ fontSize: 14, color: D }}>€{(subAnnual(rooms.length) / 12).toFixed(2)}<span style={{ fontSize: 11, color: "#888", fontWeight: 400 }}>/mo</span></strong>
          </div>
        </div>
        <div style={{ background: L, borderRadius: 12, margin: "2px 16px 12px", padding: "10px 13px", fontSize: 11.5, color: M, lineHeight: 1.5 }}>{subCycle === "annual" ? `You're billed €${subAnnual(rooms.length)} once a year — that's one month free vs paying monthly.` : `Switch to annual to get one month free (€${subMonthly(rooms.length) * 12 - subAnnual(rooms.length)} saved a year).`}</div>

        <button style={css.pbtn()} onClick={() => { setSubActive(true); showToast(subCycle === "annual" ? `✅ Annual plan active · €${subAnnual(rooms.length)}/yr` : `✅ Monthly plan active · €${subMonthly(rooms.length)}/mo`); }}>{subActive ? "Update plan" : trialDaysLeft > 0 ? "Start plan after trial" : "Subscribe & keep listing"}</button>
        {subActive && <button style={css.sbtn({ color: R.fg, borderColor: R.bg })} onClick={() => { setSubActive(false); showToast("Subscription cancelled — active until period ends"); }}>Cancel subscription</button>}
        <div style={{ textAlign: "center", fontSize: 11, color: "#999", padding: "8px 16px 0" }}>This subscription is separate from the small per-booking fee.</div>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "vendor-payouts": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Payouts & bank</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{curStudio.name}</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={css.card()}>
          <div style={{ padding: "16px 14px", textAlign: "center", borderBottom: `0.5px solid ${BORDER}` }}>
            <div style={{ fontSize: 11, color: "#888", textTransform: "uppercase", letterSpacing: .5, marginBottom: 5 }}>Next payout</div>
            <div style={{ fontSize: 32, fontWeight: 800, color: D }}>€812</div>
            <div style={{ fontSize: 12, color: "#888", marginTop: 4 }}>Paid {nextPayout} · arrives in 2–3 business days</div>
          </div>
          <div style={{ padding: "12px 14px", display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ fontSize: 18 }}>🏦</span>
            <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>AT61 •••• •••• 3905</div><div style={{ fontSize: 11, color: "#888" }}>Erste Bank</div></div>
            <span style={css.pill(G)}>Verified</span>
          </div>
        </div>
        <div onClick={() => setPayoutModal(true)} style={{ ...css.card(), padding: "12px 14px", display: "flex", alignItems: "center", gap: 11, cursor: "pointer" }}>
          <span style={{ fontSize: 18 }}>🗓</span>
          <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>Payout schedule</div><div style={{ fontSize: 11, color: "#888", marginTop: 1 }}>{payoutFreq} · {payoutLabel}</div></div>
          <span style={{ ...css.gbtn({ fontSize: 11 }) }}>Change</span>
        </div>
        <SectionTitle>Payout history</SectionTitle>
        {[["1 June 2026", "€750"], ["1 May 2026", "€680"], ["1 April 2026", "€540"]].map(([pd, pv]) =>
          <div key={pd} style={{ ...css.card(), padding: "12px 14px", display: "flex", alignItems: "center" }}>
            <div style={{ flex: 1, fontSize: 13, color: D }}>{pd}</div>
            <span style={{ ...css.pill(G), marginRight: 10 }}>Paid</span>
            <strong style={{ fontSize: 13, color: D }}>{pv}</strong>
          </div>)}
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "vendor-earnings": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Earnings</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{curStudio.name}</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 10 }}>
        <div style={css.card()}>
          <div style={{ padding: "16px 14px", textAlign: "center", borderBottom: `0.5px solid ${BORDER}` }}>
            <div style={{ fontSize: 11, color: "#888", textTransform: "uppercase", letterSpacing: .5, marginBottom: 5 }}>June 2026</div>
            <div style={{ fontSize: 32, fontWeight: 800, color: D }}>€840</div>
            <div style={{ fontSize: 12, color: G.fg, marginTop: 4 }}>↑ 12% vs May · 31 bookings · all paid in app</div>
          </div>
          <div style={{ padding: "12px 14px" }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: D, marginBottom: 8 }}>Monthly history</div>
            {[["May 2026", "€750", "28"], ["April 2026", "€680", "25"], ["March 2026", "€540", "21"], ["February 2026", "€420", "16"]].map(([em, ev, en]) =>
              <div key={em} style={{ display: "flex", justifyContent: "space-between", padding: "8px 0", borderBottom: `0.5px solid ${GREY}` }}><span style={{ fontSize: 13, color: D }}>{em} <span style={{ color: "#bbb", fontSize: 11 }}>· {en} bookings</span></span><span style={{ fontSize: 13, fontWeight: 600, color: D }}>{ev}</span></div>)}
          </div>
        </div>
        <button style={css.sbtn()} onClick={() => go("vendor-payouts")}>Go to payouts →</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "vendor-reviews": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Reviews</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{curStudio.name}</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 10 }}>
        <div style={css.card()}>
          <div style={{ padding: 14, display: "flex", gap: 16, alignItems: "center" }}>
            <div style={{ textAlign: "center" }}><div style={{ fontSize: 32, fontWeight: 800, color: D }}>4.8</div><div style={{ color: GOLD, fontSize: 13 }}>★★★★★</div><div style={{ fontSize: 11, color: "#888", marginTop: 2 }}>34 reviews</div></div>
            <div style={{ flex: 1 }}>
              {[["5", 28], ["4", 4], ["3", 1], ["2", 1], ["1", 0]].map(([rs, rn]) =>
                <div key={rs} style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 3 }}>
                  <span style={{ fontSize: 10, color: "#888", width: 8 }}>{rs}</span>
                  <div style={{ flex: 1, height: 5, background: GREY, borderRadius: 3 }}><div style={{ width: `${(rn / 28) * 100}%`, height: 5, background: GOLD, borderRadius: 3 }} /></div>
                </div>)}
            </div>
          </div>
        </div>
        {reviews.map(rv =>
          <div key={rv.id} style={css.card()}><div style={{ padding: "12px 14px" }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 5 }}><span style={{ fontSize: 12, fontWeight: 600, color: D }}>{rv.name}</span><span style={{ color: GOLD, fontSize: 12 }}>{rv.stars}</span></div>
            <div style={{ fontSize: 12, color: "#555", lineHeight: 1.5 }}>{rv.text}</div>
            {rv.reply && reviewReplyId !== rv.id && <div style={{ marginTop: 8, marginLeft: 10, paddingLeft: 10, borderLeft: `2px solid ${L}` }}><div style={{ fontSize: 10, fontWeight: 700, color: M, marginBottom: 2 }}>↩ {curStudio.name} replied</div><div style={{ fontSize: 11.5, color: "#555", lineHeight: 1.5 }}>{rv.reply}</div></div>}
            {reviewReplyId === rv.id
              ? <div style={{ marginTop: 8 }}>
                  <textarea value={reviewReplyText} onChange={e => setReviewReplyText(e.target.value)} placeholder="Write a public reply…" style={{ ...css.input, resize: "none", height: 64 }} />
                  <div style={{ display: "flex", gap: 7, marginTop: 6 }}>
                    <button style={css.gbtn({ color: "#888" })} onClick={() => { setReviewReplyId(null); setReviewReplyText(""); }}>Cancel</button>
                    <button style={{ ...css.gbtn({ color: M }), flex: 1 }} onClick={() => { if (!reviewReplyText.trim()) { showToast("Write a reply first"); return; } setReviews(rs => rs.map(x => x.id === rv.id ? { ...x, reply: reviewReplyText.trim() } : x)); setReviewReplyId(null); setReviewReplyText(""); showToast("💬 Reply posted publicly"); }}>Post reply</button>
                  </div>
                </div>
              : <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 7 }}>
                  <span style={{ fontSize: 10, color: "#888" }}>{rv.date}</span>
                  <button style={css.gbtn({ fontSize: 10, padding: "5px 11px" })} onClick={() => { setReviewReplyId(rv.id); setReviewReplyText(rv.reply || ""); }}>{rv.reply ? "✏ Edit reply" : "↩ Reply"}</button>
                </div>}
          </div></div>)}
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "vendor-insights": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><h2 style={{ fontSize: 19, fontWeight: 700 }}>Insights</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{curStudio.name} · Last 30 days</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, padding: "0 16px" }}>
          {[["👀", "Profile views", "312", "↑ 18%"], ["🎯", "View → booking", "9%", "↑ 2pts"], ["↻", "Repeat customers", "41%", "steady"]].map(([sico, sl, sv, sd]) =>
            <div key={sl} style={{ background: "#fff", borderRadius: 14, border: `0.5px solid ${BORDER}`, padding: 12 }}>
              <div style={{ fontSize: 16 }}>{sico}</div>
              <div style={{ fontSize: 20, fontWeight: 800, color: D, margin: "4px 0 1px" }}>{sv}</div>
              <div style={{ fontSize: 10, color: "#888" }}>{sl}</div>
              <div style={{ fontSize: 10, color: G.fg, fontWeight: 600, marginTop: 2 }}>{sd}</div>
            </div>)}
        </div>
        <SectionTitle>Busiest hours</SectionTitle>
        <div style={{ ...css.card(), padding: "14px 14px 10px" }}>
          <div style={{ display: "flex", alignItems: "flex-end", gap: 5, height: 70 }}>
            {[["9", 20], ["11", 30], ["13", 45], ["15", 55], ["17", 75], ["19", 100], ["21", 80]].map(([bh, bv]) =>
              <div key={bh} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 3 }}>
                <div style={{ width: "100%", height: bv * 0.55, background: bv === 100 ? D : L, borderRadius: 4 }} />
                <span style={{ fontSize: 8, color: "#888" }}>{bh}h</span>
              </div>)}
          </div>
          <div style={{ fontSize: 11, color: "#888", marginTop: 8 }}>Peak: Thursdays 18–21 · consider a morning discount</div>
        </div>
        <SectionTitle>Top customers</SectionTitle>
        <div style={css.card()}>
          {[["MR", "Marco Rossi", "6 bookings · €151"], ["VA", "The Velvet Amps", "4 bookings · €144"], ["JK", "Julia Krause", "3 bookings · €72"]].map(([ti, tn, ts]) =>
            <div key={ti} style={css.row({ cursor: "default" })}>
              <div style={{ width: 34, height: 34, borderRadius: 9, background: L, color: M, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 12, fontWeight: 700, flexShrink: 0 }}>{ti}</div>
              <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 500, color: D }}>{tn}</div><div style={{ fontSize: 11, color: "#888" }}>{ts}</div></div>
            </div>)}
        </div>
        <div style={{ height: 16 }} />
      </div>
    </div>,

    "vendor-adjust": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Adjust session</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{vb ? vb.room : "Room A"} · {vb ? vb.who : "Marco Rossi"}</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={{ background: L, borderRadius: 12, margin: "0 16px 10px", padding: "10px 13px", fontSize: 12, color: M, lineHeight: 1.5 }}>Set the hours actually used, final service prices, and any extra charges or refunds. The musician reviews & confirms — then payment is captured.</div>
        <div style={{ ...css.card(), padding: "11px 14px", display: "flex", alignItems: "center", gap: 10 }}>
          <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>Hours used</div><div style={{ fontSize: 11, color: "#888" }}>Room & per-hour add-ons bill on this</div></div>
          <button onClick={() => setAdjHours(h => Math.max(1, h - 1))} style={{ width: 32, height: 32, borderRadius: 8, border: `1px solid ${BORDER}`, background: "#fff", color: D, fontSize: 18, cursor: "pointer", fontFamily: "inherit" }}>–</button>
          <span style={{ fontSize: 16, fontWeight: 700, color: D, minWidth: 30, textAlign: "center" }}>{adjHours}h</span>
          <button onClick={() => setAdjHours(h => Math.min(12, h + 1))} style={{ width: 32, height: 32, borderRadius: 8, border: `1px solid ${BORDER}`, background: "#fff", color: D, fontSize: 18, cursor: "pointer", fontFamily: "inherit" }}>+</button>
        </div>
        <div style={{ margin: "8px 16px 6px" }}><label style={css.label}>Services performed — set the final price</label></div>
        {vServices.filter(sv => sv.on).map(sv => {
          const used = adjServices[sv.label] !== undefined;
          return <div key={sv.label} style={{ ...css.card(), padding: "10px 12px" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <span style={{ flex: 1, fontSize: 13, fontWeight: 500, color: used ? D : "#aaa" }}>{sv.label} <span style={{ fontSize: 10, color: "#bbb" }}>· €{sv.from}–{sv.to}</span></span>
              <button onClick={() => setAdjServices(p => { const n = { ...p }; if (used) delete n[sv.label]; else n[sv.label] = sv.from; return n; })} style={{ width: 44, height: 26, borderRadius: 13, border: "none", cursor: "pointer", background: used ? G.bg : "#e5e5e8", position: "relative", flexShrink: 0, padding: 0 }}>
                <div style={{ width: 20, height: 20, borderRadius: "50%", background: used ? G.fg : "#bbb", position: "absolute", top: 3, left: used ? 21 : 3, transition: "left .15s" }} />
              </button>
            </div>
            {used && <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 8 }}>
              <span style={{ fontSize: 11, color: "#888", width: 70 }}>Final price</span>
              <span style={{ fontSize: 12, color: "#888" }}>€</span>
              <input type="number" value={adjServices[sv.label]} onChange={e => { const v = parseFloat(e.target.value) || 0; setAdjServices(p => ({ ...p, [sv.label]: v })); }} style={{ ...css.input, width: 72, padding: "7px 8px", fontSize: 13, textAlign: "right" }} />
              {(adjServices[sv.label] < sv.from || adjServices[sv.label] > sv.to) && <span style={{ fontSize: 10, color: A.fg }}>outside listed range</span>}
            </div>}
          </div>;
        })}
        <div style={{ margin: "12px 16px 6px" }}><label style={css.label}>Equipment add-ons used — billed €/hr × {adjHours}h</label></div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 7, padding: "0 16px 10px" }}>
          {extrasList.map(e => {
            const on = adjExtras.includes(e.k);
            return <button key={e.k} onClick={() => setAdjExtras(p => on ? p.filter(x => x !== e.k) : [...p, e.k])} style={css.fc(on)}>{e.label} €{e.p}/hr</button>;
          })}
        </div>
        <div style={{ margin: "4px 16px 6px" }}><label style={css.label}>Other charges or refunds</label></div>
        <div style={{ margin: "0 16px 6px", fontSize: 11, color: "#888" }}>Add a one-off charge (e.g. damage, cleaning) with a positive amount, or a refund/discount with a negative amount.</div>
        {adjCharges.map((c, i) =>
          <div key={i} style={{ ...css.card(), padding: "10px 12px", display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{ flex: 1, fontSize: 13, color: D }}>{c.label}</span>
            <strong style={{ fontSize: 13, color: c.amt < 0 ? G.fg : D }}>{c.amt < 0 ? "−" : "+"}€{Math.abs(c.amt).toFixed(2)}</strong>
            <button onClick={() => setAdjCharges(p => p.filter((_, j) => j !== i))} style={{ border: "none", background: R.bg, color: R.fg, width: 26, height: 26, borderRadius: 7, fontSize: 11, cursor: "pointer", flexShrink: 0, fontFamily: "inherit" }}>🗑</button>
          </div>)}
        <div style={{ display: "flex", gap: 7, margin: "0 16px 6px" }}>
          <input value={chargeLabel} onChange={e => setChargeLabel(e.target.value)} placeholder="Reason, e.g. Broken mic stand" style={{ ...css.input, flex: 1 }} />
          <input type="number" value={chargeAmt} onChange={e => setChargeAmt(e.target.value)} placeholder="±€" style={{ ...css.input, width: 70, textAlign: "right" }} />
        </div>
        <div style={{ display: "flex", gap: 7, margin: "0 16px 8px" }}>
          <button onClick={() => { const l = chargeLabel.trim(); const a = parseFloat(chargeAmt); if (!l || isNaN(a)) { showToast("Enter a reason and amount"); return; } setAdjCharges(p => [...p, { label: l, amt: Math.abs(a) }]); setChargeLabel(""); setChargeAmt(""); showToast(`✅ Charge added: +€${Math.abs(a).toFixed(2)}`); }} style={{ ...css.gbtn({ flex: 1, fontSize: 12, padding: "10px 0" }) }}>+ Add charge</button>
          <button onClick={() => { const l = chargeLabel.trim(); const a = parseFloat(chargeAmt); if (!l || isNaN(a)) { showToast("Enter a reason and amount"); return; } setAdjCharges(p => [...p, { label: l, amt: -Math.abs(a) }]); setChargeLabel(""); setChargeAmt(""); showToast(`✅ Refund added: −€${Math.abs(a).toFixed(2)}`); }} style={{ ...css.gbtn({ flex: 1, fontSize: 12, padding: "10px 0", background: G.bg, color: G.fg }) }}>− Add refund</button>
        </div>
        <div style={{ background: L, borderRadius: 12, margin: "0 16px 8px", padding: "10px 13px", fontSize: 11.5, color: M, lineHeight: 1.5 }}>🛡 The musician has 5 days to approve. If they don't respond, this total is charged automatically — so you're not left waiting.</div>
        <div style={css.card()}>
          {[[`Room · ${adjHours}h × €12`, `€${(12 * adjHours).toFixed(2)}`],
          ...Object.entries(adjServices).map(([l, v]) => [l, `€${Number(v).toFixed(2)}`]),
          ...adjExtras.map(k => { const e = extrasList.find(x => x.k === k); return [`${e.label} · ${adjHours}h × €${e.p}`, `+€${(e.p * adjHours).toFixed(2)}`]; }),
          ...adjCharges.map(c => [c.label, `${c.amt < 0 ? "−" : "+"}€${Math.abs(c.amt).toFixed(2)}`])].map(([l, v], idx) =>
            <div key={l + idx} style={{ display: "flex", justifyContent: "space-between", padding: "10px 14px", borderBottom: `0.5px solid #f5f5f5` }}><span style={{ fontSize: 13, color: "#888" }}>{l}</span><strong style={{ fontSize: 13, color: String(v).startsWith("−") ? G.fg : D }}>{v}</strong></div>)}
          <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 14px", borderTop: `1px solid ${BORDER}`, background: GREY }}>
            <span style={{ fontSize: 14, fontWeight: 600, color: D }}>You receive</span>
            <strong style={{ fontSize: 16, color: D }}>€{(12 * adjHours + Object.values(adjServices).reduce((a, v) => a + Number(v), 0) + adjExtras.reduce((a, k) => a + (extrasList.find(e => e.k === k)?.p || 0) * adjHours, 0) + adjCharges.reduce((a, c) => a + c.amt, 0)).toFixed(2)}</strong>
          </div>
        </div>
        <button style={css.pbtn()} onClick={() => { const svcLines = Object.entries(adjServices).map(([l, v]) => ({ label: l, amt: Number(v), was: 0, note: "Added at session" })); const exLines = adjExtras.map(k => { const e = extrasList.find(x => x.k === k); return { label: `${e.label} · ${adjHours}h × €${e.p}`, amt: e.p * adjHours, was: e.p * 2 }; }); const chLines = adjCharges.map(c => ({ label: c.label, amt: c.amt, was: 0 })); const roomLine = { label: `Room · ${adjHours}h × €12`, amt: 12 * adjHours, was: 24, note: adjHours > 2 ? `Ran ${adjHours - 2}h over` : undefined }; const lines = [roomLine, ...svcLines, ...exLines, ...chLines]; const finalTotal = lines.reduce((a, l) => a + l.amt, 0); setPendingAdj({ studio: curStudio.name, room: "Room A", date: "Wed, 11 Jun 2026", time: "13:00–15:00", bookedHours: 2, finalHours: adjHours, rate: 12, lines, bookedTotal: 30, finalTotal, studioNote: "", daysLeft: 5 }); showToast("🧾 Sent — auto-charges in 5 days if they don't respond"); goBack(); }}>Send to musician for confirmation</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "payment-done": <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", padding: "0 28px" }}>
      <div style={{ width: 84, height: 84, borderRadius: "50%", background: G.bg, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 40, marginBottom: 18 }}>✅</div>
      <div style={{ fontSize: 22, fontWeight: 800, color: D, marginBottom: 8 }}>Payment complete</div>
      <div style={{ fontSize: 14, color: "#888", lineHeight: 1.6, marginBottom: 6, maxWidth: 280 }}>Thanks — your session is fully paid and settled. A receipt is in your bookings.</div>
      <div style={{ fontSize: 12, color: "#aaa", marginBottom: 28 }}>Every member's share was charged against their authorisation.</div>
      <button style={{ ...css.pbtn(), width: "100%", margin: 0 }} onClick={() => navGo("bookings", "bookings")}>View my bookings</button>
      <button style={{ ...css.sbtn(), width: "100%" }} onClick={() => navGo("home", "home")}>Back to home</button>
    </div>,

    "adj-review": <div style={{ flex: 1, background: GREY, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Review session charges</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{pendingAdj ? `${pendingAdj.studio} · ${pendingAdj.date}` : ""}</p></div>
      {!pendingAdj ? <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", color: "#888", fontSize: 13, padding: 20 }}><div style={{ fontSize: 30, marginBottom: 10 }}>✅</div>Nothing to review right now.</div> : <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={{ background: pendingAdj.daysLeft <= 1 ? R.bg : A.bg, borderRadius: 12, margin: "0 16px 12px", padding: "11px 13px", display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{ fontSize: 18 }}>⏳</span>
          <div style={{ fontSize: 11.5, color: pendingAdj.daysLeft <= 1 ? R.fg : A.fg, lineHeight: 1.5 }}><strong>Auto-charges in {pendingAdj.daysLeft} day{pendingAdj.daysLeft === 1 ? "" : "s"}.</strong> You chose to pay after the session — if you don't respond, the final total is charged automatically. Nothing is charged before then.</div>
        </div>

        <div style={css.card()}>
          <ConfirmItem icon="🏢" title={pendingAdj.studio} sub={`${pendingAdj.room} · ${pendingAdj.time}`} />
          <ConfirmItem icon="⏱" title={`${pendingAdj.bookedHours}h booked → ${pendingAdj.finalHours}h used`} sub={pendingAdj.finalHours > pendingAdj.bookedHours ? `Ran ${pendingAdj.finalHours - pendingAdj.bookedHours}h over` : "As booked"} />
        </div>

        {pendingAdj.studioNote && <div style={{ ...css.card(), padding: "12px 14px", display: "flex", gap: 10 }}><span style={{ fontSize: 16 }}>💬</span><div><div style={{ fontSize: 11, fontWeight: 700, color: "#888", marginBottom: 2 }}>Note from the studio</div><div style={{ fontSize: 12.5, color: D, lineHeight: 1.5 }}>{pendingAdj.studioNote}</div></div></div>}

        <div style={{ margin: "2px 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>What you're being charged</div>
        <div style={css.card()}>
          {pendingAdj.lines.map((l, i) => {
            const changed = l.was !== undefined && l.amt !== l.was;
            const isNew = l.was === 0;
            return <div key={i} style={{ padding: "11px 14px", borderBottom: i < pendingAdj.lines.length - 1 ? `0.5px solid #f5f5f5` : "none", background: changed ? "#FFFBF2" : "#fff" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span style={{ fontSize: 13, color: D, display: "flex", alignItems: "center", gap: 6 }}>{l.label}{isNew && <span style={css.pill(A)}>added</span>}{changed && !isNew && <span style={css.pill(A)}>changed</span>}</span>
                <strong style={{ fontSize: 13, color: D }}>€{l.amt.toFixed(2)}</strong>
              </div>
              {changed && <div style={{ fontSize: 10.5, color: "#999", marginTop: 2 }}>{isNew ? "Not in your original booking" : `Was €${l.was.toFixed(2)}`}{l.note ? ` · ${l.note}` : ""}</div>}
            </div>;
          })}
          <div style={{ display: "flex", justifyContent: "space-between", padding: "11px 14px", borderTop: `1px solid ${BORDER}` }}><span style={{ fontSize: 12.5, color: "#888" }}>Originally booked</span><span style={{ fontSize: 12.5, color: "#888", textDecoration: "line-through" }}>€{pendingAdj.bookedTotal.toFixed(2)}</span></div>
          <div style={{ display: "flex", justifyContent: "space-between", padding: "11px 14px", background: GREY }}><span style={{ fontSize: 14, fontWeight: 700, color: D }}>Final total</span><strong style={{ fontSize: 17, color: D }}>€{pendingAdj.finalTotal.toFixed(2)}</strong></div>
        </div>
        <div style={{ margin: "0 16px 10px", fontSize: 11, color: pendingAdj.finalTotal > pendingAdj.bookedTotal ? A.fg : G.fg }}>{pendingAdj.finalTotal > pendingAdj.bookedTotal ? `€${(pendingAdj.finalTotal - pendingAdj.bookedTotal).toFixed(2)} more than your booking — make sure it looks right.` : "Same as or less than your booking 👍"}</div>

        <button style={css.pbtn()} onClick={() => { setPendingAdj(null); setBandSessionSettled(true); go("payment-done"); }}>Approve & pay €{pendingAdj.finalTotal.toFixed(2)}</button>

        <div style={{ ...css.card({ margin: "8px 16px 8px" }), padding: "12px 14px" }}>
          <label style={css.label}>Not right? Ask the studio to change it</label>
          <textarea value={adjReviewMsg} onChange={e => setAdjReviewMsg(e.target.value)} placeholder="e.g. We only ran 30 min over, not a full hour — and I didn't use the engineer." style={{ ...css.input, resize: "none", height: 76, marginBottom: 8 }} />
          <button style={{ ...css.sbtn(), width: "100%", margin: 0 }} onClick={() => { if (!adjReviewMsg.trim()) { showToast("Add a quick note for the studio"); return; } setChats(c => ({ ...c, SUPPORT: [...(c.SUPPORT || []), { me: true, t: `Change requested on my ${pendingAdj.studio} session: ${adjReviewMsg.trim()}` }] })); setAdjReviewMsg(""); showToast("✏️ Change requested — the studio can revise & resend"); goBack(); }}>✏️ Request a change</button>
        </div>

        <button style={css.sbtn({ color: R.fg, borderColor: R.bg })} onClick={() => { go("dispute-options"); showToast("Opening a dispute — Recki will review"); }}>Reject & dispute these charges</button>
        <div style={{ textAlign: "center", fontSize: 11, color: "#999", padding: "6px 16px 0", lineHeight: 1.5 }}>If you do nothing, the final total is charged automatically after {pendingAdj.daysLeft} day{pendingAdj.daysLeft === 1 ? "" : "s"}. We'll remind you 2 days and 3 hours before. Requesting a change or disputing pauses the auto-charge.</div>
        <div style={{ height: 14 }} />
      </div>}
    </div>,

    "account-link": <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Link your accounts</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Be a musician and a studio in one app</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 14 }}>
        <div style={{ background: L, borderRadius: 14, margin: "0 16px 14px", padding: "13px 15px", fontSize: 12.5, color: M, lineHeight: 1.55 }}>🔄 Once linked, you can switch between your <strong>musician</strong> and <strong>studio</strong> views instantly — no logging out. Bookings, messages and payments stay separate per side.</div>
        <div style={{ margin: "0 16px 6px" }}><label style={css.label}>How do you want to link?</label></div>
        <div style={{ margin: "0 16px 12px" }}>
          <div onClick={() => setLinkSameEmail(true)} style={{ ...css.card({ margin: "0 0 8px" }), padding: "12px 14px", display: "flex", alignItems: "center", gap: 11, cursor: "pointer", border: `1.5px solid ${linkSameEmail ? D : BORDER}` }}>
            <div style={{ width: 20, height: 20, borderRadius: "50%", border: `2px solid ${linkSameEmail ? D : BORDER}`, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>{linkSameEmail && <div style={{ width: 10, height: 10, borderRadius: "50%", background: D }} />}</div>
            <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>Same email</div><div style={{ fontSize: 11, color: "#888", marginTop: 1 }}>Use marco@email.com for both — simplest</div></div>
          </div>
          <div onClick={() => setLinkSameEmail(false)} style={{ ...css.card({ margin: 0 }), padding: "12px 14px", display: "flex", alignItems: "center", gap: 11, cursor: "pointer", border: `1.5px solid ${!linkSameEmail ? D : BORDER}` }}>
            <div style={{ width: 20, height: 20, borderRadius: "50%", border: `2px solid ${!linkSameEmail ? D : BORDER}`, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>{!linkSameEmail && <div style={{ width: 10, height: 10, borderRadius: "50%", background: D }} />}</div>
            <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>A different email</div><div style={{ fontSize: 11, color: "#888", marginTop: 1 }}>Keep your studio under a separate business email</div></div>
          </div>
        </div>
        {!linkSameEmail && <div style={{ margin: "0 16px 12px" }}><label style={css.label}>Studio account email</label><input value={linkEmail} onChange={e => setLinkEmail(e.target.value)} placeholder="studio@business.com" style={css.input} /><div style={{ fontSize: 11, color: "#888", marginTop: 5 }}>We'll send a confirmation link to verify you own both accounts.</div></div>}
        <div style={{ background: GREY, borderRadius: 12, margin: "0 16px 14px", padding: "11px 13px", fontSize: 11.5, color: "#888", lineHeight: 1.5 }}>🔒 Linking only changes how you sign in and switch. Your musician and studio profiles, reviews and payouts stay distinct.</div>
        <button style={css.pbtn()} onClick={() => { if (!linkSameEmail && !linkEmail.trim()) { showToast("Enter the studio account email"); return; } setLinked(true); setVnav("vhome"); go("vendor-setup"); showToast("🔗 Accounts linked — switch anytime from your profile"); }}>{linkSameEmail ? "Link & set up my studio →" : "Send confirmation & link →"}</button>
        <div style={{ height: 16 }} />
      </div>
    </div>,

    "admin-login": <div style={{ flex: 1, background: `linear-gradient(160deg, ${D}, ${DEEP})`, display: "flex", flexDirection: "column", justifyContent: "center" }}>
      <div style={{ padding: "0 28px", textAlign: "center" }}>
        <div style={{ fontSize: 36, marginBottom: 10 }}>🛡</div>
        <div style={{ fontSize: 20, fontWeight: 800, color: "#fff", marginBottom: 4 }}>Recki Admin</div>
        <div style={{ fontSize: 12, color: "rgba(255,255,255,.5)", marginBottom: 22 }}>Restricted access — Recki team only</div>
        <input defaultValue="admin@recki.app" style={{ ...css.input, marginBottom: 10, textAlign: "center" }} />
        <input type="password" defaultValue="········" style={{ ...css.input, marginBottom: 10, textAlign: "center" }} />
        <input defaultValue="284 911" style={{ ...css.input, marginBottom: 16, textAlign: "center" }} />
        <div style={{ fontSize: 10, color: "rgba(255,255,255,.35)", marginBottom: 14, marginTop: -10 }}>2FA code from your authenticator app</div>
        <button style={{ ...css.pbtn(), width: "100%", margin: 0 }} onClick={() => go("admin-home")}>Log in to admin →</button>
        <div onClick={goBack} style={{ fontSize: 11, color: "rgba(255,255,255,.4)", marginTop: 18, cursor: "pointer" }}>← Back</div>
      </div>
    </div>,

    "admin-home": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={() => go("role")} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>🛡 Recki Admin</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Operations & platform overview</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={{ margin: "0 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Needs attention</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, padding: "0 16px" }}>
          {[["💳", "Payment disputes", adminDisputes.filter(d => d.status === "open").length, "admin-disputes", R], ["🚩", "Reports & complaints", adminReports.filter(r => r.status === "open").length, "admin-reports", A], ["🎛", "Gear submissions", gearQueue.length, "admin-gear", { bg: L, fg: M }], ["🐞", "Bug reports", bugReports.filter(b => b.status === "new").length, "admin-bugs", A], ["💬", "Conversations", adminThreads.length, "admin-messages", { bg: L, fg: M }], ["👥", "Users & studios", "1,860", "admin-users", { bg: L, fg: M }], ["✅", "Verify studios", 2, "admin-users", G]].map(([ico, label, count, dest, c]) =>
            <div key={label} onClick={() => go(dest)} style={{ background: "#fff", borderRadius: 14, border: `0.5px solid ${BORDER}`, padding: 12, cursor: "pointer", position: "relative" }}>
              <div style={{ fontSize: 20 }}>{ico}</div>
              <div style={{ fontSize: 13, fontWeight: 600, color: D, marginTop: 5 }}>{label}</div>
              {typeof count === "number" && count > 0
                ? <span style={{ position: "absolute", top: 10, right: 10, background: c.bg, color: c.fg, fontSize: 11, fontWeight: 700, padding: "2px 8px", borderRadius: 10 }}>{count}</span>
                : <div style={{ fontSize: 11, color: "#888", marginTop: 1 }}>{count}</div>}
            </div>)}
        </div>
        <div style={{ margin: "14px 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Money to action</div>
        <div onClick={() => go("admin-disputes")} style={{ ...css.card({ margin: "0 16px 8px" }), cursor: "pointer", padding: "12px 14px" }}>
          <div style={{ display: "flex", gap: 10 }}>
            <div style={{ flex: 1 }}><div style={{ fontSize: 10, color: "#888" }}>Held in dispute</div><div style={{ fontSize: 18, fontWeight: 700, color: R.fg }}>€{adminDisputes.filter(d => d.status === "open").reduce((a, d) => a + parseFloat(d.orig), 0).toFixed(2)}</div></div>
            <div style={{ flex: 1 }}><div style={{ fontSize: 10, color: "#888" }}>Refunds this week</div><div style={{ fontSize: 18, fontWeight: 700, color: D }}>€312.40</div></div>
            <div style={{ flex: 1 }}><div style={{ fontSize: 10, color: "#888" }}>Payouts pending</div><div style={{ fontSize: 18, fontWeight: 700, color: D }}>€4,180</div></div>
          </div>
          <div style={{ fontSize: 11, color: M, marginTop: 8, fontWeight: 600 }}>Resolve disputes →</div>
        </div>
        <div style={{ margin: "14px 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Platform overview · June 2026 · 🌍 3 markets</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, padding: "0 16px" }}>
          {[["💶", "GMV (all bookings)", "€12,480", "↑ 22%"], ["🧾", "Booking fees (3.5%)", "€437", "↑ 22%"], ["💎", "Premium · 41 subs", "€2,050", "↑ 8 subs"], ["📈", "Boost revenue", "€310", "↑ 15%"], ["🎟", "Gig ads", "€184", "↑ 31%"], ["👥", "Active users", "2,140", "↑ 16%"]].map(([ico, l, v, d]) =>
            <div key={l} style={{ background: "#fff", borderRadius: 14, border: `0.5px solid ${BORDER}`, padding: 12 }}>
              <div style={{ fontSize: 16 }}>{ico}</div>
              <div style={{ fontSize: 18, fontWeight: 800, color: D, margin: "4px 0 1px" }}>{v}</div>
              <div style={{ fontSize: 10, color: "#888" }}>{l}</div>
              <div style={{ fontSize: 10, color: G.fg, fontWeight: 600, marginTop: 2 }}>{d}</div>
            </div>)}
        </div>
        <SectionTitle>Platform revenue by month</SectionTitle>
        <div style={{ ...css.card(), padding: "14px 14px 10px" }}>
          <div style={{ display: "flex", alignItems: "flex-end", gap: 6, height: 84 }}>
            {[["Feb", 32], ["Mar", 45], ["Apr", 58], ["May", 76], ["Jun", 100]].map(([m, v]) =>
              <div key={m} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 3 }}>
                <span style={{ fontSize: 8, fontWeight: 700, color: v === 100 ? D : "#999" }}>€{Math.round(v * 29.8)}</span>
                <div style={{ width: "100%", height: v * 0.55, background: v === 100 ? D : L, borderRadius: 4 }} />
                <span style={{ fontSize: 8, color: "#888" }}>{m}</span>
              </div>)}
          </div>
          <div style={{ fontSize: 11, color: "#888", marginTop: 8 }}>Fees + Premium + Boosts + Gig ads</div>
        </div>
        <SectionTitle>Bookings by city</SectionTitle>
        <div style={{ ...css.card(), padding: "12px 14px" }}>
          {[["Vienna 🇦🇹", 62], ["Rome 🇮🇹", 21], ["Milan 🇮🇹", 17]].map(([c, p]) =>
            <div key={c} style={{ marginBottom: 9 }}>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: D, marginBottom: 3 }}><span>{c}</span><strong>{p}%</strong></div>
              <div style={{ height: 6, background: GREY, borderRadius: 3 }}><div style={{ width: `${p}%`, height: 6, background: M, borderRadius: 3 }} /></div>
            </div>)}
        </div>
        <SectionTitle>Recki revenue · for tax & filing</SectionTitle>
        <div style={{ ...css.card({ marginBottom: 6 }), padding: "10px 13px", display: "flex", alignItems: "flex-start", gap: 9, background: L }}>
          <span style={{ fontSize: 17 }}>🇮🇹</span>
          <div style={{ fontSize: 10.5, color: M, lineHeight: 1.5 }}>Recki is registered in <strong>Italy</strong>. Figures are our own revenue (fees + Premium + boosts + gig ads), VAT-inclusive — not studio GMV. Italy is filed at home; Spain & Austria go through the EU <strong>Union OSS</strong> (one quarterly return in Italy).</div>
        </div>
        {/* Country / City toggle */}
        <div style={{ display: "flex", gap: 8, padding: "0 16px 10px" }}>
          {[["country", "By country"], ["city", "By city"]].map(([k, l]) => <button key={k} onClick={() => setTaxView(k)} style={{ ...css.fc(taxView === k), flex: 1, padding: "9px 0" }}>{l}</button>)}
        </div>
        {(() => {
          // Each country: VAT rate, how it's filed, and its cities with VAT-inclusive Recki revenue €.
          const data = [
            { c: "🇮🇹 Italy", rate: 0.22, via: "IT VAT return (home)", cities: [["Rome", 430], ["Milan", 360], ["Bologna", 190]] },
            { c: "🇦🇹 Austria", rate: 0.20, via: "Union OSS → Austria", cities: [["Vienna", 360], ["Graz", 120], ["Linz", 70], ["Salzburg", 38]] },
            { c: "🇪🇸 Spain", rate: 0.21, via: "Union OSS → Spain", cities: [["Madrid", 280], ["Barcelona", 170], ["Valencia", 70]] },
          ];
          const revOf = c => c.cities.reduce((a, x) => a + x[1], 0);
          const vatIncl = (rev, rate) => Math.round(rev - rev / (1 + rate));
          const ranked = [...data].sort((a, b) => revOf(b) - revOf(a)); // highest earnings first
          const totRev = data.reduce((a, c) => a + revOf(c), 0);
          const totVat = data.reduce((a, c) => a + vatIncl(revOf(c), c.rate), 0);
          return <>
            {taxView === "country"
              ? <div style={{ ...css.card({ margin: "0 16px 8px" }), overflow: "hidden" }}>
                  <div style={{ display: "flex", padding: "8px 12px", background: GREY, borderBottom: `1px solid ${BORDER}`, fontSize: 9, fontWeight: 700, color: "#888" }}>
                    <div style={{ flex: 1.4 }}>Country</div><div style={{ flex: 1, textAlign: "right" }}>Revenue</div><div style={{ flex: 0.6, textAlign: "right" }}>VAT</div><div style={{ flex: 0.9, textAlign: "right" }}>VAT due</div><div style={{ flex: 1.4, textAlign: "right" }}>Remit via</div>
                  </div>
                  {ranked.map((c, i) => { const rev = revOf(c); return <div key={c.c} style={{ display: "flex", alignItems: "center", padding: "10px 12px", borderBottom: `0.5px solid #f5f5f5`, fontSize: 11 }}>
                    <div style={{ flex: 1.4, fontWeight: 600, color: D }}><span style={{ color: "#bbb", fontWeight: 700, marginRight: 5 }}>{i + 1}</span>{c.c}</div>
                    <div style={{ flex: 1, textAlign: "right", color: D, fontWeight: 700 }}>€{rev.toLocaleString()}</div>
                    <div style={{ flex: 0.6, textAlign: "right", color: "#888" }}>{Math.round(c.rate * 100)}%</div>
                    <div style={{ flex: 0.9, textAlign: "right", color: "#888" }}>€{vatIncl(rev, c.rate).toLocaleString()}</div>
                    <div style={{ flex: 1.4, textAlign: "right", color: M, fontSize: 9, fontWeight: 600 }}>{c.via}</div>
                  </div>; })}
                </div>
              : <div style={{ ...css.card({ margin: "0 16px 8px" }), overflow: "hidden" }}>
                  <div style={{ display: "flex", padding: "8px 12px", background: GREY, borderBottom: `1px solid ${BORDER}`, fontSize: 9, fontWeight: 700, color: "#888" }}>
                    <div style={{ flex: 1.6 }}>City</div><div style={{ flex: 1, textAlign: "right" }}>Revenue</div><div style={{ flex: 0.7, textAlign: "right" }}>VAT</div><div style={{ flex: 1, textAlign: "right" }}>VAT due</div>
                  </div>
                  {data.flatMap(c => c.cities.map(([name, rev]) => ({ name, rev, flag: c.c.split(" ")[0], rate: c.rate })))
                    .sort((a, b) => b.rev - a.rev)
                    .map((r, i) => <div key={r.name} style={{ display: "flex", alignItems: "center", padding: "10px 12px", borderBottom: `0.5px solid #f5f5f5`, fontSize: 11 }}>
                      <div style={{ flex: 1.6, fontWeight: 600, color: D }}><span style={{ color: "#bbb", fontWeight: 700, marginRight: 5 }}>{i + 1}</span>{r.flag} {r.name}</div>
                      <div style={{ flex: 1, textAlign: "right", color: D, fontWeight: 700 }}>€{r.rev.toLocaleString()}</div>
                      <div style={{ flex: 0.7, textAlign: "right", color: "#888" }}>{Math.round(r.rate * 100)}%</div>
                      <div style={{ flex: 1, textAlign: "right", color: "#888" }}>€{vatIncl(r.rev, r.rate).toLocaleString()}</div>
                    </div>)}
                </div>}
            <div style={{ ...css.card({ margin: "0 16px 0" }), padding: "11px 13px", display: "flex", alignItems: "center", background: D }}>
              <div style={{ flex: 1 }}><div style={{ fontSize: 10, color: "rgba(255,255,255,.7)" }}>Total Recki revenue</div><div style={{ fontSize: 19, fontWeight: 800, color: "#fff" }}>€{totRev.toLocaleString()}</div></div>
              <div style={{ textAlign: "right" }}><div style={{ fontSize: 10, color: "rgba(255,255,255,.7)" }}>VAT collected & owed</div><div style={{ fontSize: 19, fontWeight: 800, color: "#fff" }}>€{totVat.toLocaleString()}</div></div>
            </div>
          </>;
        })()}
        <div style={{ margin: "8px 16px 0", fontSize: 10, color: "#999", lineHeight: 1.55 }}>📑 Revenue is VAT-inclusive (our fees + Premium + boosts + gig ads). Italian sales carry 22% IT VAT filed at home; Spain (21%) & Austria (20%) are reported via the Union OSS. VAT-registered (B2B) studios are reverse-charged. Corporate tax (IRES/IRAP) paid in Italy. Records kept 10 years. Not tax advice.</div>
        <div style={{ display: "flex", gap: 8, padding: "0 16px" }}>
          <button style={{ ...css.sbtn(), margin: "8px 0 0", flex: 1, fontSize: 11.5 }} onClick={() => showToast(taxView === "city" ? "📤 City breakdown exported (CSV)" : "📤 Country breakdown exported (CSV)")}>Export {taxView === "city" ? "cities" : "countries"}</button>
          <button style={{ ...css.sbtn(), margin: "8px 0 0", flex: 1, fontSize: 11.5 }} onClick={() => showToast("📤 EU OSS return draft exported")}>OSS return draft</button>
        </div>
        <SectionTitle>Subscriptions & cancellations</SectionTitle>
        <div onClick={() => go("admin-cancellations")} style={{ ...css.card({ margin: "0 16px 8px" }), padding: "12px 14px", cursor: "pointer" }}>
          <div style={{ display: "flex", gap: 10 }}>
            <div style={{ flex: 1 }}><div style={{ fontSize: 10, color: "#888" }}>Active subs</div><div style={{ fontSize: 18, fontWeight: 700, color: D }}>41</div></div>
            <div style={{ flex: 1 }}><div style={{ fontSize: 10, color: "#888" }}>Cancelled (30d)</div><div style={{ fontSize: 18, fontWeight: 700, color: R.fg }}>{Object.values(cancelStats).reduce((a, b) => a + b, 0)}</div></div>
            <div style={{ flex: 1 }}><div style={{ fontSize: 10, color: "#888" }}>Top reason</div><div style={{ fontSize: 13, fontWeight: 700, color: D, marginTop: 3 }}>{Object.entries(cancelStats).sort((a, b) => b[1] - a[1])[0][0]}</div></div>
          </div>
          <div style={{ fontSize: 11, color: M, marginTop: 8, fontWeight: 600 }}>See cancellation reasons →</div>
        </div>
        <div style={{ textAlign: "center", fontSize: 11, color: "#888", padding: "4px 16px 16px" }}>Internal dashboard — visible to the Recki team only</div>
      </div>
    </div>,

    "admin-gear": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={() => go("admin-home")} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>🎛 Gear submissions</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{gearQueue.length} awaiting review · approve, fix spelling, or reject</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 8 }}>
        <div style={{ ...css.card({ marginBottom: 8 }), padding: "10px 13px", display: "flex", alignItems: "flex-start", gap: 9, background: L }}>
          <span style={{ fontSize: 16 }}>ℹ️</span>
          <div style={{ fontSize: 10.5, color: M, lineHeight: 1.5 }}>Gear a studio added that isn't in the library yet. Approving adds it to Recki's gear library (and makes it searchable). Fix the spelling first so searches match — e.g. “neuman u87” → “Neumann U87”.</div>
        </div>
        {gearQueue.length === 0
          ? <div style={{ textAlign: "center", padding: "50px 28px", color: "#aaa", fontSize: 13 }}><div style={{ fontSize: 34, marginBottom: 10 }}>✅</div>All caught up — no gear waiting for review.</div>
          : gearQueue.map(g => <div key={g.id} style={{ ...css.card(), padding: 14 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 7 }}>
                <span style={{ fontSize: 10, fontWeight: 700, color: M, background: L, padding: "3px 8px", borderRadius: 8 }}>{g.cat}</span>
                <span style={{ fontSize: 10, color: "#aaa", marginLeft: "auto" }}>{g.when}</span>
              </div>
              <div style={{ fontSize: 11, color: "#888", marginBottom: 3 }}>Studio typed:</div>
              <div style={{ fontSize: 15, fontWeight: 700, color: D, fontFamily: "monospace", background: GREY, borderRadius: 8, padding: "7px 11px", marginBottom: 8 }}>“{g.raw}”</div>
              <div style={{ fontSize: 11, color: "#888", marginBottom: 8 }}>📍 {g.studio} · {g.room}</div>
              {g.suggest && g.suggest.toLowerCase() !== g.raw.toLowerCase() && <div style={{ fontSize: 11, color: G.fg, background: G.bg, borderRadius: 8, padding: "7px 10px", marginBottom: 9 }}>💡 Suggested clean name: <strong>{g.suggest}</strong></div>}
              <div style={{ display: "flex", gap: 7, flexWrap: "wrap" }}>
                <button onClick={() => { const clean = g.suggest || g.raw; setGearQueue(q => q.filter(x => x.id !== g.id)); showToast(`✅ “${clean}” approved — added to gear library`); }} style={{ ...css.gbtn({ color: "#fff", background: D }), flex: 1, minWidth: 100, fontSize: 11.5, fontWeight: 700 }}>✓ Approve as “{g.suggest || g.raw}”</button>
                <button onClick={() => { setGearSel(g); setGearEdit(g.suggest || g.raw); go("admin-gear-edit"); }} style={{ ...css.gbtn(), fontSize: 11.5, padding: "8px 12px" }}>✎ Fix spelling</button>
                <button onClick={() => { setGearQueue(q => q.filter(x => x.id !== g.id)); showToast("Gear submission rejected"); }} style={{ ...css.gbtn({ color: R.fg }), fontSize: 11.5, padding: "8px 12px" }}>Reject</button>
              </div>
            </div>)}
        <div style={{ height: 12 }} />
      </div>
    </div>,

    "admin-gear-edit": <div style={{ flex: 1, background: GREY, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={() => go("admin-gear")} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Fix gear name</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{gearSel ? `${gearSel.studio} · ${gearSel.room}` : ""}</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        {gearSel && <>
          <div style={{ margin: "0 16px 10px" }}>
            <div style={{ fontSize: 11, color: "#888", marginBottom: 4 }}>Studio typed</div>
            <div style={{ fontSize: 14, fontWeight: 600, color: "#999", fontFamily: "monospace", background: "#fff", borderRadius: 10, padding: "10px 13px", border: `1px solid ${BORDER}` }}>“{gearSel.raw}”</div>
          </div>
          <div style={{ margin: "0 16px 8px" }}>
            <label style={css.label}>Corrected name <span style={{ color: "#bbb", fontWeight: 400 }}>· this is what goes in the library & search</span></label>
            <input value={gearEdit} onChange={e => setGearEdit(e.target.value)} placeholder="e.g. Neumann U87" style={{ ...css.input, fontSize: 15, fontWeight: 600 }} autoFocus />
          </div>
          <div style={{ margin: "0 16px 10px" }}>
            <div style={{ fontSize: 11, color: "#888", marginBottom: 6 }}>Category</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 7 }}>
              {Object.keys(GEAR_LIBRARY).map(c => <button key={c} onClick={() => setGearSel(s => ({ ...s, cat: c }))} style={css.fc(gearSel.cat === c)}>{c}</button>)}
            </div>
          </div>
          {(() => { const dup = ALL_GEAR.find(x => x.toLowerCase() === gearEdit.trim().toLowerCase()); return dup ? <div style={{ margin: "0 16px 10px", fontSize: 11, color: A.fg, background: A.bg, borderRadius: 10, padding: "9px 12px", lineHeight: 1.45 }}>⚠️ “{dup}” is already in the library. Approving will merge this studio's entry into the existing one (no duplicate created).</div> : null; })()}
          <button style={{ ...css.pbtn(), opacity: gearEdit.trim() ? 1 : .5 }} onClick={() => { if (!gearEdit.trim()) { showToast("Enter a name"); return; } const clean = gearEdit.trim(); const dup = ALL_GEAR.find(x => x.toLowerCase() === clean.toLowerCase()); setGearQueue(q => q.filter(x => x.id !== gearSel.id)); showToast(dup ? `✅ Merged into existing “${dup}”` : `✅ “${clean}” corrected & added to library`); go("admin-gear"); }}>✓ Save & approve</button>
          <button style={{ ...css.sbtn(), margin: "8px 16px 0", width: "calc(100% - 32px)" }} onClick={() => go("admin-gear")}>Cancel</button>
        </>}
        <div style={{ height: 16 }} />
      </div>
    </div>,

    "admin-bugs": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={() => go("admin-home")} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>🐞 Bug reports</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{bugReports.filter(b => b.status === "new").length} new · reported by users</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        {bugReports.length === 0 ? <div style={{ textAlign: "center", padding: "32px 20px", color: "#888", fontSize: 13 }}><div style={{ fontSize: 30, marginBottom: 10 }}>✅</div>No open bug reports.</div> :
          bugReports.map(b =>
            <div key={b.id} onClick={() => { setBugSel(b); go("admin-bug-detail"); }} style={{ ...css.card(), padding: 14, cursor: "pointer" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 5 }}>
                <span style={css.pill({ bg: L, fg: M })}>{b.area}</span>
                <span style={css.pill(b.status === "new" ? A : b.status === "fixed" ? G : { bg: GREY, fg: "#888" })}>{b.status}</span>
                <span style={{ marginLeft: "auto", fontSize: 10.5, color: "#aaa" }}>{b.when}</span>
              </div>
              <div style={{ fontSize: 12.5, color: D, lineHeight: 1.5 }}>{b.text}</div>
              <div style={{ fontSize: 11, color: "#888", marginTop: 6 }}>{b.from} · {b.role}</div>
            </div>)}
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "admin-bug-detail": <div style={{ flex: 1, background: GREY, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={() => go("admin-bugs")} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Bug report</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{bugSel ? bugSel.area : ""}</p></div>
      {!bugSel ? <div style={{ flex: 1 }} /> : <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={css.card()}>
          <ConfirmItem icon="🐞" title={bugSel.area + " issue"} sub={`${bugSel.from} · ${bugSel.role} · ${bugSel.when}`} />
          <div style={{ padding: "12px 14px", fontSize: 13, color: D, lineHeight: 1.6 }}>{bugSel.text}</div>
        </div>
        <div style={{ margin: "2px 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Update status</div>
        <div style={{ display: "flex", gap: 7, padding: "0 16px 10px" }}>
          {["new", "triaged", "fixed"].map(st => <button key={st} onClick={() => { setBugReports(bs => bs.map(x => x.id === bugSel.id ? { ...x, status: st } : x)); setBugSel(s => ({ ...s, status: st })); showToast(`Marked ${st}`); }} style={css.chip(bugSel.status === st, st === "fixed" ? G.fg : st === "triaged" ? M : A.fg)}>{st}</button>)}
        </div>
        <button style={css.sbtn()} onClick={() => { setChats(c => ({ ...c, SUPPORT: [...(c.SUPPORT || []), { me: false, t: `Thanks for the bug report about ${bugSel.area.toLowerCase()} — our team is on it. We'll let you know when it's fixed.` }] })); showToast("📨 Reply sent to reporter's Support chat"); }}>Reply to reporter</button>
        <button style={css.sbtn({ color: R.fg, borderColor: R.bg })} onClick={() => { setBugReports(bs => bs.filter(x => x.id !== bugSel.id)); go("admin-bugs"); showToast("Bug dismissed"); }}>Dismiss</button>
        <div style={{ height: 14 }} />
      </div>}
    </div>,

    "admin-cancellations": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={() => go("admin-home")} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Cancellation reasons</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Why members cancel Premium · last 30 days</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={{ display: "flex", gap: 8, padding: "0 16px 12px" }}>
          <div style={{ flex: 1, ...css.card({ margin: 0 }), padding: "12px 14px" }}><div style={{ fontSize: 10, color: "#888" }}>Total cancellations</div><div style={{ fontSize: 22, fontWeight: 800, color: R.fg }}>{Object.values(cancelStats).reduce((a, b) => a + b, 0)}</div></div>
          <div style={{ flex: 1, ...css.card({ margin: 0 }), padding: "12px 14px" }}><div style={{ fontSize: 10, color: "#888" }}>Active subs</div><div style={{ fontSize: 22, fontWeight: 800, color: D }}>41</div></div>
        </div>
        <div style={{ margin: "0 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Reasons given</div>
        <div style={{ ...css.card(), padding: "12px 14px" }}>
          {(() => { const tot = Object.values(cancelStats).reduce((a, b) => a + b, 0) || 1; return Object.entries(cancelStats).sort((a, b) => b[1] - a[1]).map(([r, n]) => { const pct = Math.round(n / tot * 100); return <div key={r} style={{ marginBottom: 11 }}>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: D, marginBottom: 3 }}><span>{r}</span><strong>{n} · {pct}%</strong></div>
            <div style={{ height: 7, background: GREY, borderRadius: 4 }}><div style={{ width: `${pct}%`, height: 7, background: r === "Too expensive" ? R.fg : r === "Missing features" ? GOLD : M, borderRadius: 4 }} /></div>
          </div>; }); })()}
        </div>
        <div style={{ margin: "6px 16px 0", fontSize: 10.5, color: "#999", lineHeight: 1.5 }}>📊 Live — updates whenever a member confirms a cancellation in-app. Use it to spot pricing vs feature churn.</div>
        <button style={css.sbtn()} onClick={() => showToast("📤 Cancellation report exported (CSV)")}>Export report</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "admin-disputes": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={() => go("admin-home")} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>💳 Payment disputes</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{adminDisputes.filter(d => d.status === "open").length} open · resolve who keeps the money</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 10 }}>
        <div style={{ display: "flex", gap: 8, margin: "0 16px 10px" }}>
          <div style={{ flex: 1, ...css.card({ margin: 0 }), padding: "9px 11px" }}><div style={{ fontSize: 10, color: "#888" }}>Held in dispute</div><div style={{ fontSize: 16, fontWeight: 700, color: R.fg }}>€{adminDisputes.filter(d => d.status === "open").reduce((a, d) => a + parseFloat(d.orig), 0).toFixed(2)}</div></div>
          <div style={{ flex: 1, ...css.card({ margin: 0 }), padding: "9px 11px" }}><div style={{ fontSize: 10, color: "#888" }}>Open cases</div><div style={{ fontSize: 16, fontWeight: 700, color: D }}>{adminDisputes.filter(d => d.status === "open").length}</div></div>
          <div style={{ flex: 1, ...css.card({ margin: 0 }), padding: "9px 11px" }}><div style={{ fontSize: 10, color: "#888" }}>Resolved</div><div style={{ fontSize: 16, fontWeight: 700, color: G.fg }}>{adminDisputes.filter(d => d.status === "resolved").length}</div></div>
        </div>
        {adminDisputes.map(d =>
          <div key={d.id} onClick={() => { setAdminSel(d); setResolveAmt(""); setResolveNote(""); go("admin-dispute-detail"); }} style={{ ...css.card(), padding: 14, cursor: "pointer", opacity: d.status === "open" ? 1 : .6 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
              <span style={{ flex: 1, fontSize: 13, fontWeight: 600, color: D }}>{d.who} <span style={{ color: "#bbb", fontWeight: 400 }}>vs</span> {d.studio}</span>
              <span style={css.pill(d.status === "open" ? R : d.status === "awaiting" ? { bg: L, fg: M } : G)}>{d.status === "open" ? "Open" : d.status === "awaiting" ? "Awaiting reply" : "Resolved"}</span>
            </div>
            <div style={{ fontSize: 12, color: "#666", lineHeight: 1.5, marginBottom: 8 }}>{d.issue}</div>
            <div style={{ display: "flex", gap: 7 }}>
              <div style={{ flex: 1, background: GREY, borderRadius: 8, padding: "6px 9px" }}><div style={{ fontSize: 9, color: "#888" }}>Authorized</div><div style={{ fontSize: 12, fontWeight: 600, color: D }}>€{d.orig}</div></div>
              <div style={{ flex: 1, background: GREY, borderRadius: 8, padding: "6px 9px" }}><div style={{ fontSize: 9, color: "#888" }}>Disputed amount</div><div style={{ fontSize: 12, fontWeight: 600, color: D }}>€{d.claimed}</div></div>
            </div>
          </div>)}
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "admin-dispute-detail": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={() => go("admin-disputes")} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Resolve dispute</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{adminSel ? `${adminSel.who} vs ${adminSel.studio}` : ""}</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={css.card()}>
          <ConfirmItem icon="🎵" title={adminSel ? adminSel.who : "Musician"} sub="Musician · paid in app" />
          <ConfirmItem icon="🏠" title={adminSel ? adminSel.studio : "Studio"} sub="Studio" />
          <ConfirmItem icon="⚠️" title="What they're disputing" sub={adminSel ? adminSel.issue : ""} />
        </div>
        <div style={{ display: "flex", gap: 8, margin: "0 16px 10px" }}>
          <div style={{ flex: 1, ...css.card({ margin: 0 }), padding: "10px 12px" }}><div style={{ fontSize: 10, color: "#888" }}>Authorized / held</div><div style={{ fontSize: 16, fontWeight: 700, color: D }}>€{adminSel ? adminSel.orig : "0"}</div></div>
          <div style={{ flex: 1, ...css.card({ margin: 0 }), padding: "10px 12px" }}><div style={{ fontSize: 10, color: "#888" }}>Disputed amount</div><div style={{ fontSize: 16, fontWeight: 700, color: R.fg }}>€{adminSel ? adminSel.claimed : "0"}</div></div>
        </div>
        <div style={{ margin: "0 16px 6px" }}><label style={css.label}>Evidence & actions</label></div>
        <div style={css.card()}>
          <ConfirmItem icon="🧾" title="Full charge breakdown" sub="See every line the studio billed, item by item" onClick={() => go("admin-breakdown")} />
          <ConfirmItem icon="📎" title="Linked report" sub={adminSel && adminSel.who === "Marco Rossi" ? "🔧 Damaged equipment · 2 photos" : "No linked report"} onClick={() => go("admin-reports")} />
          <ConfirmItem icon="🏠" title="Act on the studio" sub="Request reasoning, warn, or refund & flag" onClick={() => go("admin-party-actions")} />
        </div>
        <div style={{ background: L, borderRadius: 12, margin: "0 16px 10px", padding: "10px 13px", fontSize: 11.5, color: M, lineHeight: 1.5 }}>Choose an outcome below. The amount you set is what the musician is finally charged; the rest is refunded to their card. Both parties are notified with your note.</div>
        <div style={{ margin: "0 16px 6px" }}><label style={css.label}>Set the final charge to the musician</label></div>
        <div style={{ display: "flex", gap: 7, padding: "0 16px 8px" }}>
          <button onClick={() => setResolveAmt(adminSel ? adminSel.orig : "0")} style={{ ...css.fc(resolveAmt === (adminSel && adminSel.orig)), flex: 1, padding: "9px 0", fontSize: 11 }}>Full €{adminSel ? adminSel.orig : "0"}</button>
          <button onClick={() => { const half = adminSel ? (parseFloat(adminSel.orig) / 2).toFixed(2) : "0"; setResolveAmt(half); }} style={{ ...css.fc(false), flex: 1, padding: "9px 0", fontSize: 11 }}>Split 50%</button>
          <button onClick={() => setResolveAmt("0")} style={{ ...css.fc(resolveAmt === "0"), flex: 1, padding: "9px 0", fontSize: 11 }}>Refund all</button>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, margin: "0 16px 10px" }}>
          <span style={{ fontSize: 13, color: "#888" }}>€</span>
          <input type="number" value={resolveAmt} onChange={e => setResolveAmt(e.target.value)} placeholder="Custom amount" style={{ ...css.input, flex: 1, minWidth: 0 }} />
        </div>
        {resolveAmt !== "" && adminSel && <div style={{ background: GREY, borderRadius: 10, margin: "0 16px 10px", padding: "10px 12px", fontSize: 12, color: D }}>
          Musician charged <strong>€{Number(resolveAmt).toFixed(2)}</strong> · refunded <strong style={{ color: G.fg }}>€{Math.max(0, parseFloat(adminSel.orig) - Number(resolveAmt)).toFixed(2)}</strong>
        </div>}
        <div style={{ margin: "0 16px 6px" }}><label style={css.label}>Note to both parties</label>
          <textarea value={resolveNote} onChange={e => setResolveNote(e.target.value)} placeholder="Explain the decision (sent to musician & studio)…" style={{ ...css.input, resize: "none", height: 60 }} /></div>
        <button style={css.pbtn()} onClick={() => { if (resolveAmt === "") { showToast("Set an amount first"); return; } setAdminDisputes(ds => ds.map(x => adminSel && x.id === adminSel.id ? { ...x, status: "resolved" } : x)); setChats(c => ({ ...c, SUPPORT: [...(c.SUPPORT || []), { me: false, t: `Decision on your dispute: the final charge is €${Number(resolveAmt).toFixed(2)}${adminSel ? ` (€${Math.max(0, parseFloat(adminSel.orig) - Number(resolveAmt)).toFixed(2)} refunded)` : ""}.${resolveNote.trim() ? " " + resolveNote.trim() : ""}` }] })); go("admin-disputes"); showToast(`✅ Resolved · musician charged €${Number(resolveAmt).toFixed(2)} · both parties notified`); }}>Resolve & notify</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "admin-breakdown": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={() => go("admin-dispute-detail")} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Charge breakdown</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{adminSel ? `${adminSel.studio} · ${adminSel.who}` : ""}</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={{ background: L, borderRadius: 12, margin: "0 16px 10px", padding: "10px 13px", fontSize: 11.5, color: M, lineHeight: 1.5 }}>Exactly what the studio billed for this session. Items the studio added at session close are flagged — these are the usual source of disputes.</div>
        <div style={{ margin: "0 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>What the musician booked</div>
        <div style={css.card()}>
          {[["Room · 3 hours × €40/hr", "€120.00", false], ["Booking fee (3.5%)", "€4.20", false]].map(([l, v, added]) =>
            <div key={l} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "10px 14px", borderBottom: `0.5px solid #f5f5f5` }}>
              <span style={{ fontSize: 12.5, color: "#555" }}>{l}</span><strong style={{ fontSize: 12.5, color: D }}>{v}</strong>
            </div>)}
          <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 14px", background: GREY }}><span style={{ fontSize: 12.5, fontWeight: 600, color: D }}>Authorized at booking</span><strong style={{ fontSize: 13, color: D }}>€139.73</strong></div>
        </div>
        <div style={{ margin: "10px 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Added by the studio at session close</div>
        <div style={css.card()}>
          {[["⏱ Hours changed 3h → 6h (+3h × €40)", "+€120.00"], ["🎚 Mixing engineer · 2h × €20/hr", "+€40.00"], ["🔌 Extra charge — \u201Ccable damage\u201D", "+€19.73"]].map(([l, v]) =>
            <div key={l} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "10px 14px", borderBottom: `0.5px solid #f5f5f5`, background: A.bg }}>
              <span style={{ fontSize: 12.5, color: A.fg }}>{l}</span><strong style={{ fontSize: 12.5, color: A.fg }}>{v}</strong>
            </div>)}
        </div>
        <div style={css.card()}>
          <div style={{ display: "flex", justifyContent: "space-between", padding: "12px 14px" }}><span style={{ fontSize: 13, fontWeight: 700, color: R.fg }}>Studio's final charge</span><strong style={{ fontSize: 16, color: R.fg }}>€279.46</strong></div>
        </div>
        <div style={{ background: R.bg, borderRadius: 12, margin: "0 16px 12px", padding: "11px 13px", fontSize: 11.5, color: R.fg, lineHeight: 1.5 }}>⚠️ The studio's final charge (€279.46) is exactly double the authorized amount (€139.73) — consistent with the musician's claim of a double charge. Recommend requesting the studio's reasoning before deciding.</div>
        <button style={css.pbtn()} onClick={() => go("admin-party-actions")}>Act on the studio →</button>
        <button style={css.sbtn()} onClick={() => go("admin-dispute-detail")}>Back to resolution</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "admin-party-actions": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={() => go("admin-dispute-detail")} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Act on the studio</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{adminSel ? adminSel.studio : ""}</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={{ background: L, borderRadius: 12, margin: "0 16px 10px", padding: "10px 13px", fontSize: 11.5, color: M, lineHeight: 1.5 }}>Get the other side of the story or act, without yet deciding the money. Funds stay on hold until you resolve.</div>
        <div style={{ margin: "0 16px 6px" }}><label style={css.label}>Request information</label></div>
        <div style={css.card()}>
          <ConfirmItem icon="❓" title="Ask the studio for reasoning" sub="Why was this charged? Pauses the case for their reply." onClick={() => { setAdminDisputes(ds => ds.map(x => adminSel && x.id === adminSel.id ? { ...x, status: "awaiting" } : x)); setChats(c => ({ ...c, SUPPORT: [...(c.SUPPORT || []), { me: false, t: `Regarding the dispute on your recent session — could you explain the extra charges added at session close? We've paused the case for your reply.` }] })); go("admin-disputes"); showToast("📨 Sent to the studio's Recki Support chat · case paused"); }} />
          <ConfirmItem icon="📷" title="Request evidence / photos" sub="Ask for proof of the extra charges or damage" onClick={() => { setChats(c => ({ ...c, SUPPORT: [...(c.SUPPORT || []), { me: false, t: "Could you attach photos or proof for the additional charges on this booking? It helps us resolve the dispute fairly." }] })); showToast("📨 Evidence request sent to the studio's Support chat"); }} />
          <ConfirmItem icon="💬" title="Message the musician too" sub="Get the customer's account of what happened" onClick={() => { setChats(c => ({ ...c, SUPPORT: [...(c.SUPPORT || []), { me: false, t: "Thanks for raising this dispute — could you tell us a bit more about what happened during the session?" }] })); showToast("💬 Sent to the musician's Recki Support chat"); }} />
        </div>
        <div style={{ margin: "10px 16px 6px" }}><label style={css.label}>Take action against the studio</label></div>
        <div style={css.card()}>
          <ConfirmItem icon="⚠️" title="Send a warning" sub="Flag improper charging on the studio's record" onClick={() => { setChats(c => ({ ...c, SUPPORT: [...(c.SUPPORT || []), { me: false, t: "⚠️ A warning has been recorded on your account for charges that fell outside our fair-use policy. Repeated issues may affect your listing." }] })); showToast("⚠️ Warning sent · logged & delivered to Support chat"); }} />
          <ConfirmItem icon="🔎" title="Open the studio's account" sub="Review history, other disputes, or suspend" onClick={() => go("admin-users")} />
        </div>
        <div style={{ margin: "10px 16px 6px" }}><label style={css.label}>Write to the studio</label>
          <textarea value={adminMsg} onChange={e => setAdminMsg(e.target.value)} placeholder="Ask a specific question or explain the issue…" style={{ ...css.input, resize: "none", height: 70 }} /></div>
        <button style={css.pbtn()} onClick={() => { if (!adminMsg.trim()) { showToast("Write a message first"); return; } setChats(c => ({ ...c, SUPPORT: [...(c.SUPPORT || []), { me: false, t: adminMsg.trim() }] })); setAdminMsg(""); showToast("📨 Sent to the studio's Recki Support chat"); }}>Send to studio</button>
        <button style={css.sbtn()} onClick={() => go("admin-dispute-detail")}>Back to resolution</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "admin-messages": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={() => go("admin-home")} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>💬 Conversations</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>All your chats with musicians & studios</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 10 }}>
        {adminThreads.map(t => {
          const last = t.msgs[t.msgs.length - 1];
          return <div key={t.id} onClick={() => { setAdminThread(t); setAdminReply(""); go("admin-thread"); }} style={{ display: "flex", alignItems: "center", gap: 12, padding: "13px 16px", borderBottom: `0.5px solid ${BORDER}`, cursor: "pointer" }}>
            <div style={css.av(t.role === "Studio" ? G.fg : M, 44)}>{t.who.split(" ").map(w => w[0]).slice(0, 2).join("")}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 6 }}><span style={{ fontSize: 13, fontWeight: 600, color: D }}>{t.who}</span><span style={css.pill(t.role === "Studio" ? G : { bg: L, fg: M })}>{t.role}</span></div>
              <div style={{ fontSize: 11, color: "#888", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", marginTop: 2 }}>{last.adm ? "You: " : ""}{last.t}</div>
              <div style={{ fontSize: 10, color: "#bbb", marginTop: 2 }}>{t.reason}</div>
            </div>
            <span style={{ color: "#ccc" }}>›</span>
          </div>;
        })}
        <div style={{ padding: "14px 16px", fontSize: 11.5, color: "#888", lineHeight: 1.5 }}>Conversations are created when you message someone from a dispute, report, or their account. Full history is kept here.</div>
      </div>
    </div>,

    "admin-thread": <div style={{ flex: 1, display: "flex", flexDirection: "column", background: GREY }}>
      <div style={{ ...css.ph(), background: `linear-gradient(135deg, ${D}, ${DEEP})`, display: "flex", alignItems: "center", gap: 11 }}>
        <BackBtn onClick={() => go("admin-messages")} />
        <div style={{ ...css.av("rgba(255,255,255,.2)", 36) }}>{adminThread ? adminThread.who.split(" ").map(w => w[0]).slice(0, 2).join("") : ""}</div>
        <div style={{ flex: 1 }}><div style={{ fontSize: 14, fontWeight: 600, color: "#fff" }}>{adminThread ? adminThread.who : ""}</div><div style={{ fontSize: 10, color: "rgba(255,255,255,.6)" }}>{adminThread ? `${adminThread.role} · ${adminThread.reason}` : ""}</div></div>
      </div>
      <div style={{ flex: 1, overflowY: "auto", padding: "14px 14px 6px", display: "flex", flexDirection: "column", gap: 8 }}>
        <div style={{ background: L, borderRadius: 10, padding: "9px 12px", fontSize: 11, color: M, textAlign: "center", lineHeight: 1.5 }}>You're messaging as Recki Support. This appears in their app as the official Recki channel.</div>
        {(adminThread ? adminThread.msgs : []).map((m, i) =>
          <div key={i} style={{ alignSelf: m.adm ? "flex-end" : "flex-start", maxWidth: "75%", background: m.adm ? D : "#fff", color: m.adm ? "#fff" : D, padding: "9px 13px", borderRadius: m.adm ? "16px 16px 4px 16px" : "16px 16px 16px 4px", fontSize: 13, lineHeight: 1.45, boxShadow: "0 1px 2px rgba(0,0,0,.06)" }}>{m.t}</div>)}
      </div>
      <div style={{ display: "flex", gap: 8, padding: "10px 12px 14px", background: "#fff", borderTop: `0.5px solid ${BORDER}`, flexShrink: 0 }}>
        <input value={adminReply} onChange={e => setAdminReply(e.target.value)} onKeyDown={e => { if (e.key === "Enter" && adminReply.trim()) { const txt = adminReply.trim(); setAdminThreads(ts => ts.map(x => adminThread && x.id === adminThread.id ? { ...x, msgs: [...x.msgs, { adm: true, t: txt }] } : x)); setAdminThread(t => ({ ...t, msgs: [...t.msgs, { adm: true, t: txt }] })); setAdminReply(""); } }} placeholder="Reply as Recki Support…" style={{ ...css.input, flex: 1, borderRadius: 20, background: GREY, border: "none" }} />
        <button onClick={() => { if (!adminReply.trim()) return; const txt = adminReply.trim(); setAdminThreads(ts => ts.map(x => adminThread && x.id === adminThread.id ? { ...x, msgs: [...x.msgs, { adm: true, t: txt }] } : x)); setAdminThread(t => ({ ...t, msgs: [...t.msgs, { adm: true, t: txt }] })); setAdminReply(""); showToast("📨 Sent"); }} style={{ width: 42, height: 42, borderRadius: "50%", background: D, color: "#fff", border: "none", fontSize: 16, cursor: "pointer", flexShrink: 0 }}>➤</button>
      </div>
    </div>,

    "admin-reports": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={() => go("admin-home")} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>🚩 Reports & complaints</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{adminReports.filter(r => r.status === "open").length} open · from musicians & studios</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 10 }}>
        {adminReports.map(r =>
          <div key={r.id} onClick={() => { setAdminSel(r); go("admin-report-detail"); }} style={{ ...css.card(), padding: 14, cursor: "pointer", opacity: r.status === "open" ? 1 : .55 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 5 }}>
              <span style={css.pill({ bg: A.bg, fg: A.fg })}>{r.kind}</span>
              <span style={{ flex: 1 }} />
              <span style={css.pill(r.status === "open" ? R : G)}>{r.status === "open" ? "Open" : "Closed"}</span>
            </div>
            <div style={{ fontSize: 12.5, color: D, fontWeight: 600, marginBottom: 3 }}>{r.from} → {r.target}</div>
            <div style={{ fontSize: 12, color: "#666", lineHeight: 1.5 }}>{r.detail}</div>
            {r.photos > 0 && <div style={{ fontSize: 11, color: M, marginTop: 6 }}>📎 {r.photos} photo{r.photos > 1 ? "s" : ""} attached</div>}
          </div>)}
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "admin-report-detail": <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={() => go("admin-reports")} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Review report</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>{adminSel ? adminSel.kind : ""}</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={css.card()}>
          <ConfirmItem icon="📣" title={adminSel ? adminSel.from : ""} sub="Reported by" />
          <ConfirmItem icon="🎯" title={adminSel ? adminSel.target : ""} sub="Reported account" />
          <ConfirmItem icon="📝" title="Details" sub={adminSel ? adminSel.detail : ""} />
        </div>
        {adminSel && adminSel.photos > 0 && <>
          <div style={{ margin: "0 16px 6px" }}><label style={css.label}>Photo evidence</label></div>
          <div style={{ display: "flex", gap: 8, padding: "0 16px 10px" }}>
            {Array.from({ length: adminSel.photos }).map((_, i) => <div key={i} style={{ width: 72, height: 72, borderRadius: 10, background: "linear-gradient(135deg,#5B5BD6,#8A8AE0)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 24 }}>📷</div>)}
          </div>
        </>}
        <div style={{ background: L, borderRadius: 12, margin: "0 16px 10px", padding: "10px 13px", fontSize: 11.5, color: M, lineHeight: 1.5 }}>Decide an outcome. The reporter is told it's resolved; actions against the reported account are logged.</div>
        <div style={{ margin: "0 16px 6px" }}><label style={css.label}>Take action</label></div>
        <button style={css.sbtn()} onClick={() => showToast("📨 Warning sent to the account")}>⚠️ Send a warning</button>
        <button style={css.sbtn()} onClick={() => go("admin-users")}>👤 Open account to suspend / manage</button>
        <button style={css.sbtn({ color: M })} onClick={() => showToast("💬 Replied to the reporter")}>💬 Message the reporter</button>
        <button style={css.sbtn({ color: G.fg, borderColor: G.bg })} onClick={() => { setAdminReports(rs => rs.map(x => adminSel && x.id === adminSel.id ? { ...x, status: "closed" } : x)); go("admin-reports"); showToast("✅ Report resolved & closed"); }}>Mark resolved & close</button>
        <button style={css.sbtn()} onClick={() => { setAdminReports(rs => rs.map(x => adminSel && x.id === adminSel.id ? { ...x, status: "closed" } : x)); go("admin-reports"); showToast("Dismissed — no action needed"); }}>Dismiss (no action)</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "admin-users": <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={() => go("admin-home")} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>👥 Users & studios</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Search, verify, suspend</p></div>
      <div style={{ padding: "10px 16px", borderBottom: `0.5px solid ${BORDER}`, flexShrink: 0 }}>
        <input value={adminUserSearch} onChange={e => setAdminUserSearch(e.target.value)} placeholder="Search by name, email or studio…" style={{ ...css.input, background: GREY }} />
      </div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 8 }}>
        {[{ init: "MR", name: "Marco Rossi", sub: "Musician · marco@email.com · 12 bookings", flag: "", bg: M }, { init: "P7", name: "Proberaum Wien Mitte", sub: "Studio · Vienna · 31 bookings", flag: "verified", bg: G.fg }, { init: "S7", name: "Studio 7 Recording", sub: "Studio · Vienna · awaiting verification", flag: "unverified", bg: A.fg }, { init: "DH", name: "David Huber", sub: "Musician · 3 no-shows · auto-suspended", flag: "suspended", note: "Suspended 1 month · 24 days left (3 no-shows)", bg: R.fg }, { init: "AK", name: "Anna Kovacs", sub: "Musician · 2 reports on file", flag: "flagged", bg: R.fg }].filter(u => !adminUserSearch || (u.name + u.sub).toLowerCase().includes(adminUserSearch.toLowerCase())).map(u =>
          <div key={u.init} style={{ ...css.card(), padding: 12 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
              <div style={css.av(u.bg, 42)}>{u.init}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                  <span style={{ fontSize: 13, fontWeight: 600, color: D }}>{u.name}</span>
                  {u.flag === "verified" && <span style={css.pill(G)}>✓ Verified</span>}
                  {u.flag === "unverified" && <span style={css.pill(A)}>Pending</span>}
                  {u.flag === "flagged" && <span style={css.pill(R)}>⚠ Flagged</span>}
                  {u.flag === "suspended" && <span style={css.pill(R)}>⛔ Suspended</span>}
                </div>
                <div style={{ fontSize: 11, color: "#888", marginTop: 2 }}>{u.sub}</div>
                {u.note && <div style={{ fontSize: 11, color: R.fg, marginTop: 3, fontWeight: 600 }}>{u.note}</div>}
              </div>
            </div>
            <div style={{ display: "flex", gap: 7, marginTop: 10 }}>
              {u.flag === "unverified" && <button style={css.gbtn()} onClick={() => showToast(`✅ ${u.name} verified`)}>✓ Verify</button>}
              <button style={css.gbtn()} onClick={() => showToast("📋 Viewing full history")}>History</button>
              <button style={css.gbtn()} onClick={() => { setChats(c => ({ ...c, SUPPORT: [...(c.SUPPORT || []), { me: false, t: `Hi ${u.name.split(" ")[0]}, this is the Recki team reaching out about your account.` }] })); showToast(`💬 Sent to ${u.name}'s Recki Support chat`); }}>Message</button>
              {u.flag === "suspended"
                ? <button style={css.gbtn({ color: G.fg })} onClick={() => showToast(`✅ ${u.name} reinstated`)}>Lift suspension</button>
                : <button style={css.dbtn} onClick={() => showToast(`🚫 ${u.name} suspended`)}>Suspend</button>}
            </div>
          </div>)}
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "gig-post": <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={{ background: `linear-gradient(135deg, ${GIG}, ${GIG_DEEP})`, padding: "20px 16px 18px", flexShrink: 0 }}>
        <BackBtn onClick={goBack} />
        <h2 style={{ fontSize: 20, fontWeight: 800, color: "#fff", marginTop: 6 }}>🎟 Post a gig ad</h2>
        <div style={{ fontSize: 12, color: "rgba(255,255,255,.9)", marginTop: 3 }}>Tell the local scene what's happening</div>
      </div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 12 }}>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Band / act name</label><input value={gigForm.band} onChange={e => setGigForm(f => ({ ...f, band: e.target.value }))} placeholder="e.g. The Velvet Amps" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Venue</label><input value={gigForm.venue} onChange={e => setGigForm(f => ({ ...f, venue: e.target.value }))} placeholder="B72, Vienna" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Date & time</label><input value={gigForm.when} onChange={e => setGigForm(f => ({ ...f, when: e.target.value }))} placeholder="Sat 14 Jun · 21:00" style={css.input} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Details</label><textarea value={gigForm.note} onChange={e => setGigForm(f => ({ ...f, note: e.target.value }))} placeholder="Support acts, entry, what to expect…" style={{ ...css.input, resize: "none", height: 80 }} /></div>
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Ticket link <span style={{ color: "#bbb", fontWeight: 400 }}>· optional</span></label><input value={gigForm.ticket} onChange={e => setGigForm(f => ({ ...f, ticket: e.target.value }))} placeholder="https://…" style={css.input} /></div>
        <div style={{ background: "#FCEBEE", borderRadius: 12, margin: "0 16px 10px", padding: "11px 13px", fontSize: 11.5, color: GIG_DEEP, lineHeight: 1.5 }}>✅ Free to post · reviewed by our team before it goes live.</div>
        <button style={{ ...css.pbtn(), background: GIG }} onClick={() => { if (!gigForm.band.trim() || !gigForm.when.trim()) { showToast("Add a name and date"); return; } setMyGigs(g => [{ id: "g" + Date.now(), ...gigForm, kind: "playing", band: gigForm.band.trim(), venue: gigForm.venue.trim(), when: gigForm.when.trim(), pending: true }, ...g]); showToast("🎟 Gig submitted — pending review"); goBack(); }}>Submit gig for review</button>
        {myGigs.length > 0 && <>
          <div style={{ margin: "12px 16px 6px", fontSize: 10, fontWeight: 700, color: "#888", textTransform: "uppercase", letterSpacing: .5 }}>Your gig ads</div>
          {myGigs.map(g =>
            <div key={g.id} style={{ ...css.card(), padding: "12px 14px" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4, flexWrap: "wrap" }}><span style={css.pill(g.kind === "playing" ? { bg: "#FDF1DD", fg: GOLD } : { bg: L, fg: M })}>{g.kind === "playing" ? "Playing" : "Wanted"}</span><span style={{ fontSize: 13, fontWeight: 700, color: D }}>{g.band}</span>{g.pending && <span style={{ fontSize: 9.5, fontWeight: 700, color: A.fg, background: A.bg, padding: "2px 7px", borderRadius: 7 }}>⏳ Pending review</span>}</div>
              <div style={{ fontSize: 11.5, color: "#888" }}>{g.venue} · {g.when}</div>
              <button onClick={() => { setMyGigs(gs => gs.filter(x => x.id !== g.id)); showToast("Gig ad removed"); }} style={{ ...css.gbtn({ color: R.fg }), marginTop: 8 }}>Remove</button>
            </div>)}
        </>}
        <div style={{ height: 14 }} />
      </div>
    </div>,

    "gig-submit": <div style={{ flex: 1, background: "#fff", display: "flex", flexDirection: "column" }}>
      <div style={css.ph()}><BackBtn onClick={goBack} /><h2 style={{ fontSize: 19, fontWeight: 700 }}>Post a gig</h2><p style={{ fontSize: 12, opacity: .6, marginTop: 3 }}>Free · reviewed before it goes live</p></div>
      <div style={{ flex: 1, overflowY: "auto", paddingTop: 14 }}>
        {[["Band / act name", "The Velvet Amps"], ["Venue", "B72, Vienna"], ["Date & time", "Sat 14 Jun · 21:00"], ["Ticket link (optional)", "https://…"]].map(([l, v]) =>
          <div key={l} style={{ margin: "0 16px 10px" }}><label style={css.label}>{l}</label><input defaultValue={v} style={css.input} /></div>)}
        <div style={{ margin: "0 16px 10px" }}><label style={css.label}>Days to promote</label><select style={css.input}><option>3 days — €6</option><option>7 days — €14</option><option>14 days — €28</option></select></div>
        <div style={{ background: L, borderRadius: 12, margin: "0 16px 8px", padding: "10px 13px", fontSize: 12, color: M }}>📷 A band photo makes your gig card stand out — add one below.</div>
        <button style={css.sbtn()} onClick={() => showToast("📷 Band photo uploaded")}>+ Upload band photo</button>
        <button style={css.pbtn()} onClick={() => { goBack(); showToast("🎟 Gig submitted — live after payment"); }}>Pay in app & publish</button>
        <div style={{ height: 14 }} />
      </div>
    </div>,

  };

  const showMusNav = !noMusNav.includes(screen) && !vendorScreens.has(screen);
  const showVendorNav = vendorScreens.has(screen);

  return (
    <div style={{ minHeight: "100vh", background: "linear-gradient(160deg,#E8E8FB,#D6D6F5)", display: "flex", alignItems: "center", justifyContent: "center", padding: 20, fontFamily: "system-ui, -apple-system, sans-serif" }}>
      <div>
        <div style={{ textAlign: "center", color: "rgba(58,58,138,.55)", fontSize: 12, marginBottom: 10, fontWeight: 600 }}>Recki · Interactive Prototype</div>
        <div style={css.phone}>
          <div style={css.notch}>
            <span style={{ color: "#fff", fontSize: 11, fontWeight: 600 }}>19:42</span>
            <div style={{ width: 80, height: 18, background: "#000", borderRadius: 10 }} />
            <span style={{ color: "#fff", fontSize: 10 }}>📶 🔋</span>
          </div>
          <div style={css.sw}>
            <div style={css.sc}>
              {screens[screen] || screens.home}
            </div>
          </div>
          {showMusNav && <div style={css.bnav}>
            {[["home", "🏠", t("nav_home"), "home"], ["search", "🔍", t("nav_search"), "search"], ["bookings", "📅", t("nav_bookings"), "bookings"], ["profile", "👤", t("nav_profile"), "profile"]].map(([id, ico, label, tab]) =>
              <div key={id} onClick={() => navGo(id, tab)} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 2, cursor: "pointer", opacity: nav === tab ? 1 : .45 }}>
                <div style={{ position: "relative" }}>
                  <span style={{ fontSize: 19 }}>{ico}</span>
                  {id === "profile" && profileBadge > 0 && <span style={{ position: "absolute", top: -3, right: -7, background: D, color: "#fff", fontSize: 9, fontWeight: 700, minWidth: 15, height: 15, borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", padding: "0 3px", border: "1.5px solid #fff" }}>{profileBadge}</span>}
                </div>
                <span style={{ fontSize: 9, fontWeight: nav === tab ? 700 : 400, color: D }}>{label}</span>
              </div>)}
          </div>}
          {showVendorNav && <div style={css.bnav}>
            {[["vendor-home", "📊", "Dashboard", "vhome"], ["vendor-cal", "📆", "Calendar", "vcal"], ["vendor-listings", "🏠", "Listings", "vlist"], ["vendor-insights", "📈", "Insights", "vins"]].map(([id, ico, label, tab]) =>
              <div key={id} onClick={() => { setVnav(tab); go(id); }} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 2, cursor: "pointer", opacity: vnav === tab ? 1 : .45 }}>
                <span style={{ fontSize: 19 }}>{ico}</span>
                <span style={{ fontSize: 9, fontWeight: vnav === tab ? 700 : 400, color: D }}>{label}</span>
              </div>)}
          </div>}
          {cancelModal && <Modal onClose={() => setCancelModal(false)}>
            <div style={{ fontSize: 16, fontWeight: 700, color: D, marginBottom: 6 }}>Cancel booking?</div>
            <div style={{ fontSize: 13, color: "#555", lineHeight: 1.6, marginBottom: 10 }}>{cancelCtx.title} · {cancelCtx.when}</div>
            {cancelCtx.within24
              ? <div style={{ background: A.bg, borderRadius: 10, padding: "10px 12px", fontSize: 12, color: A.fg, marginBottom: 12 }}>⚠ Less than 24h before start — 50% ({cancelCtx.amt}) will be charged per the cancellation policy.</div>
              : <div style={{ background: G.bg, borderRadius: 10, padding: "10px 12px", fontSize: 12, color: G.fg, marginBottom: 12 }}>✓ More than 24h before start — you'll be refunded 100% ({cancelCtx.full}) to your card in the app.</div>}
            <button onClick={() => { setCancelModal(false); showToast(cancelCtx.within24 ? `Cancelled · ${cancelCtx.amt} refunded` : `Cancelled · ${cancelCtx.full} refunded in full`); }} style={{ ...css.pbtn({ background: R.fg }), width: "100%", margin: "0 0 8px" }}>Yes, cancel booking</button>
            <button onClick={() => setCancelModal(false)} style={{ ...css.sbtn(), width: "100%", margin: 0 }}>Keep booking</button>
          </Modal>}
          {vendorCancelModal && <Modal onClose={() => setVendorCancelModal(false)}>
            <div style={{ fontSize: 16, fontWeight: 700, color: D, marginBottom: 6 }}>Cancel this booking?</div>
            <div style={{ fontSize: 13, color: "#555", lineHeight: 1.6, marginBottom: 12 }}>The musician gets an automatic 100% refund in the app. Frequent cancellations lower your ranking.</div>
            <button onClick={() => { setVendorCancelModal(false); showToast("❌ Cancelled · full refund issued in app"); }} style={{ ...css.pbtn({ background: R.fg }), width: "100%", margin: "0 0 8px" }}>Yes, cancel & refund</button>
            <button onClick={() => setVendorCancelModal(false)} style={{ ...css.sbtn(), width: "100%", margin: 0 }}>Keep booking</button>
          </Modal>}
          {filterModal && <Modal onClose={() => setFilterModal(false)}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
              <div style={{ fontSize: 16, fontWeight: 700, color: D }}>Filters</div>
              <span onClick={() => setFilters({ inst: [], svc: [], gear: [], priceMax: 100, ppl: null })} style={{ fontSize: 12, color: M, cursor: "pointer", fontWeight: 600 }}>Reset</span>
            </div>
            <div style={{ maxHeight: 400, overflowY: "auto" }}>
              {/* Gear search — add multiple */}
              <div style={{ marginBottom: 16 }}>
                <div style={{ fontSize: 12, fontWeight: 700, color: D, marginBottom: 7 }}>🎛 Has specific gear · add any</div>
                <div style={{ background: "#F4F4FB", borderRadius: 10, padding: "9px 12px", display: "flex", alignItems: "center", gap: 8, marginBottom: filters.gear.length ? 8 : 0 }}>
                  <span style={{ fontSize: 13 }}>🔍</span>
                  <input value={gearFilterInput} onChange={e => setGearFilterInput(e.target.value)} placeholder="Search gear — “U87”, “Nord”, “SM58”…" style={{ flex: 1, background: "transparent", border: "none", outline: "none", fontSize: 13, color: D, minWidth: 0 }} />
                  {gearFilterInput && <span onClick={() => setGearFilterInput("")} style={{ color: "#aaa", fontSize: 14, cursor: "pointer" }}>✕</span>}
                </div>
                {filters.gear.length > 0 && <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginBottom: gearFilterInput.trim() ? 8 : 0 }}>
                  {filters.gear.map(g => <button key={g} onClick={() => setFilters(f => ({ ...f, gear: f.gear.filter(x => x !== g) }))} style={css.fc(true)}>{g} ✕</button>)}
                </div>}
                {gearFilterInput.trim() && (() => {
                  const q = gearFilterInput.trim().toLowerCase();
                  const sugg = AVAILABLE_GEAR.filter(g => g.toLowerCase().includes(q) && !filters.gear.includes(g)).slice(0, 6);
                  return sugg.length > 0
                    ? <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>{sugg.map(g => <button key={g} onClick={() => { setFilters(f => ({ ...f, gear: [...f.gear, g] })); setGearFilterInput(""); }} style={css.fc(false)}>+ {g}</button>)}</div>
                    : <div style={{ fontSize: 11, color: "#999", padding: "2px 2px" }}>No studio lists “{gearFilterInput.trim()}”.</div>;
                })()}
                <div style={{ fontSize: 10.5, color: "#999", marginTop: 7 }}>Add several — only studios that have all of them are shown.</div>
              </div>
              {filterCats.map(c => <div key={c.key} style={{ marginBottom: 14 }}>
                <div style={{ fontSize: 12, fontWeight: 700, color: D, marginBottom: 7 }}>{c.title}{c.single ? " · pick one" : ""}</div>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                  {c.opts.map(([k, l]) => {
                    const on = c.single ? filters[c.key] === k : filters[c.key].includes(k);
                    return <button key={k} onClick={() => toggleCat(c.key, k, c.single)} style={css.fc(on)}>{l}</button>;
                  })}
                </div>
              </div>)}
              {/* Price per hour — slider 0 to 100 */}
              <div style={{ marginBottom: 16 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 8 }}>
                  <div style={{ fontSize: 12, fontWeight: 700, color: D }}>💶 Price per hour</div>
                  <div style={{ fontSize: 12.5, fontWeight: 700, color: D }}>{filters.priceMax >= 100 ? "Any price" : `Up to €${filters.priceMax}`}</div>
                </div>
                <input type="range" min={0} max={100} step={5} value={filters.priceMax} onChange={e => setFilters(f => ({ ...f, priceMax: Number(e.target.value) }))} style={{ width: "100%", accentColor: D, cursor: "pointer" }} />
                <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, color: "#aaa", marginTop: 2 }}><span>€0</span><span>€100+</span></div>
                <div style={{ fontSize: 10.5, color: "#999", marginTop: 4 }}>Shows every studio at or below this price.</div>
              </div>
              {/* People */}
              <div style={{ marginBottom: 12 }}>
                <div style={{ fontSize: 12, fontWeight: 700, color: D, marginBottom: 7 }}>👥 People · pick one</div>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                  {[["s", "1–4 people"], ["l", "5+ people"]].map(([k, l]) => <button key={k} onClick={() => setFilters(f => ({ ...f, ppl: f.ppl === k ? null : k }))} style={css.fc(filters.ppl === k)}>{l}</button>)}
                </div>
              </div>
            </div>
            <button onClick={() => setFilterModal(false)} style={{ ...css.pbtn(), width: "100%", margin: "4px 0 0" }}>Show {visibleStudios.length} studio{visibleStudios.length === 1 ? "" : "s"}</button>
          </Modal>}
          {hirePost && <Modal onClose={() => setHirePost(null)}>
            <div style={{ fontSize: 16, fontWeight: 700, color: D, marginBottom: 4 }}>{hirePost === "band" ? "Post: my band needs someone" : hirePost === "session" ? "Post: I'm available for sessions" : "Post: I write for others"}</div>
            <div style={{ fontSize: 11.5, color: "#888", marginBottom: 14 }}>{hirePost === "band" ? "Other musicians will see this and can offer to join." : "Bands and artists will see this and can contact you."}</div>
            <label style={css.label}>{hirePost === "band" ? "Band name" : "Your name / act"}</label>
            <input value={hpForm.title} onChange={e => setHpForm(f => ({ ...f, title: e.target.value }))} placeholder={hirePost === "band" ? "e.g. Neon Tides" : "e.g. David Keller"} style={{ ...css.input, marginBottom: 10 }} />
            <label style={css.label}>{hirePost === "band" ? "Who / what you need" : hirePost === "session" ? "What you play" : "What you write"}</label>
            <input value={hpForm.detail} onChange={e => setHpForm(f => ({ ...f, detail: e.target.value }))} placeholder={hirePost === "band" ? "e.g. Drummer for indie band, 1 gig/week" : hirePost === "session" ? "e.g. Session drummer — tight, reads charts" : "e.g. Lyrics & toplines, pop / R&B"} style={{ ...css.input, marginBottom: 10 }} />
            <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
              {hirePost !== "band" && <div style={{ flex: 1 }}><label style={css.label}>Rate from (€)</label><input value={hpForm.rate} onChange={e => setHpForm(f => ({ ...f, rate: e.target.value.replace(/[^0-9]/g, "") }))} inputMode="numeric" placeholder="40" style={css.input} /></div>}
              <div style={{ flex: 1 }}><label style={css.label}>Area</label><input value={hpForm.area} onChange={e => setHpForm(f => ({ ...f, area: e.target.value }))} placeholder="Vienna" style={css.input} /></div>
            </div>
            <button onClick={() => {
              if (!hpForm.title.trim() || !hpForm.detail.trim()) { showToast("Add a name and details"); return; }
              const base = { id: "mine" + Date.now(), mine: true, init: "MR", bg: D, area: hpForm.area.trim() || "Vienna", rate: hpForm.rate.trim() };
              if (hirePost === "band") setMyHireListings(l => [{ ...base, type: "band", name: hpForm.title.trim(), need: hpForm.detail.trim(), genre: "" }, ...l]);
              else if (hirePost === "session") setMyHireListings(l => [{ ...base, type: "session", name: hpForm.title.trim(), instr: hpForm.detail.trim(), note: "" }, ...l]);
              else setMyHireListings(l => [{ ...base, type: "ghost", name: hpForm.title.trim(), kind: hpForm.detail.trim(), note: "" }, ...l]);
              setHirePost(null); showToast("✅ Posted — you're now listed");
            }} style={{ ...css.pbtn(), width: "100%", margin: 0 }}>Post listing</button>
          </Modal>}
          {friendPickerModal && <Modal onClose={() => setFriendPickerModal(false)}>
            <div style={{ fontSize: 16, fontWeight: 700, color: D, marginBottom: 4 }}>Add friends to split with</div>
            <div style={{ fontSize: 11.5, color: "#888", marginBottom: 12 }}>Tap anyone to add or remove them from the split.</div>
            <div style={{ background: GREY, borderRadius: 12, padding: "9px 12px", display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
              <span style={{ fontSize: 14 }}>🔍</span>
              <input value={friendSearch} onChange={e => setFriendSearch(e.target.value)} placeholder="Search friends by name…" autoFocus style={{ flex: 1, background: "transparent", border: "none", outline: "none", fontSize: 13, color: "#333", fontFamily: "inherit" }} />
              {friendSearch && <span onClick={() => setFriendSearch("")} style={{ fontSize: 14, color: "#aaa", cursor: "pointer" }}>✕</span>}
            </div>
            <div style={{ maxHeight: 340, overflowY: "auto" }}>
              {(() => {
                const q = friendSearch.trim().toLowerCase();
                const list = users.filter(u => u.name.toLowerCase().includes(q));
                const mutuals = list.filter(u => friends.includes(u.init));
                const others = list.filter(u => !friends.includes(u.init));
                const row = (u) => { const on = splitFriends.includes(u.init); return <div key={u.init} onClick={() => toggleSplitFriend(u.init)} style={{ display: "flex", alignItems: "center", gap: 11, padding: "10px 6px", borderBottom: `0.5px solid #f5f5f5`, cursor: "pointer" }}>
                  <span style={{ ...css.av(u.bg, 34), fontSize: 12 }}>{u.init}</span>
                  <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>{u.name}</div><div style={{ fontSize: 10.5, color: "#888" }}>{friends.includes(u.init) ? "Friend" : (peopleInfo[u.init] ? `${peopleInfo[u.init].role}` : "On Recki")}</div></div>
                  <div style={{ width: 22, height: 22, borderRadius: 6, border: `2px solid ${on ? D : BORDER}`, background: on ? D : "#fff", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, color: "#fff", fontSize: 13, fontWeight: 700 }}>{on ? "✓" : ""}</div>
                </div>; };
                return <>
                  {mutuals.length > 0 && <div style={{ fontSize: 10, fontWeight: 700, color: "#aaa", textTransform: "uppercase", letterSpacing: .5, padding: "4px 0 2px" }}>Your friends</div>}
                  {mutuals.map(row)}
                  {others.length > 0 && <div style={{ fontSize: 10, fontWeight: 700, color: "#aaa", textTransform: "uppercase", letterSpacing: .5, padding: "10px 0 2px" }}>Others on Recki</div>}
                  {others.map(row)}
                  {list.length === 0 && <div style={{ textAlign: "center", padding: "24px", color: "#aaa", fontSize: 12.5 }}>No one found for “{friendSearch}”.</div>}
                </>;
              })()}
            </div>
            <button onClick={() => setFriendPickerModal(false)} style={{ ...css.pbtn(), width: "100%", margin: "8px 0 0" }}>{splitFriends.length ? `Done · ${splitFriends.length} selected` : "Done"}</button>
          </Modal>}
          {sortModal && <Modal onClose={() => setSortModal(false)}>
            <div style={{ fontSize: 16, fontWeight: 700, color: D, marginBottom: 10 }}>Sort by</div>
            <div>
              {[["dist", "📍 Nearest first", "Uses your current location"], ["price", "💶 Price", "Lowest hourly rate first"], ["rating", "⭐ Rating", "Highest rated first"]].map(([k, l, sub]) =>
                <div key={k} onClick={() => { setSortBy(k); setSortModal(false); }} style={{ display: "flex", alignItems: "center", gap: 12, padding: "13px 4px", borderBottom: `0.5px solid #f5f5f5`, cursor: "pointer" }}>
                  <div style={{ width: 20, height: 20, borderRadius: "50%", border: `2px solid ${sortBy === k ? D : BORDER}`, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>{sortBy === k && <div style={{ width: 10, height: 10, borderRadius: "50%", background: D }} />}</div>
                  <div style={{ flex: 1 }}><div style={{ fontSize: 14, fontWeight: 500, color: D }}>{l}</div><div style={{ fontSize: 11, color: "#888", marginTop: 1 }}>{sub}</div></div>
                </div>)}
            </div>
            <button onClick={() => setSortModal(false)} style={{ ...css.pbtn(), width: "100%", margin: "12px 0 0" }}>Done</button>
          </Modal>}
          {chatMenu && <Modal onClose={() => setChatMenu(false)}>
            <div style={{ fontSize: 16, fontWeight: 700, color: D, marginBottom: 4 }}>{chatNames[chatWith]}</div>
            <div style={{ fontSize: 12, color: "#888", marginBottom: 12 }}>Musician · Vienna</div>
            <div onClick={() => { setChatMenu(false); showToast("🚩 Reported — Recki will review this musician"); }} style={{ display: "flex", alignItems: "center", gap: 12, padding: "13px 4px", borderBottom: `0.5px solid #f5f5f5`, cursor: "pointer" }}>
              <span style={{ fontSize: 18 }}>🚩</span><div style={{ flex: 1 }}><div style={{ fontSize: 14, fontWeight: 500, color: D }}>Report</div><div style={{ fontSize: 11, color: "#888" }}>Flag inappropriate behaviour to Recki</div></div>
            </div>
            <div onClick={() => { setChatMenu(false); deleteChat(chatWith); goBack(); showToast("🚫 Blocked — they can no longer message you"); }} style={{ display: "flex", alignItems: "center", gap: 12, padding: "13px 4px", borderBottom: `0.5px solid #f5f5f5`, cursor: "pointer" }}>
              <span style={{ fontSize: 18 }}>🚫</span><div style={{ flex: 1 }}><div style={{ fontSize: 14, fontWeight: 500, color: D }}>Block</div><div style={{ fontSize: 11, color: "#888" }}>Stop receiving messages from them</div></div>
            </div>
            <div onClick={() => { setChatMenu(false); deleteChat(chatWith); goBack(); showToast("🗑 Chat deleted"); }} style={{ display: "flex", alignItems: "center", gap: 12, padding: "13px 4px", cursor: "pointer" }}>
              <span style={{ fontSize: 18 }}>🗑</span><div style={{ flex: 1 }}><div style={{ fontSize: 14, fontWeight: 500, color: R.fg }}>Delete chat</div><div style={{ fontSize: 11, color: "#888" }}>Remove this conversation</div></div>
            </div>
            <button onClick={() => setChatMenu(false)} style={{ ...css.sbtn(), width: "100%", margin: "12px 0 0" }}>Cancel</button>
          </Modal>}
          {reportModal && <Modal onClose={() => setReportModal(false)}>
            <div style={{ fontSize: 16, fontWeight: 700, color: D, marginBottom: 4 }}>Report {vb ? vb.who.split(" · ")[0] : "musician"}</div>
            <div style={{ fontSize: 12, color: "#888", marginBottom: 14 }}>Tell Recki what happened. Our team reviews every report. For damage costs, also add a charge when closing the session.</div>
            <label style={css.label}>Reason</label>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 7, marginBottom: 14 }}>
              {["🔧 Damaged equipment", "🧹 Left room a mess", "⏰ Overstayed slot", "🚫 No-show", "🗣 Abusive behaviour", "❓ Other"].map(r =>
                <button key={r} onClick={() => setReportReason(r)} style={css.fc(reportReason === r)}>{r}</button>)}
            </div>
            <label style={css.label}>Details</label>
            <textarea value={reportDetails} onChange={e => setReportDetails(e.target.value)} placeholder="Describe what happened — what was damaged, when, any costs. Photos can be added in the real app." style={{ ...css.input, resize: "none", height: 90, marginBottom: 6 }} />
            <label style={css.label}>Photo evidence (optional)</label>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 14 }}>
              {Array.from({ length: reportPhotos }).map((_, i) =>
                <div key={i} style={{ position: "relative", width: 64, height: 64, borderRadius: 10, background: `linear-gradient(135deg,#5B5BD6,#8A8AE0)`, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22 }}>📷
                  <button onClick={() => setReportPhotos(n => Math.max(0, n - 1))} style={{ position: "absolute", top: -6, right: -6, width: 20, height: 20, borderRadius: "50%", border: "none", background: R.fg, color: "#fff", fontSize: 11, cursor: "pointer", fontFamily: "inherit" }}>✕</button>
                </div>)}
              {reportPhotos < 4 && <button onClick={() => { setReportPhotos(n => n + 1); showToast("📷 Photo attached"); }} style={{ width: 64, height: 64, borderRadius: 10, border: `1.5px dashed ${BORDER}`, background: "#fff", color: "#999", fontSize: 22, cursor: "pointer", fontFamily: "inherit", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>＋<span style={{ fontSize: 8 }}>Photo</span></button>}
            </div>
            <button onClick={() => { if (!reportReason) { showToast("Pick a reason first"); return; } if (!reportDetails.trim()) { showToast("Add a few details"); return; } setReportModal(false); showToast(`🚩 Report submitted${reportPhotos ? ` with ${reportPhotos} photo${reportPhotos > 1 ? "s" : ""}` : ""} — Recki will review and follow up`); }} style={{ ...css.pbtn({ background: R.fg }), width: "100%", margin: "0 0 8px" }}>Submit report</button>
            <button onClick={() => setReportModal(false)} style={{ ...css.sbtn(), width: "100%", margin: 0 }}>Cancel</button>
          </Modal>}
          {noShowModal && <Modal onClose={() => setNoShowModal(false)}>
            {(() => { const next = musNoShows + 1; const suspend = next >= 3; return <>
              <div style={{ fontSize: 16, fontWeight: 700, color: D, marginBottom: 6 }}>Mark as no-show?</div>
              <div style={{ fontSize: 13, color: "#555", lineHeight: 1.6, marginBottom: 10 }}>{vb ? vb.who.split(" · ")[0] : "The musician"} didn't show up and didn't cancel ({vb ? vb.time : "13:00–15:00"} · {vb ? vb.room : "Room A"}).</div>
              <div style={{ background: G.bg, borderRadius: 10, padding: "10px 12px", marginBottom: 10 }}>
                <div style={{ fontSize: 12, color: G.fg, fontWeight: 600, marginBottom: 4 }}>You're paid the full amount</div>
                <div style={{ fontSize: 11.5, color: G.fg, lineHeight: 1.5 }}>No warning was given, so the full {vb ? vb.amount : "€24.84"} is captured to you — the musician is not refunded.</div>
              </div>
              <div style={{ background: suspend ? R.bg : A.bg, borderRadius: 10, padding: "10px 12px", marginBottom: 12 }}>
                <div style={{ fontSize: 12, color: suspend ? R.fg : A.fg, fontWeight: 600, marginBottom: 4 }}>{suspend ? "⛔ This is their 3rd no-show" : `⚠️ No-show ${next} of 3`}</div>
                <div style={{ fontSize: 11.5, color: suspend ? R.fg : A.fg, lineHeight: 1.5 }}>{suspend ? "They'll be automatically suspended from Recki for 1 month. They can still dispute within 48h." : `Three no-shows in total suspend an account for 1 month. They'll be notified and can dispute within 48h.`}</div>
              </div>
              <button onClick={() => { setMusNoShows(next); setNoShowModal(false); showToast(suspend ? `🚫 No-show · ${vb ? vb.amount : "€24.84"} captured · account suspended 1 month` : `🚫 No-show · ${vb ? vb.amount : "€24.84"} captured · musician notified (${next}/3)`); goBack(); }} style={{ ...css.pbtn({ background: R.fg }), width: "100%", margin: "0 0 8px" }}>{suspend ? "Confirm no-show & suspend" : "Yes, mark as no-show"}</button>
              <button onClick={() => setNoShowModal(false)} style={{ ...css.sbtn(), width: "100%", margin: 0 }}>Cancel</button>
            </>; })()}
          </Modal>}
          {studioSwitcher && <Modal onClose={() => setStudioSwitcher(false)}>
            <div style={{ fontSize: 16, fontWeight: 700, color: D, marginBottom: 4 }}>Your studios</div>
            <div style={{ fontSize: 12, color: "#888", marginBottom: 12 }}>Pick which studio to manage. Bookings, earnings and payouts are kept separate per studio.</div>
            {myStudios.map(st =>
              <div key={st.id} style={{ ...css.card({ margin: "0 0 8px" }), padding: "12px 14px", display: "flex", alignItems: "center", gap: 11, border: `1.5px solid ${activeStudio === st.id ? D : BORDER}` }}>
                <div onClick={() => { setActiveStudio(st.id); setStudioSwitcher(false); showToast(`Now managing ${st.name}`); }} style={{ display: "flex", alignItems: "center", gap: 11, flex: 1, minWidth: 0, cursor: "pointer" }}>
                  <div style={css.av(activeStudio === st.id ? D : M, 40)}>{st.name.split(" ").map(w => w[0]).slice(0, 2).join("")}</div>
                  <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontSize: 13, fontWeight: 600, color: D }}>{st.name}</div><div style={{ fontSize: 11, color: "#888", marginTop: 1 }}>{st.kind} · {st.loc}</div></div>
                  {activeStudio === st.id && <span style={{ color: D, fontSize: 16 }}>✓</span>}
                </div>
                <button onClick={() => { if (myStudios.length <= 1) { showToast("You need at least one studio"); return; } const name = st.name; setMyStudios(p => { const rest = p.filter(x => x.id !== st.id); if (activeStudio === st.id) setActiveStudio(rest[0].id); return rest; }); showToast(`🗑 ${name} removed`); }} style={{ border: "none", background: R.bg, color: R.fg, width: 30, height: 30, borderRadius: 8, fontSize: 13, cursor: "pointer", flexShrink: 0, fontFamily: "inherit" }}>🗑</button>
              </div>)}
            <button style={{ ...css.sbtn(), width: "100%", margin: "4px 0 0" }} onClick={() => { const n = myStudios.length + 1; setMyStudios(p => [...p, { id: "s" + Date.now(), name: `New studio ${n}`, loc: "Set location", kind: "Rehearsal", earn: "€0", occ: "—" }]); showToast("✅ Studio added — set it up in its profile"); }}>+ Add another studio</button>
            <button style={{ ...css.pbtn(), width: "100%", margin: "8px 0 0" }} onClick={() => setStudioSwitcher(false)}>Done</button>
          </Modal>}
          {payoutModal && <Modal onClose={() => setPayoutModal(false)}>
            <div style={{ fontSize: 16, fontWeight: 700, color: D, marginBottom: 4 }}>Payout schedule</div>
            <div style={{ fontSize: 12, color: "#888", marginBottom: 14 }}>Choose when {curStudio.name}'s earnings are paid out to your bank.</div>
            <label style={css.label}>How often</label>
            <div style={{ display: "flex", gap: 8, marginBottom: 14 }}>
              {["Daily", "Weekly", "Monthly"].map(f => <button key={f} onClick={() => setPayoutFreq(f)} style={{ ...css.fc(payoutFreq === f), flex: 1, padding: "10px 0" }}>{f}</button>)}
            </div>
            {payoutFreq === "Weekly" && <>
              <label style={css.label}>Payout day</label>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 7, marginBottom: 14 }}>
                {["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"].map(d => <button key={d} onClick={() => setPayoutDow(d)} style={css.fc(payoutDow === d)}>{d.slice(0, 3)}</button>)}
              </div>
            </>}
            {payoutFreq === "Monthly" && <>
              <label style={css.label}>Day of month</label>
              <select value={payoutDom} onChange={e => setPayoutDom(parseInt(e.target.value))} style={{ ...css.input, marginBottom: 14 }}>
                {[1, 5, 10, 15, 20, 25, 28].map(d => <option key={d} value={d}>{ord(d)} of the month</option>)}
              </select>
            </>}
            <div style={{ background: L, borderRadius: 10, padding: "10px 12px", marginBottom: 14, fontSize: 11.5, color: M, lineHeight: 1.5 }}>🗓 {payoutLabel} · funds arrive 2–3 business days later. Pending balances roll into the next payout.</div>
            <button onClick={() => { setPayoutModal(false); showToast("✅ Payout schedule updated"); }} style={{ ...css.pbtn(), width: "100%", margin: "0 0 8px" }}>Save schedule</button>
            <button onClick={() => setPayoutModal(false)} style={{ ...css.sbtn(), width: "100%", margin: 0 }}>Cancel</button>
          </Modal>}
          {holidayModal && <Modal onClose={() => setHolidayModal(false)}>
            <div style={{ fontSize: 16, fontWeight: 700, color: D, marginBottom: 4 }}>Add an exception</div>
            <div style={{ fontSize: 12, color: "#888", marginBottom: 14 }}>Override your normal hours for a specific date — a holiday closure or special opening.</div>
            <label style={css.label}>Name of the holiday / occasion</label>
            <input value={holName} onChange={e => setHolName(e.target.value)} placeholder="e.g. Christmas Eve, National Day, Owner away" style={{ ...css.input, marginBottom: 12 }} />
            <label style={css.label}>Date</label>
            <input type="date" value={holDate} onChange={e => setHolDate(e.target.value)} style={{ ...css.input, marginBottom: 12 }} />
            <label style={css.label}>What happens that day?</label>
            <div style={{ display: "flex", gap: 8, marginBottom: holClosed ? 14 : 12 }}>
              <button onClick={() => setHolClosed(true)} style={{ ...css.fc(holClosed), flex: 1, padding: "10px 0" }}>🚫 Closed all day</button>
              <button onClick={() => setHolClosed(false)} style={{ ...css.fc(!holClosed), flex: 1, padding: "10px 0" }}>🕘 Special hours</button>
            </div>
            {!holClosed && <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14 }}>
              <input type="time" value={holOpen} onChange={e => setHolOpen(e.target.value)} style={{ ...css.input, flex: 1, minWidth: 0 }} />
              <span style={{ color: "#bbb" }}>–</span>
              <input type="time" value={holClose} onChange={e => setHolClose(e.target.value)} style={{ ...css.input, flex: 1, minWidth: 0 }} />
            </div>}
            <button onClick={() => { setHolidays(hs => [...hs, { date: holDate, label: holName.trim() || (holClosed ? "Closed" : "Special hours"), closed: holClosed, o: holOpen, c: holClose }].sort((a, b) => a.date.localeCompare(b.date))); setHolidayModal(false); setHolName(""); showToast(`🎄 ${holName.trim() || "Exception"} added`); }} style={{ ...css.pbtn(), width: "100%", margin: "0 0 8px" }}>Add exception</button>
            <button onClick={() => setHolidayModal(false)} style={{ ...css.sbtn(), width: "100%", margin: 0 }}>Cancel</button>
          </Modal>}
          {blockModal && <Modal onClose={() => setBlockModal(false)}>
            <div style={{ fontSize: 16, fontWeight: 700, color: D, marginBottom: 4 }}>Block time off</div>
            <div style={{ fontSize: 12, color: "#888", marginBottom: 14 }}>Make one or more days unbookable — for maintenance, a private session or time off. Musicians can't book blocked time.</div>
            <label style={css.label}>Dates</label>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
              <input type="date" value={blkDateFrom} onChange={e => setBlkDateFrom(e.target.value)} style={{ ...css.input, flex: 1, minWidth: 0 }} />
              <span style={{ color: "#bbb" }}>→</span>
              <input type="date" value={blkDateTo} onChange={e => setBlkDateTo(e.target.value)} style={{ ...css.input, flex: 1, minWidth: 0 }} />
            </div>
            <div style={{ fontSize: 11, color: M, marginBottom: 12 }}>{(() => { const a = new Date(blkDateFrom), b = new Date(blkDateTo); const n = Math.floor((b - a) / 86400000) + 1; return n > 1 ? `Blocks ${n} days in one go` : "Blocks 1 day"; })()}</div>
            <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
              <button onClick={() => setBlkAllDay(true)} style={{ ...css.fc(blkAllDay), flex: 1, padding: "10px 0" }}>🚫 All day</button>
              <button onClick={() => setBlkAllDay(false)} style={{ ...css.fc(!blkAllDay), flex: 1, padding: "10px 0" }}>🕘 Time range</button>
            </div>
            {!blkAllDay && <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
              <input type="time" value={blkFrom} onChange={e => setBlkFrom(e.target.value)} style={{ ...css.input, flex: 1, minWidth: 0 }} />
              <span style={{ color: "#bbb" }}>–</span>
              <input type="time" value={blkTo} onChange={e => setBlkTo(e.target.value)} style={{ ...css.input, flex: 1, minWidth: 0 }} />
            </div>}
            <label style={css.label}>Reason</label>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 7, marginBottom: 12 }}>
              {["🔧 Maintenance", "🎟 Private session", "🌴 Time off", "🧹 Cleaning", "❓ Other"].map(r => <button key={r} onClick={() => setBlkReason(r)} style={css.fc(blkReason === r)}>{r}</button>)}
            </div>
            <label style={css.label}>Note to self <span style={{ color: "#bbb" }}>· optional</span></label>
            <textarea value={blkNote} onChange={e => setBlkNote(e.target.value)} placeholder="e.g. Waiting for the new PA — don't reopen until tested" style={{ ...css.input, resize: "none", height: 56, marginBottom: 14 }} />
            <button onClick={() => { const a = new Date(blkDateFrom), b = new Date(blkDateTo); const n = Math.max(1, Math.floor((b - a) / 86400000) + 1); setBlocks(bs => [...bs, { m: calMonth, d: calDay, from: blkAllDay ? "00:00" : blkFrom, to: blkAllDay ? "24:00" : blkTo, reason: blkReason, note: blkNote.trim(), days: n, range: blkDateFrom !== blkDateTo ? `${blkDateFrom} → ${blkDateTo}` : blkDateFrom }]); setBlkNote(""); setBlockModal(false); showToast(n > 1 ? `⛔ Blocked ${n} days` : "⛔ Day blocked"); }} style={{ ...css.pbtn(), width: "100%", margin: "0 0 8px" }}>Block {(() => { const a = new Date(blkDateFrom), b = new Date(blkDateTo); const n = Math.floor((b - a) / 86400000) + 1; return n > 1 ? `${n} days` : "this day"; })()}</button>
            <button onClick={() => setBlockModal(false)} style={{ ...css.sbtn(), width: "100%", margin: 0 }}>Cancel</button>
          </Modal>}
          {addRoomModal && <Modal onClose={() => setAddRoomModal(false)}>
            {(() => { const cur = rooms.length; const next = cur + 1; const extra = SUB_EXTRA; const proratedNow = +(extra * (monthsLeftInYear / 12)).toFixed(2);
              return <>
                <div style={{ fontSize: 16, fontWeight: 700, color: D, marginBottom: 4 }}>Add a room — this changes your plan</div>
                <div style={{ fontSize: 12, color: "#888", marginBottom: 14, lineHeight: 1.5 }}>Each extra room adds <strong>€{extra}/month</strong> to your studio subscription. Heads up before you confirm:</div>
                <div style={{ ...css.card({ margin: "0 0 10px" }), padding: "12px 14px" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12.5, color: "#666", marginBottom: 6 }}><span>Now ({cur} room{cur === 1 ? "" : "s"})</span><strong style={{ color: D }}>€{subCycle === "annual" ? subAnnual(cur) + "/yr" : subMonthly(cur) + "/mo"}</strong></div>
                  <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12.5, color: "#666" }}><span>After ({next} rooms)</span><strong style={{ color: D }}>€{subCycle === "annual" ? subAnnual(next) + "/yr" : subMonthly(next) + "/mo"}</strong></div>
                </div>
                {subCycle === "annual"
                  ? <div style={{ background: A.bg, borderRadius: 12, padding: "11px 13px", fontSize: 11.5, color: A.fg, lineHeight: 1.5, marginBottom: 14 }}>📅 You're on annual billing. The new room's higher rate starts from your next renewal. For the <strong>{monthsLeftInYear} months</strong> left this year you'll pay a one-off adjustment of <strong>€{proratedNow}</strong> now (€{extra} × {monthsLeftInYear}/12).</div>
                  : <div style={{ background: L, borderRadius: 12, padding: "11px 13px", fontSize: 11.5, color: M, lineHeight: 1.5, marginBottom: 14 }}>The new monthly rate (€{subMonthly(next)}/mo) starts from your next billing date on the 1st. No charge today.</div>}
                <button onClick={() => { setRooms(rs => [...rs, { n: `Room ${String.fromCharCode(65 + rs.length)} — Rehearsal`, s: "from €10/hr · up to 4", q: "New", paused: false }]); setAddRoomModal(false); showToast(subCycle === "annual" ? `✅ Room added · €${proratedNow} adjustment charged` : "✅ Room added · new rate from next month"); }} style={{ ...css.pbtn(), width: "100%", margin: "0 0 8px" }}>{subCycle === "annual" ? `Add room & pay €${proratedNow}` : "Add room & update plan"}</button>
                <button onClick={() => setAddRoomModal(false)} style={{ ...css.sbtn(), width: "100%", margin: 0 }}>Cancel</button>
              </>; })()}
          </Modal>}
          {toast && <Toast msg={toast} />}
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);