/* Final brand guidelines — D · Mínimo as the official Obsidia mark */

const ObsidiaFinal = HybridD; // canonical alias

/* Final lockup using D · Mínimo, with optional vertical descriptor */
function FinalLockup({ vertical = null, size = 32, color = OBSIDIA.surface, accent = OBSIDIA.gold, layout = "horizontal", showMark = true, mono = false, app = false }) {
  const v = vertical ? VERTICALS[vertical] : null;
  const dotColor = v ? v.accent : accent;
  // When a vertical is given, this is the SILIX app lockup: "silix.wig"
  const wordmark = v ? "silix" : "obsidia";
  const wm = (
    <span style={{
      fontFamily: v ? "'DM Sans', sans-serif" : "'Fraunces', serif",
      fontWeight: v ? 600 : 400, fontSize: size,
      letterSpacing: "-0.025em", color, lineHeight: 1,
    }}>{wordmark}</span>
  );
  // Vertical reads as ".wig" suffix in mono — apps under the silix umbrella
  const sub = v && (
    <span style={{
      fontFamily: "'JetBrains Mono', monospace", fontWeight: 500, fontSize: size * 0.62,
      letterSpacing: "0", color: dotColor, lineHeight: 1,
    }}>.{v.name.toLowerCase()}</span>
  );
  const sep = null;
  if (layout === "stacked") {
    return (
      <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", gap: size * 0.5 }}>
        {showMark && <ObsidiaFinal size={size * 1.7} fg={mono ? color : accent} bg="transparent" />}
        <div style={{ display: "flex", alignItems: "center", gap: size * 0.35 }}>
          {wm}{sub}
        </div>
      </div>
    );
  }
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: size * 0.45 }}>
      {showMark && <ObsidiaFinal size={size * 1.15} fg={mono ? color : accent} bg="transparent" />}
      <div style={{ display: "flex", alignItems: "baseline", gap: size * 0.18 }}>
        {wm}{sub}
      </div>
    </div>
  );
}

/* ============== Brand book artboards ============== */

