/* ============================================================================
   Operation Outbreak — Wrapped  ·  SLIDE 3 · PERSONALITY / CHARACTER CARD
   Dynamic 2×2×2 trading card + switcher across all 8 buckets.
   ============================================================================ */

const OO_ICON_MAP = {
  "shield": "shield", "check-shield": "shield-check", "sparkle": "sparkles",
  "moon": "moon", "bolt": "zap", "heart-crack": "heart-crack",
  "biohazard": "biohazard", "skull": "skull",
};
window.OO_ICON_MAP = OO_ICON_MAP;

/* The dynamic trading card. */
function CharacterCard({ p, animKey, handle, descOverride }) {
  const grad = p.mode === "gradient" ? T.gradInfect : `linear-gradient(160deg, ${accentAlpha(p.color, 0.16)} 0%, ${accentAlpha(p.color2, 0.05)} 60%, rgba(8,9,10,0) 100%)`;
  const borderC = p.mode === "outline" ? accentAlpha(p.color, 0.55) : accentAlpha(p.color, 0.4);
  const lucideName = OO_ICON_MAP[p.icon] || "shield";
  const onGrad = p.mode === "gradient";
  const accentText = onGrad ? "#FFFFFF" : p.color;       // tagline / telemetry values
  const iconColor = onGrad ? "#FFFFFF" : p.color;        // medallion + glyph
  const labelText = onGrad ? "rgba(255,255,255,0.85)" : T.fg2;
  const footText = onGrad ? "rgba(255,255,255,0.78)" : T.fg3;
  const handleText = onGrad ? "rgba(255,255,255,0.92)" : T.fg2;

  return (
    <div className="oo-card" style={{
      position: "relative", width: "100%", maxWidth: 420, borderRadius: 26, overflow: "hidden",
      border: `1.5px solid ${borderC}`,
      background: p.mode === "gradient" ? "#160c0d" : T.panel,
      boxShadow: `0 0 0 1px ${accentAlpha(p.color, 0.12)}, 0 30px 80px -30px ${accentAlpha(p.color, 0.55)}`,
    }}>
      {/* themed wash */}
      <div style={{ position: "absolute", inset: 0, background: grad, pointerEvents: "none" }} />
      {/* corner stars */}
      <Star size={16} color={onGrad ? "rgba(255,255,255,0.6)" : accentAlpha(p.color, 0.5)} style={{ position: "absolute", top: 16, right: 16 }} />

      <div style={{ position: "relative", padding: "26px 26px 24px" }}>
        {/* telemetry header */}
        <div style={{ fontFamily: T.mono, fontSize: 10.5, fontWeight: 600, letterSpacing: "0.04em", color: labelText, lineHeight: 1.7 }}>
          CONTACT: <b style={{ color: accentText, fontWeight: 700 }}>{p.contact}</b> // INFECTION: <b style={{ color: accentText, fontWeight: 700 }}>{p.infection}</b> // COMPLIANCE: <b style={{ color: accentText, fontWeight: 700 }}>{p.compliance}</b>
        </div>

        {/* icon medallion */}
        <div style={{ display: "flex", justifyContent: "center", margin: "26px 0 22px" }}>
          <div style={{ position: "relative", width: 132, height: 132, display: "flex", alignItems: "center", justifyContent: "center" }}>
            <svg width="132" height="132" viewBox="0 0 100 100" style={{ position: "absolute", inset: 0, filter: `drop-shadow(0 0 24px ${onGrad ? "rgba(255,255,255,0.45)" : accentAlpha(p.color, 0.55)})` }}>
              <path d="M50 3 C56 31 69 44 97 50 C69 56 56 69 50 97 C44 69 31 56 3 50 C31 44 44 31 50 3 Z" fill="none" stroke={iconColor} strokeWidth="1.5" opacity="0.9" />
              <path d="M50 16 C54 35 65 46 84 50 C65 54 54 65 50 84 C46 65 35 54 16 50 C35 46 46 35 50 16 Z" fill={onGrad ? "rgba(255,255,255,0.12)" : accentAlpha(p.color, 0.1)} stroke={onGrad ? "rgba(255,255,255,0.4)" : accentAlpha(p.color, 0.4)} strokeWidth="1" />
            </svg>
            <Icon name={lucideName} size={50} color={iconColor} stroke={1.5} />
          </div>
        </div>

        {/* name + tagline */}
        <div style={{ textAlign: "center" }}>
          <div style={{ fontFamily: T.mono, fontSize: 11, fontWeight: 700, letterSpacing: "0.16em", color: accentText }}>{p.tagline.toUpperCase()}</div>
          <h2 style={{ fontFamily: T.sans, fontWeight: 300, fontSize: 42, letterSpacing: "-0.02em", color: T.fg, margin: "8px 0 0", lineHeight: 1 }}>{p.name}</h2>
        </div>

        {/* description */}
        <p style={{ fontFamily: T.sans, fontSize: 15, lineHeight: 1.58, color: onGrad ? "rgba(255,255,255,0.94)" : T.fg2, textAlign: "center", margin: "18px auto 0", maxWidth: 340, textWrap: "pretty" }}>
          {descOverride || p.desc}
        </p>

        {/* footer */}
        <div style={{ marginTop: 24, paddingTop: 18, borderTop: `1px solid ${onGrad ? "rgba(255,255,255,0.25)" : accentAlpha(p.color, 0.22)}`, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <Logo kind="globe" height={26} />
            <div style={{ fontFamily: T.mono, fontSize: 9.5, letterSpacing: "0.1em", color: footText, lineHeight: 1.4 }}>OPERATION<br />OUTBREAK</div>
          </div>
          <div style={{ fontFamily: T.mono, fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", color: handleText }}>{handle || window.OO_DATA.individual.handle}</div>
        </div>
      </div>
    </div>
  );
}
window.CharacterCard = CharacterCard;

function SlidePersonality({ active, onShare }) {
  const P = window.OO_DATA.personalities;
  const keys = Object.keys(P);
  const [sel, setSel] = useState(window.OO_DATA.currentBucket);
  const [bump, setBump] = useState(0);
  const p = P[sel];
  const play = useReveal(active);
  const isCurrent = sel === window.OO_DATA.currentBucket;

  const pick = (k) => { setSel(k); setBump((b) => b + 1); };

  return (
    <div className="oo-slide-inner">
      <div className="oo-s3-wrap">
        {/* left — heading + switcher */}
        <div className="oo-s3-left">
          <Eyebrow color={p.color}>OO PERSONALITY // CHARACTER CARD</Eyebrow>
          <h1 className="oo-title" style={{ marginTop: 14 }}>{isCurrent ? "You played as" : "Meet"}</h1>
          <p className="oo-sub" style={{ marginTop: 12, maxWidth: 440 }}>
            Every run resolves to one of eight archetypes on a Contact × Infection × Compliance matrix. {isCurrent ? "Yours is locked in." : "Preview any outcome below."}
          </p>

          <div style={{ marginTop: 26 }}>
            <div style={{ fontFamily: T.mono, fontSize: 10.5, letterSpacing: "0.14em", color: T.fg3, marginBottom: 12 }}>ALL 8 ARCHETYPES</div>
            <div className="oo-switcher">
              {keys.map((k) => {
                const it = P[k];
                const on = k === sel;
                const isYou = k === window.OO_DATA.currentBucket;
                return (
                  <button key={k} onClick={() => pick(k)} className="oo-chip" style={{
                    borderColor: on ? it.color : T.line,
                    background: on ? accentAlpha(it.color, 0.14) : "transparent",
                    color: on ? T.fg : T.fg2,
                    boxShadow: on ? `0 0 22px -6px ${accentAlpha(it.color, 0.7)}` : "none",
                  }}>
                    <span style={{ width: 8, height: 8, borderRadius: 999, background: it.mode === "gradient" ? T.coral2 : it.color, flexShrink: 0 }} />
                    <span style={{ whiteSpace: "nowrap" }}>{it.name.replace("The ", "")}</span>
                    {isYou && <span style={{ marginLeft: "auto", fontSize: 8.5, fontFamily: T.mono, fontWeight: 700, letterSpacing: "0.08em", color: it.color }}>YOU</span>}
                  </button>
                );
              })}
            </div>
          </div>

        </div>

        {/* right — the card */}
        <div className="oo-s3-right">
          <CharacterCard p={p} animKey={sel + "-" + bump} descOverride={isCurrent && p.altDesc && (window.OO_DATA.individual.downstreamInfections === 0) ? p.altDesc : undefined} />
        </div>
      </div>
    </div>
  );
}
window.SlidePersonality = SlidePersonality;