// Inward, Outward, Transfers, Stock Journal, Contacts, Locations, Settings

// ---- shared row chrome ----
// Use BiPageHeader (from Chrome.jsx) — single unified pattern across all pages.
function PageHeader({ icon, title, subtitle, actions, filters }) {
  return (
    <BiPageHeader
      title={title}
      subtitle={subtitle}
      actions={<>{filters}{actions}</>}
    />
  );
}

function FilterPill({ label, active, count }) {
  return (
    <button className={cn(
      "h-8 px-3 rounded-md text-[12.5px] font-medium border whitespace-nowrap flex items-center gap-2 transition-colors",
      active ? "bg-[var(--accent-1-tint)] text-[var(--accent-1-text)] border-[var(--accent-1-tint)]"
             : "bg-[var(--surface)] text-[var(--ink-2)] border-[var(--hairline)] hover:bg-[var(--sunken)]"
    )}>
      {label}
      {count != null && <span className="text-[11px] tabular-nums opacity-75">{count}</span>}
    </button>
  );
}

function StatusBadgeFor({ s }) {
  const map = {
    approved:  { kind: "positive",  icon: "check-circle",  label: "Approved" },
    pending:   { kind: "caution",   icon: "clock",         label: "Pending" },
    posted:    { kind: "info",      icon: "circle-check",  label: "Posted" },
    rejected:  { kind: "critical",  icon: "x-circle",      label: "Rejected" },
    draft:     { kind: "neutral",   icon: "file",          label: "Draft" },
    in_transit:{ kind: "info",      icon: "truck",         label: "In transit" },
  };
  const c = map[s] || map.draft;
  return <Pill kind={c.kind}><Icon name={c.icon} size={10}/>{c.label}</Pill>;
}

function MoneyCell({ amt, bold }) {
  return <span className={cn("tabular-nums", bold ? "font-semibold text-[var(--ink)]" : "text-[var(--ink-2)]")}>{fmtINR(amt)}</span>;
}

// ---------- Inward ----------
const INWARD_VOUCHERS = [
  { id: "GRN-2026-0184", date: "07 May", supplier: "Britannia Industries", po: "PO-2026-0091", lines: 3, qty: 660, value: GRN_184_VALUE, loc: "MUM-1", by: "Ravi Kumar", status: "pending" },
  { id: "GRN-2026-0183", date: "07 May", supplier: "Hindustan Unilever",   po: "PO-2026-0089", lines: 5, qty: 240, value: 28640, loc: "MUM-2", by: "Ravi Kumar", status: "pending" },
  { id: "GRN-2026-0182", date: "07 May", supplier: "ITC Foods",             po: "PO-2026-0086", lines: 5, qty: 410, value: 53200, loc: "MUM-1", by: "Ravi Kumar", status: "approved" },
  { id: "GRN-2026-0181", date: "07 May", supplier: "Mahesh Wholesale",      po: "—",            lines: 2, qty: 80,  value: 9600,  loc: "MUM-1", by: "Ravi Kumar", status: "approved" },
  { id: "GRN-2026-0180", date: "06 May", supplier: "Parle Products",        po: "PO-2026-0083", lines: 4, qty: 360, value: 19800, loc: "MUM-1", by: "Suresh M.",  status: "approved" },
  { id: "GRN-2026-0179", date: "06 May", supplier: "Bisleri International", po: "PO-2026-0081", lines: 1, qty: 200, value: 24000, loc: "MUM-2", by: "Suresh M.",  status: "approved" },
  { id: "GRN-2026-0178", date: "05 May", supplier: "Nestle India",          po: "PO-2026-0079", lines: 6, qty: 540, value: 86400, loc: "MUM-1", by: "Suresh M.",  status: "approved" },
  { id: "GRN-2026-0177", date: "05 May", supplier: "Dabur India",           po: "PO-2026-0077", lines: 3, qty: 120, value: 14400, loc: "MUM-2", by: "Ravi Kumar", status: "rejected" },
  { id: "GRN-2026-0176", date: "04 May", supplier: "Britannia Industries",  po: "PO-2026-0074", lines: 2, qty: 480, value: 30000, loc: "MUM-1", by: "Suresh M.",  status: "approved" },
];

