/* 慶宜僱傭代理 — Services page */
function ServicesPage({ setPage, t }) {
  const S = t.svcPage;
  const [route, setRoute] = React.useState("overseas");
  const r = S.routes[route];
  const noteAmt = (a) => !a.includes("HK$");
  return (
    <main>
      {/* page header (text + image) */}
      <section className="section" style={{ paddingBottom: 0 }}>
        <div className="container">
          <div className="feature">
            <div>
              <span className="eyebrow">{S.eyebrow}</span>
              <h2 className="section-title">{S.title}</h2>
              <p className="section-lede">{S.lede}</p>
              <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 22 }}>
                <Badge tone="brand">{S.badges[0]}</Badge>
                <Badge tone="gold">{S.badges[1]}</Badge>
                <Badge tone="success" dot>{S.badges[2]}</Badge>
              </div>
            </div>
            <div className="feature__media">
              <Photo src={(window.HY_IMG && window.HY_IMG.services) || "../../assets/photos/services-cleaning.png"} alt={S.headerImg} style={{ height: 330 }} />
            </div>
          </div>
        </div>
      </section>

      {/* full service grid */}
      <section className="section sec-paper">
        <div className="container">
          <div className="svc-grid">
            {t.services.map((s, i) => (
              <article className="svc-card" key={i}>
                <span className={"icotile" + tileMod(i)}><Icon n={SVC_META[i].i} /></span>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
                <div className="foot"><Badge tone={SVC_META[i].tone}>{s.tag}</Badge></div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* hiring routes */}
      <section className="section">
        <div className="container">
          <SectionHead eyebrow={S.routesEyebrow} title={S.routesTitle} />
          <div className="tabs" style={{ marginTop: 28 }}>
            {Object.keys(S.routes).map((k) => (
              <button key={k} className={"tab" + (route === k ? " active" : "")} onClick={() => setRoute(k)}>{S.routes[k].label}</button>
            ))}
          </div>
          <div className="routes-grid">
            <div className="steps-card">
              {r.steps.map((s, i) => (
                <div className="step" key={i}>
                  <span className="step__n">{i + 1}</span>
                  <div className="step__b"><h4>{s[0]}</h4><p>{s[1]}</p></div>
                </div>
              ))}
            </div>
            <div className="route-info">
              <h4>{r.label} — {S.important}</h4>
              <p>{r.note}</p>
              <div className="route-time">
                <Icon n="clock" style={{ width: 22, height: 22, color: "var(--c-or)" }} />
                <div><div className="rt-n">{r.time}</div><div className="rt-l">{S.estTime}</div></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* fees */}
      <section className="section sec-paper">
        <div className="container">
          <SectionHead eyebrow={S.feesEyebrow} title={S.feesTitle} lede={S.feesLede} />
          <div className="fee-grid">
            <div className="fee-table">
              <div className="fee-table__h"><h3>{S.oneTime}</h3><span className="tag2">{S.oneTimeTag}</span></div>
              {S.feesProcessing.map((f, i) => (
                <div className="fee-row" key={i}><span className="item">{f[0]}</span><span className={"amt" + (noteAmt(f[1]) ? " note" : "")}>{f[1]}</span></div>
              ))}
            </div>
            <div className="fee-table">
              <div className="fee-table__h"><h3>{S.statutory}</h3><span className="tag2">{S.statutoryTag}</span></div>
              {S.feesStatutoryRows.map((f, i) => (
                <div className="fee-row" key={i}><span className="item">{f[0]}</span><span className={"amt" + (noteAmt(f[1]) ? " note" : "")}>{f[1]}</span></div>
              ))}
            </div>
          </div>
          <div className="disclaimer" dangerouslySetInnerHTML={{ __html: S.disclaimer }} />
        </div>
      </section>

      <CTABand setPage={setPage} t={t} />
    </main>
  );
}
window.ServicesPage = ServicesPage;