// WORTH platform sweep — Screen 1: the Session-0 X-ray reveal (night stage).
// The single dark cinematic moment, floating on warm paper. Theme-invariant
// (the contrast IS the wow), so it anchors the visual-language sweep row.

function RevealBody({ heroDuration = 1300, wide = false }) {
  const DS = window.WORTHDesignSystem_70d33b;
  const { NightStage, Clause, Hl, HeroNumber, ExposureBar, Badge, Button } = DS;

  const crumbs = (
    <span style={{ display: "flex", gap: 6, alignItems: "center" }}>
      <span style={{ padding: "3px 9px", borderRadius: 999, background: "rgba(231,185,85,.12)", border: "1px solid rgba(231,185,85,.22)", color: "var(--night-gold)", fontWeight: 600 }}>Liquidity read</span>
      <span style={{ opacity: 0.5 }}>·</span>
      <span>What the number hides</span>
    </span>
  );

  return (
    <NightStage
      trail={crumbs}
      confidenceChip={<Badge role="source">Source-verified</Badge>}
      style={{ width: "100%" }}
    >
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        <div>
          <Clause>On paper, you look diversified.</Clause>
          <Clause beat>You're not.</Clause>
        </div>

        <div style={{ display: wide ? "grid" : "block", gridTemplateColumns: wide ? "auto 1fr" : undefined, gap: wide ? 28 : 0, alignItems: "end" }}>
          <HeroNumber target={2340000} duration={heroDuration} caption="Verified total" />
          {wide && (
            <p style={{ fontFamily: "var(--font-text)", fontSize: 15, lineHeight: 1.5, color: "var(--night-muted)", margin: "0 0 6px" }}>
              Only <Hl>£605,000</Hl> is reachable this month.
            </p>
          )}
        </div>

        {!wide && (
          <p style={{ fontFamily: "var(--font-text)", fontSize: 15, lineHeight: 1.5, color: "var(--night-muted)", margin: 0 }}>
            Only <Hl>£605,000</Hl> reachable this month.
          </p>
        )}

        <ExposureBar
          night
          height={16}
          topLabels={["Reachable today", "Locked 7+ years"]}
          segments={[
            { frac: 0.26, color: "linear-gradient(90deg,#4fd6a0,#3bbf8c)", glow: "rgba(79,214,160,.5)", label: "Reachable · £605k", swatch: "#4fd6a0" },
            { frac: 0.30, color: "linear-gradient(90deg,#ec8a6e,#d96b4f)", glow: "rgba(236,138,110,.45)", label: "Your employer · £702k", swatch: "#ec8a6e" },
            { frac: 0.44, color: "#5b574a", label: "Pensions & property · £1.03M", swatch: "#5b574a" },
          ]}
        />

        <div style={{ display: "flex", alignItems: "center", gap: 12, justifyContent: "space-between", flexWrap: "wrap" }}>
          <Clause beat show>Your job and your wealth are one bet.</Clause>
        </div>

        <div style={{ display: "flex", gap: 10, marginTop: 2 }}>
          <Button variant="intelligence" full={!wide}>See the exposure</Button>
          {wide && <Button variant="ghost" style={{ color: "var(--night-muted)" }}>Not now</Button>}
        </div>
      </div>
    </NightStage>
  );
}

function RevealScreen({ device = "phone", os = "ios", theme = "light" }) {
  const { Wordmark } = window.WORTHDesignSystem_70d33b;
  const kicker = (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 7 }}>
      <Wordmark size="sm" />
      <span style={{ fontFamily: "var(--font-text)", fontSize: 11, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--muted)" }}>Your X-ray</span>
    </div>
  );

  if (device === "desktop") {
    return (
      <DesktopFrame theme={theme} title="WORTH — Session 0">
        <div style={{ flex: 1, display: "grid", placeItems: "center", padding: "30px 40px", overflow: "hidden" }}>
          <div style={{ width: 720, maxWidth: "100%", display: "flex", flexDirection: "column", gap: 22 }}>
            {kicker}
            <RevealBody wide heroDuration={1500} />
          </div>
        </div>
      </DesktopFrame>
    );
  }

  if (device === "tabletL") {
    return (
      <TabletFrame os={os} orientation="landscape" theme={theme}>
        <div style={{ flex: 1, display: "grid", placeItems: "center", padding: "20px 56px", overflow: "hidden" }}>
          <div style={{ width: 680, maxWidth: "100%", display: "flex", flexDirection: "column", gap: 18 }}>
            {kicker}
            <RevealBody wide heroDuration={1400} />
          </div>
        </div>
      </TabletFrame>
    );
  }

  if (device === "tabletP") {
    return (
      <TabletFrame os={os} orientation="portrait" theme={theme}>
        <div style={{ flex: 1, display: "grid", placeItems: "center", padding: "40px 64px", overflow: "hidden" }}>
          <div style={{ width: 560, maxWidth: "100%", display: "flex", flexDirection: "column", gap: 22 }}>
            {kicker}
            <RevealBody heroDuration={1400} />
          </div>
        </div>
      </TabletFrame>
    );
  }

  // phone (iOS or Android)
  return (
    <PhoneFrame os={os} theme={theme}>
      <div style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column", justifyContent: "center", gap: 16, padding: "8px 16px 14px", overflow: "hidden" }}>
        {kicker}
        <RevealBody heroDuration={1300} />
      </div>
    </PhoneFrame>
  );
}

Object.assign(window, { RevealScreen, RevealBody });