/* Ideas index — chosen hybrid.
   V1 top sticky nav  +  V2 editorial list body (no sidebar).
   Themes drawn from the md's biographical chapter titles.
*/

const IDEAS_THEMES = [
  { n: "01", title: "Bio in Brief",            sub: "The biographical thread — Çanakkale, Istanbul, Ankara, Dubbo.",                                 count: "1 essay · timeline" },
  { n: "02", title: "Academic & Professional", sub: "Tafsīr, Ḥadīth, Taṣawwuf — the formal qualifications and the journals.",                       count: "12 essays · 8 lectures" },
  { n: "03", title: "Forerunner in Goodness",  sub: "Foundations, schools, radio, publishing, women's associations, environmental work.",            count: "11 essays · 14 talks" },
  { n: "04", title: "Contemporary Thinker",    sub: "Faith and intellect as one — guidance both spiritually profound and practically relevant.",     count: "9 essays · 6 letters" },
  { n: "05", title: "Spiritual Guide",         sub: "The path of love, sincerity, and inner transformation — taught and embodied.",                  count: "7 essays · 4 lectures" },
  { n: "06", title: "True Friend",             sub: "Humility, warmth, integrity — companion to people from all walks of life.",                     count: "5 essays · 3 talks" },
  { n: "07", title: "Media",                   sub: "Short English excerpts with voiceover; the full Turkish transcripts on record.",                count: "47 audio · 12 transcripts" },
  { n: "08", title: "Continued Legacy",        sub: "An unbroken chain of spiritual guidance — heart to heart, across generations.",                 count: "8 correspondences" },
];

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

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

      {/* Editorial hero — title left, italic descriptor right */}
      <section style={{
        padding: mobile ? "56px 22px 32px" : "120px 96px 80px",
        display: "grid", gridTemplateColumns: mobile ? "1fr" : "1.2fr 1fr",
        gap: mobile ? 20 : 80,
        alignItems: "end",
        borderBottom: "1px solid var(--hairline)",
      }}>
        <div>
          <span className="eyebrow"><span style={{ color: accent }}>—</span>  02 / Ideas</span>
          <h1 className="serif" style={{
            fontWeight: 300, fontSize: mobile ? 64 : 140, lineHeight: 0.94, letterSpacing: "-0.028em",
            margin: "16px 0 0", fontVariationSettings: '"opsz" 144, "SOFT" 30',
          }}>The<br/>Themes</h1>
        </div>
        <p className="serif italic" style={{
          fontSize: mobile ? 18 : 26, lineHeight: 1.35, color: "var(--ink-soft)",
          margin: 0, maxWidth: 480, fontVariationSettings: '"opsz" 9, "SOFT" 100'
        }}>
          Eight rooms gathered from a lifetime of writing, speaking and service — arranged not by chronology, but by the questions he kept returning to.
        </p>
      </section>

      {/* Numbered editorial list — no sidebar */}
      <section style={{ padding: mobile ? "16px 22px 64px" : "20px 96px 120px" }}>
        {IDEAS_THEMES.map((t, i) => (
          <article key={t.n} className="hf-door" style={{
            display: "grid",
            gridTemplateColumns: mobile ? "auto 1fr auto" : "60px 1.4fr 1fr 140px",
            gap: mobile ? 14 : 32,
            alignItems: "baseline",
            borderTop: i === 0 ? "1px solid var(--ink)" : "1px solid var(--hairline)",
            padding: mobile ? "22px 0" : "40px 0",
          }}>
            <span style={{
              fontFamily: "var(--serif)", fontStyle: "italic", color: accent,
              fontSize: mobile ? 16 : 22, fontVariationSettings: '"opsz" 9, "SOFT" 100'
            }}>{t.n}</span>
            <h3 className="serif" style={{
              fontWeight: 400, fontSize: mobile ? 28 : 58, letterSpacing: "-0.02em",
              margin: 0, lineHeight: 1
            }}>{t.title}</h3>
            {!mobile && <p style={{ fontSize: 14, color: "var(--gray-warm)", margin: 0, lineHeight: 1.55 }}>{t.sub}</p>}
            <div style={{ textAlign: "right" }}>
              {!mobile && <div style={{ fontSize: 11, letterSpacing: "0.04em", color: "var(--gray-warm)" }}>{t.count}</div>}
              <div style={{ marginTop: mobile ? 0 : 6, color: accent, fontSize: mobile ? 18 : 14 }}>{mobile ? <span className="hf-arrow">→</span> : <>Read <span className="hf-arrow">→</span></>}</div>
            </div>
          </article>
        ))}
      </section>

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

Object.assign(window, { Ideas });