// company.jsx — Company introduction page.

function Company({ go }) {
  const t = useT();

  const STATS = [
    { num: "150+", key: "co.stat_equip" },
    { num: "20+",  key: "co.stat_exp"   },
    { num: "120+", key: "co.stat_regions"},
    { num: "6",    key: "co.stat_series" },
  ];

  const PHOTOS = [
    { key: "co.photo1", icon: "standard"   },
    { key: "co.photo2", icon: "heavy"      },
    { key: "co.photo3", icon: "stainless"  },
  ];

  return (
    <main className="co-page">

      {/* ── Hero banner ── */}
      <div className="co-hero">
        <div className="wrap-wide co-hero-inner">
          <div className="co-banner">
            <div className="co-banner-zh">公司简介</div>
            <div className="co-banner-en">Brief  Introduction</div>
          </div>
        </div>
      </div>

      <div className="wrap-wide co-body-wrap">

        {/* ── Photo grid ── */}
        <div className="co-photos">
          {PHOTOS.map((ph) => (
            <div key={ph.key} className="co-photo">
              <ClampArt kind={ph.icon} />
              <div className="co-photo-label">{t(ph.key)}</div>
            </div>
          ))}
        </div>

        {/* ── Stats strip ── */}
        <div className="co-stats">
          {STATS.map((s) => (
            <div key={s.key} className="co-stat">
              <span className="co-stat-num">{s.num}</span>
              <span className="co-stat-lbl">{t(s.key)}</span>
            </div>
          ))}
        </div>

        {/* ── Body text ── */}
        <div className="co-text">
          <p>{t("co.p1")}</p>
          <p>{t("co.p2")}</p>
          <p>{t("co.p3")}</p>
          <p>{t("co.p4")}</p>
        </div>

      </div>
    </main>
  );
}

Object.assign(window, { Company });