/* Mobile app screens — Obsidia.<vertical> */

const APP_DATA = {
  wig: {
    accent: "#0f766e",
    items: ["Peluca lace 13×4 · Castaño", "Extensiones cosidas 22\"", "Frontal HD ondulado", "Mantenimiento mensual"],
    services: [
      { name: "Instalación lace frontal", price: 2400 },
      { name: "Coloración custom", price: 1800 },
      { name: "Mantenimiento", price: 900 },
    ],
    customer: "Mariana Rivas",
    order: "Lace 13×4 · castaño chocolate",
    revenue: "48,300",
    pendientes: 7,
    citasHoy: 3,
    progressLabel: "Tejiendo lace frontal",
  },
  bake: {
    accent: "#c2185b",
    items: ["Pastel red velvet 3 leches", "Cupcakes vainilla x12", "Macarons surtidos x24", "Tarta frutos rojos"],
    services: [
      { name: "Pastel personalizado 3 leches", price: 1450 },
      { name: "Mesa de postres", price: 4200 },
      { name: "Cupcakes x24 decorados", price: 720 },
    ],
    customer: "Andrea Solís",
    order: "Pastel 3 leches · 25 personas",
    revenue: "32,150",
    pendientes: 5,
    citasHoy: 2,
    progressLabel: "Decorando con flores",
  },
  trade: {
    accent: "#1a237e",
    items: ["iPhone 14 Pro 256GB", "Funko Pop edición especial", "Reloj vintage Seiko", "PS5 Slim seminueva"],
    services: [
      { name: "iPhone 14 Pro 256GB", price: 18900 },
      { name: "Envío MX→USA", price: 850 },
      { name: "Inspección de estado", price: 200 },
    ],
    customer: "Jorge Mendoza",
    order: "iPhone 14 Pro · envío a Houston",
    revenue: "127,400",
    pendientes: 12,
    citasHoy: 0,
    progressLabel: "En tránsito a frontera",
  },
  lens: {
    accent: "#e65100",
    items: ["Sesión retrato exterior", "Boda · cobertura completa", "Producto e-commerce", "Video reel marca"],
    services: [
      { name: "Sesión retrato 2h", price: 3500 },
      { name: "Edición + 30 fotos", price: 1200 },
      { name: "Reel 60s con música", price: 2200 },
    ],
    customer: "Lorena Castaño",
    order: "Sesión retrato · parque hundido",
    revenue: "58,900",
    pendientes: 4,
    citasHoy: 2,
    progressLabel: "Editando entregables",
  },
  ink: {
    accent: "#4a148c",
    items: ["Tatuaje minimalista 5cm", "Diseño de logotipo", "Lettering custom", "Caligrafía boda"],
    services: [
      { name: "Tatuaje custom 8cm", price: 2800 },
      { name: "Diseño de logotipo", price: 4500 },
      { name: "Sesión retoque", price: 600 },
    ],
    customer: "Diego Aramburo",
    order: "Tatuaje custom · antebrazo",
    revenue: "21,800",
    pendientes: 3,
    citasHoy: 1,
    progressLabel: "Sesión 2 de 3 agendada",
  },
};

const fmt = (n) => n.toLocaleString("es-MX");

/* ============== Phone screens ============== */

function AppHeader({ vertical, title }) {
  const v = VERTICALS[vertical];
  return (
    <div style={{ padding: "8px 20px 16px", display: "flex", justifyContent: "space-between", alignItems: "center", background: OBSIDIA.carbon, color: OBSIDIA.surface }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <ObsidiaMark size={22} fg={v.accent} />
        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <span style={{ fontFamily: "'DM Sans', sans-serif", fontWeight: 600, fontSize: 18, letterSpacing: "-0.02em" }}>silix</span>
          <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 13, color: v.accent, fontWeight: 500 }}>.{v.name.toLowerCase()}</span>
        </div>
      </div>
      <div style={{ position: "relative", width: 28, height: 28, borderRadius: 8, background: "rgba(247,244,239,0.06)", display: "grid", placeItems: "center" }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={OBSIDIA.surface} strokeWidth="1.6" strokeLinecap="round"><path d="M6 8a6 6 0 1112 0c0 7 3 7 3 9H3c0-2 3-2 3-9zM10 21a2 2 0 004 0" /></svg>
        <span style={{ position: "absolute", top: 4, right: 4, width: 6, height: 6, borderRadius: "50%", background: v.accent }} />
      </div>
    </div>
  );
}

