// Science hi-fi — blueprint viewer + dashboard

function SciBlueprintDesktop({ onNavigate }) {
  const nav = [
    ["§ 00", "Overview", "active"],
    ["§ 01", "Archetype synthesis", "done"],
    ["§ 02", "Big Five profile", "done"],
    ["§ 03", "MBTI · cognitive stack", "done"],
    ["§ 04", "Enneagram · Type 8", "done"],
    ["§ 05", "Human Design", "done"],
    ["§ 06", "Astrology · natal", "done"],
    ["§ 07", "Work & vocation", "done"],
    ["§ 08", "Relationship patterns", "locked"],
    ["§ 09", "Astrocartography", "locked"],
    ["§ 10", "Numerology", "done"],
    ["§ 11", "I Ching & Gene Keys", "done"],
    ["§ 12", "Shadow & growth", "done"],
  ];
  return (
    <div
      style={{
        width: 1400,
        background: SCI.paper,
        color: SCI.ink,
        fontFamily: SCI.body,
        border: `1px solid ${SCI.ink}`,
      }}
    >
      {/* Top bar */}
      <div
        style={{
          display: "flex",
          alignItems: "stretch",
          height: 56,
          borderBottom: `1px solid ${SCI.ink}`,
        }}
      >
        <div
          style={{
            padding: "0 28px",
            display: "flex",
            alignItems: "center",
            gap: 10,
            borderRight: `1px solid ${SCI.ink}`,
          }}
        >
          <div
            style={{
              width: 14,
              height: 14,
              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>
          <div style={{ fontFamily: SCI.display, fontSize: 20 }}>Tamashi</div>
        </div>
        <div
          style={{
            flex: 1,
            padding: "0 28px",
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
          }}
        >
          <MonoLabel>
            Blueprint № 041,208 · J. Doe · issued 21.APR.2026
          </MonoLabel>
          <div style={{ display: "flex", gap: 8 }}>
            <Pill>▶ Audio · 38:12</Pill>
            <Pill>⇣ PDF</Pill>
            <Pill>↗ Share</Pill>
          </div>
        </div>
      </div>

      <div
        style={{
          display: "grid",
          gridTemplateColumns: "220px 1fr",
          minHeight: 900,
        }}
      >
        {/* Left nav */}
        <div
          style={{
            borderRight: `1px solid ${SCI.ink}`,
            background: SCI.tint2,
            padding: "22px 0",
          }}
        >
          <div style={{ padding: "0 18px 12px" }}>
            <MonoLabel size={9}>Contents · 13</MonoLabel>
          </div>
          {nav.map(([n, t, s], i) => (
            <div
              key={i}
              style={{
                padding: "9px 18px",
                background: s === "active" ? SCI.paper : "transparent",
                borderLeft:
                  s === "active"
                    ? `2px solid ${SCI.orange}`
                    : "2px solid transparent",
                fontFamily: SCI.body,
                fontSize: 12,
                color: s === "locked" ? SCI.ink3 : SCI.ink,
                display: "grid",
                gridTemplateColumns: "34px 1fr 14px",
                gap: 6,
                alignItems: "center",
              }}
            >
              <span
                style={{ fontFamily: SCI.mono, fontSize: 10, color: SCI.ink3 }}
              >
                {n}
              </span>
              <span>{t}</span>
              {s === "locked" && (
                <span
                  style={{
                    fontFamily: SCI.mono,
                    fontSize: 10,
                    color: SCI.ink3,
                  }}
                >
                  🔒
                </span>
              )}
            </div>
          ))}
          <div
            style={{
              padding: "14px 18px",
              marginTop: 10,
              borderTop: `1px solid ${SCI.tint}`,
            }}
          >
            <MonoLabel size={9}>Reading progress</MonoLabel>
            <div style={{ height: 4, background: SCI.tint, marginTop: 8 }}>
              <div
                style={{ width: "42%", height: "100%", background: SCI.ink }}
              />
            </div>
            <MonoLabel
              size={9}
              style={{ color: SCI.ink3, marginTop: 6, display: "block" }}
            >
              3,462 / 8,214 words
            </MonoLabel>
          </div>
        </div>

        {/* Content */}
        <div>
          {/* Hero cover */}
          <div
            style={{
              padding: "56px 64px 40px",
              borderBottom: `1px solid ${SCI.ink}`,
              background: SCI.paper,
            }}
          >
            <div
              style={{
                display: "grid",
                gridTemplateColumns: "1.3fr 1fr",
                gap: 48,
                alignItems: "end",
              }}
            >
              <div>
                <MonoLabel>§ 00 · Overview · archetype synthesis</MonoLabel>
                <h1
                  style={{
                    fontFamily: SCI.display,
                    fontSize: 108,
                    lineHeight: 0.9,
                    letterSpacing: -2,
                    fontWeight: 500,
                    margin: "16px 0 10px",
                  }}
                >
                  The <span style={{ fontStyle: "italic" }}>Builder</span>
                  <br />
                  who resents
                  <br />
                  being managed<span style={{ color: SCI.orange }}>.</span>
                </h1>
                <div
                  style={{
                    fontSize: 16,
                    lineHeight: 1.55,
                    color: SCI.ink2,
                    maxWidth: 540,
                    marginTop: 14,
                  }}
                >
                  Seven of the ten instruments independently describe someone
                  who trusts their own calibration over hierarchy — a{" "}
                  <strong>0.91 convergence</strong> across methods that almost
                  never agree on anything.
                </div>
                <div
                  style={{
                    display: "flex",
                    gap: 6,
                    marginTop: 20,
                    flexWrap: "wrap",
                  }}
                >
                  {[
                    "INTJ",
                    "Enn 8w7",
                    "Sp/Sx",
                    "Projector",
                    "Scorpio ☉",
                    "Life path 7",
                    "IRT: 88 O",
                  ].map((t, i) => (
                    <Pill key={i} dark={i === 1}>
                      {t}
                    </Pill>
                  ))}
                </div>
              </div>
              {/* Radar summary */}
              <div
                style={{
                  background: SCI.tint2,
                  border: `1px solid ${SCI.ink}`,
                  padding: 20,
                }}
              >
                <div
                  style={{
                    display: "flex",
                    justifyContent: "space-between",
                    marginBottom: 10,
                  }}
                >
                  <MonoLabel>Convergence summary</MonoLabel>
                  <MonoLabel size={9} style={{ color: SCI.ink3 }}>
                    0.91
                  </MonoLabel>
                </div>
                <div style={{ aspectRatio: "1/1" }}>
                  <EnneaRadar
                    values={[
                      0.42, 0.38, 0.48, 0.55, 0.62, 0.58, 0.72, 0.95, 0.61,
                    ]}
                  />
                </div>
                <MonoLabel
                  size={9}
                  style={{
                    color: SCI.ink3,
                    marginTop: 8,
                    display: "block",
                    textAlign: "center",
                  }}
                >
                  9-axis enneagram · type 8 dominant
                </MonoLabel>
              </div>
            </div>
          </div>

          {/* Section body — Section 02 Big Five */}
          <div
            style={{
              padding: "48px 64px 32px",
              borderBottom: `1px solid ${SCI.ink}`,
            }}
          >
            <div
              style={{
                display: "grid",
                gridTemplateColumns: "200px 1fr",
                gap: 40,
              }}
            >
              <div style={{ position: "sticky", top: 20 }}>
                <MonoLabel>§ 02 · 1,120 words</MonoLabel>
                <div
                  style={{
                    fontFamily: SCI.display,
                    fontSize: 28,
                    lineHeight: 1.1,
                    marginTop: 10,
                    letterSpacing: -0.3,
                  }}
                >
                  Big Five
                  <br />
                  <span style={{ fontStyle: "italic" }}>profile</span>.
                </div>
                <div
                  style={{
                    fontSize: 12,
                    color: SCI.ink3,
                    marginTop: 10,
                    lineHeight: 1.5,
                  }}
                >
                  IRT-scaled · IPIP-120 · norm: US adults 2024
                </div>
              </div>
              <div>
                <div
                  style={{
                    background: SCI.tint2,
                    border: `1px solid ${SCI.ink}`,
                    padding: 24,
                    marginBottom: 22,
                  }}
                >
                  <BigFiveBars values={[88, 72, 41, 63, 22]} />
                </div>
                <p
                  style={{
                    fontFamily: SCI.display,
                    fontSize: 26,
                    lineHeight: 1.25,
                    letterSpacing: -0.2,
                    margin: "0 0 18px",
                  }}
                >
                  Your{" "}
                  <span style={{ background: "rgba(198,90,42,0.18)" }}>
                    88th-percentile openness
                  </span>{" "}
                  is the loudest signal in your psychometric profile — it is
                  what eight of the other nine instruments are ultimately
                  pointing at when they describe you.
                </p>
                <p
                  style={{
                    fontSize: 15,
                    lineHeight: 1.65,
                    color: SCI.ink2,
                    margin: "0 0 14px",
                  }}
                >
                  Paired with a 41st-percentile extraversion, this is the
                  classic profile of someone whose richest life happens in the
                  half-hour before anyone else is awake. Your conscientiousness
                  (72) is high enough to ship; your agreeableness (63) is high
                  enough to be fair but low enough to say no.
                </p>
                <p
                  style={{
                    fontSize: 15,
                    lineHeight: 1.65,
                    color: SCI.ink2,
                    margin: 0,
                  }}
                >
                  The outlier is your neuroticism score — 22nd percentile, lower
                  than 78% of your cohort. Combined with the preceding four,
                  this is unusually stable territory…
                </p>

                {/* Footnote / cross-ref card */}
                <div
                  style={{
                    marginTop: 22,
                    padding: "16px 18px",
                    borderLeft: `2px solid ${SCI.orange}`,
                    background: SCI.tint2,
                  }}
                >
                  <MonoLabel size={9}>
                    Cross-reference · § 04 · Enneagram
                  </MonoLabel>
                  <div
                    style={{
                      fontSize: 13,
                      color: SCI.ink2,
                      marginTop: 6,
                      lineHeight: 1.5,
                    }}
                  >
                    The O-high / N-low pairing is independently echoed by the
                    Enneagram instrument's rating of you as a{" "}
                    <strong>self-preserving Eight</strong> — see §04 for the
                    full cross-read.
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Locked section preview */}
          <div
            style={{
              padding: "36px 64px 44px",
              background: SCI.tint2,
              borderBottom: `1px solid ${SCI.ink}`,
            }}
          >
            <div
              style={{
                display: "grid",
                gridTemplateColumns: "200px 1fr",
                gap: 40,
              }}
            >
              <div>
                <MonoLabel>§ 08 · Locked</MonoLabel>
                <div
                  style={{
                    fontFamily: SCI.display,
                    fontSize: 28,
                    lineHeight: 1.1,
                    marginTop: 10,
                    letterSpacing: -0.3,
                  }}
                >
                  Relationship
                  <br />
                  <span style={{ fontStyle: "italic" }}>patterns</span>.
                </div>
              </div>
              <div style={{ position: "relative", minHeight: 200 }}>
                <div
                  style={{
                    filter: "blur(4px)",
                    opacity: 0.55,
                    userSelect: "none",
                  }}
                >
                  <p
                    style={{
                      fontFamily: SCI.display,
                      fontSize: 24,
                      lineHeight: 1.25,
                      margin: "0 0 16px",
                    }}
                  >
                    Your Venus in the 8th house describes a pattern of
                    relationships as transformational pressure rather than
                    comfort.
                  </p>
                  <p
                    style={{ fontSize: 15, lineHeight: 1.65, color: SCI.ink2 }}
                  >
                    The cross-reference with your Enneagram 8w7 subtype suggests
                    that intimacy, for you, is accepted only when it feels
                    structurally earned. Both archetypal and typological
                    instruments converge on the same…
                  </p>
                </div>
                <div
                  style={{
                    position: "absolute",
                    inset: 0,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    background:
                      "linear-gradient(180deg, rgba(243,239,228,0.2), rgba(243,239,228,0.85))",
                  }}
                >
                  <div
                    style={{
                      background: SCI.ink,
                      color: SCI.paper,
                      padding: "22px 28px",
                      display: "flex",
                      alignItems: "center",
                      gap: 20,
                      border: `1px solid ${SCI.ink}`,
                    }}
                  >
                    <div>
                      <MonoLabel style={{ color: "rgba(243,239,228,0.5)" }}>
                        Add-on · Relationship report
                      </MonoLabel>
                      <div
                        style={{
                          fontFamily: SCI.display,
                          fontSize: 22,
                          lineHeight: 1.1,
                          marginTop: 6,
                        }}
                      >
                        Unlock § 08 — $29
                      </div>
                    </div>
                    <SciBtn
                      size="md"
                      onClick={() => onNavigate && onNavigate("/checkout")}
                      style={{
                        background: SCI.paper,
                        color: SCI.ink,
                        border: `1px solid ${SCI.paper}`,
                      }}
                      icon="→"
                    >
                      Unlock
                    </SciBtn>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* End-of-section footer */}
          <div
            style={{
              padding: "22px 64px",
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              fontFamily: SCI.mono,
              fontSize: 10,
              color: SCI.ink3,
              letterSpacing: 0.5,
            }}
          >
            <span>← § 01 ARCHETYPE SYNTHESIS</span>
            <span>§ 02 · BIG FIVE · 02 / 13</span>
            <span>§ 03 MBTI →</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function SciBlueprintMobile() {
  return (
    <div
      style={{
        width: 390,
        background: SCI.paper,
        color: SCI.ink,
        fontFamily: SCI.body,
        border: `1px solid ${SCI.ink}`,
      }}
    >
      <div
        style={{
          height: 52,
          borderBottom: `1px solid ${SCI.ink}`,
          display: "flex",
          alignItems: "center",
          padding: "0 18px",
          justifyContent: "space-between",
        }}
      >
        <MonoLabel>§ 02 · Blueprint</MonoLabel>
        <div style={{ display: "flex", gap: 6 }}>
          <Pill>▶</Pill>
          <Pill>⇣</Pill>
        </div>
      </div>
      <div style={{ padding: "24px 20px 28px" }}>
        <MonoLabel>§ 00 · Overview</MonoLabel>
        <h1
          style={{
            fontFamily: SCI.display,
            fontSize: 42,
            lineHeight: 0.95,
            letterSpacing: -0.6,
            fontWeight: 500,
            margin: "10px 0 12px",
          }}
        >
          The <span style={{ fontStyle: "italic" }}>Builder</span> who resents
          being managed<span style={{ color: SCI.orange }}>.</span>
        </h1>
        <div
          style={{
            fontSize: 14,
            lineHeight: 1.5,
            color: SCI.ink2,
            marginBottom: 14,
          }}
        >
          Seven of ten instruments converge at 0.91 on a single pattern.
        </div>
        <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
          {["INTJ", "Enn 8", "Projector", "Scorpio ☉", "LP 7"].map((t, i) => (
            <Pill key={i} dark={i === 1}>
              {t}
            </Pill>
          ))}
        </div>
      </div>
      <div
        style={{
          padding: "18px 20px",
          background: SCI.tint2,
          borderTop: `1px solid ${SCI.ink}`,
          borderBottom: `1px solid ${SCI.ink}`,
        }}
      >
        <MonoLabel>Big Five · percentile</MonoLabel>
        <div style={{ marginTop: 10 }}>
          <BigFiveBars values={[88, 72, 41, 63, 22]} />
        </div>
      </div>
      <div style={{ padding: "22px 20px" }}>
        <MonoLabel>§ 02 · Big Five profile</MonoLabel>
        <p
          style={{
            fontFamily: SCI.display,
            fontSize: 22,
            lineHeight: 1.3,
            margin: "10px 0 14px",
            letterSpacing: -0.1,
          }}
        >
          Your{" "}
          <span style={{ background: "rgba(198,90,42,0.18)" }}>
            88th-percentile openness
          </span>{" "}
          is the loudest signal in your psychometric profile.
        </p>
        <p style={{ fontSize: 14, lineHeight: 1.6, color: SCI.ink2 }}>
          Paired with a 41st-percentile extraversion, this is the profile of
          someone whose richest life happens in the half-hour before anyone else
          is awake.
        </p>
      </div>
      <div
        style={{
          padding: "16px 20px",
          borderTop: `1px solid ${SCI.ink}`,
          display: "flex",
          justifyContent: "space-between",
          fontFamily: SCI.mono,
          fontSize: 10,
          color: SCI.ink3,
        }}
      >
        <span>← § 01</span>
        <span>02 / 13</span>
        <span>§ 03 →</span>
      </div>
    </div>
  );
}

// =========================================================
// Dashboard — daily return surface
// =========================================================
function SciDashboardDesktop({ onNavigate, onUpgrade }) {
  const topNav = [
    ["Today", "/dashboard"],
    ["Blueprint", "/blueprint"],
    ["Chat", "/chat"],
    ["Map", "/map"],
    ["Pairs", "/checkout"],
    ["Settings", "/onboarding"],
  ];
  const quickActions = [
    ["Re-read blueprint", "13 sections · 8,214w", "/blueprint"],
    ["Ask a question", "chat with your chart", "/chat"],
    ["Compare a pair", "relationship report", "/checkout"],
    ["Relocate", "astrocartography", "/map"],
    ["Export PDF", "full document", "/blueprint"],
    ["Schedule reading", "45m · human analyst · $180", "/contact"],
  ];
  return (
    <div
      style={{
        width: 1400,
        background: SCI.paper,
        color: SCI.ink,
        fontFamily: SCI.body,
        border: `1px solid ${SCI.ink}`,
      }}
    >
      <div
        style={{
          display: "flex",
          alignItems: "stretch",
          height: 56,
          borderBottom: `1px solid ${SCI.ink}`,
        }}
      >
        <div
          style={{
            padding: "0 28px",
            display: "flex",
            alignItems: "center",
            gap: 10,
            borderRight: `1px solid ${SCI.ink}`,
          }}
        >
          <div
            style={{
              width: 14,
              height: 14,
              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>
          <div style={{ fontFamily: SCI.display, fontSize: 20 }}>Tamashi</div>
        </div>
        <div
          style={{
            flex: 1,
            display: "flex",
            alignItems: "center",
            padding: "0 28px",
            gap: 32,
            fontSize: 13,
          }}
        >
          {topNav.map(([label, route], i) => (
            <button
              key={label}
              type="button"
              onClick={() => onNavigate && onNavigate(route)}
              style={{
                color: i === 0 ? SCI.ink : SCI.ink2,
                border: "none",
                borderBottom: i === 0 ? `1.5px solid ${SCI.ink}` : "none",
                padding: "4px 0",
                background: "none",
                fontFamily: SCI.body,
                fontSize: 13,
                cursor: "pointer",
              }}
            >
              {label}
            </button>
          ))}
        </div>
        <div
          style={{
            borderLeft: `1px solid ${SCI.ink}`,
            padding: "0 18px",
            display: "flex",
            alignItems: "center",
            gap: 10,
            fontFamily: SCI.mono,
            fontSize: 11,
            color: SCI.ink2,
          }}
        >
          J.D. · BLUEPRINT
        </div>
      </div>

      <div
        style={{
          padding: "12px 28px",
          fontFamily: SCI.mono,
          fontSize: 10,
          color: SCI.ink2,
          borderBottom: `1px solid ${SCI.tint}`,
          display: "flex",
          justifyContent: "space-between",
        }}
      >
        <span>FIG. 07 · DAILY INSTRUMENT · TUE 21.APR.2026</span>
        <span>SOLAR 01°♉ · LUNAR 14°♌ · MOON WAXING GIBBOUS</span>
        <span>NEXT TRANSIT 03.MAY</span>
      </div>

      {/* Today's alignment — hero */}
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1.2fr 1fr",
          borderBottom: `1px solid ${SCI.ink}`,
        }}
      >
        <div
          style={{ padding: "44px 56px", borderRight: `1px solid ${SCI.ink}` }}
        >
          <MonoLabel>§ 01 · Daily alignment</MonoLabel>
          <h1
            style={{
              fontFamily: SCI.display,
              fontSize: 72,
              lineHeight: 0.95,
              letterSpacing: -1.2,
              fontWeight: 500,
              margin: "14px 0 16px",
            }}
          >
            A <span style={{ fontStyle: "italic" }}>builder's</span>
            <br />
            quiet Tuesday.
          </h1>
          <div
            style={{
              fontSize: 15,
              lineHeight: 1.6,
              color: SCI.ink2,
              maxWidth: 520,
            }}
          >
            The transit weather favors the solitary work you've been avoiding.
            Your productivity vector is up 18% over your 7-day baseline, but the
            agreement between instruments on <em>today's</em> advice is
            unusually loose — a 0.62. When the charts disagree, trust the
            calendar.
          </div>
          <div style={{ marginTop: 24, display: "flex", gap: 12 }}>
            <SciBtn
              primary
              icon="→"
              onClick={() => onNavigate && onNavigate("/chat")}
            >
              Ask your chart
            </SciBtn>
            <SciBtn
              icon="→"
              onClick={() => onNavigate && onNavigate("/blueprint")}
            >
              Read full forecast
            </SciBtn>
          </div>
        </div>

        <div
          style={{
            padding: "32px 36px",
            background: SCI.tint2,
            display: "grid",
            gridTemplateColumns: "180px 1fr",
            gap: 24,
            alignItems: "center",
          }}
        >
          <div style={{ position: "relative" }}>
            <svg
              viewBox="0 0 100 100"
              style={{ width: "100%", height: "auto", display: "block" }}
            >
              <circle
                cx="50"
                cy="50"
                r="44"
                fill="none"
                stroke={SCI.tint}
                strokeWidth="6"
              />
              <circle
                cx="50"
                cy="50"
                r="44"
                fill="none"
                stroke={SCI.ink}
                strokeWidth="6"
                strokeDasharray={`${Math.PI * 88 * 0.72} ${Math.PI * 88}`}
                transform="rotate(-90 50 50)"
                strokeLinecap="butt"
              />
              <circle
                cx="50"
                cy="50"
                r="44"
                fill="none"
                stroke={SCI.orange}
                strokeWidth="6"
                strokeDasharray={`${Math.PI * 88 * 0.18} ${Math.PI * 88}`}
                strokeDashoffset={-Math.PI * 88 * 0.72}
                transform="rotate(-90 50 50)"
                strokeLinecap="butt"
              />
              <text
                x="50"
                y="48"
                fontFamily={SCI.display}
                fontSize="24"
                textAnchor="middle"
                fill={SCI.ink}
              >
                72
              </text>
              <text
                x="50"
                y="62"
                fontFamily={SCI.mono}
                fontSize="6"
                letterSpacing="1"
                textAnchor="middle"
                fill={SCI.ink3}
              >
                ALIGNMENT
              </text>
            </svg>
          </div>
          <div>
            <MonoLabel size={10}>Index breakdown</MonoLabel>
            <div style={{ marginTop: 10 }}>
              {[
                ["Productivity", 84, true],
                ["Creativity", 78, true],
                ["Social", 41, false],
                ["Introspection", 91, true],
                ["Conflict risk", 22, false],
              ].map(([l, v, up], i) => (
                <div
                  key={i}
                  style={{
                    display: "grid",
                    gridTemplateColumns: "1fr 100px 44px",
                    gap: 8,
                    alignItems: "center",
                    padding: "5px 0",
                    borderBottom: i < 4 ? `1px solid ${SCI.tint}` : "none",
                  }}
                >
                  <span style={{ fontSize: 12 }}>{l}</span>
                  <div
                    style={{
                      height: 5,
                      background: SCI.paper,
                      border: `1px solid ${SCI.tint}`,
                      position: "relative",
                    }}
                  >
                    <div
                      style={{
                        position: "absolute",
                        inset: 0,
                        right: "auto",
                        width: `${v}%`,
                        background: up ? SCI.ink : SCI.tint,
                      }}
                    />
                  </div>
                  <span
                    style={{
                      fontFamily: SCI.mono,
                      fontSize: 11,
                      textAlign: "right",
                    }}
                  >
                    {v}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Grid of cards */}
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr 1fr",
          borderBottom: `1px solid ${SCI.ink}`,
        }}
      >
        {/* Transits */}
        <div
          style={{ padding: "28px 32px", borderRight: `1px solid ${SCI.ink}` }}
        >
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "baseline",
              marginBottom: 14,
            }}
          >
            <MonoLabel>§ 02 · Upcoming transits</MonoLabel>
            <MonoLabel size={9} style={{ color: SCI.ink3 }}>
              Next 30d
            </MonoLabel>
          </div>
          {[
            ["APR 24", "Mars → 10H", "Career thrust", "strong"],
            ["APR 28", "Venus ∆ natal ☉", "Harmony window", "mild"],
            ["MAY 02", "Full ☽ in ♏", "Endings clarify", "strong"],
            ["MAY 11", "Mercury ℞", "Review, don't ship", "caution"],
            ["MAY 20", "Sun enters ♊", "Attention lifts", "mild"],
          ].map(([d, t, l, i2], i) => (
            <div
              key={i}
              style={{
                display: "grid",
                gridTemplateColumns: "64px 1fr 50px",
                gap: 12,
                alignItems: "center",
                padding: "10px 0",
                borderTop: `1px solid ${SCI.tint}`,
              }}
            >
              <MonoLabel size={10}>{d}</MonoLabel>
              <div>
                <div style={{ fontSize: 13 }}>{t}</div>
                <div
                  style={{
                    fontFamily: SCI.mono,
                    fontSize: 10,
                    color: SCI.ink3,
                    marginTop: 2,
                  }}
                >
                  {l}
                </div>
              </div>
              <div style={{ justifySelf: "end" }}>
                <Pill dark={i2 === "strong"}>{i2}</Pill>
              </div>
            </div>
          ))}
        </div>

        {/* Personal year + numerology */}
        <div
          style={{
            padding: "28px 32px",
            borderRight: `1px solid ${SCI.ink}`,
            background: SCI.tint2,
          }}
        >
          <MonoLabel>§ 03 · Numerology · personal year 7</MonoLabel>
          <div
            style={{
              fontFamily: SCI.display,
              fontSize: 108,
              lineHeight: 0.9,
              letterSpacing: -2,
              fontWeight: 500,
              margin: "8px 0 6px",
            }}
          >
            7
          </div>
          <div
            style={{
              fontFamily: SCI.display,
              fontSize: 20,
              lineHeight: 1.2,
              fontStyle: "italic",
              color: SCI.ink2,
              marginBottom: 14,
            }}
          >
            the year of retreat.
          </div>
          <div
            style={{
              height: 6,
              background: SCI.paper,
              border: `1px solid ${SCI.tint}`,
              position: "relative",
              marginBottom: 8,
            }}
          >
            <div
              style={{
                position: "absolute",
                inset: 0,
                right: "auto",
                width: "31%",
                background: SCI.orange,
              }}
            />
          </div>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              fontFamily: SCI.mono,
              fontSize: 10,
              color: SCI.ink3,
            }}
          >
            <span>JAN</span>
            <span>APR</span>
            <span>JUL</span>
            <span>OCT</span>
            <span>DEC</span>
          </div>
          <div
            style={{
              marginTop: 16,
              fontSize: 13,
              lineHeight: 1.5,
              color: SCI.ink2,
            }}
          >
            You are 31% into a year whose central task is quiet mastery. Expect
            plans made in April 2026 to feel irrelevant by October — that is the
            cycle doing its work.
          </div>
        </div>

        {/* Quick actions */}
        <div style={{ padding: "28px 32px" }}>
          <MonoLabel>§ 04 · Quick access</MonoLabel>
          <div
            style={{
              marginTop: 12,
              display: "grid",
              gridTemplateColumns: "1fr 1fr",
              gap: 8,
            }}
          >
            {quickActions.map(([t, s, route], i) => (
              <button
                key={i}
                type="button"
                onClick={() => onNavigate && onNavigate(route)}
                style={{
                  padding: "14px 14px",
                  border: `1px solid ${SCI.ink}`,
                  background: SCI.paper,
                  display: "flex",
                  flexDirection: "column",
                  gap: 6,
                  minHeight: 82,
                  textAlign: "left",
                  cursor: "pointer",
                }}
              >
                <div
                  style={{
                    fontFamily: SCI.display,
                    fontSize: 18,
                    lineHeight: 1.1,
                  }}
                >
                  {t}
                </div>
                <MonoLabel size={9} style={{ color: SCI.ink3 }}>
                  {s}
                </MonoLabel>
                <span
                  style={{
                    fontFamily: SCI.mono,
                    fontSize: 11,
                    marginTop: "auto",
                    alignSelf: "flex-end",
                  }}
                >
                  →
                </span>
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* Trend + upsell row */}
      <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr" }}>
        <div
          style={{ padding: "28px 32px", borderRight: `1px solid ${SCI.ink}` }}
        >
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "baseline",
              marginBottom: 12,
            }}
          >
            <MonoLabel>§ 05 · Your alignment · last 90 days</MonoLabel>
            <MonoLabel size={10} style={{ color: SCI.ink3 }}>
              mean 68 · σ 12
            </MonoLabel>
          </div>
          <div
            style={{
              background: SCI.tint2,
              border: `1px solid ${SCI.ink}`,
              padding: 18,
            }}
          >
            <Sparkline
              data={[
                62, 58, 66, 71, 64, 59, 68, 74, 81, 79, 72, 68, 61, 70, 77, 82,
                78, 72,
              ]}
              color={SCI.orange}
              height={80}
            />
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
                marginTop: 8,
                fontFamily: SCI.mono,
                fontSize: 10,
                color: SCI.ink3,
              }}
            >
              <span>JAN 22</span>
              <span>FEB 21</span>
              <span>MAR 21</span>
              <span>APR 21</span>
            </div>
          </div>
        </div>
        <div
          style={{
            padding: "28px 32px",
            background: SCI.ink,
            color: SCI.paper,
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
          }}
        >
          <MonoLabel style={{ color: "rgba(243,239,228,0.5)" }}>
            § 06 · Upgrade
          </MonoLabel>
          <div
            style={{
              fontFamily: SCI.display,
              fontSize: 30,
              lineHeight: 1.1,
              letterSpacing: -0.4,
              margin: "12px 0",
            }}
          >
            Inner Circle
            <br />
            unlocks chat<span style={{ color: SCI.orange }}>.</span>
          </div>
          <div
            style={{
              fontSize: 13,
              lineHeight: 1.55,
              opacity: 0.85,
              marginBottom: 16,
            }}
          >
            Ask follow-up questions of your blueprint, quarterly transit
            re-runs, full relationship suite. $120 more, retroactive credit
            applied.
          </div>
          <SciBtn
            size="lg"
            icon="→"
            onClick={() => {
              if (onUpgrade) onUpgrade();
              else if (onNavigate) onNavigate("/checkout");
            }}
            style={{
              background: SCI.paper,
              color: SCI.ink,
              border: `1px solid ${SCI.paper}`,
              alignSelf: "flex-start",
            }}
          >
            Upgrade to Inner Circle
          </SciBtn>
        </div>
      </div>
    </div>
  );
}

