/**
 * AJL40 Digital Series
 * © 2026 sultanmuzaffar. Hak cipta terpelihara / All rights reserved.
 * Penggunaan, penyalinan atau pengedaran tanpa kebenaran bertulis adalah dilarang.
 * Unauthorized use, copying or distribution is prohibited.
 */

// AJL 40 — Essay Page Shell
// Reads window.AJL_ESSAY (the current essay) and renders the full reader page.
// Each per-essay HTML file loads its data + this shell + components.

const { useMemo } = React;

function EssayApp() {
  const e = window.AJL_ESSAY;
  if (!e) return <div style={{padding: 40, color: "var(--ivory)"}}>No essay data loaded.</div>;

  // Use essay-defined pull quote positions if available, otherwise auto-distribute
  const pullQuotePositions = useMemo(() => {
    if (e.pullQuotePositions) return e.pullQuotePositions;
    const positions = {};
    const numSec = e.sections.length;
    if (numSec >= 4 && e.pullQuotes.length >= 3) {
      positions[Math.max(1, Math.floor(numSec * 0.25))] = 0;
      positions[Math.max(2, Math.floor(numSec * 0.5))] = 2;
      positions[Math.max(3, Math.floor(numSec * 0.75))] = 3;
    } else if (numSec >= 2 && e.pullQuotes.length >= 1) {
      positions[Math.floor(numSec * 0.5)] = 0;
    }
    return positions;
  }, [e]);

  // Slug map for navigation
  const SLUGS = {
    "01":"ruang-tamu-lagu-milik-kita","02":"lagu-menang-hayat","03":"vokal-lantang-belum-tentu",
    "04":"malaysia-tidak-berbunyi-satu-cara","05":"viral-menang-perhatian","06":"mendidik-telinga-malaysia",
    "07":"video-reaction-kritik","08":"press-room-for-you-page","09":"siapa-hakim-terakhir",
    "10":"exposure-sewa-studio","11":"industri-fikir-bermusim","12":"bakat-hidup-momentum",
    "13":"arkib-ajl-lenyap","14":"bunyi-malaysia-sempadan","15":"masa-depan-maruah","16":"kerajaan-kuasa-lagu","17":"jejak-rasa-anak-cucu"
  };
  // Next essay (for footer)
  const nextNo = parseInt(e.no) < 17 ? String(parseInt(e.no) + 1).padStart(2, "0") : null;
  const prevNo = parseInt(e.no) > 1 ? String(parseInt(e.no) - 1).padStart(2, "0") : null;

  return (
    <>
      <ReadingProgress />

      <div className="ajl-topbar">
        <div className="ajl-container ajl-topbar__row">
          <button className="ajl-topbar__back" onClick={() => window.location.href = "/esei/"}>
            <Icon name="arrow-left" size={14} /> Kembali ke Senarai
          </button>
          <a href="/esei/" className="ajl-topbar__wordmark" style={{textDecoration:"none", color:"inherit"}}>
            <img src="./assets/logo.png" alt="AJL 40" />
          </a>
          <div className="ajl-topbar__essay">ESEI {e.no} / 17</div>
        </div>
      </div>

      <ShareRail />
      <ArticleHero essay={e} />
      {e.notaEditorial ? (
        <section data-surface="bone" style={{paddingTop: 48}}>
          <div className="ajl-container">
            <NotaEditorial text={e.notaEditorial} />
          </div>
        </section>
      ) : null}
      <ArticleBody
        sections={e.sections}
        pullQuotes={e.pullQuotes}
        pullQuotePositions={pullQuotePositions}
      />
      <PullQuotesStrip quotes={e.pullQuotes} />
      <PrinciplesList principles={e.principles} principlesTitle={e.principlesTitle} />
      <QuizBlock quiz={e.quiz} />
      <CTABlock cta={e.cta} />
      <RelatedRail items={e.related} />
      <MobileShareBar />

      <footer className="ajl-pagefoot">
        <div className="ajl-container ajl-pagefoot__row">
          <span className="ajl-pagefoot__legal">ESEI {e.no} / 17</span>
          {nextNo ? (
            <button className="ajl-pagefoot__next" onClick={() => {
              window.location.href = (SLUGS[nextNo] || `essay-${nextNo}`) + ".html";
            }}>
              ESEI {nextNo} / 17 · ESEI SETERUSNYA <Icon name="arrow-right" size={11} />
            </button>
          ) : (
            <span className="ajl-pagefoot__legal">ESEI {e.no} / 17 · TAMAT</span>
          )}
        </div>
      </footer>

      <footer className="ajl-footer">
        <div className="ajl-container ajl-footer__inner">
          <div className="ajl-footer__col">
            <a href="/" className="ajl-wordmark ajl-footer__mark" aria-label="AJL 40">
              <img className="ajl-wordmark__logo" src="/esei/assets/logo.png" alt="AJL 40" style={{height:'44px'}} />
            </a>
            <p className="ajl-footer__brand">
              <em>Dunia Kreatif<br />Budaya Sebuah Negara</em>
            </p>
            <div className="ajl-footer__credits t-mono">
              SIRI DIGITAL · 2026<br />
              EDISI KE-40 ANUGERAH JUARA LAGU
            </div>
          </div>

          <div className="ajl-footer__col">
            <div className="ajl-eyebrow">Nota Editorial</div>
            <p className="ajl-footer__body" style={{fontSize:'0.85rem',lineHeight:1.6,opacity:0.85,maxWidth:'38ch'}}>AJL40 Digital Series ialah inisiatif editorial bebas oleh sultanmuzaffar. Portal ini tidak mewakili penganjur Anugerah Juara Lagu, TV3 atau Media Prima. Semua rujukan digunakan dalam konteks ulasan budaya, penyelidikan terbuka dan penghargaan terhadap sejarah muzik popular Malaysia.</p>
          </div>

          <div className="ajl-footer__col">
            <div className="ajl-eyebrow">Layari</div>
            <div style={{marginTop:'0.5rem',display:'flex',flexDirection:'column',gap:'8px'}}>
              <a className="ajl-footer__link" href="/esei/" style={{fontSize:'0.9rem'}}>17 Esei Editorial</a>
              <a className="ajl-footer__link" href="/arkib/" style={{fontSize:'0.9rem'}}>Arkib Editorial</a>
              <a className="ajl-footer__link" href="/archive/" style={{fontSize:'0.9rem'}}>Arkib Digital</a>
            </div>
          </div>

          <div className="ajl-footer__col">
            <div className="ajl-eyebrow">Projek</div>
            <div style={{marginTop:'0.5rem',display:'flex',flexDirection:'column',gap:'8px'}}>
              <a className="ajl-footer__link" href="/tentang/" style={{fontSize:'0.9rem'}}>Tentang</a>
              <a className="ajl-footer__link" href="/kredit/" style={{fontSize:'0.9rem'}}>Kredit</a>
            </div>
          </div>
        </div>

        <div className="ajl-footer__bar">
          <div className="ajl-container ajl-footer__legal">
            <span className="t-mono">© 2026 SULTANMUZAFFAR · HAK CIPTA TERPELIHARA</span>
            <span className="t-mono" style={{opacity:0.6,fontSize:'0.7rem'}}>Semua kandungan, kod sumber dan reka bentuk dilindungi hak cipta.</span>
          </div>
        </div>
      </footer>
      <BackToTop />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<EssayApp />);