// Science hi-fi — chat + astrocartography + checkout + confirmation
const _EXT_IS_SENSEI = typeof window !== "undefined" && window.TAMASHI_VARIANT === "sensei";

// =========================================================
// Chat interface — two-panel (thread + live context)
// =========================================================
function useChatMessages(onSend) {
  const WELCOME = {
    role: "assistant",
    id: "w0",
    text: "Hi. I have your complete blueprint loaded. Ask me anything — about your chart, a decision you're navigating, or what this season holds for you.",
  };
  const [messages, setMessages] = React.useState([WELCOME]);
  const [input, setInput] = React.useState("");
  const [loading, setLoading] = React.useState(false);

  async function send(text) {
    const msg = (text || input).trim();
    if (!msg || loading) return;
    setInput("");
    const userMsg = { role: "user", id: Date.now() + "u", text: msg };
    setMessages((m) => [...m, userMsg]);
    setLoading(true);
    try {
      const result = onSend ? await onSend(msg) : null;
      const reply = result?.reply || result?.text || "I'm processing your blueprint — please try again in a moment.";
      setMessages((m) => [...m, { role: "assistant", id: Date.now() + "a", text: reply }]);
    } catch (err) {
      setMessages((m) => [...m, { role: "assistant", id: Date.now() + "e", text: "Something went wrong. Please try again." }]);
    } finally {
      setLoading(false);
    }
  }

  return { messages, input, setInput, loading, send };
}

function ChatBubble({ msg }) {
  const isUser = msg.role === "user";
  return (
    <div
      style={{
        display: "flex",
        justifyContent: isUser ? "flex-end" : "flex-start",
        marginBottom: 22,
      }}
    >
      <div
        style={{
          maxWidth: "75%",
          background: isUser ? SCI.ink : "transparent",
          color: isUser ? SCI.paper : SCI.ink,
          padding: isUser ? "14px 18px" : "4px 0",
          border: isUser ? `1px solid ${SCI.ink}` : "none",
        }}
      >
        {!isUser && (
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
            <div style={{ width: 18, height: 18, border: `1.5px solid ${SCI.ink}`, display: "grid", gridTemplateColumns: "1fr 1fr", gridTemplateRows: "1fr 1fr" }}>
              <div style={{ background: SCI.ink }} /><div /><div /><div style={{ background: SCI.ink }} />
            </div>
            <MonoLabel size={9}>Amara</MonoLabel>
          </div>
        )}
        <div style={{ fontSize: 15, lineHeight: 1.6 }}>{msg.text}</div>
      </div>
    </div>
  );
}

