/* Obsidia brand system — logos, lockups, palette */

const VERTICALS = {
  wig:   { name: "Wig",   tagline: "Pelucas, extensiones, belleza",     accent: "#0f766e", glyph: "wig" },
  bake:  { name: "Bake",  tagline: "Repostería, pasteles, panadería",   accent: "#c2185b", glyph: "bake" },
  trade: { name: "Trade", tagline: "Compra-venta de objetos",           accent: "#1a237e", glyph: "trade" },
  lens:  { name: "Lens",  tagline: "Fotografía, videografía",           accent: "#e65100", glyph: "lens" },
  ink:   { name: "Ink",   tagline: "Escritura, diseño, tattoo",         accent: "#4a148c", glyph: "ink" },
};

const OBSIDIA = {
  carbon:  "#0e0e10",
  obsidian:"#0a3d38",
  gold:    "#d4a853",
  goldHi:  "#e8c178",
  surface: "#f7f4ef",
  paper:   "#fbf9f4",
  ink:     "#22201f",
  mute:    "#7a756d",
  line:    "#e7e1d6",
};

/* ======================================================
   ObsidiaMark — the master glyph.
   A faceted obsidian shard (kite/diamond) with a
   gold inner facet split. Single SVG, parametric color.
   ====================================================== */
/* ObsidiaMark is now an alias for HybridD (the official mark, finalist).
   Defined here as a thin wrapper so order-of-script-load doesn't matter:
   if HybridD isn't loaded yet, we render a placeholder kite that matches
   the silhouette closely enough for any pre-mount measurement.            */
function ObsidiaMark({ size = 48, fg = OBSIDIA.gold, bg = "transparent" }) {
  if (typeof window !== "undefined" && window.HybridD) {
    return <window.HybridD size={size} fg={fg} bg={bg} />;
  }
  // fallback (shouldn't render at runtime — hybrid-explorations.jsx loads first)
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none" style={{ display: "block" }}>
      <circle cx="32" cy="34" r="22" stroke={fg} strokeWidth="1.4" />
      <path d="M32 14 L48 42 L16 42 Z" stroke={fg} strokeWidth="1.4" fill="none" />
      <path d="M32 22 L40 32 L32 42 L24 32 Z" fill={fg} />
    </svg>
  );
}

/* Vertical sub-glyphs — small modifier marks paired with the master */
function VerticalGlyph({ kind, size = 22, color = "currentColor" }) {
  const s = size;
  const common = { width: s, height: s, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", style: { display: "block" } };
  switch (kind) {
    case "wig":
      // wave / strand
      return (
        <svg {...common}>
          <path d="M4 8c2-3 5-3 7 0s5 3 7 0M4 14c2-3 5-3 7 0s5 3 7 0M4 20c2-3 5-3 7 0s5 3 7 0" />
        </svg>
      );
    case "bake":
      // dome / cake
      return (
        <svg {...common}>
          <path d="M4 18h16M5 18V12a7 7 0 0114 0v6M12 5V3M9 5l-1-1M15 5l1-1" />
        </svg>
      );
    case "trade":
      // bidirectional arrows
      return (
        <svg {...common}>
          <path d="M4 8h14l-3-3M20 16H6l3 3" />
        </svg>
      );
    case "lens":
      // aperture
      return (
        <svg {...common}>
          <circle cx="12" cy="12" r="8" />
          <path d="M12 4l4 7M20 12l-8 0M16 19l-4-7M8 19l4-7M4 12l8 0M8 5l4 7" />
        </svg>
      );
    case "ink":
      // pen / nib
      return (
        <svg {...common}>
          <path d="M4 20l3-1 11-11-2-2L5 17l-1 3z M14 8l2 2" />
        </svg>
      );
    default: return null;
  }
}

/* Lockup: ObsidiaMark + wordmark, optional vertical descriptor with separator */
function ObsidiaLockup({ vertical = null, size = 32, color = OBSIDIA.surface, accent = OBSIDIA.gold, layout = "horizontal", showMark = true }) {
  const v = vertical ? VERTICALS[vertical] : null;
  const wm = (
    <span style={{
      fontFamily: "'Fraunces', 'Cormorant Garamond', serif",
      fontWeight: 500,
      fontSize: size,
      letterSpacing: "-0.02em",
      color,
      lineHeight: 1,
    }}>obsidia</span>
  );
  const sep = (
    <span style={{
      width: 4, height: 4, borderRadius: "50%",
      background: accent, display: "inline-block",
      transform: "translateY(-2px)",
      flex: "none",
    }} />
  );
  const sub = v && (
    <span style={{
      fontFamily: "'Inter', system-ui, sans-serif",
      fontWeight: 500,
      fontSize: size * 0.5,
      letterSpacing: "0.18em",
      textTransform: "uppercase",
      color,
      opacity: 0.92,
      lineHeight: 1,
    }}>{v.name}</span>
  );

  if (layout === "stacked") {
    return (
      <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", gap: size * 0.35 }}>
        {showMark && <ObsidiaMark size={size * 1.6} fg={accent} />}
        <div style={{ display: "flex", alignItems: "center", gap: size * 0.35 }}>
          {wm}{v && <>{sep}{sub}</>}
        </div>
      </div>
    );
  }
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: size * 0.4 }}>
      {showMark && <ObsidiaMark size={size * 1.05} fg={accent} />}
      <div style={{ display: "flex", alignItems: "center", gap: size * 0.4 }}>
        {wm}{v && <>{sep}{sub}</>}
      </div>
    </div>
  );
}

Object.assign(window, { OBSIDIA, VERTICALS, ObsidiaMark, VerticalGlyph, ObsidiaLockup });