// Amara — homepage (desktop + mobile)
// Reuses: SCI, MonoLabel, Pill, SciBtn, BigFiveBars, EnneaRadar, MBTIStack,
// Sparkline, InstrumentIcon (from science-hifi.jsx), and TraditionGlyph,
// AmaraMark, AmaraNav, AmaraFooter, SectionHead, ConvergenceMatrix13
// (from amara-primitives.jsx).

const TRADITIONS = [
  { n:'Big Five', cat:'Empirical',    k:'psych',     count:1 },
  { n:'MBTI',     cat:'Empirical',    k:'psych',     count:1 },
  { n:'Enneagram',cat:'Empirical',    k:'psych',     count:1 },
  { n:'Western astrology', cat:'Archetypal', k:'western',   count:5 },
  { n:'Vedic Jyotish',     cat:'Archetypal', k:'vedic',     count:5 },
  { n:'Chinese systems',   cat:'Calendrical',k:'chinese',   count:4 },
  { n:'Mayan Tzolkin',     cat:'Calendrical',k:'maya',      count:3 },
  { n:'Tibetan elemental', cat:'Esoteric',   k:'tibet',     count:3 },
  { n:'Celtic tree',       cat:'Lunar',      k:'celtic',    count:3 },
  { n:'Norse runes',       cat:'Oracular',   k:'norse',     count:3 },
  { n:'Egyptian decans',   cat:'Calendrical',k:'egypt',     count:2 },
  { n:'Yoruba Ifá',        cat:'Oral',       k:'ifa',       count:3 },
  { n:'Native medicine wheel', cat:'Oral',   k:'medicine',  count:2 },
  { n:'Kabbalah',          cat:'Esoteric',   k:'kabbalah',  count:1 },
  { n:'European folk',     cat:'Oracular',   k:'folk',      count:1 },
];
// 13 traditions, 38 readings — but the spec lists 13 traditions; we expand
// MBTI/Enneagram into Modern psychology umbrella. Show 13 cells + total.
const TRADITION_CELLS = [
  { n:'Modern psychology',     sub:'Big Five · MBTI · Enneagram', cat:'Empirical',   k:'psych',    count:3 },
  { n:'Western astrology',     sub:'Natal · houses · transits',   cat:'Archetypal',  k:'western',  count:5 },
  { n:'Vedic Jyotish',         sub:'Dasha · nakshatra · D-charts',cat:'Archetypal',  k:'vedic',    count:5 },
  { n:'Chinese systems',       sub:'Four pillars · zodiac · I Ching', cat:'Calendrical',k:'chinese',count:4 },
  { n:'Mayan Tzolkin',         sub:'Day-sign · galactic tone',     cat:'Calendrical',k:'maya',     count:3 },
  { n:'Tibetan elemental',     sub:'Element · animal · life-force',cat:'Esoteric',   k:'tibet',    count:3 },
  { n:'Celtic tree',           sub:'Ogham · lunar tree calendar',  cat:'Lunar',      k:'celtic',   count:3 },
  { n:'Norse runes',           sub:'Elder Futhark · 3-rune cast',  cat:'Oracular',   k:'norse',    count:3 },
  { n:'Egyptian decans',       sub:'36 decans · ascendant face',   cat:'Calendrical',k:'egypt',    count:2 },
  { n:'Yoruba Ifá',            sub:'Odu · 256 paths',              cat:'Oral',       k:'ifa',      count:3 },
  { n:'Native medicine wheel', sub:'Direction · element · animal', cat:'Oral',       k:'medicine', count:2 },
  { n:'Kabbalah',              sub:'Tree of life · sephirot',      cat:'Esoteric',   k:'kabbalah', count:1 },
  { n:'European folk',         sub:'Hex · birth-flower · saint',   cat:'Oracular',   k:'folk',     count:1 },
];

