// 企業合作 page
const COLLAB_HERO_IMG = `${IMG}/2021/07/pexels-egor-kamelev-1757247-1022x1024.jpg`;

function CollabPage({ t, lang, variant, setPage }) {
  const c = t.collab;
  return (
    <div className="page-enter">
      <PageHero
        eyebrow={c.eyebrow}
        title={c.title}
        tagline={c.tagline}
        lead={c.lead}
        gradient="80% 60%"
        image={{ src: COLLAB_HERO_IMG, alt: c.title, ratio: "1/1" }}
      >
        <p style={{
          marginTop: 18, fontSize: 13, color: "var(--c-deep)",
          background: "var(--c-mist)", padding: "10px 16px", borderRadius: 999,
          display: "inline-block",
        }}>
          {c.note}
        </p>
      </PageHero>

      {/* Process */}
      <section style={{ padding: "80px 0 120px" }}>
        <div className="shell">
          <SectionHead index="01" eyebrow={lang === "zh" ? "合作流程" : "Onboarding"}
                       title={c.processTitle} />

          <div style={{ position: "relative", marginTop: 32 }}>
            <div style={{
              position: "absolute", top: 26, left: "5%", right: "5%",
              height: 1, background: "var(--c-aqua)", opacity: 0.4,
            }} />
            <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12, position: "relative" }}>
              {c.process.map((step, i) => (
                <div key={i} style={{ textAlign: "center", padding: "0 8px" }}>
                  <div style={{
                    width: 50, height: 50, borderRadius: 999,
                    background: "var(--c-bg)",
                    border: "2px solid var(--c-aqua)",
                    margin: "0 auto 18px",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    fontFamily: "var(--f-mono)", fontSize: 13, color: "var(--c-deep)",
                    letterSpacing: "0.1em", fontWeight: 500,
                    position: "relative", zIndex: 1,
                  }}>
                    {step.n}
                  </div>
                  <h4 style={{ fontFamily: "var(--f-serif)", fontSize: 17, fontWeight: 400,
                                margin: "0 0 8px", letterSpacing: "-0.01em" }}>
                    {step.k}
                  </h4>
                  <p style={{ fontSize: 12.5, color: "var(--c-muted)", lineHeight: 1.6, margin: 0 }}>
                    {step.b}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <ClosingCTA title={c.ctaTitle} body={c.ctaBody}
                  primaryLabel={lang === "zh" ? "聯絡合作專員" : "Contact partnerships"} />
    </div>
  );
}

window.CollabPage = CollabPage;