// Amara — page components for 4-tier product line.
// Loaded after science-hifi.jsx, before tamashi-runtime.jsx.

const TRADITIONS_8 = [
  { n: "Western Astrology", cat: "Mediterranean", k: "western", readings: 5, desc: "Natal chart, houses, aspects, transits" },
  { n: "Vedic Jyotish", cat: "South Asian", k: "vedic", readings: 5, desc: "Lagna, nakshatra, dasha, yogas" },
  { n: "Chinese Ba Zi", cat: "East Asian", k: "chinese", readings: 4, desc: "Four pillars, yearly forecast, luck pillars" },
  { n: "Numerology", cat: "Universal", k: "psych", readings: 6, desc: "Life path, destiny, soul urge, personal year" },
  { n: "Astrocartography", cat: "Global", k: "western", readings: 3, desc: "Planetary lines, relocation, power zones" },
  { n: "Human Design", cat: "Modern", k: "psych", readings: 4, desc: "Bodygraph, type, strategy, authority" },
  { n: "Tarot Birth Cards", cat: "Archetypal", k: "psych", readings: 3, desc: "Birth card, quintessence, elemental dignities" },
  { n: "Mayan Tzolk'in", cat: "Mesoamerican", k: "maya", readings: 3, desc: "Day-sign, galactic tone, trecena" },
];

function AmaraNav({ active, onSignIn, user, onSignOut }) {
  return (
    <div style={{ display: "flex", alignItems: "stretch", height: 64, borderBottom: `1px solid ${SCI.border}`, background: SCI.paper }}>
      <div style={{ padding: "0 28px", display: "flex", alignItems: "center", borderRight: `1px solid ${SCI.border}`, gap: 10 }}>
        <svg width="18" height="18" viewBox="0 0 18 18">
          <circle cx="9" cy="9" r="8" fill="none" stroke={SCI.ink} strokeWidth="1"/>
          <circle cx="9" cy="9" r="3.2" fill={SCI.ink}/>
          <circle cx="14.5" cy="5" r="1.6" fill={SCI.orange}/>
        </svg>
        <div style={{ fontFamily: SCI.display, fontSize: 22, letterSpacing: -0.3, fontWeight: 500 }}>Amara</div>
      </div>
      <div style={{ flex: 1, display: "flex", alignItems: "center", padding: "0 28px", gap: 32, fontSize: 13 }}>
        {[
          { href: "methodology", label: "How It Works" },
          { href: "sample-reading", label: "Sample" },
          { href: "library", label: "My Library" },
        ].map((n) => (
          <a key={n.href} href={n.href} style={{
            color: active === n.label ? SCI.ink : SCI.ink2,
            borderBottom: active === n.label ? `1.5px solid ${SCI.border}` : "none",
            padding: "4px 0", textDecoration: "none", fontFamily: SCI.body, fontSize: 13,
          }}>{n.label}</a>
        ))}
      </div>
      <div style={{ borderLeft: `1px solid ${SCI.border}`, padding: "0 18px", display: "flex", alignItems: "center", gap: 10 }}>
        {user ? (
          <button onClick={onSignOut} style={{ fontSize: 12, color: SCI.ink2, border: "none", background: "none", cursor: "pointer", fontFamily: SCI.body }}>Sign out</button>
        ) : (
          <button onClick={onSignIn} style={{ fontSize: 12, color: SCI.ink2, border: "none", background: "none", cursor: "pointer", fontFamily: SCI.body }}>Sign in</button>
        )}
        <a href="begin-intake" style={{
          display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8, height: 34, padding: "0 14px",
          background: SCI.ink, color: SCI.paper, border: `1px solid ${SCI.border}`, fontFamily: SCI.body, fontSize: 12, fontWeight: 500, textDecoration: "none",
        }}>Begin →</a>
      </div>
    </div>
  );
}

