// About page — full history with chapter timeline and photo galleries
function AboutPage({ t }) {
  return (
    <div>
      <div className="wn-container">
        <PageHeading eyebrow={t.about.eyebrow} title={t.about.title} intro={t.about.intro} />
      </div>

      <AboutHeroImage t={t} />
      <AboutIntro t={t} />
      <AboutChapters t={t} />
      <AboutQuote t={t} />
    </div>
  );
}

// ─── Hero image strip (aerial views) ──────────────────────────────
function AboutHeroImage({ t }) {
  const lang = t.locale;
  const alt = lang === "th" ? "วัดไทยนอร์เวย์ ปัจจุบัน" : lang === "no" ? "Wat Thai Norge i dag" : "Wat Thai Norway today";
  const caption = lang === "th"
    ? "วัดไทยนอร์เวย์ในปัจจุบัน · ที่ตั้งเนื้อที่ ๑๖,๘๐๐ ตร.ม. ตำบล Frogner"
    : lang === "no"
    ? "Wat Thai Norge i dag · 16 800 m² tomt i Frogner"
    : "Wat Thai Norway today · 16,800 m² site in Frogner";
  return (
    <section style={{ paddingTop: "16px", paddingBottom: "80px" }}>
      <div className="wn-container">
        <div style={{ position: "relative" }}>
          <img
            src="/assets/temple-hero.jpg"
            alt={alt}
            style={{ display: "block", width: "100%", aspectRatio: "16 / 9", objectFit: "cover" }}
          />
          <div style={{ position: "absolute", top: "-12px", left: "-12px", width: "48px", height: "48px", borderTop: "1px solid var(--accent)", borderLeft: "1px solid var(--accent)" }} />
          <div style={{ position: "absolute", bottom: "-12px", right: "-12px", width: "48px", height: "48px", borderBottom: "1px solid var(--accent)", borderRight: "1px solid var(--accent)" }} />
        </div>
        <div style={{ marginTop: "16px", fontFamily: "var(--font-body)", fontSize: "11px", letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--muted)", textAlign: "center" }}>
          {caption}
        </div>
      </div>
    </section>
  );
}

// ─── Intro paragraphs ──────────────────────────────────────────────
function AboutIntro({ t }) {
  return (
    <section style={{ paddingTop: "20px", paddingBottom: "60px" }}>
      <div className="wn-container" style={{ maxWidth: "880px" }}>
        {t.about.paragraphs.map((p, i) => (
          <p key={i} style={{ fontFamily: "var(--font-body)", fontSize: "17px", lineHeight: 1.85, color: i === 0 ? "var(--ink)" : "var(--muted)", marginTop: i === 0 ? 0 : "20px", textWrap: "pretty", textIndent: i === 0 ? 0 : "2em" }}>
            {p}
          </p>
        ))}
        <div style={{ marginTop: "32px", display: "flex", justifyContent: "center" }}>
          <Ornament width={120} />
        </div>
      </div>
    </section>
  );
}

// ─── Quote ─────────────────────────────────────────────────────────
function AboutQuote({ t }) {
  const lang = t.locale;
  const quote = lang === "th"
    ? "“จงเป็นเกาะของตน จงพึ่งตนเอง อย่าพึ่งสิ่งอื่น \nจงมีธรรมเป็นเกาะ มีธรรมเป็นที่พึ่ง”"
    : lang === "no"
    ? "«Vær en øy for deg selv. Søk tilflukt i deg selv, ikke i andre. Gjør dharma til din øy.»"
    : "“Be islands unto yourselves, refuges unto yourselves, seeking no external refuge; with the Dhamma as your island, the Dhamma as your refuge.”";
  const source = lang === "th" ? "มหาปรินิพพานสูตร" : "Mahāparinibbāna Sutta";
  return (
    <section style={{ paddingTop: "60px", paddingBottom: "60px" }}>
      <div className="wn-container" style={{ maxWidth: "880px", textAlign: "center" }}>
        <div style={{ display: "flex", justifyContent: "center" }}>
          <Ornament width={120} />
        </div>
        <blockquote style={{ fontFamily: "var(--font-display)", fontSize: "clamp(24px, 3vw, 36px)", lineHeight: 1.4, color: "var(--ink)", margin: "32px 0 0", fontStyle: "italic", letterSpacing: "-0.005em", whiteSpace: "pre-line" }}>
          {quote}
        </blockquote>
        <div style={{ marginTop: "20px", fontFamily: "var(--font-body)", fontSize: "12px", letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--muted)" }}>
          — {source}
        </div>
      </div>
    </section>
  );
}

window.AboutPage = AboutPage;