// —— HERO ————————————————————————————————————
function AmaraHero() {
  return (
    <div style={{ borderBottom:`1px solid ${SCI.ink}` }}>
      <div style={{ display:'flex', justifyContent:'space-between', padding:'8px 28px', fontFamily:SCI.mono, fontSize:10, color:SCI.ink2, borderBottom:`1px solid ${SCI.tint}` }}>
        <span>FIG. 01 — CANONICAL HOMEPAGE / AMARA</span>
        <span>EST. 2017 · ATLASES WRITTEN: 1,247 · BY HAND</span>
        <span>26.APR.2026</span>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1.15fr 1fr', minHeight:580 }}>
        {/* Left: thesis */}
        <div style={{ padding:'56px 56px 40px', borderRight:`1px solid ${SCI.ink}`, display:'flex', flexDirection:'column', justifyContent:'space-between' }}>
          <div>
            <MonoLabel>§ 01 · The pitch</MonoLabel>
            <h1 style={{ fontFamily:SCI.display, fontWeight:500, fontSize:84, lineHeight:0.94, letterSpacing:-1.4, margin:'18px 0 0' }}>
              Twelve minutes<br/>from you.<br/>
              <span style={{fontStyle:'italic', color:SCI.orange}}>Three hours</span> from me.
            </h1>
            <div style={{ maxWidth:480, marginTop:24, fontSize:16, lineHeight:1.6, color:SCI.ink2 }}>
              I read <strong>thirteen traditions</strong> against your specific life — modern psychology, Vedic Jyotish, Mayan Tzolkin, Yoruba Ifá, Norse runes, ten more — and write you back the chapters where they all agree. By hand. In my own voice.
            </div>
            <div style={{ marginTop:18, fontFamily:SCI.mono, fontSize:11, color:SCI.ink3, letterSpacing:0.4 }}>
              — A. IDRIS, sole reader. No team. No model. No template.
            </div>
          </div>

          <div style={{ marginTop:32 }}>
            <div style={{ display:'flex', alignItems:'center', gap:14, marginBottom:14 }}>
              <div style={{ flex:1, maxWidth:380, height:52, border:`1px solid ${SCI.ink}`, display:'flex', alignItems:'center', padding:'0 16px', background:SCI.paper }}>
                <MonoLabel style={{marginRight:12}}>DOB</MonoLabel>
                <input placeholder="1991 / 03 / 18" style={{ border:'none', background:'none', outline:'none', flex:1, fontFamily:SCI.mono, fontSize:14, color:SCI.ink }}/>
                <span style={{ color:SCI.ink3, fontFamily:SCI.mono, fontSize:11 }}>↵</span>
              </div>
              <SciBtn primary size="lg" icon="→">Begin intake</SciBtn>
            </div>
            <div style={{ display:'flex', gap:18, fontFamily:SCI.mono, fontSize:10, color:SCI.ink3, letterSpacing:0.5 }}>
              <span>— 12-MIN INTAKE</span>
              <span>— ATLAS IN 7 DAYS</span>
              <span>— NO AI · BY HAND</span>
            </div>
          </div>
        </div>

        {/* Right: data panel */}
        <div style={{ display:'grid', gridTemplateRows:'auto 1fr auto' }}>
          <div style={{ padding:'14px 24px', borderBottom:`1px solid ${SCI.ink}`, display:'flex', justifyContent:'space-between', alignItems:'center' }}>
            <MonoLabel>Sample atlas · L. Kowalski · 1989 · Brooklyn</MonoLabel>
            <div style={{ display:'flex', gap:6 }}>
              <Pill>Big Five</Pill><Pill>Vedic</Pill><Pill dark>Convergence</Pill>
            </div>
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', height:'100%' }}>
            <div style={{ padding:24, borderRight:`1px solid ${SCI.tint}`, display:'flex', flexDirection:'column' }}>
              <MonoLabel style={{marginBottom:6}}>Convergence radar · 13 traditions</MonoLabel>
              <div style={{ fontFamily:SCI.display, fontSize:34, lineHeight:1, margin:'2px 0 4px' }}>
                <span style={{color:SCI.orange}}>9</span><span style={{color:SCI.ink3}}>/</span>13
              </div>
              <div style={{ fontFamily:SCI.mono, fontSize:10, color:SCI.ink3, marginBottom:10 }}>traditions agree · § IV · Saturn</div>
              <div style={{ flex:1, minHeight:0 }}>
                <EnneaRadar values={[0.55,0.42,0.78,0.92,0.88,0.74,0.52,0.81,0.68]}/>
              </div>
            </div>
            <div style={{ padding:24, display:'flex', flexDirection:'column' }}>
              <MonoLabel style={{marginBottom:8}}>Big Five · percentile</MonoLabel>
              <BigFiveBars values={[71,93,38,66,29]}/>
              <div style={{ marginTop:16 }}>
                <MonoLabel style={{marginBottom:6}}>Vedic · current dasha</MonoLabel>
                <div style={{ fontFamily:SCI.display, fontSize:22, lineHeight:1.1 }}>Saturn / Mercury</div>
                <div style={{ fontFamily:SCI.mono, fontSize:10, color:SCI.ink3, marginTop:2 }}>2024 · 04 → 2027 · 02 · 33 mo. remain</div>
                <div style={{ marginTop:6 }}>
                  <Sparkline data={[0.32,0.41,0.55,0.62,0.71,0.78,0.83,0.88]} color={SCI.orange} height={24}/>
                </div>
              </div>
            </div>
          </div>

          <div style={{ borderTop:`1px solid ${SCI.ink}`, display:'grid', gridTemplateColumns:'repeat(4,1fr)' }}>
            {[
              { k:'Convergence', v:'0.91', sub:'9 of 13 agree' },
              { k:'Headline',    v:'§ IV',  sub:'Saturn dasha' },
              { k:'Hours',       v:'~3.0',  sub:'by Amara' },
              { k:'Pages',       v:'47',    sub:'long-form' },
            ].map((m,i)=>(
              <div key={i} style={{ padding:'12px 16px', borderRight: i<3?`1px solid ${SCI.tint}`:'none' }}>
                <MonoLabel size={9}>{m.k}</MonoLabel>
                <div style={{ fontFamily:SCI.display, fontSize:22, lineHeight:1.1, margin:'2px 0' }}>{m.v}</div>
                <div style={{ fontFamily:SCI.mono, fontSize:9, color:SCI.ink3 }}>{m.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// —— METHOD —————————————————————————————————
function AmaraMethod() {
  const steps = [
    {
      n:'01', title:'Capture', kicker:'12-minute intake',
      body:'Birth date, time, place, and a short questionnaire. You can pause and come back. I read what you send — then I begin.',
      meta:[['Items','40'],['Time','~12 min'],['Privacy','data deletable, anytime']]
    },
    {
      n:'02', title:'Read by hand', kicker:'I read all 38 myself',
      body:'I run thirteen traditions in parallel — the same paper, the same desk, the same three quiet hours. I take notes. I sleep on it. I write the next morning.',
      meta:[['Traditions','13'],['Readings','38'],['No AI','no templates · no team']]
    },
    {
      n:'03', title:'Atlas', kicker:'Long-form, ~8,000 words',
      body:'I send back a chapter-bound document — only the chapters where the thirteen agreed. Plus an audio reading in my own voice, recorded once, for you.',
      meta:[['Chapters','~8'],['Length','~8,000 w'],['Audio','38 min · my voice']]
    },
  ];
  return (
    <div style={{ borderBottom:`1px solid ${SCI.ink}` }}>
      <div style={{ padding:'56px 56px 24px', display:'grid', gridTemplateColumns:'1fr 2fr', alignItems:'end', gap:40 }}>
        <div>
          <MonoLabel>§ 02 · Method</MonoLabel>
          <h2 style={{ fontFamily:SCI.display, fontSize:54, lineHeight:0.95, margin:'10px 0 0', letterSpacing:-0.8, fontWeight:500 }}>
            One person.<br/>Thirteen readings.<br/><span style={{fontStyle:'italic'}}>Three quiet hours.</span>
          </h2>
        </div>
        <div style={{ fontSize:15, lineHeight:1.6, color:SCI.ink2, maxWidth:560 }}>
          I have been reading charts since 2017 — first for friends, then for everyone. The atlases here are not generated. They are <em>written</em>, by me, in graphite first and ink later. The math is exact; the voice is mine.
        </div>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', borderTop:`1px solid ${SCI.ink}` }}>
        {steps.map((s,i)=>(
          <div key={i} style={{ padding:'32px 28px 36px', borderRight: i<2?`1px solid ${SCI.ink}`:'none' }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:16 }}>
              <div style={{ fontFamily:SCI.display, fontSize:52, lineHeight:1, color: i===1?SCI.orange:SCI.ink }}>{s.n}</div>
              <MonoLabel>{s.kicker}</MonoLabel>
            </div>
            <div style={{ fontFamily:SCI.display, fontSize:26, lineHeight:1.1, margin:'0 0 10px' }}>{s.title}</div>
            <div style={{ fontSize:14, lineHeight:1.55, color:SCI.ink2, marginBottom:20 }}>{s.body}</div>
            <div style={{ borderTop:`1px solid ${SCI.tint}` }}>
              {s.meta.map(([k,v],j)=>(
                <div key={j} style={{ display:'flex', justifyContent:'space-between', padding:'8px 0', borderBottom:`1px solid ${SCI.tint}`, fontFamily:SCI.mono, fontSize:11 }}>
                  <span style={{color:SCI.ink3, textTransform:'uppercase', letterSpacing:0.5, fontSize:10}}>{k}</span>
                  <span>{v}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// —— TRADITIONS GRID ————————————————————————
function AmaraTraditions() {
  return (
    <div style={{ borderBottom:`1px solid ${SCI.ink}`, background:SCI.paper }}>
      <div style={{ padding:'48px 56px 18px', display:'flex', justifyContent:'space-between', alignItems:'end' }}>
        <div>
          <MonoLabel>§ 03 · Traditions</MonoLabel>
          <h2 style={{ fontFamily:SCI.display, fontSize:48, lineHeight:0.95, margin:'10px 0 0', letterSpacing:-0.6, fontWeight:500 }}>
            Thirteen traditions<span style={{color:SCI.orange}}>.</span> Thirty-eight readings.
          </h2>
        </div>
        <div style={{ display:'flex', gap:8, flexWrap:'wrap', justifyContent:'flex-end' }}>
          <Pill dark>All 13</Pill><Pill>Empirical</Pill><Pill>Archetypal</Pill><Pill>Calendrical</Pill><Pill>Oral</Pill>
        </div>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(5,1fr)', borderTop:`1px solid ${SCI.ink}` }}>
        {TRADITION_CELLS.map((it,i)=>(
          <div key={i} style={{
            padding:'22px 18px 18px',
            borderRight: (i%5)<4?`1px solid ${SCI.ink}`:'none',
            borderBottom: i<10?`1px solid ${SCI.ink}`:'none',
            display:'flex', flexDirection:'column', gap:12, minHeight:220, background: i===2?SCI.tint2:SCI.paper,
          }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
              <MonoLabel size={9}>№ {String(i+1).padStart(2,'0')}</MonoLabel>
              <MonoLabel size={9} style={{color:SCI.ink3}}>{it.cat}</MonoLabel>
            </div>
            <div style={{ width:'58%' }}><TraditionGlyph kind={it.k}/></div>
            <div>
              <div style={{ fontFamily:SCI.display, fontSize:19, lineHeight:1.1, marginBottom:3 }}>{it.n}</div>
              <div style={{ fontSize:12, color:SCI.ink2, marginBottom:6, lineHeight:1.4 }}>{it.sub}</div>
              <MonoLabel size={9} style={{color: it.count>=4?SCI.orange:SCI.ink3}}>{it.count} reading{it.count>1?'s':''}</MonoLabel>
            </div>
          </div>
        ))}
        {/* Total cell — dark */}
        <div style={{
          padding:'22px 18px 18px', display:'flex', flexDirection:'column', justifyContent:'space-between',
          background:SCI.ink, color:SCI.paper, minHeight:220,
        }}>
          <MonoLabel size={9} style={{color:'rgba(243,239,228,0.55)'}}>TOTAL</MonoLabel>
          <div>
            <div style={{ fontFamily:SCI.display, fontSize:74, lineHeight:0.95, letterSpacing:-1.5 }}>38</div>
            <div style={{ fontFamily:SCI.mono, fontSize:10, color:'rgba(243,239,228,0.7)', letterSpacing:0.5, marginTop:6 }}>READINGS, ALL TOLD</div>
            <div style={{ fontSize:13, lineHeight:1.4, color:'rgba(243,239,228,0.85)', marginTop:14 }}>
              Across 13 traditions. Read one at a time, in order. Then triangulated.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// —— SAMPLE: convergence + excerpt —————————
function AmaraSample() {
  return (
    <div style={{ borderBottom:`1px solid ${SCI.ink}`, background:SCI.tint2 }}>
      <div style={{ padding:'48px 56px 24px', display:'grid', gridTemplateColumns:'1fr 1fr', gap:40, alignItems:'end' }}>
        <div>
          <MonoLabel>§ 04 · Sample atlas</MonoLabel>
          <h2 style={{ fontFamily:SCI.display, fontSize:48, lineHeight:0.95, margin:'10px 0 0', letterSpacing:-0.6, fontWeight:500 }}>
            Where the thirteen<br/>agreed.
          </h2>
        </div>
        <div style={{ fontSize:14, lineHeight:1.55, color:SCI.ink2 }}>
          A sample chapter, taken from L. Kowalski's atlas. The convergence map shows where each pair of traditions independently said the same thing. Brighter cells mean stronger agreement.
        </div>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1.1fr 1fr', borderTop:`1px solid ${SCI.ink}` }}>
        <div style={{ padding:'32px 36px', borderRight:`1px solid ${SCI.ink}` }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:14 }}>
            <MonoLabel>Convergence matrix · 13 × 13</MonoLabel>
            <MonoLabel size={9} style={{color:SCI.ink3}}>Agreement 0.0 – 1.0</MonoLabel>
          </div>
          <ConvergenceMatrix13/>
          <div style={{ marginTop:18, display:'flex', gap:14, alignItems:'center', fontFamily:SCI.mono, fontSize:10, color:SCI.ink2 }}>
            <span>Legend:</span>
            {[0.2,0.45,0.7,0.9].map(v=>(
              <span key={v} style={{display:'inline-flex',alignItems:'center',gap:4}}>
                <span style={{width:14,height:14,background:`rgba(198,90,42,${v})`,border:`1px solid ${SCI.ink}`}}/>
                {v.toFixed(1)}
              </span>
            ))}
          </div>
        </div>

        <div style={{ padding:'32px 40px', background:SCI.paper, display:'flex', flexDirection:'column' }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10 }}>
            <MonoLabel>Excerpt · § IV · The Saturn dasha</MonoLabel>
            <MonoLabel size={9} style={{color:SCI.orange}}>9 of 13 agree</MonoLabel>
          </div>
          <div style={{ fontFamily:SCI.display, fontSize:32, lineHeight:1.1, margin:'6px 0 14px', letterSpacing:-0.3 }}>
            A builder, in a quiet decade.
          </div>
          <div style={{ fontSize:14.5, lineHeight:1.65, color:SCI.ink2 }}>
            You are inside a Saturn major-period that began the same year your second Saturn return finished — the universe doubling down on the same instruction. The Big Five places your <strong>Conscientiousness at the 93rd percentile</strong>; the Vedic chart finds Saturn exalted in the tenth; the Chinese pillars give you an <span style={{background:'rgba(198,90,42,0.18)'}}>Earth Ox month</span> beneath an Earth Ox year. The Tibetan elemental reading concurs: earth doubled. The Norse cast for the question came back <em>Eihwaz · Isa · Jera</em> — the yew, the patient ice, the slow harvest. Nine of the thirteen traditions, asked separately and on different days, returned the same single image: a builder, in a quiet decade.
          </div>
          <div style={{ marginTop:'auto', paddingTop:24, display:'flex', justifyContent:'space-between', alignItems:'end' }}>
            <div>
              <MonoLabel size={9} style={{color:SCI.ink3}}>Convergence trend across the chapter</MonoLabel>
              <div style={{ width:200, marginTop:4 }}>
                <Sparkline data={[0.42,0.51,0.62,0.68,0.74,0.81,0.86,0.91]} color={SCI.orange} height={40}/>
              </div>
            </div>
            <SciBtn icon="→">Read full chapter</SciBtn>
          </div>
        </div>
      </div>
    </div>
  );
}

// —— PRICING —————————————————————————————————
function AmaraPricing() {
  const tiers = [
    {
      t:'The Daily Sign', p:'$9', per:'month', kicker:'A morning note',
      body:'Three traditions, read together each morning, sent to you as a single short paragraph. Modern psychology + your two strongest archetypal lines.',
      features:['3 traditions, daily','Sent at 06:30 local','Pause anytime','Cancel in one click'],
      cta:'Subscribe', dark:false,
    },
    {
      t:'The Cultural Dossier', p:'$39', per:'once', kicker:'A focused study',
      body:'Pick one core tradition (e.g. Vedic Jyotish or Yoruba Ifá). I read it at full depth, with four cross-references from the other twelve where they speak to it.',
      features:['1 core tradition · full depth','4 cross-references','~3,000-word monograph','PDF + audio'],
      cta:'Choose tradition', dark:false,
    },
    {
      t:'The Universal Atlas', p:'$129', per:'once', kicker:'The whole work',
      body:'All thirteen traditions, all thirty-eight readings, the convergence map, and the long-form atlas — only the chapters where the thirteen agreed. Audio in my voice.',
      features:['All 13 traditions · all 38 readings','Convergence matrix · 13 × 13','Atlas · ~8,000 words · ~8 chapters','Audio · 38 min · my voice','Lifetime PDF + edits'],
      cta:'Begin atlas', dark:true, recommended:true,
    },
  ];
  return (
    <div style={{ borderBottom:`1px solid ${SCI.ink}`, background:SCI.paper }}>
      <div style={{ padding:'48px 56px 18px', display:'flex', justifyContent:'space-between', alignItems:'end' }}>
        <div>
          <MonoLabel>§ 05 · Pricing</MonoLabel>
          <h2 style={{ fontFamily:SCI.display, fontSize:48, lineHeight:0.95, margin:'10px 0 0', letterSpacing:-0.6, fontWeight:500 }}>
            Three <span style={{fontStyle:'italic'}}>commitments</span>.
          </h2>
        </div>
        <MonoLabel size={10} style={{color:SCI.ink3}}>USD · tax at checkout · gift cards available</MonoLabel>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', borderTop:`1px solid ${SCI.ink}` }}>
        {tiers.map((t,i)=>(
          <div key={i} style={{
            padding:'30px 28px 32px',
            borderRight: i<2?`1px solid ${SCI.ink}`:'none',
            background: t.dark?SCI.ink:SCI.paper,
            color: t.dark?SCI.paper:SCI.ink,
            position:'relative', display:'flex', flexDirection:'column',
          }}>
            {t.recommended && (
              <div style={{
                position:'absolute', top:-1, right:-1,
                background:SCI.orange, color:SCI.paper,
                fontFamily:SCI.mono, fontSize:9, letterSpacing:0.8, textTransform:'uppercase',
                padding:'5px 12px', border:`1px solid ${SCI.ink}`,
              }}>Recommended</div>
            )}
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:10 }}>
              <span style={{ fontFamily:SCI.mono, fontSize:11, letterSpacing:1, textTransform:'uppercase', opacity:0.7 }}>Tier {String(i+1).padStart(2,'0')}</span>
              <span style={{ fontFamily:SCI.mono, fontSize:10, opacity:0.6, letterSpacing:0.5 }}>{t.kicker}</span>
            </div>
            <div style={{ fontFamily:SCI.display, fontSize:32, lineHeight:1.05, margin:'6px 0 2px', letterSpacing:-0.3 }}>{t.t}</div>
            <div style={{ display:'flex', alignItems:'baseline', gap:6, margin:'14px 0 4px' }}>
              <span style={{ fontFamily:SCI.display, fontSize:64, lineHeight:0.9, letterSpacing:-1.5 }}>{t.p}</span>
              <span style={{ fontFamily:SCI.mono, fontSize:11, opacity:0.7 }}>/ {t.per}</span>
            </div>
            <div style={{ fontSize:14, lineHeight:1.5, opacity:0.85, margin:'14px 0 18px', maxWidth:320 }}>{t.body}</div>
            <div style={{ borderTop:`1px solid ${t.dark?'rgba(243,239,228,0.2)':SCI.tint}` }}>
              {t.features.map((f,j)=>(
                <div key={j} style={{ display:'flex', gap:10, padding:'9px 0', borderBottom:`1px solid ${t.dark?'rgba(243,239,228,0.15)':SCI.tint}`, fontSize:13 }}>
                  <span style={{fontFamily:SCI.mono, fontSize:11, opacity:0.5, width:22}}>{String(j+1).padStart(2,'0')}</span>
                  {f}
                </div>
              ))}
            </div>
            <div style={{ marginTop:'auto', paddingTop:22 }}>
              <SciBtn w="100%" size="lg" icon="→" primary={!t.dark}
                style={t.dark?{background:SCI.paper, color:SCI.ink, border:`1px solid ${SCI.paper}`}:{}}>{t.cta}</SciBtn>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// —— THE WORK SO FAR + PULL QUOTE ———————————
function AmaraTheWork() {
  return (
    <div style={{ borderBottom:`1px solid ${SCI.ink}` }}>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr' }}>
        <div style={{ padding:'48px 56px', borderRight:`1px solid ${SCI.ink}` }}>
          <MonoLabel>§ 06 · The work, so far</MonoLabel>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:0, marginTop:24, borderTop:`1px solid ${SCI.ink}` }}>
            {[
              { k:'Atlases written',    v:'1,247', s:'since 2017, by hand' },
              { k:'Traditions',         v:'13',    s:'all read in parallel' },
              { k:'Readings per atlas', v:'38',    s:'one Amara, one desk' },
              { k:'Hours per atlas',    v:'~3 hr', s:'graphite, then ink' },
            ].map((m,i)=>(
              <div key={i} style={{
                padding:'22px 20px',
                borderRight: (i%2)===0?`1px solid ${SCI.ink}`:'none',
                borderBottom: i<2?`1px solid ${SCI.ink}`:'none',
              }}>
                <MonoLabel size={9}>{m.k}</MonoLabel>
                <div style={{ fontFamily:SCI.display, fontSize:42, lineHeight:1, margin:'8px 0 4px', letterSpacing:-0.5 }}>{m.v}</div>
                <MonoLabel size={9} style={{color:SCI.ink3}}>{m.s}</MonoLabel>
              </div>
            ))}
          </div>
          <div style={{ marginTop:28 }}>
            <MonoLabel>Atlases per month · 2017 → 2026</MonoLabel>
            <div style={{ marginTop:10 }}><Sparkline data={[2,3,4,4,6,7,9,10,12,11,14,16,18,21,22,24,28,32,35,38,42,46]} height={56}/></div>
            <div style={{ display:'flex', justifyContent:'space-between', fontFamily:SCI.mono, fontSize:9, color:SCI.ink3, marginTop:6, letterSpacing:0.5 }}>
              <span>2017 · MAY</span><span>2026 · APR</span>
            </div>
          </div>
        </div>

        <div style={{ padding:'48px 56px', background:SCI.ink, color:SCI.paper }}>
          <MonoLabel style={{color:'rgba(243,239,228,0.5)'}}>Subject · L. Kowalski · architect · Brooklyn</MonoLabel>
          <blockquote style={{
            fontFamily:SCI.display, fontSize:34, lineHeight:1.18, letterSpacing:-0.3,
            margin:'18px 0 24px', maxWidth:540,
          }}>
            “It is the first reading that has told me something I did not already know <span style={{color:SCI.orange, fontStyle:'italic'}}>—</span> and that turned out, on reflection, to be correct.”
          </blockquote>
          <div style={{ display:'flex', alignItems:'center', gap:14, fontFamily:SCI.mono, fontSize:11, letterSpacing:0.5, color:'rgba(243,239,228,0.7)' }}>
            <div style={{width:36,height:36,borderRadius:20,background:'rgba(243,239,228,0.1)',border:'1px solid rgba(243,239,228,0.3)'}}/>
            <div>
              <div>L. KOWALSKI</div>
              <div style={{fontSize:10,opacity:0.6}}>ARCHITECT · BROOKLYN · UNIVERSAL ATLAS · MAR 2026</div>
            </div>
          </div>
          <div style={{ marginTop:36, paddingTop:20, borderTop:'1px solid rgba(243,239,228,0.15)', display:'grid', gridTemplateColumns:'1fr 1fr', gap:16 }}>
            {[
              ['“She read my chart the way a good editor reads a draft.”','— S.O., Lagos'],
              ['“The audio is what undid me. My grandmother’s cadence.”','— P.R., London'],
            ].map(([q,a],i)=>(
              <div key={i} style={{ fontSize:13, lineHeight:1.5, color:'rgba(243,239,228,0.85)' }}>
                {q}<div style={{fontFamily:SCI.mono, fontSize:10, opacity:0.55, marginTop:4}}>{a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// —— FAQ —————————————————————————————————
function AmaraFAQ() {
  const qs = [
    ['Is this science or astrology?',
     'Both, honestly labeled. The empirical instruments — Big Five, MBTI, Enneagram — get treated with their actual statistical weight. The other ten traditions are presented as the symbolic frameworks they are. The work is in finding where they agree.'],
    ['Who actually writes the atlas?',
     'I do. Amara Idris. By hand. Each atlas takes me about three hours of close reading and a morning of writing. No assistant, no AI, no template. If you can tell me apart from a model, that is the work.'],
    ['Do I need my birth time?',
     'Strongly recommended. Without it, Western astrology, Vedic Jyotish, and Egyptian decans lose their house structure — about 35% of their signal. I will write the atlas anyway and tell you exactly which chapters are partial.'],
    ['How is convergence computed?',
     'For each claim a tradition makes about you, I count the other twelve that — read independently — return something I judge equivalent. The threshold is mine, the count is the math, the chapters in your atlas are only the claims with a count of seven or higher.'],
    ['Can I delete my data?',
     'Yes. One button, under Care. Birth data and answers are deleted within 24 hours. The atlas itself is yours; I keep no copy unless you ask me to.'],
  ];
  return (
    <div style={{ borderBottom:`1px solid ${SCI.ink}`, background:SCI.paper }}>
      <div style={{ padding:'48px 56px 8px' }}>
        <MonoLabel>§ 07 · Frequently asked</MonoLabel>
        <h2 style={{ fontFamily:SCI.display, fontSize:48, lineHeight:0.95, margin:'10px 0 24px', letterSpacing:-0.6, fontWeight:500 }}>
          What you actually want to ask.
        </h2>
      </div>
      <div style={{ borderTop:`1px solid ${SCI.ink}` }}>
        {qs.map(([q,a],i)=>(
          <div key={i} style={{
            display:'grid', gridTemplateColumns:'80px 1fr 1.4fr 60px',
            borderBottom:`1px solid ${SCI.ink}`,
            padding:'22px 56px', gap:24,
            background: i===1?SCI.tint2:SCI.paper,
          }}>
            <div style={{ fontFamily:SCI.mono, fontSize:11, color:SCI.ink3, letterSpacing:0.5 }}>№ {String(i+1).padStart(2,'0')}</div>
            <div style={{ fontFamily:SCI.display, fontSize:24, lineHeight:1.15, letterSpacing:-0.2 }}>{q}</div>
            <div style={{ fontSize:14, lineHeight:1.55, color:SCI.ink2 }}>{a}</div>
            <div style={{ fontFamily:SCI.display, fontSize:26, textAlign:'right', color:SCI.ink }}>{i===1?'−':'+'}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// —— CTA ———————————————————————————————————
function AmaraCTA() {
  return (
    <div style={{ background:SCI.ink, color:SCI.paper, padding:'72px 56px 56px' }}>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:40, alignItems:'center' }}>
        <div>
          <MonoLabel style={{color:'rgba(243,239,228,0.5)'}}>→ Begin</MonoLabel>
          <h2 style={{ fontFamily:SCI.display, fontSize:64, lineHeight:0.96, margin:'14px 0 0', letterSpacing:-1.2, fontWeight:500 }}>
            Twelve minutes from you.<br/>
            <span style={{fontStyle:'italic', color:SCI.orange}}>An atlas, by hand, from me.</span>
          </h2>
        </div>
        <div>
          <div style={{ display:'flex', gap:12, marginBottom:20 }}>
            <div style={{ flex:1, height:56, border:'1px solid rgba(243,239,228,0.4)', display:'flex', alignItems:'center', padding:'0 16px', background:'rgba(243,239,228,0.04)' }}>
              <MonoLabel style={{color:'rgba(243,239,228,0.5)', marginRight:14}}>DOB</MonoLabel>
              <input placeholder="1991 / 03 / 18" style={{ flex:1, background:'none', border:'none', outline:'none', color:SCI.paper, fontFamily:SCI.mono, fontSize:14 }}/>
            </div>
            <SciBtn size="lg" icon="→" style={{background:SCI.paper, color:SCI.ink, border:`1px solid ${SCI.paper}`}}>Begin intake</SciBtn>
          </div>
          <div style={{ fontFamily:SCI.mono, fontSize:10, letterSpacing:0.5, color:'rgba(243,239,228,0.6)' }}>
            12-MIN INTAKE · ATLAS IN 7 DAYS · NO AI · BY HAND · DELETE ANYTIME
          </div>
        </div>
      </div>
    </div>
  );
}

// —— Composite desktop ——————————————————————
function AmaraHomepageDesktop() {
  return (
    <div style={{ width:1400, background:SCI.paper, color:SCI.ink, fontFamily:SCI.body, border:`1px solid ${SCI.ink}`, overflow:'hidden' }}>
      <AmaraNav active="Methodology"/>
      <AmaraHero/>
      <AmaraMethod/>
      <AmaraTraditions/>
      <AmaraSample/>
      <AmaraPricing/>
      <AmaraTheWork/>
      <AmaraFAQ/>
      <AmaraCTA/>
      <AmaraFooter/>
    </div>
  );
}

// —— Mobile ——————————————————————————————————
function AmaraHomepageMobile() {
  return (
    <div style={{ width:390, background:SCI.paper, color:SCI.ink, fontFamily:SCI.body, border:`1px solid ${SCI.ink}`, overflow:'hidden' }}>
      <div style={{ height:52, borderBottom:`1px solid ${SCI.ink}`, display:'flex', alignItems:'center', padding:'0 18px', justifyContent:'space-between' }}>
        <div style={{ display:'flex', alignItems:'center', gap:8 }}>
          <svg width="14" height="14" 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>
          <AmaraMark size={20}/>
        </div>
        <SciBtn size="sm" primary icon="→">Intake</SciBtn>
      </div>

      <div style={{ padding:'6px 18px', fontFamily:SCI.mono, fontSize:9, color:SCI.ink2, borderBottom:`1px solid ${SCI.tint}`, display:'flex', justifyContent:'space-between' }}>
        <span>FIG. 01</span><span>1,247 ATLASES · BY HAND</span>
      </div>

      {/* hero */}
      <div style={{ padding:'30px 20px 28px', borderBottom:`1px solid ${SCI.ink}` }}>
        <MonoLabel>§ 01 · The pitch</MonoLabel>
        <h1 style={{ fontFamily:SCI.display, fontSize:46, lineHeight:0.93, letterSpacing:-0.8, fontWeight:500, margin:'12px 0 14px' }}>
          Twelve minutes from you.<br/><span style={{fontStyle:'italic', color:SCI.orange}}>Three hours from me.</span>
        </h1>
        <div style={{ fontSize:15, lineHeight:1.6, color:SCI.ink2, marginBottom:18 }}>
          I read thirteen traditions against your specific life — and write you back the chapters where they all agree. By hand. In my own voice.
        </div>
        <div style={{ height:52, border:`1px solid ${SCI.ink}`, display:'flex', alignItems:'center', padding:'0 14px', marginBottom:10 }}>
          <MonoLabel style={{marginRight:10}}>DOB</MonoLabel>
          <span style={{fontFamily:SCI.mono, fontSize:13, color:SCI.ink3}}>1991 / 03 / 18</span>
        </div>
        <SciBtn primary size="lg" w="100%" icon="→">Begin 12-min intake</SciBtn>
        <div style={{ fontFamily:SCI.mono, fontSize:9, color:SCI.ink3, letterSpacing:0.5, marginTop:10, display:'flex', justifyContent:'space-between' }}>
          <span>ATLAS IN 7 DAYS</span><span>NO AI · BY HAND</span>
        </div>
      </div>

      {/* live convergence */}
      <div style={{ padding:'22px 20px', borderBottom:`1px solid ${SCI.ink}` }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10 }}>
          <MonoLabel>Sample · L. Kowalski</MonoLabel>
          <Pill dark>9 / 13 agree</Pill>
        </div>
        <div style={{ fontFamily:SCI.display, fontSize:28, lineHeight:1, margin:'4px 0 12px' }}>§ IV · Saturn dasha<span style={{color:SCI.orange}}>.</span></div>
        <div style={{ aspectRatio:'1/1', maxWidth:280, margin:'0 auto 16px' }}>
          <EnneaRadar values={[0.55,0.42,0.78,0.92,0.88,0.74,0.52,0.81,0.68]}/>
        </div>
        <MonoLabel style={{marginBottom:6}}>Big Five · percentile</MonoLabel>
        <BigFiveBars values={[71,93,38,66,29]}/>
      </div>

      {/* method */}
      <div style={{ padding:'28px 20px', borderBottom:`1px solid ${SCI.ink}` }}>
        <MonoLabel>§ 02 · Method</MonoLabel>
        <h2 style={{ fontFamily:SCI.display, fontSize:32, lineHeight:1, margin:'10px 0 18px', letterSpacing:-0.5, fontWeight:500 }}>
          One person. Thirteen readings. <span style={{fontStyle:'italic'}}>Three quiet hours.</span>
        </h2>
        {[
          ['Capture','12-min intake'],
          ['Read by hand','I read all 38 myself'],
          ['Atlas','~8,000 words · audio'],
        ].map(([t,k],i)=>(
          <div key={i} style={{ padding:'14px 0', borderTop:`1px solid ${SCI.tint}` }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
              <span style={{fontFamily:SCI.mono, fontSize:11, color:SCI.ink3}}>0{i+1}</span>
              <MonoLabel size={9}>{k}</MonoLabel>
            </div>
            <div style={{ fontFamily:SCI.display, fontSize:22, marginTop:4, color: i===1?SCI.orange:SCI.ink }}>{t}</div>
          </div>
        ))}
      </div>

      {/* traditions condensed */}
      <div style={{ padding:'28px 20px', borderBottom:`1px solid ${SCI.ink}` }}>
        <MonoLabel>§ 03 · Traditions</MonoLabel>
        <h2 style={{ fontFamily:SCI.display, fontSize:32, lineHeight:1, margin:'10px 0 18px', letterSpacing:-0.5, fontWeight:500 }}>
          Thirteen traditions. Thirty-eight readings.
        </h2>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:0, border:`1px solid ${SCI.ink}` }}>
          {TRADITION_CELLS.slice(0,12).map((t,i)=>(
            <div key={i} style={{
              padding:'14px 12px',
              borderRight: (i%2)===0?`1px solid ${SCI.ink}`:'none',
              borderBottom: i<10?`1px solid ${SCI.ink}`:'none',
              minHeight:96, display:'flex', flexDirection:'column', gap:6
            }}>
              <div style={{ width:26 }}><TraditionGlyph kind={t.k}/></div>
              <div style={{ fontFamily:SCI.display, fontSize:14, lineHeight:1.1 }}>{t.n}</div>
              <MonoLabel size={9} style={{color:SCI.ink3}}>{t.count} reading{t.count>1?'s':''}</MonoLabel>
            </div>
          ))}
          <div style={{ padding:'14px 12px', background:SCI.ink, color:SCI.paper, gridColumn:'1 / -1', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
            <MonoLabel size={10} style={{color:'rgba(243,239,228,0.6)'}}>+ EUROPEAN FOLK · TOTAL</MonoLabel>
            <span style={{fontFamily:SCI.display, fontSize:32}}>38</span>
          </div>
        </div>
      </div>

      {/* sample excerpt */}
      <div style={{ padding:'28px 20px', borderBottom:`1px solid ${SCI.ink}`, background:SCI.tint2 }}>
        <MonoLabel>§ 04 · Sample atlas</MonoLabel>
        <h2 style={{ fontFamily:SCI.display, fontSize:32, lineHeight:1, margin:'10px 0 14px', letterSpacing:-0.5, fontWeight:500 }}>
          Where the thirteen agreed.
        </h2>
        <div style={{ background:SCI.paper, border:`1px solid ${SCI.ink}`, padding:'18px 18px' }}>
          <div style={{ display:'flex', justifyContent:'space-between', marginBottom:6 }}>
            <MonoLabel>§ IV · Saturn</MonoLabel>
            <MonoLabel size={9} style={{color:SCI.orange}}>9 / 13 agree</MonoLabel>
          </div>
          <div style={{ fontFamily:SCI.display, fontSize:24, lineHeight:1.1, margin:'4px 0 10px' }}>A builder, in a quiet decade.</div>
          <div style={{ fontSize:13.5, lineHeight:1.6, color:SCI.ink2 }}>
            Saturn major-period · 93rd-percentile Conscientiousness · Earth Ox month, Earth Ox year. Nine traditions, asked separately, returned the same image.
          </div>
        </div>
      </div>

      {/* pricing condensed */}
      <div style={{ padding:'28px 20px', borderBottom:`1px solid ${SCI.ink}` }}>
        <MonoLabel>§ 05 · Pricing</MonoLabel>
        <h2 style={{ fontFamily:SCI.display, fontSize:32, lineHeight:1, margin:'10px 0 16px', letterSpacing:-0.5, fontWeight:500 }}>
          Three commitments.
        </h2>
        {[
          ['The Daily Sign', '$9 / mo', '3 traditions, daily', false],
          ['The Cultural Dossier', '$39', '1 core + 4 cross-refs', false],
          ['The Universal Atlas', '$129', 'All 13 · all 38 · atlas', true],
        ].map(([n,p,s,r],i)=>(
          <div key={i} style={{
            border:`1px solid ${SCI.ink}`,
            padding:'14px 14px', marginBottom:10,
            background: r?SCI.ink:SCI.paper, color: r?SCI.paper:SCI.ink,
            display:'flex', justifyContent:'space-between', alignItems:'center', position:'relative',
          }}>
            {r && <div style={{position:'absolute', top:-1, right:-1, background:SCI.orange, color:SCI.paper, fontFamily:SCI.mono, fontSize:8, padding:'3px 8px', letterSpacing:0.6, border:`1px solid ${SCI.ink}`}}>RECOMMENDED</div>}
            <div>
              <div style={{ fontFamily:SCI.display, fontSize:18 }}>{n}</div>
              <MonoLabel size={9} style={{color: r?'rgba(243,239,228,0.6)':SCI.ink3}}>{s}</MonoLabel>
            </div>
            <div style={{ fontFamily:SCI.display, fontSize:24 }}>{p}</div>
          </div>
        ))}
      </div>

      {/* the work */}
      <div style={{ padding:'28px 20px', borderBottom:`1px solid ${SCI.ink}`, background:SCI.ink, color:SCI.paper }}>
        <MonoLabel style={{color:'rgba(243,239,228,0.5)'}}>§ 06 · The work, so far</MonoLabel>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:0, marginTop:16 }}>
          {[['1,247','atlases'],['13','traditions'],['38','per atlas'],['~3 hr','by Amara']].map(([v,k],i)=>(
            <div key={i} style={{ padding:'16px 4px', borderTop:i<2?'1px solid rgba(243,239,228,0.2)':'1px solid rgba(243,239,228,0.2)', borderRight: (i%2)===0?'1px solid rgba(243,239,228,0.15)':'none' }}>
              <div style={{ fontFamily:SCI.display, fontSize:36, lineHeight:1 }}>{v}</div>
              <MonoLabel size={9} style={{color:'rgba(243,239,228,0.55)'}}>{k}</MonoLabel>
            </div>
          ))}
        </div>
        <blockquote style={{ fontFamily:SCI.display, fontSize:22, lineHeight:1.25, margin:'24px 0 14px', letterSpacing:-0.2 }}>
          “The first reading that has told me something I did not already know <span style={{color:SCI.orange}}>—</span> and that turned out, on reflection, to be correct.”
        </blockquote>
        <div style={{fontFamily:SCI.mono, fontSize:10, color:'rgba(243,239,228,0.55)', letterSpacing:0.5}}>L. KOWALSKI · ARCHITECT · BROOKLYN</div>
      </div>

      {/* CTA */}
      <div style={{ padding:'28px 20px', background:SCI.ink, color:SCI.paper }}>
        <h2 style={{ fontFamily:SCI.display, fontSize:32, lineHeight:1, margin:'0 0 16px', letterSpacing:-0.5 }}>
          Twelve from you. <span style={{color:SCI.orange, fontStyle:'italic'}}>An atlas, by hand, from me.</span>
        </h2>
        <SciBtn size="lg" w="100%" icon="→" style={{background:SCI.paper, color:SCI.ink, border:`1px solid ${SCI.paper}`}}>Begin 12-min intake</SciBtn>
      </div>

      {/* footer */}
      <div style={{ padding:'18px 20px', fontFamily:SCI.mono, fontSize:9, color:SCI.ink3, letterSpacing:0.5, display:'flex', justifyContent:'space-between' }}>
        <span>© 2026 AMARA IDRIS</span>
        <span>ATLASES, BY HAND</span>
        <span>FIG. END</span>
      </div>
    </div>
  );
}

Object.assign(window, { TRADITION_CELLS, AmaraHero, AmaraMethod, AmaraTraditions, AmaraSample, AmaraPricing, AmaraTheWork, AmaraFAQ, AmaraCTA, AmaraHomepageDesktop, AmaraHomepageMobile });