function SciChatDesktop({ onSend }) {
  const { messages, input, setInput, loading, send } = useChatMessages(onSend);
  const threadRef = React.useRef(null);
  React.useEffect(() => {
    if (threadRef.current) threadRef.current.scrollTop = threadRef.current.scrollHeight;
  }, [messages]);

  return (
    <div
      style={{
        width: 1400,
        background: SCI.paper,
        color: SCI.ink,
        fontFamily: SCI.body,
        border: `1px solid ${SCI.ink}`,
      }}
    >

      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1.7fr 1fr",
          minHeight: 820,
        }}
      >
        {/* Thread */}
        <div
          style={{
            borderRight: `1px solid ${SCI.ink}`,
            display: "flex",
            flexDirection: "column",
          }}
        >
          <div
            ref={threadRef}
            style={{ flex: 1, padding: "36px 48px 24px", overflowY: "auto", maxHeight: 620 }}
          >
            {messages.map((msg) => <ChatBubble key={msg.id} msg={msg} />)}
            {loading && (
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 22 }}>
                <div style={{ width: 18, height: 18, border: `1.5px solid ${SCI.ink}`, display: "grid", gridTemplateColumns: "1fr 1fr", gridTemplateRows: "1fr 1fr" }}>
                  <div style={{ background: SCI.ink }} /><div /><div /><div style={{ background: SCI.ink }} />
                </div>
                <MonoLabel size={9} style={{ animation: "sci-pulse 1.2s ease-in-out infinite" }}>Thinking…</MonoLabel>
              </div>
            )}
            {/* keep dummy div at end for scroll */}
            <div />
            {/* Assistant bubble */}
            <div style={{ marginBottom: 22 }}>
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: 10,
                  marginBottom: 10,
                }}
              >
                <div
                  style={{
                    width: 22,
                    height: 22,
                    border: `1.5px solid ${SCI.ink}`,
                    display: "grid",
                    gridTemplateColumns: "1fr 1fr",
                    gridTemplateRows: "1fr 1fr",
                  }}
                >
                  <div style={{ background: SCI.ink }} />
                  <div />
                  <div />
                  <div style={{ background: SCI.ink }} />
                </div>
                <MonoLabel>Amara · drawing from § 02 · § 04 · § 07</MonoLabel>
                <MonoLabel size={9} style={{ color: SCI.ink3 }}>
                  0.89 confidence
                </MonoLabel>
              </div>
              <div style={{ padding: "4px 2px" }}>
                <p
                  style={{
                    fontFamily: SCI.display,
                    fontSize: 26,
                    lineHeight: 1.25,
                    letterSpacing: -0.2,
                    margin: "0 0 14px",
                  }}
                >
                  Because the shape of the job is wrong for you, not the
                  content.
                </p>
                <p
                  style={{
                    fontSize: 15,
                    lineHeight: 1.65,
                    color: SCI.ink2,
                    margin: "0 0 12px",
                  }}
                >
                  Your Human Design{" "}
                  <span style={{ background: "rgba(198,90,42,0.18)" }}>
                    Projector
                  </span>{" "}
                  type and MBTI Ni-Te axis both describe someone whose energy
                  runs in pulses, not grids. The psychometric read from §02 adds
                  the missing piece — your{" "}
                  <strong>22nd-percentile neuroticism</strong> means you don't
                  feel the warning signs until you are already depleted.
                </p>
                <p
                  style={{
                    fontSize: 15,
                    lineHeight: 1.65,
                    color: SCI.ink2,
                    margin: "0 0 14px",
                  }}
                >
                  Roles that run on continuous availability (standups, hot
                  desks, Slack-native teams) extract a cost you cannot feel
                  until week six
                  <span
                    style={{
                      display: "inline-block",
                      width: 9,
                      height: 16,
                      background: SCI.ink,
                      marginLeft: 3,
                      verticalAlign: "bottom",
                    }}
                  />
                </p>
                {/* Sources */}
                <div
                  style={{
                    display: "flex",
                    gap: 8,
                    marginTop: 16,
                    flexWrap: "wrap",
                  }}
                >
                  <Pill>§ 02 · Big Five</Pill>
                  <Pill>§ 04 · Enneagram 8</Pill>
                  <Pill dark>§ 05 · HD Projector</Pill>
                  <Pill>§ 07 · Vocation</Pill>
                </div>
              </div>
            </div>
          </div>

          {/* Prompt chips + input */}
          <div style={{ borderTop: `1px solid ${SCI.ink}`, padding: "16px 48px 24px" }}>
            <div style={{ display: "flex", gap: 8, marginBottom: 14, flexWrap: "wrap" }}>
              {[
                "Suggest a work rhythm that fits",
                "What does this mean for 2026?",
                "What's my biggest blind spot?",
                "When will this ease?",
              ].map((p, i) => (
                <button
                  key={i}
                  type="button"
                  onClick={() => send(p)}
                  disabled={loading}
                  style={{
                    padding: "7px 14px",
                    border: `1px solid ${SCI.ink}`,
                    fontSize: 12,
                    fontFamily: SCI.body,
                    background: SCI.paper,
                    cursor: "pointer",
                    opacity: loading ? 0.5 : 1,
                  }}
                >
                  {p}
                </button>
              ))}
            </div>
            <div style={{ border: `1px solid ${SCI.ink}`, background: SCI.paper, display: "flex", alignItems: "stretch" }}>
              <textarea
                value={input}
                onChange={(e) => setInput(e.target.value)}
                onKeyDown={(e) => { if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) send(); }}
                placeholder="Ask about your chart…"
                rows={2}
                style={{
                  padding: "14px 18px",
                  flex: 1,
                  fontSize: 14,
                  border: "none",
                  outline: "none",
                  resize: "none",
                  background: "transparent",
                  fontFamily: SCI.body,
                  color: SCI.ink,
                  lineHeight: 1.5,
                }}
              />
              <div style={{ borderLeft: `1px solid ${SCI.ink}`, padding: "0 18px", display: "flex", alignItems: "center", gap: 10 }}>
                <MonoLabel size={9} style={{ color: SCI.ink3 }}>⌘↵</MonoLabel>
                <SciBtn primary size="sm" icon="↑" onClick={() => send()} disabled={loading}>
                  {loading ? "…" : "Send"}
                </SciBtn>
              </div>
            </div>
          </div>
        </div>

        {/* Context panel */}
        <div
          style={{
            background: SCI.tint2,
            padding: "32px 36px",
            display: "flex",
            flexDirection: "column",
            gap: 20,
            overflow: "hidden",
          }}
        >
          <div>
            <MonoLabel>§ Active context · this answer</MonoLabel>
            <div
              style={{
                fontFamily: SCI.display,
                fontSize: 26,
                lineHeight: 1.15,
                letterSpacing: -0.2,
                marginTop: 8,
              }}
            >
              What the engine read
              <br />
              to answer you<span style={{ color: SCI.orange }}>.</span>
            </div>
          </div>

          {/* radar */}
          <div
            style={{
              background: SCI.paper,
              border: `1px solid ${SCI.ink}`,
              padding: 16,
            }}
          >
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
                marginBottom: 6,
              }}
            >
              <MonoLabel size={10}>Cross-system agreement · 0.89</MonoLabel>
              <MonoLabel size={9} style={{ color: SCI.ink3 }}>
                7 / 10 instruments
              </MonoLabel>
            </div>
            <div
              style={{ aspectRatio: "1/1", maxWidth: 240, margin: "0 auto" }}
            >
              <EnneaRadar
                values={[0.42, 0.38, 0.48, 0.55, 0.62, 0.58, 0.72, 0.95, 0.61]}
              />
            </div>
          </div>

          {/* Instrument contribution list */}
          <div
            style={{ background: SCI.paper, border: `1px solid ${SCI.ink}` }}
          >
            <div
              style={{
                padding: "10px 14px",
                borderBottom: `1px solid ${SCI.ink}`,
                display: "flex",
                justifyContent: "space-between",
              }}
            >
              <MonoLabel size={9}>Instrument</MonoLabel>
              <MonoLabel size={9}>Weight</MonoLabel>
            </div>
            {[
              ["Big Five · Neuroticism", 0.92, true],
              ["HD · Projector type", 0.88, true],
              ["MBTI · Ni-Te axis", 0.81, true],
              ["Enneagram 8w7", 0.74, true],
              ["Vocation § 07", 0.68, true],
              ["Astrology · 6H Saturn", 0.52, false],
              ["Numerology · LP 7", 0.41, false],
              ["I Ching · hex 39", 0.22, false],
            ].map(([l, w, active], i) => (
              <div
                key={i}
                style={{
                  display: "grid",
                  gridTemplateColumns: "1fr 80px 40px",
                  gap: 10,
                  padding: "8px 14px",
                  borderBottom: i < 7 ? `1px solid ${SCI.tint}` : "none",
                  alignItems: "center",
                  opacity: active ? 1 : 0.5,
                }}
              >
                <span style={{ fontSize: 12 }}>{l}</span>
                <div
                  style={{
                    height: 5,
                    background: SCI.tint,
                    position: "relative",
                  }}
                >
                  <div
                    style={{
                      position: "absolute",
                      inset: 0,
                      right: "auto",
                      width: `${w * 100}%`,
                      background: active ? SCI.orange : SCI.ink3,
                    }}
                  />
                </div>
                <span
                  style={{
                    fontFamily: SCI.mono,
                    fontSize: 10,
                    textAlign: "right",
                  }}
                >
                  {w.toFixed(2)}
                </span>
              </div>
            ))}
          </div>

          <div style={{ fontSize: 12, lineHeight: 1.5, color: SCI.ink2 }}>
            Five instruments cleared the 0.6 weight threshold to enter the
            answer. You can see the full calculation in{" "}
            <span style={{ textDecoration: "underline" }}>
              methodology → conversational read
            </span>
            .
          </div>
        </div>
      </div>
    </div>
  );
}

