/* Final candidates — refining variants C (Sigil), D (Mínimo) and F (Fractura) */

const FINALISTS = [
  { id: "c", name: "C · Sigil",    desc: "Amuleto, sello pesado. Mítico, ceremonial.",       Comp: HybridC, role: "Versión ceremonial · landing, packaging, materiales premium" },
  { id: "d", name: "D · Mínimo",   desc: "Círculo, triángulo y shard. Aguanta a 16px.",       Comp: HybridD, role: "Versión operativa · app icon, favicon, header de UI" },
  { id: "f", name: "F · Fractura", desc: "Geometría rota alrededor del shard. Tensión.",      Comp: HybridF, role: "Versión expresiva · marketing, social, momentos de marca" },
];

function FinalistCard({ f, accent = OBSIDIA.gold, bg = OBSIDIA.carbon, surface = OBSIDIA.surface }) {
  return (
    <div style={{
      background: bg,
      borderRadius: 22,
      padding: 36,
      border: "1px solid #1d1d20",
      display: "flex", flexDirection: "column", gap: 24,
      minHeight: 540,
      position: "relative", overflow: "hidden",
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <div>
          <div style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: accent, fontFamily: "'JetBrains Mono', monospace" }}>{f.name}</div>
          <div style={{ fontSize: 12, color: "rgba(247,244,239,0.6)", marginTop: 6, lineHeight: 1.5, maxWidth: 280 }}>{f.role}</div>
        </div>
      </div>

      <div style={{ display: "grid", placeItems: "center", padding: "20px 0" }}>
        <f.Comp size={160} fg={accent} bg="transparent" />
      </div>

      {/* mono / inverted strip */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
        <div style={{ background: surface, borderRadius: 10, padding: 16, display: "grid", placeItems: "center" }}>
          <f.Comp size={56} fg={OBSIDIA.carbon} bg="transparent" />
        </div>
        <div style={{ background: "rgba(247,244,239,0.04)", borderRadius: 10, padding: 16, display: "grid", placeItems: "center", border: "1px solid rgba(247,244,239,0.08)" }}>
          <f.Comp size={56} fg={surface} bg="transparent" />
        </div>
      </div>

      {/* scale */}
      <div style={{ display: "flex", alignItems: "center", gap: 14, paddingTop: 14, borderTop: "1px solid rgba(247,244,239,0.08)" }}>
        <f.Comp size={44} fg={accent} bg="transparent" />
        <f.Comp size={28} fg={accent} bg="transparent" />
        <f.Comp size={18} fg={accent} bg="transparent" />
        <f.Comp size={12} fg={accent} bg="transparent" />
        <div style={{ flex: 1, fontSize: 9, letterSpacing: "0.2em", textTransform: "uppercase", color: "rgba(247,244,239,0.4)", textAlign: "right" }}>min · 12px</div>
      </div>

      <div style={{ fontSize: 12, color: "rgba(247,244,239,0.65)", lineHeight: 1.5 }}>{f.desc}</div>
    </div>
  );
}

const FinalCandidates = () => (
  <div style={{ width: 1400, padding: 56, background: OBSIDIA.surface, fontFamily: "'Inter', sans-serif", color: OBSIDIA.ink }}>
    <div style={{ marginBottom: 40, display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
      <div>
        <div style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: OBSIDIA.mute }}>Finalistas · C, D, F</div>
        <h2 style={{ fontFamily: "'Fraunces', serif", fontSize: 56, fontWeight: 400, margin: "8px 0 0", letterSpacing: "-0.03em" }}>Tres roles, un sistema.</h2>
      </div>
      <p style={{ maxWidth: 380, color: OBSIDIA.mute, fontSize: 14, lineHeight: 1.6 }}>
        Las tres pueden coexistir como un sistema modal: una marca operativa, una ceremonial y una expresiva. O elegimos una y la depuramos al máximo.
      </p>
    </div>

    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }}>
      {FINALISTS.map(f => <FinalistCard key={f.id} f={f} />)}
    </div>

    {/* Endorsed pattern — finalist C, D, F applied to verticals */}
    <div style={{ marginTop: 36 }}>
      {FINALISTS.map(f => (
        <div key={f.id} style={{ marginBottom: 24, 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" }}>{f.name} · aplicada 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: "28px 16px", display: "flex", flexDirection: "column", alignItems: "center", gap: 14 }}>
                <f.Comp size={64} 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>

    {/* App icon row */}
    <div style={{ marginTop: 16, 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" }}>App icons iOS · finalista D (mínimo)</div>
      <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
        {Object.entries(VERTICALS).map(([k, v]) => (
          <div key={k} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
            <div style={{
              width: 100, height: 100, borderRadius: 24,
              background: `linear-gradient(135deg, ${OBSIDIA.carbon}, ${v.accent}80)`,
              padding: 14,
              boxShadow: "0 12px 28px rgba(14,14,16,0.3), inset 0 1px 0 rgba(255,255,255,0.1)",
              display: "grid", placeItems: "center",
            }}>
              <HybridD size={68} fg={OBSIDIA.gold} bg="transparent" />
            </div>
            <span style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: OBSIDIA.mute, fontWeight: 600 }}>obsidia · {v.name}</span>
          </div>
        ))}
      </div>
    </div>
  </div>
);

Object.assign(window, { FinalCandidates });