/* Archive — museum istisna. The only page where Islamic objects (calligraphy,
   letters, manuscripts) are foregrounded — but framed as historical artefacts
   in V&A / British Library register, with academic metadata.
*/

const ARCHIVE = [
  { n: "01", kind: "Calligraphy",       title: "Hilye-i Şerîfe", desc: "Description of the Prophet (peace be upon him) — ink and gold on paper.",                               date: "Late 19th c.",       coll: "Family papers",       cond: "Excellent" },
  { n: "02", kind: "Manuscript",        title: "Makâlât — autograph notebook", desc: "Working notes toward the 1972 critical edition of Hacı Bektâş-ı Velî's Makâlât.", date: "c. 1968–71",        coll: "Cosan Archive, Box 4", cond: "Fair" },
  { n: "03", kind: "Letter",            title: "To Mahmud Sami Efendi", desc: "Manuscript letter on the question of teaching method.",                       date: "Konya, 2 March 1973", coll: "Cosan Archive, Box 11", cond: "Very good" },
  { n: "04", kind: "Photograph",        title: "Lecture, Faculty of Theology", desc: "Silver-gelatin print. Cosan addressing graduate seminar.",              date: "Ankara, Spring 1979", coll: "University records",   cond: "Very good" },
  { n: "05", kind: "Printed edition",   title: "İlk Yıllar — periodical, vol. III", desc: "Bound run of early editorials.",                                    date: "1987–1989",          coll: "Cosan Archive, Box 1", cond: "Good" },
  { n: "06", kind: "Manuscript",        title: "Tafsir of Surah Al-Fātiḥa — draft folio", desc: "Folio with marginal corrections in two hands.",              date: "n.d., c. 1992–94",   coll: "Cosan Archive, Box 7", cond: "Excellent" },
];