function SciChatMobile({ onSend: onSendProp }) {
  const { messages, input, setInput, loading, send } = useChatMessages(onSendProp);
  const threadRef = React.useRef(null);
  React.useEffect(() => {
    if (threadRef.current) threadRef.current.scrollTop = threadRef.current.scrollHeight;
  }, [messages]);

  return (
    <div
      style={{
        width: 390,
        background: SCI.paper,
        color: SCI.ink,
        fontFamily: SCI.body,
        border: `1px solid ${SCI.ink}`,
        display: "flex",
        flexDirection: "column",
        height: 680,
      }}
    >
      {/* Thread */}
      <div ref={threadRef} style={{ flex: 1, overflowY: "auto", padding: "20px" }}>
        {messages.map((msg) => (
          <ChatBubble key={msg.id} msg={msg} />
        ))}
        {loading && (
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 18 }}>
            <MonoLabel size={9} style={{ color: SCI.ink3 }}>Thinking…</MonoLabel>
          </div>
        )}
      </div>

      {/* Input area */}
      <div style={{ borderTop: `1px solid ${SCI.ink}`, padding: "14px 20px", flexShrink: 0 }}>
        <div style={{ display: "flex", gap: 6, marginBottom: 10, overflow: "hidden" }}>
          {["Suggest work rhythm", "2026?", "Partner"].map((p, i) => (
            <button
              key={i}
              onClick={() => send(p)}
              style={{
                padding: "6px 10px",
                border: `1px solid ${SCI.ink}`,
                fontSize: 11,
                whiteSpace: "nowrap",
                background: "transparent",
                color: SCI.ink,
                cursor: "pointer",
                fontFamily: SCI.mono,
              }}
            >
              {p}
            </button>
          ))}
        </div>
        <div style={{ border: `1px solid ${SCI.ink}`, display: "flex", alignItems: "stretch" }}>
          <textarea
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyDown={(e) => {
              if ((e.metaKey || e.ctrlKey) && e.key === "Enter") { e.preventDefault(); send(); }
            }}
            placeholder="Ask your chart…"
            rows={1}
            style={{
              padding: "12px 14px",
              flex: 1,
              fontSize: 13,
              color: SCI.ink,
              background: "transparent",
              border: "none",
              outline: "none",
              fontFamily: SCI.body,
              resize: "none",
            }}
          />
          <div style={{ borderLeft: `1px solid ${SCI.ink}`, padding: "0 12px", display: "flex", alignItems: "center" }}>
            <SciBtn primary size="sm" icon="↑" onClick={() => send()} disabled={loading}>
              {loading ? "…" : "Send"}
            </SciBtn>
          </div>
        </div>
      </div>
    </div>
  );
}

