// Tamashii — mythical direction
// Illuminated-manuscript meets 15th-c. astrological woodcut.
// Palette: deep indigo, gold leaf, parchment cream, oxblood.

const TAM = {
  indigo:  '#1a1740',   // primary ink (night sky)
  indigo2: '#272253',   // slightly lifted
  indigo3: '#3a3370',   // subtle divider
  gold:    '#c9a24a',   // gold leaf
  gold2:   '#a07e32',   // darker gold
  cream:   '#f3e8d3',   // parchment
  cream2:  '#ebddc0',   // parchment shadow
  cream3:  '#d9c89f',   // deep parchment
  blood:   '#7d1f3a',   // oxblood
  blood2:  '#5a1428',
  ink:     '#0f0d2a',
  display: '"Italiana", "Cormorant Garamond", Georgia, serif',    // high-contrast mythical
  roman:   '"Cormorant Garamond", "EB Garamond", Georgia, serif',  // body
  small:   '"IM Fell English", "EB Garamond", Georgia, serif',     // rubrics / small caps
  mono:    '"IM Fell English", "EB Garamond", Georgia, serif',
};

// ———————————————————————————————————————————————————
// Primitives
// ———————————————————————————————————————————————————
const Rubric = ({ children, color=TAM.blood, size=11, style={} }) => (
  <span style={{
    fontFamily:TAM.small, fontSize:size, letterSpacing:2,
    textTransform:'uppercase', color, fontVariant:'small-caps', ...style,
  }}>{children}</span>
);

const GoldRule = ({ h=1, style={} }) => (
  <div style={{ height:h, background:`linear-gradient(90deg, transparent, ${TAM.gold} 20%, ${TAM.gold} 80%, transparent)`, ...style }}/>
);

// Ornamental double rule with diamond in the middle
const OrnamentRule = ({ color=TAM.gold, style={} }) => (
  <div style={{ display:'flex', alignItems:'center', gap:10, ...style }}>
    <div style={{ flex:1, height:1, background:color, opacity:0.9 }}/>
    <svg width="38" height="12" viewBox="0 0 38 12">
      <polygon points="19,1 24,6 19,11 14,6" fill={color}/>
      <circle cx="4" cy="6" r="1.5" fill={color}/>
      <circle cx="34" cy="6" r="1.5" fill={color}/>
    </svg>
    <div style={{ flex:1, height:1, background:color, opacity:0.9 }}/>
  </div>
);

// Illuminated drop-cap
const DropCap = ({ letter, size=110, color=TAM.gold, bg=TAM.indigo2 }) => (
  <div style={{
    float:'left', width:size, height:size, marginRight:14, marginTop:6, marginBottom:-2,
    background:bg, border:`2px solid ${color}`, position:'relative',
    display:'flex', alignItems:'center', justifyContent:'center',
  }}>
    {/* corner fleurons */}
    {[[4,4,0],[size-12,4,90],[4,size-12,-90],[size-12,size-12,180]].map(([x,y,r],i)=>(
      <svg key={i} width="8" height="8" style={{position:'absolute', left:x, top:y, transform:`rotate(${r}deg)`}}>
        <path d="M0,8 Q0,0 8,0 Q4,4 4,8 Q2,6 0,8" fill={color}/>
      </svg>
    ))}
    <span style={{ fontFamily:TAM.display, fontSize:size*0.78, color, lineHeight:1, textShadow:`0 0 12px rgba(201,162,74,0.4)` }}>{letter}</span>
  </div>
);

// Starfield (deterministic)
const Starfield = ({ w=1400, h=680, density=1 }) => {
  const stars = [];
  // seeded by trigonometric function
  const seed = (i) => {
    const x = Math.abs(Math.sin(i*928.3) * 10000);
    return x - Math.floor(x);
  };
  const n = Math.floor(260 * density);
  for (let i=0;i<n;i++) {
    const x = seed(i)*w;
    const y = seed(i+500)*h;
    const r = 0.3 + seed(i+1000)*1.8;
    const o = 0.3 + seed(i+1500)*0.7;
    stars.push(<circle key={i} cx={x} cy={y} r={r} fill={TAM.cream} opacity={o}/>);
  }
  // bright few
  const bright = [[0.22,0.34],[0.48,0.2],[0.71,0.42],[0.84,0.16],[0.14,0.62],[0.58,0.75],[0.9,0.68],[0.36,0.55]];
  return (
    <svg viewBox={`0 0 ${w} ${h}`} style={{position:'absolute', inset:0, width:'100%', height:'100%', pointerEvents:'none'}}>
      {stars}
      {bright.map(([bx,by],i)=>(
        <g key={'b'+i}>
          <circle cx={bx*w} cy={by*h} r="2.4" fill={TAM.gold}/>
          <g stroke={TAM.gold} strokeWidth="0.6" opacity="0.85">
            <line x1={bx*w-7} y1={by*h} x2={bx*w+7} y2={by*h}/>
            <line x1={bx*w} y1={by*h-7} x2={bx*w} y2={by*h+7}/>
          </g>
        </g>
      ))}
    </svg>
  );
};