function Archive({ mode = "desktop", accent = "#B89968", showPortrait = true }) {
  const mobile = mode === "mobile";
  const [lang] = (typeof useLang === "function" ? useLang() : ["en"]);
  const mt = (k) => (typeof miscT === "function" ? miscT(k, lang) : k);
  const lx = (k) => (typeof libT === "function" ? libT(k, lang) : k);
  const [activeFilter, setActiveFilter] = React.useState("All");
  const items = ARCHIVE.filter(o => activeFilter === "All" || o.kind.startsWith(activeFilter.replace(/s$/, "")));

  return (
    <div className="cw-frame" style={{ overflowY: "auto" }}>
      <TopNav current="Archive" mobile={mobile} accent={accent} />

      {/* Museum-register hero */}
      <section style={{
        padding: mobile ? "56px 22px 36px" : "120px 96px 64px",
        borderBottom: "1px solid var(--hairline)",
      }}>
        <span className="eyebrow"><span style={{ color: accent }}>—</span>  06 / {mt("archive")}  ·  {mt("museum_view")}</span>
        <h1 className="serif" style={{
          fontWeight: 300, fontSize: mobile ? 56 : 132, lineHeight: 0.96, letterSpacing: "-0.025em",
          margin: "16px 0 28px", fontVariationSettings: '"opsz" 144, "SOFT" 30',
        }}>{mt("the_archive")}</h1>
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1.2fr 1fr", gap: mobile ? 18 : 64, alignItems: "end" }}>
          <p className="serif italic" style={{
            fontSize: mobile ? 18 : 24, lineHeight: 1.4, color: "var(--ink-soft)", margin: 0, maxWidth: 640,
            fontVariationSettings: '"opsz" 9, "SOFT" 100'
          }}>
            Photographs, letters, manuscripts and calligraphy from Cosan's working life and the papers of those around him. Each item is dated, catalogued and shown in the register a research library would use.
          </p>
          <p style={{ fontSize: 12, color: "var(--gray-warm)", letterSpacing: "0.04em", lineHeight: 1.7, margin: 0 }}>
            All items: © Cosan Estate. Used by permission for scholarship and study. High-resolution scans available on request.
          </p>
        </div>
      </section>

      {/* Catalogue filters — register row */}
      <section style={{
        padding: mobile ? "20px 22px" : "24px 96px",
        borderBottom: "1px solid var(--hairline)",
        display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16,
        flexWrap: "wrap",
      }}>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          <span className="eyebrow" style={{ marginRight: 8 }}>— Catalogue</span>
          {["All", "Calligraphy", "Manuscripts", "Letters", "Photographs", "Printed editions"].map((f) => {
            const sel = f === activeFilter;
            return (
              <span key={f} onClick={() => setActiveFilter(f)}
                className={sel ? "chip active" : "chip"}
                style={{ cursor: "pointer", transition: "all 250ms cubic-bezier(0.22,1,0.36,1)" }}>{f}</span>
            );
          })}
        </div>
        <span className="eyebrow eyebrow-light">{mobile ? `${items.length} items` : `${items.length} of ${ARCHIVE.length} items  ·  Last updated 04 May 2026`}</span>
      </section>

      {/* Object grid — museum specimen cards */}
      <section style={{ padding: mobile ? "36px 22px 56px" : "60px 96px 100px" }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: mobile ? "1fr" : "repeat(3, 1fr)",
          gap: mobile ? 36 : 56,
        }}>
          {items.map(o => (
            <article key={o.n} style={{ display: "flex", flexDirection: "column" }}>
              {/* Object image — neutral cream backdrop with hairline frame */}
              <div style={{
                aspectRatio: "4/5",
                background: "var(--bg-warm)",
                position: "relative",
                marginBottom: 16,
                border: "1px solid var(--hairline)",
              }}>
                {showPortrait && (
                  <div className="ph ph-light" style={{ position: "absolute", inset: mobile ? 28 : 36 }}>
                    <span className="ph-label">{o.kind.toLowerCase()} · high-res scan  ·  [hi-fi]</span>
                  </div>
                )}
                <span style={{
                  position: "absolute", top: 10, left: 12,
                  fontSize: 10, letterSpacing: "0.06em", color: "var(--gray-warm)",
                  fontFamily: "ui-monospace, 'SF Mono', monospace",
                }}>MEC · {o.n}</span>
              </div>

              {/* Specimen label — register format */}
              <div>
                <span className="eyebrow" style={{ color: accent }}>— {o.kind}</span>
                <h3 className="serif" style={{
                  fontWeight: 400, fontSize: mobile ? 22 : 26, letterSpacing: "-0.01em",
                  margin: "8px 0 6px", lineHeight: 1.2
                }}>{o.title}</h3>
                <p style={{ fontSize: 14, color: "var(--gray-warm)", margin: "0 0 14px", lineHeight: 1.55 }}>{o.desc}</p>

                {/* Metadata register */}
                <dl style={{
                  margin: 0, fontSize: 11, color: "var(--gray-warm)", letterSpacing: "0.02em",
                  display: "grid", gridTemplateColumns: "auto 1fr", gap: "4px 14px",
                  paddingTop: 12, borderTop: "1px solid var(--hairline)",
                  fontFamily: "ui-monospace, 'SF Mono', monospace",
                }}>
                  <dt>Date</dt>      <dd style={{ margin: 0, color: "var(--ink-soft)" }}>{o.date}</dd>
                  <dt>Coll.</dt>     <dd style={{ margin: 0, color: "var(--ink-soft)" }}>{o.coll}</dd>
                  <dt>Cond.</dt>     <dd style={{ margin: 0, color: "var(--ink-soft)" }}>{o.cond}</dd>
                </dl>
                <a className="gold-u" style={{ fontSize: 12, letterSpacing: "0.04em", color: accent, marginTop: 14, display: "inline-block" }}>
                  Open record →
                </a>
              </div>
            </article>
          ))}
        </div>

        {/* Show more */}
        <div style={{
          marginTop: mobile ? 48 : 80, paddingTop: mobile ? 22 : 32,
          borderTop: "1px solid var(--hairline)",
          display: "flex", justifyContent: "space-between", alignItems: "baseline"
        }}>
          <span className="eyebrow">{lx("showing")} {items.length} {lx("of")} {ARCHIVE.length}</span>
          <a className="gold-u" style={{ fontSize: mobile ? 14 : 16, color: accent, letterSpacing: "0.02em" }}>Browse full catalogue →</a>
        </div>
      </section>

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

Object.assign(window, { Archive });