// 專案管理 page
const PM_CORE_IMGS = [
  `${IMG}/2021/07/pexels-pixasquare-1115804-1024x1024.jpg`,
  `${IMG}/2021/07/20210717-044902-001.png`,
  `${IMG}/2021/07/05.png`,
];

const PM_BIM_IMG = `${IMG}/elementor/thumbs/pexels-dominika-roseclay-3839649-scaled-q9mgqu3jdcjvkofkgqnpgxi6mcv6iakgtowjgi1nv4.jpg`;

const PM_CASE_IMGS = [
  `${IMG}/2021/07/台北市長照-02.jpg`,
  `${IMG}/2021/07/02.jpg`,
  `${IMG}/2021/07/03.jpg`,
  `${IMG}/elementor/thumbs/pexels-karolina-grabowska-4195410-scaled-q9mgqv1dk6l5wae7b92c1f9n7qqjpzo75tk0xs09ow.jpg`,
];

function PmPage({ t, lang, variant, setPage }) {
  const p = t.pm;
  return (
    <div className="page-enter">
      <PageHero eyebrow={p.eyebrow} title={p.title} lead={p.lead} gradient="30% 30%"
                image={{ src: PM_CORE_IMGS[0], alt: p.eyebrow, ratio: "4/5" }} />

      {/* Core 3 with images */}
      <section style={{ padding: "60px 0 100px" }}>
        <div className="shell">
          <SectionHead index="01" eyebrow={lang === "zh" ? "核心服務" : "Core Services"}
                       title={p.coreTitle} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
            {p.core.map((c, i) => (
              <div key={i} className="card" style={{ padding: 0, overflow: "hidden",
                                                      display: "flex", flexDirection: "column" }}>
                <RemoteImage src={PM_CORE_IMGS[i]} alt={c.k} ratio="16/9"
                              style={{ borderRadius: 0 }} />
                <div style={{ padding: 26 }}>
                  <div style={{
                    fontFamily: "var(--f-mono)", fontSize: 10.5, color: "var(--c-aqua)",
                    letterSpacing: "0.18em", marginBottom: 10,
                  }}>
                    CORE 0{i + 1}
                  </div>
                  <h4 style={{ fontFamily: "var(--f-serif)", fontSize: 21, fontWeight: 400,
                                margin: "0 0 10px", letterSpacing: "-0.01em" }}>
                    {c.k}
                  </h4>
                  <p style={{ fontSize: 14, color: "var(--c-muted)", lineHeight: 1.7, margin: 0 }}>
                    {c.b}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Detail 3 */}
      <section style={{ padding: "100px 0", background: "var(--c-mist)" }}>
        <div className="shell">
          <SectionHead index="02" eyebrow={lang === "zh" ? "深化服務" : "Deeper Services"}
                       title={p.detailTitle} />
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0,
            borderTop: "1px solid var(--c-line)", borderBottom: "1px solid var(--c-line)",
          }}>
            {p.detail.map((d, i) => (
              <div key={i} style={{
                padding: "36px 22px 36px 0",
                paddingLeft: i > 0 ? 22 : 0,
                borderRight: i < p.detail.length - 1 ? "1px solid var(--c-line)" : "none",
              }}>
                <h4 style={{ fontFamily: "var(--f-serif)", fontSize: 20, fontWeight: 400,
                              margin: "0 0 10px", letterSpacing: "-0.01em", color: "var(--c-deep)" }}>
                  {d.k}
                </h4>
                <p style={{ fontSize: 13.5, color: "var(--c-muted)", lineHeight: 1.7, margin: 0 }}>
                  {d.b}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* BIM with feature image */}
      <section style={{ padding: "100px 0 80px" }}>
        <div className="shell" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 56, alignItems: "center" }}>
          <RemoteImage src={PM_BIM_IMG} alt="BIM" ratio="4/3" />
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>03 — BIM</div>
            <h2 className="h-section" style={{ fontSize: "clamp(22px, 2.4vw, 34px)", marginBottom: 28 }}>
              {p.bimTitle}
            </h2>
            <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
              {p.bim.map((b, i) => (
                <div key={i} style={{
                  padding: "20px 0",
                  borderTop: "1px solid var(--c-line)",
                  borderBottom: i === p.bim.length - 1 ? "1px solid var(--c-line)" : "none",
                  display: "grid", gridTemplateColumns: "60px 1fr", alignItems: "center", gap: 20,
                }}>
                  <span style={{ fontFamily: "var(--f-mono)", fontSize: 12, color: "var(--c-aqua)",
                                  letterSpacing: "0.15em" }}>
                    0{i + 1}
                  </span>
                  <span style={{ fontFamily: "var(--f-serif)", fontSize: 20, color: "var(--c-ink)",
                                  letterSpacing: "-0.01em" }}>
                    {b}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Vision */}
      <section style={{ padding: "80px 0", background: "var(--c-mist)" }}>
        <div className="shell">
          <SectionHead index="04" eyebrow={lang === "zh" ? "我們的願景" : "Vision"}
                       title={p.visionTitle} />
          <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
            {p.vision.map((v, i) => (
              <div key={i} style={{
                padding: "22px 0", borderTop: "1px solid var(--c-line)",
                borderBottom: i === p.vision.length - 1 ? "1px solid var(--c-line)" : "none",
                display: "grid", gridTemplateColumns: "60px 1fr", alignItems: "center", gap: 24,
              }}>
                <span style={{ fontFamily: "var(--f-mono)", fontSize: 13, color: "var(--c-aqua)",
                                letterSpacing: "0.15em" }}>
                  0{i + 1}
                </span>
                <p style={{ fontFamily: "var(--f-serif)", fontSize: "clamp(17px, 1.7vw, 22px)",
                             color: "var(--c-ink)", lineHeight: 1.5, margin: 0, letterSpacing: "-0.01em" }}>
                  {v}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Cases with images */}
      <section style={{ padding: "100px 0" }}>
        <div className="shell">
          <SectionHead index="05" eyebrow={lang === "zh" ? "服務案例" : "Cases"}
                       title={p.casesTitle} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20 }}>
            {p.cases.map((cs, i) => (
              <div key={i} className="card" style={{ padding: 0, overflow: "hidden",
                                                      display: "flex", flexDirection: "column" }}>
                <RemoteImage src={PM_CASE_IMGS[i]} alt={cs} ratio="4/3" style={{ borderRadius: 0 }} />
                <div style={{ padding: "18px 20px 22px" }}>
                  <div style={{ fontFamily: "var(--f-mono)", fontSize: 10.5, color: "var(--c-aqua)",
                                 letterSpacing: "0.15em", marginBottom: 8 }}>
                    0{i + 1}
                  </div>
                  <div style={{ fontFamily: "var(--f-serif)", fontSize: 16, color: "var(--c-ink)",
                                 letterSpacing: "-0.005em", lineHeight: 1.35 }}>
                    {cs}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <ClosingCTA title={t.closingTitle} primaryLabel={t.closingCta} />
    </div>
  );
}

window.PmPage = PmPage;