/* ============================================================
   VegaFácil — Sistema de diseño (referencia visual)
   ============================================================ */
function DesignSystemView() {
  const swatches = [
    { n: "Verde mercado", v: "#1f5c3d", role: "Principal", fg: "#fff" },
    { n: "Tomate", v: "#e15239", role: "Acciones", fg: "#fff" },
    { n: "Rojo alerta", v: "#d23b2c", role: "Margen bajo", fg: "#fff" },
    { n: "Crema", v: "#fbf7ee", role: "Fondo", fg: "#1c2620" },
    { n: "Tinta", v: "#1c2620", role: "Texto", fg: "#fff" },
    { n: "Verde suave", v: "#e7f0ea", role: "Tinte OK", fg: "#18492f" },
  ];
  return (
    <div className="page no-cart fade-enter">
      <div className="col wide" style={{ paddingTop: 18 }}>
        <h2 className="h-display" style={{ fontSize: 30, margin: "0 0 4px" }}>Sistema de diseño</h2>
        <p className="muted" style={{ margin: "0 0 22px", fontSize: 15 }}>Los componentes y tokens que sostienen PedidoFácil.</p>

        {/* Tipografía */}
        <div className="card card-pad" style={{ marginBottom: 16 }}>
          <div className="h-eyebrow" style={{ marginBottom: 12 }}>Tipografía</div>
          <div className="h-display" style={{ fontSize: 40, lineHeight: 1 }}>Pedido<em style={{ fontStyle: "normal", color: "var(--tomate)" }}>Fácil</em></div>
          <div className="muted" style={{ fontSize: 13, marginTop: 4 }}>Bricolage Grotesque · títulos</div>
          <p style={{ fontSize: 15, marginBottom: 2, marginTop: 16 }}>Outfit en cuerpo: precios mayoristas, claros y legibles a cualquier tamaño.</p>
          <div className="muted" style={{ fontSize: 13 }}>Outfit · cuerpo y datos numéricos <span className="num">$12.500</span></div>
        </div>

        {/* Colores */}
        <div className="card card-pad" style={{ marginBottom: 16 }}>
          <div className="h-eyebrow" style={{ marginBottom: 12 }}>Paleta</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(150px,1fr))", gap: 10 }}>
            {swatches.map((s) => (
              <div key={s.n} style={{ borderRadius: 12, overflow: "hidden", border: "1px solid var(--line)" }}>
                <div style={{ background: s.v, color: s.fg, height: 64, display: "flex", alignItems: "flex-end", padding: 9, fontWeight: 700, fontSize: 12 }} className="num">{s.v}</div>
                <div style={{ padding: "8px 10px" }}><b style={{ fontSize: 13.5 }}>{s.n}</b><div className="muted" style={{ fontSize: 12 }}>{s.role}</div></div>
              </div>
            ))}
          </div>
        </div>

        {/* Componentes */}
        <div className="card card-pad" style={{ marginBottom: 16 }}>
          <div className="h-eyebrow" style={{ marginBottom: 14 }}>Componentes</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10, alignItems: "center", marginBottom: 18 }}>
            <Btn variant="primary">Acción primaria</Btn>
            <Btn variant="verde">Verde</Btn>
            <Btn variant="ghost">Secundario</Btn>
            <Btn variant="soft">Suave</Btn>
          </div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10, alignItems: "center", marginBottom: 18 }}>
            <Stepper value={3} onChange={() => {}} />
            <StatusBadge status="pendiente" />
            <StatusBadge status="entregado" />
            <span className="badge badge-neg">tu precio</span>
            <MarginPill pct={32} flag={20} />
            <MarginPill pct={11} flag={20} />
          </div>
          <div className="grid-2" style={{ alignItems: "start" }}>
            <div className="prod">
              <Glyph emoji="🍅" />
              <div className="info">
                <div className="name">Tomate larga vida</div>
                <div className="unit">Caja 18 kg</div>
                <div style={{ marginTop: 4 }}><span className="price num" style={{ fontFamily: "var(--font-head)", fontWeight: 700 }}>$11.200</span></div>
              </div>
              <button className="add-btn">+</button>
            </div>
            <div className="alert danger">
              <div className="ic"><Icon name="alert" size={16} /></div>
              <div className="body"><div className="t">Margen bajo</div><div className="d">Palta Hass · 11% bajo el mínimo.</div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
window.DesignSystemView = DesignSystemView;