function TraditionGlyph({ kind }) {
  const s = { width: "100%", aspectRatio: "1/1" };
  if (kind === "psych") return (
    <svg viewBox="0 0 60 60" style={s}>
      {[0.88, 0.72, 0.55, 0.64, 0.32].map((v, i) => (
        <g key={i}>
          <rect x="8" y={8 + i * 10} width="44" height="4" fill={SCI.tint}/>
          <rect x="8" y={8 + i * 10} width={44 * v} height="4" fill={i === 0 ? SCI.orange : SCI.ink}/>
        </g>
      ))}
    </svg>
  );
  if (kind === "western") return (
    <svg viewBox="0 0 60 60" style={s}>
      <circle cx="30" cy="30" r="22" fill="none" stroke={SCI.ink}/>
      <circle cx="30" cy="30" r="14" fill="none" stroke={SCI.ink} strokeWidth="0.6"/>
      {Array.from({ length: 12 }).map((_, i) => {
        const a = (i * Math.PI) / 6;
        return <line key={i} x1={30 + Math.cos(a) * 14} y1={30 + Math.sin(a) * 14} x2={30 + Math.cos(a) * 22} y2={30 + Math.sin(a) * 22} stroke={SCI.ink} strokeWidth="0.6"/>;
      })}
      <circle cx="44" cy="22" r="2" fill={SCI.orange}/>
    </svg>
  );
  if (kind === "vedic") return (
    <svg viewBox="0 0 60 60" style={s}>
      <rect x="8" y="8" width="44" height="44" fill="none" stroke={SCI.ink}/>
      <line x1="8" y1="8" x2="52" y2="52" stroke={SCI.ink} strokeWidth="0.7"/>
      <line x1="52" y1="8" x2="8" y2="52" stroke={SCI.ink} strokeWidth="0.7"/>
      <line x1="30" y1="8" x2="8" y2="30" stroke={SCI.ink} strokeWidth="0.7"/>
      <line x1="30" y1="8" x2="52" y2="30" stroke={SCI.ink} strokeWidth="0.7"/>
      <line x1="30" y1="52" x2="8" y2="30" stroke={SCI.ink} strokeWidth="0.7"/>
      <line x1="30" y1="52" x2="52" y2="30" stroke={SCI.ink} strokeWidth="0.7"/>
      <circle cx="30" cy="38" r="2.4" fill={SCI.orange}/>
    </svg>
  );
  if (kind === "chinese") return (
    <svg viewBox="0 0 60 60" style={s}>
      {[0, 1, 2, 3].map((i) => (
        <g key={i}>
          <rect x={8 + i * 11} y="14" width="9" height="32" fill="none" stroke={SCI.ink}/>
          <rect x={8 + i * 11} y={14 + [4, 12, 8, 18][i]} width="9" height="6" fill={i === 2 ? SCI.orange : SCI.ink}/>
        </g>
      ))}
    </svg>
  );
  if (kind === "maya") return (
    <svg viewBox="0 0 60 60" style={s}>
      <rect x="14" y="14" width="32" height="3.5" fill={SCI.ink}/>
      <rect x="14" y="22" width="32" height="3.5" fill={SCI.ink}/>
      {[0, 1, 2].map((i) => (
        <circle key={i} cx={20 + i * 10} cy="34" r="2.5" fill={i === 1 ? SCI.orange : SCI.ink}/>
      ))}
      <rect x="14" y="42" width="32" height="3.5" fill={SCI.ink}/>
    </svg>
  );
  return <svg viewBox="0 0 60 60" style={s}><circle cx="30" cy="30" r="20" fill="none" stroke={SCI.ink}/></svg>;
}

