/* Silix architecture board — explains the brand hierarchy:
   Obsidia (company) → Silix (the app) → silix.wig / .bake / .trade / .lens / .ink (verticals) */

const SilixArchitecture = () => (
  <div style={{ width: 1400, padding: 56, background: OBSIDIA.surface, fontFamily: "'Inter', sans-serif", color: OBSIDIA.ink }}>
    <div style={{ marginBottom: 36, display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
      <div>
        <div style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: OBSIDIA.mute }}>04 · Arquitectura de marca</div>
        <h2 style={{ fontFamily: "'Fraunces', serif", fontSize: 48, fontWeight: 400, margin: "8px 0 0", letterSpacing: "-0.03em" }}>De Obsidia a silix.wig</h2>
      </div>
      <div style={{ maxWidth: 360, fontSize: 14, color: OBSIDIA.mute, lineHeight: 1.55 }}>
        <strong style={{ color: OBSIDIA.ink }}>Obsidia</strong> es la empresa madre. <strong style={{ color: OBSIDIA.ink }}>Silix</strong> es la app — la herramienta que el cliente usa todos los días. Los sufijos <code style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 13 }}>.wig .bake .trade .lens .ink</code> son los modelos de uso por giro.
      </div>
    </div>

    {/* Three-tier diagram */}
    <div style={{ background: OBSIDIA.carbon, color: OBSIDIA.surface, borderRadius: 18, padding: "56px 48px 64px", position: "relative", overflow: "hidden" }}>
      {/* faceted decoration */}
      <svg viewBox="0 0 1400 600" style={{ position: "absolute", inset: 0, opacity: 0.18, pointerEvents: "none" }}>
        <g transform="translate(700 320)">
          <path d="M0 -240 L200 0 L0 280 L-200 0 Z" fill="none" stroke={OBSIDIA.gold} strokeWidth="0.6" />
          <path d="M0 -240 L0 280 M-200 0 L200 0" stroke={OBSIDIA.gold} strokeWidth="0.4" />
        </g>
      </svg>

      {/* Tier 1 — Obsidia */}
      <div style={{ position: "relative", textAlign: "center", marginBottom: 14 }}>
        <div style={{ fontSize: 10, letterSpacing: "0.3em", textTransform: "uppercase", color: "rgba(247,244,239,0.5)", fontFamily: "'JetBrains Mono', monospace", marginBottom: 14 }}>01 · Empresa madre</div>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 18, padding: "20px 40px", background: "rgba(247,244,239,0.04)", borderRadius: 14, border: "1px solid rgba(247,244,239,0.08)" }}>
          <ObsidiaFinal size={56} fg={OBSIDIA.gold} bg="transparent" />
          <span style={{ fontFamily: "'Fraunces', serif", fontSize: 56, letterSpacing: "-0.03em", lineHeight: 1 }}>obsidia</span>
        </div>
        <div style={{ fontSize: 13, color: "rgba(247,244,239,0.6)", marginTop: 14, maxWidth: 480, margin: "14px auto 0" }}>
          Plataforma de productos para negocios independientes. Construye, edita y operacionaliza marcas digitales.
        </div>
      </div>

      {/* Connector */}
      <div style={{ display: "flex", justifyContent: "center", padding: "18px 0" }}>
        <div style={{ width: 1, height: 36, background: `linear-gradient(${OBSIDIA.gold}, transparent)` }} />
      </div>

      {/* Tier 2 — Silix */}
      <div style={{ position: "relative", textAlign: "center", marginBottom: 14 }}>
        <div style={{ fontSize: 10, letterSpacing: "0.3em", textTransform: "uppercase", color: "rgba(247,244,239,0.5)", fontFamily: "'JetBrains Mono', monospace", marginBottom: 14 }}>02 · El producto</div>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 16, padding: "16px 32px", background: OBSIDIA.gold, color: OBSIDIA.carbon, borderRadius: 12 }}>
          <span style={{ fontFamily: "'DM Sans', sans-serif", fontWeight: 600, fontSize: 40, letterSpacing: "-0.02em", lineHeight: 1 }}>silix</span>
          <span style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", fontWeight: 600, padding: "4px 8px", background: "rgba(14,14,16,0.1)", borderRadius: 4 }}>SaaS</span>
        </div>
        <div style={{ fontSize: 13, color: "rgba(247,244,239,0.6)", marginTop: 14, maxWidth: 480, margin: "14px auto 0" }}>
          Una app, cinco caras. Cotizaciones, pedidos, cobros y catálogo — adaptada al giro del negocio.
        </div>
      </div>

      {/* Connector — fan out */}
      <div style={{ position: "relative", height: 60, marginTop: 8 }}>
        <svg viewBox="0 0 1200 60" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
          {[120, 360, 600, 840, 1080].map((x, i) => (
            <path key={i} d={`M 600 0 Q 600 30 ${x} 60`} stroke="rgba(212,168,83,0.45)" strokeWidth="1" fill="none" />
          ))}
        </svg>
      </div>

      {/* Tier 3 — verticals */}
      <div style={{ position: "relative" }}>
        <div style={{ fontSize: 10, letterSpacing: "0.3em", textTransform: "uppercase", color: "rgba(247,244,239,0.5)", fontFamily: "'JetBrains Mono', monospace", textAlign: "center", marginBottom: 18 }}>03 · Modelos de uso</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12 }}>
          {Object.entries(VERTICALS).map(([k, v]) => (
            <div key={k} style={{ background: "rgba(247,244,239,0.04)", border: "1px solid rgba(247,244,239,0.08)", borderRadius: 12, padding: "20px 18px", display: "flex", flexDirection: "column", gap: 14 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <VerticalGlyph kind={v.glyph} color={v.accent} size={22} />
                <span style={{ width: 6, height: 6, borderRadius: "50%", background: v.accent, boxShadow: `0 0 12px ${v.accent}` }} />
              </div>
              <div>
                <div style={{ display: "flex", alignItems: "baseline", gap: 4 }}>
                  <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 style={{ fontSize: 11, color: "rgba(247,244,239,0.55)", marginTop: 6, lineHeight: 1.4, minHeight: 32 }}>{v.tagline}</div>
              </div>
              <div style={{ fontSize: 9, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(247,244,239,0.4)", fontFamily: "'JetBrains Mono', monospace", paddingTop: 8, borderTop: "1px solid rgba(247,244,239,0.08)" }}>
                {k === "wig" ? "BETA" : k === "bake" ? "Q1 2026" : k === "trade" ? "Q2 2026" : "ROADMAP"}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>

    {/* Naming rules */}
    <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16 }}>
      {[
        {
          rule: "Obsidia escribe firma",
          ex: "© 2026 Obsidia",
          desc: "Pie de páginas legales, contratos, factura. Nunca lleva el sufijo.",
        },
        {
          rule: "Silix es la app",
          ex: "Descarga Silix",
          desc: "Tiendas, instalación, soporte. Sin sufijo cuando se habla del producto general.",
        },
        {
          rule: "silix.wig es el modo",
          ex: "Mariana usa silix.wig",
          desc: "Lockup completo cuando se habla del giro o vertical específico. Mono. Punto. Lowercase.",
        },
      ].map((r, i) => (
        <div key={i} style={{ background: OBSIDIA.paper, borderRadius: 14, padding: 24, border: `1px solid ${OBSIDIA.line}` }}>
          <div style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: OBSIDIA.gold, fontFamily: "'JetBrains Mono', monospace" }}>Regla 0{i + 1}</div>
          <div style={{ fontFamily: "'Fraunces', serif", fontSize: 22, marginTop: 8, letterSpacing: "-0.02em" }}>{r.rule}</div>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: OBSIDIA.ink, marginTop: 14, padding: "8px 12px", background: "#fff", borderRadius: 6, border: `1px solid ${OBSIDIA.line}` }}>
            {r.ex}
          </div>
          <div style={{ fontSize: 12, color: OBSIDIA.mute, marginTop: 12, lineHeight: 1.5 }}>{r.desc}</div>
        </div>
      ))}
    </div>

    {/* DON'T panel */}
    <div style={{ marginTop: 16, background: OBSIDIA.paper, borderRadius: 14, padding: 24, border: `1px solid ${OBSIDIA.line}` }}>
      <div style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "#c96442", fontFamily: "'JetBrains Mono', monospace", marginBottom: 14 }}>No hacer</div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
        {[
          "Obsidia Wig",
          "OBSIDIA · WIG",
          "Silix Wig",
          "silix-wig",
        ].map((bad, i) => (
          <div key={i} style={{ background: "#fff", borderRadius: 10, padding: 18, border: `1px solid ${OBSIDIA.line}`, position: "relative" }}>
            <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 18, fontWeight: 600, color: OBSIDIA.ink, textDecoration: "line-through", textDecorationColor: "#c96442", textDecorationThickness: 2 }}>
              {bad}
            </div>
            <div style={{ position: "absolute", top: 12, right: 14, color: "#c96442", fontSize: 16 }}>✕</div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

Object.assign(window, { SilixArchitecture });