// Account.jsx — Mi cuenta with sidebar tabs (profile, addresses, payments, orders, favorites, settings)
const { useState: useAcctState } = React;

const ACCT_SECTIONS = [
  { id: "compras",     label: "Mis compras",    icon: "shopping_basket" },
  { id: "favoritos",   label: "Mis favoritos",  icon: "favorite" },
  { id: "perfil",      label: "Mi perfil",      icon: "person" },
  { id: "direcciones", label: "Mis direcciones",icon: "location_on" },
  { id: "pagos",       label: "Métodos de pago",icon: "credit_card" },
  { id: "ajustes",     label: "Ajustes",        icon: "tune" },
];

const AccountPage = ({ user, params, onNav, onLogout, onOpenPdp, onOpenOrder, favs, onUnfav }) => {
  const [tab, setTab] = useAcctState(params?.tab || "compras");
  const initials = (user?.name || "Allen").split(/\s+/).map(s => s[0]).slice(0, 2).join("").toUpperCase();
  const toast = useToast();

  return (
    <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "0 32px" }}>
      <Breadcrumb items={["Inicio", "Mi cuenta", ACCT_SECTIONS.find(s => s.id === tab)?.label]} />

      <div style={{ display: "grid", gridTemplateColumns: "280px 1fr", gap: 32, alignItems: "start" }}>
        {/* SIDEBAR */}
        <aside style={{ position: "sticky", top: 160 }}>
          <div style={{ background: "var(--bg-elev-1)", borderRadius: "var(--radius-lg)", padding: 20, border: "1px solid var(--border-soft)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
              <div style={{ width: 48, height: 48, borderRadius: 24, background: "var(--hub-black)", color: "#fff", display: "grid", placeItems: "center", font: "700 16px var(--font-sans)" }}>{initials}</div>
              <div>
                <div className="title-sm">{user?.name || "Usuario Allen"}</div>
                <div className="body-sm">{user?.email || "tu@correo.com"}</div>
              </div>
            </div>
            <nav style={{ display: "flex", flexDirection: "column", gap: 2 }}>
              {ACCT_SECTIONS.map(s => (
                <button key={s.id} onClick={() => setTab(s.id)}
                  style={{
                    display: "flex", alignItems: "center", gap: 12,
                    padding: "10px 14px", borderRadius: "var(--radius-md)",
                    background: tab === s.id ? "var(--primary-soft)" : "transparent",
                    color: tab === s.id ? "var(--primary-press)" : "var(--fg-strong)",
                    border: 0, font: tab === s.id ? "700 13px var(--font-sans)" : "500 13px var(--font-sans)",
                    cursor: "pointer", textAlign: "left",
                  }}
                  onMouseEnter={e => { if (tab !== s.id) e.currentTarget.style.background = "var(--bg-elev-2)"; }}
                  onMouseLeave={e => { if (tab !== s.id) e.currentTarget.style.background = "transparent"; }}
                >
                  <AllenIcon name={s.icon} size={18} />
                  <span style={{ flex: 1 }}>{s.label}</span>
                  {tab === s.id && <AllenIcon name="chevron_right" size={16} />}
                </button>
              ))}
              <div style={{ height: 1, background: "var(--border-soft)", margin: "8px 14px" }} />
              <button onClick={onLogout}
                style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 14px", borderRadius: "var(--radius-md)", background: "transparent", color: "var(--error)", border: 0, font: "600 13px var(--font-sans)", cursor: "pointer", textAlign: "left" }}>
                <AllenIcon name="close" size={18} /> Cerrar sesión
              </button>
            </nav>
          </div>
        </aside>

        {/* CONTENT */}
        <section>
          {tab === "compras"     && <OrdersTab onOpenPdp={onOpenPdp} onOpenOrder={onOpenOrder} />}
          {tab === "favoritos"   && <FavoritesTab favs={favs} onOpenPdp={onOpenPdp} onUnfav={onUnfav} />}
          {tab === "perfil"      && <ProfileTab user={user} />}
          {tab === "direcciones" && <AddressesTab />}
          {tab === "pagos"       && <PaymentsTab />}
          {tab === "ajustes"     && <SettingsTab />}
        </section>
      </div>
    </div>
  );
};

