/** * 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 Detail Page Components // All structural modules for a single essay reader page. // Reads from window.AJL_ESSAY (unified shape across all 15 essays). const { useState, useEffect, useRef } = React; /* ============== READING PROGRESS BAR (top, sticky) ============== */ function ReadingProgress() { const [pct, setPct] = useState(0); useEffect(() => { const onScroll = () => { const doc = document.documentElement; const max = doc.scrollHeight - doc.clientHeight; setPct(max > 0 ? Math.min(1, doc.scrollTop / max) : 0); }; window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); return (

); } /* ============== TOAST NOTIFICATION ============== */ let _toastTimeout = null; function showToast(msg) { let el = document.getElementById("ajl-toast"); if (!el) { el = document.createElement("div"); el.id = "ajl-toast"; el.className = "ajl-toast"; document.body.appendChild(el); } el.textContent = msg; el.classList.remove("is-visible"); void el.offsetWidth; // reflow el.classList.add("is-visible"); clearTimeout(_toastTimeout); _toastTimeout = setTimeout(() => el.classList.remove("is-visible"), 2400); } /* ============== SHARE RAIL (sticky left) ============== */ function ShareRail() { const e = window.AJL_ESSAY; const [saved, setSaved] = useState(() => { try { const list = JSON.parse(localStorage.getItem("ajl_saved") || "[]"); return e ? list.includes(e.no) : false; } catch { return false; } }); const handleShare = () => { const url = window.location.href; const title = e ? `AJL 40 — ${e.title}` : "AJL 40 — Dunia Kreatif MM, Antologi Jiwa Lagu"; if (navigator.share) { navigator.share({ title, url }).catch(() => {}); } else if (navigator.clipboard) { navigator.clipboard.writeText(url).then(() => { showToast("Pautan disalin!"); }).catch(() => showToast("Tidak dapat menyalin pautan")); } else { // Fallback const ta = document.createElement("textarea"); ta.value = url; ta.style.position = "fixed"; ta.style.opacity = "0"; document.body.appendChild(ta); ta.select(); document.execCommand("copy"); document.body.removeChild(ta); showToast("Pautan disalin!"); } }; const handleSave = () => { if (!e) return; try { const list = JSON.parse(localStorage.getItem("ajl_saved") || "[]"); const idx = list.indexOf(e.no); if (idx >= 0) { list.splice(idx, 1); setSaved(false); showToast("Esei dibuang dari simpanan"); } else { list.push(e.no); setSaved(true); showToast("Esei disimpan!"); } localStorage.setItem("ajl_saved", JSON.stringify(list)); } catch {} }; const handleTwitter = () => { const url = window.location.href; const text = e ? `${e.title} — AJL 40: Dunia Kreatif MM` : "AJL 40 — Dunia Kreatif MM, Antologi Jiwa Lagu"; const tw = `https://x.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`; window.open(tw, "_blank", "noopener,noreferrer"); }; return ( ); } /* ============== SOCIAL SHARE BUTTONS ============== */ function SocialShareRow({ text, url, variant, quote }) { // variant: "hero" (light on dark), "bone" (dark on bone), "quote" (inside pullquote) const shareUrl = url || window.location.href; const e = window.AJL_ESSAY; const shareText = text || (e ? `${e.title} — AJL 40: Dunia Kreatif MM` : 'AJL 40'); const quoteText = quote || ''; const open = (href) => window.open(href, '_blank', 'noopener,noreferrer,width=600,height=500'); const handleWhatsApp = () => open(`https://api.whatsapp.com/send?text=${encodeURIComponent(shareText + '\n' + shareUrl)}`); const handleFacebook = () => open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}"e=${encodeURIComponent(shareText)}`); const handleX = () => open(`https://x.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(shareUrl)}`); const handleTelegram = () => open(`https://t.me/share/url?url=${encodeURIComponent(shareUrl)}&text=${encodeURIComponent(shareText)}`); const handleThreads = () => open(`https://www.threads.net/intent/post?text=${encodeURIComponent(shareText + ' ' + shareUrl)}`); const handleInstagram = () => { const copyText = quoteText ? `"${quoteText}"\n\n${shareText}\n${shareUrl}` : `${shareText}\n${shareUrl}`; if (navigator.clipboard) { navigator.clipboard.writeText(copyText).then(() => showToast('Disalin untuk Instagram!')).catch(() => showToast('Tidak dapat menyalin')); } else { const ta = document.createElement('textarea'); ta.value = copyText; ta.style.cssText = 'position:fixed;opacity:0'; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); showToast('Disalin untuk Instagram!'); } }; const cls = `ajl-socshare ajl-socshare--${variant || 'hero'}`; return (

); } /* ============== ARTICLE HERO ============== */ function ArticleHero({ essay }) { return (

Esei {essay.no} · {essay.cluster}{essay.naratif ? ` · ${essay.naratif.join(" / ")}` : ""}

{essay.clusterSub}

{essay.title}

{essay.standfirst}

{essay.readMin} MIN · {essay.words} · {essay.publishDate} · {essay.byline}

{essay.provocation && (

{essay.provocation}

)}

); } /* ============== ARTICLE BODY (long-form on bone) ============== */ function ArticleBody({ sections, pullQuotes, pullQuotePositions = {} }) { return (

{sections.map((sec, i) => ( {sec.heading &&

{sec.heading}

} {sec.paragraphs.map((p, j) => (

{p}

))} {pullQuotePositions[i] !== undefined && ( Array.isArray(pullQuotePositions[i]) ? pullQuotePositions[i].map((qi, k) => ( pullQuotes[qi] ? : null )) : (pullQuotes[pullQuotePositions[i]] ? : null) )} ))}

); } function InlinePullQuote({ text }) { const e = window.AJL_ESSAY; const shareText = e ? `"${text}" — ${e.title}, AJL 40` : `"${text}"`; return ( ); } /* ============== PULL QUOTES STRIP (5 quotes, end-of-essay) ============== */ function PullQuotesStrip({ quotes }) { const e2 = window.AJL_ESSAY; return (

{quotes.length} Petikan Pilihan · Daripada Esei

{String(i + 1).padStart(2, "0")}

{q}

); } /* ============== 10 PRINCIPLES ============== */ function PrinciplesList({ principles, headingTop, headingBottom, principlesTitle }) { return (

10 Prinsip

{principlesTitle ? (

{principlesTitle}

) : (

{headingTop || "Sepuluh peringatan"}
{headingBottom || "untuk pencipta dan industri."}

)}

{String(i + 1).padStart(2, "0")}

{p.t}
{p.b &&
{p.b}
}

); } /* ============== CTA BLOCK ============== */ // Handles two styles: // (a) Essay with hashtags — lead + body + hashtags + closer // (b) Essay with prompts — title + fill-in-the-blank prompts + textarea + submit function CTABlock({ cta }) { if (!cta) return null; const hasHashtags = cta.hashtags && cta.hashtags.length > 0; const hasPrompts = cta.prompts && cta.prompts.length > 0; const [answer, setAnswer] = React.useState(""); const [status, setStatus] = React.useState("idle"); // idle | sending | sent | error const [errorMsg, setErrorMsg] = React.useState(""); const essayNo = window.AJL_ESSAY ? window.AJL_ESSAY.no : "00"; async function handleSubmit() { if (!answer.trim() || answer.trim().length < 5) { setStatus("error"); setErrorMsg("Sila tulis sekurang-kurangnya 5 aksara."); return; } setStatus("sending"); setErrorMsg(""); try { const res = await fetch("/api/memory-wall", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ essayNo, answer: answer.trim() }), }); if (res.ok) { setStatus("sent"); setAnswer(""); } else { const data = await res.json().catch(() => ({})); setStatus("error"); setErrorMsg(data.error || "Ralat. Sila cuba lagi."); } } catch (_) { setStatus("error"); setErrorMsg("Tiada sambungan. Sila cuba lagi."); } } function handleCopyLink() { if (navigator.clipboard) { navigator.clipboard.writeText(window.location.href); showToast("Pautan disalin!"); } } return (

