/* Brand system showcase artboards */

const BrandHero = () => (
  <div style={{
    width: 1200, height: 720, background: OBSIDIA.carbon, position: "relative",
    overflow: "hidden", color: OBSIDIA.surface,
    fontFamily: "'Inter', system-ui, sans-serif",
  }}>
    {/* faceted background */}
    <svg viewBox="0 0 1200 720" style={{ position: "absolute", inset: 0, opacity: 0.32 }}>
      <defs>
        <linearGradient id="bgGrad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#0a3d38" />
          <stop offset="1" stopColor="#0e0e10" />
        </linearGradient>
      </defs>
      <rect width="1200" height="720" fill="url(#bgGrad)" />
      {/* big faceted shard */}
      <g transform="translate(820 360)" opacity="0.6">
        <path d="M0 -260 L240 0 L0 320 L-240 0 Z" fill="none" stroke={OBSIDIA.gold} strokeWidth="1" opacity="0.35" />
        <path d="M0 -260 L0 320 M-240 0 L240 0" stroke={OBSIDIA.gold} strokeWidth="0.8" opacity="0.25" />
        <path d="M0 -260 L120 0 L0 320 L-120 0 Z" fill="none" stroke={OBSIDIA.gold} strokeWidth="0.8" opacity="0.25" />
        <path d="M0 -260 L60 0 L0 320 L-60 0 Z" fill="none" stroke={OBSIDIA.gold} strokeWidth="0.6" opacity="0.2" />
      </g>
    </svg>
    <div style={{ position: "absolute", inset: 0, padding: "72px 80px", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <ObsidiaLockup size={26} color={OBSIDIA.surface} />
        <div style={{ fontSize: 12, letterSpacing: "0.3em", textTransform: "uppercase", opacity: 0.6 }}>Brand System · v1</div>
      </div>
      <div>
        <div style={{ fontSize: 14, letterSpacing: "0.4em", textTransform: "uppercase", color: OBSIDIA.gold, marginBottom: 24 }}>Forjado para tu negocio</div>
        <h1 style={{
          fontFamily: "'Fraunces', serif",
          fontSize: 132, lineHeight: 0.92, fontWeight: 400, margin: 0,
          letterSpacing: "-0.04em",
        }}>
          obsidia<span style={{ color: OBSIDIA.gold }}>.</span>
        </h1>
        <p style={{ fontSize: 20, maxWidth: 620, marginTop: 28, lineHeight: 1.5, color: "rgba(247,244,239,0.7)" }}>
          Una plataforma. Cinco industrias. Las herramientas que solo tenían las grandes empresas, ahora en el bolsillo de cada negocio independiente.
        </p>
      </div>
      <div style={{ display: "flex", gap: 48, alignItems: "flex-end", justifyContent: "space-between" }}>
        <div style={{ display: "flex", gap: 32 }}>
          {Object.entries(VERTICALS).map(([k, v]) => (
            <div key={k} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
              <div style={{ width: 52, height: 52, borderRadius: 14, background: "rgba(247,244,239,0.04)", border: `1px solid ${v.accent}40`, display: "grid", placeItems: "center", color: v.accent }}>
                <VerticalGlyph kind={v.glyph} size={26} color={v.accent} />
              </div>
              <div style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", opacity: 0.7 }}>{v.name}</div>
            </div>
          ))}
        </div>
        <div style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", opacity: 0.45 }}>obsidia.mx · 2026</div>
      </div>
    </div>
  </div>
);

const BrandLogos = () => {
  const Cell = ({ children, dark, label }) => (
    <div style={{
      background: dark ? OBSIDIA.carbon : OBSIDIA.paper,
      border: `1px solid ${dark ? "#1d1d20" : OBSIDIA.line}`,
      borderRadius: 12,
      padding: 36,
      display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 28,
      minHeight: 220,
    }}>
      <div style={{ flex: 1, display: "grid", placeItems: "center" }}>{children}</div>
      <div style={{ fontSize: 10, letterSpacing: "0.25em", textTransform: "uppercase", color: dark ? "rgba(247,244,239,0.5)" : OBSIDIA.mute, fontFamily: "'JetBrains Mono', monospace" }}>{label}</div>
    </div>
  );

  return (
    <div style={{ width: 1200, padding: 56, background: OBSIDIA.surface, color: OBSIDIA.ink, fontFamily: "'Inter', system-ui, sans-serif" }}>
      <div style={{ marginBottom: 36, display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <div>
          <div style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: OBSIDIA.mute }}>01 · Marca</div>
          <h2 style={{ fontFamily: "'Fraunces', serif", fontSize: 52, fontWeight: 400, margin: "8px 0 0", letterSpacing: "-0.02em" }}>Logo & lockups</h2>
        </div>
        <div style={{ maxWidth: 340, fontSize: 14, color: OBSIDIA.mute, lineHeight: 1.5 }}>
          El glifo es una obsidiana facetada. La marca maestra siempre lidera; los verticales se anuncian con un punto de color.
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
        <Cell dark label="Master · Dark">
          <ObsidiaLockup size={36} color={OBSIDIA.surface} accent={OBSIDIA.gold} />
        </Cell>
        <Cell label="Master · Light">
          <ObsidiaLockup size={36} color={OBSIDIA.carbon} accent={OBSIDIA.gold} />
        </Cell>
        <Cell dark label="Mark only">
          <ObsidiaMark size={84} fg={OBSIDIA.gold} />
        </Cell>

        <Cell dark label="Stacked · Wig">
          <ObsidiaLockup size={28} color={OBSIDIA.surface} accent={VERTICALS.wig.accent} layout="stacked" vertical="wig" />
        </Cell>
        <Cell dark label="Stacked · Bake">
          <ObsidiaLockup size={28} color={OBSIDIA.surface} accent={VERTICALS.bake.accent} layout="stacked" vertical="bake" />
        </Cell>
        <Cell dark label="Stacked · Trade">
          <ObsidiaLockup size={28} color={OBSIDIA.surface} accent={VERTICALS.trade.accent} layout="stacked" vertical="trade" />
        </Cell>
      </div>

      <div style={{ marginTop: 16, display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 12 }}>
        {Object.entries(VERTICALS).map(([k, v]) => (
          <div key={k} style={{
            background: OBSIDIA.carbon,
            borderRadius: 12,
            padding: "20px 18px",
            display: "flex", flexDirection: "column", gap: 14,
            color: OBSIDIA.surface,
            position: "relative", overflow: "hidden",
          }}>
            <div style={{ position: "absolute", top: -20, right: -20, width: 90, height: 90, borderRadius: "50%", background: v.accent, opacity: 0.18, filter: "blur(16px)" }} />
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
              <ObsidiaMark size={28} fg={v.accent} />
              <VerticalGlyph kind={v.glyph} color={v.accent} size={20} />
            </div>
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <span style={{ fontFamily: "'DM Sans', sans-serif", fontWeight: 600, fontSize: 22, letterSpacing: "-0.02em" }}>silix</span>
                <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 14, color: v.accent, fontWeight: 500 }}>.{v.name.toLowerCase()}</span>
              </div>
              <div style={{ fontSize: 10, color: "rgba(247,244,239,0.5)", marginTop: 6, lineHeight: 1.4 }}>{v.tagline}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const BrandPalette = () => {
  const Swatch = ({ name, hex, dark }) => (
    <div style={{ borderRadius: 12, overflow: "hidden", border: `1px solid ${OBSIDIA.line}` }}>
      <div style={{ height: 120, background: hex }} />
      <div style={{ padding: "12px 14px", background: OBSIDIA.paper }}>
        <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "-0.01em", color: OBSIDIA.ink }}>{name}</div>
        <div style={{ fontSize: 10, color: OBSIDIA.mute, fontFamily: "'JetBrains Mono', monospace", marginTop: 2 }}>{hex.toUpperCase()}</div>
      </div>
    </div>
  );

  return (
    <div style={{ width: 1200, padding: 56, background: OBSIDIA.surface, fontFamily: "'Inter', system-ui, sans-serif" }}>
      <div style={{ marginBottom: 32 }}>
        <div style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: OBSIDIA.mute }}>02 · Color</div>
        <h2 style={{ fontFamily: "'Fraunces', serif", fontSize: 52, fontWeight: 400, margin: "8px 0 0", letterSpacing: "-0.02em" }}>Paleta</h2>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 14, marginBottom: 28 }}>
        <Swatch name="Carbón" hex={OBSIDIA.carbon} />
        <Swatch name="Obsidiana" hex={OBSIDIA.obsidian} />
        <Swatch name="Dorado" hex={OBSIDIA.gold} />
        <Swatch name="Superficie" hex={OBSIDIA.surface} />
        <Swatch name="Tinta" hex={OBSIDIA.ink} />
      </div>
      <div style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: OBSIDIA.mute, marginBottom: 14 }}>Accents por vertical</div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 14 }}>
        {Object.entries(VERTICALS).map(([k, v]) => (
          <Swatch key={k} name={`Obsidia · ${v.name}`} hex={v.accent} />
        ))}
      </div>
    </div>
  );
};