const FinalIntro = () => (
  <div style={{ width: 1400, height: 760, background: OBSIDIA.carbon, color: OBSIDIA.surface, fontFamily: "'Inter', sans-serif", padding: 64, position: "relative", overflow: "hidden" }}>
    {/* huge mark */}
    <div style={{ position: "absolute", right: -80, top: "50%", transform: "translateY(-50%)", opacity: 0.95 }}>
      <ObsidiaFinal size={620} fg={OBSIDIA.gold} bg="transparent" />
    </div>
    <div style={{ position: "relative", maxWidth: 620, height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
      <div>
        <div style={{ fontSize: 11, letterSpacing: "0.4em", textTransform: "uppercase", color: OBSIDIA.gold }}>Brand book · 2026</div>
        <div style={{ fontSize: 12, color: "rgba(247,244,239,0.5)", marginTop: 8, fontFamily: "'JetBrains Mono', monospace" }}>OB-01 · OFFICIAL MARK</div>
      </div>
      <div>
        <h1 style={{ fontFamily: "'Fraunces', serif", fontSize: 124, lineHeight: 0.92, fontWeight: 300, margin: 0, letterSpacing: "-0.04em" }}>
          La marca,<br /><em style={{ fontWeight: 400, color: OBSIDIA.gold }}>terminada.</em>
        </h1>
        <p style={{ fontSize: 18, lineHeight: 1.55, color: "rgba(247,244,239,0.7)", marginTop: 28, maxWidth: 480 }}>
          Tres formas anidadas: el círculo del cosmos, el triángulo de la transformación y el shard de obsidiana al corazón. Una marca para construir lo que sigue.
        </p>
      </div>
      <div style={{ display: "flex", gap: 36, paddingTop: 24, borderTop: "1px solid rgba(247,244,239,0.1)" }}>
        {[["Forma", "Geométrica · 3 capas"], ["Color", "Dorado · Carbón"], ["Mínimo", "12 px"]].map(([k, v]) => (
          <div key={k}>
            <div style={{ fontSize: 10, letterSpacing: "0.25em", textTransform: "uppercase", color: "rgba(247,244,239,0.45)" }}>{k}</div>
            <div style={{ fontSize: 14, marginTop: 6, color: OBSIDIA.surface }}>{v}</div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const FinalConstruction = () => (
  <div style={{ width: 1400, padding: 56, background: OBSIDIA.surface, fontFamily: "'Inter', sans-serif", color: OBSIDIA.ink }}>
    <div style={{ marginBottom: 36 }}>
      <div style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: OBSIDIA.mute }}>02 · Construcción</div>
      <h2 style={{ fontFamily: "'Fraunces', serif", fontSize: 48, fontWeight: 400, margin: "8px 0 0", letterSpacing: "-0.03em" }}>Geometría y respiro</h2>
    </div>

    <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr 1fr", gap: 18 }}>
      {/* Construction grid */}
      <div style={{ background: OBSIDIA.paper, borderRadius: 18, padding: 32, border: `1px solid ${OBSIDIA.line}` }}>
        <div style={{ fontSize: 10, letterSpacing: "0.25em", textTransform: "uppercase", color: OBSIDIA.mute, fontFamily: "'JetBrains Mono', monospace", marginBottom: 18 }}>Construcción · grid 8×</div>
        <div style={{ position: "relative", width: 320, height: 320, margin: "0 auto" }}>
          {/* grid */}
          <svg viewBox="0 0 320 320" style={{ position: "absolute", inset: 0 }}>
            {[...Array(9)].map((_, i) => (
              <g key={i}>
                <line x1={i * 40} y1="0" x2={i * 40} y2="320" stroke={OBSIDIA.line} strokeWidth="1" />
                <line x1="0" y1={i * 40} x2="320" y2={i * 40} stroke={OBSIDIA.line} strokeWidth="1" />
              </g>
            ))}
            {/* circle / triangle / shard guides — scaled to fit grid */}
            <circle cx="160" cy="170" r="100" stroke="#c96442" strokeWidth="1" strokeDasharray="3 3" fill="none" />
            <path d="M160 90 L240 220 L80 220 Z" stroke="#c96442" strokeWidth="1" strokeDasharray="3 3" fill="none" />
            <path d="M160 130 L200 190 L160 230 L120 190 Z" stroke="#c96442" strokeWidth="1" strokeDasharray="3 3" fill="none" />
          </svg>
          <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
            <ObsidiaFinal size={320} fg={OBSIDIA.carbon} bg="transparent" />
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 18, fontSize: 11, color: OBSIDIA.mute, fontFamily: "'JetBrains Mono', monospace" }}>
          <span>Caja · 64 × 64u</span>
          <span>Trazo · 1.6u</span>
          <span>Esquina · 14u</span>
        </div>
      </div>

      {/* Clear space */}
      <div style={{ background: OBSIDIA.paper, borderRadius: 18, padding: 32, border: `1px solid ${OBSIDIA.line}`, display: "flex", flexDirection: "column" }}>
        <div style={{ fontSize: 10, letterSpacing: "0.25em", textTransform: "uppercase", color: OBSIDIA.mute, fontFamily: "'JetBrains Mono', monospace", marginBottom: 18 }}>Espacio de seguridad</div>
        <div style={{ flex: 1, display: "grid", placeItems: "center" }}>
          <div style={{ position: "relative", padding: 36, border: `1px dashed #c96442` }}>
            <ObsidiaFinal size={120} fg={OBSIDIA.carbon} bg="transparent" />
            {/* X markers */}
            <div style={{ position: "absolute", top: 6, left: 6, fontSize: 10, color: "#c96442", fontFamily: "'JetBrains Mono', monospace" }}>x</div>
            <div style={{ position: "absolute", top: 6, right: 6, fontSize: 10, color: "#c96442", fontFamily: "'JetBrains Mono', monospace" }}>x</div>
            <div style={{ position: "absolute", bottom: 6, left: 6, fontSize: 10, color: "#c96442", fontFamily: "'JetBrains Mono', monospace" }}>x</div>
            <div style={{ position: "absolute", bottom: 6, right: 6, fontSize: 10, color: "#c96442", fontFamily: "'JetBrains Mono', monospace" }}>x</div>
          </div>
        </div>
        <div style={{ fontSize: 12, color: OBSIDIA.mute, marginTop: 18, lineHeight: 1.5 }}>
          <strong style={{ color: OBSIDIA.ink }}>x = 1/4 del alto del glifo.</strong> Ningún elemento puede invadir esta zona.
        </div>
      </div>

      {/* Min sizes */}
      <div style={{ background: OBSIDIA.paper, borderRadius: 18, padding: 32, border: `1px solid ${OBSIDIA.line}`, display: "flex", flexDirection: "column" }}>
        <div style={{ fontSize: 10, letterSpacing: "0.25em", textTransform: "uppercase", color: OBSIDIA.mute, fontFamily: "'JetBrains Mono', monospace", marginBottom: 18 }}>Tamaños mínimos</div>
        <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 18, justifyContent: "center" }}>
          {[
            { px: 48, label: "Print · uso pleno" },
            { px: 24, label: "UI · header de app" },
            { px: 16, label: "Favicon" },
            { px: 12, label: "Mínimo absoluto" },
          ].map(s => (
            <div key={s.px} style={{ display: "flex", alignItems: "center", gap: 18 }}>
              <div style={{ width: 56, display: "grid", placeItems: "center" }}>
                <ObsidiaFinal size={s.px} fg={OBSIDIA.carbon} bg="transparent" />
              </div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{s.px}px</div>
                <div style={{ fontSize: 11, color: OBSIDIA.mute }}>{s.label}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </div>
);

const FinalLockups = () => (
  <div style={{ width: 1400, padding: 56, background: OBSIDIA.paper, fontFamily: "'Inter', sans-serif", color: OBSIDIA.ink }}>
    <div style={{ marginBottom: 36 }}>
      <div style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: OBSIDIA.mute }}>03 · Lockups</div>
      <h2 style={{ fontFamily: "'Fraunces', serif", fontSize: 48, fontWeight: 400, margin: "8px 0 0", letterSpacing: "-0.03em" }}>Marca maestra y verticales</h2>
    </div>

    {/* Master lockups */}
    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginBottom: 16 }}>
      <div style={{ background: OBSIDIA.carbon, borderRadius: 14, padding: 48, display: "grid", placeItems: "center", minHeight: 180 }}>
        <FinalLockup size={36} color={OBSIDIA.surface} accent={OBSIDIA.gold} />
      </div>
      <div style={{ background: "#fff", borderRadius: 14, padding: 48, display: "grid", placeItems: "center", border: `1px solid ${OBSIDIA.line}`, minHeight: 180 }}>
        <FinalLockup size={36} color={OBSIDIA.carbon} accent={OBSIDIA.gold} />
      </div>
      <div style={{ background: OBSIDIA.gold, borderRadius: 14, padding: 48, display: "grid", placeItems: "center", minHeight: 180 }}>
        <FinalLockup size={36} color={OBSIDIA.carbon} accent={OBSIDIA.carbon} mono />
      </div>
    </div>

    {/* Vertical lockups */}
    <div style={{ fontSize: 10, letterSpacing: "0.25em", textTransform: "uppercase", color: OBSIDIA.mute, marginTop: 32, marginBottom: 14, fontFamily: "'JetBrains Mono', monospace" }}>Verticales · sub-glifo difuminado en esquina</div>
    <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12 }}>
      {Object.keys(VERTICALS).map(k => (
        <div key={k} style={{ background: OBSIDIA.carbon, borderRadius: 14, padding: "40px 20px", display: "flex", flexDirection: "column", alignItems: "center", gap: 22, position: "relative", overflow: "hidden" }}>
          <VerticalLockup MarkComp={ObsidiaFinal} vertical={k} size={84} fg={OBSIDIA.gold} bg={OBSIDIA.carbon} />
          <FinalLockup size={16} color={OBSIDIA.surface} accent={OBSIDIA.gold} vertical={k} showMark={false} />
        </div>
      ))}
    </div>

    {/* Stacked lockup */}
    <div style={{ fontSize: 10, letterSpacing: "0.25em", textTransform: "uppercase", color: OBSIDIA.mute, marginTop: 32, marginBottom: 14, fontFamily: "'JetBrains Mono', monospace" }}>Stacked · packaging y portada</div>
    <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
      <div style={{ background: OBSIDIA.carbon, borderRadius: 14, padding: 56, display: "grid", placeItems: "center", minHeight: 280 }}>
        <FinalLockup size={28} color={OBSIDIA.surface} accent={OBSIDIA.gold} layout="stacked" />
      </div>
      <div style={{ background: "#fff", borderRadius: 14, padding: 56, display: "grid", placeItems: "center", border: `1px solid ${OBSIDIA.line}`, minHeight: 280 }}>
        <FinalLockup size={28} color={OBSIDIA.carbon} accent={OBSIDIA.gold} layout="stacked" vertical="wig" />
      </div>
    </div>
  </div>
);

