/* Legendary stones — 6 logo directions inspired by famous/legendary gems */

/* 01 · PIEDRA FILOSOFAL — alchemical: circle + square + triangle nested */
function MarkFilosofal({ size = 64, fg = OBSIDIA.gold, bg = OBSIDIA.carbon }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none">
      <rect width="64" height="64" rx="14" fill={bg} />
      <circle cx="32" cy="34" r="18" stroke={fg} strokeWidth="1.6" />
      <rect x="18" y="22" width="28" height="28" stroke={fg} strokeWidth="1.4" transform="rotate(0 32 36)" />
      <path d="M32 16 L48 44 L16 44 Z" stroke={fg} strokeWidth="1.4" fill="none" />
      <circle cx="32" cy="34" r="6" fill={fg} fillOpacity="0.9" />
      <circle cx="32" cy="34" r="2" fill={bg} />
    </svg>
  );
}

/* 02 · DEATHLY HALLOWS — triangle + circle + line (Harry Potter) */
function MarkHallows({ size = 64, fg = OBSIDIA.gold, bg = OBSIDIA.carbon }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none">
      <rect width="64" height="64" rx="14" fill={bg} />
      <path d="M32 12 L52 50 L12 50 Z" stroke={fg} strokeWidth="1.8" />
      <circle cx="32" cy="36" r="11" stroke={fg} strokeWidth="1.6" />
      <path d="M32 12 L32 50" stroke={fg} strokeWidth="1.8" />
      <circle cx="32" cy="36" r="2" fill={fg} />
    </svg>
  );
}

/* 03 · KOH-I-NOOR — oval cushion-cut diamond, multi-faceted crown */
function MarkKohinoor({ size = 64, fg = OBSIDIA.gold, bg = OBSIDIA.carbon }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none">
      <rect width="64" height="64" rx="14" fill={bg} />
      <ellipse cx="32" cy="34" rx="18" ry="22" stroke={fg} strokeWidth="1.5" />
      <path d="M14 30 L50 30" stroke={fg} strokeWidth="1.2" />
      <path d="M22 18 L22 30 M42 18 L42 30 M32 12 L32 30" stroke={fg} strokeWidth="1" opacity="0.8" />
      <path d="M22 18 L42 18" stroke={fg} strokeWidth="1" />
      <path d="M22 18 L32 30 L42 18" fill={fg} fillOpacity="0.35" />
      <path d="M14 30 L32 56 L50 30" stroke={fg} strokeWidth="1" opacity="0.6" />
      <path d="M22 30 L32 56 L42 30" stroke={fg} strokeWidth="0.8" opacity="0.5" />
    </svg>
  );
}

/* 04 · HOPE DIAMOND — pear/teardrop with deep brilliance */
function MarkHope({ size = 64, fg = OBSIDIA.gold, bg = OBSIDIA.carbon }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none">
      <rect width="64" height="64" rx="14" fill={bg} />
      <path d="M32 10 C44 10 50 24 50 36 C50 48 42 56 32 56 C22 56 14 48 14 36 C14 24 20 10 32 10 Z" stroke={fg} strokeWidth="1.6" />
      <path d="M32 10 L18 28 L32 36 L46 28 Z" fill={fg} fillOpacity="0.5" stroke={fg} strokeWidth="0.8" />
      <path d="M18 28 L32 56 L46 28" stroke={fg} strokeWidth="0.9" opacity="0.7" />
      <path d="M14 36 L32 36 L50 36" stroke={fg} strokeWidth="0.8" opacity="0.5" />
      <path d="M32 36 L32 56" stroke={fg} strokeWidth="0.6" opacity="0.4" />
    </svg>
  );
}

/* 05 · SILMARIL (Tolkien) — three-pointed star caged in light */
function MarkSilmaril({ size = 64, fg = OBSIDIA.gold, bg = OBSIDIA.carbon }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none">
      <rect width="64" height="64" rx="14" fill={bg} />
      <circle cx="32" cy="32" r="20" stroke={fg} strokeWidth="0.8" opacity="0.4" />
      {/* 6-pointed light burst */}
      <g stroke={fg} strokeWidth="1.2" strokeLinecap="round">
        <path d="M32 8 L32 56" />
        <path d="M11 20 L53 44" />
        <path d="M53 20 L11 44" />
      </g>
      {/* center diamond */}
      <path d="M32 22 L42 32 L32 42 L22 32 Z" fill={fg} fillOpacity="0.85" stroke={fg} strokeWidth="1" />
      <path d="M32 22 L32 42 M22 32 L42 32" stroke={bg} strokeWidth="0.6" opacity="0.7" />
    </svg>
  );
}

/* 06 · OBSIDIAN MIRROR (Aztec / John Dee scrying mirror) — concentric circle with shard inside */
function MarkMirror({ size = 64, fg = OBSIDIA.gold, bg = OBSIDIA.carbon }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none">
      <rect width="64" height="64" rx="14" fill={bg} />
      <circle cx="32" cy="32" r="22" stroke={fg} strokeWidth="1.5" />
      <circle cx="32" cy="32" r="16" stroke={fg} strokeWidth="0.8" opacity="0.5" />
      {/* faceted shard inside */}
      <path d="M32 18 L44 32 L32 46 L20 32 Z" fill={fg} fillOpacity="0.18" stroke={fg} strokeWidth="1.2" />
      <path d="M32 18 L32 46 M20 32 L44 32" stroke={fg} strokeWidth="0.7" opacity="0.6" />
      <path d="M32 18 L38 26 L32 32 Z" fill={fg} fillOpacity="0.7" />
      {/* gleam */}
      <circle cx="38" cy="22" r="1.4" fill={fg} />
    </svg>
  );
}

