/* global React, Ic, PageHero, useT */

// ── About: Greeting ──────────────────────────────────────────
function AboutGreeting() {
  const t = useT();
  return (
    <section className="psection" data-screen-label="01 Greeting">
      <div className="container">
        <div className="psection__head">
          <span className="eyebrow">{t("about_greeting.eyebrow")}</span>
          <h2>{t("about_greeting.title")}</h2>
        </div>
        <div className="greeting">
          <div className="greeting__body">
            <h3 className="greeting__title">{t("about_greeting.heading").split("\n").map((line, i, arr) => (
              <React.Fragment key={i}>{line}{i < arr.length - 1 && <br />}</React.Fragment>
            ))}</h3>
            <p>{t("about_greeting.p1")}</p>
            <p>{t("about_greeting.p2")}</p>
            <p>{t("about_greeting.p3")}</p>
            <div className="greeting__sign">
              {t("about_greeting.sign")}
            </div>
          </div>
          <div className="greeting__visual">
            <image-slot id="about-greeting-photo" src="assets/회사전면사진.webp" shape="rounded" radius="24" placeholder={t("about_greeting.image_placeholder")}></image-slot>
          </div>
        </div>
      </div>
    </section>);

}

// ── About: Vision + Core Values ──────────────────────────────
const VALUE_DEFS = [
  { num: "01", key: "v1" },
  { num: "02", key: "v2" },
  { num: "03", key: "v3" },
  { num: "04", key: "v4" },
];