// Constellation — a line-drawing Ursa-like figure, configurable
const Constellation = ({ w=520, h=340, points, label, accent=TAM.gold, star=TAM.cream }) => (
  <svg viewBox={`0 0 ${w} ${h}`} style={{ display:'block', width:'100%', height:'auto' }}>
    <polyline fill="none" stroke={accent} strokeWidth="1" opacity="0.6" strokeDasharray="2 3"
      points={points.map(p=>`${p[0]},${p[1]}`).join(' ')}/>
    {points.map(([x,y,big,name],i)=>(
      <g key={i}>
        <circle cx={x} cy={y} r={big?3.2:2} fill={star}/>
        {big && (<>
          <circle cx={x} cy={y} r="8" fill="none" stroke={accent} strokeWidth="0.5" opacity="0.6"/>
          <text x={x+12} y={y-6} fontFamily={TAM.small} fontSize="10" fill={star} opacity="0.8">{name}</text>
        </>)}
      </g>
    ))}
    {label && <text x={20} y={h-18} fontFamily={TAM.small} fontSize="11" letterSpacing="3" fill={accent} fontVariant="small-caps">{label}</text>}
  </svg>
);

// Zodiac glyph SVG component
const ZodiacGlyph = ({ sign, size=32, color=TAM.gold }) => {
  const paths = {
    aries:    'M6,22 Q6,10 14,10 Q22,10 22,22 M2,14 Q6,6 14,8 Q22,6 26,14',
    taurus:   'M14,20 A6,6 0 1,1 14,20.01 M4,10 Q8,4 14,8 Q20,4 24,10',
    gemini:   'M6,6 L22,6 M6,24 L22,24 M10,6 L10,24 M18,6 L18,24',
    cancer:   'M6,10 Q14,4 22,10 Q22,14 16,14 A3,3 0 1,1 16,14.01 M22,20 Q14,26 6,20 Q6,16 12,16 A3,3 0 1,1 12,16.01',
    leo:      'M10,22 A6,6 0 1,1 10,22.01 M10,16 Q10,4 18,4 Q24,4 24,12 Q24,18 18,18 Q20,22 24,20',
    virgo:    'M4,22 L4,10 L8,22 L8,10 L12,22 L12,10 L16,22 L16,14 Q20,14 20,18 Q20,24 16,24 Q22,24 22,18',
    libra:    'M4,22 L26,22 M6,16 L24,16 M10,16 Q10,8 15,8 Q20,8 20,16',
    scorpio:  'M4,22 L4,10 L8,22 L8,10 L12,22 L12,10 L16,22 L16,14 Q20,14 20,18 L24,14 L26,18',
    sagittarius:'M4,26 L24,6 M20,6 L24,6 L24,10 M12,14 L18,8',
    capricorn:'M4,8 L8,22 L12,14 L14,22 Q18,22 18,18 A3,3 0 1,1 18,18.01',
    aquarius: 'M4,12 L8,16 L12,12 L16,16 L20,12 L24,16 M4,20 L8,24 L12,20 L16,24 L20,20 L24,24',
    pisces:   'M6,6 Q14,14 6,22 M22,6 Q14,14 22,22 M10,14 L18,14',
  };
  return (
    <svg width={size} height={size} viewBox="0 0 28 28">
      <path d={paths[sign]||paths.aries} fill="none" stroke={color} strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
};

// Woodcut-style framed panel
const FramedPanel = ({ children, color=TAM.gold, style={} }) => (
  <div style={{
    border:`1px solid ${color}`,
    boxShadow:`0 0 0 4px ${TAM.indigo}, 0 0 0 5px ${color}`,
    padding:0, position:'relative', ...style,
  }}>
    {/* corner ornaments */}
    {[[4,4,0],[null,4,0,4],[4,null,0,0,4],[null,null,0,4,4]].map((c,i)=>{
      const [t,r,rot,b,l] = c;
      return (
        <svg key={i} width="14" height="14" viewBox="0 0 14 14" style={{
          position:'absolute',
          top: t ?? (l!==undefined?'auto':undefined),
          right: r===undefined?undefined:(r===null?4:undefined),
          bottom: b!==undefined?4:undefined,
          left: l!==undefined?4:(t===undefined && r===undefined?undefined:(t!==null?4:undefined)),
        }}>
          <path d="M0,14 L0,0 L14,0 M0,4 L4,4 L4,0 M2,2 L2,0 L0,2" fill={color}/>
        </svg>
      );
    })}
    {children}
  </div>
);

// Small tarot card visual
const TarotCard = ({ name, arcanum, glyph, w=180 }) => {
  const h = w * 1.68;
  return (
    <div style={{
      width:w, height:h, background:TAM.cream, border:`1.5px solid ${TAM.gold}`,
      padding:10, boxShadow:`inset 0 0 0 2px ${TAM.cream}, inset 0 0 0 3px ${TAM.gold}, 0 6px 20px rgba(15,13,42,0.4)`,
      display:'flex', flexDirection:'column', color:TAM.indigo, position:'relative',
      fontFamily:TAM.roman,
    }}>
      <div style={{ textAlign:'center', fontFamily:TAM.small, fontSize:8.5, letterSpacing:2, fontVariant:'small-caps', color:TAM.blood, marginTop:2 }}>{arcanum}</div>
      <div style={{ flex:1, margin:'8px 4px', border:`1px solid ${TAM.gold}`, background:TAM.indigo, display:'flex', alignItems:'center', justifyContent:'center', position:'relative', overflow:'hidden' }}>
        <Starfield w={200} h={280} density={0.5}/>
        <div style={{ position:'relative', color:TAM.gold, fontSize: w*0.5, lineHeight:1, textShadow:`0 0 16px rgba(201,162,74,0.6)` }}>{glyph}</div>
      </div>
      <div style={{ textAlign:'center', fontFamily:TAM.display, fontSize:w*0.1, color:TAM.indigo, letterSpacing:0.5, lineHeight:1 }}>{name}</div>
    </div>
  );
};

Object.assign(window, { TAM, Rubric, GoldRule, OrnamentRule, DropCap, Starfield, Constellation, ZodiacGlyph, FramedPanel, TarotCard });