const STONE_DIRECTIONS = [
  { id: "filosofal", name: "Piedra Filosofal", origin: "Alquimia · Nicolás Flamel", desc: "Círculo, cuadrado y triángulo: aire, fuego y materia. Transmuta lo común en oro.", Comp: MarkFilosofal },
  { id: "hallows", name: "Reliquias de la Muerte", origin: "Harry Potter · J.K. Rowling", desc: "El símbolo del que dominó la muerte: capa, piedra, varita.", Comp: MarkHallows },
  { id: "kohinoor", name: "Koh-i-Noor", origin: "Persia · S. XIV", desc: "“Montaña de luz”. Un diamante que pasó por imperios; talla cojín multifacetada.", Comp: MarkKohinoor },
  { id: "hope", name: "Hope Diamond", origin: "Smithsonian · India", desc: "Talla pera azul oscuro, brillantez profunda. Mística y maldición.", Comp: MarkHope },
  { id: "silmaril", name: "Silmaril", origin: "Tolkien · El Silmarillion", desc: "Joyas que atrapan la luz de los Árboles. Estrella encerrada en cristal.", Comp: MarkSilmaril },
  { id: "mirror", name: "Espejo de Obsidiana", origin: "Tezcatlipoca · México prehispánico", desc: "Espejo ritual de obsidiana negra. Adivinación, dualidad, reflejo.", Comp: MarkMirror },
];

const StoneExploration = () => (
  <div style={{ width: 1400, padding: 56, background: OBSIDIA.surface, fontFamily: "'Inter', sans-serif", color: OBSIDIA.ink }}>
    <div style={{ marginBottom: 48, display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
      <div>
        <div style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: OBSIDIA.mute }}>Exploración v2 · Piedras legendarias</div>
        <h2 style={{ fontFamily: "'Fraunces', serif", fontSize: 56, fontWeight: 400, margin: "8px 0 0", letterSpacing: "-0.03em" }}>
          Seis piedras, <em>seis mitos.</em>
        </h2>
      </div>
      <p style={{ maxWidth: 380, color: OBSIDIA.mute, fontSize: 14, lineHeight: 1.6 }}>
        Cada dirección toma como semilla una piedra mítica o legendaria. La marca hereda su geometría y su historia — no su forma literal.
      </p>
    </div>

    <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 20 }}>
      {STONE_DIRECTIONS.map((d, i) => (
        <div key={d.id} style={{
          background: OBSIDIA.carbon,
          borderRadius: 20,
          padding: 36,
          display: "flex", gap: 28, alignItems: "stretch",
          border: "1px solid #1d1d20",
          minHeight: 280,
          position: "relative", overflow: "hidden",
        }}>
          {/* index */}
          <div style={{ position: "absolute", top: 20, right: 24, fontSize: 11, color: OBSIDIA.gold, fontFamily: "'JetBrains Mono', monospace", letterSpacing: "0.2em" }}>
            0{i + 1}
          </div>

          {/* mark + scale column */}
          <div style={{ display: "flex", flexDirection: "column", gap: 18, justifyContent: "space-between", borderRight: "1px solid rgba(247,244,239,0.08)", paddingRight: 28 }}>
            <d.Comp size={120} fg={OBSIDIA.gold} bg="transparent" />
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <d.Comp size={40} fg={OBSIDIA.gold} bg="transparent" />
              <d.Comp size={24} fg={OBSIDIA.gold} bg="transparent" />
              <d.Comp size={14} fg={OBSIDIA.gold} bg="transparent" />
            </div>
          </div>

          {/* content */}
          <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 12, paddingTop: 4 }}>
            <div>
              <div style={{ fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "rgba(247,244,239,0.45)", fontFamily: "'JetBrains Mono', monospace" }}>{d.origin}</div>
              <div style={{ fontFamily: "'Fraunces', serif", fontSize: 32, color: OBSIDIA.surface, marginTop: 6, letterSpacing: "-0.02em", lineHeight: 1.05 }}>{d.name}</div>
            </div>
            <p style={{ fontSize: 13, color: "rgba(247,244,239,0.65)", lineHeight: 1.55, margin: 0 }}>{d.desc}</p>

            {/* lockup preview */}
            <div style={{ marginTop: "auto", paddingTop: 18, borderTop: "1px solid rgba(247,244,239,0.08)", display: "flex", alignItems: "center", gap: 14 }}>
              <d.Comp size={36} fg={OBSIDIA.gold} bg="transparent" />
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <span style={{ fontFamily: "'Fraunces', serif", fontSize: 22, color: OBSIDIA.surface, letterSpacing: "-0.02em" }}>obsidia</span>
                <span style={{ width: 4, height: 4, borderRadius: "50%", background: OBSIDIA.gold }} />
                <span style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: OBSIDIA.surface, fontWeight: 600 }}>Wig</span>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  </div>
);

Object.assign(window, {
  MarkFilosofal, MarkHallows, MarkKohinoor, MarkHope, MarkSilmaril, MarkMirror,
  STONE_DIRECTIONS, StoneExploration,
});
