// Malbec Live — Project Hub
// List view (Shows-like table) + detail with show banner + 6 tabs.
// P&L is the primary tab with expandable category rows.

const { useState: useStateHub, useEffect: useEffectHub } = React;

// ─────────────────────────────────────────────────────────────
// Shared
// ─────────────────────────────────────────────────────────────

function HubAvatar({ name, size = 32 }) {
  const seeds = {
    "Bad Bunny":   { bg: "#F3D9C4", fg: "#8B5E3C" },
    "Rels B":      { bg: "#E9DCC9", fg: "#6B5A3F" },
    "Nicki Nicole":{ bg: "#2D2A33", fg: "#F2E7D5" },
    "Duki":        { bg: "#E3D4C2", fg: "#6B4E2E" },
    "Bizarrap":    { bg: "#F4D4C0", fg: "#8B4A2E" },
    "Cazzu":       { bg: "#D6B8A5", fg: "#5A3E2E" },
  };
  const s = seeds[name] || { bg: "#E4E2DF", fg: "#3F3F46" };
  const initials = name.split(" ").map((p) => p[0]).slice(0, 2).join("");
  return (
    <div style={{
      width: size, height: size, borderRadius: 999,
      background: s.bg, color: s.fg,
      display: "grid", placeItems: "center",
      fontSize: Math.round(size * 0.34), fontWeight: 600, flexShrink: 0,
      border: "1px solid var(--live-border)",
    }}>{initials}</div>
  );
}

function HubStatusPill({ status }) {
  const map = {
    Open:    { bg: "#E3F3E3", fg: "#1F6B2F" },
    Closed:  { bg: "#F5DADA", fg: "#8E2323" },
    Private: { bg: "#E5E2F3", fg: "#4A3E9E" },
    Active:  { bg: "#E3F3E3", fg: "#1F6B2F" },
  };
  const s = map[status] || { bg: "#E4E2DF", fg: "#3F3F46" };
  return (
    <span style={{
      display: "inline-block", padding: "3px 10px", borderRadius: 6,
      background: s.bg, color: s.fg, fontSize: 12, fontWeight: 500,
      whiteSpace: "nowrap",
    }}>{status}</span>
  );
}

function HubDatePill() {
  return (
    <span style={{
      display: "inline-block", padding: "2px 8px", borderRadius: 4,
      background: "var(--live-banner-bg)", border: "1px solid var(--live-border)",
      color: "var(--live-muted)", fontSize: 11, fontWeight: 500,
      marginLeft: 8, whiteSpace: "nowrap",
    }}>+2 fechas</span>
  );
}

