/* global React, Ic, PageHero, useT */
const { useState } = React;

// Equipment data — model/spec text kept language-neutral; maker label is translated.
const SECTION_DEFS = [
  {
    id: "fast-mct",
    labelKey: "sec_fastmct",
    rows: [
      { model: "Hi-Mold 450", makerKey: "maker_wia",   qty: 9, table: "850 × 500",   rpm: "40,000", img: "assets/mct-himold450.webp" },
      { model: "MB-46VA",     makerKey: "maker_okuma", qty: 1, table: "760 × 460",   rpm: "40,000", img: "assets/mct-mb46.webp", imgFit: "okuma" },
    ],
  },
  {
    id: "mct",
    labelKey: "sec_mct",
    rows: [
      { model: "Hi-V560M",  makerKey: "maker_wia",    qty: 1, table: "1,250 × 560",   rpm: "24,000", img: "assets/mct-hi-v560m.webp" },
      { model: "Hi-V450M",  makerKey: "maker_wia",    qty: 1, table: "850 × 500",     rpm: "24,000", img: "assets/mct-hi-v450m.webp" },
      { model: "DNM-5700",  makerKey: "maker_doosan", qty: 1, table: "1,300 × 570",   rpm: "12,000", img: "assets/mct-dnm5700.webp" },
      { model: "F660M",     makerKey: "maker_wia",    qty: 1, table: "1,600 × 660",   rpm: "10,000", img: "assets/mct-f660.webp" },
      { model: "KF5600",    makerKey: "maker_wia",    qty: 1, table: "1,250 × 560",   rpm: "15,000", img: "assets/mct-kf5600.webp" },
      { model: "KF5600",    makerKey: "maker_wia",    qty: 1, table: "1,250 × 560",   rpm: "15,000", img: "assets/mct-kf5600-b.webp" },
      { model: "F510B",     makerKey: "maker_wia",    qty: 1, table: "1,200 × 510",   rpm: "12,000", img: "assets/mct-f510.webp" },
      { model: "VX660M",    makerKey: "maker_wia",    qty: 1, table: "1,600 × 660",   rpm: "10,000", img: "assets/mct-vx660m.webp" },
      { model: "VX510M",    makerKey: "maker_wia",    qty: 1, table: "1,200 × 500",   rpm: "10,000", img: "assets/mct-vx510m.webp" },
      { model: "VX510M",    makerKey: "maker_wia",    qty: 1, table: "1,200 × 500",   rpm: "10,000", img: "assets/mct-vx510m-b.webp" },
    ],
  },
  {
    id: "lathe",
    labelKey: "sec_lathe",
    rows: [
      { model: "PUMA-4100B", makerKey: "maker_doosan", qty: 2, table: "1,042 × 550 · 15 inch", img: "assets/cnc-puma4100b.webp" },
      { model: "NARA-5010",  makerKey: "maker_namsun", qty: 5, table: "Ø500",                  img: "assets/lathe-nara.webp" },
    ],
  },
  {
    id: "etc",
    labelKey: "sec_etc",
    rows: [
      { modelKey: "laser_model", makerKey: "laser_maker", qty: 1, table: "—", img: "assets/laser-table-fiber.webp" },
    ],
  },
];

const sumQty = (rows) => rows.reduce((s, r) => s + r.qty, 0);
const MACHINING_TOTAL = SECTION_DEFS.reduce((s, sec) => s + sumQty(sec.rows), 0);
const MEASUREMENT_TOTAL = 8;

// ── Machining panel ──────────────────────────────────────────
function MachiningPanel() {
  const t = useT();
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.08 });
    document.querySelectorAll(".eq-card--reveal, .eq-section__head.fade-up").forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <div className="tab-panel">
      <div className="tab-panel__head">
        <h3>{t("equipment.machining_title").replace("{n}", MACHINING_TOTAL)}</h3>
        <p style={{ width: "800px" }}>{t("equipment.machining_subtitle")}</p>
      </div>

      {SECTION_DEFS.map((sec) =>
        <div key={sec.id} className="eq-section">
          <div className="eq-section__head fade-up">
            <span className="eq-section__label">{t(`equipment.${sec.labelKey}`)}</span>
            <span className="eq-section__count">{sumQty(sec.rows)}<small>{t("equipment.qty_suffix")}</small></span>
          </div>
          <div className="eq-cards">
            {sec.rows.map((r, i) =>
              <div key={`${sec.id}-${i}`} className={`eq-card eq-card--reveal`} style={{ "--delay": (i * 70) + "ms" }}>
                <div className={`eq-card__img ${r.imgFit ? "eq-card__img--" + r.imgFit : ""}`}>
                  {r.img
                    ? <img src={r.img} alt={r.model || (r.modelKey ? t(`equipment.${r.modelKey}`) : "")} loading="lazy" />
                    : <div className="eq-card__img-empty"><span>{(r.model || "").split(/[ -]/)[0]}</span></div>
                  }
                  <span className="eq-card__qty">{r.qty}<small>{t("equipment.qty_suffix")}</small></span>
                </div>
                <div className="eq-card__body">
                  <h4 className="eq-card__model">{r.model || t(`equipment.${r.modelKey}`)}</h4>
                  <p className="eq-card__maker">{t(`equipment.${r.makerKey}`)}</p>
                  <div className="eq-card__spec">
                    <span className="lbl">{t("equipment.lbl_table")}</span>
                    <span className="val">{r.table}</span>
                    {r.rpm && <>
                      <span className="lbl">{t("equipment.lbl_rpm")}</span>
                      <span className="val">{r.rpm}</span>
                    </>}
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      )}
    </div>);

}

