/* Library / Texts — Articles. Two translated essays are readable in full;
   the rest are titles from V6 md.14, shown as "coming soon". Reader fetches
   the plain-text file and renders Roman-numeral lines as section headings
   and quote lines (opening “ or ") as italics. */

/* Only fully translated, readable essays are listed. The rest (V6 md.14)
   are removed until ready so the site never shows an unfulfillable link (md.10/16). */
const ARTICLES = [
  { slug: "call-to-the-truth", title: "Call to the Truth", file: "uploads/articles/call-to-the-truth.txt", ready: true },
  { slug: "fundamental-characteristics", title: "The Fundamental Characteristics of Islam", file: "uploads/articles/fundamental-characteristics.txt", ready: true },
];

function goArticle(slug) { window.location.hash = "#/library/article/" + slug; }

/* Section embedded at the bottom of the Texts page — two-column boxes (27 May feedback). */
function ArticlesSection({ mode = "desktop", accent = "#B89968" }) {
  const mobile = mode === "mobile";
  const [lang] = (typeof useLang === "function" ? useLang() : ["en"]);
  const lt = (k) => (typeof libT === "function" ? libT(k, lang) : k);
  return (
    <section style={{ padding: mobile ? "16px 22px 72px" : "40px 96px 120px", borderTop: "1px solid var(--hairline)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: mobile ? 18 : 28 }}>
        <span className="eyebrow"><span style={{ color: accent }}>—</span>  {lt("articles")}</span>
        <span className="eyebrow eyebrow-light">{lt("selected_essays")}</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr", gap: mobile ? 12 : 20 }}>
        {ARTICLES.map((a) => (
          <article key={a.slug}
            onClick={a.ready ? () => goArticle(a.slug) : undefined}
            style={{
              display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16,
              padding: mobile ? "16px 18px" : "20px 24px",
              border: "1px solid var(--hairline)",
              cursor: a.ready ? "pointer" : "default",
              opacity: a.ready ? 1 : 0.5,
              transition: "border-color 250ms, transform 250ms cubic-bezier(0.22,1,0.36,1)",
            }}
            onMouseEnter={a.ready ? (e) => { e.currentTarget.style.borderColor = accent; e.currentTarget.style.transform = "translateY(-2px)"; } : undefined}
            onMouseLeave={a.ready ? (e) => { e.currentTarget.style.borderColor = "var(--hairline)"; e.currentTarget.style.transform = "translateY(0)"; } : undefined}
          >
            <h4 className="serif" style={{ fontWeight: 400, fontSize: mobile ? 16 : 19, margin: 0, letterSpacing: "-0.005em", lineHeight: 1.3 }}>{a.title}</h4>
            <span style={{ color: a.ready ? accent : "var(--gray-warm)", fontSize: 13, whiteSpace: "nowrap" }}>{a.ready ? lt("read") + " →" : lt("soon")}</span>
          </article>
        ))}
      </div>
    </section>
  );
}

/* Full-text reader at /library/article/:slug */
function ArticleReader({ mode = "desktop", accent = "#B89968" }) {
  const mobile = mode === "mobile";
  const [lang] = (typeof useLang === "function" ? useLang() : ["en"]);
  const lt = (k) => (typeof libT === "function" ? libT(k, lang) : k);
  const slug = (window.location.hash || "").replace(/^#\/library\/article\//, "");
  const art = ARTICLES.find(a => a.slug === slug);
  const [lines, setLines] = React.useState(null);

  React.useEffect(() => {
    if (!art || !art.file) { setLines([]); return; }
    let alive = true;
    fetch(art.file).then(r => r.text()).then(t => {
      if (alive) setLines(t.split("\n").map(s => s.trim()).filter(Boolean));
    }).catch(() => { if (alive) setLines([]); });
    return () => { alive = false; };
  }, [slug]);

  const isHeading = (s) => /^[IVXLC]+\.\s/.test(s);
  const isQuote = (s) => /^[“"]/.test(s);

  return (
    <div className="cw-frame" style={{ overflowY: "auto" }}>
      <TopNav current="Library" mobile={mobile} accent={accent} />
      <section style={{ padding: mobile ? "48px 22px 28px" : "110px 96px 56px", borderBottom: "1px solid var(--hairline)" }}>
        <span className="eyebrow"><span style={{ color: accent }}>—</span>  {lt("library")}  /  {lt("texts")}  /  {lt("articles")}</span>
        <h1 className="serif" style={{
          fontWeight: 300, fontSize: mobile ? 40 : 84, lineHeight: 1.02, letterSpacing: "-0.025em",
          margin: "16px 0 0", fontVariationSettings: '"opsz" 144, "SOFT" 30',
        }}>{art ? art.title : "Article"}</h1>
        <span className="eyebrow" style={{ marginTop: 16, display: "block", color: accent }}>— Esad Cosan</span>
      </section>

      <section style={{ padding: mobile ? "36px 22px 72px" : "72px 96px 130px", maxWidth: 820, marginInline: mobile ? 0 : "auto" }}>
        {lines === null && <p className="serif" style={{ color: "var(--gray-warm)" }}>{lt("loading")}</p>}
        {lines && lines.length === 0 && <p className="serif" style={{ color: "var(--gray-warm)" }}>{lt("article_soon")}</p>}
        {lines && lines.map((s, i) => (
          isHeading(s) ? (
            <h2 key={i} className="serif" style={{ fontWeight: 400, fontSize: mobile ? 22 : 30, letterSpacing: "-0.01em", margin: mobile ? "32px 0 10px" : "52px 0 16px", lineHeight: 1.25 }}>{s}</h2>
          ) : (
            <p key={i} className={isQuote(s) ? "serif italic" : "serif"} style={{
              fontSize: mobile ? 17 : 20, lineHeight: 1.75, margin: "0 0 20px",
              color: isQuote(s) ? "var(--ink)" : "var(--ink-soft)",
              paddingLeft: isQuote(s) ? (mobile ? 14 : 24) : 0,
              borderLeft: isQuote(s) ? `2px solid ${accent}` : "none",
              fontVariationSettings: '"opsz" 24',
            }}>{s}</p>
          )
        ))}
      </section>

      <SiteFooter mobile={mobile} accent={accent} />
    </div>
  );
}

Object.assign(window, { ArticlesSection, ArticleReader, ARTICLES });