function AboutVision() {
  const t = useT();
  const ringRef = React.useRef(null);
  React.useEffect(() => {
    if (!ringRef.current) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        e.target.classList.add("in");
        io.disconnect();
      }
    }, { threshold: 0.25 });
    io.observe(ringRef.current);
    return () => io.disconnect();
  }, []);
  return (
    <section className="psection psection--alt" data-screen-label="02 Vision">
      <div className="container">
        <div className="psection__head">
          <span className="eyebrow">{t("about_vision.eyebrow")}</span>
          <h2>{t("about_vision.title")}</h2>
        </div>
        <p className="vision__lead" style={{ width: "920px", fontWeight: "400", opacity: "0.9", fontSize: "31px", height: "100px" }}>
          {t("about_vision.lead_a")}<b>{t("about_vision.lead_emph")}</b>{t("about_vision.lead_b")}<br />
          {t("about_vision.lead_2")}
        </p>
        <div className="values-orbit">
          <div className="values-orbit__ring-wrap">
            <svg ref={ringRef} viewBox="0 0 760 540" className="values-orbit__ring" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
              <circle cx="380" cy="270" r="127.3" fill="none" stroke="currentColor" strokeWidth="2.5"
                      pathLength="100" strokeDasharray="100" strokeDashoffset="100" />
              <g fill="currentColor" className="values-orbit__arrows">
                <path d="M 375 143 L 385 143 L 380 138 Z" />
                <path d="M 503 275 L 503 265 L 508 270 Z" />
                <path d="M 385 397 L 375 397 L 380 402 Z" />
                <path d="M 257 265 L 257 275 L 252 270 Z" />
              </g>
            </svg>
          </div>
          <div className="values-orbit__center" aria-hidden="true">
            <span>{t("about_vision.center")}</span>
          </div>
          {VALUE_DEFS.map((v, i) =>
            <div key={v.num} className={`value-orbit value-orbit--pos-${i + 1}`}>
              <div className={`value-orbit__inner fade-up delay-${i + 1}`}>
                <h4>{t(`about_vision.${v.key}_title`)}</h4>
                <p>{t(`about_vision.${v.key}_desc`)}</p>
              </div>
              <span className={`value-orbit__badge value-orbit__badge--pos-${i + 1}`}>{v.num}</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ── About: History timeline (scroll-fill) ────────────────────
const HISTORY_DEFS = [
  { year: "2008", keys: ["e_2008_a", "e_2008_b"] },
  { year: "2011", keys: ["e_2011"] },
  { year: "2017", keys: ["e_2017"] },
  { year: "2018", keys: ["e_2018"] },
  { year: "2019", keys: ["e_2019"] },
  { year: "2022", keys: ["e_2022"] },
  { year: "2023", keys: ["e_2023"] },
  { year: "2024", keys: ["e_2024"] },
  { year: "2026", keys: ["e_2026_a", "e_2026_b"] },
];

function AboutHistory() {
  const t = useT();
  const wrapRef = React.useRef(null);
  const fillRef = React.useRef(null);
  const rowRefs = React.useRef([]);

  React.useEffect(() => {
    const onScroll = () => {
      const wrap = wrapRef.current;
      const fill = fillRef.current;
      if (!wrap || !fill) return;
      const rect = wrap.getBoundingClientRect();
      const triggerY = window.innerHeight * 0.5;
      const total = rect.height;
      const p = Math.max(0, Math.min(1, (triggerY - rect.top) / total));
      fill.style.height = p * total + "px";
      rowRefs.current.forEach((row) => {
        if (!row) return;
        const dot = row.querySelector(".history-tl__dot");
        if (!dot) return;
        const dotRect = dot.getBoundingClientRect();
        const dotY = dotRect.top + dotRect.height / 2;
        if (dotY < triggerY) row.classList.add("active");else
        row.classList.remove("active");
      });
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    onScroll();
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
    };
  }, []);

  return (
    <section className="psection psection--dark history-tl" id="history" data-screen-label="03 History">
      <div className="container">
        <div className="psection__head">
          <span className="eyebrow">{t("about_history.eyebrow")}</span>
          <h2>{t("about_history.title")}</h2>
          <p>{t("about_history.subtitle")}</p>
        </div>
        <div className="history-tl__wrap" ref={wrapRef}>
          <div className="history-tl__line">
            <div className="history-tl__fill" ref={fillRef}></div>
          </div>
          {HISTORY_DEFS.map((h, i) =>
          <div key={i} ref={(el) => rowRefs.current[i] = el} className="history-tl__row">
              <div className="history-tl__year">{h.year}</div>
              <div className="history-tl__dot-col">
                <span className="history-tl__dot"></span>
              </div>
              <ul className="history-tl__events">
                {h.keys.map((k, j) => <li key={j}>{t(`about_history.${k}`)}</li>)}
              </ul>
            </div>
          )}
          <div className="history-tl__chev" aria-hidden="true">
            <svg width="32" height="20" viewBox="0 0 32 20" fill="none">
              <path d="M4 4 L16 12 L28 4" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
              <path d="M4 12 L16 20 L28 12" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>
        </div>
      </div>
    </section>);

}

// ── About: Org chart ─────────────────────────────────────────
const TEAM_DEFS = [
  { key: "t1" },
  { key: "t2" },
  { key: "t3" },
  { key: "t4" },
  { key: "t5" },
];

function AboutOrg() {
  const t = useT();
  return (
    <section className="psection psection--dark orgchart-v2" id="org" data-screen-label="04 Org">
      <div className="container">
        <div className="psection__head">
          <span className="eyebrow">{t("about_org.eyebrow")}</span>
          <h2>{t("about_org.title_a")}<br />{t("about_org.title_b")}</h2>
        </div>
        <div className="orgchart-v2__wrap">
          <div className="orgchart-v2__ceo fade-up">
            <div className="orgchart-v2__ceo-glow" aria-hidden="true"></div>
            <div className="orgchart-v2__ceo-inner">
              <span className="orgchart-v2__ceo-label">{t("about_org.ceo_label")}</span>
            </div>
          </div>
          <div className="orgchart-v2__lines fade-up delay-1" aria-hidden="true">
            <svg viewBox="0 0 1000 80" preserveAspectRatio="none">
              <line x1="500" y1="0" x2="500" y2="40" stroke="rgba(255,255,255,0.25)" strokeWidth="1.5" />
              <line x1="100" y1="40" x2="900" y2="40" stroke="rgba(255,255,255,0.25)" strokeWidth="1.5" />
              <line x1="100" y1="40" x2="100" y2="80" stroke="rgba(255,255,255,0.25)" strokeWidth="1.5" />
              <line x1="300" y1="40" x2="300" y2="80" stroke="rgba(255,255,255,0.25)" strokeWidth="1.5" />
              <line x1="500" y1="40" x2="500" y2="80" stroke="rgba(255,255,255,0.25)" strokeWidth="1.5" />
              <line x1="700" y1="40" x2="700" y2="80" stroke="rgba(255,255,255,0.25)" strokeWidth="1.5" />
              <line x1="900" y1="40" x2="900" y2="80" stroke="rgba(255,255,255,0.25)" strokeWidth="1.5" />
            </svg>
          </div>
          <div className="orgchart-v2__teams">
            {TEAM_DEFS.map((team, i) => (
              <div key={team.key} className={`orgchart-v2__team fade-up delay-${i + 1}`}>
                <span className="orgchart-v2__team-en">{t(`about_org.${team.key}_en`)}</span>
                <h4 className="orgchart-v2__team-ko">{t(`about_org.${team.key}_ko`)}</h4>
                <p className="orgchart-v2__team-rnr">{t(`about_org.${team.key}_rnr`)}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── About: Certifications ────────────────────────────────────
const CERT_DEFS = [
  { id: "iso9001", key: "c1", img: "assets/인증서/iso9001.webp" },
  { id: "t3",      key: "c2", img: "assets/인증서/기술역량인증.webp" },
  { id: "patent",  key: "c3", img: "assets/인증서/특허.webp" },
  { id: "clean",   key: "c4", img: "assets/인증서/clean 사업장.webp" },
];

function AboutCerts() {
  const t = useT();
  return (
    <section className="psection" id="certs" data-screen-label="05 Certs">
      <div className="container">
        <div className="psection__head">
          <span className="eyebrow">{t("about_certs.eyebrow")}</span>
          <h2>{t("about_certs.title")}</h2>
          <p>{t("about_certs.subtitle")}</p>
        </div>
        <div className="certs">
          {CERT_DEFS.map((c, i) =>
          <div key={c.id} className={`cert fade-up delay-${i + 1}`}>
              <div className="cert__img">
                <img src={c.img} alt={`${t(`about_certs.${c.key}_name`)} ${t("about_certs.alt_suffix")}`} loading="lazy" />
              </div>
              <div>
                <p className="cert__name">{t(`about_certs.${c.key}_name`)}</p>
                <p className="cert__meta">{t(`about_certs.${c.key}_meta`)}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ── About: Location ──────────────────────────────────────────
function AboutLocation() {
  const t = useT();
  return (
    <section className="psection psection--alt" id="location" data-screen-label="06 Location">
      <div className="container">
        <div className="psection__head">
          <span className="eyebrow">{t("about_location.eyebrow")}</span>
          <h2>{t("about_location.title")}</h2>
        </div>
        <div className="location">
          <div className="location__map">
            <iframe
              title={t("about_location.map_iframe_title")}
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3181.2477849174857!2d126.85030141266765!3d37.12301957204091!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357b13e233974925%3A0xe2b9455af3174e44!2z6rK96riw64-EIO2ZlOyEseyLnCDtjJTtg4TrqbQg67KE65Ec66GcMTM2MuuyiOq4uCA1My01!5e0!3m2!1sko!2skr!4v1779550098292!5m2!1sko!2skr"
              allowFullScreen=""
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            ></iframe>
            <a
              className="location__map-link"
              href="https://map.naver.com/p/search/경기도%20화성시%20팔탄면%20버들로1362번길%2053-5"
              target="_blank"
              rel="noopener noreferrer"
            >
              {t("about_location.map_link")}
              <Ic name="arrow-up-right" size={14} />
            </a>
          </div>
          <div className="location__info">
            <div className="location__row">
              <span className="lbl">{t("about_location.lbl_address")}</span>
              <span className="val">{t("about_location.val_address_a")}<br />{t("about_location.val_address_b")}</span>
            </div>
            <div className="location__row">
              <span className="lbl">{t("about_location.lbl_operation")}</span>
              <span className="val">{t("about_location.val_operation")}</span>
            </div>
            <div className="location__row">
              <span className="lbl">{t("about_location.lbl_fax")}</span>
              <span className="val">{t("about_location.val_fax")}</span>
            </div>
            <div className="location__row">
              <span className="lbl">{t("about_location.lbl_email")}</span>
              <span className="val"><a href="mailto:tm@themyong.co.kr">{t("about_location.val_email")}</a></span>
            </div>
            <div className="location__row">
              <span className="lbl">{t("about_location.lbl_hours")}</span>
              <span className="val">{t("about_location.val_hours")}</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ── About: CTA ───────────────────────────────────────────────
function AboutCTA() {
  const t = useT();
  return (
    <section className="finalcta" data-screen-label="07 CTA">
      <div className="container">
        <div className="finalcta__inner">
          <div>
            <h2>{t("about_cta.title_a")}<br />{t("about_cta.title_b")}</h2>
            <p>{t("about_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, { AboutGreeting, AboutVision, AboutHistory, AboutOrg, AboutCerts, AboutLocation, AboutCTA });