// The Trading Vault, Mentorship: shared primitives
// MediaSlot (obsidian/black-glass placeholder slab), Section wrapper, Reveal helper.

const TTV = window.TheTradingVaultDesignSystem_52d48d;

// Where every primary CTA points. Replace with the real Calendly link.
const APPLY_URL = "https://noqm30086sn.typeform.com/to/NKkksx1x";

/* ------------------------------------------------------------------ */
/* Reveal, layout pass-through. Content is ALWAYS visible at its       */
/* resting state (no opacity gating). Entrance motion is intentionally  */
/* omitted: animations/observers are throttled in embedded frames and   */
/* a frozen entrance would hide content in exports. `delay` is accepted */
/* for call-site compatibility but unused.                              */
/* ------------------------------------------------------------------ */
function Reveal({ children, delay = 0, style }) {
  if (!style) return children;
  return <div style={style}>{children}</div>;
}

/* ------------------------------------------------------------------ */
/* Section, consistent vertical rhythm + max width                    */
/* ------------------------------------------------------------------ */
function Section({ id, children, max = 1200, atmosphere = false, style, label }) {
  return (
    <section
      id={id}
      data-screen-label={label}
      className={atmosphere ? "tv-atmosphere" : undefined}
      style={{
        position: "relative",
        padding: "var(--section-pad-y) var(--section-pad-x)",
        background: atmosphere ? undefined : "var(--vault-void)",
        ...style,
      }}
    >
      <div style={{ maxWidth: max, margin: "0 auto", position: "relative", zIndex: 2 }}>
        {children}
      </div>
    </section>
  );
}

/* Section header: eyebrow + display heading + optional lede */
function SectionHead({ eyebrow, title, lede, align = "left", maxLede = 560 }) {
  const { Eyebrow } = TTV;
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: align === "center" ? "center" : "flex-start",
        textAlign: align === "center" ? "center" : "left",
        gap: 20,
      }}
    >
      <Eyebrow>{eyebrow}</Eyebrow>
      <h2
        style={{
          margin: 0,
          fontFamily: "var(--font-display)",
          fontWeight: 800,
          fontSize: "clamp(30px, 4.4vw, 50px)",
          lineHeight: 1.05,
          letterSpacing: "-0.03em",
          color: "var(--vault-ink)",
          maxWidth: 18 + "ch",
          ...(align === "center" ? { maxWidth: "none" } : null),
          textWrap: "balance",
        }}
      >
        {title}
      </h2>
      {lede && (
        <p
          style={{
            margin: 0,
            maxWidth: maxLede,
            fontFamily: "var(--font-sans)",
            fontSize: 17,
            lineHeight: 1.65,
            color: "var(--vault-ink-2)",
            textWrap: "pretty",
          }}
        >
          {lede}
        </p>
      )}
    </div>
  );
}

/* ------------------------------------------------------------------ */
/* MediaSlot, sculptural obsidian / black-glass placeholder            */
/* ------------------------------------------------------------------ */
function MediaSlot({ label, hint, kind = "image", ratio = "16 / 10", minHeight, style }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: "relative",
        aspectRatio: minHeight ? undefined : ratio,
        minHeight,
        borderRadius: "var(--radius-md)",
        overflow: "hidden",
        border: "1px solid var(--vault-line)",
        // wet obsidian: cool top sheen → deep black bottom
        background:
          "radial-gradient(120% 75% at 50% -8%, rgba(255,255,255,.085), transparent 52%)," +
          "linear-gradient(168deg, #161619 0%, #0e0e11 46%, #0a0a0c 100%)",
        boxShadow: hover
          ? "var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.06)"
          : "var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.045)",
        transition: "box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out)",
        borderColor: hover ? "var(--vault-ink-4)" : "var(--vault-line)",
        ...style,
      }}
    >
      {/* overhead beam pooling into the slab */}
      <div
        aria-hidden="true"
        style={{
          position: "absolute",
          top: "-30%",
          left: "50%",
          width: "34%",
          height: "150%",
          transform: "translateX(-50%) skewX(-7deg)",
          background:
            "linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 44%, transparent 76%)",
          filter: "blur(8px)",
          pointerEvents: "none",
        }}
      />
      {/* faint marble vein / reflection sweep */}
      <div
        aria-hidden="true"
        style={{
          position: "absolute",
          inset: 0,
          background:
            "linear-gradient(115deg, transparent 38%, rgba(255,255,255,.045) 49%, transparent 60%)",
          opacity: hover ? 0.9 : 0.55,
          transition: "opacity var(--dur-slow) var(--ease-out)",
          pointerEvents: "none",
        }}
      />
      {/* corner registration ticks */}
      {[
        { top: 14, left: 14, b: "top", s: "left" },
        { top: 14, right: 14, b: "top", s: "right" },
        { bottom: 14, left: 14, b: "bottom", s: "left" },
        { bottom: 14, right: 14, b: "bottom", s: "right" },
      ].map((c, i) => (
        <span
          key={i}
          aria-hidden="true"
          style={{
            position: "absolute",
            top: c.top,
            bottom: c.bottom,
            left: c.left,
            right: c.right,
            width: 12,
            height: 12,
            [`border${c.b === "top" ? "Top" : "Bottom"}`]: "1px solid var(--vault-ink-4)",
            [`border${c.s === "left" ? "Left" : "Right"}`]: "1px solid var(--vault-ink-4)",
            opacity: 0.5,
          }}
        />
      ))}

      {/* centered label cluster */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          gap: 14,
          padding: 24,
          textAlign: "center",
        }}
      >
        {kind === "video" && (
          <span
            aria-hidden="true"
            style={{
              width: 46,
              height: 46,
              borderRadius: "var(--radius-pill)",
              border: "1px solid var(--vault-ink-4)",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              color: "var(--vault-ink-2)",
              background: "rgba(255,255,255,.02)",
            }}
          >
            <span style={{ marginLeft: 3, borderStyle: "solid", borderWidth: "6px 0 6px 10px", borderColor: "transparent transparent transparent currentColor" }} />
          </span>
        )}
        <span
          style={{
            fontFamily: "var(--font-mono)",
            fontSize: 11.5,
            letterSpacing: "0.18em",
            textTransform: "uppercase",
            color: "var(--vault-ink-2)",
          }}
        >
          {label}
        </span>
        {hint && (
          <span
            style={{
              fontFamily: "var(--font-sans)",
              fontSize: 11,
              letterSpacing: "0.16em",
              textTransform: "uppercase",
              color: "var(--vault-ink-4)",
            }}
          >
            {hint}
          </span>
        )}
      </div>
    </div>
  );
}

/* Small uppercase tracked label */
function Kicker({ children, color = "var(--vault-ink-4)", style }) {
  return (
    <span
      style={{
        fontFamily: "var(--font-sans)",
        fontWeight: 700,
        fontSize: 10.5,
        letterSpacing: "0.22em",
        textTransform: "uppercase",
        color,
        ...style,
      }}
    >
      {children}
    </span>
  );
}

/* Hairline rule */
function Rule({ style }) {
  return <hr style={{ height: 1, border: 0, background: "var(--vault-line-soft)", margin: 0, ...style }} />;
}

Object.assign(window, { TTV, Reveal, Section, SectionHead, MediaSlot, Kicker, Rule, APPLY_URL });