/* About + Journal + Contact pages. */

/* ── About ─────────────────────────────────────── */
const PageAbout = () => {
  const { lang } = useT();
  const a = window.MR.about;
  return (
    <main>
      {/* Hero */}
      <section style={{ borderBottom: "1px solid var(--color-rule)" }}>
        <div style={{ maxWidth: 1080, margin: "0 auto", padding: "120px 32px 96px" }}>
          <Reveal><span className="eyebrow">{a.kicker[lang]}</span></Reveal>
          <Reveal delay={120} as="h1" style={{
            fontFamily: "var(--font-serif)", fontWeight: 400,
            fontSize: "clamp(40px, 6vw, 84px)", lineHeight: 1.05,
            letterSpacing: "-0.02em", margin: "16px 0 0",
            textWrap: "balance"
          }}>
            {a.hero[lang]}
          </Reveal>
        </div>
      </section>

      {/* Story */}
      <section style={{ padding: "96px 0", borderBottom: "1px solid var(--color-rule)" }}>
        <div style={{ maxWidth: 1080, margin: "0 auto", padding: "0 32px",
                      display: "grid", gridTemplateColumns: "1fr 2fr", gap: 48 }}>
          <Reveal><span className="eyebrow">{a.story.eyebrow[lang]}</span></Reveal>
          <Reveal delay={120}>
            {a.story.p.map((p, i) => (
              <p key={i} style={{
                fontFamily: i === 0 ? "var(--font-serif)" : "var(--font-sans)",
                fontSize: i === 0 ? 24 : 17,
                lineHeight: i === 0 ? 1.4 : 1.65,
                color: i === 0 ? "var(--color-ink)" : "var(--color-ink-2)",
                margin: i === 0 ? "0 0 32px" : "0 0 20px",
                textWrap: "balance",
                maxWidth: 620
              }}>
                {p[lang]}
              </p>
            ))}
          </Reveal>
        </div>
      </section>

      {/* Pillars */}
      <section style={{ background: "var(--color-paper)", padding: "96px 0",
                        borderBottom: "1px solid var(--color-rule)" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 32px" }}>
          <Reveal><span className="eyebrow">{a.pillars.eyebrow[lang]}</span></Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)",
                        gap: 0, marginTop: 32,
                        borderTop: "1px solid var(--color-ink)" }}>
            {a.pillars.items.map((it, i) => (
              <Reveal key={it.num} delay={i * 80} style={{
                padding: "32px 24px 24px 0",
                borderRight: i < 3 ? "1px solid var(--color-rule)" : "none",
                paddingLeft: i > 0 ? 24 : 0
              }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11,
                              letterSpacing: "0.16em", color: "var(--color-ink-3)" }}>
                  {it.num}
                </div>
                <h3 style={{ fontFamily: "var(--font-serif)", fontWeight: 400,
                             fontSize: 22, lineHeight: 1.2, letterSpacing: "-0.01em",
                             margin: "12px 0 12px", textWrap: "balance" }}>
                  {it[lang]}
                </h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.6,
                            color: "var(--color-ink-2)", margin: 0 }}>
                  {it.body[lang]}
                </p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Team */}
      <section style={{ padding: "120px 0 96px" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 32px" }}>
          <Reveal>
            <span className="eyebrow">{a.team.eyebrow[lang]}</span>
            <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 400,
                         fontSize: "clamp(32px, 4vw, 56px)", lineHeight: 1.1,
                         letterSpacing: "-0.02em", margin: "12px 0 4px" }}>
              {a.team.title[lang]}
            </h2>
            <p style={{ fontFamily: "var(--font-serif)", fontStyle: "italic",
                        fontSize: 19, color: "var(--color-ink-3)",
                        margin: "0 0 56px" }}>
              {a.team.sub[lang]}
            </p>
          </Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
                        borderTop: "1px solid var(--color-ink)" }}>
            {a.team.roles.map((r, i) => (
              <Reveal key={i} delay={i * 40} style={{
                padding: "20px 24px 20px 0",
                borderBottom: "1px solid var(--color-rule)",
                borderRight: (i % 3) < 2 ? "1px solid var(--color-rule)" : "none",
                paddingLeft: (i % 3) > 0 ? 24 : 0,
                display: "flex", justifyContent: "space-between",
                alignItems: "baseline", gap: 16
              }}>
                <span style={{ fontSize: 16, color: "var(--color-ink)" }}>
                  {r[lang]}
                </span>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 11,
                               letterSpacing: "0.14em", color: "var(--color-ink-3)" }}>
                  {String(i + 1).padStart(2, "0")}
                </span>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
};

window.PageAbout = PageAbout;