function HubSegmented({ value, onChange, options }) {
  return (
    <div style={{
      display: "inline-flex", padding: 3,
      background: "var(--live-banner-bg)", border: "1px solid var(--live-border)",
      borderRadius: 8,
    }}>
      {options.map((o) => {
        const active = o === value;
        return (
          <button key={o} onClick={() => onChange(o)} style={{
            appearance: "none", border: "none",
            background: active ? "var(--live-card)" : "transparent",
            color: active ? "var(--live-heading)" : "var(--live-muted)",
            height: 28, padding: "0 14px",
            fontSize: 12.5, fontWeight: active ? 600 : 500,
            borderRadius: 6, cursor: "pointer",
            fontFamily: "var(--font-sans)",
            boxShadow: active ? "0 1px 2px rgba(9,14,25,0.06)" : "none",
            transition: "background 140ms ease-out, color 140ms ease-out",
          }}>{o}</button>
        );
      })}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// List view
// ─────────────────────────────────────────────────────────────

const HUB_PROJECTS = [
  { id: "p1", artist: "Bad Bunny",    venue: "River",          date: "13/02/2026", extra: true,  status: "Open"    },
  { id: "p2", artist: "Rels B",       venue: "Movistar Arena", date: "13/02/2026", extra: false, status: "Closed"  },
  { id: "p3", artist: "Nicki Nicole", venue: "Teatro Colón",   date: "13/02/2026", extra: false, status: "Private" },
  { id: "p4", artist: "Nicki Nicole", venue: "Teatro Colón",   date: "13/02/2026", extra: false, status: "Private" },
  { id: "p5", artist: "Nicki Nicole", venue: "Teatro Colón",   date: "13/02/2026", extra: false, status: "Private" },
  { id: "p6", artist: "Bad Bunny",    venue: "River",          date: "13/02/2026", extra: true,  status: "Open"    },
  { id: "p7", artist: "Nicki Nicole", venue: "Teatro Colón",   date: "13/02/2026", extra: false, status: "Private" },
  { id: "p8", artist: "Rels B",       venue: "Movistar Arena", date: "13/02/2026", extra: false, status: "Closed"  },
  { id: "p9", artist: "Nicki Nicole", venue: "Teatro Colón",   date: "13/02/2026", extra: false, status: "Private" },
  { id: "p10",artist: "Nicki Nicole", venue: "Teatro Colón",   date: "13/02/2026", extra: false, status: "Private" },
];

function HubPageBtn({ children, onClick, disabled, icon, iconRight }) {
  return (
    <button onClick={onClick} disabled={disabled} style={{
      appearance: "none", background: "transparent", border: "none",
      color: disabled ? "var(--live-muted)" : "var(--live-body)",
      padding: "6px 10px", fontSize: 13, fontWeight: 500,
      borderRadius: 6, cursor: disabled ? "default" : "pointer",
      fontFamily: "var(--font-sans)",
      display: "inline-flex", alignItems: "center", gap: 6,
      opacity: disabled ? 0.5 : 1,
    }}>
      {!iconRight && <LuIcon name={icon} size={14} />}
      {children}
      {iconRight && <LuIcon name={icon} size={14} />}
    </button>
  );
}

function HubPageNum({ children, active, onClick }) {
  return (
    <button onClick={onClick} style={{
      appearance: "none",
      background: active ? "var(--live-card)" : "transparent",
      border: active ? "1px solid var(--live-border)" : "1px solid transparent",
      color: active ? "var(--live-heading)" : "var(--live-body)",
      width: 32, height: 32, fontSize: 13,
      fontWeight: active ? 600 : 500, borderRadius: 6,
      cursor: "pointer", fontFamily: "var(--font-sans)",
      boxShadow: active ? "0 1px 2px rgba(9,14,25,0.06)" : "none",
    }}>{children}</button>
  );
}

function ProjectHubList({ onOpen }) {
  const [filter, setFilter] = useStateHub("Active");
  const [page, setPage] = useStateHub(2);
  const [search, setSearch] = useStateHub("");
  useEffectHub(() => { if (window.lucide) window.lucide.createIcons(); });

  const cols = "minmax(220px,1.2fr) minmax(180px,1fr) minmax(220px,240px) 130px 90px";

  return (
    <div style={{ padding: "28px 36px 40px", overflow: "auto", height: "100%" }}>
      {/* Page header */}
      <div style={{ marginBottom: 22 }}>
        <h1 style={{ fontSize: 22, fontWeight: 700, color: "var(--live-heading)", letterSpacing: "-0.015em", margin: 0 }}>
          Project Hub
        </h1>
        <div style={{ fontSize: 13, color: "var(--live-muted)", marginTop: 4 }}>
          Gestioná los gastos de cada show
        </div>
      </div>

      {/* Toolbar */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 20, gap: 16 }}>
        <div style={{
          display: "flex", alignItems: "center", gap: 10,
          flex: 1, maxWidth: 340, height: 36, padding: "0 12px",
          background: "var(--live-card)", border: "1px solid var(--live-border)", borderRadius: 8,
        }}>
          <LuIcon name="search" size={14} color="var(--live-muted)" />
          <input value={search} onChange={(e) => setSearch(e.target.value)}
            placeholder="Search show…"
            style={{ flex: 1, border: "none", outline: "none", background: "transparent",
              fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--live-heading)", height: "100%" }}
          />
        </div>
        <HubSegmented value={filter} onChange={setFilter} options={["Active", "Archived"]} />
      </div>

      {/* Table */}
      <div style={{
        background: "var(--live-card)", border: "1px solid var(--live-border)",
        borderRadius: 10, overflow: "hidden",
      }}>
        <div style={{
          display: "grid", gridTemplateColumns: cols,
          padding: "12px 20px", background: "var(--live-banner-bg)",
          borderBottom: "1px solid var(--live-border)",
          fontSize: 12, fontWeight: 500, color: "var(--live-muted)",
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}><LuIcon name="users" size={13} />Artista</div>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}><LuIcon name="map-pin" size={13} />Venue</div>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}><LuIcon name="calendar" size={13} />Dates</div>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}><LuIcon name="sliders-horizontal" size={13} />Status</div>
          <div style={{ textAlign: "right" }}>Acciones</div>
        </div>

        {HUB_PROJECTS.filter((r) => r.artist.toLowerCase().includes(search.toLowerCase())).map((r, i) => (
          <div key={r.id} onClick={() => onOpen(r)} style={{
            display: "grid", gridTemplateColumns: cols,
            padding: "12px 20px", borderTop: i === 0 ? "none" : "1px solid var(--live-border)",
            alignItems: "center", fontSize: 13, cursor: "pointer",
            transition: "background 120ms ease-out",
          }}
            onMouseEnter={(e) => e.currentTarget.style.background = "var(--live-row-hover)"}
            onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
          >
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <HubAvatar name={r.artist} />
              <span style={{ fontWeight: 600, color: "var(--live-heading)", whiteSpace: "nowrap" }}>{r.artist}</span>
            </div>
            <div style={{ color: "var(--live-body)" }}>{r.venue}</div>
            <div style={{ color: "var(--live-body)", display: "flex", alignItems: "center", whiteSpace: "nowrap" }}>
              <span>{r.date}</span>
              {r.extra && <HubDatePill />}
            </div>
            <div><HubStatusPill status={r.status} /></div>
            <div style={{ textAlign: "right" }}>
              <button aria-label="More" onClick={(e) => e.stopPropagation()} style={{
                appearance: "none", background: "transparent", border: "none",
                color: "var(--live-muted)", width: 28, height: 28, borderRadius: 6,
                cursor: "pointer", display: "inline-grid", placeItems: "center",
              }}
                onMouseEnter={(e) => e.currentTarget.style.background = "var(--live-banner-bg)"}
                onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
              >
                <LuIcon name="more-horizontal" size={14} />
              </button>
            </div>
          </div>
        ))}
      </div>

      {/* Pagination */}
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "center", gap: 6,
        marginTop: 24, fontFamily: "var(--font-sans)", fontSize: 13,
      }}>
        <HubPageBtn onClick={() => setPage(Math.max(1, page - 1))} disabled={page === 1} icon="chevron-left">Previous</HubPageBtn>
        {[1, 2, 3].map((n) => <HubPageNum key={n} active={page === n} onClick={() => setPage(n)}>{n}</HubPageNum>)}
        <span style={{ padding: "0 6px", color: "var(--live-muted)" }}>…</span>
        <HubPageBtn onClick={() => setPage(Math.min(3, page + 1))} disabled={page === 3} icon="chevron-right" iconRight>Next</HubPageBtn>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Detail view — show banner + tabs
// ─────────────────────────────────────────────────────────────

