// 關於我們 page
const ABOUT_HERO_IMG = `${IMG}/2021/07/pexels-dom-le-roy-4065333-scaled.jpg`;
const ABOUT_LEADER_IMG = `${IMG}/2021/07/2-People-collaborating.png`;

function AboutPage({ t, lang, variant, setPage }) {
  const a = t.about;
  return (
    <div className="page-enter">
      <PageHero eyebrow={a.eyebrow} title={a.title} lead={a.lead} gradient="20% 60%"
                image={{ src: ABOUT_HERO_IMG, alt: a.title, ratio: "4/5" }} />

      {/* Story */}
      <section style={{ padding: "80px 0 100px" }}>
        <div className="shell" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 64, alignItems: "start" }}>
          <div style={{ position: "sticky", top: 120 }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>
              {lang === "zh" ? "我們的故事" : "Our Story"}
            </div>
            <h2 className="h-section" style={{ fontSize: "clamp(24px, 2.6vw, 38px)" }}>
              {a.storyTitle}
            </h2>
          </div>
          <div>
            {a.story.map((para, i) => (
              <p key={i} style={{
                fontFamily: "var(--f-serif)", fontSize: "clamp(17px, 1.7vw, 22px)",
                lineHeight: 1.65, color: i === 0 ? "var(--c-deep)" : "var(--c-ink)",
                margin: i > 0 ? "26px 0 0" : 0, letterSpacing: "-0.01em",
              }}>
                {para}
              </p>
            ))}
          </div>
        </div>
      </section>

      {/* Founded — smaller number */}
      <section style={{ padding: "80px 0", background: "var(--c-mist)" }}>
        <div className="shell" style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 64, alignItems: "center" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 14 }}>
              {lang === "zh" ? "創立" : "Founded"}
            </div>
            <div style={{
              fontFamily: "var(--f-serif)", fontSize: "clamp(56px, 7vw, 96px)",
              color: "var(--c-aqua)", letterSpacing: "-0.04em", lineHeight: 1,
            }}>
              2020
            </div>
          </div>
          <div>
            <h3 className="h-section" style={{ fontSize: "clamp(22px, 2.4vw, 32px)", marginBottom: 18 }}>
              {a.foundedTitle}
            </h3>
            <p style={{
              fontFamily: "var(--f-serif)", fontSize: 17, lineHeight: 1.75,
              color: "var(--c-ink)", margin: 0, letterSpacing: "-0.005em",
            }}>
              {a.foundedBody}
            </p>
          </div>
        </div>
      </section>

      {/* Leader with collab image */}
      <section style={{ padding: "100px 0" }}>
        <div className="shell" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 64, alignItems: "center" }}>
          <RemoteImage src={ABOUT_LEADER_IMG} alt={a.leaderName} ratio="3/4" />
          <div>
            <div className="eyebrow" style={{ marginBottom: 14 }}>{a.leaderTitle}</div>
            <h3 className="h-display" style={{ fontSize: "clamp(28px, 3.2vw, 48px)", marginBottom: 12 }}>
              {a.leaderName}
            </h3>
            <div style={{
              fontFamily: "var(--f-mono)", fontSize: 13,
              color: "var(--c-aqua)", letterSpacing: "0.12em",
            }}>
              {a.leaderRole}
            </div>
            <p style={{ marginTop: 28, fontSize: 15, lineHeight: 1.75, color: "var(--c-muted)" }}>
              {a.lead}
            </p>
          </div>
        </div>
      </section>

      {/* Areas */}
      <section style={{ padding: "60px 0 100px", background: "var(--c-mist)" }}>
        <div className="shell">
          <SectionHead index="—" eyebrow={lang === "zh" ? "應用領域" : "Applications"}
                       title={a.areasTitle} />
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0,
            borderTop: "1px solid var(--c-line)", borderBottom: "1px solid var(--c-line)",
          }}>
            {a.areas.map((area, i) => (
              <div key={i} style={{
                padding: "36px 22px",
                borderRight: i < a.areas.length - 1 ? "1px solid var(--c-line)" : "none",
                textAlign: "center",
              }}>
                <div style={{
                  fontFamily: "var(--f-mono)", fontSize: 10.5,
                  color: "var(--c-aqua)", letterSpacing: "0.18em", marginBottom: 14,
                }}>
                  0{i + 1}
                </div>
                <div style={{
                  fontFamily: "var(--f-serif)", fontSize: 18,
                  color: "var(--c-ink)", letterSpacing: "-0.005em",
                }}>
                  {area}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <ClosingCTA title={a.ctaTitle} body={a.ctaBody} primaryLabel={t.closingCta} />
    </div>
  );
}

window.AboutPage = AboutPage;