/* ── Journal ───────────────────────────────────── */
const PageJournal = () => {
  const { lang } = useT();
  const j = window.MR.journal;
  return (
    <main>
      <section style={{ borderBottom: "1px solid var(--color-rule)" }}>
        <div style={{ maxWidth: 1080, margin: "0 auto", padding: "120px 32px 80px" }}>
          <Reveal><span className="eyebrow">{j.kicker[lang]}</span></Reveal>
          <Reveal delay={120} as="h1" style={{
            fontFamily: "var(--font-serif)", fontWeight: 400,
            fontSize: "clamp(40px, 6vw, 72px)", lineHeight: 1.05,
            letterSpacing: "-0.02em", margin: "16px 0 32px"
          }}>
            {j.title[lang]}
          </Reveal>
          <Reveal delay={240} as="p" style={{
            fontFamily: "var(--font-serif)", fontStyle: "italic",
            fontSize: 20, lineHeight: 1.5, color: "var(--color-ink-2)",
            maxWidth: 640, margin: 0
          }}>
            {j.lede[lang]}
          </Reveal>
        </div>
      </section>
      <section style={{ padding: "0 0 96px" }}>
        <div style={{ maxWidth: 1080, margin: "0 auto", padding: "0 32px" }}>
          {j.entries.map((e, i) => (
            <Reveal key={e.num} delay={i * 60} as="article" style={{
              display: "grid", gridTemplateColumns: "180px 1fr",
              gap: 48, padding: "56px 0",
              borderBottom: "1px solid var(--color-rule)"
            }}>
              <div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 13,
                              letterSpacing: "0.10em", color: "var(--color-ink)" }}>
                  {e.date}
                </div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11,
                              letterSpacing: "0.16em", color: "var(--color-ink-3)",
                              marginTop: 8 }}>
                  №{e.num}
                </div>
              </div>
              <div>
                <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 400,
                             fontSize: 30, lineHeight: 1.15, letterSpacing: "-0.01em",
                             margin: "0 0 16px", textWrap: "balance" }}>
                  {lang === "ka" ? e.titleKa : e.titleEn}
                </h2>
                <p style={{ fontSize: 17, lineHeight: 1.65,
                            color: "var(--color-ink-2)", margin: 0,
                            maxWidth: 680 }}>
                  {lang === "ka" ? e.bodyKa : e.bodyEn}
                </p>
              </div>
            </Reveal>
          ))}
        </div>
      </section>
    </main>
  );
};

window.PageJournal = PageJournal;

/* ── Contact ───────────────────────────────────── */
const PageContact = () => {
  const { lang } = useT();
  const c = window.MR.contact;
  return (
    <main>
      <section style={{ borderBottom: "1px solid var(--color-rule)" }}>
        <div style={{ maxWidth: 1080, margin: "0 auto", padding: "120px 32px 80px" }}>
          <Reveal><span className="eyebrow">{c.kicker[lang]}</span></Reveal>
          <Reveal delay={120} as="h1" style={{
            fontFamily: "var(--font-serif)", fontWeight: 400,
            fontSize: "clamp(40px, 6vw, 84px)", lineHeight: 1.0,
            letterSpacing: "-0.02em", margin: "16px 0 32px"
          }}>
            {c.title[lang]}
          </Reveal>
          <Reveal delay={240} as="p" style={{
            fontFamily: "var(--font-serif)", fontStyle: "italic",
            fontSize: 20, lineHeight: 1.5, color: "var(--color-ink-2)",
            maxWidth: 580, margin: 0
          }}>
            {c.lede[lang]}
          </Reveal>
        </div>
      </section>

      <section style={{ padding: "96px 0" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 32px" }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
                        gap: 0, borderTop: "1px solid var(--color-ink)" }}>
            {c.blocks.map((b, i) => (
              <Reveal key={i} delay={i * 100} style={{
                padding: "40px 32px 40px 0",
                borderRight: i < 2 ? "1px solid var(--color-rule)" : "none",
                paddingLeft: i > 0 ? 32 : 0
              }}>
                <span className="eyebrow" style={{ display: "block", marginBottom: 24 }}>
                  {b.eyebrow[lang]}
                </span>
                <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                  {b.lines.map((ln, k) => {
                    const txt = ln.v || ln[lang];
                    const style = {
                      fontFamily: ln.mono ? "var(--font-mono)" : "var(--font-sans)",
                      fontSize: ln.mono ? 14 : 16,
                      letterSpacing: ln.mono ? "0.02em" : "0",
                      color: "var(--color-ink)",
                      lineHeight: 1.5
                    };
                    return ln.link ? (
                      <a key={k} href={ln.link} className="mr-link" style={{ ...style, color: "var(--color-accent)" }}>
                        {txt}
                      </a>
                    ) : (
                      <div key={k} style={style}>{txt}</div>
                    );
                  })}
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: "120px 32px", textAlign: "center" }}>
        <p style={{ fontFamily: "var(--font-serif)", fontStyle: "italic",
                    fontSize: 26, color: "var(--color-ink-2)",
                    margin: 0, display: "inline-flex", alignItems: "center", gap: 16 }}>
          {c.sign[lang]} <FlagGE w={22} h={14}/>
        </p>
      </section>
    </main>
  );
};

window.PageContact = PageContact;