function InwardPage() {
  const total = INWARD_VOUCHERS.reduce((s, v) => s + v.value, 0);
  const pending = INWARD_VOUCHERS.filter(v => v.status === "pending").length;
  return (
    <main className="px-8 py-6">
      <PageHeader
        icon="download"
        title="Inward · Goods Receipts"
        subtitle="Stock received from suppliers · last 30 days"
        filters={<>
          <FilterPill label="All" count={INWARD_VOUCHERS.length} active/>
          <FilterPill label="Pending" count={pending}/>
          <FilterPill label="Approved" count={INWARD_VOUCHERS.length - pending - 1}/>
          <FilterPill label="Rejected" count={1}/>
        </>}
        actions={<Button size="sm" variant="primary"><Icon name="plus" size={13}/>New Receipt</Button>}
      />

      <div className="grid grid-cols-4 gap-4 mb-5">
        {[
          { label: "This month", value: fmtINR(total), color: "var(--accent-1-text)" },
          { label: "Vouchers", value: INWARD_VOUCHERS.length, color: "var(--ink)" },
          { label: "Pending review", value: pending, color: "var(--caution-text)" },
          { label: "Avg value", value: fmtINR(Math.round(total/INWARD_VOUCHERS.length)), color: "var(--ink)" },
        ].map(s => (
          <Card key={s.label} className="p-5">
            <div className="text-[10.5px] uppercase tracking-[0.06em] text-[var(--ink-3)] font-medium">{s.label}</div>
            <div className="font-semibold tabular-nums mt-2" style={{ color: s.color, fontFamily: "var(--font-display)", fontSize: 28, letterSpacing: "-0.01em" }}>{s.value}</div>
          </Card>
        ))}
      </div>

      <Card className="overflow-hidden">
        <table className="w-full">
          <thead>
            <tr className="border-b border-[var(--hairline)] bg-[var(--canvas)]">
              <th className="type-table-head text-left px-5 py-2.5">Voucher</th>
              <th className="type-table-head text-left px-3 py-2.5">Date</th>
              <th className="type-table-head text-left px-3 py-2.5">Supplier</th>
              <th className="type-table-head text-left px-3 py-2.5">PO</th>
              <th className="type-table-head text-right px-3 py-2.5">Lines</th>
              <th className="type-table-head text-right px-3 py-2.5">Qty</th>
              <th className="type-table-head text-left px-3 py-2.5">Loc</th>
              <th className="type-table-head text-left px-3 py-2.5">By</th>
              <th className="type-table-head text-left px-3 py-2.5">Status</th>
              <th className="type-table-head text-right px-5 py-2.5">Value</th>
            </tr>
          </thead>
          <tbody>
            {INWARD_VOUCHERS.map(v => (
              <tr key={v.id} className="border-b border-[var(--hairline)] last:border-0 hover:bg-[var(--sunken)] cursor-pointer">
                <td className="px-5 py-3 text-[13px] mono font-semibold text-[var(--ink)] whitespace-nowrap">{v.id}</td>
                <td className="px-3 py-3 text-[12.5px] text-[var(--ink-2)] tabular-nums whitespace-nowrap">{v.date}</td>
                <td className="px-3 py-3 text-[13px] text-[var(--ink)] whitespace-nowrap">{v.supplier}</td>
                <td className="px-3 py-3 text-[12px] mono text-[var(--ink-3)] whitespace-nowrap">{v.po}</td>
                <td className="px-3 py-3 text-right text-[13px] tabular-nums">{v.lines}</td>
                <td className="px-3 py-3 text-right text-[13px] tabular-nums text-[var(--ink-2)]">{v.qty}</td>
                <td className="px-3 py-3"><span className="type-kbd">{v.loc}</span></td>
                <td className="px-3 py-3">
                  <div className="flex items-center gap-2 whitespace-nowrap">
                    <Avatar initials={v.by.split(" ").map(s=>s[0]).join("").slice(0,2)} size={20} tint="oklch(0.86 0.06 200)" color="oklch(0.30 0.10 200)"/>
                    <span className="text-[12px] text-[var(--ink-2)] whitespace-nowrap">{v.by}</span>
                  </div>
                </td>
                <td className="px-3 py-3"><StatusBadgeFor s={v.status}/></td>
                <td className="px-5 py-3 text-right text-[13px] font-semibold tabular-nums whitespace-nowrap">{fmtINR(v.value)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </main>
  );
}

// ---------- Outward ----------
const OUTWARD_VOUCHERS = [
  { id: "DSP-2026-0317", date: "07 May", customer: "Star Bazaar (Bandra)",      so: "SO-2026-0142", lines: 4, qty: 120, value: 18400, loc: "MUM-1", by: "Suresh M.", status: "approved" },
  { id: "DSP-2026-0316", date: "07 May", customer: "Reliance Smart (Powai)",    so: "SO-2026-0141", lines: 8, qty: 320, value: 47600, loc: "MUM-1", by: "Suresh M.", status: "rejected" },
  { id: "DSP-2026-0315", date: "07 May", customer: "More Megastore (Vashi)",    so: "SO-2026-0139", lines: 3, qty: 90,  value: 12300, loc: "MUM-2", by: "Ravi Kumar",status: "approved" },
  { id: "DSP-2026-0314", date: "06 May", customer: "Spencer's Retail",          so: "SO-2026-0138", lines: 6, qty: 220, value: 31200, loc: "MUM-1", by: "Suresh M.", status: "approved" },
  { id: "DSP-2026-0313", date: "06 May", customer: "Local Kirana · Ghatkopar",  so: "—",           lines: 2, qty: 24,  value: 2880,  loc: "MUM-1", by: "Ravi Kumar",status: "approved" },
  { id: "DSP-2026-0312", date: "06 May", customer: "DMart (Andheri W)",         so: "SO-2026-0136", lines: 5, qty: 180, value: 23400, loc: "MUM-2", by: "Suresh M.", status: "approved" },
  { id: "DSP-2026-0311", date: "05 May", customer: "Nature's Basket",           so: "SO-2026-0134", lines: 3, qty: 60,  value: 9000,  loc: "MUM-1", by: "Ravi Kumar",status: "pending" },
  { id: "DSP-2026-0310", date: "05 May", customer: "Big Bazaar (Lower Parel)",  so: "SO-2026-0131", lines: 7, qty: 280, value: 39800, loc: "MUM-1", by: "Suresh M.", status: "approved" },
];

function OutwardPage() {
  const total = OUTWARD_VOUCHERS.reduce((s, v) => s + v.value, 0);
  return (
    <main className="px-8 py-6">
      <PageHeader
        icon="upload"
        title="Outward · Dispatches"
        subtitle="Stock dispatched to customers · last 30 days"
        filters={<>
          <FilterPill label="All" count={OUTWARD_VOUCHERS.length} active/>
          <FilterPill label="Pending" count={1}/>
          <FilterPill label="Approved" count={6}/>
          <FilterPill label="Rejected" count={1}/>
        </>}
        actions={<Button size="sm" variant="primary"><Icon name="plus" size={13}/>New Dispatch</Button>}
      />

      <div className="grid grid-cols-4 gap-4 mb-5">
        {[
          { label: "This month", value: fmtINR(total), color: "var(--accent-1-text)" },
          { label: "Vouchers", value: OUTWARD_VOUCHERS.length, color: "var(--ink)" },
          { label: "Pending review", value: 1, color: "var(--caution-text)" },
          { label: "Avg value", value: fmtINR(Math.round(total/OUTWARD_VOUCHERS.length)), color: "var(--ink)" },
        ].map(s => (
          <Card key={s.label} className="p-5">
            <div className="text-[10.5px] uppercase tracking-[0.06em] text-[var(--ink-3)] font-medium">{s.label}</div>
            <div className="font-semibold tabular-nums mt-2" style={{ color: s.color, fontFamily: "var(--font-display)", fontSize: 28, letterSpacing: "-0.01em" }}>{s.value}</div>
          </Card>
        ))}
      </div>

      <Card className="overflow-hidden">
        <table className="w-full">
          <thead>
            <tr className="border-b border-[var(--hairline)] bg-[var(--canvas)]">
              <th className="type-table-head text-left px-5 py-2.5">Voucher</th>
              <th className="type-table-head text-left px-3 py-2.5">Date</th>
              <th className="type-table-head text-left px-3 py-2.5">Customer</th>
              <th className="type-table-head text-left px-3 py-2.5">SO</th>
              <th className="type-table-head text-right px-3 py-2.5">Lines</th>
              <th className="type-table-head text-right px-3 py-2.5">Qty</th>
              <th className="type-table-head text-left px-3 py-2.5">From</th>
              <th className="type-table-head text-left px-3 py-2.5">By</th>
              <th className="type-table-head text-left px-3 py-2.5">Status</th>
              <th className="type-table-head text-right px-5 py-2.5">Value</th>
            </tr>
          </thead>
          <tbody>
            {OUTWARD_VOUCHERS.map(v => (
              <tr key={v.id} className="border-b border-[var(--hairline)] last:border-0 hover:bg-[var(--sunken)] cursor-pointer">
                <td className="px-5 py-3 text-[13px] mono font-semibold text-[var(--ink)] whitespace-nowrap">{v.id}</td>
                <td className="px-3 py-3 text-[12.5px] text-[var(--ink-2)] tabular-nums whitespace-nowrap">{v.date}</td>
                <td className="px-3 py-3 text-[13px] text-[var(--ink)] whitespace-nowrap">{v.customer}</td>
                <td className="px-3 py-3 text-[12px] mono text-[var(--ink-3)] whitespace-nowrap">{v.so}</td>
                <td className="px-3 py-3 text-right text-[13px] tabular-nums">{v.lines}</td>
                <td className="px-3 py-3 text-right text-[13px] tabular-nums text-[var(--ink-2)]">{v.qty}</td>
                <td className="px-3 py-3"><span className="type-kbd">{v.loc}</span></td>
                <td className="px-3 py-3">
                  <div className="flex items-center gap-2 whitespace-nowrap">
                    <Avatar initials={v.by.split(" ").map(s=>s[0]).join("").slice(0,2)} size={20} tint="oklch(0.86 0.06 200)" color="oklch(0.30 0.10 200)"/>
                    <span className="text-[12px] text-[var(--ink-2)] whitespace-nowrap">{v.by}</span>
                  </div>
                </td>
                <td className="px-3 py-3"><StatusBadgeFor s={v.status}/></td>
                <td className="px-5 py-3 text-right text-[13px] font-semibold tabular-nums whitespace-nowrap">{fmtINR(v.value)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </main>
  );
}

// ---------- Transfers ----------
const TRANSFERS = [
  { id: "TRF-2026-0044", date: "07 May 14:20", from: "MUM-1", to: "MUM-2", lines: 4, qty: 200, value: 24000, status: "in_transit", by: "Suresh M." },
  { id: "TRF-2026-0043", date: "07 May 11:08", from: "MUM-2", to: "PUN-1", lines: 2, qty: 80,  value: 9600,  status: "approved",   by: "Suresh M." },
  { id: "TRF-2026-0042", date: "06 May 16:45", from: "MUM-1", to: "PUN-1", lines: 6, qty: 320, value: 41200, status: "approved",   by: "Priya Sharma" },
  { id: "TRF-2026-0041", date: "06 May 09:12", from: "MUM-2", to: "MUM-1", lines: 3, qty: 120, value: 14400, status: "approved",   by: "Suresh M." },
  { id: "TRF-2026-0040", date: "05 May 17:20", from: "MUM-1", to: "MUM-2", lines: 5, qty: 240, value: 28800, status: "approved",   by: "Suresh M." },
  { id: "TRF-2026-0039", date: "05 May 11:05", from: "PUN-1", to: "MUM-1", lines: 1, qty: 40,  value: 5200,  status: "pending",    by: "Ravi Kumar" },
];

function TransfersPage() {
  return (
    <main className="px-8 py-6">
      <PageHeader
        icon="repeat"
        title="Transfers · Inter-location"
        subtitle="Stock movements between your warehouses"
        filters={<>
          <FilterPill label="All" count={TRANSFERS.length} active/>
          <FilterPill label="In transit" count={1}/>
          <FilterPill label="Pending" count={1}/>
        </>}
        actions={<Button size="sm" variant="primary"><Icon name="plus" size={13}/>New Transfer</Button>}
      />

      {/* Visual flow map */}
      <Card className="p-5 mb-4">
        <div className="text-[10.5px] uppercase tracking-[0.06em] text-[var(--ink-3)] font-medium mb-4">Flow · this week</div>
        <div className="flex items-center justify-between gap-6">
          {[
            { code: "MUM-1", name: "Mumbai Central", out: 760, in: 120 },
            { code: "MUM-2", name: "Andheri Godown", out: 320, in: 440 },
            { code: "PUN-1", name: "Pune Hub",       out: 40,  in: 400 },
          ].map((l, i, arr) => (
            <React.Fragment key={l.code}>
              <div className="flex flex-col items-center gap-2 flex-1">
                <div className="w-14 h-14 rounded-lg grid place-items-center" style={{ background: "var(--accent-1-tint)" }}>
                  <Icon name="warehouse" size={22} className="text-[var(--accent-1-text)]"/>
                </div>
                <div className="text-[13px] font-semibold text-[var(--ink)]">{l.code}</div>
                <div className="text-[11px] text-[var(--ink-3)]">{l.name}</div>
                <div className="flex items-center gap-3 mt-1 text-[11px]">
                  <span className="text-[var(--positive-text)] font-semibold tabular-nums">+{l.in}</span>
                  <span className="text-[var(--info-text)] font-semibold tabular-nums">−{l.out}</span>
                </div>
              </div>
              {i < arr.length - 1 && (
                <div className="flex-1 h-px relative" style={{ background: "var(--hairline)" }}>
                  <Icon name="arrow-right" size={14} className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[var(--ink-3)] bg-[var(--surface)] px-1"/>
                </div>
              )}
            </React.Fragment>
          ))}
        </div>
      </Card>

      <Card className="overflow-hidden">
        <table className="w-full">
          <thead>
            <tr className="border-b border-[var(--hairline)] bg-[var(--canvas)]">
              <th className="type-table-head text-left px-5 py-2.5">Voucher</th>
              <th className="type-table-head text-left px-3 py-2.5">When</th>
              <th className="type-table-head text-left px-3 py-2.5">Route</th>
              <th className="type-table-head text-right px-3 py-2.5">Lines</th>
              <th className="type-table-head text-right px-3 py-2.5">Qty</th>
              <th className="type-table-head text-left px-3 py-2.5">By</th>
              <th className="type-table-head text-left px-3 py-2.5">Status</th>
              <th className="type-table-head text-right px-5 py-2.5">Value</th>
            </tr>
          </thead>
          <tbody>
            {TRANSFERS.map(v => (
              <tr key={v.id} className="border-b border-[var(--hairline)] last:border-0 hover:bg-[var(--sunken)] cursor-pointer">
                <td className="px-5 py-3 text-[13px] mono font-semibold text-[var(--ink)] whitespace-nowrap">{v.id}</td>
                <td className="px-3 py-3 text-[12.5px] text-[var(--ink-2)] tabular-nums whitespace-nowrap">{v.date}</td>
                <td className="px-3 py-3">
                  <div className="flex items-center gap-2 whitespace-nowrap">
                    <span className="type-kbd">{v.from}</span>
                    <Icon name="arrow-right" size={12} className="text-[var(--ink-3)]"/>
                    <span className="type-kbd">{v.to}</span>
                  </div>
                </td>
                <td className="px-3 py-3 text-right text-[13px] tabular-nums">{v.lines}</td>
                <td className="px-3 py-3 text-right text-[13px] tabular-nums text-[var(--ink-2)]">{v.qty}</td>
                <td className="px-3 py-3">
                  <div className="flex items-center gap-2 whitespace-nowrap">
                    <Avatar initials={v.by.split(" ").map(s=>s[0]).join("").slice(0,2)} size={20} tint="oklch(0.86 0.06 200)" color="oklch(0.30 0.10 200)"/>
                    <span className="text-[12px] text-[var(--ink-2)] whitespace-nowrap">{v.by}</span>
                  </div>
                </td>
                <td className="px-3 py-3"><StatusBadgeFor s={v.status}/></td>
                <td className="px-5 py-3 text-right text-[13px] font-semibold tabular-nums whitespace-nowrap">{fmtINR(v.value)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </main>
  );
}

// ---------- Stock Journal ----------
const JOURNAL = [
  { id: "JNL-2026-0028", date: "07 May", reason: "Damaged in handling",   loc: "MUM-1", lines: 2, qtyDelta: -8,  value: -960,   by: "Priya Sharma", status: "approved" },
  { id: "JNL-2026-0027", date: "06 May", reason: "Cycle count adjustment",loc: "MUM-2", lines: 5, qtyDelta: -3,  value: -420,   by: "Suresh M.",   status: "approved" },
  { id: "JNL-2026-0026", date: "06 May", reason: "Found in physical",     loc: "MUM-1", lines: 1, qtyDelta: 12,  value: 1440,   by: "Ravi Kumar",  status: "approved" },
  { id: "JNL-2026-0025", date: "05 May", reason: "Expiry write-off",      loc: "MUM-1", lines: 4, qtyDelta: -24, value: -3120,  value2: -3120, by: "Priya Sharma", status: "approved" },
  { id: "JNL-2026-0024", date: "04 May", reason: "Sample given to rep",   loc: "MUM-2", lines: 3, qtyDelta: -6,  value: -780,   by: "Suresh M.",   status: "approved" },
  { id: "JNL-2026-0023", date: "03 May", reason: "Cycle count adjustment",loc: "MUM-1", lines: 8, qtyDelta: 2,   value: 240,    by: "Suresh M.",   status: "approved" },
];

function StockJournalPage() {
  return (
    <main className="px-8 py-6">
      <PageHeader
        icon="clipboard-list"
        title="Stock Journal · Adjustments"
        subtitle="Manual adjustments — every one is auditable"
        filters={<>
          <FilterPill label="All" count={JOURNAL.length} active/>
          <FilterPill label="Write-offs" count={3}/>
          <FilterPill label="Found" count={1}/>
          <FilterPill label="Cycle count" count={2}/>
        </>}
        actions={<Button size="sm" variant="primary"><Icon name="plus" size={13}/>New Adjustment</Button>}
      />

      <div className="grid grid-cols-4 gap-4 mb-5">
        {[
          { label: "Net value impact", value: "−₹3,720", color: "var(--critical-text)" },
          { label: "Adjustments", value: 6, color: "var(--ink)" },
          { label: "Write-offs", value: "−42 units", color: "var(--critical-text)" },
          { label: "Found", value: "+14 units", color: "var(--positive-text)" },
        ].map(s => (
          <Card key={s.label} className="p-5">
            <div className="text-[10.5px] uppercase tracking-[0.06em] text-[var(--ink-3)] font-medium">{s.label}</div>
            <div className="font-semibold tabular-nums mt-2" style={{ color: s.color, fontFamily: "var(--font-display)", fontSize: 28, letterSpacing: "-0.01em" }}>{s.value}</div>
          </Card>
        ))}
      </div>

      <Card className="overflow-hidden">
        <table className="w-full">
          <thead>
            <tr className="border-b border-[var(--hairline)] bg-[var(--canvas)]">
              <th className="type-table-head text-left px-5 py-2.5">Voucher</th>
              <th className="type-table-head text-left px-3 py-2.5">Date</th>
              <th className="type-table-head text-left px-3 py-2.5">Reason</th>
              <th className="type-table-head text-left px-3 py-2.5">Loc</th>
              <th className="type-table-head text-right px-3 py-2.5">Lines</th>
              <th className="type-table-head text-right px-3 py-2.5">Qty Δ</th>
              <th className="type-table-head text-left px-3 py-2.5">By</th>
              <th className="type-table-head text-right px-5 py-2.5">Value Δ</th>
            </tr>
          </thead>
          <tbody>
            {JOURNAL.map(v => (
              <tr key={v.id} className="border-b border-[var(--hairline)] last:border-0 hover:bg-[var(--sunken)] cursor-pointer">
                <td className="px-5 py-3 text-[13px] mono font-semibold text-[var(--ink)] whitespace-nowrap">{v.id}</td>
                <td className="px-3 py-3 text-[12.5px] text-[var(--ink-2)] tabular-nums whitespace-nowrap">{v.date}</td>
                <td className="px-3 py-3 text-[13px] text-[var(--ink)]">{v.reason}</td>
                <td className="px-3 py-3"><span className="type-kbd">{v.loc}</span></td>
                <td className="px-3 py-3 text-right text-[13px] tabular-nums">{v.lines}</td>
                <td className={cn("px-3 py-3 text-right text-[13px] font-semibold tabular-nums", v.qtyDelta >= 0 ? "text-[var(--positive-text)]" : "text-[var(--critical-text)]")}>
                  {v.qtyDelta > 0 ? "+" : ""}{v.qtyDelta}
                </td>
                <td className="px-3 py-3">
                  <div className="flex items-center gap-2 whitespace-nowrap">
                    <Avatar initials={v.by.split(" ").map(s=>s[0]).join("").slice(0,2)} size={20} tint="oklch(0.86 0.06 200)" color="oklch(0.30 0.10 200)"/>
                    <span className="text-[12px] text-[var(--ink-2)] whitespace-nowrap">{v.by}</span>
                  </div>
                </td>
                <td className={cn("px-5 py-3 text-right text-[13px] font-semibold tabular-nums whitespace-nowrap", v.value >= 0 ? "text-[var(--positive-text)]" : "text-[var(--critical-text)]")}>
                  {v.value > 0 ? "+" : ""}{fmtINR(Math.abs(v.value))}{v.value < 0 ? " ↓" : ""}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </main>
  );
}

// ---------- Contacts ----------
const CUSTOMERS = [
  { id: "cus-001", name: "Star Bazaar (Bandra)",     gstin: "27AABCS9123L1ZM", city: "Mumbai", outstanding: 124000, kind: "customer", initials: "SB" },
  { id: "cus-002", name: "Reliance Smart (Powai)",   gstin: "27AABCR8867H1ZP", city: "Mumbai", outstanding: 285600, kind: "customer", initials: "RS" },
  { id: "cus-003", name: "More Megastore (Vashi)",   gstin: "27AABCM3344K1ZN", city: "Navi Mumbai", outstanding: 41200, kind: "customer", initials: "MM" },
  { id: "cus-004", name: "DMart (Andheri W)",         gstin: "27AABCD2210T1ZQ", city: "Mumbai", outstanding: 0,      kind: "customer", initials: "DM" },
  { id: "cus-005", name: "Spencer's Retail",          gstin: "27AABCS5544J1ZR", city: "Mumbai", outstanding: 78400,  kind: "customer", initials: "SR" },
  { id: "cus-006", name: "Nature's Basket",           gstin: "27AABCN1187F1ZX", city: "Mumbai", outstanding: 12300,  kind: "customer", initials: "NB" },
];

function ContactsPage() {
  const [tab, setTab] = React.useState("suppliers");
  const list = tab === "suppliers" ? SUPPLIERS.map(s => ({...s, kind: "supplier", initials: s.name.split(" ").map(p=>p[0]).join("").slice(0,2), outstanding: Math.floor(Math.random()*8+1)*15000})) : CUSTOMERS;
  return (
    <main className="px-8 py-6">
      <PageHeader
        icon="users"
        title="Contacts"
        subtitle="Suppliers and customers · synced from your accounting software"
        filters={
          <div className="flex items-center gap-1 p-0.5 rounded-md bg-[var(--sunken)]">
            <button onClick={() => setTab("suppliers")} className={cn("h-7 px-3 rounded text-[12px] font-medium whitespace-nowrap", tab === "suppliers" ? "bg-[var(--surface)] shadow-[var(--elev-1)] text-[var(--ink)]" : "text-[var(--ink-3)]")}>Suppliers · {SUPPLIERS.length}</button>
            <button onClick={() => setTab("customers")} className={cn("h-7 px-3 rounded text-[12px] font-medium whitespace-nowrap", tab === "customers" ? "bg-[var(--surface)] shadow-[var(--elev-1)] text-[var(--ink)]" : "text-[var(--ink-3)]")}>Customers · {CUSTOMERS.length}</button>
          </div>
        }
        actions={<Button size="sm" variant="primary"><Icon name="plus" size={13}/>New {tab === "suppliers" ? "Supplier" : "Customer"}</Button>}
      />

      <div className="grid grid-cols-3 gap-4">
        {list.map(c => (
          <Card key={c.id} className="p-4 hover:border-[var(--accent-1)] cursor-pointer transition-colors">
            <div className="flex items-start gap-3 mb-3">
              <Avatar initials={c.initials} size={36} tint={tab === "suppliers" ? "oklch(0.88 0.07 50)" : "oklch(0.88 0.06 160)"} color={tab === "suppliers" ? "oklch(0.34 0.10 50)" : "oklch(0.30 0.10 160)"}/>
              <div className="min-w-0 flex-1">
                <div className="text-[14px] font-semibold text-[var(--ink)] truncate">{c.name}</div>
                <div className="text-[11.5px] text-[var(--ink-3)] mt-0.5 mono">{c.gstin}</div>
              </div>
              <Pill kind={tab === "suppliers" ? "info" : "accent"}>{tab === "suppliers" ? "Supplier" : "Customer"}</Pill>
            </div>
            <div className="grid grid-cols-2 gap-3 mt-3 pt-3 border-t border-[var(--hairline)]">
              <div>
                <div className="text-[10.5px] uppercase tracking-[0.06em] text-[var(--ink-3)] font-medium">City</div>
                <div className="text-[12.5px] text-[var(--ink)] mt-0.5">{c.city}</div>
              </div>
              <div>
                <div className="text-[10.5px] uppercase tracking-[0.06em] text-[var(--ink-3)] font-medium">{tab === "suppliers" ? "Payable" : "Receivable"}</div>
                <div className={cn("text-[12.5px] font-semibold tabular-nums mt-0.5", c.outstanding > 0 ? "text-[var(--ink)]" : "text-[var(--ink-3)]")}>{fmtINR(c.outstanding)}</div>
              </div>
            </div>
          </Card>
        ))}
      </div>
    </main>
  );
}

// ---------- Locations ----------
function LocationsPage() {
  const stockByLoc = LOCATIONS.map(l => ({
    ...l,
    items: STOCK_BEFORE.filter(s => s.locId === l.id).length || 0,
    qty: STOCK_BEFORE.filter(s => s.locId === l.id).reduce((s, r) => s + r.qty, 0) || Math.floor(Math.random()*4000+1500),
    value: (STOCK_BEFORE.filter(s => s.locId === l.id).reduce((s, r) => s + r.qty, 0) || Math.floor(Math.random()*4000+1500)) * 130,
  }));
  return (
    <main className="px-8 py-6">
      <PageHeader
        icon="warehouse"
        title="Locations"
        subtitle="Warehouses, godowns, and stock points"
        actions={<Button size="sm" variant="primary"><Icon name="plus" size={13}/>New Location</Button>}
      />

      <div className="grid grid-cols-3 gap-4 mb-4">
        {stockByLoc.map(l => (
          <Card key={l.id} className="overflow-hidden hover:border-[var(--accent-1)] cursor-pointer transition-colors">
            <div className="px-5 pt-5 pb-4 border-b border-[var(--hairline)]">
              <div className="flex items-start justify-between mb-3">
                <div className="w-10 h-10 rounded-md grid place-items-center" style={{ background: "var(--accent-1-tint)", color: "var(--accent-1-text)" }}>
                  <Icon name={l.type === "Warehouse" ? "warehouse" : l.type === "Hub" ? "boxes" : "box"} size={18}/>
                </div>
                <Pill kind="neutral">{l.type}</Pill>
              </div>
              <div className="flex items-baseline gap-2">
                <span className="type-kbd text-[13px]">{l.code}</span>
              </div>
              <div className="font-semibold text-[var(--ink)] mt-1.5" style={{ fontFamily: "var(--font-display)", letterSpacing: "-0.01em", fontSize: 18 }}>{l.name}</div>
            </div>
            <div className="grid grid-cols-3 divide-x divide-[var(--hairline)]">
              {[
                { label: "SKUs", value: l.items || Math.floor(Math.random()*200+100) },
                { label: "Qty on hand", value: l.qty.toLocaleString("en-IN") },
                { label: "Stock value", value: fmtINRCompact(l.value) },
              ].map(s => (
                <div key={s.label} className="px-4 py-3">
                  <div className="text-[10px] uppercase tracking-[0.06em] text-[var(--ink-3)] font-medium">{s.label}</div>
                  <div className="font-semibold tabular-nums text-[var(--ink)] mt-1" style={{ fontFamily: "var(--font-display)", fontSize: 18, letterSpacing: "-0.01em" }}>{s.value}</div>
                </div>
              ))}
            </div>
          </Card>
        ))}
      </div>

      <Card className="p-5">
        <div className="flex items-center gap-2 text-[12px] text-[var(--ink-3)]">
          <Icon name="info" size={13}/>
          Tip: Operators can be scoped to specific locations from <span className="font-semibold text-[var(--ink-2)]">Settings → Roles & Scopes</span>.
        </div>
      </Card>
    </main>
  );
}

// ---------- Settings ----------
function SettingsPage() {
  const [section, setSection] = React.useState("organization");
  const sections = [
    { id: "organization", icon: "building", label: "Organization" },
    { id: "billing",      icon: "credit-card", label: "Billing & Plan" },
    { id: "team",         icon: "users", label: "Team & Roles" },
    { id: "accounting",   icon: "refresh-cw", label: "Accounting Sync" },
    { id: "telegram",     icon: "smartphone", label: "Telegram Bot" },
    { id: "tax",          icon: "receipt", label: "Tax & GST" },
    { id: "audit",        icon: "shield-check", label: "Audit & Compliance" },
    { id: "danger",       icon: "alert-triangle", label: "Danger Zone" },
  ];
  return (
    <main className="px-8 py-6 space-y-5">
      <BiPageHeader title="Settings" subtitle="Organization, team, integrations"/>
      <div className="grid grid-cols-[240px_1fr] gap-5 items-start">
      <Card className="p-2 self-start sticky top-6">
        {sections.map(s => (
          <button key={s.id} onClick={() => setSection(s.id)} className={cn(
            "w-full flex items-center gap-2.5 h-9 px-2.5 rounded-md text-[13px] font-medium text-left transition-colors",
            section === s.id ? "bg-[var(--accent-1-tint)] text-[var(--accent-1-text)]" : "text-[var(--ink-2)] hover:bg-[var(--sunken)]"
          )}>
            <Icon name={s.icon} size={15}/>
            <span className="flex-1">{s.label}</span>
          </button>
        ))}
      </Card>

      <div className="space-y-4">
        {section === "organization" && <>
          <Card className="p-5">
            <h3 className="text-[15px] font-semibold text-[var(--ink)]">Organization</h3>
            <div className="text-[12.5px] text-[var(--ink-3)] mt-0.5 mb-4">How Sharma Distributors appears on vouchers and reports.</div>
            <div className="grid grid-cols-2 gap-4">
              {[
                { l: "Legal name", v: "Sharma Distributors Pvt Ltd" },
                { l: "Trade name", v: "Sharma Distributors" },
                { l: "GSTIN", v: "27AABCS6789K1Z3", mono: true },
                { l: "PAN", v: "AABCS6789K", mono: true },
                { l: "Financial year", v: "FY 25-26" },
                { l: "Currency", v: "INR · Indian Rupee" },
                { l: "State", v: "Maharashtra" },
                { l: "HQ address", v: "Plot 14, Andheri (E), Mumbai 400069" },
              ].map(f => (
                <div key={f.l} className="border border-[var(--hairline)] rounded-md px-3 py-2.5 hover:border-[var(--hairline-3)] cursor-text">
                  <div className="text-[10.5px] uppercase tracking-[0.06em] text-[var(--ink-3)] font-medium">{f.l}</div>
                  <div className={cn("text-[13px] text-[var(--ink)] mt-0.5", f.mono && "mono")}>{f.v}</div>
                </div>
              ))}
            </div>
          </Card>

          <Card className="p-5">
            <h3 className="text-[15px] font-semibold text-[var(--ink)]">Voucher numbering</h3>
            <div className="text-[12.5px] text-[var(--ink-3)] mt-0.5 mb-4">Series prefixes used when creating new vouchers.</div>
            <div className="grid grid-cols-3 gap-3">
              {[
                { l: "Goods Receipt", p: "GRN-{YYYY}-{####}", n: "GRN-2026-0184" },
                { l: "Dispatch",      p: "DSP-{YYYY}-{####}", n: "DSP-2026-0317" },
                { l: "Transfer",      p: "TRF-{YYYY}-{####}", n: "TRF-2026-0044" },
                { l: "Stock Journal", p: "JNL-{YYYY}-{####}", n: "JNL-2026-0028" },
                { l: "Purchase Order",p: "PO-{YYYY}-{####}",  n: "PO-2026-0091" },
                { l: "Sales Order",   p: "SO-{YYYY}-{####}",  n: "SO-2026-0142" },
              ].map(s => (
                <div key={s.l} className="border border-[var(--hairline)] rounded-md p-3">
                  <div className="text-[12.5px] font-semibold text-[var(--ink)]">{s.l}</div>
                  <div className="text-[11px] mono text-[var(--ink-3)] mt-1">{s.p}</div>
                  <div className="text-[11.5px] mono text-[var(--accent-1-text)] mt-1.5 font-semibold">Next: {s.n}</div>
                </div>
              ))}
            </div>
          </Card>
        </>}

        {section === "team" && (
          <Card className="overflow-hidden">
            <div className="flex items-center justify-between px-5 py-4 border-b border-[var(--hairline)]">
              <div>
                <h3 className="text-[15px] font-semibold text-[var(--ink)]">Team & Roles</h3>
                <div className="text-[12px] text-[var(--ink-3)] mt-0.5">Operators submit · managers approve · owner controls billing</div>
              </div>
              <Button size="sm" variant="primary"><Icon name="plus" size={13}/>Invite</Button>
            </div>
            <table className="w-full">
              <thead><tr className="bg-[var(--canvas)] border-b border-[var(--hairline)]">
                <th className="type-table-head text-left px-5 py-2.5">Member</th>
                <th className="type-table-head text-left px-3 py-2.5">Role</th>
                <th className="type-table-head text-left px-3 py-2.5">Scope</th>
                <th className="type-table-head text-left px-3 py-2.5">Last active</th>
                <th className="type-table-head text-right px-5 py-2.5"></th>
              </tr></thead>
              <tbody>
                {[
                  { name: "Priya Sharma",  email: "priya@sharma-co.in",  role: "Manager", scope: "All locations", last: "now",      kind: "accent" },
                  { name: "Anil Sharma",   email: "anil@sharma-co.in",   role: "Owner",   scope: "All",            last: "12m ago",  kind: "info" },
                  { name: "Suresh M.",     email: "suresh@sharma-co.in", role: "Manager", scope: "MUM-1, MUM-2",   last: "1h ago",   kind: "accent" },
                  { name: "Ravi Kumar",    email: "ravi@sharma-co.in",   role: "Operator",scope: "MUM-1",          last: "5m ago",   kind: "neutral" },
                  { name: "Rohan Mehta",   email: "rohan@sharma-co.in",  role: "Operator",scope: "MUM-2",          last: "Yesterday",kind: "neutral" },
                  { name: "Deepa K.",      email: "deepa@sharma-co.in",  role: "Operator",scope: "PUN-1",          last: "2 days",   kind: "neutral" },
                ].map((u, i) => (
                  <tr key={i} className="border-b border-[var(--hairline)] last:border-0">
                    <td className="px-5 py-3">
                      <div className="flex items-center gap-2.5 whitespace-nowrap">
                        <Avatar initials={u.name.split(" ").map(s=>s[0]).join("").slice(0,2)} size={28}/>
                        <div>
                          <div className="text-[13px] font-semibold text-[var(--ink)]">{u.name}</div>
                          <div className="text-[11.5px] text-[var(--ink-3)]">{u.email}</div>
                        </div>
                      </div>
                    </td>
                    <td className="px-3 py-3"><Pill kind={u.kind}>{u.role}</Pill></td>
                    <td className="px-3 py-3 text-[12.5px] text-[var(--ink-2)]">{u.scope}</td>
                    <td className="px-3 py-3 text-[12.5px] text-[var(--ink-3)] tabular-nums">{u.last}</td>
                    <td className="px-5 py-3 text-right"><Icon name="ellipsis-horizontal" size={14} className="text-[var(--ink-3)] inline-block"/></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </Card>
        )}

        {section === "accounting" && (
          <Card className="p-5">
            <div className="flex items-start gap-4">
              <div className="w-12 h-12 rounded-lg grid place-items-center" style={{ background: "oklch(0.92 0.05 80)", color: "oklch(0.40 0.15 80)" }}>
                <Icon name="refresh-cw" size={22}/>
              </div>
              <div className="flex-1">
                <div className="flex items-center gap-2">
                  <h3 className="text-[15px] font-semibold text-[var(--ink)]">Accounting Sync</h3>
                  <Pill kind="positive"><Icon name="check" size={10}/>Connected</Pill>
                </div>
                <div className="text-[12.5px] text-[var(--ink-3)] mt-0.5">Items, contacts, and stock values flow nightly. Vouchers can post on approval.</div>
              </div>
              <Button size="sm" variant="outline"><Icon name="refresh-cw" size={12}/>Sync now</Button>
            </div>

            <div className="grid grid-cols-3 gap-3 mt-5">
              {[
                { l: "Last sync",     v: "07 May 2026, 09:32" },
                { l: "Items in sync", v: "412 / 415" },
                { l: "Conflicts",     v: "3 to resolve", warn: true },
              ].map(s => (
                <div key={s.l} className="border border-[var(--hairline)] rounded-md p-3">
                  <div className="text-[10.5px] uppercase tracking-[0.06em] text-[var(--ink-3)] font-medium">{s.l}</div>
                  <div className={cn("text-[13.5px] font-semibold mt-0.5", s.warn ? "text-[var(--caution-text)]" : "text-[var(--ink)]")}>{s.v}</div>
                </div>
              ))}
            </div>

            <div className="mt-5 pt-4 border-t border-[var(--hairline)]">
              <div className="text-[12.5px] font-semibold text-[var(--ink)] mb-2">Sync direction</div>
              <div className="space-y-2">
                {[
                  { e: "Items master", d: "Accounting → Better Inventory · nightly", on: true },
                  { e: "Contacts (suppliers, customers)", d: "Accounting → Better Inventory · nightly", on: true },
                  { e: "Approved vouchers", d: "Better Inventory → Accounting · on approval", on: true },
                  { e: "Stock values", d: "Accounting → Better Inventory · on demand", on: false },
                ].map(r => (
                  <div key={r.e} className="flex items-center justify-between border border-[var(--hairline)] rounded-md px-3 py-2.5">
                    <div>
                      <div className="text-[13px] font-semibold text-[var(--ink)]">{r.e}</div>
                      <div className="text-[11.5px] text-[var(--ink-3)] mt-0.5">{r.d}</div>
                    </div>
                    <div className={cn("w-9 h-5 rounded-full relative transition-colors", r.on ? "bg-[var(--accent-1)]" : "bg-[var(--hairline)]")}>
                      <div className={cn("absolute top-0.5 w-4 h-4 rounded-full bg-white shadow-sm transition-all", r.on ? "left-[18px]" : "left-0.5")}/>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </Card>
        )}

        {section === "telegram" && (
          <Card className="p-5">
            <div className="flex items-start gap-4">
              <div className="w-12 h-12 rounded-lg grid place-items-center" style={{ background: "oklch(0.90 0.07 230)", color: "oklch(0.40 0.18 230)" }}>
                <Icon name="smartphone" size={22}/>
              </div>
              <div className="flex-1">
                <div className="flex items-center gap-2">
                  <h3 className="text-[15px] font-semibold text-[var(--ink)]">Telegram Mini App</h3>
                  <Pill kind="positive"><Icon name="check" size={10}/>Active</Pill>
                </div>
                <div className="text-[12.5px] text-[var(--ink-3)] mt-0.5">@SharmaInventoryBot · operators submit receipts from the warehouse floor.</div>
              </div>
              <Button size="sm" variant="outline"><Icon name="copy" size={12}/>Copy invite link</Button>
            </div>
            <div className="grid grid-cols-3 gap-3 mt-5">
              <div className="border border-[var(--hairline)] rounded-md p-3"><div className="text-[10.5px] uppercase tracking-[0.06em] text-[var(--ink-3)] font-medium">Bot username</div><div className="text-[13px] mono mt-0.5">@SharmaInventoryBot</div></div>
              <div className="border border-[var(--hairline)] rounded-md p-3"><div className="text-[10.5px] uppercase tracking-[0.06em] text-[var(--ink-3)] font-medium">Operators connected</div><div className="text-[13.5px] font-semibold mt-0.5">3 of 4</div></div>
              <div className="border border-[var(--hairline)] rounded-md p-3"><div className="text-[10.5px] uppercase tracking-[0.06em] text-[var(--ink-3)] font-medium">OCR provider</div><div className="text-[13px] mt-0.5">Gemini · 96% avg confidence</div></div>
            </div>
          </Card>
        )}

        {section === "billing" && (
          <Card className="p-5">
            <div className="flex items-start justify-between">
              <div>
                <h3 className="text-[15px] font-semibold text-[var(--ink)]">Plan</h3>
                <div className="text-[12.5px] text-[var(--ink-3)] mt-0.5">Growth · billed annually</div>
              </div>
              <div className="text-right">
                <div className="text-[24px] font-semibold tabular-nums" style={{ fontFamily: "var(--font-display)" }}>₹4,999<span className="text-[14px] text-[var(--ink-3)] font-normal">/mo</span></div>
                <div className="text-[11.5px] text-[var(--ink-3)]">Renews 31 March 2027</div>
              </div>
            </div>
            <div className="grid grid-cols-4 gap-3 mt-5 pt-5 border-t border-[var(--hairline)]">
              {[
                { l: "Locations",  used: 3, lim: 5 },
                { l: "Users",      used: 6, lim: 10 },
                { l: "Vouchers/mo",used: 287, lim: 1000 },
                { l: "Storage",    used: "1.2 GB", lim: "10 GB" },
              ].map(s => (
                <div key={s.l}>
                  <div className="text-[10.5px] uppercase tracking-[0.06em] text-[var(--ink-3)] font-medium">{s.l}</div>
                  <div className="text-[15px] font-semibold tabular-nums mt-0.5" style={{ fontFamily: "var(--font-display)" }}>{s.used} <span className="text-[12px] text-[var(--ink-3)] font-normal">/ {s.lim}</span></div>
                </div>
              ))}
            </div>
          </Card>
        )}

        {section === "tax" && (
          <Card className="p-5">
            <h3 className="text-[15px] font-semibold text-[var(--ink)]">Tax & GST</h3>
            <div className="text-[12.5px] text-[var(--ink-3)] mt-0.5 mb-4">Default rates applied to new items unless overridden.</div>
            <div className="grid grid-cols-2 gap-3">
              {[
                { l: "GST scheme", v: "Regular · Composition off" },
                { l: "Default GST rate", v: "18%" },
                { l: "HSN auto-detect", v: "On · via item name" },
                { l: "TCS on sales", v: "Disabled" },
                { l: "TDS section 194Q", v: "Tracked" },
                { l: "Reverse charge", v: "Auto-detect from supplier GSTIN" },
              ].map(f => (
                <div key={f.l} className="border border-[var(--hairline)] rounded-md px-3 py-2.5">
                  <div className="text-[10.5px] uppercase tracking-[0.06em] text-[var(--ink-3)] font-medium">{f.l}</div>
                  <div className="text-[13px] text-[var(--ink)] mt-0.5">{f.v}</div>
                </div>
              ))}
            </div>
          </Card>
        )}

        {section === "audit" && (
          <Card className="p-5">
            <h3 className="text-[15px] font-semibold text-[var(--ink)]">Audit & Compliance</h3>
            <div className="text-[12.5px] text-[var(--ink-3)] mt-0.5 mb-4">The append-only ledger and audit log can never be edited or pruned.</div>
            <div className="space-y-2">
              {[
                { l: "Append-only stock ledger",  d: "Every stock change is a new row · running balance is SUM(delta)", on: true, locked: true },
                { l: "Audit log retention",       d: "Forever · stored encrypted at rest", on: true, locked: true },
                { l: "Two-person approval",       d: "Operators submit, managers approve. Cannot be bypassed.", on: true, locked: true },
                { l: "Voucher cancellation",      d: "Cancellations create reversal rows — original is preserved", on: true, locked: true },
                { l: "Daily ledger checksum",     d: "Email Anil Sharma at 23:55 IST", on: true },
              ].map(r => (
                <div key={r.l} className="flex items-center justify-between border border-[var(--hairline)] rounded-md px-3 py-2.5">
                  <div>
                    <div className="flex items-center gap-2"><span className="text-[13px] font-semibold text-[var(--ink)]">{r.l}</span>{r.locked && <Icon name="lock" size={11} className="text-[var(--ink-4)]"/>}</div>
                    <div className="text-[11.5px] text-[var(--ink-3)] mt-0.5">{r.d}</div>
                  </div>
                  <div className={cn("w-9 h-5 rounded-full relative", r.on ? "bg-[var(--accent-1)]" : "bg-[var(--hairline)]", r.locked && "opacity-60")}>
                    <div className={cn("absolute top-0.5 w-4 h-4 rounded-full bg-white shadow-sm", r.on ? "left-[18px]" : "left-0.5")}/>
                  </div>
                </div>
              ))}
            </div>
          </Card>
        )}

        {section === "danger" && (
          <Card className="p-5" style={{ borderColor: "var(--critical-tint)" }}>
            <h3 className="text-[15px] font-semibold text-[var(--critical-text)]">Danger Zone</h3>
            <div className="text-[12.5px] text-[var(--ink-3)] mt-0.5 mb-4">Irreversible actions. Manager approval required.</div>
            <div className="space-y-2">
              {[
                { l: "Close financial year", d: "Locks all vouchers in FY 25-26 · creates opening balances for 26-27" },
                { l: "Export full ledger",   d: "CSV + PDF · audit-grade · ~12 MB" },
                { l: "Disable accounting sync", d: "Stop all data flow to/from your accounting software" },
                { l: "Transfer ownership",   d: "Move org ownership to another manager" },
              ].map(r => (
                <div key={r.l} className="flex items-center justify-between border border-[var(--hairline)] rounded-md px-3 py-2.5">
                  <div>
                    <div className="text-[13px] font-semibold text-[var(--ink)]">{r.l}</div>
                    <div className="text-[11.5px] text-[var(--ink-3)] mt-0.5">{r.d}</div>
                  </div>
                  <Button size="sm" variant="outline">Run…</Button>
                </div>
              ))}
            </div>
          </Card>
        )}
      </div>
      </div>
    </main>
  );
}

Object.assign(window, { InwardPage, OutwardPage, TransfersPage, StockJournalPage, ContactsPage, LocationsPage, SettingsPage });