/* Hybrid: Filosofal (alchemy nesting) × Mirror (obsidian shard) */

/* Variant A · Equilibrium — circle + square + triangle, with faceted shard at the heart */
function HybridA({ 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="20" stroke={fg} strokeWidth="1.4" />
      <rect x="16" y="18" width="32" height="32" stroke={fg} strokeWidth="1.2" opacity="0.75" />
      <path d="M32 14 L52 48 L12 48 Z" stroke={fg} strokeWidth="1.3" />
      {/* central faceted shard (mirror) */}
      <path d="M32 22 L42 34 L32 46 L22 34 Z" fill={fg} fillOpacity="0.25" stroke={fg} strokeWidth="1.2" />
      <path d="M32 22 L42 34 L32 34 Z" fill={fg} fillOpacity="0.85" />
      <path d="M32 22 L22 34 L32 34 Z" fill={fg} fillOpacity="0.55" />
      <path d="M22 34 L42 34" stroke={fg} strokeWidth="0.6" opacity="0.8" />
    </svg>
  );
}

/* Variant B · Eclipse — concentric mirror dominant, alchemy outline subtle */
function HybridB({ 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.7" opacity="0.4" />
      {/* triangle ghost */}
      <path d="M32 14 L48 44 L16 44 Z" stroke={fg} strokeWidth="0.7" opacity="0.35" />
      {/* faceted shard */}
      <path d="M32 18 L44 32 L32 46 L20 32 Z" fill={fg} fillOpacity="0.18" stroke={fg} strokeWidth="1.3" />
      <path d="M32 18 L44 32 L32 32 Z" fill={fg} fillOpacity="0.9" />
      <path d="M32 18 L20 32 L32 32 Z" fill={fg} fillOpacity="0.55" />
      <path d="M20 32 L44 32" stroke={fg} strokeWidth="0.7" opacity="0.7" />
      {/* gleam */}
      <circle cx="38" cy="22" r="1.4" fill={fg} />
    </svg>
  );
}

/* Variant C · Sigil — heavy outline, amulet feel (alchemy rosette) */
function HybridC({ 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} />
      {/* ouroboros ring */}
      <circle cx="32" cy="32" r="24" stroke={fg} strokeWidth="2" />
      <circle cx="32" cy="32" r="24" stroke={bg} strokeWidth="0.6" strokeDasharray="2 2" />
      {/* rotated square */}
      <path d="M32 12 L52 32 L32 52 L12 32 Z" stroke={fg} strokeWidth="1.4" />
      {/* triangle */}
      <path d="M32 18 L46 42 L18 42 Z" stroke={fg} strokeWidth="1.2" opacity="0.75" />
      {/* shard */}
      <path d="M32 24 L40 32 L32 42 L24 32 Z" fill={fg} fillOpacity="0.35" stroke={fg} strokeWidth="1" />
      <path d="M32 24 L40 32 L32 32 Z" fill={fg} fillOpacity="0.95" />
    </svg>
  );
}

/* Variant D · Minimal — single circle, single triangle, single shard. Cleanest. */
function HybridD({ 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="20" stroke={fg} strokeWidth="1.6" />
      <path d="M32 18 L48 44 L16 44 Z" stroke={fg} strokeWidth="1.4" fill="none" />
      <path d="M32 26 L40 38 L32 46 L24 38 Z" fill={fg} stroke={fg} strokeWidth="1" />
      <path d="M32 26 L24 38 L32 38 Z" fill={bg} fillOpacity="0.3" />
    </svg>
  );
}

/* Variant E · Halo — circle as halo, shard floating, triangle anchored as base */
function HybridE({ 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="28" r="14" stroke={fg} strokeWidth="1.6" opacity="0.85" />
      <path d="M16 50 L48 50 L40 38 L24 38 Z" stroke={fg} strokeWidth="1.3" />
      <path d="M32 18 L40 28 L32 38 L24 28 Z" fill={fg} fillOpacity="0.85" stroke={fg} strokeWidth="1" />
      <path d="M32 18 L40 28 L32 28 Z" fill={fg} />
      <path d="M32 18 L24 28 L32 28 Z" fill={fg} fillOpacity="0.55" />
    </svg>
  );
}

/* Variant F · Fracture — square and triangle break around an obsidian shard */
function HybridF({ 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} />
      {/* square fragments */}
      <path d="M14 14 L32 14 L32 22 L22 22 L22 32 L14 32 Z" stroke={fg} strokeWidth="1.4" />
      <path d="M50 50 L32 50 L32 42 L42 42 L42 32 L50 32 Z" stroke={fg} strokeWidth="1.4" />
      {/* circle arc */}
      <path d="M48 16 a20 20 0 0 1 0 32" stroke={fg} strokeWidth="1.6" />
      <path d="M16 48 a20 20 0 0 1 0 -32" stroke={fg} strokeWidth="1.6" opacity="0.6" />
      {/* central shard */}
      <path d="M32 22 L42 32 L32 42 L22 32 Z" fill={fg} fillOpacity="0.9" stroke={fg} strokeWidth="1" />
      <path d="M32 22 L22 32 L32 32 Z" fill={bg} fillOpacity="0.4" />
    </svg>
  );
}