function TabBar({ vertical, active = "home" }) {
  const v = VERTICALS[vertical];
  const tabs = [
    { id: "home", label: "Inicio", icon: <path d="M3 11l9-8 9 8v10a1 1 0 01-1 1h-5v-7H9v7H4a1 1 0 01-1-1V11z" /> },
    { id: "orders", label: "Pedidos", icon: <path d="M4 6h16M4 12h16M4 18h10" /> },
    { id: "new", label: "", icon: null, primary: true },
    { id: "calendar", label: "Agenda", icon: <><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M8 3v4M16 3v4M3 11h18" /></> },
    { id: "profile", label: "Perfil", icon: <><circle cx="12" cy="8" r="4" /><path d="M4 21c1-5 5-7 8-7s7 2 8 7" /></> },
  ];
  return (
    <div style={{ height: 78, background: "#fff", borderTop: `1px solid ${OBSIDIA.line}`, display: "flex", paddingBottom: 18, position: "relative" }}>
      {tabs.map((t) => t.primary ? (
        <div key={t.id} style={{ flex: 1, display: "grid", placeItems: "center" }}>
          <div style={{
            width: 52, height: 52, borderRadius: "50%",
            background: v.accent,
            display: "grid", placeItems: "center",
            boxShadow: `0 8px 20px ${v.accent}40`,
            transform: "translateY(-12px)",
          }}>
            <svg width="22" height="22" viewBox="0 0 24 24" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" fill="none"><path d="M12 5v14M5 12h14" /></svg>
          </div>
        </div>
      ) : (
        <div key={t.id} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 4, paddingTop: 10, color: active === t.id ? v.accent : OBSIDIA.mute }}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">{t.icon}</svg>
          <span style={{ fontSize: 10, fontWeight: active === t.id ? 600 : 500 }}>{t.label}</span>
        </div>
      ))}
    </div>
  );
}

