// Tamashi v4 — "The Library"
// A scholar's archive of every soul-reading tradition. Aged paper, candlelight,
// multi-script marginalia, hairline rules. Premium, quiet, authoritative.

const T4 = {
  // Aged-paper palette
  paper:    '#ede4d3',   // primary ground (warm vellum)
  paper2:   '#e3d8c1',   // recessed
  paper3:   '#d6c7a8',   // deep parchment
  cream:    '#f5ecd9',   // page highlight
  ink:      '#1c1814',   // sepia ink
  ink2:     '#2e2620',
  ink3:     '#5b4f42',   // muted
  rule:     '#8a7a5e',   // hairline rule
  // Cultural accents — used SPARINGLY, like illumination
  ochre:    '#a87a2c',   // candlelight / Sahel
  madder:   '#8a2a1a',   // madder red / Vedic / cinnabar seal
  teal:     '#2d4a4a',   // oxidized bronze / Tzolk'in
  indigo:   '#1f2d4a',   // night sky / Ifa
  jade:     '#4a5a3a',   // jade / Ba Zi
  // Type
  display:  '"Tenor Sans", "Cormorant Garamond", Georgia, serif',
  serif:    '"Cormorant Garamond", "EB Garamond", Georgia, serif',
  body:     '"EB Garamond", Georgia, serif',
  small:    '"IM Fell English", "EB Garamond", Georgia, serif',
  sans:     '"Tenor Sans", "Trajan Pro", Georgia, serif',
};

// Catalogue rubric — small caps with cataloguing number
const Rubric4 = ({ children, color=T4.ink3, size=10, style={} }) => (
  <span style={{ fontFamily:T4.small, fontSize:size, letterSpacing:2.5, textTransform:'uppercase', color, fontVariant:'small-caps', ...style }}>{children}</span>
);

// Hairline rule
const Hair = ({ color=T4.rule, opacity=0.5, style={} }) => (
  <div style={{ height:1, background:color, opacity, ...style }}/>
);

// Ornamental rule with center mark and edge ticks (catalogue-card feel)
const Catalog = ({ color=T4.rule, mark='✦', style={} }) => (
  <div style={{ display:'flex', alignItems:'center', gap:14, ...style }}>
    <div style={{ width:1, height:8, background:color, opacity:0.6 }}/>
    <div style={{ flex:1, height:1, background:color, opacity:0.6 }}/>
    <span style={{ fontFamily:T4.serif, fontSize:11, color, opacity:0.8 }}>{mark}</span>
    <div style={{ flex:1, height:1, background:color, opacity:0.6 }}/>
    <div style={{ width:1, height:8, background:color, opacity:0.6 }}/>
  </div>
);

// Aged-paper texture overlay (procedural, deterministic)
const PaperTexture = ({ w=1400, h=600, opacity=0.18 }) => {
  const seed = (i) => { const x = Math.abs(Math.sin(i*914.7) * 10000); return x - Math.floor(x); };
  const blots = [];
  for (let i=0;i<60;i++) {
    const x = seed(i)*w, y = seed(i+200)*h;
    const r = 20 + seed(i+400)*70;
    const o = 0.04 + seed(i+600)*0.08;
    blots.push(<circle key={i} cx={x} cy={y} r={r} fill={T4.ink} opacity={o}/>);
  }
  for (let i=0;i<200;i++) {
    const x = seed(i+1000)*w, y = seed(i+1200)*h;
    blots.push(<circle key={'s'+i} cx={x} cy={y} r={0.5+seed(i+1400)*1.2} fill={T4.ink} opacity={0.15}/>);
  }
  return (
    <svg viewBox={`0 0 ${w} ${h}`} style={{position:'absolute', inset:0, width:'100%', height:'100%', pointerEvents:'none', opacity, mixBlendMode:'multiply'}}>
      {blots}
    </svg>
  );
};

// A faded-map-edge frame
const MapBorder = ({ children, style={} }) => (
  <div style={{ position:'relative', border:`1px solid ${T4.rule}`, padding:0, ...style }}>
    {/* corner reinforcements */}
    {[['top','left'],['top','right'],['bottom','left'],['bottom','right']].map(([y,x],i)=>(
      <svg key={i} width="22" height="22" style={{position:'absolute', [y]:-1, [x]:-1}}>
        <path d={x==='left'? `M0,22 L0,0 L22,0`:`M22,22 L22,0 L0,0`} stroke={T4.ink} strokeWidth="1" fill="none"/>
      </svg>
    ))}
    {children}
  </div>
);

