/* global React, Ic, CountUp, ShowerHeadSVG, useT */

// ── Hero ─────────────────────────────────────────────────────
function Hero() {
  const t = useT();
  return (
    <section className="hero hero--video hero--sticky" data-screen-label="01 Hero">
      <video
        className="hero__video-bg"
        src="assets/THE_MYONG_landing_v5.mp4"
        autoPlay
        loop
        muted
        playsInline
        preload="metadata"
        aria-label={t("hero.drawing_label_a")}
      />
      <div className="hero__video-overlay" />
      <div className="hero__inner">
        <div className="hero__copy">
          <h1>
            {t("hero.h1_a")}<br />
            <em>{t("hero.h1_emph")}</em>{t("hero.h1_b")}
          </h1>
          <p className="hero__sub">
            {t("hero.sub_line1")}<br />
            {t("hero.sub_line2")}<br />
            {t("hero.sub_line3")}
          </p>
        </div>
      </div>
      <div className="hero__scrollcue">
        {t("hero.scroll")}
        <span className="arrow"></span>
      </div>
    </section>);

}

// ── Selection (Pain) ─────────────────────────────────────────
function Selection() {
  const t = useT();
  return (
    <section className="section selection" data-screen-label="02 Selection">
      <div className="container">
        <div className="selection__inner">
          <div>
            <h2 className="section-title fade-up">{t("selection.title")}</h2>
            <p className="section-subtitle fade-up delay-1">
              {t("selection.subtitle")}<br />
              {t("selection.subtitle_b")}
            </p>
            <div className="selection__points">
              <div className="selection__point fade-up delay-2">
                <span className="selection__point-marker" />
                <div>
                  <h4>{t("selection.point1_title")}</h4>
                  <p>{t("selection.point1_desc")}</p>
                </div>
              </div>
              <div className="selection__point fade-up delay-3">
                <span className="selection__point-marker" />
                <div>
                  <h4>{t("selection.point2_title")}</h4>
                  <p>{t("selection.point2_desc")}</p>
                </div>
              </div>
            </div>
            <p className="selection__lead fade-up delay-3">
              {t("selection.lead_a")}<em>{t("selection.lead_emph")}</em>{t("selection.lead_b")}
            </p>
          </div>
          <div className="selection__visual fade-up delay-1">
            <image-slot id="hero-hole-photo" src="assets/Hole Picture/홀확대측정1.webp" shape="rounded" radius="28" placeholder={t("selection.image_placeholder")}></image-slot>
          </div>
        </div>
      </div>
    </section>);

}

// ── Principles (How we work) ─────────────────────────────────
const PRINCIPLE_DEFS = [
  { num: "01", icon: "eye",          key: "p1" },
  { num: "02", icon: "sparkle",      key: "p2" },
  { num: "03", icon: "setting",      key: "p3" },
  { num: "04", icon: "document",     key: "p4" },
  { num: "05", icon: "persons",      key: "p5" },
  { num: "06", icon: "circle-check-fill", key: "p6" },
];