// ----- Orders -----
const ORDERS = [
  { id: "AL-712304", date: "12 feb 2026", status: "DELIVERED",  items: [{ pid: "p001", qty: 1 }, { pid: "p008", qty: 1 }], total: 2548 },
  { id: "AL-711981", date: "08 feb 2026", status: "IN_PROGRESS",items: [{ pid: "p005", qty: 1 }], total: 1899 },
  { id: "AL-711440", date: "30 ene 2026", status: "DELIVERED",  items: [{ pid: "p003", qty: 2 }, { pid: "p010", qty: 1 }], total: 1017 },
  { id: "AL-710882", date: "14 ene 2026", status: "CANCELLED",  items: [{ pid: "p007", qty: 1 }], total: 5499 },
];

const STATUS_LABEL = {
  REQUESTED:   { label: "Solicitado",  fg: "var(--warning)", bg: "var(--warning-bg)" },
  ACCEPTED:    { label: "Aceptado",    fg: "var(--primary-press)", bg: "var(--primary-soft)" },
  IN_PROGRESS: { label: "En camino",   fg: "#8A6500",       bg: "var(--warning-bg)" },
  READY:       { label: "Listo",       fg: "var(--success)",bg: "var(--success-bg)" },
  DELIVERED:   { label: "Entregado",   fg: "var(--success)",bg: "var(--success-bg)" },
  CANCELLED:   { label: "Cancelado",   fg: "var(--error)",  bg: "var(--error-bg)" },
};