const HYBRID_VARIANTS = [
  { id: "a", name: "A · Equilibrio", desc: "Tres formas alquímicas anidadas + shard al corazón. La más rica.", Comp: HybridA },
  { id: "b", name: "B · Eclipse", desc: "Espejo dominante, alquimia como eco. Premium, contemplativo.", Comp: HybridB },
  { id: "c", name: "C · Sigil", desc: "Amuleto, sello pesado. Mítico, esotérico.", Comp: HybridC },
  { id: "d", name: "D · Mínimo", desc: "Círculo, triángulo y shard. La versión que aguanta a 16px.", Comp: HybridD },
  { id: "e", name: "E · Halo", desc: "Halo arriba, shard en medio, triángulo como pedestal. Dinámico.", Comp: HybridE },
  { id: "f", name: "F · Fractura", desc: "Geometría rota alrededor del shard. Tensión y movimiento.", Comp: HybridF },
];

const HybridExploration = () => (
  <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 }}>Hybrid · Filosofal × Espejo de Obsidiana</div>
        <h2 style={{ fontFamily: "'Fraunces', serif", fontSize: 56, fontWeight: 400, margin: "8px 0 0", letterSpacing: "-0.03em" }}>
          Alquimia <em>+</em> reflejo.
        </h2>
        <p style={{ marginTop: 16, fontSize: 14, color: OBSIDIA.mute, maxWidth: 560, lineHeight: 1.6 }}>
          Las tres formas alquímicas (círculo, cuadrado, triángulo) que forman la Piedra Filosofal abrazan un shard de obsidiana — el espejo del que mira el negocio a sí mismo. Seis variantes para sentir el espectro: de mínimo a esotérico.
        </p>
      </div>
    </div>

    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }}>
      {HYBRID_VARIANTS.map((d, i) => (
        <div key={d.id} style={{
          background: OBSIDIA.carbon,
          borderRadius: 18,
          padding: 28,
          display: "flex", flexDirection: "column", gap: 18,
          border: "1px solid #1d1d20",
          minHeight: 360,
          position: "relative",
        }}>
          <div style={{ position: "absolute", top: 16, right: 20, fontSize: 10, color: OBSIDIA.gold, fontFamily: "'JetBrains Mono', monospace", letterSpacing: "0.2em" }}>0{i + 1}</div>

          <div style={{ display: "grid", placeItems: "center", padding: "24px 0" }}>
            <d.Comp size={120} fg={OBSIDIA.gold} bg="transparent" />
          </div>

          <div style={{ display: "flex", alignItems: "center", gap: 14, paddingTop: 12, borderTop: "1px solid rgba(247,244,239,0.08)" }}>
            <d.Comp size={36} fg={OBSIDIA.gold} bg="transparent" />
            <d.Comp size={20} fg={OBSIDIA.gold} bg="transparent" />
            <d.Comp size={12} fg={OBSIDIA.gold} bg="transparent" />
            <div style={{ flex: 1 }} />
            <d.Comp size={28} fg={OBSIDIA.surface} bg="transparent" />
          </div>

          <div>
            <div style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: OBSIDIA.gold, fontFamily: "'JetBrains Mono', monospace" }}>{d.name}</div>
            <div style={{ fontSize: 12, color: "rgba(247,244,239,0.65)", marginTop: 6, lineHeight: 1.5 }}>{d.desc}</div>
          </div>

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

    {/* application strip — show variants A and D in vertical color contexts */}
    <div style={{ marginTop: 36, background: OBSIDIA.paper, borderRadius: 18, padding: 28, border: `1px solid ${OBSIDIA.line}` }}>
      <div style={{ fontSize: 10, letterSpacing: "0.25em", textTransform: "uppercase", color: OBSIDIA.mute, marginBottom: 18, fontFamily: "'JetBrains Mono', monospace" }}>Aplicación · variante A en accents por vertical</div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12 }}>
        {Object.entries(VERTICALS).map(([k, v]) => (
          <div key={k} style={{ background: OBSIDIA.carbon, borderRadius: 14, padding: "32px 16px", display: "flex", flexDirection: "column", alignItems: "center", gap: 14 }}>
            <HybridA size={68} fg={v.accent} bg="transparent" />
            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <span style={{ fontFamily: "'Fraunces', serif", fontSize: 14, color: OBSIDIA.surface }}>obsidia</span>
              <span style={{ width: 3, height: 3, borderRadius: "50%", background: v.accent }} />
              <span style={{ fontSize: 9, letterSpacing: "0.18em", textTransform: "uppercase", color: OBSIDIA.surface, fontWeight: 600 }}>{v.name}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

Object.assign(window, {
  HybridA, HybridB, HybridC, HybridD, HybridE, HybridF,
  HYBRID_VARIANTS, HybridExploration,
});