// Cultural sigils — abstracted, not literal
const Sigil = ({ tradition, size=44, color=T4.ink }) => {
  const draw = {
    western: ( // 12-petal zodiac wheel
      <g stroke={color} fill="none" strokeWidth="1">
        <circle cx="22" cy="22" r="18"/>
        <circle cx="22" cy="22" r="13"/>
        {Array.from({length:12}).map((_,i)=>{
          const a=i*30*Math.PI/180;
          return <line key={i} x1={22+Math.cos(a)*13} y1={22+Math.sin(a)*13} x2={22+Math.cos(a)*18} y2={22+Math.sin(a)*18}/>;
        })}
        <circle cx="22" cy="22" r="2" fill={color}/>
      </g>
    ),
    vedic: ( // square kundali
      <g stroke={color} fill="none" strokeWidth="1">
        <rect x="6" y="6" width="32" height="32"/>
        <line x1="6" y1="6" x2="38" y2="38"/>
        <line x1="38" y1="6" x2="6" y2="38"/>
        <line x1="22" y1="6" x2="6" y2="22"/>
        <line x1="38" y1="22" x2="22" y2="38"/>
        <line x1="22" y1="6" x2="38" y2="22"/>
        <line x1="6" y1="22" x2="22" y2="38"/>
      </g>
    ),
    bazi: ( // 4-pillar columns
      <g stroke={color} fill="none" strokeWidth="1">
        {[10,18,26,34].map((x,i)=>(<g key={i}><line x1={x} y1="6" x2={x} y2="38"/><circle cx={x} cy="14" r="1.5" fill={color}/><circle cx={x} cy="22" r="1.5" fill={color}/><circle cx={x} cy="30" r="1.5" fill={color}/></g>))}
      </g>
    ),
    iching: ( // bagua trigrams
      <g stroke={color} fill="none" strokeWidth="1.4">
        <line x1="6" y1="14" x2="38" y2="14"/>
        <line x1="6" y1="22" x2="16" y2="22"/><line x1="28" y1="22" x2="38" y2="22"/>
        <line x1="6" y1="30" x2="38" y2="30"/>
      </g>
    ),
    ifa: ( // Odu — 4 columns of 2 marks
      <g fill={color}>
        {[10,18,26,34].map((x,i)=>(<g key={i}>
          {i%2===0? <><rect x={x-3} y="12" width="6" height="3"/><rect x={x-3} y="20" width="6" height="3"/><rect x={x-3} y="28" width="6" height="3"/></>
                  : <><rect x={x-6} y="12" width="4" height="3"/><rect x={x+2} y="12" width="4" height="3"/><rect x={x-3} y="20" width="6" height="3"/><rect x={x-6} y="28" width="4" height="3"/><rect x={x+2} y="28" width="4" height="3"/></>}
        </g>))}
      </g>
    ),
    tzolkin: ( // Mayan stepped glyph
      <g stroke={color} fill="none" strokeWidth="1">
        <path d="M8,32 L8,18 L14,18 L14,12 L30,12 L30,18 L36,18 L36,32 Z"/>
        <circle cx="14" cy="24" r="1.5" fill={color}/>
        <circle cx="22" cy="24" r="1.5" fill={color}/>
        <circle cx="30" cy="24" r="1.5" fill={color}/>
      </g>
    ),
    nine_star: ( // 3x3 lo shu
      <g stroke={color} fill="none" strokeWidth="1">
        <rect x="8" y="8" width="28" height="28"/>
        <line x1="8" y1="17" x2="36" y2="17"/><line x1="8" y1="27" x2="36" y2="27"/>
        <line x1="17" y1="8" x2="17" y2="36"/><line x1="27" y1="8" x2="27" y2="36"/>
        <text x="22" y="22" textAnchor="middle" fontSize="6" fill={color} fontFamily={T4.serif}>5</text>
      </g>
    ),
    enneagram: ( // 9-point figure
      <g stroke={color} fill="none" strokeWidth="1">
        <circle cx="22" cy="22" r="16"/>
        {Array.from({length:9}).map((_,i)=>{
          const a=(i*40-90)*Math.PI/180;
          return <circle key={i} cx={22+Math.cos(a)*16} cy={22+Math.sin(a)*16} r="1.6" fill={color}/>;
        })}
        <path d="M22,6 L34.4,32 L9.6,17 L34.4,17 L9.6,32 Z"/>
      </g>
    ),
    bigfive: ( // five-bar
      <g fill={color}>
        {[0.3,0.7,0.5,0.85,0.4].map((v,i)=>(
          <rect key={i} x={8+i*6} y={36-v*26} width="3" height={v*26}/>
        ))}
      </g>
    ),
    ayurveda: ( // tri-dosha triangles
      <g stroke={color} fill="none" strokeWidth="1">
        <path d="M22,6 L36,32 L8,32 Z"/>
        <path d="M22,14 L30,30 L14,30 Z"/>
        <circle cx="22" cy="22" r="2" fill={color}/>
      </g>
    ),
  };
  return (
    <svg width={size} height={size} viewBox="0 0 44 44">
      {draw[tradition] || draw.western}
    </svg>
  );
};