// =========================================================
// Astrocartography
// =========================================================
function SciMapDesktop() {
  return (
    <div
      style={{
        width: 1400,
        background: SCI.paper,
        color: SCI.ink,
        fontFamily: SCI.body,
        border: `1px solid ${SCI.ink}`,
      }}
    >
      {/* Meta strip */}
      <div
        style={{
          padding: "10px 28px",
          fontFamily: SCI.mono,
          fontSize: 10,
          color: SCI.ink2,
          borderBottom: `1px solid ${SCI.tint}`,
          display: "flex",
          justifyContent: "space-between",
        }}
      >
        <span>FIG. 08 · EQUIRECTANGULAR · PLATE CARRÉE</span>
        <span>PROJECTED FROM 40.68° N · 73.94° W @ 14:32 UTC−5</span>
        <span>10 PLANETARY LINES · 12 PARANS</span>
      </div>

      {/* Map */}
      <div
        style={{
          borderBottom: `1px solid ${SCI.ink}`,
          padding: 24,
          background: SCI.tint2,
        }}
      >
        <div
          style={{
            background: SCI.paper,
            border: `1px solid ${SCI.ink}`,
            padding: 0,
            position: "relative",
          }}
        >
          <svg
            viewBox="0 0 1400 560"
            style={{ width: "100%", height: "auto", display: "block" }}
          >
            {/* graticule */}
            {Array.from({ length: 15 }).map((_, i) => (
              <line
                key={"v" + i}
                x1={i * 100}
                y1="0"
                x2={i * 100}
                y2="560"
                stroke={SCI.tint}
                strokeWidth="0.6"
              />
            ))}
            {Array.from({ length: 7 }).map((_, i) => (
              <line
                key={"h" + i}
                x1="0"
                y1={i * 93}
                x2="1400"
                y2={i * 93}
                stroke={SCI.tint}
                strokeWidth="0.6"
              />
            ))}
            {/* equator / tropics emphasized */}
            <line
              x1="0"
              y1="280"
              x2="1400"
              y2="280"
              stroke={SCI.ink3}
              strokeWidth="0.8"
            />
            <line
              x1="0"
              y1="180"
              x2="1400"
              y2="180"
              stroke={SCI.ink3}
              strokeWidth="0.4"
              strokeDasharray="3 3"
            />
            <line
              x1="0"
              y1="380"
              x2="1400"
              y2="380"
              stroke={SCI.ink3}
              strokeWidth="0.4"
              strokeDasharray="3 3"
            />

            {/* continents */}
            <g fill={SCI.ink} opacity="0.88">
              <path d="M110,170 Q140,130 220,120 L320,140 L380,200 L360,280 L300,340 L210,350 L150,310 L100,240 Z" />
              <path d="M340,400 L390,360 L460,380 L450,500 L400,540 L360,500 L330,440 Z" />
              <path d="M540,120 L640,100 L740,110 L820,140 L840,220 L820,290 L740,340 L680,310 L580,280 L550,220 Z" />
              <path d="M700,360 L770,340 L830,380 L820,460 L760,490 L710,460 L690,400 Z" />
              <path d="M870,170 L1020,140 L1140,170 L1200,220 L1200,280 L1140,330 L1040,340 L950,320 L880,270 Z" />
              <path d="M1060,400 L1130,380 L1180,420 L1160,480 L1100,500 L1060,450 Z" />
              <path d="M1240,120 Q1280,100 1340,110 L1370,160 L1340,220 L1290,240 L1240,200 Z" />
            </g>

            {/* planetary lines — curvy */}
            <g strokeWidth="1.6" fill="none">
              <path
                data-sci-motion="1"
                d="M180,0 Q200,140 160,280 Q120,420 190,560"
                stroke={SCI.orange}
                style={{ animation: "sci-dash 2.6s linear infinite" }}
              />
              <path
                data-sci-motion="1"
                d="M420,0 Q440,140 430,280 Q420,420 450,560"
                stroke={SCI.forest}
                style={{ animation: "sci-dash 2.8s linear infinite" }}
              />
              <path
                data-sci-motion="1"
                d="M620,0 Q640,140 680,280 Q720,420 690,560"
                stroke={SCI.ink}
                style={{ animation: "sci-dash 3s linear infinite" }}
              />
              <path
                data-sci-motion="1"
                d="M880,0 Q860,140 900,280 Q940,420 910,560"
                stroke={SCI.orange}
                strokeDasharray="4 3"
                style={{ animation: "sci-dash 2.5s linear infinite" }}
              />
              <path
                data-sci-motion="1"
                d="M1100,0 Q1080,140 1120,280 Q1160,420 1130,560"
                stroke={SCI.ink}
                strokeDasharray="2 2"
                style={{ animation: "sci-dash 2.3s linear infinite" }}
              />
              <path
                data-sci-motion="1"
                d="M0,180 Q400,130 800,180 Q1100,220 1400,170"
                stroke={SCI.sand}
                style={{ animation: "sci-dash 3.3s linear infinite" }}
              />
              <path
                data-sci-motion="1"
                d="M0,340 Q400,380 800,340 Q1100,310 1400,360"
                stroke={SCI.orange}
                strokeDasharray="6 4"
                style={{ animation: "sci-dash 2.1s linear infinite" }}
              />
            </g>

            {/* Line labels */}
            <g fontFamily={SCI.mono} fontSize="10" fill={SCI.ink}>
              <text x="150" y="12">
                ☉ MC
              </text>
              <text x="400" y="12" fill={SCI.forest}>
                ♃ MC
              </text>
              <text x="660" y="12">
                ♄ AC
              </text>
              <text x="870" y="12" fill={SCI.orange}>
                ♀ IC
              </text>
              <text x="1080" y="12">
                ☿ DC
              </text>
            </g>

            {/* City pins */}
            {[
              [172, 236, "Brooklyn", "home"],
              [596, 206, "Lisbon", "career"],
              [760, 262, "Marrakech", "love"],
              [966, 208, "Jaipur", "spiritual"],
              [880, 406, "Cape Town", "challenge"],
              [1190, 276, "Kyoto", "spiritual"],
            ].map(([x, y, n, k], i) => (
              <g key={i}>
                <circle
                  data-sci-motion="1"
                  cx={x}
                  cy={y}
                  r="6"
                  fill={
                    k === "career"
                      ? SCI.forest
                      : k === "love"
                        ? SCI.orange
                        : k === "challenge"
                          ? "#b02d2d"
                          : SCI.ink
                  }
                  style={{ animation: "sci-pulse 2.2s ease-in-out infinite" }}
                />
                <circle
                  data-sci-motion="1"
                  cx={x}
                  cy={y}
                  r="12"
                  fill="none"
                  stroke={SCI.ink}
                  strokeWidth="0.8"
                  style={{ animation: "sci-pulse 2.8s ease-in-out infinite" }}
                />
                <text
                  x={x + 16}
                  y={y - 4}
                  fontFamily={SCI.mono}
                  fontSize="10"
                  fill={SCI.ink}
                >
                  {n.toUpperCase()}
                </text>
                <text
                  x={x + 16}
                  y={y + 8}
                  fontFamily={SCI.mono}
                  fontSize="8"
                  fill={SCI.ink3}
                >
                  {k}
                </text>
              </g>
            ))}

            {/* Legend */}
            <g transform="translate(20, 500)">
              <rect
                x="-4"
                y="-14"
                width="280"
                height="50"
                fill={SCI.paper}
                stroke={SCI.ink}
              />
              <text fontFamily={SCI.mono} fontSize="8" fill={SCI.ink2} y="0">
                LEGEND
              </text>
              <line
                x1="0"
                y1="12"
                x2="24"
                y2="12"
                stroke={SCI.orange}
                strokeWidth="1.6"
              />
              <text
                x="30"
                y="15"
                fontFamily={SCI.mono}
                fontSize="8"
                fill={SCI.ink}
              >
                ☉ Sun
              </text>
              <line
                x1="76"
                y1="12"
                x2="100"
                y2="12"
                stroke={SCI.forest}
                strokeWidth="1.6"
              />
              <text
                x="106"
                y="15"
                fontFamily={SCI.mono}
                fontSize="8"
                fill={SCI.ink}
              >
                ♃ Jupiter
              </text>
              <line
                x1="0"
                y1="26"
                x2="24"
                y2="26"
                stroke={SCI.ink}
                strokeWidth="1.6"
                strokeDasharray="2 2"
              />
              <text
                x="30"
                y="29"
                fontFamily={SCI.mono}
                fontSize="8"
                fill={SCI.ink}
              >
                ☿ Mercury
              </text>
              <line
                x1="106"
                y1="26"
                x2="130"
                y2="26"
                stroke={SCI.orange}
                strokeWidth="1.6"
                strokeDasharray="6 4"
              />
              <text
                x="136"
                y="29"
                fontFamily={SCI.mono}
                fontSize="8"
                fill={SCI.ink}
              >
                ♀ Venus paran
              </text>
            </g>
          </svg>
        </div>
      </div>

      {/* Selected city detail + table */}
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1.3fr 1fr",
          borderBottom: `1px solid ${SCI.ink}`,
        }}
      >
        <div
          style={{ padding: "36px 48px", borderRight: `1px solid ${SCI.ink}` }}
        >
          <MonoLabel>
            § Selected · Lisbon, Portugal · 38.72° N · 9.14° W
          </MonoLabel>
          <h2
            style={{
              fontFamily: SCI.display,
              fontSize: 54,
              lineHeight: 0.95,
              letterSpacing: -0.8,
              fontWeight: 500,
              margin: "14px 0 16px",
            }}
          >
            Your Jupiter-MC line runs{" "}
            <span style={{ fontStyle: "italic" }}>straight through</span>.
          </h2>
          <p
            style={{
              fontSize: 15,
              lineHeight: 1.65,
              color: SCI.ink2,
              maxWidth: 520,
              margin: 0,
            }}
          >
            Lisbon sits within 0.3° of where your natal Jupiter crosses the
            midheaven — the most recognized vocational signal in
            astrocartography. Amara's convergence engine scores this location{" "}
            <span style={{ background: "rgba(198,90,42,0.18)" }}>
              0.84 for career
            </span>
            , the highest of any European capital in your chart.
          </p>
          <div
            style={{
              marginTop: 24,
              display: "grid",
              gridTemplateColumns: "repeat(4,1fr)",
              gap: 0,
              border: `1px solid ${SCI.ink}`,
            }}
          >
            {[
              ["Career", "0.84", "Jupiter-MC"],
              ["Love", "0.41", "Venus trine"],
              ["Home", "0.38", "Moon weak"],
              ["Spiritual", "0.62", "Neptune paran"],
            ].map(([k, v, s], i) => (
              <div
                key={i}
                style={{
                  padding: "14px 16px",
                  borderRight: i < 3 ? `1px solid ${SCI.tint}` : "none",
                }}
              >
                <MonoLabel size={9}>{k}</MonoLabel>
                <div
                  style={{
                    fontFamily: SCI.display,
                    fontSize: 30,
                    lineHeight: 1,
                    margin: "4px 0 2px",
                  }}
                >
                  {v}
                </div>
                <MonoLabel size={9} style={{ color: SCI.ink3 }}>
                  {s}
                </MonoLabel>
              </div>
            ))}
          </div>
        </div>
        <div style={{ padding: "28px 40px", background: SCI.tint2 }}>
          <MonoLabel>Top 6 locations · your chart</MonoLabel>
          <div
            style={{
              marginTop: 12,
              background: SCI.paper,
              border: `1px solid ${SCI.ink}`,
            }}
          >
            <div
              style={{
                display: "grid",
                gridTemplateColumns: "36px 1fr 70px 70px",
                padding: "10px 14px",
                borderBottom: `1px solid ${SCI.ink}`,
                background: SCI.tint2,
              }}
            >
              {["", "City", "Theme", "Score"].map((h, i) => (
                <MonoLabel key={i} size={9}>
                  {h}
                </MonoLabel>
              ))}
            </div>
            {[
              ["01", "Lisbon · PT", "Career", 0.84, true],
              ["02", "Kyoto · JP", "Spiritual", 0.78, false],
              ["03", "Jaipur · IN", "Spiritual", 0.74, false],
              ["04", "Marrakech · MA", "Love", 0.71, false],
              ["05", "Cape Town · ZA", "Challenge", 0.68, false],
              ["06", "Reykjavík · IS", "Solitude", 0.66, false],
            ].map(([n, c, t, s, sel], i) => (
              <div
                key={i}
                style={{
                  display: "grid",
                  gridTemplateColumns: "36px 1fr 70px 70px",
                  padding: "10px 14px",
                  alignItems: "center",
                  borderBottom: i < 5 ? `1px solid ${SCI.tint}` : "none",
                  background: sel ? "rgba(198,90,42,0.08)" : SCI.paper,
                }}
              >
                <MonoLabel size={10}>{n}</MonoLabel>
                <span style={{ fontSize: 13 }}>{c}</span>
                <MonoLabel size={10} style={{ color: SCI.ink3 }}>
                  {t}
                </MonoLabel>
                <span
                  style={{
                    fontFamily: SCI.mono,
                    fontSize: 12,
                    textAlign: "right",
                  }}
                >
                  {s.toFixed(2)}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function SciMapMobile() {
  return (
    <div
      style={{
        width: 390,
        background: SCI.paper,
        color: SCI.ink,
        fontFamily: SCI.body,
        border: `1px solid ${SCI.ink}`,
      }}
    >
      <div
        style={{
          padding: "12px 18px",
          fontFamily: SCI.mono,
          fontSize: 9,
          color: SCI.ink3,
          borderBottom: `1px solid ${SCI.tint}`,
          display: "flex",
          gap: 6,
          overflow: "hidden",
        }}
      >
        {["All", "Career", "Love", "Spirit.", "Chall."].map((f, i) => (
          <Pill key={i} dark={i === 0}>
            {f}
          </Pill>
        ))}
      </div>
      <div
        style={{
          padding: 16,
          background: SCI.tint2,
          borderBottom: `1px solid ${SCI.ink}`,
        }}
      >
        <div style={{ background: SCI.paper, border: `1px solid ${SCI.ink}` }}>
          <svg
            viewBox="0 0 400 200"
            style={{ width: "100%", display: "block" }}
          >
            <g fill={SCI.ink} opacity="0.85">
              <path d="M30,70 Q50,50 80,55 L110,78 L100,120 L70,130 L40,110 Z" />
              <path d="M150,60 L200,50 L230,70 L235,110 L200,130 L165,115 Z" />
              <path d="M250,70 L320,55 L360,80 L355,130 L300,145 L260,115 Z" />
              <path d="M100,160 L125,150 L140,175 L120,190 Z" />
              <path d="M250,165 L275,155 L290,180 L265,190 Z" />
            </g>
            <path
              data-sci-motion="1"
              d="M50,0 Q60,100 55,200"
              stroke={SCI.orange}
              strokeWidth="1.3"
              fill="none"
              style={{ animation: "sci-dash 2.6s linear infinite" }}
            />
            <path
              data-sci-motion="1"
              d="M180,0 Q200,100 190,200"
              stroke={SCI.forest}
              strokeWidth="1.3"
              fill="none"
              style={{ animation: "sci-dash 2.9s linear infinite" }}
            />
            <path
              data-sci-motion="1"
              d="M290,0 Q280,100 295,200"
              stroke={SCI.ink}
              strokeWidth="1.3"
              strokeDasharray="3 2"
              fill="none"
              style={{ animation: "sci-dash 2.2s linear infinite" }}
            />
            <circle
              data-sci-motion="1"
              cx="55"
              cy="90"
              r="4"
              fill={SCI.ink}
              style={{ animation: "sci-pulse 2.2s ease-in-out infinite" }}
            />
            <circle
              data-sci-motion="1"
              cx="180"
              cy="82"
              r="4"
              fill={SCI.forest}
              style={{ animation: "sci-pulse 2.5s ease-in-out infinite" }}
            />
            <circle
              data-sci-motion="1"
              cx="290"
              cy="95"
              r="4"
              fill={SCI.orange}
              style={{ animation: "sci-pulse 2s ease-in-out infinite" }}
            />
          </svg>
        </div>
      </div>
      <div style={{ padding: "20px" }}>
        <MonoLabel>Lisbon · 0.84 career</MonoLabel>
        <h2
          style={{
            fontFamily: SCI.display,
            fontSize: 30,
            lineHeight: 1,
            margin: "8px 0 10px",
            letterSpacing: -0.4,
            fontWeight: 500,
          }}
        >
          Jupiter-MC runs{" "}
          <span style={{ fontStyle: "italic" }}>straight through</span>.
        </h2>
        <div style={{ fontSize: 13, lineHeight: 1.55, color: SCI.ink2 }}>
          0.3° from your natal Jupiter's midheaven — highest vocational score in
          your chart.
        </div>
      </div>
      <div
        style={{ padding: "14px 20px 20px", borderTop: `1px solid ${SCI.ink}` }}
      >
        <MonoLabel>Top cities</MonoLabel>
        <div style={{ marginTop: 8 }}>
          {[
            ["01", "Lisbon", "Career", "0.84", true],
            ["02", "Kyoto", "Spiritual", "0.78", false],
            ["03", "Jaipur", "Spiritual", "0.74", false],
            ["04", "Marrakech", "Love", "0.71", false],
          ].map(([n, c, t, s, sel], i) => (
            <div
              key={i}
              style={{
                display: "grid",
                gridTemplateColumns: "26px 1fr 80px 40px",
                gap: 8,
                alignItems: "center",
                padding: "9px 0",
                borderBottom: i < 3 ? `1px solid ${SCI.tint}` : "none",
                background: sel ? "rgba(198,90,42,0.08)" : "transparent",
                paddingLeft: sel ? 6 : 0,
              }}
            >
              <MonoLabel size={9}>{n}</MonoLabel>
              <span style={{ fontSize: 12 }}>{c}</span>
              <MonoLabel size={9} style={{ color: SCI.ink3 }}>
                {t}
              </MonoLabel>
              <span
                style={{
                  fontFamily: SCI.mono,
                  fontSize: 11,
                  textAlign: "right",
                }}
              >
                {s}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// =========================================================
// Checkout
// =========================================================
function SciCheckoutDesktop({ onPay, busy }) {
  return (
    <div
      style={{
        width: 1400,
        background: SCI.paper,
        color: SCI.ink,
        fontFamily: SCI.body,
        border: `1px solid ${SCI.ink}`,
      }}
    >
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1.1fr 1fr",
          minHeight: 800,
        }}
      >
        {/* Left — Summary */}
        <div
          style={{
            padding: "48px 56px",
            borderRight: `1px solid ${SCI.ink}`,
            background: SCI.tint2,
          }}
        >
          <MonoLabel>§ 01 · Order summary</MonoLabel>
          <h1
            style={{
              fontFamily: SCI.display,
              fontSize: 56,
              lineHeight: 0.95,
              letterSpacing: -0.8,
              fontWeight: 500,
              margin: "12px 0 28px",
            }}
          >
            $49.00
          </h1>

          <div
            style={{ background: SCI.paper, border: `1px solid ${SCI.border}` }}
          >
            {/* Line item */}
            <div
              style={{
                padding: "18px 20px",
                borderBottom: `1px solid ${SCI.border}`,
                display: "grid",
                gridTemplateColumns: "1fr 80px",
                gap: 12,
                alignItems: "baseline",
              }}
            >
              <div>
                <div
                  style={{
                    fontFamily: SCI.display,
                    fontSize: 22,
                    lineHeight: 1.1,
                  }}
                >
                  {_EXT_IS_SENSEI ? "Chuden · 中伝" : "Blueprint"}
                </div>
                <MonoLabel
                  size={9}
                  style={{ color: SCI.ink3, marginTop: 4, display: "block" }}
                >
                  One-time · all 13 traditions · yours forever
                </MonoLabel>
              </div>
              <div
                style={{
                  fontFamily: SCI.display,
                  fontSize: 22,
                  textAlign: "right",
                }}
              >
                $49
              </div>
            </div>

            {/* Total */}
            <div
              style={{
                padding: "18px 20px",
                display: "flex",
                justifyContent: "space-between",
                alignItems: "baseline",
                background: SCI.tint2,
              }}
            >
              <span style={{ fontFamily: SCI.display, fontSize: 22 }}>
                Total
              </span>
              <span
                style={{
                  fontFamily: SCI.display,
                  fontSize: 32,
                  letterSpacing: -0.5,
                }}
              >
                $49.00
              </span>
            </div>
          </div>
        </div>

        {/* Right — Payment */}
        <div style={{ padding: "48px 56px" }}>
          <MonoLabel>§ 02 · Payment</MonoLabel>
          <h2
            style={{
              fontFamily: SCI.display,
              fontSize: 36,
              lineHeight: 1,
              letterSpacing: -0.4,
              fontWeight: 500,
              margin: "12px 0 24px",
            }}
          >
            Card details.
          </h2>

          <div style={{ display: "flex", gap: 10, marginBottom: 22 }}>
            <SciBtn primary w="40%" size="md">
              💳 Card
            </SciBtn>
            <SciBtn w="30%" size="md">
              Apple Pay
            </SciBtn>
            <SciBtn w="30%" size="md">
              Link
            </SciBtn>
          </div>

          <FieldDesktop label="Cardholder name" value="Jane Doe" />
          <div style={{ height: 14 }} />
          <FieldDesktop label="Card number" value="4242 4242 4242 4242" mono />
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "1fr 1fr",
              gap: 14,
              marginTop: 14,
            }}
          >
            <FieldDesktop label="Expiry" value="05 / 28" mono />
            <FieldDesktop label="CVC" value="• • •" mono />
          </div>
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "2fr 1fr",
              gap: 14,
              marginTop: 14,
            }}
          >
            <FieldDesktop label="Country" value="United States" />
            <FieldDesktop label="ZIP" value="10001" mono />
          </div>

          <div style={{ marginTop: 28 }}>
            <SciBtn primary size="lg" w="100%" icon="→" onClick={() => onPay && onPay()} disabled={busy}>
              {busy ? "Redirecting…" : "Pay $49.00"}
            </SciBtn>
            <MonoLabel
              size={9}
              style={{
                color: SCI.ink3,
                marginTop: 10,
                display: "block",
                textAlign: "center",
              }}
            >
              ONE-TIME · NO SUBSCRIPTION · YOURS FOREVER
            </MonoLabel>
          </div>
        </div>
      </div>
    </div>
  );
}

function SciCheckoutMobile({ onPay, busy }) {
  return (
    <div
      style={{
        width: 390,
        background: SCI.paper,
        color: SCI.ink,
        fontFamily: SCI.body,
        border: `1px solid ${SCI.ink}`,
      }}
    >
      <div
        style={{
          padding: "24px 20px",
          background: SCI.tint2,
          borderBottom: `1px solid ${SCI.ink}`,
        }}
      >
        <MonoLabel>§ Order</MonoLabel>
        <div
          style={{
            fontFamily: SCI.display,
            fontSize: 44,
            lineHeight: 1,
            letterSpacing: -0.6,
            fontWeight: 500,
            marginTop: 8,
          }}
        >
          $49.00
        </div>
        <div
          style={{
            marginTop: 14,
            background: SCI.paper,
            border: `1px solid ${SCI.border}`,
          }}
        >
          {[
            [_EXT_IS_SENSEI ? "Chuden" : "Blueprint", "$49"],
            ["Total", "$49.00"],
          ].map(([l, v], i) => (
            <div
              key={i}
              style={{
                display: "flex",
                justifyContent: "space-between",
                padding: "10px 14px",
                borderBottom: i < 1 ? `1px solid ${SCI.border}` : "none",
                fontSize: 13,
                background: i === 1 ? SCI.tint2 : "transparent",
              }}
            >
              <span style={{ fontFamily: i === 1 ? SCI.display : SCI.body, fontSize: i === 1 ? 18 : 13 }}>{l}</span>
              <span style={{ fontFamily: SCI.mono }}>{v}</span>
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding: "22px 20px 28px" }}>
        <MonoLabel>§ Payment</MonoLabel>
        <div style={{ display: "flex", gap: 6, margin: "10px 0 16px" }}>
          <SciBtn primary size="sm" w="40%">
            💳 Card
          </SciBtn>
          <SciBtn size="sm" w="30%">
            Apple
          </SciBtn>
          <SciBtn size="sm" w="30%">
            Link
          </SciBtn>
        </div>
        <FieldDesktop label="Card number" value="4242 4242 4242 4242" mono />
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 10,
            marginTop: 10,
          }}
        >
          <FieldDesktop label="MM / YY" value="05 / 28" mono />
          <FieldDesktop label="CVC" value="• • •" mono />
        </div>
        <div style={{ marginTop: 10 }}>
          <FieldDesktop label="ZIP" value="10001" mono />
        </div>
        <div style={{ marginTop: 20 }}>
          <SciBtn primary size="lg" w="100%" icon="→" onClick={() => onPay && onPay()} disabled={busy}>
            {busy ? "Redirecting…" : "Pay $49.00"}
          </SciBtn>
        </div>
      </div>
    </div>
  );
}

// =========================================================
// Post-purchase confirmation
// =========================================================
function SciConfirmDesktop({ onWatchReport, onUpgrade }) {
  return (
    <div
      style={{
        width: 1400,
        background: SCI.paper,
        color: SCI.ink,
        fontFamily: SCI.body,
        border: `1px solid ${SCI.ink}`,
      }}
    >
      {/* Hero */}
      <div
        style={{ borderBottom: `1px solid ${SCI.ink}`, background: SCI.paper }}
      >
        <div
          style={{
            padding: "72px 56px 56px",
            display: "grid",
            gridTemplateColumns: "1.2fr 1fr",
            gap: 48,
            alignItems: "center",
          }}
        >
          <div>
            <MonoLabel>§ 00 · Receipt</MonoLabel>
            <h1
              style={{
                fontFamily: SCI.display,
                fontSize: 108,
                lineHeight: 0.9,
                letterSpacing: -2,
                fontWeight: 500,
                margin: "18px 0 14px",
              }}
            >
              Payment
              <br />
              <span style={{ fontStyle: "italic" }}>received</span>
              <span style={{ color: SCI.orange }}>.</span>
            </h1>
            <div
              style={{
                fontSize: 16,
                lineHeight: 1.6,
                color: SCI.ink2,
                maxWidth: 520,
              }}
            >
              {_EXT_IS_SENSEI ? "Your Chuden transmission is being prepared." : "Your Blueprint is queued for compute."} You'll get an email in about
              two minutes when the report is ready to read — or you can watch it
              build in real time.
            </div>
            <div style={{ marginTop: 30, display: "flex", gap: 12 }}>
              <SciBtn primary size="lg" icon="→" onClick={onWatchReport}>
                Watch report build
              </SciBtn>
              <SciBtn size="lg">Download receipt</SciBtn>
            </div>
          </div>

          {/* Receipt card */}
          <div
            style={{
              background: SCI.tint2,
              border: `1px solid ${SCI.ink}`,
              padding: 0,
            }}
          >
            <div
              style={{
                padding: "16px 20px",
                borderBottom: `1px solid ${SCI.ink}`,
                display: "flex",
                justifyContent: "space-between",
              }}
            >
              <MonoLabel>Receipt · № 092,409</MonoLabel>
              <MonoLabel size={9} style={{ color: SCI.ink3 }}>
                VISA •••• 4242
              </MonoLabel>
            </div>
            {[
              [_EXT_IS_SENSEI ? "Chuden · 中伝" : "Blueprint", "$49.00"],
              ["Total", "$49.00"],
            ].map(([l, v], i) => (
              <div
                key={i}
                style={{
                  padding: "12px 20px",
                  borderBottom: `1px solid ${SCI.tint}`,
                  display: "flex",
                  justifyContent: "space-between",
                  fontSize: 13,
                }}
              >
                <span>{l}</span>
                <span
                  style={{
                    fontFamily: SCI.mono,
                    color: l.startsWith("Promo") ? SCI.orange : SCI.ink,
                  }}
                >
                  {v}
                </span>
              </div>
            ))}
            <div
              style={{
                padding: "18px 20px",
                display: "flex",
                justifyContent: "space-between",
                alignItems: "baseline",
                background: SCI.paper,
              }}
            >
              <span style={{ fontFamily: SCI.display, fontSize: 20 }}>
                Paid
              </span>
              <span
                style={{
                  fontFamily: SCI.display,
                  fontSize: 32,
                  letterSpacing: -0.5,
                }}
              >
                $49.00
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* Report build status */}
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1.2fr 1fr",
          borderBottom: `1px solid ${SCI.ink}`,
        }}
      >
        <div
          style={{
            padding: "40px 56px",
            borderRight: `1px solid ${SCI.ink}`,
            background: SCI.tint2,
          }}
        >
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "baseline",
              marginBottom: 16,
            }}
          >
            <MonoLabel>§ 01 · Report status</MonoLabel>
            <MonoLabel size={10} style={{ color: SCI.ink3 }}>
              EST 01:52 REMAINING
            </MonoLabel>
          </div>
          <div
            style={{
              fontFamily: SCI.display,
              fontSize: 88,
              lineHeight: 0.95,
              letterSpacing: -1.5,
              fontWeight: 500,
            }}
          >
            42
            <span
              style={{
                color: SCI.orange,
                fontSize: 40,
                verticalAlign: "super",
              }}
            >
              %
            </span>
          </div>
          <div
            style={{
              marginTop: 16,
              background: SCI.paper,
              border: `1px solid ${SCI.ink}`,
              padding: 3,
              height: 14,
            }}
          >
            <div
              style={{ width: "42%", height: "100%", background: SCI.ink }}
            />
          </div>
          <div
            style={{
              marginTop: 22,
              display: "grid",
              gridTemplateColumns: "repeat(5, 1fr)",
              gap: 6,
            }}
          >
            {[
              "Big Five",
              "MBTI",
              "Ennea",
              "HD",
              "Astro",
              "Num",
              "Carto",
              "IChing",
              "Genes",
              "Chin",
            ].map((n, i) => (
              <div
                key={i}
                style={{
                  padding: "10px 8px",
                  border: `1px solid ${i < 4 ? SCI.ink : SCI.tint}`,
                  background:
                    i < 4
                      ? SCI.ink
                      : i === 4
                        ? "rgba(198,90,42,0.15)"
                        : SCI.paper,
                  color: i < 4 ? SCI.paper : SCI.ink,
                  textAlign: "center",
                }}
              >
                <div
                  style={{
                    fontFamily: SCI.mono,
                    fontSize: 9,
                    letterSpacing: 0.5,
                  }}
                >
                  {i < 4 ? "✓" : i === 4 ? "●" : "·"}
                </div>
                <div style={{ fontSize: 11, marginTop: 3 }}>{n}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Upsell */}
        <div
          style={{
            padding: "40px 48px",
            background: SCI.ink,
            color: SCI.paper,
          }}
        >
          <MonoLabel style={{ color: "rgba(243,239,228,0.5)" }}>
            § 02 · While you wait
          </MonoLabel>
          <h2
            style={{
              fontFamily: SCI.display,
              fontSize: 44,
              lineHeight: 0.98,
              letterSpacing: -0.6,
              fontWeight: 500,
              margin: "14px 0 14px",
            }}
          >
            {_EXT_IS_SENSEI ? "Upgrade to Okuden · 奥伝" : "Upgrade to Inner Circle"}
            <br />
            for{" "}
            <span style={{ color: SCI.orange, fontStyle: "italic" }}>
              $120 more
            </span>
            .
          </h2>
          <div
            style={{
              fontSize: 14,
              lineHeight: 1.6,
              opacity: 0.85,
              marginBottom: 18,
            }}
          >
            Unlock chat with your chart, quarterly transit re-runs, and the full
            relationship suite. Retroactive credit applied — your $49.00
            counts.
          </div>
          <div style={{ borderTop: "1px solid rgba(243,239,228,0.2)" }}>
            {[
              "Chat with your chart · unlimited",
              "Quarterly transit updates",
              "Full relationship suite",
              "Priority human support",
            ].map((f, i) => (
              <div
                key={i}
                style={{
                  padding: "8px 0",
                  borderBottom: "1px solid rgba(243,239,228,0.15)",
                  display: "flex",
                  gap: 10,
                  fontSize: 13,
                }}
              >
                <span style={{ color: SCI.orange }}>+</span>
                {f}
              </div>
            ))}
          </div>
          <div style={{ marginTop: 20 }}>
            <SciBtn
              size="lg"
              icon="→"
              onClick={onUpgrade}
              style={{
                background: SCI.paper,
                color: SCI.ink,
                border: `1px solid ${SCI.paper}`,
              }}
            >
              Upgrade for $120
            </SciBtn>
          </div>
        </div>
      </div>

      {/* Share row */}
      <div
        style={{
          padding: "32px 56px",
          display: "grid",
          gridTemplateColumns: "1fr auto",
          gap: 24,
          alignItems: "center",
        }}
      >
        <div>
          <MonoLabel>§ 03 · Tell a friend</MonoLabel>
          <div
            style={{
              fontFamily: SCI.display,
              fontSize: 22,
              lineHeight: 1.2,
              marginTop: 6,
            }}
          >
            Give $10, get $10 — every friend you refer.
          </div>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          {["Copy link", "X", "Instagram", "Email"].map((p, i) => (
            <SciBtn key={i}>{p}</SciBtn>
          ))}
        </div>
      </div>
    </div>
  );
}

