/* About — short, standard.
   V1 sticky nav + editorial hero + four-column "What this site is" + curators note + contact register.
*/

function About({ mode = "desktop", accent = "#B89968", showPortrait = true }) {
  const mobile = mode === "mobile";
  return (
    <div className="cw-frame" style={{ overflowY: "auto" }}>
      <TopNav current="About" mobile={mobile} accent={accent} />

      <section style={{ padding: mobile ? "56px 22px 32px" : "120px 96px 80px", borderBottom: "1px solid var(--hairline)" }}>
        <span className="eyebrow"><span style={{ color: accent }}>—</span>  07 / About this site</span>
        <h1 className="serif" style={{
          fontWeight: 300, fontSize: mobile ? 56 : 132, lineHeight: 0.96, letterSpacing: "-0.025em",
          margin: "16px 0 24px", fontVariationSettings: '"opsz" 144, "SOFT" 30',
        }}>What this is</h1>
        <p className="serif italic" style={{
          fontSize: mobile ? 18 : 28, lineHeight: 1.4, color: "var(--ink-soft)", margin: 0, maxWidth: 760,
          fontVariationSettings: '"opsz" 9, "SOFT" 100'
        }}>
          A digital home for the writings, talks, letters and life of Mahmud Esad Cosan — kept by his students and the Cosan Estate, addressed to a global readership.
        </p>
      </section>

      {/* Four-column register */}
      <section style={{ padding: mobile ? "40px 22px" : "80px 96px", borderBottom: "1px solid var(--hairline)" }}>
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "repeat(4, 1fr)", gap: mobile ? 28 : 48 }}>
          {[
            { eb: "What it is", t: "A reading site, not a community site.", b: "Every cell is addressed to someone who does not yet know Cosan." },
            { eb: "Who runs it",  t: "Students and the Cosan Estate.",      b: "Listed in the footer in the imprint of a publishing house." },
            { eb: "Languages",    t: "English first; six soon to follow.",   b: "Translations by human hand — especially quotes and conversations." },
            { eb: "How to cite",  t: "Full bibliographic record per work.",  b: "Archive items carry MEC-numbers, collection and condition." },
          ].map(c => (
            <div key={c.eb} style={{ borderTop: `1px solid ${accent}`, paddingTop: 14 }}>
              <span className="eyebrow">{c.eb}</span>
              <h3 className="serif" style={{ fontWeight: 400, fontSize: mobile ? 22 : 28, lineHeight: 1.2, letterSpacing: "-0.01em", margin: "10px 0 10px" }}>{c.t}</h3>
              <p style={{ fontSize: 14, color: "var(--gray-warm)", margin: 0, lineHeight: 1.55 }}>{c.b}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Curators' note + contact */}
      <section style={{ padding: mobile ? "40px 22px 64px" : "80px 96px 120px",
        display: "grid", gridTemplateColumns: mobile ? "1fr" : "1.3fr 1fr", gap: mobile ? 24 : 80 }}>
        <div>
          <span className="qmark" style={{ color: accent, fontSize: mobile ? 64 : 88 }}>"</span>
          <p className="serif italic" style={{
            fontSize: mobile ? 22 : 32, lineHeight: 1.3, margin: "8px 0 0",
            fontVariationSettings: '"opsz" 9, "SOFT" 100', color: "var(--ink)"
          }}>
            We have tried to build a room quiet enough that the work can speak — and large enough that the world might enter.
          </p>
          <span className="eyebrow" style={{ marginTop: 20, display: "block" }}>— Curators, Cosan Estate, 2026</span>
        </div>
        <div>
          <span className="eyebrow eyebrow-ink">Contact</span>
          <dl style={{ marginTop: 14, fontSize: 13, color: "var(--ink-soft)", display: "grid", gridTemplateColumns: "auto 1fr", gap: "8px 18px", lineHeight: 1.6 }}>
            <dt style={{ color: "var(--gray-warm)", letterSpacing: "0.04em", fontSize: 11, textTransform: "uppercase" }}>Editorial</dt><dd style={{ margin: 0 }}>editor@cosan.org</dd>
            <dt style={{ color: "var(--gray-warm)", letterSpacing: "0.04em", fontSize: 11, textTransform: "uppercase" }}>Rights</dt>    <dd style={{ margin: 0 }}>rights@cosan.org</dd>
            <dt style={{ color: "var(--gray-warm)", letterSpacing: "0.04em", fontSize: 11, textTransform: "uppercase" }}>Archive</dt>   <dd style={{ margin: 0 }}>archive@cosan.org</dd>
            <dt style={{ color: "var(--gray-warm)", letterSpacing: "0.04em", fontSize: 11, textTransform: "uppercase" }}>Press</dt>     <dd style={{ margin: 0 }}>press@cosan.org</dd>
          </dl>
        </div>
      </section>

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

Object.assign(window, { About });