// Multi-script "soul" line — each in its native script
const SoulInScripts = ({ size=14, color=T4.ink3 }) => (
  <div style={{ display:'flex', gap:18, fontFamily:T4.serif, fontSize:size, color, alignItems:'baseline', flexWrap:'wrap', justifyContent:'center' }}>
    <span>anima</span>
    <span style={{opacity:0.5}}>·</span>
    <span style={{fontSize:size+2}}>魂</span>
    <span style={{opacity:0.5}}>·</span>
    <span>आत्मन्</span>
    <span style={{opacity:0.5}}>·</span>
    <span>ψυχή</span>
    <span style={{opacity:0.5}}>·</span>
    <span>نفس</span>
    <span style={{opacity:0.5}}>·</span>
    <span>ẹ̀mí</span>
    <span style={{opacity:0.5}}>·</span>
    <span>ch'ulel</span>
    <span style={{opacity:0.5}}>·</span>
    <span style={{fontStyle:'italic'}}>self</span>
  </div>
);

// A "sage" portrait placeholder — silhouette in a cameo
const SagePortrait = ({ w=320, h=380 }) => (
  <div style={{ width:w, height:h, position:'relative', background:`radial-gradient(ellipse at center, ${T4.paper}, ${T4.paper3})`, border:`1px solid ${T4.rule}`, overflow:'hidden' }}>
    <PaperTexture w={w} h={h} opacity={0.3}/>
    <svg viewBox="0 0 320 380" style={{position:'absolute', inset:0, width:'100%', height:'100%'}}>
      {/* candlelight from left */}
      <defs>
        <radialGradient id="candle" cx="0.2" cy="0.4">
          <stop offset="0%" stopColor={T4.ochre} stopOpacity="0.35"/>
          <stop offset="60%" stopColor={T4.ochre} stopOpacity="0"/>
        </radialGradient>
      </defs>
      <rect width="320" height="380" fill="url(#candle)"/>
      {/* shoulders + hair silhouette — ageless, ambiguous */}
      <g fill={T4.ink} opacity="0.92">
        {/* hair / wrap */}
        <path d="M 90 130
                 Q 80 80 130 60
                 Q 160 48 195 60
                 Q 240 75 235 130
                 Q 240 160 232 180
                 L 232 220
                 Q 250 240 270 270
                 L 270 380
                 L 50 380
                 L 50 270
                 Q 70 240 88 220
                 L 88 180
                 Q 80 160 90 130 Z"/>
        {/* face cutout */}
        <path d="M 130 140
                 Q 125 110 160 105
                 Q 195 110 195 140
                 Q 200 175 195 195
                 Q 188 220 160 225
                 Q 132 220 125 195
                 Q 120 175 130 140 Z" fill={T4.paper2}/>
        {/* subtle features in light side */}
      </g>
      {/* light side features */}
      <g opacity="0.5">
        <path d="M 138 165 Q 145 158 152 165" stroke={T4.ink} strokeWidth="0.8" fill="none"/>
        <circle cx="146" cy="170" r="2" fill={T4.ink} opacity="0.6"/>
        <path d="M 156 188 Q 158 195 154 200" stroke={T4.ink} strokeWidth="0.6" fill="none"/>
        <path d="M 148 210 Q 158 215 168 210" stroke={T4.ink} strokeWidth="0.6" fill="none"/>
      </g>
      {/* engraving lines on dark side */}
      <g stroke={T4.ink} strokeWidth="0.3" opacity="0.4" fill="none">
        {Array.from({length:24}).map((_,i)=>(
          <path key={i} d={`M ${200+i*4} 110 Q ${210+i*4} 200 ${190+i*4} 280`}/>
        ))}
      </g>
    </svg>
    {/* cameo plate label */}
    <div style={{ position:'absolute', bottom:10, left:0, right:0, textAlign:'center' }}>
      <Rubric4 size={9}>fig. i  ·  the keeper</Rubric4>
    </div>
  </div>
);

Object.assign(window, { T4, Rubric4, Hair, Catalog, PaperTexture, MapBorder, Sigil, SoulInScripts, SagePortrait });