function SciConfirmMobile({ onWatchReport, onUpgrade }) {
  return (
    <div
      style={{
        width: 390,
        background: SCI.paper,
        color: SCI.ink,
        fontFamily: SCI.body,
        border: `1px solid ${SCI.ink}`,
      }}
    >
      <div style={{ padding: "34px 20px 24px" }}>
        <MonoLabel>§ 00 · Receipt</MonoLabel>
        <h1
          style={{
            fontFamily: SCI.display,
            fontSize: 48,
            lineHeight: 0.9,
            letterSpacing: -0.8,
            fontWeight: 500,
            margin: "12px 0 14px",
          }}
        >
          Payment <span style={{ fontStyle: "italic" }}>received</span>
          <span style={{ color: SCI.orange }}>.</span>
        </h1>
        <div
          style={{
            fontSize: 14,
            lineHeight: 1.55,
            color: SCI.ink2,
            marginBottom: 18,
          }}
        >
          {_EXT_IS_SENSEI ? "Chuden queued." : "Blueprint queued."} Email in about two minutes, or watch it build now.
        </div>
        <SciBtn primary size="lg" w="100%" icon="→" onClick={onWatchReport}>
          Watch report build
        </SciBtn>
      </div>
      <div
        style={{
          padding: "18px 20px",
          background: SCI.tint2,
          borderTop: `1px solid ${SCI.ink}`,
          borderBottom: `1px solid ${SCI.ink}`,
        }}
      >
        <MonoLabel>Report status</MonoLabel>
        <div
          style={{
            fontFamily: SCI.display,
            fontSize: 56,
            lineHeight: 0.95,
            letterSpacing: -0.8,
            marginTop: 6,
          }}
        >
          42
          <span
            style={{ color: SCI.orange, fontSize: 24, verticalAlign: "super" }}
          >
            %
          </span>
        </div>
        <div
          style={{
            marginTop: 8,
            background: SCI.paper,
            border: `1px solid ${SCI.ink}`,
            padding: 2,
            height: 10,
          }}
        >
          <div style={{ width: "42%", height: "100%", background: SCI.ink }} />
        </div>
      </div>
      <div style={{ padding: "20px", background: SCI.ink, color: SCI.paper }}>
        <MonoLabel style={{ color: "rgba(243,239,228,0.5)" }}>
          § Upgrade
        </MonoLabel>
        <div
          style={{
            fontFamily: SCI.display,
            fontSize: 24,
            lineHeight: 1.1,
            margin: "8px 0 10px",
          }}
        >
          {_EXT_IS_SENSEI ? "Okuden · 奥伝" : "Inner Circle"} ·{" "}
          <span style={{ color: SCI.orange, fontStyle: "italic" }}>
            $120 more
          </span>
        </div>
        <div
          style={{
            fontSize: 12,
            lineHeight: 1.5,
            opacity: 0.85,
            marginBottom: 12,
          }}
        >
          Chat + quarterly transits + relationship suite. Your $49.00 credits.
        </div>
        <SciBtn
          size="md"
          w="100%"
          icon="→"
          onClick={onUpgrade}
          style={{
            background: SCI.paper,
            color: SCI.ink,
            border: `1px solid ${SCI.paper}`,
          }}
        >
          Upgrade
        </SciBtn>
      </div>
      <div style={{ padding: "18px 20px", borderTop: `1px solid ${SCI.ink}` }}>
        <MonoLabel>Share</MonoLabel>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 6,
            marginTop: 8,
          }}
        >
          {["Copy link", "X", "Instagram", "Email"].map((p, i) => (
            <SciBtn key={i} size="sm">
              {p}
            </SciBtn>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  SciChatDesktop,
  SciChatMobile,
  SciMapDesktop,
  SciMapMobile,
  SciCheckoutDesktop,
  SciCheckoutMobile,
  SciConfirmDesktop,
  SciConfirmMobile,
});