const FinalDoDont = () => {
  const Cell = ({ ok, label, children }) => (
    <div style={{ background: "#fff", borderRadius: 14, overflow: "hidden", border: `1px solid ${OBSIDIA.line}`, position: "relative" }}>
      <div style={{ background: OBSIDIA.carbon, height: 160, display: "grid", placeItems: "center", position: "relative" }}>
        {children}
        <div style={{
          position: "absolute", top: 12, right: 12,
          width: 22, height: 22, borderRadius: "50%",
          background: ok ? "#16a34a" : "#dc2626",
          display: "grid", placeItems: "center",
          color: "#fff", fontSize: 12, fontWeight: 700,
        }}>{ok ? "✓" : "✕"}</div>
      </div>
      <div style={{ padding: "12px 16px", fontSize: 12, color: OBSIDIA.ink }}>{label}</div>
    </div>
  );

  return (
    <div style={{ width: 1400, padding: 56, background: OBSIDIA.surface, fontFamily: "'Inter', sans-serif", color: OBSIDIA.ink }}>
      <div style={{ marginBottom: 32 }}>
        <div style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: OBSIDIA.mute }}>04 · Do & don't</div>
        <h2 style={{ fontFamily: "'Fraunces', serif", fontSize: 48, fontWeight: 400, margin: "8px 0 0", letterSpacing: "-0.03em" }}>Cómo cuidarla</h2>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
        <Cell ok label="Sobre carbón con dorado">
          <ObsidiaFinal size={92} fg={OBSIDIA.gold} bg="transparent" />
        </Cell>
        <Cell ok label="Mono blanco sobre carbón">
          <ObsidiaFinal size={92} fg={OBSIDIA.surface} bg="transparent" />
        </Cell>
        <Cell ok={false} label="No usar colores fuera del sistema">
          <ObsidiaFinal size={92} fg="#ec4899" bg="transparent" />
        </Cell>
        <Cell ok={false} label="No estirar ni distorsionar">
          <div style={{ transform: "scaleX(1.6) scaleY(0.8)" }}>
            <ObsidiaFinal size={92} fg={OBSIDIA.gold} bg="transparent" />
          </div>
        </Cell>
        <Cell ok={false} label="No agregar sombras dramáticas">
          <div style={{ filter: "drop-shadow(6px 6px 0 rgba(255,255,255,0.4))" }}>
            <ObsidiaFinal size={92} fg={OBSIDIA.gold} bg="transparent" />
          </div>
        </Cell>
        <Cell ok={false} label="No rotar el glifo">
          <div style={{ transform: "rotate(28deg)" }}>
            <ObsidiaFinal size={92} fg={OBSIDIA.gold} bg="transparent" />
          </div>
        </Cell>
        <Cell ok={false} label="No invadir el espacio de seguridad">
          <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
            <ObsidiaFinal size={70} fg={OBSIDIA.gold} bg="transparent" />
            <span style={{ fontFamily: "'Fraunces', serif", fontSize: 24, color: OBSIDIA.surface }}>obsidia</span>
          </div>
        </Cell>
        <Cell ok={false} label="No usar sobre fondos saturados">
          <div style={{ background: "#22c55e", padding: 12 }}>
            <ObsidiaFinal size={70} fg={OBSIDIA.gold} bg="transparent" />
          </div>
        </Cell>
      </div>
    </div>
  );
};

Object.assign(window, { ObsidiaFinal, FinalLockup, FinalIntro, FinalConstruction, FinalLockups, FinalDoDont });