function ShowBanner({ project }) {
  const sold = 75224;
  const total = 85018;
  const pct = 87;
  return (
    <div style={{
      background: "var(--live-banner-bg)",
      border: "1px solid var(--live-border)",
      borderRadius: 12,
      padding: "14px 18px",
      display: "grid", gridTemplateColumns: "auto 1.4fr auto", gap: 28, alignItems: "center",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <div style={{
          width: 60, height: 60, borderRadius: 10, overflow: "hidden",
          background: "#F3D9C4", flexShrink: 0,
          border: "1px solid var(--live-border)",
        }} />
        <div>
          <div style={{ fontSize: 16, fontWeight: 700, color: "var(--live-heading)", letterSpacing: "-0.01em" }}>
            {project.artist}
          </div>
          <div style={{ fontSize: 12, color: "var(--live-muted)", display: "flex", alignItems: "center", gap: 4, marginTop: 3 }}>
            <LuIcon name="map-pin" size={11} /> {project.venue}
          </div>
          <div style={{ fontSize: 12, color: "var(--live-muted)", display: "flex", alignItems: "center", gap: 4, marginTop: 3 }}>
            <LuIcon name="calendar" size={11} /> 13/02/2026 - 14/02/2026
          </div>
        </div>
      </div>

      <div style={{ minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 6, gap: 12 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 13, color: "var(--live-heading)", fontWeight: 500, fontVariantNumeric: "tabular-nums" }}>
            <LuIcon name="ticket" size={14} color="var(--live-muted)" />
            {sold.toLocaleString("de-DE")}/{total.toLocaleString("de-DE")}
          </div>
          <div style={{ fontSize: 13, color: "var(--live-heading)", fontWeight: 500 }}>{pct}% Sold</div>
        </div>
        <div style={{ height: 8, borderRadius: 4, background: "rgba(0,0,0,0.06)", overflow: "hidden" }}>
          <div style={{ width: `${pct}%`, height: "100%", background: "var(--live-primary)", borderRadius: 4 }} />
        </div>
      </div>

      <HubStatusPill status="Active" />
    </div>
  );
}

function HubTabs({ tab, setTab }) {
  const tabs = [
    { id: "pl",       label: "P&L",            icon: "line-chart" },
    { id: "tickets",  label: "Tickets",        icon: "ticket" },
    { id: "expenses", label: "Expenses BI",    icon: "pie-chart" },
    { id: "marketing",label: "Marketing",      icon: "megaphone" },
    { id: "contratos",label: "Contratos",      icon: "file-text" },
    { id: "docs",     label: "Documentación",  icon: "folder" },
  ];
  return (
    <div style={{
      display: "flex", alignItems: "flex-end", justifyContent: "space-between",
      borderBottom: "1px solid var(--live-border)", marginTop: 16,
    }}>
      {tabs.map((t) => {
        const active = t.id === tab;
        return (
          <button key={t.id} onClick={() => setTab(t.id)} style={{
            appearance: "none", background: "transparent", border: "none",
            padding: "10px 8px", cursor: "pointer",
            fontFamily: "var(--font-sans)",
            fontSize: 13, fontWeight: active ? 600 : 500,
            color: active ? "var(--live-heading)" : "var(--live-muted)",
            borderBottom: active ? "2px solid var(--live-primary)" : "2px solid transparent",
            marginBottom: -1, whiteSpace: "nowrap",
            display: "inline-flex", alignItems: "center", gap: 6,
          }}>
            <LuIcon name={t.icon} size={13} />
            {t.label}
          </button>
        );
      })}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// P&L tab — Revenue / Costos / Margen + Estado de resultados
// ─────────────────────────────────────────────────────────────

function MetricCard({ icon, label, value, subline, barPct }) {
  return (
    <div style={{ padding: "20px 28px 18px", minWidth: 0, display: "flex", flexDirection: "column", gap: 4 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <div style={{
          width: 38, height: 38, borderRadius: 999,
          border: "1.25px solid var(--live-border-strong)",
          display: "grid", placeItems: "center", color: "var(--live-muted)",
          flexShrink: 0, background: "transparent",
        }}>
          <LuIcon name={icon} size={17} />
        </div>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 13, color: "var(--live-muted)", fontWeight: 500 }}>{label}</div>
          <div style={{ fontSize: 22, fontWeight: 700, color: "var(--live-heading)", letterSpacing: "-0.015em", fontVariantNumeric: "tabular-nums", marginTop: 2 }}>
            {value}
          </div>
        </div>
      </div>
      <div style={{ height: 6, borderRadius: 3, background: "rgba(0,0,0,0.08)", overflow: "hidden", marginTop: 12 }}>
        <div style={{ width: `${barPct}%`, height: "100%", background: "var(--live-primary)", borderRadius: 3 }} />
      </div>
      <div style={{ fontSize: 11.5, color: "var(--live-muted)", marginTop: 10 }}>{subline}</div>
    </div>
  );
}

// Bad Bunny – River – 13/02/2026
// Revenue $4.406.441 = Tickets $3.463.098 + Otros $943.343
// Costos totales $3.040.444 (69,0% rev) = Variables $1.764.000 (40,0%) + Fijos $1.276.444 (29,0%)
// Margen neto $1.365.997 (31,0% rev). All percentages are share of Revenue.
const PL_DATA = [
  {
    id: "ingresos",
    label: "Ingresos",
    count: 2,
    importe: "4.406.441",
    pct: "100%",
    tone: "income",
    rows: [
      { label: "Tickets",                       importe: "3.463.098", pct: "78,6%" },
      { label: "Otros (Sponsors / F&B / Merch)",importe: "943.343",   pct: "21,4%" },
    ],
  },
  {
    id: "variables",
    label: "Costos Variables",
    count: 6,
    importe: "1.764.000",
    pct: "40,0%",
    tone: "cost",
    rows: [
      { label: "Sadaic",               importe: "264.000", pct: "6,0%" },
      { label: "Alquiler Venue",       importe: "880.000", pct: "20,0%" },
      { label: "Ingresos Brutos",      importe: "132.000", pct: "3,0%" },
      { label: "Comisión ticketera",   importe: "220.000", pct: "5,0%" },
      { label: "Producción variable",  importe: "176.000", pct: "4,0%" },
      { label: "Marketing variable",   importe: "92.000",  pct: "2,1%" },
    ],
  },
  {
    id: "fijos",
    label: "Costos Fijos",
    count: 6,
    importe: "1.276.444",
    pct: "29,0%",
    tone: "cost",
    rows: [
      { label: "Estructura y técnica", importe: "480.000", pct: "10,9%" },
      { label: "Servicios",            importe: "220.000", pct: "5,0%" },
      { label: "Hospitality",          importe: "180.000", pct: "4,1%" },
      { label: "RRHH",                 importe: "240.000", pct: "5,4%" },
      { label: "Logística",            importe: "96.444",  pct: "2,2%" },
      { label: "Seguros",              importe: "60.000",  pct: "1,4%" },
    ],
  },
];

function PLTab() {
  const [expanded, setExpanded] = useStateHub({ ingresos: true, variables: true, fijos: true });
  useEffectHub(() => { if (window.lucide) window.lucide.createIcons(); });

  const cols = "minmax(280px,1fr) 200px 200px";
  const incomeBg = "rgba(91,143,93,0.16)";
  const incomeBgLight = "rgba(91,143,93,0.08)";
  const costBg = "rgba(176,99,99,0.16)";
  const costBgLight = "rgba(176,99,99,0.08)";

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
      {/* Metrics: banner panel with navy top accent + dividers between cards */}
      <div style={{
        background: "var(--live-banner-bg)",
        border: "1px solid var(--live-border)",
        borderRadius: 12, overflow: "hidden",
      }}>
        <div style={{ height: 3, background: "var(--live-primary)" }} />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1px 1fr 1px 1fr" }}>
          <MetricCard
            icon="plus-circle"
            label="Revenue Total"
            value="$4.406.441"
            subline="Tickets : 3.463.098 + Otros : 943.343"
            barPct={100}
          />
          <div style={{ background: "var(--live-border)" }} />
          <MetricCard
            icon="minus-circle"
            label="Costos totales"
            value="$3.040.444"
            subline="69,0% del Revenue"
            barPct={69}
          />
          <div style={{ background: "var(--live-border)" }} />
          <MetricCard
            icon="divide-circle"
            label="Margen Neto"
            value="$1.365.997"
            subline="31,0% del Revenue"
            barPct={31}
          />
        </div>
      </div>

      {/* Estado de resultados */}
      <div>
        <div style={{ fontSize: 16, fontWeight: 600, color: "var(--live-heading)", marginBottom: 12 }}>
          Estado de resultados
        </div>

        <div style={{
          background: "var(--live-card)", border: "1px solid var(--live-border)",
          borderRadius: 10, overflow: "hidden",
        }}>
          {/* Header */}
          <div style={{
            display: "grid", gridTemplateColumns: cols,
            padding: "12px 24px", background: "var(--live-banner-bg)",
            borderBottom: "1px solid var(--live-border)",
            fontSize: 12, fontWeight: 500, color: "var(--live-muted)",
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <LuIcon name="info" size={13} /> Concepto
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <LuIcon name="dollar-sign" size={13} /> Importe
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <LuIcon name="percent" size={13} /> Porcentaje
            </div>
          </div>

          {PL_DATA.map((section) => {
            const open = expanded[section.id];
            const isIncome = section.tone === "income";
            const headerBg = isIncome ? incomeBg : costBg;
            const childBg = isIncome ? incomeBgLight : costBgLight;
            const valueColor = isIncome ? "#1F6B2F" : "#8E2323";
            return (
              <React.Fragment key={section.id}>
                {/* Section header row */}
                <button
                  onClick={() => setExpanded({ ...expanded, [section.id]: !open })}
                  style={{
                    appearance: "none", border: "none", textAlign: "left",
                    width: "100%", cursor: "pointer", padding: 0,
                    display: "grid", gridTemplateColumns: cols,
                    background: headerBg,
                    borderTop: "1px solid var(--live-border)",
                    fontFamily: "var(--font-sans)",
                  }}
                >
                  <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 24px" }}>
                    <LuIcon name={open ? "chevron-up" : "chevron-down"} size={14} color="var(--live-body)" />
                    <span style={{ fontSize: 12, color: "var(--live-body)", fontWeight: 500, fontVariantNumeric: "tabular-nums" }}>
                      {section.count}
                    </span>
                    <span style={{ fontSize: 14, fontWeight: 600, color: valueColor }}>{section.label}</span>
                  </div>
                  <div style={{ display: "flex", alignItems: "center", padding: "12px 24px", fontSize: 14, fontWeight: 600, color: valueColor, fontVariantNumeric: "tabular-nums" }}>
                    {section.importe}
                  </div>
                  <div style={{ display: "flex", alignItems: "center", padding: "12px 24px", fontSize: 14, fontWeight: 600, color: valueColor, fontVariantNumeric: "tabular-nums" }}>
                    {section.pct}
                  </div>
                </button>

                {/* Child rows */}
                {open && section.rows.map((row, ri) => (
                  <div key={ri} style={{
                    display: "grid", gridTemplateColumns: cols,
                    background: "var(--live-card)",
                    borderTop: "1px solid var(--live-border)",
                  }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 14, padding: "12px 24px 12px 38px" }}>
                      <span style={{ display: "inline-grid", placeItems: "center", color: "var(--live-muted)" }}>
                        <LuIcon name="corner-down-right" size={14} />
                      </span>
                      <span style={{ fontSize: 13, color: "var(--live-body)" }}>{row.label}</span>
                    </div>
                    <div style={{ display: "flex", alignItems: "center", padding: "12px 24px", fontSize: 13, color: "var(--live-body)", fontVariantNumeric: "tabular-nums" }}>
                      {row.importe}
                    </div>
                    <div style={{ display: "flex", alignItems: "center", padding: "12px 24px", fontSize: 13, color: "var(--live-body)", fontVariantNumeric: "tabular-nums" }}>
                      {row.pct}
                    </div>
                  </div>
                ))}
              </React.Fragment>
            );
          })}

          {/* Resultado Neto footer */}
          <div style={{
            display: "grid", gridTemplateColumns: cols,
            background: incomeBg,
            borderTop: "1px solid var(--live-border)",
          }}>
            <div style={{ padding: "14px 24px", fontSize: 14, fontWeight: 600, color: "#1F6B2F" }}>
              Resultado Neto
            </div>
            <div style={{ padding: "14px 24px", fontSize: 14, fontWeight: 700, color: "#1F6B2F", fontVariantNumeric: "tabular-nums" }}>
              1.365.997
            </div>
            <div style={{ padding: "14px 24px", fontSize: 14, fontWeight: 700, color: "#1F6B2F", fontVariantNumeric: "tabular-nums" }}>
              31,0%
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Other tabs (lighter content)
// ─────────────────────────────────────────────────────────────

function PlaceholderTab({ icon, title, desc }) {
  useEffectHub(() => { if (window.lucide) window.lucide.createIcons(); });
  return (
    <div style={{
      background: "var(--live-card)", border: "1px solid var(--live-border)",
      borderRadius: 12, padding: "60px 40px",
      display: "flex", flexDirection: "column", alignItems: "center", gap: 12,
      textAlign: "center",
    }}>
      <div style={{
        width: 56, height: 56, borderRadius: 999,
        background: "var(--live-banner-bg)", border: "1px solid var(--live-border)",
        display: "grid", placeItems: "center", color: "var(--live-muted)",
      }}>
        <LuIcon name={icon} size={24} />
      </div>
      <div style={{ fontSize: 17, fontWeight: 600, color: "var(--live-heading)" }}>{title}</div>
      <div style={{ fontSize: 13, color: "var(--live-muted)", maxWidth: 380 }}>{desc}</div>
    </div>
  );
}

// Compact metric card (no progress bar) for the Tickets tab
function TicketsMetric({ icon, label, value }) {
  return (
    <div style={{ padding: "20px 28px", minWidth: 0, display: "flex", alignItems: "center", gap: 14 }}>
      <div style={{
        width: 38, height: 38, borderRadius: 999,
        border: "1.25px solid var(--live-border-strong)",
        display: "grid", placeItems: "center", color: "var(--live-muted)",
        flexShrink: 0, background: "transparent",
      }}>
        <LuIcon name={icon} size={17} />
      </div>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontSize: 13, color: "var(--live-muted)", fontWeight: 500 }}>{label}</div>
        <div style={{ fontSize: 22, fontWeight: 700, color: "var(--live-heading)", letterSpacing: "-0.015em", fontVariantNumeric: "tabular-nums", marginTop: 2 }}>
          {value}
        </div>
      </div>
    </div>
  );
}

const TICKETS_ROWS = [
  { date: "13/02/2026", day: "Sunday",    daily:  4, available: "2.134", capacity: "87%", incomeArs: "$ 1.359.180.000", incomeUsd: "$ 1.031.244" },
  { date: "13/02/2026", day: "Saturday",  daily:  4, available: "3.042", capacity: "84%", incomeArs: "$ 1.359.180.000", incomeUsd: "$ 1.031.244" },
  { date: "13/02/2026", day: "Friday",    daily:  0, available: "3.046", capacity: "87%", incomeArs: "$ 1.359.180.000", incomeUsd: "$ 1.031.244" },
  { date: "13/02/2026", day: "Thursday",  daily:  4, available: "3.042", capacity: "84%", incomeArs: "$ 1.359.180.000", incomeUsd: "$ 1.031.244" },
  { date: "13/02/2026", day: "Wednesday", daily:  4, available: "3.042", capacity: "84%", incomeArs: "$ 1.359.180.000", incomeUsd: "$ 1.031.244" },
  { date: "13/02/2026", day: "Tuesday",   daily:  4, available: "3.042", capacity: "84%", incomeArs: "$ 1.359.180.000", incomeUsd: "$ 1.031.244" },
  { date: "13/02/2026", day: "Monday",    daily:  0, available: "3.046", capacity: "87%", incomeArs: "$ 1.359.180.000", incomeUsd: "$ 1.031.244" },
];

function TicketsTab() {
  useEffectHub(() => { if (window.lucide) window.lucide.createIcons(); });

  const cols = "120px 130px 130px 1fr 130px 1fr 1fr";
  const incomeBg = "rgba(91,143,93,0.18)";
  const incomeBgLight = "rgba(91,143,93,0.10)";
  const costBg = "rgba(176,99,99,0.18)";
  const incomeText = "#3F6B41";

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
      {/* Top metrics panel */}
      <div style={{
        background: "var(--live-banner-bg)",
        border: "1px solid var(--live-border)",
        borderRadius: 12, overflow: "hidden",
      }}>
        <div style={{ height: 3, background: "var(--live-primary)" }} />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1px 1fr 1px 1fr 1px 1fr" }}>
          <TicketsMetric icon="bar-chart-3" label="Avg. Daily sales" value="1.231" />
          <div style={{ background: "var(--live-border)" }} />
          <TicketsMetric icon="clock"       label="Total sales"      value="64.000" />
          <div style={{ background: "var(--live-border)" }} />
          <TicketsMetric icon="target"      label="Cappacity"        value="80.000" />
          <div style={{ background: "var(--live-border)" }} />
          <TicketsMetric icon="trending-up" label="Avg. Sold"        value="%87" />
        </div>
      </div>

      {/* Sales history header */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 4 }}>
        <div style={{ fontSize: 15, fontWeight: 600, color: "var(--live-heading)", letterSpacing: "-0.01em" }}>
          Sales history
        </div>
        <button style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          background: "var(--live-card)",
          border: "1px solid var(--live-border-strong)",
          borderRadius: 8,
          padding: "8px 14px",
          fontSize: 13, color: "var(--live-heading)", fontWeight: 500,
          cursor: "pointer",
        }}>
          <LuIcon name="sliders-horizontal" size={14} color="var(--live-muted)" />
          Elegir fecha
        </button>
      </div>

      {/* Table */}
      <div style={{
        background: "var(--live-card)",
        border: "1px solid var(--live-border)",
        borderRadius: 12, overflow: "hidden",
      }}>
        {/* Header */}
        <div style={{
          display: "grid", gridTemplateColumns: cols,
          background: "var(--live-table-header-bg)",
          borderBottom: "1px solid var(--live-border)",
          fontSize: 12, color: "var(--live-muted)", fontWeight: 500,
        }}>
          {[
            { icon: "calendar",     label: "Date" },
            { icon: "calendar-days",label: "Day" },
            { icon: "plus",         label: "Daily sales" },
            { icon: "ticket",       label: "Available Tickets" },
            { icon: "percent",      label: "Cappacity" },
            { icon: "credit-card",  label: "Total Income (ARS)" },
            { icon: "credit-card",  label: "Total Income (USD)" },
          ].map((h, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 6, padding: "12px 16px" }}>
              <LuIcon name={h.icon} size={12} />
              <span>{h.label}</span>
            </div>
          ))}
        </div>

        {/* Rows */}
        {TICKETS_ROWS.map((r, i) => {
          const isLast = i === TICKETS_ROWS.length - 1;
          const isZero = r.daily === 0;
          const dailyBg = isZero ? costBg : incomeBg;
          const dailyText = isZero ? "#8C5151" : incomeText;
          return (
            <div key={i} style={{
              display: "grid", gridTemplateColumns: cols,
              borderBottom: isLast ? "none" : "1px solid var(--live-border)",
              fontSize: 13, color: "var(--live-heading)",
              alignItems: "stretch",
            }}>
              <div style={{ padding: "16px", display: "flex", alignItems: "center", fontVariantNumeric: "tabular-nums" }}>{r.date}</div>
              <div style={{ padding: "16px", display: "flex", alignItems: "center" }}>{r.day}</div>
              <div style={{
                background: dailyBg,
                color: dailyText,
                fontWeight: 500,
                padding: "16px",
                display: "flex", alignItems: "center",
                fontVariantNumeric: "tabular-nums",
              }}>
                {isZero ? "0" : `+ ${r.daily}`}
              </div>
              <div style={{ padding: "16px", display: "flex", alignItems: "center", fontVariantNumeric: "tabular-nums" }}>{r.available}</div>
              <div style={{ padding: "16px", display: "flex", alignItems: "center" }}>
                <span style={{
                  display: "inline-flex", alignItems: "center",
                  background: incomeBgLight,
                  color: incomeText,
                  fontWeight: 500,
                  fontSize: 12,
                  padding: "3px 10px",
                  borderRadius: 6,
                  fontVariantNumeric: "tabular-nums",
                }}>{r.capacity}</span>
              </div>
              <div style={{ padding: "16px", display: "flex", alignItems: "center", fontVariantNumeric: "tabular-nums" }}>{r.incomeArs}</div>
              <div style={{ padding: "16px", display: "flex", alignItems: "center", fontVariantNumeric: "tabular-nums" }}>{r.incomeUsd}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
// Donut chart (SVG) for Expenses BI revenue breakdown
function RevenueDonut({ size = 168, segments }) {
  const r = size / 2 - 14;
  const c = size / 2;
  const stroke = 22;
  const total = segments.reduce((s, x) => s + x.value, 0);
  const circ = 2 * Math.PI * r;
  let offset = 0;
  return (
    <div style={{ position: "relative", width: size, height: size, flexShrink: 0 }}>
      <svg width={size} height={size} style={{ transform: "rotate(-90deg)" }}>
        <circle cx={c} cy={c} r={r} fill="none" stroke="rgba(0,0,0,0.06)" strokeWidth={stroke} />
        {segments.map((seg, i) => {
          const len = (seg.value / total) * circ;
          const dasharray = `${len} ${circ - len}`;
          const dashoffset = -offset;
          offset += len + 2; // small gap between segments
          return (
            <circle
              key={i}
              cx={c} cy={c} r={r}
              fill="none"
              stroke={seg.color}
              strokeWidth={stroke}
              strokeDasharray={dasharray}
              strokeDashoffset={dashoffset}
              strokeLinecap="butt"
            />
          );
        })}
      </svg>
      <div style={{
        position: "absolute", inset: 0, display: "grid", placeItems: "center",
        textAlign: "center",
      }}>
        <div>
          <div style={{ fontSize: 16, fontWeight: 700, color: "var(--live-heading)", letterSpacing: "-0.01em" }}>$84.2k</div>
          <div style={{ fontSize: 11, color: "var(--live-muted)", marginTop: 2 }}>Total</div>
        </div>
      </div>
    </div>
  );
}

function ExpensesBITab() {
  useEffectHub(() => { if (window.lucide) window.lucide.createIcons(); });

  const segments = [
    { label: "Streaming", value: 1322099, pct: "42%", color: "#1F2D5C" },
    { label: "Tickets",   value:  322432, pct: "28%", color: "#3A4A7E" },
    { label: "Merch",     value:  242949, pct: "28%", color: "#6B7AA8" },
    { label: "Licensing", value:  200232, pct: "12%", color: "#A8B0CC" },
  ];

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
      {/* Top metrics panel */}
      <div style={{
        background: "var(--live-banner-bg)",
        border: "1px solid var(--live-border)",
        borderRadius: 12, overflow: "hidden",
      }}>
        <div style={{ height: 3, background: "var(--live-primary)" }} />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1px 1fr 1px 1fr 1px 1fr" }}>
          <TicketsMetric icon="clock"        label="Total Spent"    value="1.231.454" />
          <div style={{ background: "var(--live-border)" }} />
          <TicketsMetric icon="receipt"      label="Cost per ticket"value="64.000" />
          <div style={{ background: "var(--live-border)" }} />
          <TicketsMetric icon="file-text"    label="Open invoices"  value="6" />
          <div style={{ background: "var(--live-border)" }} />
          <TicketsMetric icon="alert-circle" label="Anomalies"      value="3" />
        </div>
      </div>

      {/* Revenue Breakdown cards */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
        {/* Card 1 — with donut */}
        <div style={{
          background: "var(--live-card)",
          border: "1px solid var(--live-border)",
          borderRadius: 12,
          padding: "20px 24px 22px",
        }}>
          <div style={{ fontSize: 14, fontWeight: 600, color: "var(--live-heading)", letterSpacing: "-0.01em" }}>
            Revenue Breakdown
          </div>
          <div style={{ fontSize: 12, color: "var(--live-muted)", marginTop: 3 }}>
            By source · Last 30 days
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 32, marginTop: 18 }}>
            <RevenueDonut segments={segments} />
            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 12, fontSize: 13 }}>
              {segments.map((s) => (
                <div key={s.label} style={{
                  display: "grid", gridTemplateColumns: "1fr auto auto", gap: 14,
                  alignItems: "center",
                }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                    <span style={{ width: 11, height: 11, borderRadius: 2, background: s.color, display: "inline-block" }} />
                    <span style={{ color: "var(--live-heading)" }}>{s.label}</span>
                  </div>
                  <span style={{ color: "var(--live-heading)", fontVariantNumeric: "tabular-nums" }}>
                    {s.value.toLocaleString("de-DE")}
                  </span>
                  <span style={{ color: "var(--live-heading)", fontWeight: 500, fontVariantNumeric: "tabular-nums", minWidth: 32, textAlign: "right" }}>
                    {s.pct}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Card 2 — empty placeholder, same chrome */}
        <div style={{
          background: "var(--live-card)",
          border: "1px solid var(--live-border)",
          borderRadius: 12,
          padding: "20px 24px 22px",
          minHeight: 240,
        }}>
          <div style={{ fontSize: 14, fontWeight: 600, color: "var(--live-heading)", letterSpacing: "-0.01em" }}>
            Revenue Breakdown
          </div>
          <div style={{ fontSize: 12, color: "var(--live-muted)", marginTop: 3 }}>
            By source · Last 30 days
          </div>
        </div>
      </div>
    </div>
  );
}
function MarketingTab() {
  return <PlaceholderTab icon="megaphone" title="Marketing" desc="Pauta, campañas, KPIs de adquisición y métricas orgánicas. (En construcción)" />;
}
const CONTRATOS_DATA = [
  { status: "Firmado" },
  { status: "Enviado a firma" },
  { status: "Firmado parcial" },
  { status: "Firmado" },
  { status: "Borrador" },
  { status: "Firmado parcial" },
  { status: "Firmado" },
  { status: "Firmado" },
  { status: "Firmado" },
  { status: "Firmado" },
  { status: "Firmado" },
  { status: "Firmado" },
];

function ContratoBadge({ status }) {
  const styles = {
    "Firmado":         { bg: "rgba(91,143,93,0.16)",  color: "#3F6B41" },
    "Enviado a firma": { bg: "rgba(91,143,93,0.16)",  color: "#3F6B41" },
    "Firmado parcial": { bg: "rgba(212,165,116,0.22)",color: "#8C6A3F" },
    "Borrador":        { bg: "rgba(150,150,150,0.18)",color: "#5C5C5C" },
  };
  const s = styles[status] || styles["Borrador"];
  return (
    <span style={{
      display: "inline-flex", alignItems: "center",
      background: s.bg, color: s.color,
      fontSize: 11, fontWeight: 500,
      padding: "3px 10px", borderRadius: 6,
      whiteSpace: "nowrap",
    }}>
      {status}
    </span>
  );
}

function ContratoCard({ status, onClick }) {
  return (
    <div onClick={onClick} style={{
      background: "var(--live-card)",
      border: "1px solid var(--live-border)",
      borderRadius: 10,
      padding: "14px 16px 16px",
      display: "flex", flexDirection: "column", gap: 8,
      cursor: "pointer",
      transition: "border-color 120ms ease, box-shadow 120ms ease",
    }}
    onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--live-border-strong)"; }}
    onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--live-border)"; }}
    >
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
          <LuIcon name="file-text" size={14} color="var(--live-muted)" />
          <span style={{ fontSize: 13, fontWeight: 600, color: "var(--live-heading)", letterSpacing: "-0.005em" }}>
            Contrato de Venue River
          </span>
        </div>
        <ContratoBadge status={status} />
      </div>
      <div style={{ fontSize: 12, color: "var(--live-muted)", lineHeight: 1.7 }}>
        <div>Fecha: 23/10/2025</div>
        <div>Contraparte: <span style={{ color: "var(--live-heading)" }}>River Plate Eventos S.A</span></div>
        <div>Monto: <span style={{ color: "var(--live-heading)" }}>839.003 USD</span></div>
      </div>
    </div>
  );
}

function ContratoDrawer({ open, status, onClose }) {
  if (!open) return null;
  return (
    <>
      {/* Backdrop */}
      <div
        onClick={onClose}
        style={{
          position: "fixed", inset: 0,
          background: "rgba(15,18,28,0.32)",
          zIndex: 60,
        }}
      />
      {/* Panel */}
      <div style={{
        position: "fixed", top: 0, right: 0, bottom: 0,
        width: 460,
        background: "var(--live-card)",
        borderLeft: "1px solid var(--live-border)",
        boxShadow: "-12px 0 36px rgba(15,18,28,0.10)",
        zIndex: 61,
        display: "flex", flexDirection: "column",
        overflowY: "auto",
      }}>
        {/* Top bar */}
        <div style={{ padding: "18px 22px 10px" }}>
          <button
            onClick={onClose}
            style={{
              border: "none", background: "transparent", padding: 0,
              color: "var(--live-heading)", cursor: "pointer",
              display: "inline-flex", alignItems: "center",
            }}
          >
            <LuIcon name="x" size={20} />
          </button>
        </div>

        {/* Title */}
        <div style={{ padding: "0 22px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
          <div style={{ fontSize: 18, fontWeight: 700, color: "var(--live-heading)", letterSpacing: "-0.01em" }}>
            Contrato de Venue River
          </div>
          <ContratoBadge status={status} />
        </div>

        {/* Document preview */}
        <div style={{ padding: "18px 22px 0" }}>
          <div style={{
            background: "var(--live-card)",
            border: "1px solid var(--live-border)",
            borderRadius: 10,
            padding: "22px 24px",
            minHeight: 200,
            display: "flex", flexDirection: "column", gap: 10,
          }}>
            {[100, 92, 96, 88, 100, 84, 70].map((w, i) => (
              <div key={i} style={{ height: 8, borderRadius: 4, background: "#E9E7E3", width: `${w}%` }} />
            ))}
          </div>
        </div>

        {/* Action buttons */}
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)",
          padding: "14px 18px 18px",
          gap: 4,
          borderBottom: "1px solid var(--live-border)",
        }}>
          {[
            { icon: "send",     label: "Enviar a firma" },
            { icon: "download", label: "Descargar" },
            { icon: "refresh-cw", label: "Reemplazar" },
            { icon: "eye",      label: "Abrir" },
          ].map((a) => (
            <button key={a.label} style={{
              border: "none", background: "transparent", cursor: "pointer",
              display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 6,
              padding: "8px 6px",
              fontSize: 12, color: "var(--live-heading)", fontWeight: 500,
            }}>
              <LuIcon name={a.icon} size={14} color="var(--live-muted)" />
              {a.label}
            </button>
          ))}
        </div>

        {/* Detalles del contrato */}
        <div style={{ padding: "18px 22px", borderBottom: "1px solid var(--live-border)" }}>
          <div style={{ fontSize: 14, fontWeight: 600, color: "var(--live-heading)", marginBottom: 10 }}>
            Detalles del contrato
          </div>
          {[
            { k: "Contraparte :", v: "River Plate Eventos S.A" },
            { k: "Monto :",       v: "800.292 USD" },
            { k: "Vence :",       v: "No especifica" },
            { k: "Versión :",     v: "V2" },
          ].map((r) => (
            <div key={r.k} style={{
              display: "flex", justifyContent: "space-between",
              padding: "6px 0",
              fontSize: 13,
            }}>
              <span style={{ color: "var(--live-muted)" }}>{r.k}</span>
              <span style={{ color: "var(--live-heading)", fontWeight: 500 }}>{r.v}</span>
            </div>
          ))}
        </div>

        {/* Firmantes */}
        <div style={{ padding: "18px 22px", borderBottom: "1px solid var(--live-border)" }}>
          <div style={{ fontSize: 14, fontWeight: 600, color: "var(--live-heading)", marginBottom: 12 }}>
            Firmantes
          </div>
          {[
            { initials: "TG", name: "Tomás García",   org: "Dale Play Live",      status: "Firmado" },
            { initials: "JM", name: "Javier Martinez", org: "River Plate Eventos S.A", status: "Enviado a firma" },
            { initials: "TG", name: "Juan Maddonni",  org: "Dale Play Live",      status: "Firmado" },
          ].map((f, i) => (
            <div key={i} style={{
              display: "flex", alignItems: "center", gap: 12,
              padding: "8px 0",
            }}>
              <div style={{
                width: 30, height: 30, borderRadius: 999,
                background: "#E9E5DF", color: "#6B6357",
                display: "grid", placeItems: "center",
                fontSize: 11, fontWeight: 600, flexShrink: 0,
              }}>
                {f.initials}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: "var(--live-heading)" }}>{f.name}</div>
                <div style={{ fontSize: 12, color: "var(--live-muted)" }}>{f.org}</div>
              </div>
              <ContratoBadge status={f.status} />
            </div>
          ))}
        </div>

        {/* Actividad */}
        <div style={{ padding: "18px 22px 26px" }}>
          <div style={{ fontSize: 14, fontWeight: 600, color: "var(--live-heading)", marginBottom: 10 }}>
            Actividad
          </div>
          {[
            { icon: "refresh-cw", text: "Tomas Garcia reemplazo por una segunda versión del \"Contrato Venue River\"", time: "21/03/2026 15:09 hs" },
            { icon: "download",   text: "Tomas Garcia subió el archivo \"Contrato Venue River\"", time: "21/03/2026 15:09 hs" },
          ].map((a, i) => (
            <div key={i} style={{ display: "flex", gap: 10, padding: "10px 0", alignItems: "flex-start" }}>
              <LuIcon name={a.icon} size={14} color="var(--live-muted)" />
              <div style={{ flex: 1, fontSize: 12, color: "var(--live-heading)", lineHeight: 1.5 }}>
                <div>{a.text}</div>
                <div style={{ color: "var(--live-muted)", marginTop: 2 }}>{a.time}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

function ContratosTab() {
  useEffectHub(() => { if (window.lucide) window.lucide.createIcons(); });
  const [drawer, setDrawer] = useStateHub(null);

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
      {/* Toolbar */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }}>
        <div style={{
          flex: "0 0 320px",
          display: "flex", alignItems: "center", gap: 8,
          background: "var(--live-card)",
          border: "1px solid var(--live-border-strong)",
          borderRadius: 8,
          padding: "8px 12px",
        }}>
          <LuIcon name="search" size={14} color="var(--live-muted)" />
          <input
            placeholder="Buscar contrato..."
            style={{
              flex: 1, border: "none", outline: "none", background: "transparent",
              fontSize: 13, color: "var(--live-heading)",
            }}
          />
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <button style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            background: "var(--live-card)",
            border: "1px solid var(--live-primary)",
            borderRadius: 8,
            padding: "8px 16px",
            fontSize: 13, color: "var(--live-primary)", fontWeight: 500,
            cursor: "pointer",
          }}>
            <LuIcon name="sliders-horizontal" size={14} /> Overview
          </button>
          <button style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            background: "var(--live-primary)",
            border: "1px solid var(--live-primary)",
            borderRadius: 8,
            padding: "8px 16px",
            fontSize: 13, color: "#fff", fontWeight: 500,
            cursor: "pointer",
          }}>
            <LuIcon name="plus" size={14} /> Crear Show
          </button>
        </div>
      </div>

      {/* Grid */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
        {CONTRATOS_DATA.map((c, i) => (
          <ContratoCard key={i} status={c.status} onClick={() => setDrawer({ status: c.status })} />
        ))}
      </div>

      <ContratoDrawer
        open={!!drawer}
        status={drawer?.status || "Firmado"}
        onClose={() => setDrawer(null)}
      />
    </div>
  );
}
function DocsTab() {
  return <PlaceholderTab icon="folder" title="Documentación" desc="Documentos del proyecto: riders, planos, accreditations y notas internas. (En construcción)" />;
}

// ─────────────────────────────────────────────────────────────
// Detail container
// ─────────────────────────────────────────────────────────────

function ProjectDetail({ project, onBack }) {
  const [tab, setTab] = useStateHub("pl");
  useEffectHub(() => { if (window.lucide) window.lucide.createIcons(); });

  return (
    <div style={{ height: "100%", overflow: "auto", padding: "20px 28px 40px", background: "var(--live-card)" }}>
      <ShowBanner project={project} />
      <HubTabs tab={tab} setTab={setTab} />

      <div style={{ marginTop: 22 }}>
        {tab === "pl" && <PLTab />}
        {tab === "tickets" && <TicketsTab />}
        {tab === "expenses" && <ExpensesBITab />}
        {tab === "marketing" && <MarketingTab />}
        {tab === "contratos" && <ContratosTab />}
        {tab === "docs" && <DocsTab />}
      </div>
    </div>
  );
}

function ProjectHubPane({ selectedProject, onOpen, onBack }) {
  if (selectedProject) return <ProjectDetail project={selectedProject} onBack={onBack} />;
  return <ProjectHubList onOpen={onOpen} />;
}

Object.assign(window, { ProjectHubPane });