// Natal chart wheel — the big missing hi-fi element
// Uses SCI globals from science-hifi.jsx

function NatalWheel({ size=520, compact }) {
  const cx = size/2, cy = size/2;
  const rOuter = size*0.48;
  const rZodiac = size*0.42;
  const rHouses = size*0.32;
  const rInner  = size*0.20;

  // 12 zodiac signs
  const signs = ['♈','♉','♊','♋','♌','♍','♎','♏','♐','♑','♒','♓'];
  const signNames = ['ARIES','TAURUS','GEMINI','CANCER','LEO','VIRGO','LIBRA','SCORPIO','SAGITTARIUS','CAPRICORN','AQUARIUS','PISCES'];

  // Planet positions (degrees from 0° Aries, 0–360)
  const planets = [
    { g:'☉', n:'Sun',     deg: 217, retro:false },  // 7° Scorpio
    { g:'☽', n:'Moon',    deg:  44, retro:false },  // 14° Taurus
    { g:'☿', n:'Mercury', deg: 232, retro:true },
    { g:'♀', n:'Venus',   deg: 258, retro:false },
    { g:'♂', n:'Mars',    deg:  96, retro:false },
    { g:'♃', n:'Jupiter', deg: 340, retro:false },
    { g:'♄', n:'Saturn',  deg: 168, retro:false },
    { g:'♅', n:'Uranus',  deg:  28, retro:false },
    { g:'♆', n:'Neptune', deg: 290, retro:true },
    { g:'♇', n:'Pluto',   deg: 205, retro:false },
    { g:'☊', n:'N. Node', deg:  72, retro:false },
    { g:'Ⓐ', n:'Asc',     deg: 115, retro:false },
  ];

  // House cusps (simple equal-ish spacing from Asc)
  const asc = 115;
  const cusps = Array.from({length:12}, (_,i)=> (asc + i*30) % 360);

  // Convert degree to SVG coord (0° at 9 o'clock going counter-clockwise is astrology convention;
  // we rotate so Asc is at 9-o'clock = 180° SVG)
  const deg2xy = (deg, r) => {
    const rotated = (180 - (deg - asc)) * Math.PI/180;
    return [cx + Math.cos(rotated)*r, cy - Math.sin(rotated)*r];
  };

  // Major aspects — hand-picked for visual interest
  const aspects = [
    { a:0, b:6,  type:'opp'  },  // Sun opp Saturn
    { a:0, b:2,  type:'conj' },  // Sun conj Mercury
    { a:1, b:4,  type:'trine'},  // Moon trine Mars
    { a:3, b:5,  type:'sext' },  // Venus sext Jupiter
    { a:5, b:9,  type:'squ'  },  // Jupiter sq Pluto
    { a:2, b:8,  type:'trine'},  // Merc trine Nep
  ];
  const aspectColor = { conj:SCI.ink, opp:'#b02d2d', trine:SCI.forest, sext:SCI.sand, squ:SCI.orange };

  return (
    <svg viewBox={`0 0 ${size} ${size}`} style={{ width:'100%', height:'auto', display:'block' }}>
      {/* outer ring */}
      <circle cx={cx} cy={cy} r={rOuter}   fill="none" stroke={SCI.ink}  strokeWidth="1.2"/>
      <circle cx={cx} cy={cy} r={rZodiac}  fill="none" stroke={SCI.ink}  strokeWidth="0.8"/>
      <circle cx={cx} cy={cy} r={rHouses}  fill="none" stroke={SCI.ink3} strokeWidth="0.6"/>
      <circle cx={cx} cy={cy} r={rInner}   fill="none" stroke={SCI.ink3} strokeWidth="0.5"/>

      {/* 1° ticks on outer band */}
      {Array.from({length:360}).map((_,i)=>{
        const isMajor = i%30===0, isMid = i%10===0;
        const [x1,y1] = deg2xy(i, rOuter);
        const [x2,y2] = deg2xy(i, rOuter - (isMajor?10:(isMid?6:3)));
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={SCI.ink} strokeWidth={isMajor?1:0.4} opacity={isMajor?1:(isMid?0.7:0.35)}/>;
      })}

      {/* zodiac sign sectors */}
      {signs.map((g,i)=>{
        const mid = i*30 + 15;
        const [tx,ty] = deg2xy(mid, (rOuter+rZodiac)/2);
        const [nx,ny] = deg2xy(mid, (rOuter+rZodiac)/2 + 0);
        // sector boundaries
        const [bx1,by1] = deg2xy(i*30, rZodiac);
        const [bx2,by2] = deg2xy(i*30, rOuter);
        return (
          <g key={i}>
            <line x1={bx1} y1={by1} x2={bx2} y2={by2} stroke={SCI.ink} strokeWidth="0.8"/>
            <text x={tx} y={ty} fontSize={size*0.036} textAnchor="middle" dominantBaseline="middle"
                  fontFamily={SCI.display} fill={i%2===0?SCI.ink:SCI.ink2}>{g}</text>
          </g>
        );
      })}

      {/* house cusps */}
      {cusps.map((c,i)=>{
        const [x1,y1] = deg2xy(c, rZodiac);
        const [x2,y2] = deg2xy(c, rInner);
        const isAngle = i===0||i===3||i===6||i===9;
        const [lx,ly] = deg2xy(c + 15, rHouses - 14);
        return (
          <g key={i}>
            <line x1={x1} y1={y1} x2={x2} y2={y2}
                  stroke={isAngle?SCI.ink:SCI.ink3}
                  strokeWidth={isAngle?1.4:0.5}
                  strokeDasharray={isAngle?'none':'2 2'}/>
            <text x={lx} y={ly} fontFamily={SCI.mono} fontSize={size*0.02}
                  fill={SCI.ink3} textAnchor="middle">{i+1}</text>
          </g>
        );
      })}

      {/* Asc / MC labels */}
      {[[0,'ASC'],[3,'IC'],[6,'DSC'],[9,'MC']].map(([i,l])=>{
        const c = cusps[i];
        const [x,y] = deg2xy(c, rOuter+16);
        return <text key={l} x={x} y={y} fontFamily={SCI.mono} fontSize={size*0.022}
                     fill={SCI.ink} textAnchor="middle" dominantBaseline="middle" fontWeight={600}>{l}</text>;
      })}

      {/* aspects (inner) */}
      {aspects.map((a,i)=>{
        const [ax,ay] = deg2xy(planets[a.a].deg, rInner);
        const [bx,by] = deg2xy(planets[a.b].deg, rInner);
        return <line key={i} x1={ax} y1={ay} x2={bx} y2={by}
                     stroke={aspectColor[a.type]} strokeWidth="1"
                     strokeDasharray={a.type==='squ'||a.type==='opp'?'none':(a.type==='sext'?'2 2':'none')}
                     opacity="0.7"/>;
      })}

      {/* planets — with tick on zodiac band and glyph just inside */}
      {planets.map((p,i)=>{
        const [tx1,ty1] = deg2xy(p.deg, rZodiac);
        const [tx2,ty2] = deg2xy(p.deg, rZodiac - 10);
        const [gx,gy]   = deg2xy(p.deg, rHouses + 8);
        // degree within sign
        const sign = Math.floor(p.deg/30);
        const degInSign = Math.floor(p.deg%30);
        return (
          <g key={i}>
            <line x1={tx1} y1={ty1} x2={tx2} y2={ty2} stroke={SCI.ink} strokeWidth="1.4"/>
            <circle cx={gx} cy={gy} r={size*0.028} fill={SCI.paper} stroke={SCI.ink} strokeWidth="1"/>
            <text x={gx} y={gy+1} fontSize={size*0.032} fontFamily={SCI.display}
                  textAnchor="middle" dominantBaseline="middle"
                  fill={p.n==='Sun'?SCI.orange:SCI.ink}>{p.g}</text>
            {!compact && <>
              <text x={gx} y={gy + size*0.052} fontFamily={SCI.mono} fontSize={size*0.018}
                    textAnchor="middle" fill={SCI.ink3}>
                {degInSign}° {signs[sign]}{p.retro?' ℞':''}
              </text>
            </>}
          </g>
        );
      })}

      {/* center stamp */}
      <circle cx={cx} cy={cy} r={size*0.08} fill={SCI.paper} stroke={SCI.ink} strokeWidth="0.8"/>
      <text x={cx} y={cy-4} fontFamily={SCI.mono} fontSize={size*0.022}
            textAnchor="middle" fill={SCI.ink2}>J.D.</text>
      <text x={cx} y={cy+10} fontFamily={SCI.mono} fontSize={size*0.018}
            textAnchor="middle" fill={SCI.ink3}>12.JUN.1994</text>
    </svg>
  );
}