function SciDashboardMobile({ onUpgrade, onNavigate }) {
  return (
    <div
      style={{
        width: 390,
        background: SCI.paper,
        color: SCI.ink,
        fontFamily: SCI.body,
        border: `1px solid ${SCI.ink}`,
      }}
    >
      <div
        style={{
          height: 52,
          borderBottom: `1px solid ${SCI.ink}`,
          display: "flex",
          alignItems: "center",
          padding: "0 18px",
          justifyContent: "space-between",
        }}
      >
        <div style={{ fontFamily: SCI.display, fontSize: 18 }}>Tamashi</div>
        <MonoLabel size={9}>J.D. · BLUEPRINT</MonoLabel>
      </div>
      <div
        style={{
          padding: "8px 18px",
          fontFamily: SCI.mono,
          fontSize: 9,
          color: SCI.ink3,
          borderBottom: `1px solid ${SCI.tint}`,
          display: "flex",
          justifyContent: "space-between",
        }}
      >
        <span>TUE 21.APR</span>
        <span>☉ 01°♉</span>
        <span>☽ 14°♌</span>
      </div>
      <div style={{ padding: "24px 20px 22px" }}>
        <MonoLabel>§ 01 · Daily</MonoLabel>
        <h1
          style={{
            fontFamily: SCI.display,
            fontSize: 40,
            lineHeight: 0.95,
            letterSpacing: -0.6,
            fontWeight: 500,
            margin: "10px 0 12px",
          }}
        >
          A <span style={{ fontStyle: "italic" }}>builder's</span> quiet
          Tuesday.
        </h1>
        <div
          style={{
            fontSize: 14,
            lineHeight: 1.55,
            color: SCI.ink2,
            marginBottom: 16,
          }}
        >
          Transit weather favors solitary work. Productivity +18% over baseline.
        </div>
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: 14,
            padding: "14px 0",
            borderTop: `1px solid ${SCI.tint}`,
            borderBottom: `1px solid ${SCI.tint}`,
          }}
        >
          <div style={{ width: 72, height: 72, position: "relative" }}>
            <svg viewBox="0 0 100 100">
              <circle
                cx="50"
                cy="50"
                r="44"
                fill="none"
                stroke={SCI.tint}
                strokeWidth="8"
              />
              <circle
                cx="50"
                cy="50"
                r="44"
                fill="none"
                stroke={SCI.ink}
                strokeWidth="8"
                strokeDasharray={`${Math.PI * 88 * 0.72} ${Math.PI * 88}`}
                transform="rotate(-90 50 50)"
              />
              <text
                x="50"
                y="58"
                fontFamily={SCI.display}
                fontSize="28"
                textAnchor="middle"
                fill={SCI.ink}
              >
                72
              </text>
            </svg>
          </div>
          <div>
            <MonoLabel size={10}>Alignment</MonoLabel>
            <div
              style={{
                fontSize: 13,
                lineHeight: 1.4,
                marginTop: 4,
                color: SCI.ink2,
              }}
            >
              Productivity 84 · Introspection 91 · Social 41
            </div>
          </div>
        </div>
      </div>

      <div
        style={{
          padding: "20px",
          borderTop: `1px solid ${SCI.ink}`,
          background: SCI.tint2,
        }}
      >
        <MonoLabel>§ 02 · Personal year</MonoLabel>
        <div
          style={{
            fontFamily: SCI.display,
            fontSize: 72,
            lineHeight: 0.9,
            letterSpacing: -1.2,
            fontWeight: 500,
            margin: "6px 0 4px",
          }}
        >
          7
        </div>
        <div
          style={{
            fontFamily: SCI.display,
            fontSize: 16,
            fontStyle: "italic",
            color: SCI.ink2,
            marginBottom: 10,
          }}
        >
          the year of retreat.
        </div>
        <div
          style={{
            height: 5,
            background: SCI.paper,
            border: `1px solid ${SCI.tint}`,
            position: "relative",
          }}
        >
          <div
            style={{
              position: "absolute",
              inset: 0,
              right: "auto",
              width: "31%",
              background: SCI.orange,
            }}
          />
        </div>
        <MonoLabel
          size={9}
          style={{ color: SCI.ink3, marginTop: 6, display: "block" }}
        >
          31% through the cycle
        </MonoLabel>
      </div>

      <div style={{ padding: "20px", borderTop: `1px solid ${SCI.ink}` }}>
        <MonoLabel>§ 03 · Transits</MonoLabel>
        <div style={{ marginTop: 8 }}>
          {[
            ["APR 24", "Mars → 10H", "strong"],
            ["APR 28", "Venus ∆ ☉", "mild"],
            ["MAY 02", "Full ☽ ♏", "strong"],
          ].map(([d, t, s], i) => (
            <div
              key={i}
              style={{
                display: "grid",
                gridTemplateColumns: "64px 1fr 54px",
                gap: 10,
                alignItems: "center",
                padding: "10px 0",
                borderBottom: i < 2 ? `1px solid ${SCI.tint}` : "none",
              }}
            >
              <MonoLabel size={9}>{d}</MonoLabel>
              <span style={{ fontSize: 13 }}>{t}</span>
              <Pill dark={s === "strong"}>{s}</Pill>
            </div>
          ))}
        </div>
      </div>

      <div
        style={{
          padding: "20px",
          borderTop: `1px solid ${SCI.ink}`,
          background: SCI.ink,
          color: SCI.paper,
        }}
      >
        <MonoLabel style={{ color: "rgba(243,239,228,0.5)" }}>
          § 04 · Upgrade
        </MonoLabel>
        <div
          style={{
            fontFamily: SCI.display,
            fontSize: 22,
            lineHeight: 1.1,
            margin: "8px 0 10px",
          }}
        >
          Inner Circle
          <br />
          unlocks chat<span style={{ color: SCI.orange }}>.</span>
        </div>
        <SciBtn
          size="md"
          w="100%"
          icon="→"
          onClick={() => {
            if (onUpgrade) onUpgrade();
            else if (onNavigate) onNavigate("/checkout");
          }}
          style={{
            background: SCI.paper,
            color: SCI.ink,
            border: `1px solid ${SCI.paper}`,
          }}
        >
          Upgrade · $120
        </SciBtn>
      </div>
    </div>
  );
}

Object.assign(window, {
  SciBlueprintDesktop,
  SciBlueprintMobile,
  SciDashboardDesktop,
  SciDashboardMobile,
});