/* Library Work detail — /library/the-upright-path (example).
   Two-column hero (cover | bibliographic record), description block,
   table of contents, related works.
*/

function LibraryWork({ mode = "desktop", accent = "#B89968", showPortrait = true }) {
  const mobile = mode === "mobile";

  const toc = [
    { p: "I",   t: "On the Patience of Knowledge" },
    { p: "II",  t: "The Method of the Companions" },
    { p: "III", t: "Hadith in the Age of the Newspaper" },
    { p: "IV",  t: "Letters to a Young Scholar" },
    { p: "V",   t: "On Memory, Repetition and the Heart" },
    { p: "VI",  t: "What the Tradition Refuses to Forget" },
    { p: "VII", t: "A Catalogue of Method" },
    { p: "VIII", t: "Notes on Three Disputed Chains" },
    { p: "IX",  t: "On the Quiet Teacher" },
    { p: "X",   t: "Conclusions, Provisional" },
  ];

  const related = [
    { n: "07", t: "Mehmed Zahid Kotku" },
    { n: "08", t: "Hacı Bektaş-ı Veli: Makalât" },
    { n: "12", t: "Friendship and Brotherhood in Islam" },
  ];

  return (
    <div className="cw-frame" style={{ overflowY: "auto", background: "var(--bg-warm)" }}>
      <TopNav current="Library" mobile={mobile} accent={accent} />

      {/* Crumb */}
      <section style={{ padding: mobile ? "20px 22px 0" : "32px 96px 0" }}>
        <span className="eyebrow" style={{ color: "var(--gray-warm)" }}>Library  /  Works  /  № 01</span>
      </section>

      {/* Hero — cover left (0.8fr) | bibliographic record right (1.2fr) */}
      <section style={{
        padding: mobile ? "20px 22px 48px" : "40px 96px 100px",
        display: "grid",
        gridTemplateColumns: mobile ? "1fr" : "0.8fr 1.2fr",
        gap: mobile ? 28 : 80,
        alignItems: "start",
        borderBottom: "1px solid var(--hairline)",
      }}>
        {/* Cover */}
        <div style={{
          aspectRatio: "2/3",
          background: showPortrait
            ? `linear-gradient(160deg, var(--bg) 0%, var(--bg-deep) 60%, ${accent}33 100%)`
            : "var(--bg)",
          border: "1px solid var(--hairline)", position: "relative",
          boxShadow: "0 1px 0 rgba(0,0,0,0.04), 0 22px 60px -20px rgba(0,0,0,0.18)",
        }}>
          <span style={{ position: "absolute", top: mobile ? 18 : 28, left: mobile ? 18 : 28,
            fontFamily: "var(--serif)", fontStyle: "italic", color: accent,
            fontSize: mobile ? 16 : 20, fontVariationSettings: '"opsz" 9, "SOFT" 100' }}>№ 01</span>
          <div style={{ position: "absolute", inset: mobile ? 16 : 24, border: "1px solid rgba(15,15,15,0.06)" }} />
          <div style={{ position: "absolute", left: mobile ? 28 : 40, right: mobile ? 28 : 40, bottom: mobile ? 28 : 40 }}>
            <span className="eyebrow" style={{ fontSize: 11, color: "var(--ink-soft)" }}>— Mahmud Esad Cosan</span>
            <p className="serif" style={{ fontSize: mobile ? 22 : 30, fontWeight: 400, lineHeight: 1.1, letterSpacing: "-0.015em", margin: "10px 0 8px", color: "var(--ink)" }}>The Upright Path</p>
            <span style={{ fontSize: 11, letterSpacing: "0.04em", color: "var(--gray-warm)" }}>Hadith Collection · Vol. I</span>
          </div>
        </div>

        {/* Record */}
        <div>
          <span className="eyebrow"><span style={{ color: accent }}>—</span>  Hadith Collection</span>
          <h1 className="serif" style={{
            fontWeight: 350, fontSize: mobile ? 44 : 96, lineHeight: 0.96, letterSpacing: "-0.022em",
            margin: "16px 0 28px", fontVariationSettings: '"opsz" 144, "SOFT" 30',
          }}>The Upright Path</h1>
          <p className="serif italic" style={{
            fontSize: mobile ? 18 : 24, lineHeight: 1.4, color: "var(--ink-soft)", margin: "0 0 32px",
            maxWidth: 580, fontVariationSettings: '"opsz" 9, "SOFT" 100'
          }}>
            A ten-volume compendium of prophetic narrations, arranged thematically and read for a contemporary listener.
          </p>

          {/* Bibliographic register */}
          <dl style={{
            margin: 0, fontSize: 13, color: "var(--ink-soft)", lineHeight: 1.6,
            display: "grid", gridTemplateColumns: "120px 1fr", gap: "10px 24px",
            borderTop: `1px solid ${accent}`, paddingTop: 18,
          }}>
            {[
              ["Original", "Yolun En Doğrusu — Hadis Külliyatı"],
              ["Type",     "Critical edition  ·  Translation  ·  Commentary"],
              ["Volumes",  "10"],
              ["First ed.", "1987 — 2001 (10 vols)"],
              ["This ed.", "English, in preparation"],
              ["Languages", "Turkish (original) · English (forthcoming)"],
              ["Pages",    "ca. 4,200"],
              ["ISBN",     "—"],
            ].map(([k, v]) => (
              <React.Fragment key={k}>
                <dt style={{ color: "var(--gray-warm)", letterSpacing: "0.04em", fontSize: 11, textTransform: "uppercase" }}>{k}</dt>
                <dd style={{ margin: 0 }}>{v}</dd>
              </React.Fragment>
            ))}
          </dl>

          <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
            <span className="chip active">Read excerpt</span>
            <span className="chip">Request scholarly copy</span>
            <span className="chip">Cite</span>
          </div>
        </div>
      </section>

      {/* Description block — long-form prose */}
      <section style={{ padding: mobile ? "48px 22px" : "100px 96px", background: "var(--bg)", borderBottom: "1px solid var(--hairline)" }}>
        <div style={{ maxWidth: 760, marginInline: "auto" }}>
          <span className="eyebrow"><span style={{ color: accent }}>—</span>  On this work</span>
          <p className="serif" style={{
            fontSize: mobile ? 18 : 21, lineHeight: 1.7, margin: "20px 0 0", color: "var(--ink-soft)",
            fontVariationSettings: '"opsz" 24',
          }}>
            Cosan's ten-volume hadith collection is one of the largest single-author works of its kind in modern Turkish. Across more than four thousand pages, it gathers prophetic narrations not in the order of their original compilations, but in the order a contemporary reader meets the questions of life — work, illness, friendship, marriage, citizenship, doubt. Each tradition is given in its original Arabic, transliterated, translated, and finally accompanied by a short commentary in Cosan's own voice — patient, unflashy, addressed to anyone willing to read.
          </p>
        </div>
      </section>

      {/* Table of contents */}
      <section style={{ padding: mobile ? "48px 22px" : "100px 96px", borderBottom: "1px solid var(--hairline)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: mobile ? 20 : 32 }}>
          <span className="eyebrow"><span style={{ color: accent }}>—</span>  Table of contents  ·  Vol. I</span>
          <span className="eyebrow eyebrow-light">10 chapters</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr", columnGap: 64 }}>
          {toc.map((c, i) => (
            <div key={c.p} style={{
              display: "grid", gridTemplateColumns: "60px 1fr auto", gap: 16, alignItems: "baseline",
              padding: mobile ? "14px 0" : "18px 0", borderTop: "1px solid var(--hairline)",
            }}>
              <span style={{ fontFamily: "var(--serif)", fontStyle: "italic", color: accent, fontSize: 16,
                fontVariationSettings: '"opsz" 9, "SOFT" 100' }}>{c.p}</span>
              <span className="serif" style={{ fontSize: mobile ? 17 : 20, letterSpacing: "-0.005em" }}>{c.t}</span>
              <span style={{ fontSize: 11, color: "var(--gray-warm)", letterSpacing: "0.04em" }}>p. {((i + 1) * 28).toString().padStart(3, "0")}</span>
            </div>
          ))}
        </div>
      </section>

      {/* Related */}
      <section style={{ padding: mobile ? "48px 22px 64px" : "100px 96px 140px" }}>
        <span className="eyebrow"><span style={{ color: accent }}>—</span>  Related works</span>
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "repeat(3, 1fr)", gap: mobile ? 14 : 28, marginTop: mobile ? 20 : 32 }}>
          {related.map(r => (
            <article key={r.n} style={{
              borderTop: `1px solid ${accent}`, padding: mobile ? "16px 0" : "24px 0",
              display: "flex", justifyContent: "space-between", alignItems: "baseline",
            }}>
              <div>
                <span style={{ fontFamily: "var(--serif)", fontStyle: "italic", color: accent, fontSize: 14 }}>№ {r.n}</span>
                <h4 className="serif" style={{ fontWeight: 400, fontSize: mobile ? 22 : 28, margin: "4px 0 0", letterSpacing: "-0.012em" }}>{r.t}</h4>
              </div>
              <span style={{ color: accent, fontSize: 22 }}>→</span>
            </article>
          ))}
        </div>
      </section>

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

Object.assign(window, { LibraryWork });