// 氣流顧問 page
const FIELD_IMGS = [
  `${IMG}/2021/08/pexels-daniel-smyth-8865184-1-1024x683.jpg`,
  `${IMG}/2021/07/Infrastructure-Development.png`,
  `${IMG}/2021/07/pexels-soo-ann-woon-3265437-1024x768.jpg`,
  `${IMG}/2021/07/pexels-pixabay-159358-scaled.jpg`,
];

const CASE_IMGS = [
  { sim: `${IMG}/2021/07/20210717-081528-001.png`, scene: `${IMG}/2021/08/pexels-daniel-smyth-8865184-1-1024x683.jpg` },
  { sim: `${IMG}/2021/07/20210717-081934-001.png`, scene: `${IMG}/2021/08/pexels-kateryna-babaieva-2760242-1024x683.jpg` },
  { sim: `${IMG}/2021/07/20210717-082155-001.png`, scene: `${IMG}/2021/08/20210817-040702-001.png` },
];

function ConsultingPage({ t, lang, variant, setPage }) {
  const c = t.consulting;
  return (
    <div className="page-enter">
      <PageHero eyebrow={c.eyebrow} title={c.title} lead={c.lead} gradient="80% 30%"
                image={{ src: `${IMG}/2021/07/2-People-collaborating.png`, alt: c.eyebrow, ratio: "4/5" }} />

      {/* Principles */}
      <section style={{ padding: "60px 0 100px" }}>
        <div className="shell">
          <SectionHead index="01" eyebrow={lang === "zh" ? "指導原則" : "Principles"}
                       title={c.principlesTitle} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
            {c.principles.map((p, i) => (
              <div key={i} className="card" style={{ padding: 28 }}>
                <div style={{
                  fontFamily: "var(--f-serif)", fontSize: 42, color: "var(--c-aqua)",
                  letterSpacing: "-0.03em", marginBottom: 14, lineHeight: 1,
                }}>
                  0{i + 1}
                </div>
                <h4 style={{ fontFamily: "var(--f-serif)", fontSize: 22, fontWeight: 400,
                              margin: "0 0 12px", letterSpacing: "-0.01em" }}>
                  {p.k}
                </h4>
                <p style={{ fontSize: 14, color: "var(--c-muted)", lineHeight: 1.7, margin: 0 }}>
                  {p.b}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Fields with images */}
      <section style={{ padding: "100px 0", background: "var(--c-mist)" }}>
        <div className="shell">
          <SectionHead index="02" eyebrow={lang === "zh" ? "應用場域" : "Fields"}
                       title={c.fieldsTitle} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 20 }}>
            {c.fields.map((f, i) => (
              <div key={i} className="card" style={{
                padding: 0, overflow: "hidden",
                display: "grid", gridTemplateColumns: "200px 1fr",
              }}>
                <RemoteImage src={FIELD_IMGS[i]} alt={f.k} ratio="auto"
                              style={{ borderRadius: 0, height: "100%", aspectRatio: "auto" }} />
                <div style={{ padding: 28, display: "flex", flexDirection: "column", justifyContent: "center" }}>
                  <div style={{
                    fontFamily: "var(--f-mono)", fontSize: 10.5,
                    color: "var(--c-aqua)", letterSpacing: "0.18em", marginBottom: 10,
                  }}>
                    0{i + 1} / 04
                  </div>
                  <h4 style={{ fontFamily: "var(--f-serif)", fontSize: 22, fontWeight: 400,
                                margin: "0 0 10px", letterSpacing: "-0.01em" }}>
                    {f.k}
                  </h4>
                  <p style={{ fontSize: 13.5, color: "var(--c-muted)", lineHeight: 1.7, margin: 0 }}>
                    {f.b}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Advantages */}
      <section style={{ padding: "100px 0 80px" }}>
        <div className="shell">
          <SectionHead index="03" eyebrow={lang === "zh" ? "技術優勢" : "Advantages"}
                       title={c.advantagesTitle} />
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0,
            borderTop: "1px solid var(--c-line)", borderBottom: "1px solid var(--c-line)",
          }}>
            {c.advantages.map((a, i) => (
              <div key={i} style={{
                padding: "36px 22px 36px 0",
                paddingLeft: i > 0 ? 22 : 0,
                borderRight: i < c.advantages.length - 1 ? "1px solid var(--c-line)" : "none",
              }}>
                <h4 style={{ fontFamily: "var(--f-serif)", fontSize: 21, fontWeight: 400,
                              margin: "0 0 12px", letterSpacing: "-0.01em", color: "var(--c-deep)" }}>
                  {a.k}
                </h4>
                <p style={{ fontSize: 13.5, color: "var(--c-muted)", lineHeight: 1.7, margin: 0 }}>
                  {a.b}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Cases with CFD + scene images */}
      <section style={{ padding: "60px 0 120px" }}>
        <div className="shell">
          <SectionHead index="04" eyebrow={lang === "zh" ? "詳細應用案例" : "Application Cases"}
                       title={c.casesTitle} />
          <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
            {c.cases.map((cs, i) => (
              <div key={i} className="card" style={{ padding: 0, overflow: "hidden",
                                                       display: "grid", gridTemplateColumns: "1fr 1fr" }}>
                <div style={{ display: "grid", gridTemplateRows: "1fr 1fr" }}>
                  <RemoteImage src={CASE_IMGS[i].scene} alt={cs.field} ratio="auto"
                                style={{ borderRadius: 0, aspectRatio: "auto", height: "100%" }} />
                  <RemoteImage src={CASE_IMGS[i].sim} alt={`${cs.field} CFD`} ratio="auto"
                                style={{ borderRadius: 0, aspectRatio: "auto", height: "100%" }} />
                </div>
                <div style={{ padding: 32 }}>
                  <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, color: "var(--c-aqua)",
                                 letterSpacing: "0.15em", marginBottom: 10 }}>
                    CASE 0{i + 1}
                  </div>
                  <h4 style={{ fontFamily: "var(--f-serif)", fontSize: 24, fontWeight: 400,
                                margin: "0 0 18px", letterSpacing: "-0.01em" }}>
                    {cs.field}
                  </h4>
                  <div className="eyebrow" style={{ marginBottom: 8 }}>
                    {lang === "zh" ? "產業挑戰" : "Challenge"}
                  </div>
                  <p style={{ fontSize: 13.5, color: "var(--c-muted)", lineHeight: 1.75, margin: "0 0 18px" }}>
                    {cs.challenge}
                  </p>
                  <div className="eyebrow" style={{ marginBottom: 8, color: "var(--c-deep)" }}>
                    {lang === "zh" ? "氣流設計優勢" : "Airflow Advantage"}
                  </div>
                  <p style={{ fontSize: 13.5, color: "var(--c-ink)", lineHeight: 1.75, margin: 0 }}>
                    {cs.advantage}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

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

window.ConsultingPage = ConsultingPage;