// Amara — primitives & shared chrome
// Reuses the Persona Science palette and atoms (SCI, MonoLabel, Pill, SciBtn,
// BigFiveBars, EnneaRadar, MBTIStack, Sparkline, InstrumentIcon) from
// science-hifi.jsx (loaded earlier on the page). Adds tradition glyphs and
// Amara-specific chrome (nav, footer, hero data panel, convergence atlas).

const AMARA = {
  brand: 'Amara',
  tagline: 'Hand-written atlases · est. 2017',
  est: 2017,
  written: 1247,
  traditions: 13,
  readings: 38,
  hours: 3,
};

// —— TRADITION GLYPHS — drawn in the same restrained style as InstrumentIcon
function TraditionGlyph({ kind }) {
  const s = { width:'100%', aspectRatio:'1/1' };
  // Modern psychology — three-bar Big Five abstraction
  if (kind==='psych') return (
    <svg viewBox="0 0 60 60" style={s}>
      {[0.88,0.62,0.41,0.72].map((v,i)=>(
        <g key={i}>
          <rect x="8" y={10+i*10} width="44" height="4" fill={SCI.tint}/>
          <rect x="8" y={10+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}>
      {/* north-indian square chart */}
      <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}>
      {/* four pillars — four stacked bars */}
      {[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}>
      {/* Tzolkin — bar/dot numerals */}
      <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>
  );
  if (kind==='tibet') return (
    <svg viewBox="0 0 60 60" style={s}>
      {/* five elemental rings */}
      {[
        {y:50,r:18,c:SCI.ink},   // earth
        {y:42,r:14,c:SCI.ink},   // water
        {y:34,r:11,c:SCI.orange},// fire
        {y:26,r:8,c:SCI.ink},    // wind
        {y:18,r:5,c:SCI.ink},    // space
      ].map((e,i)=>(
        <circle key={i} cx="30" cy={e.y} r={e.r} fill="none" stroke={e.c} strokeWidth={i===2?1.4:0.8}/>
      ))}
    </svg>
  );
  if (kind==='celtic') return (
    <svg viewBox="0 0 60 60" style={s}>
      {/* tree/ogham */}
      <line x1="30" y1="8" x2="30" y2="52" stroke={SCI.ink} strokeWidth="1.1"/>
      {[14,20,26,32,38,44].map((y,i)=>{
        const left = i%2===0;
        return <line key={i} x1={left?16:30} y1={y} x2={left?30:44} y2={y} stroke={i===2?SCI.orange:SCI.ink} strokeWidth="1"/>;
      })}
    </svg>
  );
  if (kind==='norse') return (
    <svg viewBox="0 0 60 60" style={s}>
      {/* runic stack */}
      <g stroke={SCI.ink} strokeWidth="1.4" fill="none">
        <line x1="14" y1="12" x2="14" y2="48"/>
        <line x1="14" y1="20" x2="22" y2="14"/>
        <line x1="14" y1="20" x2="22" y2="26"/>
      </g>
      <g stroke={SCI.orange} strokeWidth="1.4" fill="none">
        <line x1="30" y1="12" x2="30" y2="48"/>
        <line x1="30" y1="14" x2="38" y2="14"/>
        <line x1="30" y1="30" x2="38" y2="30"/>
      </g>
      <g stroke={SCI.ink} strokeWidth="1.4" fill="none">
        <line x1="46" y1="12" x2="46" y2="48"/>
        <line x1="46" y1="48" x2="54" y2="42"/>
      </g>
    </svg>
  );
  if (kind==='egypt') return (
    <svg viewBox="0 0 60 60" style={s}>
      {/* decan strip — 36 ticks compressed; 3 highlighted as one decan */}
      <line x1="6" y1="30" x2="54" y2="30" stroke={SCI.ink} strokeWidth="0.6"/>
      {Array.from({length:18}).map((_,i)=>{
        const x = 6 + i*(48/17);
        const hl = i>=7 && i<=9;
        return <line key={i} x1={x} y1="22" x2={x} y2="38" stroke={hl?SCI.orange:SCI.ink} strokeWidth={hl?1.4:0.8}/>;
      })}
      <text x="30" y="52" fontFamily={SCI.mono} fontSize="7" textAnchor="middle" fill={SCI.ink2}>36 DECANS</text>
    </svg>
  );
  if (kind==='ifa') return (
    <svg viewBox="0 0 60 60" style={s}>
      {/* odu — 4 paired bars */}
      {[0,1,2,3].map(i=>{
        const y = 14+i*9;
        const single = i%2===0;
        return single
          ? <rect key={i} x="16" y={y} width="28" height="3.5" fill={SCI.ink}/>
          : <g key={i}><rect x="16" y={y} width="11" height="3.5" fill={SCI.ink}/><rect x="33" y={y} width="11" height="3.5" fill={SCI.ink}/></g>;
      })}
    </svg>
  );
  if (kind==='medicine') return (
    <svg viewBox="0 0 60 60" style={s}>
      {/* medicine wheel — circle quartered */}
      <circle cx="30" cy="30" r="20" fill="none" stroke={SCI.ink}/>
      <line x1="10" y1="30" x2="50" y2="30" stroke={SCI.ink}/>
      <line x1="30" y1="10" x2="30" y2="50" stroke={SCI.ink}/>
      <path d="M 30 10 A 20 20 0 0 1 50 30 L 30 30 Z" fill={SCI.orange} fillOpacity="0.85"/>
    </svg>
  );
  if (kind==='kabbalah') return (
    <svg viewBox="0 0 60 60" style={s}>
      {/* tree of life — 10 sephirot */}
      {[
        [30,8],[18,18],[42,18],[18,30],[42,30],
        [30,30],[18,42],[42,42],[30,42],[30,52]
      ].map(([x,y],i)=>(
        <g key={i}>
          <circle cx={x} cy={y} r="3" fill={i===5?SCI.orange:SCI.paper} stroke={SCI.ink}/>
        </g>
      ))}
      {[[0,1],[0,2],[1,2],[1,3],[2,4],[3,5],[4,5],[3,6],[4,7],[5,8],[6,8],[7,8],[8,9]].map(([a,b],i)=>{
        const pts = [[30,8],[18,18],[42,18],[18,30],[42,30],[30,30],[18,42],[42,42],[30,42],[30,52]];
        const [x1,y1]=pts[a], [x2,y2]=pts[b];
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={SCI.ink} strokeWidth="0.5"/>;
      })}
    </svg>
  );
  if (kind==='folk') return (
    <svg viewBox="0 0 60 60" style={s}>
      {/* hex/folk star — six-pointed */}
      <polygon points="30,10 47,40 13,40" fill="none" stroke={SCI.ink} strokeWidth="1.1"/>
      <polygon points="30,50 13,20 47,20" fill="none" stroke={SCI.orange} strokeWidth="1.1"/>
      <circle cx="30" cy="30" r="2" fill={SCI.ink}/>
    </svg>
  );
  return null;
}

// —— Amara wordmark ———————————————————————
function AmaraMark({ size=22, color=SCI.ink }) {
  return (
    <span style={{
      fontFamily:SCI.display, fontStyle:'italic', fontSize:size, letterSpacing:-0.3, fontWeight:500, color,
    }}>Amara<span style={{color:SCI.orange, fontStyle:'normal'}}>.</span></span>
  );
}

// —— Nav & Footer ————————————————————————
function AmaraNav({ active='Methodology' }) {
  const items = ['Methodology','Traditions','Sample atlas','Pricing','About Amara'];
  return (
    <div style={{ display:'flex', alignItems:'stretch', height:64, borderBottom:`1px solid ${SCI.ink}`, background:SCI.paper }}>
      <div style={{ padding:'0 28px', display:'flex', alignItems:'center', borderRight:`1px solid ${SCI.ink}`, 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>
        <AmaraMark/>
        <MonoLabel size={9} style={{marginLeft:6, color:SCI.ink3}}>EST. 2017</MonoLabel>
      </div>
      <div style={{ flex:1, display:'flex', alignItems:'center', padding:'0 28px', gap:32, fontSize:13 }}>
        {items.map((l,i)=>(
          <span key={i} style={{ color: l===active?SCI.ink:SCI.ink2, borderBottom: l===active?`1.5px solid ${SCI.ink}`:'none', padding:'4px 0' }}>{l}</span>
        ))}
      </div>
      <div style={{ borderLeft:`1px solid ${SCI.ink}`, padding:'0 18px', display:'flex', alignItems:'center', gap:10 }}>
        <span style={{fontSize:12}}>Sign in</span>
        <SciBtn primary size="sm" icon="→">Begin intake</SciBtn>
      </div>
    </div>
  );
}

function AmaraFooter({ note='ATLASES, BY HAND' }) {
  const cols = [
    { h:'The work',  items:['Methodology','Thirteen traditions','Sample atlas','Reading list'] },
    { h:'Pricing',   items:['Daily Sign','Cultural Dossier','Universal Atlas','Gift an atlas'] },
    { h:'Amara',     items:['About Amara','Apprentices','Studio notes','Letters'] },
    { h:'Care',      items:['Privacy','Data deletion','Terms','Contact'] },
  ];
  return (
    <div style={{ padding:'40px 56px 26px', background:SCI.paper, borderTop:`1px solid ${SCI.ink}` }}>
      <div style={{ display:'grid', gridTemplateColumns:'1.4fr repeat(4,1fr)', gap:40, paddingBottom:28, borderBottom:`1px solid ${SCI.ink}` }}>
        <div>
          <AmaraMark size={36}/>
          <div style={{ fontFamily:SCI.mono, fontSize:10, color:SCI.ink3, marginTop:6, letterSpacing:0.5 }}>HAND-WRITTEN ATLASES · EST. 2017</div>
          <div style={{ fontSize:13, lineHeight:1.55, color:SCI.ink2, marginTop:20, maxWidth:320 }}>
            Thirteen traditions, read by hand, against your specific life. The atlas is just the careful record of where they agree.
          </div>
        </div>
        {cols.map((c,i)=>(
          <div key={i}>
            <MonoLabel>{c.h}</MonoLabel>
            <div style={{ marginTop:14, display:'flex', flexDirection:'column', gap:8 }}>
              {c.items.map((it,j)=>(<div key={j} style={{fontSize:13, color:SCI.ink2}}>{it}</div>))}
            </div>
          </div>
        ))}
      </div>
      <div style={{ paddingTop:16, display:'flex', justifyContent:'space-between', fontFamily:SCI.mono, fontSize:10, color:SCI.ink3, letterSpacing:0.5 }}>
        <span>© 2026 AMARA IDRIS · {note}</span>
        <span>WRITTEN ON WARM CREAM · NO TRACKING COOKIES</span>
        <span>FIG. END</span>
      </div>
    </div>
  );
}

// —— shared section header ————————————
function SectionHead({ section, title, sub, right }) {
  return (
    <div style={{ padding:'48px 56px 18px', display:'grid', gridTemplateColumns: right? '1fr 1fr':'1fr', gap:40, alignItems:'end', borderBottom: 'none' }}>
      <div>
        <MonoLabel>{section}</MonoLabel>
        <h2 style={{ fontFamily:SCI.display, fontSize:48, lineHeight:0.96, margin:'10px 0 0', letterSpacing:-0.6, fontWeight:500 }}>
          {title}
        </h2>
        {sub && <div style={{ fontSize:14, lineHeight:1.55, color:SCI.ink2, marginTop:14, maxWidth:520 }}>{sub}</div>}
      </div>
      {right && <div>{right}</div>}
    </div>
  );
}

// —— 13×13 convergence matrix ——————————————
function ConvergenceMatrix13() {
  const axes = ['Big5','MBTI','Enn','West','Ved','Chin','Maya','Tibet','Celt','Norse','Egpt','Ifa','Folk'];
  const cells = axes.map((_,i)=> axes.map((_,j)=>{
    if (i===j) return 1;
    const seed = ((i*11 + j*5 + (i+j)) % 13)/13;
    // Saturn-builder convergence: high agreement between conscientiousness, vedic, chinese, tibet, norse
    const builderAxes = [0,4,5,7,9];
    const isBuilder = builderAxes.includes(i) && builderAxes.includes(j);
    return isBuilder ? Math.min(0.96, 0.7 + seed*0.3) : Math.min(0.92, 0.18 + seed*0.7);
  }));
  return (
    <div>
      <div style={{ display:'grid', gridTemplateColumns:`64px repeat(${axes.length}, 1fr)`, gap:0 }}>
        <div/>
        {axes.map((a,i)=>(
          <div key={i} style={{ fontFamily:SCI.mono, fontSize:8.5, color:SCI.ink2, textAlign:'center', padding:'4px 0', letterSpacing:0.4 }}>{a}</div>
        ))}
      </div>
      {cells.map((row,i)=>(
        <div key={i} style={{ display:'grid', gridTemplateColumns:`64px repeat(${axes.length}, 1fr)`, gap:0 }}>
          <div style={{ fontFamily:SCI.mono, fontSize:9, color:SCI.ink2, padding:'0 8px', display:'flex', alignItems:'center', justifyContent:'flex-end' }}>{axes[i]}</div>
          {row.map((v,j)=>(
            <div key={j} style={{
              aspectRatio:'1/1',
              background: i===j?SCI.ink:`rgba(198,90,42,${v.toFixed(2)})`,
              border:`1px solid ${SCI.paper}`,
              display:'flex', alignItems:'center', justifyContent:'center',
              fontFamily:SCI.mono, fontSize:7,
              color: v>0.55||i===j?SCI.paper:SCI.ink2,
            }}>{i===j?'·':v.toFixed(2).replace('0.','.')}</div>
          ))}
        </div>
      ))}
    </div>
  );
}

// —— small reusable: long form atlas page ——————
function AtlasPage({ pageNum='IV', heading='The Saturn dasha', body, footer }) {
  return (
    <div style={{ background:SCI.paper, padding:'36px 40px', border:`1px solid ${SCI.ink}` }}>
      <div style={{ display:'flex', justifyContent:'space-between', borderBottom:`1px solid ${SCI.tint}`, paddingBottom:8, marginBottom:18 }}>
        <MonoLabel>§ {pageNum} · {heading}</MonoLabel>
        <MonoLabel size={9} style={{color:SCI.ink3}}>ATLAS PAGE · A. IDRIS</MonoLabel>
      </div>
      <div>{body}</div>
      <div style={{ marginTop:24, paddingTop:14, borderTop:`1px solid ${SCI.tint}`, fontFamily:SCI.mono, fontSize:10, color:SCI.ink3, letterSpacing:0.5, display:'flex', justifyContent:'space-between' }}>
        {footer || <><span>WRITTEN BY HAND</span><span>~ 8,000 W · TOTAL</span><span>FIG. {pageNum}</span></>}
      </div>
    </div>
  );
}

Object.assign(window, { AMARA, TraditionGlyph, AmaraMark, AmaraNav, AmaraFooter, SectionHead, ConvergenceMatrix13, AtlasPage });