CTA Komuniti · Pembaca

{cta.title &&

{cta.title}

} {hasHashtags && !hasPrompts ? ( <> {cta.lead &&

{cta.lead}

} {cta.intro &&

{cta.intro}

} {cta.body &&

{cta.body}

}

{cta.hashtags.map((h, i) => {h})}

{cta.closer &&

{cta.closer}

} ) : null} {hasPrompts ? ( <>

{cta.intro || "Lengkapkan ayat ini"}

{cta.prompts.map((p, i) => (

"{p}"

))}

{cta.body &&

{cta.body}

} {!cta.hideInput && (status === "sent" ? (

Terima kasih! Jawapan anda telah dihantar ke AJL40 Song Memory Wall.

) : ( <>

{ setAnswer(e.target.value); if (status === "error") setStatus("idle"); }}
                />
                {status === "error" && errorMsg && (
                  <div className="ajl-cta__error">{errorMsg}</div>
                )}
              </>
            ))}
          </>
        ) : null}

{!cta.hideInput && (
          <div className="ajl-cta__ctas">
            {hasPrompts && status !== "sent" ? (
              <button
                className="ajl-btn ajl-btn--primary"
                onClick={handleSubmit}
                disabled={status === "sending"}
              >
                {status === "sending" ? "Menghantar…" : "Hantar Jawapan Saya"}
                {status !== "sending" && <Icon name="arrow-right" size={14} />}
              </button>
            ) : null}
            <button className="ajl-btn ajl-btn--ghost" onClick={handleCopyLink}>
              Salin Pautan<span className="ajl-btn__ul" />
            </button>
          </div>
        )}
      </div>
    </section>
  );
}