// ── CHECKOUT PAGE ─────────────────────────────────────────
function SciCheckoutDesktop({ onPay, busy, tier, tierName, tierPrice }) {
  return (
    <div style={{ width: 1400, background: SCI.paper, color: SCI.ink, fontFamily: SCI.body, border: `1px solid ${SCI.border}` }}>
      <AmaraNav active="Pricing"/>
      <div style={{ padding: "10px 56px", borderBottom: `1px solid ${SCI.tint}`, fontFamily: SCI.mono, fontSize: 10, color: SCI.ink2, display: "flex", justifyContent: "space-between" }}>
        <span>§ CHECKOUT · Secure · Stripe</span>
        <span>No stored cards</span>
        <span>{new Date().toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" })}</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", minHeight: 780 }}>
        <div style={{ padding: "48px 56px", borderRight: `1px solid ${SCI.border}` }}>
          <MonoLabel>§ Payment</MonoLabel>
          <h1 style={{ fontFamily: SCI.display, fontSize: 54, lineHeight: 0.96, margin: "12px 0 24px", letterSpacing: -0.7, fontWeight: 500 }}>
            One payment, <span style={{ fontStyle: "italic" }}>once.</span>
          </h1>
          <div style={{ fontSize: 15, lineHeight: 1.55, color: SCI.ink2, marginBottom: 24, maxWidth: 520 }}>
            Your reading begins the moment you complete checkout. Delivered to your email within the promised timeframe — PDF, audio, and source data. Written by hand.
          </div>
          <SciBtn primary size="lg" w="100%" icon="→" onClick={onPay} disabled={busy}
            style={{ background: SCI.orange, borderColor: SCI.orange }}>
            {busy ? "Opening Stripe…" : `Pay ${tierPrice} · ${tierName}`}
          </SciBtn>
          <div style={{ fontFamily: SCI.mono, fontSize: 10, color: SCI.ink3, letterSpacing: 0.5, marginTop: 14, textAlign: "center" }}>
            14-DAY REFUND · DELIVERED BY EMAIL
          </div>
        </div>
        <div style={{ padding: "48px 56px", background: SCI.tint2 }}>
          <MonoLabel>§ Order</MonoLabel>
          <div style={{ fontFamily: SCI.display, fontSize: 34, lineHeight: 1, margin: "12px 0 18px", letterSpacing: -0.4 }}>{tierName}</div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginBottom: 18 }}>
            <span style={{ fontFamily: SCI.display, fontSize: 48, letterSpacing: -1 }}>{tierPrice}</span>
            <span style={{ fontFamily: SCI.mono, fontSize: 11, color: SCI.ink3 }}>USD</span>
          </div>
          <div style={{ fontSize: 13, lineHeight: 1.55, color: SCI.ink2, marginBottom: 22 }}>
            {tier === "daily_sign" && "Daily horoscope, tarot card, and rune pull — three readings delivered every morning. Pause or cancel anytime."}
            {tier === "love_union" && "Two charts, one reading. Synastry, composite chart, love languages, compatibility score, and relationship timing — for you and someone you care about."}
            {tier === "atlas" && "Eight traditions read against your specific life. A convergence atlas — only the chapters where multiple traditions agreed. PDF + audio within 7 days."}
            {tier === "whole_world" && "Every reading we offer. The Atlas, Love & Union, Wellness, Career, and a year of daily horoscopes. Lifetime access with free updates."}
          </div>
          <div style={{ borderTop: `1px solid ${SCI.border}` }}>
            {[
              ...(tier === "daily_sign" ? [
                ["Daily horoscope", "Included"], ["Daily tarot pull", "Included"], ["Daily rune pull", "Included"], ["Cancel anytime", "Yes"]
              ] : []),
              ...(tier === "love_union" ? [
                ["Synastry chart", "Included"], ["Composite chart", "Included"], ["Love languages", "Included"], ["Compatibility score", "Included"], ["Relationship timing", "Included"], ["PDF + audio", "Included"]
              ] : []),
              ...(tier === "atlas" ? [
                ["8 traditions · ~38 readings", "Included"], ["Convergence matrix", "Included"], ["8 chapters · ~8,000 words", "Included"], ["Audio · 38 min · my voice", "Included"], ["Lifetime PDF", "Included"], ["Chat with your atlas", "Included"]
              ] : []),
              ...(tier === "whole_world" ? [
                ["Everything in The Atlas", "Included"], ["Love & Union reading", "Included"], ["Wellness score + calendar", "Included"], ["Career analysis", "Included"], ["Year of horoscopes", "Included"], ["Lifetime access", "Included"]
              ] : []),
            ].map(([k, v]) => (
              <div key={k} style={{ display: "flex", justifyContent: "space-between", padding: "10px 0", borderBottom: `1px solid ${SCI.tint}` }}>
                <span style={{ fontSize: 13 }}>{k}</span>
                <span style={{ fontFamily: SCI.mono, fontSize: 12, color: v === "Included" ? SCI.ink3 : SCI.ink }}>{v}</span>
              </div>
            ))}
            <div style={{ display: "flex", justifyContent: "space-between", padding: "16px 0 6px", alignItems: "baseline" }}>
              <span style={{ fontFamily: SCI.display, fontSize: 20 }}>Total</span>
              <span style={{ fontFamily: SCI.display, fontSize: 36, letterSpacing: -0.5 }}>{tierPrice}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function SciCheckoutMobile({ onPay, busy, tier, tierName, tierPrice }) {
  return (
    <div style={{ width: 390, background: SCI.paper, color: SCI.ink, fontFamily: SCI.body, border: `1px solid ${SCI.border}` }}>
      <div style={{ height: 52, borderBottom: `1px solid ${SCI.border}`, display: "flex", alignItems: "center", padding: "0 16px", justifyContent: "space-between" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <svg width="16" height="16" viewBox="0 0 18 18"><circle cx="9" cy="9" r="8" fill="none" stroke={SCI.ink} strokeWidth="1"/><circle cx="9" cy="9" r="3" fill={SCI.ink}/><circle cx="14" cy="5" r="1.4" fill={SCI.orange}/></svg>
          <div style={{ fontFamily: SCI.display, fontSize: 18, fontWeight: 500 }}>Amara</div>
        </div>
        <MonoLabel size={9}>Checkout</MonoLabel>
      </div>
      <div style={{ padding: "32px 20px 24px" }}>
        <MonoLabel>§ Payment</MonoLabel>
        <h1 style={{ fontFamily: SCI.display, fontSize: 38, lineHeight: 0.95, margin: "10px 0 14px", letterSpacing: -0.5, fontWeight: 500 }}>
          One payment, <span style={{ fontStyle: "italic" }}>once.</span>
        </h1>
        <div style={{ fontSize: 14, lineHeight: 1.55, color: SCI.ink2, marginBottom: 20 }}>
          {tierName} — delivered to your email.
        </div>
        <SciBtn primary size="lg" w="100%" onClick={onPay} disabled={busy}
          style={{ background: SCI.orange, borderColor: SCI.orange }}>
          {busy ? "Opening Stripe…" : `Pay ${tierPrice} · ${tierName}`}
        </SciBtn>
      </div>
      <div style={{ borderTop: `1px solid ${SCI.border}`, padding: "20px 20px", background: SCI.tint2 }}>
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
          <span style={{ fontFamily: SCI.display, fontSize: 20 }}>{tierName}</span>
          <span style={{ fontFamily: SCI.display, fontSize: 24 }}>{tierPrice}</span>
        </div>
        <MonoLabel size={10} style={{ color: SCI.ink3 }}>
          {tier === "daily_sign" ? "Daily readings · cancel anytime" : tier === "love_union" ? "Two-person reading · PDF + audio" : tier === "atlas" ? "8 traditions · ~38 readings · PDF + audio" : "Everything bundle · lifetime access"}
        </MonoLabel>
      </div>
    </div>
  );
}

// ── CONFIRMATION PAGE ──────────────────────────────────────
function SciConfirmDesktop({ onWatchReport, onUpgrade }) {
  return (
    <div style={{ width: 1400, background: SCI.paper, color: SCI.ink, fontFamily: SCI.body, border: `1px solid ${SCI.border}` }}>
      <AmaraNav/>
      <div style={{ padding: "72px 56px 56px", maxWidth: 820, margin: "0 auto" }}>
        <MonoLabel>§ Confirmation</MonoLabel>
        <h1 style={{ fontFamily: SCI.display, fontSize: "clamp(40px, 5.4vw, 68px)", fontWeight: 500, letterSpacing: -1, lineHeight: 1, margin: "14px 0 18px" }}>
          Your reading is <em style={{ fontStyle: "italic" }}>in motion.</em>
        </h1>
        <p style={{ fontFamily: SCI.display, fontSize: 21, color: SCI.ink2, lineHeight: 1.5, maxWidth: 620, fontStyle: "italic" }}>
          Thank you. Your intake is on my desk and the work begins tonight. Your reading arrives by email — PDF, audio, and source charts. Written by hand.
        </p>
        <div style={{ marginTop: 32, border: `1px solid ${SCI.border}`, padding: "28px 26px", background: SCI.paper }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <div>
              <MonoLabel>Order confirmed</MonoLabel>
              <div style={{ fontFamily: SCI.display, fontSize: 28, fontWeight: 500, marginTop: 4 }}>Thank you</div>
            </div>
            <div style={{ fontFamily: SCI.display, fontSize: 28, fontWeight: 500, color: SCI.orange }}>✓ Paid</div>
          </div>
          <div style={{ margin: "18px 0", height: 1, background: SCI.rule }}/>
          <div style={{ display: "flex", gap: 8 }}>
            <Pill accent>7-day delivery</Pill><Pill>14-day refund</Pill>
          </div>
        </div>
        <div style={{ marginTop: 28 }}>
          <h2 style={{ fontFamily: SCI.display, fontSize: 28, fontWeight: 500, margin: "0 0 14px" }}>What happens next</h2>
          <ol style={{ padding: 0, margin: 0, listStyle: "none", fontSize: 15, lineHeight: 1.55, color: SCI.ink2 }}>
            {[
              ["A confirmation email", "Lands in your inbox in the next few minutes."],
              ["The reading begins", "I read all eight charts by hand. Most chapters are written between days two and five."],
              ["Your reading arrives", "Within the promised timeframe — PDF, audio, source charts, all in one email."],
              ["A Day-31 letter", "A short note from me, sent a month after delivery, on what tends to surface."],
            ].map(([t, b], i) => (
              <li key={i} style={{ borderTop: `1px solid ${SCI.tint}`, padding: "14px 0", display: "flex", gap: 16 }}>
                <span style={{ fontFamily: SCI.mono, fontSize: 10.5, color: SCI.ink3, letterSpacing: 1.3, textTransform: "uppercase", paddingTop: 3, minWidth: 28 }}>{String(i + 1).padStart(2, "0")}</span>
                <div><div style={{ fontFamily: SCI.display, fontSize: 20, fontWeight: 500 }}>{t}</div><div style={{ marginTop: 4 }}>{b}</div></div>
              </li>
            ))}
          </ol>
        </div>
        <div style={{ marginTop: 28, display: "flex", gap: 12 }}>
          <SciBtn href="library" primary>Open your library →</SciBtn>
          <SciBtn href="mailto:amara@amara.io">Write to Amara</SciBtn>
        </div>
      </div>
    </div>
  );
}

function SciConfirmMobile() {
  return (
    <div style={{ width: 390, background: SCI.paper, color: SCI.ink, fontFamily: SCI.body, border: `1px solid ${SCI.border}` }}>
      <div style={{ height: 52, borderBottom: `1px solid ${SCI.border}`, display: "flex", alignItems: "center", padding: "0 16px", justifyContent: "space-between" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <svg width="16" height="16" viewBox="0 0 18 18"><circle cx="9" cy="9" r="8" fill="none" stroke={SCI.ink} strokeWidth="1"/><circle cx="9" cy="9" r="3" fill={SCI.ink}/><circle cx="14" cy="5" r="1.4" fill={SCI.orange}/></svg>
          <div style={{ fontFamily: SCI.display, fontSize: 18, fontWeight: 500 }}>Amara</div>
        </div>
      </div>
      <div style={{ padding: "32px 20px 24px" }}>
        <MonoLabel>§ Confirmation</MonoLabel>
        <h1 style={{ fontFamily: SCI.display, fontSize: 36, lineHeight: 0.95, margin: "10px 0 14px", letterSpacing: -0.5, fontWeight: 500 }}>
          Your reading is <em style={{ fontStyle: "italic" }}>in motion.</em>
        </h1>
        <div style={{ fontSize: 14, lineHeight: 1.55, color: SCI.ink2, marginBottom: 20 }}>
          Thank you. Your intake is on my desk and the work begins tonight. Delivered to your email.
        </div>
        <SciBtn href="library" primary w="100%" size="lg">Open your library →</SciBtn>
      </div>
    </div>
  );
}

// ── DASHBOARD / LIBRARY ───────────────────────────────────
function SciDashboardDesktop({ onNavigate, onUpgrade }) {
  return (
    <div style={{ width: 1400, background: SCI.paper, color: SCI.ink, fontFamily: SCI.body, border: `1px solid ${SCI.border}` }}>
      <AmaraNav active="My Library"/>
      <div style={{ padding: "48px 56px 28px", borderBottom: `1px solid ${SCI.border}` }}>
        <MonoLabel>§ Library · Your readings</MonoLabel>
        <h1 style={{ fontFamily: SCI.display, fontSize: 72, lineHeight: 0.95, margin: "12px 0 0", letterSpacing: -1.2, fontWeight: 500 }}>
          Your atlases, <span style={{ fontStyle: "italic" }}>complete.</span>
        </h1>
        <div style={{ marginTop: 12, fontSize: 14, lineHeight: 1.55, color: SCI.ink2, maxWidth: 600 }}>
          All eight traditions, ~38 readings. Written by hand, delivered by email. Yours, kept on your account, exportable any time.
        </div>
      </div>
      <div style={{ padding: "48px 56px", display: "flex", flexDirection: "column", alignItems: "center", gap: 16 }}>
        <div style={{ fontFamily: SCI.display, fontSize: 24, color: SCI.ink2, fontStyle: "italic" }}>No atlases yet.</div>
        <div style={{ fontSize: 14, color: SCI.ink3 }}>Your completed readings will appear here after your order is processed.</div>
        <SciBtn href="begin-intake" primary size="lg">Begin your intake →</SciBtn>
      </div>
    </div>
  );
}

function SciDashboardMobile() {
  return (
    <div style={{ width: 390, background: SCI.paper, color: SCI.ink, fontFamily: SCI.body, border: `1px solid ${SCI.border}` }}>
      <div style={{ height: 52, borderBottom: `1px solid ${SCI.border}`, display: "flex", alignItems: "center", padding: "0 16px", justifyContent: "space-between" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <svg width="16" height="16" viewBox="0 0 18 18"><circle cx="9" cy="9" r="8" fill="none" stroke={SCI.ink} strokeWidth="1"/><circle cx="9" cy="9" r="3" fill={SCI.ink}/><circle cx="14" cy="5" r="1.4" fill={SCI.orange}/></svg>
          <div style={{ fontFamily: SCI.display, fontSize: 18, fontWeight: 500 }}>Amara</div>
        </div>
        <MonoLabel size={9}>Library</MonoLabel>
      </div>
      <div style={{ padding: "32px 20px 24px" }}>
        <MonoLabel>§ Library</MonoLabel>
        <h1 style={{ fontFamily: SCI.display, fontSize: 36, lineHeight: 0.95, margin: "10px 0 14px", letterSpacing: -0.5, fontWeight: 500 }}>Your atlases.</h1>
        <div style={{ fontSize: 14, lineHeight: 1.55, color: SCI.ink2, marginBottom: 16 }}>Your completed readings appear here.</div>
        <SciBtn href="begin-intake" primary size="lg" w="100%">Begin your intake →</SciBtn>
      </div>
    </div>
  );
}

// ── METHODOLOGY PAGE ──────────────────────────────────────
function AmaraMethodologyPage() {
  return (
    <div style={{ width: 1400, background: SCI.paper, color: SCI.ink, fontFamily: SCI.body, border: `1px solid ${SCI.border}` }}>
      <AmaraNav active="How It Works"/>
      <div style={{ padding: "10px 56px", borderBottom: `1px solid ${SCI.tint}`, fontFamily: SCI.mono, fontSize: 10, color: SCI.ink2, display: "flex", justifyContent: "space-between" }}>
        <span>§ Methodology · Amara Idris</span><span>Open · Cited · Updated 2026</span><span>{new Date().toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" })}</span>
      </div>
      <div style={{ padding: "56px 56px 36px", borderBottom: `1px solid ${SCI.border}`, display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 48 }}>
        <div>
          <MonoLabel>§ 00 · What this document is</MonoLabel>
          <h1 style={{ fontFamily: SCI.display, fontSize: 78, lineHeight: 0.95, margin: "14px 0 18px", letterSpacing: -1.1, fontWeight: 500 }}>
            How I read,<br/><span style={{ fontStyle: "italic" }}>and where I disagree with myself.</span>
          </h1>
          <div style={{ fontSize: 16, lineHeight: 1.65, color: SCI.ink2 }}>
            This is the working methodology behind every atlas I write. It is updated when I change my mind — I publish the diff. Read it before you order, or don't; it is here either way.
          </div>
        </div>
        <div style={{ padding: "24px 28px", background: SCI.tint2, border: `1px solid ${SCI.border}` }}>
          <MonoLabel>Contents</MonoLabel>
          <div style={{ marginTop: 14 }}>
            {[["§ 01", "The eight traditions"],["§ 02", "How a reading is run"],["§ 03", "Convergence math"],["§ 04", "What I will not write"],["§ 05", "Source list"],["§ 06", "Changelog"]].map(([n, t]) => (
              <div key={n} style={{ display: "grid", gridTemplateColumns: "56px 1fr", gap: 10, padding: "8px 0", borderBottom: `1px solid ${SCI.tint}`, fontSize: 13 }}><span style={{ fontFamily: SCI.mono, fontSize: 11, color: SCI.ink3 }}>{n}</span><span>{t}</span></div>
            ))}
          </div>
        </div>
      </div>
      <div style={{ padding: "48px 56px", borderBottom: `1px solid ${SCI.border}` }}>
        <MonoLabel>§ 01 · The eight traditions</MonoLabel>
        <h2 style={{ fontFamily: SCI.display, fontSize: 42, lineHeight: 1, margin: "10px 0 24px", letterSpacing: -0.5, fontWeight: 500 }}>Eight systems. Each reads independently. Then we compare.</h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, border: `1px solid ${SCI.border}` }}>
          {TRADITIONS_8.map((t, i) => (
            <div key={i} style={{ padding: "18px 18px 22px", borderRight: (i % 4) < 3 ? `1px solid ${SCI.border}` : "none", borderBottom: i < 4 ? `1px solid ${SCI.border}` : "none", display: "flex", flexDirection: "column", gap: 10, minHeight: 180 }}>
              <div style={{ width: 44 }}><TraditionGlyph kind={t.k}/></div>
              <div style={{ fontFamily: SCI.display, fontSize: 19, lineHeight: 1.1 }}>{t.n}</div>
              <div style={{ fontSize: 12, lineHeight: 1.4, color: SCI.ink2 }}>{t.desc}</div>
              <MonoLabel size={9} style={{ color: SCI.ink3 }}>{t.cat} · {t.readings} readings</MonoLabel>
            </div>
          ))}
        </div>
      </div>
      <div style={{ padding: "48px 56px", borderBottom: `1px solid ${SCI.border}`, background: SCI.tint2 }}>
        <MonoLabel>§ 02 · How a reading is run</MonoLabel>
        <h2 style={{ fontFamily: SCI.display, fontSize: 42, lineHeight: 1, margin: "10px 0 18px", letterSpacing: -0.5, fontWeight: 500 }}>Three quiet hours, one system at a time.</h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, border: `1px solid ${SCI.border}`, background: SCI.paper }}>
          {[["00:00", "Open intake · re-read your words"],["00:30", "Run all 8 traditions in one sitting"],["02:00", "Note convergences · sleep on it"],["02:30", "Write the atlas · graphite, then ink"]].map(([t, b], i) => (
            <div key={i} style={{ padding: "22px 22px", borderRight: i < 3 ? `1px solid ${SCI.border}` : "none", display: "flex", flexDirection: "column", gap: 10, minHeight: 150 }}>
              <div style={{ fontFamily: SCI.display, fontSize: 28, color: i === 2 ? SCI.orange : SCI.ink, letterSpacing: -0.4 }}>{t}</div>
              <div style={{ fontSize: 13, lineHeight: 1.5, color: SCI.ink2 }}>{b}</div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ padding: "48px 56px", borderBottom: `1px solid ${SCI.border}` }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48 }}>
          <div>
            <MonoLabel>§ 03 · Convergence</MonoLabel>
            <h2 style={{ fontFamily: SCI.display, fontSize: 42, lineHeight: 1, margin: "10px 0 18px", letterSpacing: -0.5, fontWeight: 500 }}>The math is open.</h2>
            <div style={{ fontSize: 14, lineHeight: 1.65, color: SCI.ink2, marginBottom: 18 }}>
              For each claim a tradition makes, I count how many of the other seven, read independently, return something I judge equivalent. The judgement is mine. The counting is the math. Only claims where <strong>four or more</strong> agree become chapters.
            </div>
            <div style={{ padding: "20px 24px", background: SCI.ink, color: SCI.paper, fontFamily: SCI.mono, fontSize: 13, lineHeight: 1.7 }}>
              c(claim) = |{`{`} t ∈ T-{`{`}t₀{`}`} : t ⊨ claim {`}`} |<br/>
              chapter ⇐ c(claim) ≥ <span style={{ color: SCI.orange }}>4</span>
            </div>
          </div>
        </div>
      </div>
      <div style={{ padding: "48px 56px", borderBottom: `1px solid ${SCI.border}`, background: SCI.ink, color: SCI.paper }}>
        <MonoLabel style={{ color: "rgba(243,239,228,0.55)" }}>§ 04 · Five lines I do not cross</MonoLabel>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 0, borderTop: "1px solid rgba(243,239,228,0.2)", marginTop: 24 }}>
          {[["Specific death dates","I read longevity in tendencies, not dates."],["Medical predictions","Bodies are not chart objects."],["Whether to leave a person","You will know. The chart only confirms."],["Anything I cannot footnote","If I cannot cite it, it does not go in the atlas."],["Anyone else's chart","I read only the person who hired me."]].map(([t, b], i) => (
            <div key={i} style={{ padding: "22px 22px 28px", borderRight: i < 4 ? "1px solid rgba(243,239,228,0.2)" : "none", minHeight: 160 }}>
              <div style={{ fontFamily: SCI.display, fontSize: 18, lineHeight: 1.15, color: SCI.orange, marginBottom: 8 }}>—</div>
              <div style={{ fontFamily: SCI.display, fontSize: 18, lineHeight: 1.15, marginBottom: 6 }}>{t}</div>
              <div style={{ fontSize: 12, lineHeight: 1.5, opacity: 0.75 }}>{b}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── SAMPLE READING PAGE ──────────────────────────────────
function AmaraSampleReadingPage() {
  return (
    <div style={{ width: 1400, background: SCI.paper, color: SCI.ink, fontFamily: SCI.body, border: `1px solid ${SCI.border}` }}>
      <AmaraNav active="Sample"/>
      <div style={{ padding: "10px 56px", borderBottom: `1px solid ${SCI.tint}`, fontFamily: SCI.mono, fontSize: 10, color: SCI.ink2, display: "flex", justifyContent: "space-between" }}>
        <span>§ Sample · L. Kowalski · Atlas</span><span>5 of 8 traditions agree · Convergence 0.62</span><span>Written · Amara Idris</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "260px 1fr 320px", minHeight: 1000 }}>
        <div style={{ borderRight: `1px solid ${SCI.border}`, padding: "36px 24px", background: SCI.tint2 }}>
          <MonoLabel>Chapters · 8</MonoLabel>
          <div style={{ marginTop: 18 }}>
            {[["I", "Of body and breath", 5, false],["II", "Of mind and inheritance", 6, false],["III", "Of season and timing", 4, false],["IV", "Of place and direction", 6, true],["V", "Of love and pairing", 5, false],["VI", "Of work and the long arc", 5, false],["VII", "Of grief and return", 4, false],["VIII", "Of the quiet to come", 5, false]].map(([n, t, c, a], i) => (
              <div key={i} style={{ padding: "10px 12px", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8, background: a ? SCI.paper : "transparent", border: a ? `1px solid ${SCI.border}` : "1px solid transparent", marginBottom: 4 }}>
                <div><MonoLabel size={9}>§ {n}</MonoLabel><div style={{ fontSize: 12, marginTop: 2, fontFamily: SCI.display }}>{t}</div></div>
                <span style={{ fontFamily: SCI.mono, fontSize: 10, color: c >= 5 ? SCI.orange : SCI.ink3 }}>{c}/8</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 20, paddingTop: 16, borderTop: `1px solid ${SCI.tint}` }}>
            <MonoLabel>Audio · my voice</MonoLabel>
            <div style={{ marginTop: 8, padding: "10px 12px", border: `1px solid ${SCI.border}`, display: "flex", alignItems: "center", gap: 10 }}>
              <div style={{ width: 28, height: 28, borderRadius: 14, background: SCI.ink, color: SCI.paper, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: SCI.mono, fontSize: 11 }}>▶</div>
              <div style={{ flex: 1 }}><div style={{ fontFamily: SCI.mono, fontSize: 9, color: SCI.ink3 }}>04:32 / 38:21</div><div style={{ height: 2, background: SCI.tint, marginTop: 4 }}><div style={{ height: "100%", width: "12%", background: SCI.orange }}/></div></div>
            </div>
          </div>
        </div>
        <div style={{ padding: "48px 72px" }}>
          <MonoLabel>§ IV · Of place and direction</MonoLabel>
          <h1 style={{ fontFamily: SCI.display, fontSize: 72, lineHeight: 0.95, margin: "14px 0 20px", letterSpacing: -1.2, fontWeight: 500 }}>
            A builder,<br/><span style={{ fontStyle: "italic" }}>in a quiet decade.</span>
          </h1>
          <div style={{ display: "flex", gap: 8, marginBottom: 26 }}>
            <Pill dark>5 / 8 agree</Pill><Pill>Astrocartography</Pill><Pill>Vedic · Saturn</Pill>
          </div>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: SCI.ink, margin: "0 0 20px" }}>
            <span style={{ float: "left", fontFamily: SCI.display, fontSize: 88, lineHeight: 0.82, padding: "4px 12px 0 0", color: SCI.orange }}>Y</span>
            You are inside a Saturn major-period that began the same year your Saturn return finished. Vedic Jyotish finds Saturn exalted in the tenth house. Astrocartography draws strong Saturn lines through cities with universities and archives. Western astrology confirms a Capricorn Midheaven. Chinese Ba Zi gives you Earth Ox month beneath Earth Ox year — earth doubled. Human Design places your design Sun in gate 60, the gate of limitation and acceptance. Five traditions, asked separately, returned the same image: a builder, in a quiet decade.
          </p>
          <p style={{ fontSize: 15, lineHeight: 1.7, color: SCI.ink2, margin: "0 0 20px" }}>
            The three that disagreed are instructive. Tarot birth cards point to The Hierophant — tradition and institution, which complicates the solitary builder picture. Numerology gives you a five life path, which craves freedom. The Mayan Tzolk'in returns Eb', the road — movement when the rest say stay put. These dissents are data, not errors. They describe the counter-currents in a life that may feel like one thing but contain its opposite.
          </p>
          <div style={{ marginTop: 30, display: "flex", justifyContent: "space-between", borderTop: `1px solid ${SCI.tint}`, paddingTop: 16 }}>
            <SciBtn icon="←">§ III · Of season</SciBtn>
            <SciBtn primary icon="→">§ V · Of love</SciBtn>
          </div>
        </div>
        <div style={{ borderLeft: `1px solid ${SCI.border}`, padding: "36px 24px", background: SCI.paper, display: "flex", flexDirection: "column" }}>
          <MonoLabel>§ IV · Convergence</MonoLabel>
          <div style={{ fontFamily: SCI.display, fontSize: 64, lineHeight: 0.95, margin: "10px 0 4px", letterSpacing: -1 }}>
            <span style={{ color: SCI.orange }}>5</span><span style={{ color: SCI.ink3, fontSize: 32 }}>/8</span>
          </div>
          <MonoLabel size={9} style={{ color: SCI.ink3 }}>traditions agreed · 0.62 score</MonoLabel>
          <div style={{ marginTop: 22 }}>
            {TRADITIONS_8.slice(0, 8).map((t, i) => {
              const agrees = [true, true, false, true, true, false, true, false][i];
              return (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "16px 1fr", gap: 8, padding: "7px 0", borderBottom: `1px solid ${SCI.tint}`, fontSize: 11 }}>
                  <span style={{ fontFamily: SCI.mono, color: agrees ? SCI.orange : SCI.ink3 }}>{agrees ? "✓" : "·"}</span>
                  <div><span style={{ fontWeight: 500, color: SCI.ink }}>{t.n}</span><span style={{ color: SCI.ink2, marginLeft: 6 }}>{agrees ? "agreed" : "dissented"}</span></div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

// ── LOVE & UNION PAGE ────────────────────────────────────
function AmaraLoveUnionPage() {
  return (
    <div style={{ width: 1400, background: SCI.paper, color: SCI.ink, fontFamily: SCI.body, border: `1px solid ${SCI.border}` }}>
      <AmaraNav active="Sample"/>
      <div style={{ padding: "56px 56px 36px", borderBottom: `1px solid ${SCI.border}`, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
        <div>
          <MonoLabel>§ Love & Union</MonoLabel>
          <h1 style={{ fontFamily: SCI.display, fontSize: 88, lineHeight: 0.92, margin: "14px 0 14px", letterSpacing: -1.8, fontWeight: 500 }}>
            Two charts.<br/><span style={{ fontStyle: "italic" }}>One reading.</span><span style={{ color: SCI.orange }}>.</span>
          </h1>
          <div style={{ fontSize: 16, lineHeight: 1.6, color: SCI.ink2, marginBottom: 18, maxWidth: 520 }}>
            A relationship reading for you and someone you care about. Synastry charts, composite midpoint analysis, love language mapping, compatibility scoring, and relationship timing — all through the lens of multiple traditions.
          </div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 18 }}>
            <Pill dark>Synastry</Pill><Pill>Composite chart</Pill><Pill>Love languages</Pill><Pill>Compatibility score</Pill><Pill>Timing forecast</Pill>
          </div>
          <SciBtn href="begin-intake" primary size="lg">Begin Love & Union · $39 →</SciBtn>
        </div>
        <div style={{ display: "flex", justifyContent: "center" }}>
          <div style={{ width: 340, display: "flex", flexDirection: "column", gap: 16 }}>
            <div style={{ padding: 20, border: `1px solid ${SCI.border}`, background: SCI.tint2 }}>
              <MonoLabel size={9} style={{ marginBottom: 8 }}>What we read</MonoLabel>
              {["Synastry · inter-chart aspects","Composite · relationship as entity","Love languages analysis","Compatibility score · 0-100","Relationship timing windows","Red/green flag analysis"].map((l, i) => (
                <div key={i} style={{ fontSize: 13, padding: "5px 0", borderBottom: i < 5 ? `1px solid ${SCI.tint}` : "none", display: "flex", gap: 8 }}><span style={{ color: SCI.orange }}>—</span>{l}</div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── WELLNESS PAGE ────────────────────────────────────────
function AmaraWellnessPage() {
  return (
    <div style={{ width: 1400, background: SCI.paper, color: SCI.ink, fontFamily: SCI.body, border: `1px solid ${SCI.border}` }}>
      <AmaraNav/>
      <div style={{ padding: "56px 56px 36px", borderBottom: `1px solid ${SCI.border}`, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
        <div>
          <MonoLabel>§ Wellness</MonoLabel>
          <h1 style={{ fontFamily: SCI.display, fontSize: 88, lineHeight: 0.92, margin: "14px 0 14px", letterSpacing: -1.8, fontWeight: 500 }}>
            Your body,<br/><span style={{ fontStyle: "italic" }}>read by the stars.</span><span style={{ color: SCI.orange }}>.</span>
          </h1>
          <div style={{ fontSize: 16, lineHeight: 1.6, color: SCI.ink2, marginBottom: 18, maxWidth: 520 }}>
            Wellness score, moon wellness calendar, body mapping, biorhythms, energy patterns, and optimal wellness timing — derived from your birth chart.
          </div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            <Pill dark>Wellness score</Pill><Pill>Moon calendar</Pill><Pill>Body mapping</Pill><Pill>Energy patterns</Pill>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── CAREER PAGE ──────────────────────────────────────────
function AmaraCareerPage() {
  return (
    <div style={{ width: 1400, background: SCI.paper, color: SCI.ink, fontFamily: SCI.body, border: `1px solid ${SCI.border}` }}>
      <AmaraNav/>
      <div style={{ padding: "56px 56px 36px", borderBottom: `1px solid ${SCI.border}`, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
        <div>
          <MonoLabel>§ Career & Vocation</MonoLabel>
          <h1 style={{ fontFamily: SCI.display, fontSize: 88, lineHeight: 0.92, margin: "14px 0 14px", letterSpacing: -1.8, fontWeight: 500 }}>
            What the traditions<br/>say about<br/><span style={{ fontStyle: "italic" }}>your work.</span><span style={{ color: SCI.orange }}>.</span>
          </h1>
          <div style={{ fontSize: 16, lineHeight: 1.6, color: SCI.ink2, marginBottom: 18, maxWidth: 520 }}>
            Career analysis, vocational mapping, leadership style assessment, and business timing — cross-referenced across traditions.
          </div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            <Pill dark>Career analysis</Pill><Pill>Vocational mapping</Pill><Pill>Leadership style</Pill><Pill>Business timing</Pill>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── HOROSCOPES PAGE ──────────────────────────────────────
function AmaraHoroscopesPage() {
  return (
    <div style={{ width: 1400, background: SCI.paper, color: SCI.ink, fontFamily: SCI.body, border: `1px solid ${SCI.border}` }}>
      <AmaraNav/>
      <div style={{ padding: "56px 56px 36px", borderBottom: `1px solid ${SCI.border}`, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
        <div>
          <MonoLabel>§ Horoscopes</MonoLabel>
          <h1 style={{ fontFamily: SCI.display, fontSize: 88, lineHeight: 0.92, margin: "14px 0 14px", letterSpacing: -1.8, fontWeight: 500 }}>
            Daily readings.<br/><span style={{ fontStyle: "italic" }}>Personalized.</span><span style={{ color: SCI.orange }}>.</span>
          </h1>
          <div style={{ fontSize: 16, lineHeight: 1.6, color: SCI.ink2, marginBottom: 18, maxWidth: 520 }}>
            Personalized daily, weekly, monthly, and yearly horoscopes — drawn from your birth chart, not just your sun sign. Included with The Whole World bundle.
          </div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            <Pill dark>Daily</Pill><Pill>Weekly</Pill><Pill>Monthly</Pill><Pill>Yearly</Pill>
          </div>
        </div>
      </div>
    </div>
  );
}

// Register on window
window.SciCheckoutDesktop = SciCheckoutDesktop;
window.SciCheckoutMobile = SciCheckoutMobile;
window.SciConfirmDesktop = SciConfirmDesktop;
window.SciConfirmMobile = SciConfirmMobile;
window.SciDashboardDesktop = SciDashboardDesktop;
window.SciDashboardMobile = SciDashboardMobile;
window.AmaraMethodologyPage = AmaraMethodologyPage;
window.AmaraSampleReadingPage = AmaraSampleReadingPage;
window.AmaraLoveUnionPage = AmaraLoveUnionPage;
window.AmaraWellnessPage = AmaraWellnessPage;
window.AmaraCareerPage = AmaraCareerPage;
window.AmaraHoroscopesPage = AmaraHoroscopesPage;