// Natal chart artboard — a full blueprint sub-page for § 06
function NatalChartPage() {
  return (
    <div style={{ width:1400, background:SCI.paper, color:SCI.ink, fontFamily:SCI.body, border:`1px solid ${SCI.ink}` }}>
      {/* top bar */}
      <div style={{ display:'flex', alignItems:'stretch', height:56, borderBottom:`1px solid ${SCI.ink}` }}>
        <div style={{ padding:'0 28px', display:'flex', alignItems:'center', gap:10, borderRight:`1px solid ${SCI.ink}` }}>
          <div style={{ width:14, height:14, border:`1.5px solid ${SCI.ink}`, display:'grid', gridTemplateColumns:'1fr 1fr', gridTemplateRows:'1fr 1fr' }}>
            <div style={{background:SCI.ink}}/><div/><div/><div style={{background:SCI.ink}}/>
          </div>
          <div style={{ fontFamily:SCI.display, fontSize:20 }}>Persona</div>
        </div>
        <div style={{ flex:1, padding:'0 28px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <MonoLabel>§ 06 · Astrology · natal chart · 06 / 13</MonoLabel>
          <div style={{ display:'flex', gap:8 }}>
            <Pill>Placidus houses</Pill><Pill>Tropical</Pill><Pill dark>All aspects</Pill>
          </div>
        </div>
      </div>

      <div style={{ padding:'10px 28px', fontFamily:SCI.mono, fontSize:10, color:SCI.ink2, borderBottom:`1px solid ${SCI.tint}`, display:'flex', justifyContent:'space-between' }}>
        <span>FIG. 06 · NATAL CHART · J.DOE</span>
        <span>12.JUN.1994 · 14:32 · BROOKLYN NY · 40.68° N 73.94° W</span>
        <span>ORB: MAJOR 8° · MINOR 3°</span>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr', borderBottom:`1px solid ${SCI.ink}` }}>
        {/* Wheel */}
        <div style={{ padding:'36px 48px', borderRight:`1px solid ${SCI.ink}`, background:SCI.tint2 }}>
          <NatalWheel size={640}/>
        </div>

        {/* Side panel */}
        <div style={{ padding:'36px 40px', display:'flex', flexDirection:'column', gap:22 }}>
          <div>
            <MonoLabel>§ 06.1 · Chart signature</MonoLabel>
            <h2 style={{ fontFamily:SCI.display, fontSize:54, lineHeight:0.95, letterSpacing:-0.8, fontWeight:500, margin:'12px 0 10px' }}>
              Water–Fixed<br/><span style={{fontStyle:'italic'}}>emphasis</span><span style={{color:SCI.orange}}>.</span>
            </h2>
            <div style={{ fontSize:15, lineHeight:1.6, color:SCI.ink2, maxWidth:520 }}>
              Your chart concentrates seven planets in water and fixed signs — the signature of someone who changes direction rarely and always for internal reasons. This is the astrological echo of your 22nd-percentile neuroticism score.
            </div>
          </div>

          {/* Element / modality breakdown */}
          <div style={{ border:`1px solid ${SCI.ink}` }}>
            <div style={{ padding:'10px 14px', borderBottom:`1px solid ${SCI.ink}`, display:'flex', justifyContent:'space-between', background:SCI.tint2 }}>
              <MonoLabel size={9}>Element · Modality</MonoLabel>
              <MonoLabel size={9}>Score</MonoLabel>
            </div>
            {[
              ['Water',    8, true ],
              ['Fire',     4, false],
              ['Earth',    3, false],
              ['Air',      2, false],
            ].map(([l,v,hi],i)=>(
              <div key={i} style={{ display:'grid', gridTemplateColumns:'80px 1fr 30px', gap:10, padding:'8px 14px', borderBottom: i<3?`1px solid ${SCI.tint}`:'none', alignItems:'center' }}>
                <span style={{ fontSize:13 }}>{l}</span>
                <div style={{ height:6, background:SCI.tint, position:'relative' }}>
                  <div style={{ position:'absolute', inset:0, right:'auto', width:`${(v/10)*100}%`, background: hi?SCI.orange:SCI.ink }}/>
                </div>
                <span style={{ fontFamily:SCI.mono, fontSize:11, textAlign:'right' }}>{v}</span>
              </div>
            ))}
            <div style={{ padding:'10px 14px', borderTop:`1px solid ${SCI.ink}`, background:SCI.tint2 }}>
              <MonoLabel size={9}>Modality</MonoLabel>
            </div>
            {[['Fixed',9,true],['Mutable',5,false],['Cardinal',3,false]].map(([l,v,hi],i)=>(
              <div key={i} style={{ display:'grid', gridTemplateColumns:'80px 1fr 30px', gap:10, padding:'8px 14px', borderBottom: i<2?`1px solid ${SCI.tint}`:'none', alignItems:'center' }}>
                <span style={{ fontSize:13 }}>{l}</span>
                <div style={{ height:6, background:SCI.tint, position:'relative' }}>
                  <div style={{ position:'absolute', inset:0, right:'auto', width:`${(v/10)*100}%`, background: hi?SCI.orange:SCI.ink }}/>
                </div>
                <span style={{ fontFamily:SCI.mono, fontSize:11, textAlign:'right' }}>{v}</span>
              </div>
            ))}
          </div>

          {/* Aspect legend */}
          <div>
            <MonoLabel>Aspect legend</MonoLabel>
            <div style={{ marginTop:8, display:'grid', gridTemplateColumns:'1fr 1fr', gap:8 }}>
              {[
                ['Conjunction','0°',  SCI.ink,     'none'],
                ['Opposition', '180°', '#b02d2d',  'none'],
                ['Trine',      '120°', SCI.forest, 'none'],
                ['Square',     '90°',  SCI.orange, 'none'],
                ['Sextile',    '60°',  SCI.sand,   '3 2'],
              ].map(([l,deg,color,dash],i)=>(
                <div key={i} style={{ display:'flex', alignItems:'center', gap:8 }}>
                  <svg width="24" height="6"><line x1="0" y1="3" x2="24" y2="3" stroke={color} strokeWidth="1.4" strokeDasharray={dash}/></svg>
                  <span style={{ fontSize:12 }}>{l}</span>
                  <span style={{ fontFamily:SCI.mono, fontSize:10, color:SCI.ink3 }}>{deg}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Placement table */}
      <div style={{ padding:'28px 48px' }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:14 }}>
          <MonoLabel>§ 06.2 · Planetary placements</MonoLabel>
          <MonoLabel size={9} style={{color:SCI.ink3}}>12 bodies · traditional + modern rulers</MonoLabel>
        </div>
        <div style={{ border:`1px solid ${SCI.ink}` }}>
          <div style={{ display:'grid', gridTemplateColumns:'60px 1fr 110px 80px 180px 1fr', padding:'10px 16px', background:SCI.tint2, borderBottom:`1px solid ${SCI.ink}` }}>
            {['','Body','Sign','House','Aspects','Read'].map((h,i)=>(<MonoLabel key={i} size={9}>{h}</MonoLabel>))}
          </div>
          {[
            ['☉','Sun',     '7° ♏ Scorpio',   '5H','☌ Mercury · ☍ Saturn','A will that clarifies under pressure.'],
            ['☽','Moon',    '14° ♉ Taurus',   '10H','△ Mars','Emotional rhythm is slow, physical, unshakeable.'],
            ['☿','Mercury ℞','22° ♏ Scorpio', '5H','△ Neptune','You think by diving, not skimming.'],
            ['♀','Venus',   '18° ♐ Sagittarius','6H','✳ Jupiter','Affection through expansion — you love by teaching.'],
            ['♂','Mars',    '6° ♋ Cancer',    '1H','△ Moon','Protective energy, not aggressive energy.'],
            ['♃','Jupiter', '10° ♓ Pisces',    '9H','—','Growth arrives through surrender, never strategy.'],
            ['♄','Saturn',  '18° ♍ Virgo',    '3H','☍ Sun','The voice in your head is a supervisor — retrainable.'],
            ['♅','Uranus',  '28° ♈ Aries',    '12H','—','Private rebellions; you change alone first.'],
            ['♆','Neptune ℞','20° ♑ Capricorn','9H','△ Mercury','Dreams that arrive with architecture attached.'],
            ['♇','Pluto',   '25° ♏ Scorpio',  '5H','—','Creative life runs through transformation, or it dies.'],
          ].map(([g,n,sign,h,asp,read],i)=>(
            <div key={i} style={{ display:'grid', gridTemplateColumns:'60px 1fr 110px 80px 180px 1fr', padding:'10px 16px', borderBottom: i<9?`1px solid ${SCI.tint}`:'none', alignItems:'baseline' }}>
              <span style={{ fontFamily:SCI.display, fontSize:22, color: n==='Sun'?SCI.orange:SCI.ink }}>{g}</span>
              <span style={{ fontSize:13 }}>{n}</span>
              <span style={{ fontFamily:SCI.mono, fontSize:11 }}>{sign}</span>
              <span style={{ fontFamily:SCI.mono, fontSize:11, color:SCI.ink3 }}>{h}</span>
              <span style={{ fontFamily:SCI.mono, fontSize:10, color:SCI.ink3 }}>{asp}</span>
              <span style={{ fontSize:13, color:SCI.ink2, fontStyle: n==='Jupiter'?'italic':'normal' }}>{read}</span>
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding:'16px 48px', borderTop:`1px solid ${SCI.ink}`, display:'flex', justifyContent:'space-between', fontFamily:SCI.mono, fontSize:10, color:SCI.ink3 }}>
        <span>← § 05 HUMAN DESIGN</span>
        <span>§ 06 · ASTROLOGY · 06 / 13</span>
        <span>§ 07 VOCATION →</span>
      </div>
    </div>
  );
}

function NatalChartMobile() {
  return (
    <div style={{ width:390, background:SCI.paper, color:SCI.ink, fontFamily:SCI.body, border:`1px solid ${SCI.ink}` }}>
      <div style={{ height:52, borderBottom:`1px solid ${SCI.ink}`, display:'flex', alignItems:'center', padding:'0 18px', justifyContent:'space-between' }}>
        <MonoLabel>§ 06 · Natal chart</MonoLabel>
        <MonoLabel size={9} style={{color:SCI.ink3}}>06/13</MonoLabel>
      </div>
      <div style={{ padding:'22px 18px 20px', background:SCI.tint2, borderBottom:`1px solid ${SCI.ink}` }}>
        <NatalWheel size={360} compact/>
      </div>
      <div style={{ padding:'22px 20px' }}>
        <MonoLabel>§ 06.1 · Chart signature</MonoLabel>
        <h2 style={{ fontFamily:SCI.display, fontSize:36, lineHeight:0.95, letterSpacing:-0.5, fontWeight:500, margin:'10px 0 12px' }}>
          Water–Fixed <span style={{fontStyle:'italic'}}>emphasis</span><span style={{color:SCI.orange}}>.</span>
        </h2>
        <div style={{ fontSize:13, lineHeight:1.55, color:SCI.ink2 }}>
          Seven planets in water/fixed — the astrological echo of your 22nd-percentile neuroticism.
        </div>
      </div>
      <div style={{ padding:'18px 20px', borderTop:`1px solid ${SCI.ink}` }}>
        <MonoLabel>Elements</MonoLabel>
        <div style={{ marginTop:8 }}>
          {[['Water',8,true],['Fire',4,false],['Earth',3,false],['Air',2,false]].map(([l,v,hi],i)=>(
            <div key={i} style={{ display:'grid', gridTemplateColumns:'70px 1fr 30px', gap:8, padding:'7px 0', alignItems:'center', borderBottom: i<3?`1px solid ${SCI.tint}`:'none' }}>
              <span style={{fontSize:12}}>{l}</span>
              <div style={{ height:5, background:SCI.tint, position:'relative' }}>
                <div style={{ position:'absolute', inset:0, right:'auto', width:`${(v/10)*100}%`, background:hi?SCI.orange:SCI.ink }}/>
              </div>
              <span style={{ fontFamily:SCI.mono, fontSize:10, textAlign:'right' }}>{v}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { NatalWheel, NatalChartPage, NatalChartMobile });