/**
 * 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.
 */

// AIM25 essay shell: hero + nota editorial + badan artikel + 5 Petikan Pilihan.

function Aim25Hero({ essay }) {
  return (
    <section className="ajl-ahero">
      <div className="ajl-ahero__photo">
        <img src={essay.heroImage} alt="" />
        <div className="ajl-ahero__grain" />
        <div className="ajl-ahero__protect" />
      </div>

      <div className="ajl-container ajl-ahero__inner">
        <div className="ajl-eyebrow ajl-ahero__eyebrow">
          AIM25 · Esei {essay.aim25No}{essay.naratif ? ` · ${essay.naratif.join(" / ")}` : ""}
        </div>

        <div className="ajl-ahero__cluster">{essay.clusterSub}</div>

        <h1 className="ajl-ahero__title">{essay.title}</h1>

        <p className="ajl-ahero__standfirst">{essay.standfirst}</p>

        <div className="ajl-ahero__meta">
          <span className="t-mono">
            <Icon name="clock" size={12} style={{display:"inline-block",verticalAlign:"-2px",marginRight:"6px"}} />
            {essay.readMin} MIN · {essay.words}
          </span>
          <span className="ajl-ahero__sep">·</span>
          <span className="t-mono">{essay.publishDate}</span>
          <span className="ajl-ahero__sep">·</span>
          <span className="t-mono">{essay.byline}</span>
          <SocialShareRow variant="hero" />
        </div>
      </div>
    </section>
  );
}

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

  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">AIM25</div>
        </div>
      </div>

      <ShareRail />
      <Aim25Hero 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={[]}
        pullQuotePositions={{}}
      />
      {e.pullQuotes && e.pullQuotes.length > 0 ? (
        <PullQuotesStrip quotes={e.pullQuotes} />
      ) : null}
      <MobileShareBar />

      <footer className="ajl-pagefoot">
        <div className="ajl-container ajl-pagefoot__row">
          <span className="ajl-pagefoot__legal">AIM25</span>
          {e.footNav ? (
            <button className="ajl-pagefoot__next" onClick={() => {
              window.location.href = e.footNav.href;
            }}>
              {e.footNav.label} <Icon name="arrow-right" size={11} />
            </button>
          ) : null}
        </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 />);