// ── Measurement panel ────────────────────────────────────────
function MeasurementPanel() {
  const t = useT();
  return (
    <div className="tab-panel">
      <div className="tab-panel__head">
        <h3>{t("equipment_measurement.title")}</h3>
        <p>{t("equipment_measurement.subtitle").split("\n").map((line, i, arr) => (
          <React.Fragment key={i}>{line}{i < arr.length - 1 && <br />}</React.Fragment>
        ))}</p>
      </div>
      <div className="measure">
        <div className="measure__video">
          <video src="assets/THE_MYONG_vision.mp4"
          autoPlay
          muted
          loop
          playsInline
          preload="auto">
          </video>
        </div>
        <div>
          <p style={{ font: "500 17px/1.7 var(--font-sans)", color: "var(--semantic-label-alternative)", margin: "0" }}>{t("equipment_measurement.body")}</p>
          <div className="measure__spec">
            <span className="lbl">{t("equipment_measurement.lbl_model")}</span>
            <span className="val">{t("equipment_measurement.val_model")} <span style={{ color: "var(--semantic-label-alternative)", fontWeight: 500 }}>{t("equipment_measurement.val_model_maker")}</span></span>
            <span className="lbl">{t("equipment_measurement.lbl_range")}</span>
            <span className="val">{t("equipment_measurement.val_range")}</span>
            <span className="lbl">{t("equipment_measurement.lbl_resolution")}</span>
            <span className="val">{t("equipment_measurement.val_resolution")}</span>
          </div>
        </div>
      </div>

      <div className="measure-extras">
        <div className="measure-extra">
          <div className="measure-extra__img">
            <img src="assets/electron-microscope.webp" alt={t("equipment_measurement.extra1_title")} loading="lazy" decoding="async" />
          </div>
          <div className="measure-extra__body">
            <span className="measure-extra__count">1{t("equipment.qty_suffix_eng")}</span>
            <h4>{t("equipment_measurement.extra1_title")}</h4>
            <p>{t("equipment_measurement.extra1_desc")}</p>
          </div>
        </div>
        <div className="measure-extra">
          <div className="measure-extra__img">
            <img src="assets/peek-microscope.webp" alt={t("equipment_measurement.extra2_title")} loading="lazy" decoding="async" />
          </div>
          <div className="measure-extra__body">
            <span className="measure-extra__count">6{t("equipment.qty_suffix_eng")}</span>
            <h4>{t("equipment_measurement.extra2_title")}</h4>
            <p>{t("equipment_measurement.extra2_desc")}</p>
          </div>
        </div>
      </div>
    </div>);

}

// ── AI Roadmap ───────────────────────────────────────────────
const ROADMAP_DEFS = [
  { num: "01", key: "r1" },
  { num: "02", key: "r2" },
  { num: "03", key: "r3" },
  { num: "04", key: "r4" },
];

function RoadmapSection() {
  const t = useT();
  return (
    <section className="psection psection--alt" data-screen-label="02 AI Roadmap">
      <div className="container">
        <div className="psection__head">
          <span className="eyebrow">{t("equipment_roadmap.eyebrow")}</span>
          <h2>{t("equipment_roadmap.title")}</h2>
          <p>{t("equipment_roadmap.subtitle")}</p>
        </div>
        <div className="roadmap__list">
          {ROADMAP_DEFS.map((r) =>
          <div key={r.num} className="roadmap__item">
              <span className="roadmap__num">{r.num}</span>
              <h4 className="roadmap__title">{t(`equipment_roadmap.${r.key}_title`)}</h4>
              <p className="roadmap__desc">{t(`equipment_roadmap.${r.key}_desc`)}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ── Combined Equipment section ───────────────────────────────
function EquipmentSection() {
  const t = useT();
  const [tab, setTab] = useState("machining");
  return (
    <>
      <section className="psection" data-screen-label="01 Equipment">
        <div className="container" style={{ width: "1280px", opacity: "1" }}>
          <div className="tabs" role="tablist">
            <button
              role="tab"
              aria-selected={tab === "machining"}
              className={`tabs__btn ${tab === "machining" ? "active" : ""}`}
              onClick={() => setTab("machining")}>
              {t("equipment.tab_machining")}
              <span className="count">{MACHINING_TOTAL}{t("equipment.qty_suffix")}</span>
            </button>
            <button
              role="tab"
              aria-selected={tab === "measurement"}
              className={`tabs__btn ${tab === "measurement" ? "active" : ""}`}
              onClick={() => setTab("measurement")}>
              {t("equipment.tab_measurement")}
              <span className="count">{MEASUREMENT_TOTAL}{t("equipment.qty_suffix")}</span>
            </button>
          </div>
          {tab === "machining" ? <MachiningPanel key="m" /> : <MeasurementPanel key="me" />}
        </div>
      </section>
      {tab === "measurement" && <RoadmapSection />}
    </>);

}

// ── CTA ──────────────────────────────────────────────────────
function EquipmentCTA() {
  const t = useT();
  return (
    <section className="finalcta" data-screen-label="03 CTA">
      <div className="container">
        <div className="finalcta__inner">
          <div>
            <h2 style={{ fontSize: "55px" }}>{t("equipment_cta.title_a")}<br />{t("equipment_cta.title_b")}</h2>
            <p>{t("equipment_cta.body")}</p>
          </div>
          <div className="finalcta__actions">
            <a href="mailto:tm@themyong.co.kr" className="btn btn--on-dark"><Ic name="mail" size={18} /> {t("nav.cta_short")}</a>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { EquipmentSection, EquipmentCTA });