/* ============== RELATED ESSAYS RAIL ============== */
function RelatedRail({ items }) {
  const slug = (e) => (e.slug || `essay-${e.no}`) + ".html";
  return (
    <section className="ajl-related">
      <div className="ajl-container">
        <div className="ajl-section__head">
          <div className="ajl-eyebrow">Bacaan Berkaitan</div>
          <h2 className="ajl-section__title">
            <em className="ajl-section__title-em">Teruskan bacaan.</em>
          </h2>
        </div>
        <div className="ajl-related__list">
          {items.map((r) => (
            <a className="ajl-related__card" href={slug(r)} key={r.no}>
              <div className="ajl-related__no">{r.no}</div>
              <div className="ajl-related__body">
                <div className="ajl-related__cluster">{r.cluster}</div>
                <h3 className="ajl-related__title">{r.title}</h3>
                <div className="ajl-related__meta t-mono">
                  {r.readMin} MIN · BACA <Icon name="arrow-right" size={11} style={{display:"inline-block",verticalAlign:"-1px",marginLeft:"6px"}} />
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============== MOBILE SHARE BAR (bottom, visible ≤1100px) ============== */
function MobileShareBar() {
  const e = window.AJL_ESSAY;
  const [saved, setSaved] = useState(() => {
    try {
      const list = JSON.parse(localStorage.getItem("ajl_saved") || "[]");
      return e ? list.includes(e.no) : false;
    } catch { return false; }
  });

return (
    <div className="ajl-mshare">
      <button className="ajl-mshare__btn" onClick={handleShare}>
        <Icon name="share" size={16} /><span>Kongsi</span>
      </button>
      <button className={`ajl-mshare__btn${saved ? " is-saved" : ""}`} onClick={handleSave}>
        <Icon name="bookmark" size={16} /><span>{saved ? "Disimpan" : "Simpan"}</span>
      </button>
      <button className="ajl-mshare__btn" onClick={handleTwitter}>
        <Icon name="globe" size={16} /><span>Tweet</span>
      </button>
    </div>
  );
}

/* ============== NOTA EDITORIAL ============== */
function NotaEditorial({ text }) {
  if (!text) return null;
  return (
    <div className="ajl-nota">
      <div className="ajl-nota__label">Nota Editorial</div>
      <p className="ajl-nota__body">{text}</p>
    </div>
  );
}

/* ============== QUIZ (Uji Kefahaman) ============== */
function QuizBlock({ quiz }) {
  if (!quiz || !quiz.length) return null;
  const [selected, setSelected] = useState({});
  const [submitted, setSubmitted] = useState(false);
  const letters = ["A", "B", "C", "D", "E"];

const allAnswered = quiz.every((_, i) => selected[i] !== undefined);
  const score = quiz.reduce((acc, q, i) => acc + (selected[i] === q.answer ? 1 : 0), 0);

function choose(qi, oi) {
    if (submitted) return;
    setSelected((s) => ({ ...s, [qi]: oi }));
  }
  function reset() {
    setSelected({});
    setSubmitted(false);
  }

return (
    <section className="ajl-quiz">
      <div className="ajl-container">
        <div className="ajl-section__head ajl-quiz__head">
          <div className="ajl-eyebrow">Kuiz · Uji Kefahaman</div>
          <h2 className="ajl-section__title">
            <em className="ajl-section__title-em">Seberapa teliti anda membaca?</em>
          </h2>
        </div>
        <div className="ajl-quiz__list">
          {quiz.map((q, qi) => (
            <div className="ajl-quiz__q" key={qi}>
              <div className="ajl-quiz__qno">{String(qi + 1).padStart(2, "0")}</div>
              <div>
                <h3 className="ajl-quiz__qtext">{q.q}</h3>
                <div className="ajl-quiz__opts">
                  {q.options.map((opt, oi) => {
                    let cls = "ajl-quiz__opt";
                    if (submitted) {
                      if (oi === q.answer) cls += " is-correct";
                      else if (selected[qi] === oi) cls += " is-wrong";
                    } else if (selected[qi] === oi) {
                      cls += " is-selected";
                    }
                    return (
                      <button className={cls} key={oi} disabled={submitted} onClick={() => choose(qi, oi)}>
                        <span className="ajl-quiz__optmark">{letters[oi]}</span>
                        <span>{opt}</span>
                      </button>
                    );
                  })}
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className="ajl-quiz__actions">
          {!submitted ? (
            <button className="ajl-btn ajl-btn--primary" disabled={!allAnswered} onClick={() => setSubmitted(true)}>
              Semak Jawapan <Icon name="check" size={14} />
            </button>
          ) : (
            <>
              <div className="ajl-quiz__score">{score} / {quiz.length} betul <span>· {Math.round((score / quiz.length) * 100)}%</span></div>
              <button className="ajl-btn ajl-btn--ghost" onClick={reset}>Cuba Lagi<span className="ajl-btn__ul" /></button>
            </>
          )}
        </div>
      </div>
    </section>
  );
}

/* ============== BACK TO TOP ============== */
function BackToTop() {
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 600);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  if (!visible) return null;
  return (
    <button className="ajl-btt" aria-label="Kembali ke atas" title="Kembali ke atas"
      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
        <polyline points="18 15 12 9 6 15" />
      </svg>
    </button>
  );
}

Object.assign(window, {
  ReadingProgress, ShareRail, ArticleHero, ArticleBody, InlinePullQuote,
  PullQuotesStrip, PrinciplesList, CTABlock, RelatedRail, MobileShareBar, showToast, BackToTop,
  NotaEditorial, QuizBlock, SocialShareRow,
});