// layers.jsx — the 5 deep-dive layer sections + synthesis

const PLANET_META = {
  sun:     { sym: "☉", label: "Sun" },
  moon:    { sym: "☽", label: "Moon" },
  asc:     { sym: "Asc", label: "Ascendant" },
  mercury: { sym: "☿", label: "Mercury" },
  venus:   { sym: "♀", label: "Venus" },
  mars:    { sym: "♂", label: "Mars" },
  jupiter: { sym: "♃", label: "Jupiter" },
  saturn:  { sym: "♄", label: "Saturn" }
};

const PLANET_ORDER = ["sun", "moon", "asc", "mercury", "venus", "mars", "jupiter", "saturn"];

function TierCalc(){ return <span className="tier calc">✅ CALC</span>; }
function TierCanon(){ return <span className="tier canon">📖 CANON</span>; }
function TierInterp(){ return <span className="tier interp">💡 INTERP · T3</span>; }

// ─── Layer 1: Sba ───
function LayerSba({ chart }) {
  return (
    <section id="sba">
      <div className="wrap">
        <div className="sec-label">◈ 03 · Layer 1 · Kemet</div>
        <div className="layer-banner sba">
          <div className="native">𓋴𓃀</div>
          <div className="title-stack">
            <h2>Sba · Baktiu</h2>
            <div className="en">the 36 decans of Kemet</div>
          </div>
          <div className="region"><b>Km.t / Egypt</b>10° sectors of the ecliptic<br/>ancient star-clock</div>
        </div>
        <div className="layer-body">
          {PLANET_ORDER.map((pid) => {
            const d = chart.decan[pid];
            if (!d) return null;
            const lon = chart.absolute_longitudes[pid];
            const pm = PLANET_META[pid];
            return (
              <div className="row-planet" key={pid}>
                <div className="planet-sym">
                  {pm.sym}
                  <em>{pm.label}</em>
                </div>
                <div className="body">
                  <div className="top-line">
                    <span className="native-nm hi">{d.hi}</span>
                    <span className="translit">{d.name}</span>
                    <span className="range">decan {d.index} · {d.range[0]}°–{d.range[1]}° · λ {lon?.toFixed(2)}°</span>
                  </div>
                  <div className="canon-line">{d.gloss}</div>
                </div>
                <div className="tags">
                  <TierCalc/>
                  <TierCanon/>
                </div>
              </div>
            );
          })}
          <div className="source-footer">
            <b>Source ·</b> Decan canon follows Faulkner · <em>Ancient Egyptian Coffin Texts</em> (Oxford) and Dendera-zodiac reconstructions. Degree boundaries per ⌬ALIEN Day 02 ticket.
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Layer 2: Ifá ───
function LayerIfa({ chart }) {
  const o = chart.odu;
  // Render 8 marks as 2 stacks of 4 (the orthodox display for a cast pair)
  const left  = o.binary.slice(0, 4);
  const right = o.binary.slice(4, 8);
  return (
    <section id="ifa">
      <div className="wrap">
        <div className="sec-label">◈ 04 · Layer 2 · Yoruba · Fon · Ewe</div>
        <div className="layer-banner">
          <div className="native" style={{ fontFamily: 'var(--serif)', fontStyle: 'italic' }}>Ifá</div>
          <div className="title-stack">
            <h2>Odù · 256 paths of becoming</h2>
            <div className="en">binary four-mark divination corpus</div>
          </div>
          <div className="region"><b>West Africa → Diaspora</b>Yoruba · Fon · Ewe<br/>Lucumí · Candomblé · Vodou</div>
        </div>
        <div className="layer-body">
          <div className="ifa-cast">
            <div>
              <div className="ifa-marks">
                <div className="ifa-mark-row">
                  {left.map((b, i) => <div key={`L${i}`} className={`ifa-mark ${b===1?'single':'double'}`}/>)}
                </div>
                <div className="ifa-mark-row">
                  {right.map((b, i) => <div key={`R${i}`} className={`ifa-mark ${b===1?'single':'double'}`}/>)}
                </div>
                <div className="ifa-label">cast · {o.binary.join('')}</div>
              </div>
            </div>
            <div>
              <h3 className="ifa-name">{o.ifa_cast}</h3>
              <div className="ifa-variants">
                <b>Fon</b> {o.variants.fon} &nbsp;·&nbsp; <b>Ewe</b> {o.variants.ewe} &nbsp;·&nbsp; <b>Lucumí</b> {o.variants.lucumi}
              </div>
              <div style={{ display: 'flex', gap: 8, marginBottom: 18 }}>
                <TierCalc/><TierCanon/>
              </div>
              <div className="ifa-canon">{o.canon}</div>
            </div>
          </div>
          <div className="disclosure">
            <span className="bulb">💡</span>
            <span>Derived astronomical casting · not performed by a babaláwo · for study and synthesis only · seek an initiated diviner for ritual use.</span>
          </div>
          <div className="source-footer">
            <b>Source ·</b> Bascom · <em>Sixteen Cowries</em> (Indiana UP) · Abimbola · <em>Ifá: An Exposition of Ifá Literary Corpus</em>.
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Layer 3: Baḥrä Ḥasab ───
function LayerBahere({ chart }) {
  const b = chart.bahere;
  return (
    <section id="bahere">
      <div className="wrap">
        <div className="sec-label">◈ 05 · Layer 3 · Ge'ez · Ethiopia</div>
        <div className="layer-banner bahere">
          <div className="native">ባሕረ</div>
          <div className="title-stack">
            <h2>Baḥrä Ḥasab · <em style={{fontStyle:'italic',color:'var(--gold)'}}>sea of computation</em></h2>
            <div className="en">Ethiopian liturgical sky-reckoning</div>
          </div>
          <div className="region"><b>Ge'ez liturgical tradition</b>E.A.A. year-count<br/>tabotat · fasts · feasts</div>
        </div>
        <div className="layer-body">
          <div className="bahere-grid">
            <div className="bahere-cell">
              <div className="lbl">Liturgical year</div>
              <div className="geez">{b.date_ge}</div>
              <div className="arab">{b.liturgical_year} · {b.era}</div>
              <div className="en">in the sea of years</div>
            </div>
            <div className="bahere-cell">
              <div className="lbl">Tabot · saint of the day</div>
              <div className="geez accent-red">{b.tabot_ge}</div>
              <div className="arab">{b.tabot}</div>
              <div className="en">patron ark of this day</div>
            </div>
            <div className="bahere-cell">
              <div className="lbl">Month</div>
              <div className="geez">{b.month_ge}</div>
              <div className="arab">{b.month_en}</div>
              <div className="en">{b.season}</div>
            </div>
            <div className="bahere-cell">
              <div className="lbl">Day of week</div>
              <div className="geez">{b.day_ge}</div>
              <div className="arab">{b.day_en}</div>
              <div className="en">liturgical cadence</div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 18 }}>
            <TierCalc/><TierCanon/>
          </div>
          <div className="source-footer">
            <b>Source ·</b> Baḥrä Ḥasab canon per Varisco's work on Ethiopian astronomical calendars. Ge'ez numerals rendered alongside Arabic for <em>receipts-or-it-didn't-happen</em> discipline.
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Layer 4: Manāzil ───
function LayerManzil({ chart }) {
  const m = chart.manzil;
  return (
    <section id="manzil">
      <div className="wrap">
        <div className="sec-label">◈ 06 · Layer 4 · Arab origin · Swahili adaptation</div>
        <div className="layer-banner manzil">
          <div className="native">منازل</div>
          <div className="title-stack">
            <h2>Manāzil al-Qamar</h2>
            <div className="en">the 28 lunar mansions</div>
          </div>
          <div className="region"><b>Indian Ocean lineage</b>Arab origin<br/>Swahili coast adaptation</div>
        </div>
        <div className="layer-body">
          <div className="manzil-feature">
            <div style={{ textAlign: 'center' }}>
              <div className="manzil-arabic">{m.arabic}</div>
              <svg className="manzil-stars" viewBox="0 0 200 200">
                {/* Stylized asterism — tail of the lion */}
                <g stroke="rgba(212,175,55,.45)" strokeWidth="0.6" fill="none">
                  <line x1="40" y1="140" x2="95" y2="95"/>
                  <line x1="95" y1="95"  x2="130" y2="70"/>
                  <line x1="130" y1="70" x2="160" y2="55"/>
                </g>
                {[[40,140,3],[95,95,4.5],[130,70,3.2],[160,55,5],[70,170,1.8]].map(([x,y,r],i) => (
                  <g key={i}>
                    <circle cx={x} cy={y} r={r*2.2} fill="rgba(212,175,55,.15)"/>
                    <circle cx={x} cy={y} r={r} fill="var(--gold)"/>
                  </g>
                ))}
                <text x="100" y="195" textAnchor="middle" fontFamily="var(--mono)" fontSize="8" letterSpacing="0.2em" fill="rgba(212,175,55,.7)">DENEBOLA · β LEONIS</text>
              </svg>
            </div>
            <div className="manzil-details">
              <div className="label">☽ Moon · Mansion {m.index} / 28</div>
              <p className="translit">{m.english}</p>
              <p className="swahili">Swahili · <em>{m.swahili}</em></p>
              <p className="gloss">The Moon at birth slept in the lion's tail — a navigator's star, a steerer of ships along the monsoon road.</p>
              <div className="asterism">
                <b>Asterism ·</b> {m.asterism}<br/>
                <b>Range ·</b> {m.range[0]}°–{m.range[1]}°
              </div>
              <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
                <TierCalc/><TierCanon/>
              </div>
            </div>
          </div>
          <div className="disclosure">
            <span className="bulb">📖</span>
            <span>Arab origin · adapted along the Swahili coast · Indian Ocean navigation lineage. We name the tradition as it moved.</span>
          </div>
          <div className="source-footer">
            <b>Source ·</b> Varisco · <em>Medieval Agriculture and Islamic Science</em> · Mason · lunar mansion research.
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Layer 5: Òrìṣà ───
function LayerOrisha({ chart }) {
  const o = chart.orisha;
  return (
    <section id="orisha">
      <div className="wrap">
        <div className="sec-label">◈ 07 · Layer 5 · Caribbean diasporic carriers</div>
        <div className="layer-banner">
          <div className="native" style={{ fontFamily: 'var(--serif)' }}>Òrìṣà</div>
          <div className="title-stack">
            <h2>Òrìṣà · Lwa · Nkisi</h2>
            <div className="en">diaspora carriers · day-guardian lineage</div>
          </div>
          <div className="region"><b>Middle Passage re-weave</b>Lucumí · Candomblé<br/>Vodou · Palo</div>
        </div>
        <div className="layer-body">
          <div className="orisha-feature">
            <div className="orisha-portrait">
              <div className="cowrie">◡ ◡ ◡</div>
              <h3 className="yr">{o.guardian}</h3>
              <div className="day">guardian of {o.day_of_week}</div>
            </div>
            <div className="orisha-details">
              <dl>
                <dt>Yoruba</dt><dd><b>{o.yoruba}</b></dd>
                <dt>Lucumí</dt><dd>{o.lucumi}</dd>
                <dt>Vodou</dt><dd><em>{o.vodou}</em></dd>
                <dt>Palo Nkisi</dt><dd><em>{o.palo}</em></dd>
                <dt>Element</dt><dd>{o.element}</dd>
                <dt>Temperament</dt><dd><em>{o.temperament}</em></dd>
              </dl>
              <div style={{ display: 'flex', gap: 8, marginTop: 22 }}>
                <TierCalc/><TierCanon/>
              </div>
            </div>
          </div>
          <div className="disclosure">
            <span className="bulb">💡</span>
            <span>Òrìṣà association derived from classical day-correspondences · not a claim of initiation, ordination, or spiritual authority · this is synthesis, not <em>iworo</em>.</span>
          </div>
          <div className="source-footer">
            <b>Source ·</b> Abimbola · <em>Ifá: An Exposition of Ifá Literary Corpus</em>. Regional parallels acknowledged per the diasporic re-weave.
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Synthesis ───
function Synthesis({ chart }) {
  const stamp = `⊕BORN[${chart.birthIso.replace(/-/g,'')}-${chart.birthTime.replace(':','')}@natal]`;
  return (
    <section id="synthesis">
      <div className="wrap">
        <div className="sec-label">◈ 08 · Synthesis · ⟁∴ the diaspora's answer</div>
        <h2 className="sec-head">Four quadrants · one ledger.</h2>
        <div className="syn-grid">
          <div className="syn-cell">
            <div className="syn-lbl"><span className="sym">⟁</span> Root</div>
            <h3>origin · foundation</h3>
            <div className="syn-sources">Kemet · Baḥrä Ḥasab</div>
            <p className="syn-text">Sun in <b style={{color:'var(--gold)'}}>{chart.decan.sun.name}</b> · tabot of <b style={{color:'var(--gold)'}}>{chart.bahere.tabot}</b> · the stone gate your sky was born through, the saint your day was named for.</p>
          </div>
          <div className="syn-cell">
            <div className="syn-lbl"><span className="sym">⟁</span> Rhythm</div>
            <h3>timing · cycles</h3>
            <div className="syn-sources">Ifá · Manāzil</div>
            <p className="syn-text">Odù <b style={{color:'var(--gold)'}}>{chart.odu.ifa_cast}</b> · Moon in <b style={{color:'var(--gold)'}}>{chart.manzil.english}</b> · the 4-mark cast and the lunar mansion — your cadence of becoming, your navigator's star.</p>
          </div>
          <div className="syn-cell full">
            <div className="syn-lbl"><span className="sym">⟁</span> Voice</div>
            <h3>how the inheritance speaks through you</h3>
            <div className="syn-sources">Òrìṣà · diasporic re-weave</div>
            <p className="syn-text"><b style={{color:'var(--gold)'}}>{chart.orisha.guardian}</b> of {chart.orisha.day_of_week} · {chart.orisha.temperament} · the voice that survived the Middle Passage and rebuilt itself on the far shore.</p>
          </div>
          <div className="syn-cell full final">
            <div className="syn-lbl"><TierInterp/> <span className="sym">⟁∴</span> Synthesis · soul mirror</div>
            <p className="syn-text">{chart.synthesis}</p>
            <div className="stamp">{stamp}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { LayerSba, LayerIfa, LayerBahere, LayerManzil, LayerOrisha, Synthesis });