function Principles() {
  const t = useT();
  return (
    <section className="section principles" data-screen-label="03 Principles">
      <div className="container">
        <h2 className="section-title fade-up"><em>{t("principles.title_emph")}</em>{t("principles.title_b")}</h2>
        <p className="section-subtitle fade-up delay-1">
          {t("principles.subtitle")}
        </p>
        <div className="principles__grid">
          {PRINCIPLE_DEFS.map((p, i) =>
          <div key={p.num} className={`principle fade-up delay-${i % 3 + 1}`}>
              <div className="principle__head">
                <span className="principle__num">{p.num}</span>
                <div className="principle__icon"><Ic name={p.icon} size={26} /></div>
              </div>
              <h3>{t(`principles.${p.key}_title`)}</h3>
              <p>{t(`principles.${p.key}_desc`)}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ── Stats (By the numbers) ───────────────────────────────────
const STAT_DEFS = [
  { num: 18,    suffixKey: "suffix_year",                                             capKey: "cap_1" },
  { num: 15000, prefixKey: "prefix_about", suffixKey: "suffix_unit",                  capKey: "cap_2" },
  { num: 400,   prefixKey: "prefix_about", suffixKey: "suffix_type",                  capKey: "cap_3" },
  { num: 3000,  prefixKey: "prefix_about", suffixKey: "suffix_type",                  capKey: "cap_7" },
  { num: 9800,                              suffixRaw: "ea",                              capKey: "cap_5" },
  { num: 0.4,   prefixRaw: "Ø",            suffixRaw: "mm",  format: (v) => v.toFixed(1),  capKey: "cap_4" },
  { num: 0.05,                              suffixRaw: "mm", format: (v) => v.toFixed(2),  capKey: "cap_6" },
];

function Stats() {
  const t = useT();
  return (
    <section className="section stats" data-screen-label="04 Stats">
      <div className="container">
        <h2 className="section-title fade-up">{t("stats.title")}</h2>
        <p className="stats__subtitle fade-up delay-1">{t("stats.subtitle")}</p>

        <div className="stats__grid">
          {STAT_DEFS.map((s, i) => {
            const prefix = s.prefixRaw != null ? s.prefixRaw : (s.prefixKey ? t(`stats.${s.prefixKey}`) : null);
            const suffix = s.suffixRaw != null ? s.suffixRaw : (s.suffixKey ? t(`stats.${s.suffixKey}`) : null);
            return (
              <div key={i} className="stat fade-up">
                <div className="stat__num">
                  {prefix && <span className="prefix">{prefix}</span>}
                  <CountUp to={s.num} format={s.format} />
                  {suffix && <span className="unit">{suffix}</span>}
                </div>
                <div className="stat__cap">{t(`stats.${s.capKey}`)}</div>
              </div>
            );
          })}
        </div>

      </div>
    </section>);

}

// ── Hole cross-section band (full-bleed evidence strip) ──────
function HoleBand() {
  const t = useT();
  return (
    <section className="hole-band" data-screen-label="04b Cross-Section" aria-label={t("hole_band.alt")}>
      <div className="hole-band__media">
        <img src="assets/Hole Picture/홀단면.webp" alt={t("hole_band.alt")} loading="lazy" />
      </div>
      <div className="container hole-band__caption">
        <span className="eyebrow">{t("hole_band.eyebrow")}</span>
        <h3>{t("hole_band.title")}</h3>
      </div>
    </section>);

}

// ── Process (Working with us) ────────────────────────────────
const PROCESS_DEFS = [
  { num: "01", key: "s1" },
  { num: "02", key: "s2" },
  { num: "03", key: "s3" },
  { num: "04", key: "s4" },
  { num: "05", key: "s5" },
];

function Process() {
  const t = useT();
  return (
    <section className="section" data-screen-label="05 Process">
      <div className="container">
        <h2 className="section-title fade-up">{t("process.title")}</h2>
        <p className="process__lead fade-up delay-1">{t("process.lead")}</p>
        <div className="process__grid">
          {PROCESS_DEFS.map((s, i) =>
          <div key={s.num} className={`process__step fade-up delay-${i % 3 + 1}`}>
              <span className="num">{s.num}</span>
              <h4>{t(`process.${s.key}_title`)}</h4>
              <p>{t(`process.${s.key}_desc`)}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ── Factory band (full-bleed interior shot) ──────────────────
function FactoryBand() {
  const t = useT();
  return (
    <section className="factory-band" data-screen-label="05b Factory" aria-label={t("factory_band.alt")}>
      <div className="factory-band__media">
        <img
          src="assets/공장내부전경.webp"
          alt={t("factory_band.alt")}
          loading="lazy"
        />
      </div>
      <div className="container factory-band__caption">
        <span className="eyebrow">{t("factory_band.eyebrow")}</span>
        <h3>{t("factory_band.title")}</h3>
      </div>
    </section>);

}

// ── Final CTA ────────────────────────────────────────────────
function FinalCTA() {
  const t = useT();
  return (
    <section className="finalcta" id="contact" data-screen-label="07 Final CTA">
      <div className="container">
        <div className="finalcta__inner">
          <div>
            <h2 className="fade-up">{t("finalcta.title_a")}<br />{t("finalcta.title_b")}</h2>
            <p className="fade-up delay-1">{t("finalcta.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, { Hero, Selection, Principles, Stats, HoleBand, Process, FactoryBand, FinalCTA });