function HomeScreen({ vertical }) {
  const v = VERTICALS[vertical];
  const d = APP_DATA[vertical];
  return (
    <div style={{ width: "100%", height: "100%", display: "flex", flexDirection: "column", background: "#fafaf7", fontFamily: "'Inter', sans-serif", color: OBSIDIA.ink }}>
      <AppHeader vertical={vertical} />

      <div style={{ flex: 1, overflow: "hidden", display: "flex", flexDirection: "column" }}>
        {/* greeting */}
        <div style={{ background: OBSIDIA.carbon, color: OBSIDIA.surface, padding: "0 20px 24px" }}>
          <div style={{ fontSize: 12, color: "rgba(247,244,239,0.55)" }}>Buenos días,</div>
          <div style={{ fontFamily: "'Fraunces', serif", fontSize: 28, marginTop: 2, letterSpacing: "-0.02em" }}>{d.customer.split(" ")[0]} ✦</div>
        </div>

        {/* revenue card overlapping */}
        <div style={{ padding: "0 16px", marginTop: -16 }}>
          <div style={{ background: "#fff", borderRadius: 18, padding: 18, border: `1px solid ${OBSIDIA.line}`, boxShadow: "0 12px 28px rgba(14,14,16,0.06)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: OBSIDIA.mute }}>Este mes</span>
              <span style={{ fontSize: 11, color: v.accent, fontWeight: 600 }}>+18% ↗</span>
            </div>
            <div style={{ fontFamily: "'Fraunces', serif", fontSize: 38, fontWeight: 400, letterSpacing: "-0.03em", marginTop: 4 }}>
              ${d.revenue}<span style={{ fontSize: 18, color: OBSIDIA.mute, fontWeight: 400, marginLeft: 4 }}>MXN</span>
            </div>
            {/* mini bar chart */}
            <div style={{ display: "flex", alignItems: "flex-end", gap: 6, height: 36, marginTop: 14 }}>
              {[40, 65, 50, 80, 55, 90, 75].map((h, i) => (
                <div key={i} style={{ flex: 1, height: `${h}%`, background: i === 5 ? v.accent : `${v.accent}30`, borderRadius: 3 }} />
              ))}
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", marginTop: 6 }}>
              {["L", "M", "M", "J", "V", "S", "D"].map((d, i) => (
                <span key={i} style={{ fontSize: 9, color: OBSIDIA.mute, flex: 1, textAlign: "center" }}>{d}</span>
              ))}
            </div>
          </div>
        </div>

        {/* quick stats */}
        <div style={{ padding: "16px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
          {[
            { label: "Pedidos activos", value: d.pendientes, sub: "en proceso" },
            { label: "Citas hoy", value: d.citasHoy, sub: "siguiente · 11:30" },
          ].map((s, i) => (
            <div key={i} style={{ background: "#fff", border: `1px solid ${OBSIDIA.line}`, borderRadius: 14, padding: 14 }}>
              <div style={{ fontSize: 10, letterSpacing: "0.15em", textTransform: "uppercase", color: OBSIDIA.mute }}>{s.label}</div>
              <div style={{ fontFamily: "'Fraunces', serif", fontSize: 30, marginTop: 4, color: OBSIDIA.ink }}>{s.value}</div>
              <div style={{ fontSize: 11, color: OBSIDIA.mute, marginTop: 2 }}>{s.sub}</div>
            </div>
          ))}
        </div>

        {/* active orders */}
        <div style={{ padding: "0 16px", flex: 1, overflow: "auto" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
            <span style={{ fontSize: 13, fontWeight: 600 }}>Pedidos activos</span>
            <span style={{ fontSize: 11, color: v.accent, fontWeight: 600 }}>Ver todos</span>
          </div>
          {[
            { name: d.customer, item: d.order, status: "En proceso", color: v.accent, paid: 60 },
            { name: "Sofía Hdz.", item: d.items[1], status: "Pendiente", color: "#d97706", paid: 30 },
            { name: "Pamela R.", item: d.items[2], status: "Listo", color: "#16a34a", paid: 100 },
          ].map((o, i) => (
            <div key={i} style={{ background: "#fff", border: `1px solid ${OBSIDIA.line}`, borderRadius: 14, padding: 14, marginBottom: 8 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 600 }}>{o.name}</div>
                  <div style={{ fontSize: 11, color: OBSIDIA.mute, marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{o.item}</div>
                </div>
                <span style={{ fontSize: 9, padding: "3px 8px", borderRadius: 999, background: `${o.color}15`, color: o.color, fontWeight: 600, letterSpacing: "0.05em", textTransform: "uppercase" }}>{o.status}</span>
              </div>
              <div style={{ marginTop: 10, height: 4, background: OBSIDIA.line, borderRadius: 999, overflow: "hidden" }}>
                <div style={{ width: `${o.paid}%`, height: "100%", background: o.color, borderRadius: 999 }} />
              </div>
              <div style={{ fontSize: 10, color: OBSIDIA.mute, marginTop: 4 }}>{o.paid}% pagado</div>
            </div>
          ))}
        </div>
      </div>
      <TabBar vertical={vertical} />
    </div>
  );
}

function QuoteScreen({ vertical }) {
  const v = VERTICALS[vertical];
  const d = APP_DATA[vertical];
  const total = d.services.reduce((s, x) => s + x.price, 0);
  return (
    <div style={{ width: "100%", height: "100%", display: "flex", flexDirection: "column", background: "#fafaf7", fontFamily: "'Inter', sans-serif", color: OBSIDIA.ink }}>
      {/* header */}
      <div style={{ padding: "8px 16px 12px", display: "flex", alignItems: "center", gap: 12, background: "#fff", borderBottom: `1px solid ${OBSIDIA.line}` }}>
        <div style={{ width: 32, height: 32, borderRadius: 10, background: "#f4f1eb", display: "grid", placeItems: "center" }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={OBSIDIA.ink} strokeWidth="2" strokeLinecap="round"><path d="M15 6l-6 6 6 6" /></svg>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 10, letterSpacing: "0.15em", textTransform: "uppercase", color: OBSIDIA.mute }}>Cotización · COT-{Math.floor(Math.random() * 900 + 100)}</div>
          <div style={{ fontSize: 14, fontWeight: 600, marginTop: 2 }}>Nueva cotización</div>
        </div>
        <span style={{ fontSize: 11, padding: "5px 10px", borderRadius: 999, background: `${v.accent}15`, color: v.accent, fontWeight: 600 }}>Borrador</span>
      </div>

      <div style={{ flex: 1, overflow: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 14 }}>
        {/* customer */}
        <div style={{ background: "#fff", borderRadius: 14, padding: 14, border: `1px solid ${OBSIDIA.line}` }}>
          <div style={{ fontSize: 10, letterSpacing: "0.15em", textTransform: "uppercase", color: OBSIDIA.mute }}>Cliente</div>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 8 }}>
            <div style={{ width: 36, height: 36, borderRadius: "50%", background: `${v.accent}20`, color: v.accent, display: "grid", placeItems: "center", fontWeight: 600, fontSize: 13 }}>{d.customer.split(" ").map(s => s[0]).join("")}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 600 }}>{d.customer}</div>
              <div style={{ fontSize: 11, color: OBSIDIA.mute }}>+52 55 1842 0091</div>
            </div>
            <div style={{ width: 28, height: 28, borderRadius: 8, background: "#25d36615", display: "grid", placeItems: "center" }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="#25d366"><path d="M12 2a10 10 0 00-8.5 15.2L2 22l4.9-1.4A10 10 0 1012 2zm5.4 14.2c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .1-1.6-.1-.4-.1-.9-.3-1.5-.5-2.7-1.2-4.4-3.9-4.6-4.1-.1-.2-1-1.4-1-2.6 0-1.3.7-1.9.9-2.1.2-.3.5-.3.7-.3h.5c.2 0 .4-.1.7.5.2.6.8 2 .9 2.1.1.1.1.3 0 .5l-.3.5c-.1.1-.2.3-.1.5l.7 1c.7.9 1.5 1.4 2.1 1.7.3.1.5.1.7-.1l.7-.8c.2-.2.3-.2.6-.1l1.7.8c.3.1.4.2.5.3 0 .1 0 .8-.2 1.4z" /></svg>
            </div>
          </div>
        </div>

        {/* services */}
        <div style={{ background: "#fff", borderRadius: 14, padding: 14, border: `1px solid ${OBSIDIA.line}` }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
            <span style={{ fontSize: 10, letterSpacing: "0.15em", textTransform: "uppercase", color: OBSIDIA.mute }}>Partidas</span>
            <span style={{ fontSize: 11, color: v.accent, fontWeight: 600 }}>+ Agregar</span>
          </div>
          {d.services.map((s, i) => (
            <div key={i} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "10px 0", borderBottom: i < d.services.length - 1 ? `1px solid ${OBSIDIA.line}` : "none" }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{s.name}</div>
                <div style={{ fontSize: 10, color: OBSIDIA.mute }}>1 unidad</div>
              </div>
              <div style={{ fontSize: 13, fontWeight: 600 }}>${fmt(s.price)}</div>
            </div>
          ))}
          <div style={{ marginTop: 12, paddingTop: 12, borderTop: `1px dashed ${OBSIDIA.line}`, display: "flex", justifyContent: "space-between" }}>
            <span style={{ fontSize: 13, color: OBSIDIA.mute }}>Subtotal</span>
            <span style={{ fontSize: 13 }}>${fmt(total)}</span>
          </div>
          <div style={{ marginTop: 8, display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
            <span style={{ fontSize: 13, fontWeight: 600 }}>Total</span>
            <span style={{ fontFamily: "'Fraunces', serif", fontSize: 28, color: v.accent, letterSpacing: "-0.02em" }}>${fmt(total)}</span>
          </div>
        </div>

        {/* PDF preview chip */}
        <div style={{ background: OBSIDIA.carbon, color: OBSIDIA.surface, borderRadius: 14, padding: 14, display: "flex", gap: 12, alignItems: "center" }}>
          <div style={{ width: 40, height: 52, background: "#fff", borderRadius: 4, padding: 5, position: "relative" }}>
            <div style={{ height: 3, background: v.accent, borderRadius: 2, marginBottom: 4 }} />
            <div style={{ height: 1.5, background: "#ddd", marginBottom: 2, width: "80%" }} />
            <div style={{ height: 1.5, background: "#ddd", marginBottom: 2, width: "60%" }} />
            <div style={{ height: 1.5, background: "#ddd", marginBottom: 2, width: "70%" }} />
            <ObsidiaMark size={8} fg={v.accent} />
            <div style={{ position: "absolute", bottom: 4, right: 4, width: 4, height: 4, borderRadius: "50%", background: v.accent }} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, fontWeight: 600 }}>PDF profesional · listo</div>
            <div style={{ fontSize: 10, color: "rgba(247,244,239,0.55)" }}>Estilo elegante · con tu branding</div>
          </div>
          <span style={{ fontSize: 11, color: OBSIDIA.gold, fontWeight: 600 }}>Ver →</span>
        </div>
      </div>

      {/* CTAs */}
      <div style={{ padding: 16, background: "#fff", borderTop: `1px solid ${OBSIDIA.line}`, display: "flex", gap: 8 }}>
        <button style={{ flex: 1, background: "transparent", border: `1px solid ${OBSIDIA.line}`, padding: "12px", borderRadius: 12, fontSize: 12, fontWeight: 600, color: OBSIDIA.ink }}>
          Guardar
        </button>
        <button style={{ flex: 2, background: v.accent, color: "#fff", border: "none", padding: "12px", borderRadius: 12, fontSize: 12, fontWeight: 600, display: "flex", alignItems: "center", justifyContent: "center", gap: 6 }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 00-8.5 15.2L2 22l4.9-1.4A10 10 0 1012 2z" /></svg>
          Enviar por WhatsApp
        </button>
      </div>
    </div>
  );
}

function OrderTimeline({ vertical }) {
  const v = VERTICALS[vertical];
  const d = APP_DATA[vertical];
  const steps = [
    { label: "Pedido confirmado", date: "12 abr · 10:30", done: true },
    { label: "Anticipo recibido · $1,200", date: "12 abr · 10:34", done: true },
    { label: d.progressLabel, date: "Hoy · 09:15", done: true, current: true },
    { label: "Listo para entrega", date: "Estim. 18 abr", done: false },
    { label: "Entregado", date: "—", done: false },
  ];

  return (
    <div style={{ width: "100%", height: "100%", display: "flex", flexDirection: "column", background: "#fafaf7", fontFamily: "'Inter', sans-serif", color: OBSIDIA.ink }}>
      {/* hero */}
      <div style={{ background: OBSIDIA.carbon, color: OBSIDIA.surface, padding: "8px 16px 24px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <div style={{ width: 32, height: 32, borderRadius: 10, background: "rgba(247,244,239,0.08)", display: "grid", placeItems: "center" }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={OBSIDIA.surface} strokeWidth="2" strokeLinecap="round"><path d="M15 6l-6 6 6 6" /></svg>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 10, letterSpacing: "0.15em", textTransform: "uppercase", color: "rgba(247,244,239,0.5)" }}>Pedido · #2841</div>
            <div style={{ fontSize: 14, fontWeight: 600, marginTop: 2 }}>{d.customer}</div>
          </div>
          <span style={{ fontSize: 11, padding: "5px 10px", borderRadius: 999, background: `${v.accent}25`, color: v.accent, fontWeight: 600 }}>En proceso</span>
        </div>
        <div style={{ fontFamily: "'Fraunces', serif", fontSize: 24, marginTop: 18, letterSpacing: "-0.02em" }}>{d.order}</div>

        {/* progress bar */}
        <div style={{ marginTop: 18, display: "flex", gap: 4 }}>
          {[0, 1, 2, 3].map(i => (
            <div key={i} style={{ flex: 1, height: 4, borderRadius: 999, background: i < 3 ? v.accent : "rgba(247,244,239,0.12)" }} />
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8, fontSize: 9, color: "rgba(247,244,239,0.5)", letterSpacing: "0.05em", textTransform: "uppercase" }}>
          <span>Pendiente</span><span>En proceso</span><span>Listo</span><span>Entregado</span>
        </div>
      </div>

      {/* payment */}
      <div style={{ padding: 16 }}>
        <div style={{ background: "#fff", borderRadius: 14, padding: 14, border: `1px solid ${OBSIDIA.line}` }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
            <span style={{ fontSize: 10, letterSpacing: "0.15em", textTransform: "uppercase", color: OBSIDIA.mute }}>Saldo</span>
            <span style={{ fontSize: 11, color: v.accent, fontWeight: 600 }}>+ Registrar pago</span>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginTop: 6 }}>
            <div>
              <div style={{ fontFamily: "'Fraunces', serif", fontSize: 26, color: OBSIDIA.ink, letterSpacing: "-0.02em" }}>$1,200<span style={{ fontSize: 14, color: OBSIDIA.mute }}> / $2,400</span></div>
              <div style={{ fontSize: 10, color: OBSIDIA.mute, marginTop: 2 }}>50% pagado · resta $1,200</div>
            </div>
            <div style={{ width: 44, height: 44, borderRadius: "50%", background: `conic-gradient(${v.accent} 50%, ${OBSIDIA.line} 0)`, display: "grid", placeItems: "center" }}>
              <div style={{ width: 32, height: 32, borderRadius: "50%", background: "#fff", display: "grid", placeItems: "center", fontSize: 10, fontWeight: 700, color: v.accent }}>50%</div>
            </div>
          </div>
        </div>
      </div>

      {/* timeline */}
      <div style={{ padding: "0 16px", flex: 1, overflow: "auto" }}>
        <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 14 }}>Timeline</div>
        <div style={{ position: "relative", paddingLeft: 24 }}>
          <div style={{ position: "absolute", left: 7, top: 6, bottom: 6, width: 1.5, background: OBSIDIA.line }} />
          {steps.map((s, i) => (
            <div key={i} style={{ position: "relative", paddingBottom: 18 }}>
              <div style={{
                position: "absolute", left: -24, top: 2,
                width: 16, height: 16, borderRadius: "50%",
                background: s.current ? v.accent : (s.done ? v.accent : "#fff"),
                border: s.done ? "none" : `1.5px solid ${OBSIDIA.line}`,
                display: "grid", placeItems: "center",
                boxShadow: s.current ? `0 0 0 6px ${v.accent}20` : "none",
              }}>
                {s.done && !s.current && <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round"><path d="M5 12l5 5L20 7" /></svg>}
                {s.current && <div style={{ width: 5, height: 5, borderRadius: "50%", background: "#fff" }} />}
              </div>
              <div style={{ fontSize: 12.5, fontWeight: s.current ? 700 : 500, color: s.done ? OBSIDIA.ink : OBSIDIA.mute }}>{s.label}</div>
              <div style={{ fontSize: 10, color: OBSIDIA.mute, marginTop: 2 }}>{s.date}</div>
              {s.current && (
                <div style={{ marginTop: 8, display: "flex", gap: 6 }}>
                  {[0, 1, 2].map(j => (
                    <div key={j} style={{ flex: 1, aspectRatio: "1", borderRadius: 8, background: `linear-gradient(135deg, ${v.accent}30, ${v.accent}10)`, position: "relative", overflow: "hidden" }}>
                      <div style={{ position: "absolute", inset: 0, background: `repeating-linear-gradient(45deg, transparent 0 4px, ${v.accent}15 4px 5px)` }} />
                      <span style={{ position: "absolute", bottom: 4, right: 5, fontSize: 8, color: v.accent, fontFamily: "'JetBrains Mono', monospace" }}>foto {j + 1}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* CTA */}
      <div style={{ padding: 16, background: "#fff", borderTop: `1px solid ${OBSIDIA.line}` }}>
        <button style={{ width: "100%", background: v.accent, color: "#fff", border: "none", padding: "13px", borderRadius: 12, fontSize: 12, fontWeight: 600, display: "flex", alignItems: "center", justifyContent: "center", gap: 6 }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 00-8.5 15.2L2 22l4.9-1.4A10 10 0 1012 2z" /></svg>
          Compartir avance con cliente
        </button>
      </div>
    </div>
  );
}

function CatalogScreen({ vertical }) {
  const v = VERTICALS[vertical];
  const d = APP_DATA[vertical];
  return (
    <div style={{ width: "100%", height: "100%", display: "flex", flexDirection: "column", background: "#fafaf7", fontFamily: "'Inter', sans-serif", color: OBSIDIA.ink }}>
      {/* public header */}
      <div style={{ background: "#fff", padding: "8px 16px 18px", borderBottom: `1px solid ${OBSIDIA.line}` }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <div style={{ width: 36, height: 36, borderRadius: 10, background: `${v.accent}15`, display: "grid", placeItems: "center", color: v.accent }}>
              <VerticalGlyph kind={v.glyph} size={18} color={v.accent} />
            </div>
            <div>
              <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: "-0.01em" }}>{d.customer.split(" ")[0]} Studio</div>
              <div style={{ fontSize: 10, color: OBSIDIA.mute, letterSpacing: "0.05em" }}>obsidia.mx/{vertical}/{d.customer.split(" ")[0].toLowerCase()}</div>
            </div>
          </div>
          <div style={{ width: 30, height: 30, borderRadius: "50%", background: "#25d36615", display: "grid", placeItems: "center" }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="#25d366"><path d="M12 2a10 10 0 00-8.5 15.2L2 22l4.9-1.4A10 10 0 1012 2z" /></svg>
          </div>
        </div>
      </div>

      {/* hero banner */}
      <div style={{ padding: 14 }}>
        <div style={{
          height: 130, borderRadius: 14, padding: 16, color: "#fff",
          background: `linear-gradient(135deg, ${v.accent}, ${v.accent}cc 60%, ${OBSIDIA.carbon})`,
          position: "relative", overflow: "hidden",
        }}>
          <div style={{ position: "absolute", top: -20, right: -10, opacity: 0.18 }}>
            <ObsidiaMark size={140} fg="#fff" />
          </div>
          <div style={{ fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", opacity: 0.8 }}>Catálogo · 2026</div>
          <div style={{ fontFamily: "'Fraunces', serif", fontSize: 22, marginTop: 6, letterSpacing: "-0.02em", lineHeight: 1.1, maxWidth: 220 }}>
            Forjado para tu mejor versión
          </div>
        </div>
      </div>

      {/* filter chips */}
      <div style={{ padding: "0 14px 12px", display: "flex", gap: 8, overflowX: "auto" }}>
        {["Todo", "Top", "Nuevo", "Promo", "Custom"].map((c, i) => (
          <span key={i} style={{
            fontSize: 11, fontWeight: 600,
            padding: "6px 12px", borderRadius: 999,
            background: i === 0 ? OBSIDIA.carbon : "#fff",
            color: i === 0 ? "#fff" : OBSIDIA.ink,
            border: i === 0 ? "none" : `1px solid ${OBSIDIA.line}`,
            whiteSpace: "nowrap",
          }}>{c}</span>
        ))}
      </div>

      <div style={{ padding: "0 14px", flex: 1, overflow: "auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
        {d.items.map((it, i) => (
          <div key={i} style={{ background: "#fff", border: `1px solid ${OBSIDIA.line}`, borderRadius: 12, overflow: "hidden", display: "flex", flexDirection: "column" }}>
            <div style={{
              aspectRatio: "1", background: `linear-gradient(135deg, ${v.accent}25, ${v.accent}05)`,
              position: "relative", overflow: "hidden",
            }}>
              <div style={{ position: "absolute", inset: 0, background: `repeating-linear-gradient(45deg, transparent 0 6px, ${v.accent}10 6px 7px)` }} />
              <div style={{ position: "absolute", top: 6, left: 6, fontSize: 8, color: v.accent, fontFamily: "'JetBrains Mono', monospace", background: "#fff", padding: "2px 5px", borderRadius: 4 }}>{`foto ${i + 1}`}</div>
              {i === 0 && <div style={{ position: "absolute", top: 6, right: 6, fontSize: 8, color: "#fff", background: v.accent, padding: "2px 6px", borderRadius: 4, fontWeight: 700, letterSpacing: "0.05em" }}>TOP</div>}
            </div>
            <div style={{ padding: 10 }}>
              <div style={{ fontSize: 11.5, fontWeight: 600, lineHeight: 1.3 }}>{it}</div>
              <div style={{ fontSize: 13, fontWeight: 700, color: v.accent, marginTop: 4, fontFamily: "'Fraunces', serif" }}>${fmt(d.services[i % d.services.length].price)}</div>
            </div>
          </div>
        ))}
      </div>

      <div style={{ padding: 12, background: "#fff", borderTop: `1px solid ${OBSIDIA.line}` }}>
        <button style={{ width: "100%", background: "#25d366", color: "#fff", border: "none", padding: "12px", borderRadius: 12, fontSize: 12, fontWeight: 600, display: "flex", alignItems: "center", justifyContent: "center", gap: 6 }}>
          Pedir por WhatsApp
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { APP_DATA, HomeScreen, QuoteScreen, OrderTimeline, CatalogScreen });