const OrdersTab = ({ onOpenPdp, onOpenOrder }) => {
  const [filter, setFilter] = useAcctState("all");
  const filtered = filter === "all" ? ORDERS : ORDERS.filter(o => o.status === filter);
  return (
    <div>
      <h1 className="display-sm" style={{ marginBottom: 8 }}>Mis compras</h1>
      <p className="body-sm" style={{ marginBottom: 24 }}>{ORDERS.length} pedidos en total</p>

      <div style={{ display: "flex", gap: 8, marginBottom: 20 }}>
        {[
          { id: "all", label: "Todas" },
          { id: "IN_PROGRESS", label: "En camino" },
          { id: "DELIVERED", label: "Entregadas" },
          { id: "CANCELLED", label: "Canceladas" },
        ].map(f => (
          <button key={f.id} onClick={() => setFilter(f.id)}
            style={{
              padding: "8px 16px", borderRadius: "9999px",
              background: filter === f.id ? "var(--hub-black)" : "var(--bg-elev-1)",
              color: filter === f.id ? "#fff" : "var(--fg-strong)",
              border: filter === f.id ? 0 : "1px solid var(--border)",
              font: filter === f.id ? "700 12px var(--font-sans)" : "500 12px var(--font-sans)",
              cursor: "pointer",
            }}>{f.label}</button>
        ))}
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
        {filtered.map(o => {
          const status = STATUS_LABEL[o.status];
          const items = o.items.map(i => CATALOG.find(p => p.id === i.pid)).filter(Boolean);
          return (
            <div key={o.id} style={{ background: "var(--bg-elev-1)", border: "1px solid var(--border-soft)", borderRadius: "var(--radius-lg)", overflow: "hidden" }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "14px 20px", background: "var(--bg-elev-2)" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                  <span style={{ font: "700 13px var(--font-sans)", color: "var(--fg-strong)" }}>Pedido #{o.id}</span>
                  <span className="body-sm">{o.date}</span>
                </div>
                <span style={{ font: "700 11px var(--font-sans)", color: status.fg, background: status.bg, padding: "4px 12px", borderRadius: "9999px", letterSpacing: ".04em" }}>{status.label}</span>
              </div>
              <div style={{ padding: 20, display: "flex", gap: 20 }}>
                <div style={{ display: "flex", gap: 10, flex: 1 }}>
                  {items.map(p => (
                    <button key={p.id} onClick={() => onOpenPdp(p)} title={p.name}
                      style={{ width: 72, height: 72, borderRadius: "var(--radius-md)", padding: 0, border: "1px solid var(--border-soft)", background: p.imgBg, overflow: "hidden", cursor: "pointer" }}>
                      <img src={p.img} alt={p.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                    </button>
                  ))}
                  <div style={{ alignSelf: "center", marginLeft: 6 }}>
                    <div className="title-sm">{items[0]?.name}</div>
                    {items.length > 1 && <div className="body-sm" style={{ marginTop: 4 }}>y {items.length - 1} producto{items.length > 2 ? "s" : ""} más</div>}
                  </div>
                </div>
                <div style={{ textAlign: "right", display: "flex", flexDirection: "column", justifyContent: "space-between", alignItems: "flex-end" }}>
                  <div>
                    <div className="label" style={{ textAlign: "right" }}>Total</div>
                    <div className="price-lg">${o.total.toLocaleString("es-MX")}</div>
                  </div>
                  <div style={{ display: "flex", gap: 8 }}>
                    {o.status === "DELIVERED" && (
                      <button style={ghostBtn}>Volver a comprar</button>
                    )}
                    <button style={outlineBtn} onClick={() => onOpenOrder?.(o.id)}>Ver detalle</button>
                  </div>
                </div>
              </div>
              {o.status === "IN_PROGRESS" && (
                <div style={{ padding: "14px 20px", borderTop: "1px solid var(--border-soft)", background: "var(--warning-bg)", display: "flex", alignItems: "center", gap: 10 }}>
                  <AllenIcon name="local_shipping" size={20} color="#8A6500" />
                  <span style={{ font: "500 13px var(--font-sans)", color: "var(--fg-strong)" }}>
                    <strong>Llega mañana</strong> entre 10:00 y 18:00 · Salió del centro Allen Vallarta · <a style={{ color: "var(--primary)", fontWeight: 700, cursor: "pointer" }}>Ver seguimiento</a>
                  </span>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
};

// ----- Favorites -----
const FavoritesTab = ({ favs, onOpenPdp, onUnfav }) => {
  const items = CATALOG.filter(p => favs?.has(p.id));
  return (
    <div>
      <h1 className="display-sm" style={{ marginBottom: 8 }}>Mis favoritos</h1>
      <p className="body-sm" style={{ marginBottom: 24 }}>{items.length} producto{items.length === 1 ? "" : "s"} guardado{items.length === 1 ? "" : "s"}</p>
      {items.length === 0 ? (
        <EmptyBox icon="favorite" title="Aún no tienes favoritos" sub="Cuando guardes productos los verás aquí." />
      ) : (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
          {items.map(p => (
            <ProductCard key={p.id} p={p} fav onOpen={() => onOpenPdp(p)} onFav={() => onUnfav(p)} onAdd={() => onOpenPdp(p)} />
          ))}
        </div>
      )}
    </div>
  );
};

// ----- Profile -----
const ProfileTab = ({ user }) => {
  const [form, setForm] = useAcctState({
    name: user?.name || "Bau Andalón", email: user?.email || "bau@allenmx.com",
    phone: "+52 322 145 2287", birthday: "1992-08-12", gender: "no-decir",
  });
  const toast = useToast();
  return (
    <div>
      <h1 className="display-sm" style={{ marginBottom: 8 }}>Mi perfil</h1>
      <p className="body-sm" style={{ marginBottom: 24 }}>Actualiza tus datos personales y de contacto.</p>

      <div style={{ background: "var(--bg-elev-1)", border: "1px solid var(--border-soft)", borderRadius: "var(--radius-lg)", padding: 28, display: "flex", flexDirection: "column", gap: 18 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
          <div style={{ width: 72, height: 72, borderRadius: 36, background: "var(--hub-black)", color: "#fff", display: "grid", placeItems: "center", font: "700 24px var(--font-sans)" }}>
            {form.name.split(/\s+/).map(s => s[0]).slice(0, 2).join("").toUpperCase()}
          </div>
          <div>
            <div className="title-lg">{form.name}</div>
            <div className="body-sm" style={{ marginTop: 4 }}>Miembro Allen desde 2024 · 4 compras</div>
          </div>
          <div style={{ flex: 1 }} />
          <button style={outlineBtn}>Cambiar foto</button>
        </div>
        <div style={{ height: 1, background: "var(--border-soft)" }} />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <Field label="Nombre completo"><TextInput value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} /></Field>
          <Field label="Correo electrónico"><TextInput value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} /></Field>
          <Field label="Celular"><TextInput value={form.phone} onChange={e => setForm({ ...form, phone: e.target.value })} /></Field>
          <Field label="Fecha de nacimiento"><TextInput type="date" value={form.birthday} onChange={e => setForm({ ...form, birthday: e.target.value })} /></Field>
        </div>
        <div style={{ display: "flex", gap: 12, marginTop: 6 }}>
          <PrimaryButton onClick={() => toast("Cambios guardados")}>Guardar cambios</PrimaryButton>
          <button style={ghostBtn}>Cancelar</button>
        </div>
      </div>
    </div>
  );
};

// ----- Addresses -----
const ADDRESSES = [
  { id: "a1", label: "Casa",     name: "Bau Andalón",   street: "Av. Francisco Villa 1180, Int. 4", area: "Versalles, Puerto Vallarta", state: "Jalisco", zip: "48330", phone: "+52 322 145 2287", default: true },
  { id: "a2", label: "Oficina",  name: "Bau Andalón",   street: "Calle Honduras 156",               area: "5 de Diciembre, Puerto Vallarta", state: "Jalisco", zip: "48350", phone: "+52 322 145 2287" },
];

const AddressesTab = () => (
  <div>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
      <h1 className="display-sm">Mis direcciones</h1>
      <PrimaryButton><AllenIcon name="add" size={16} color="#fff" /> Agregar dirección</PrimaryButton>
    </div>
    <p className="body-sm" style={{ marginBottom: 24 }}>La dirección predeterminada se usa en cada compra.</p>

    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
      {ADDRESSES.map(a => (
        <div key={a.id} style={{ background: "var(--bg-elev-1)", border: a.default ? "1.5px solid var(--primary)" : "1px solid var(--border-soft)", borderRadius: "var(--radius-lg)", padding: 20 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <span className="title-sm">{a.label}</span>
              {a.default && <span style={{ font: "700 10px var(--font-sans)", color: "var(--primary)", background: "var(--primary-soft)", padding: "3px 8px", borderRadius: "9999px", textTransform: "uppercase", letterSpacing: ".05em" }}>Predeterminada</span>}
            </div>
            <div style={{ display: "flex", gap: 4 }}>
              <button style={iconChipBtn} aria-label="Editar"><AllenIcon name="tune" size={16} /></button>
              <button style={iconChipBtn} aria-label="Eliminar"><AllenIcon name="delete" size={16} /></button>
            </div>
          </div>
          <div className="body" style={{ color: "var(--fg-strong)", marginBottom: 2 }}>{a.name}</div>
          <div className="body-sm">{a.street}</div>
          <div className="body-sm">{a.area}</div>
          <div className="body-sm">{a.state} · CP {a.zip}</div>
          <div className="body-sm" style={{ marginTop: 6 }}>{a.phone}</div>
          {!a.default && (
            <button style={{ ...ghostBtn, marginTop: 12, padding: 0 }}>Hacer predeterminada</button>
          )}
        </div>
      ))}
      <button style={{ background: "transparent", border: "2px dashed var(--border-strong)", borderRadius: "var(--radius-lg)", padding: 20, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 8, cursor: "pointer", color: "var(--fg-muted)", minHeight: 200 }}>
        <AllenIcon name="add" size={28} color="var(--fg-muted)" />
        <span className="title-sm" style={{ color: "var(--fg-muted)" }}>Agregar dirección</span>
        <span className="body-sm">A casa, oficina, casa de tu mamá…</span>
      </button>
    </div>
  </div>
);

// ----- Payments -----
const CARDS = [
  { id: "c1", brand: "VISA",        last4: "4242", exp: "08/28", default: true,  gradient: "linear-gradient(135deg, #1F3A93 0%, #0A1740 100%)" },
  { id: "c2", brand: "MASTERCARD",  last4: "5588", exp: "11/27", default: false, gradient: "linear-gradient(135deg, #18181B 0%, #3A3A40 100%)" },
];

const PaymentsTab = () => (
  <div>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
      <h1 className="display-sm">Métodos de pago</h1>
      <PrimaryButton><AllenIcon name="add" size={16} color="#fff" /> Agregar tarjeta</PrimaryButton>
    </div>
    <p className="body-sm" style={{ marginBottom: 24 }}>Tus datos están cifrados. Nunca guardamos el CVV.</p>

    <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16, marginBottom: 32 }}>
      {CARDS.map(c => (
        <div key={c.id} style={{ background: c.gradient, color: "#fff", borderRadius: "var(--radius-lg)", padding: 24, display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: 180, position: "relative" }}>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <AllenIcon name="credit_card" size={28} color="#fff" />
            <span style={{ font: "700 12px var(--font-sans)", letterSpacing: ".1em", opacity: .8 }}>{c.brand}</span>
          </div>
          <div>
            <div style={{ font: "600 18px var(--font-sans)", letterSpacing: ".18em", fontVariantNumeric: "tabular-nums" }}>•••• {c.last4}</div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginTop: 10, opacity: .75, font: "500 12px var(--font-sans)" }}>
              <span>Bau Andalón</span>
              <span>EXP {c.exp}</span>
            </div>
          </div>
          {c.default && (
            <span style={{ position: "absolute", top: 14, right: 14, background: "rgba(255,255,255,.18)", color: "#fff", font: "700 10px var(--font-sans)", padding: "4px 10px", borderRadius: "9999px", textTransform: "uppercase", letterSpacing: ".05em" }}>Predeterminada</span>
          )}
        </div>
      ))}
    </div>

    {/* Other payment methods */}
    <h3 className="title" style={{ marginBottom: 12 }}>Otros métodos</h3>
    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
      {[
        { name: "PayPal",          icon: "credit_card",    bg: "var(--bg-branding)" },
        { name: "Mercado Pago",    icon: "credit_card",    bg: "#FEF1C7" },
        { name: "OXXO efectivo",   icon: "shopping_basket",bg: "var(--orange-bg)" },
      ].map(m => (
        <button key={m.name} style={{ background: "var(--bg-elev-1)", border: "1px solid var(--border-soft)", borderRadius: "var(--radius-md)", padding: 16, display: "flex", alignItems: "center", gap: 12, cursor: "pointer", textAlign: "left" }}>
          <div style={{ width: 40, height: 40, borderRadius: 12, background: m.bg, display: "grid", placeItems: "center" }}>
            <AllenIcon name={m.icon} size={20} color="var(--fg-strong)" />
          </div>
          <span className="title-sm">{m.name}</span>
        </button>
      ))}
    </div>
  </div>
);

// ----- Settings -----
const SettingsTab = () => {
  const [s, setS] = useAcctState({ promos: true, orderUpd: true, push: false, sms: true, lang: "es-MX" });
  return (
    <div>
      <h1 className="display-sm" style={{ marginBottom: 8 }}>Ajustes</h1>
      <p className="body-sm" style={{ marginBottom: 24 }}>Notificaciones, idioma y preferencias de cuenta.</p>

      <div style={{ background: "var(--bg-elev-1)", border: "1px solid var(--border-soft)", borderRadius: "var(--radius-lg)", overflow: "hidden" }}>
        {[
          { key: "promos",   label: "Ofertas y promociones",     sub: "Te avisamos cuando algo de tu lista esté en oferta." },
          { key: "orderUpd", label: "Actualizaciones de pedido", sub: "Cuando tu pedido cambia de estado." },
          { key: "push",     label: "Notificaciones push",       sub: "En tu navegador o app." },
          { key: "sms",      label: "SMS",                       sub: "Para entregas y códigos de seguridad." },
        ].map((row, i, arr) => (
          <div key={row.key} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "18px 20px", borderBottom: i === arr.length - 1 ? "none" : "1px solid var(--border-soft)" }}>
            <div>
              <div className="title-sm">{row.label}</div>
              <div className="body-sm" style={{ marginTop: 2 }}>{row.sub}</div>
            </div>
            <Switch on={s[row.key]} onChange={v => setS({ ...s, [row.key]: v })} />
          </div>
        ))}
      </div>

      <div style={{ marginTop: 24, background: "var(--bg-elev-1)", border: "1px solid var(--border-soft)", borderRadius: "var(--radius-lg)", padding: 24 }}>
        <h3 className="title" style={{ marginBottom: 16 }}>Idioma y región</h3>
        <Field label="Idioma">
          <select value={s.lang} onChange={e => setS({ ...s, lang: e.target.value })}
            style={{ ...inputStyle, width: "100%", appearance: "none", backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23515259' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>\")", backgroundRepeat: "no-repeat", backgroundPosition: "right 14px center", paddingRight: 36 }}>
            <option value="es-MX">Español (México)</option>
            <option value="es-ES">Español (España)</option>
            <option value="en-US">English (US)</option>
          </select>
        </Field>
      </div>

      <div style={{ marginTop: 24, padding: 24, border: "1px solid var(--error-bg)", borderRadius: "var(--radius-lg)" }}>
        <h3 className="title" style={{ color: "var(--error)", marginBottom: 6 }}>Eliminar cuenta</h3>
        <p className="body-sm" style={{ marginBottom: 14 }}>Se borrarán tus pedidos, favoritos y direcciones. No se puede deshacer.</p>
        <button style={{ background: "transparent", color: "var(--error)", border: "1.5px solid var(--error)", padding: "10px 18px", borderRadius: "9999px", font: "700 13px var(--font-sans)", cursor: "pointer" }}>Solicitar eliminación</button>
      </div>
    </div>
  );
};

const Switch = ({ on, onChange }) => (
  <button onClick={() => onChange(!on)} style={{ width: 48, height: 28, borderRadius: 14, background: on ? "var(--primary)" : "var(--border-strong)", border: 0, cursor: "pointer", position: "relative", transition: "background var(--dur-fast)" }}>
    <span style={{ position: "absolute", top: 2, left: on ? 22 : 2, width: 24, height: 24, borderRadius: 12, background: "#fff", boxShadow: "var(--elev-1)", transition: "left var(--dur-fast) var(--ease-out-quart)" }} />
  </button>
);

const EmptyBox = ({ icon, title, sub }) => (
  <div style={{ padding: 64, textAlign: "center", background: "var(--bg-elev-1)", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-soft)" }}>
    <AllenIcon name={icon} size={48} color="var(--fg-hint)" />
    <h3 className="title-lg" style={{ marginTop: 14 }}>{title}</h3>
    <p className="body-sm" style={{ marginTop: 6 }}>{sub}</p>
  </div>
);

const outlineBtn = { background: "var(--bg-elev-1)", color: "var(--fg-strong)", border: "1px solid var(--border-strong)", padding: "8px 16px", borderRadius: "9999px", font: "600 12px var(--font-sans)", cursor: "pointer" };
const ghostBtn = { background: "transparent", color: "var(--primary)", border: 0, font: "700 13px var(--font-sans)", cursor: "pointer" };
const iconChipBtn = { width: 32, height: 32, borderRadius: 16, background: "var(--bg-elev-2)", border: 0, display: "grid", placeItems: "center", cursor: "pointer", color: "var(--fg-muted)" };

window.AccountPage = AccountPage;
// Status table reused by OrderDetail.jsx
Object.assign(window, { STATUS_LABEL });