const BrandType = () => (
  <div style={{ width: 1200, padding: 56, background: OBSIDIA.paper, fontFamily: "'Inter', system-ui, sans-serif", color: OBSIDIA.ink }}>
    <div style={{ marginBottom: 36 }}>
      <div style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: OBSIDIA.mute }}>03 · Tipografía</div>
      <h2 style={{ fontFamily: "'Fraunces', serif", fontSize: 52, fontWeight: 400, margin: "8px 0 0", letterSpacing: "-0.02em" }}>Pareja tipográfica</h2>
    </div>
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28 }}>
      <div style={{ background: "#fff", borderRadius: 16, padding: 32, border: `1px solid ${OBSIDIA.line}` }}>
        <div style={{ fontSize: 10, letterSpacing: "0.3em", textTransform: "uppercase", color: OBSIDIA.mute, marginBottom: 18 }}>Display · Fraunces</div>
        <div style={{ fontFamily: "'Fraunces', serif", fontSize: 96, lineHeight: 1, letterSpacing: "-0.03em" }}>Aa</div>
        <div style={{ fontFamily: "'Fraunces', serif", fontSize: 28, marginTop: 18, letterSpacing: "-0.02em" }}>Forjado para tu negocio</div>
        <div style={{ marginTop: 18, fontSize: 11, color: OBSIDIA.mute, fontFamily: "'JetBrains Mono', monospace" }}>weights · 300 / 400 / 500</div>
      </div>
      <div style={{ background: "#fff", borderRadius: 16, padding: 32, border: `1px solid ${OBSIDIA.line}` }}>
        <div style={{ fontSize: 10, letterSpacing: "0.3em", textTransform: "uppercase", color: OBSIDIA.mute, marginBottom: 18 }}>UI & Body · Inter</div>
        <div style={{ fontFamily: "'Inter', sans-serif", fontSize: 96, fontWeight: 500, lineHeight: 1, letterSpacing: "-0.04em" }}>Aa</div>
        <div style={{ fontSize: 14, marginTop: 22, color: OBSIDIA.mute, lineHeight: 1.55 }}>Cotiza, da seguimiento, cobra y comparte por WhatsApp. Todo desde el celular, sin descargar nada.</div>
        <div style={{ marginTop: 18, fontSize: 11, color: OBSIDIA.mute, fontFamily: "'JetBrains Mono', monospace" }}>weights · 400 / 500 / 600</div>
      </div>
    </div>
  </div>
);

Object.assign(window, { BrandHero, BrandLogos, BrandPalette, BrandType });