// User Dashboard — for owners to manage their instruments
function DashboardPage() {
  return (
    <div className="n-page" style={{ minHeight: 1000 }}>
      <NobleNav active="shop" />

      <div style={{ display: "grid", gridTemplateColumns: "260px 1fr", minHeight: 940 }}>
        {/* Sidebar */}
        <aside
          style={{
            borderRight: "1px solid var(--n-line)",
            padding: "40px 28px",
            background: "var(--n-ink)",
          }}
        >
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 12,
              padding: "12px 0",
              marginBottom: 32,
            }}
          >
            <div
              style={{
                width: 40,
                height: 40,
                borderRadius: "50%",
                background: "var(--n-panel-2)",
                border: "1px solid var(--n-gold)",
                display: "grid",
                placeItems: "center",
                fontFamily: "var(--n-serif)",
                color: "var(--n-gold)",
                fontSize: 16,
              }}
            >
              AL
            </div>
            <div>
              <div style={{ fontSize: 14 }}>Aoife Lindqvist</div>
              <div className="n-mono" style={{ fontSize: 10, color: "var(--n-muted)", letterSpacing: "0.12em", textTransform: "uppercase" }}>
                Owner · since 2022
              </div>
            </div>
          </div>

          <div className="n-label" style={{ marginBottom: 14 }}>Atelier</div>
          <nav style={{ display: "grid", gap: 4, marginBottom: 32 }}>
            {[
              { l: "Overview", a: true },
              { l: "My instruments", n: "02" },
              { l: "Orders & deliveries", n: "01" },
              { l: "Service & repairs" },
              { l: "Commissions" },
              { l: "Listening sessions" },
              { l: "Saved" },
            ].map((i) => (
              <a
                key={i.l}
                href="#"
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                  padding: "10px 14px",
                  fontSize: 13,
                  textDecoration: "none",
                  color: i.a ? "var(--n-cream)" : "var(--n-cream-dim)",
                  background: i.a ? "var(--n-panel)" : "transparent",
                  borderLeft: i.a ? "1px solid var(--n-gold)" : "1px solid transparent",
                }}
              >
                <span>{i.l}</span>
                {i.n && <span className="n-mono" style={{ fontSize: 10, color: "var(--n-muted)" }}>{i.n}</span>}
              </a>
            ))}
          </nav>

          <div className="n-label" style={{ marginBottom: 14 }}>Account</div>
          <nav style={{ display: "grid", gap: 4 }}>
            {["Addresses", "Payment", "Preferences", "Sign out"].map((i) => (
              <a key={i} href="#" style={{ padding: "10px 14px", fontSize: 13, color: "var(--n-cream-dim)", textDecoration: "none" }}>
                {i}
              </a>
            ))}
          </nav>

          {/* Concierge card */}
          <div
            className="n-panel"
            style={{ marginTop: 40, padding: 20, textAlign: "center" }}
          >
            <div className="n-eyebrow" style={{ marginBottom: 10 }}>Concierge</div>
            <div style={{ fontSize: 12, color: "var(--n-cream-dim)", lineHeight: 1.5, marginBottom: 14 }}>
              Yuki is on call,<br />Tue – Sat
            </div>
            <button className="n-btn n-btn-ghost" style={{ width: "100%", padding: "10px 14px", justifyContent: "center", fontSize: 10 }}>
              Open a thread
            </button>
          </div>
        </aside>

        {/* Main */}
        <main style={{ padding: "48px 56px" }}>
          {/* Header */}
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 48 }}>
            <div>
              <div className="n-eyebrow" style={{ marginBottom: 16 }}>─── Overview · Spring 2026</div>
              <h1 className="n-display" style={{ fontSize: 56, margin: 0 }}>
                Good evening,<br />
                <em>Aoife.</em>
              </h1>
            </div>
            <div className="n-mono" style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--n-muted)", textAlign: "right", lineHeight: 1.8 }}>
              Last sign-in · 12 May, 18:24 GMT<br />
              <span style={{ color: "var(--n-gold)" }}>● Two threads open</span>
            </div>
          </div>

          {/* Stat strip */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, background: "var(--n-line)", marginBottom: 56 }}>
            {[
              { k: "Instruments owned", v: "02", s: "M-1 Obsidian, M-1 Sumi" },
              { k: "Hours listened", v: "1,428", s: "+184 vs. last quarter" },
              { k: "Next service", v: "Aug 2026", s: "Driver re-match · gratis" },
              { k: "Patron tier", v: "Owner II", s: "Eligible for Patron in 2027" },
            ].map((s) => (
              <div key={s.k} style={{ background: "var(--n-panel)", padding: "28px 24px" }}>
                <div className="n-label" style={{ marginBottom: 14 }}>{s.k}</div>
                <div className="n-num" style={{ fontSize: 30, color: "var(--n-cream)", marginBottom: 8 }}>{s.v}</div>
                <div style={{ fontSize: 11, color: "var(--n-muted)" }}>{s.s}</div>
              </div>
            ))}
          </div>

          {/* Two-column */}
          <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 32 }}>
            {/* Instruments */}
            <div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 20 }}>
                <h2 style={{ fontFamily: "var(--n-serif)", fontSize: 28, margin: 0 }}>Your instruments</h2>
                <a className="n-mono" style={{ fontSize: 10, color: "var(--n-gold)", letterSpacing: "0.14em", textTransform: "uppercase" }}>View archive →</a>
              </div>
              <div style={{ display: "grid", gap: 12 }}>
                {[
                  { name: "M-1 Obsidian", num: "№ 0418 / 800", series: "Series 04 · 2026", state: "Active", since: "Owned since 21 May 2026", c: "var(--n-gold)" },
                  { name: "M-1 Sumi", num: "№ 0212 / 800", series: "Series 03 · 2024", state: "In service", since: "Returns 18 May", c: "var(--n-muted)" },
                ].map((it) => (
                  <div
                    key={it.name}
                    className="n-panel"
                    style={{ padding: 24, display: "grid", gridTemplateColumns: "100px 1fr auto", gap: 24, alignItems: "center" }}
                  >
                    <div style={{ height: 100, background: "repeating-linear-gradient(135deg, #161616 0 1px, transparent 1px 12px), #0f0f0f", border: "1px solid var(--n-line)" }} />
                    <div>
                      <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginBottom: 6 }}>
                        <div style={{ fontFamily: "var(--n-serif)", fontSize: 24 }}>{it.name}</div>
                        <div className="n-mono" style={{ fontSize: 11, color: "var(--n-gold)", letterSpacing: "0.12em" }}>{it.num}</div>
                      </div>
                      <div style={{ fontSize: 12, color: "var(--n-muted)" }}>{it.series} · {it.since}</div>
                      <div className="n-mono" style={{ fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: it.c, marginTop: 12 }}>
                        ● {it.state}
                      </div>
                    </div>
                    <button className="n-btn n-btn-ghost" style={{ padding: "10px 16px", fontSize: 10 }}>Open file →</button>
                  </div>
                ))}
              </div>

              {/* Activity */}
              <div style={{ marginTop: 48 }}>
                <h2 style={{ fontFamily: "var(--n-serif)", fontSize: 28, margin: 0, marginBottom: 20 }}>Recent activity</h2>
                <div className="n-panel" style={{ padding: 0 }}>
                  {[
                    { d: "12 May", t: "Yuki replied to your service thread", k: "Atelier" },
                    { d: "08 May", t: "M-1 Sumi received at workshop · Kyoto", k: "Service" },
                    { d: "01 May", t: "Reserved Series 04 · 14 May ship date", k: "Order" },
                    { d: "22 Apr", t: "Atelier letter № 14 published", k: "Letter" },
                  ].map((r, i, a) => (
                    <div key={i} style={{ display: "grid", gridTemplateColumns: "80px 1fr 120px", gap: 24, padding: "18px 24px", borderBottom: i < a.length - 1 ? "1px solid var(--n-line)" : "none", alignItems: "baseline" }}>
                      <span className="n-mono" style={{ fontSize: 11, color: "var(--n-muted)", letterSpacing: "0.12em" }}>{r.d}</span>
                      <span style={{ fontSize: 13 }}>{r.t}</span>
                      <span className="n-mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--n-gold)", textTransform: "uppercase", textAlign: "right" }}>{r.k}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Side */}
            <div style={{ display: "grid", gap: 24, alignContent: "start" }}>
              {/* Next delivery */}
              <div className="n-panel" style={{ padding: 28 }}>
                <div className="n-eyebrow" style={{ marginBottom: 16 }}>Arriving</div>
                <div style={{ fontFamily: "var(--n-serif)", fontSize: 22, marginBottom: 4 }}>M-1 Obsidian · № 0418</div>
                <div style={{ fontSize: 12, color: "var(--n-muted)", marginBottom: 24 }}>White-glove courier · in transit</div>
                {/* Timeline */}
                <div style={{ display: "grid", gap: 0 }}>
                  {[
                    { d: "14 May", t: "Sealed in Kyoto", a: true },
                    { d: "16 May", t: "Departed Narita", a: true },
                    { d: "18 May", t: "Cleared Heathrow", a: true },
                    { d: "21 May", t: "Hand-delivery scheduled", a: false, c: true },
                  ].map((s, i, a) => (
                    <div key={i} style={{ display: "grid", gridTemplateColumns: "20px 70px 1fr", gap: 12, alignItems: "flex-start" }}>
                      <div style={{ display: "grid", placeItems: "center", paddingTop: 2 }}>
                        <div
                          style={{
                            width: 8,
                            height: 8,
                            borderRadius: "50%",
                            background: s.a ? "var(--n-gold)" : "transparent",
                            border: s.a ? "none" : "1px solid var(--n-gold)",
                          }}
                        />
                        {i < a.length - 1 && (
                          <div style={{ width: 1, height: 22, background: "var(--n-line-strong)", marginTop: 2 }} />
                        )}
                      </div>
                      <span className="n-mono" style={{ fontSize: 10, color: "var(--n-muted)", letterSpacing: "0.12em", paddingTop: 2 }}>{s.d}</span>
                      <span style={{ fontSize: 12, color: s.c ? "var(--n-gold)" : s.a ? "var(--n-cream)" : "var(--n-muted)", paddingBottom: 14 }}>{s.t}</span>
                    </div>
                  ))}
                </div>
              </div>

              {/* Letter card */}
              <div
                style={{
                  padding: 28,
                  border: "1px solid var(--n-line)",
                  background: "linear-gradient(180deg, rgba(201,168,106,0.05), transparent)",
                }}
              >
                <div className="n-eyebrow" style={{ marginBottom: 14 }}>Atelier letter № 14</div>
                <div style={{ fontFamily: "var(--n-serif)", fontSize: 24, lineHeight: 1.2, marginBottom: 16 }}>
                  On waiting,<br /><em>and lacquer.</em>
                </div>
                <p style={{ fontSize: 12, color: "var(--n-cream-dim)", lineHeight: 1.6, margin: 0, marginBottom: 16 }}>
                  Six minutes from the kiln, a brief letter from Hiroshi on the
                  patience the urushi demands.
                </p>
                <a className="n-mono" style={{ fontSize: 10, color: "var(--n-gold)", letterSpacing: "0.14em", textTransform: "uppercase" }}>Read letter →</a>
              </div>

              {/* Invite */}
              <div className="n-panel-2" style={{ padding: 28, textAlign: "center" }}>
                <div className="n-eyebrow" style={{ marginBottom: 14, color: "var(--n-gold)" }}>Patron invitation</div>
                <div style={{ fontSize: 13, color: "var(--n-cream-dim)", lineHeight: 1.6, marginBottom: 18 }}>
                  You're eligible for Patron tier in February 2027. We'll write
                  ahead of time.
                </div>
                <button className="n-btn n-btn-ghost" style={{ padding: "10px 16px", fontSize: 10 }}>Read about Patron →</button>
              </div>
            </div>
          </div>
        </main>
      </div>

      <NobleFooter />
    </div>
  );
}

window.DashboardPage = DashboardPage;