const PDS = window.PrestigeServicesDesignSystem_020573;

function PortalSidebar({ active, onNav }) {
  const items = [["dashboard", "Dashboard"], ["properties", "Properties"], ["workorders", "Work Orders"], ["projects", "Projects"], ["financials", "Financials"], ["documents", "Documents"]];
  return (
    <aside style={{ width: 232, flexShrink: 0, background: "var(--surface-dark)", minHeight: "100vh", display: "flex", flexDirection: "column" }}>
      <div style={{ padding: "28px 22px 22px", borderBottom: "1px solid var(--border-dark)", display: "flex", flexDirection: "column", lineHeight: 1 }}>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 24, letterSpacing: "0.1em", textTransform: "uppercase", background: "var(--silver-grad)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>Prestige</span>
        <span style={{ font: "500 7px var(--font-body)", letterSpacing: "0.5em", textTransform: "uppercase", color: "var(--orange-500)", marginTop: 5 }}>Property Services</span>
      </div>
      <nav style={{ padding: "18px 0", display: "flex", flexDirection: "column" }}>
        {items.map(([id, label]) => {
          const on = active === id;
          return (
            <a key={id} href="#" onClick={(e) => { e.preventDefault(); onNav(id); }}
              style={{
                font: "500 11px var(--font-body)", letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
                color: on ? "var(--text-inverse)" : "var(--text-inverse-dim)",
                padding: "14px 22px", borderLeft: "3px solid " + (on ? "var(--orange-500)" : "transparent"),
                background: on ? "var(--surface-dark-card)" : "transparent",
                transition: "all var(--dur-fast) var(--ease-out)", textDecoration: "none",
              }}
              onMouseEnter={(e) => { if (!on) { e.target.style.color = "var(--silver-300)"; e.target.style.paddingLeft = "28px"; } }}
              onMouseLeave={(e) => { if (!on) { e.target.style.color = "var(--text-inverse-dim)"; e.target.style.paddingLeft = "22px"; } }}>{label}</a>
          );
        })}
      </nav>
      <div style={{ marginTop: "auto", padding: 22, borderTop: "1px solid var(--border-dark)", display: "flex", alignItems: "center", gap: 12 }}>
        <span style={{ width: 34, height: 34, background: "var(--orange-500)", color: "var(--white)", display: "inline-flex", alignItems: "center", justifyContent: "center", font: "700 13px var(--font-body)" }}>MK</span>
        <span style={{ font: "500 13px var(--font-body)", color: "var(--silver-300)" }}>M. Kowalski<br /><span style={{ font: "300 11px var(--font-body)", color: "var(--text-inverse-dim)" }}>Owner · 3 properties</span></span>
      </div>
    </aside>
  );
}

function StatCard({ label, value, delta, tone }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        position: "relative", background: "var(--surface-card)", border: "1px solid var(--border-default)",
        padding: "22px 24px", overflow: "hidden",
        transform: hover ? "translateY(-6px)" : "none", boxShadow: hover ? "var(--shadow-hover)" : "none",
        transition: "transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)",
      }}>
      <span aria-hidden="true" style={{ position: "absolute", top: 0, left: 0, height: 3, background: "var(--orange-500)", width: hover ? "100%" : "36%", transition: "width var(--dur-slow) var(--ease-out)" }}></span>
      <div style={{ font: "500 10px var(--font-body)", letterSpacing: "var(--tracking-label)", textTransform: "uppercase", color: "var(--gray-500)" }}>{label}</div>
      <div style={{ font: "600 38px var(--font-display)", letterSpacing: "0.02em", color: "var(--text-primary)", margin: "10px 0 4px" }}>{value}</div>
      {delta && <div style={{ font: "500 11px var(--font-mono)", color: tone === "down" ? "var(--danger)" : "var(--success)" }}>{delta}</div>}
    </div>
  );
}

Object.assign(window, { PortalSidebar, StatCard });