// ModuFoodService — Home view (EN / KO)

function HomeHero({ setView, lead, lang, T }) {
  const H = T.home;
  return (
    <div className="hero">
      <div className="hero-grid">
        <div className="hero-left">
          <div>
            <div className="hero-meta-row">
              <span className="kicker">{H.kicker1}</span>
              <span className="hero-tag">REV.2026.Q2 / {lang === "ko" ? "KO" : "EN-US"}</span>
            </div>
            <Kicker>{H.kicker2}</Kicker>
            {lang === "ko" ? (
              <h1 className="h-display">
                모두를 위한<br />
                <em>음식</em>을<br />
                만듭니다.
              </h1>
            ) : (
              <h1 className="h-display">
                Modu for <em>all.</em><br />
                From kitchen<br />
                to manufacturer.
              </h1>
            )}
            <p className="lede" style={{ marginTop: 24 }}>{H.lede}</p>
            <div className="hero-actions">
              <button className="cta" onClick={() => setView("products")}>
                {H.cta_browse} <span className="arr">→</span>
              </button>
              <a className="cta ghost" href="mailto:info@modufoodservice.com?subject=Inquiry">
                {H.cta_codev}
              </a>
            </div>
          </div>
          <div className="hero-foot">
            {window.MFS_DATA.stats.map((s, i) => (
              <div key={i}>
                <div className="k">{s.kpi}</div>
                <div className="l">{s.label}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="hero-right">
          <div className="hero-img-slot">
            <img src="https://res.cloudinary.com/djutbfvfz/image/upload/v1779983355/Image_itxytl.png" alt="Modu Food Service" />
          </div>
        </div>
      </div>

      <div className="cap-strip">
        {H.cap.map(([no, t, d]) => (
          <div key={no} className="cap-cell">
            <div className="no">{no}</div>
            <div className="t">{t}</div>
            <div className="d">{d}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function HomeFeatured({ setView, onPick, catalog, lang, T }) {
  const H = T.home;
  const { products, loading, error } = catalog;
  const featured = products.slice(0, 4);
  return (
    <div className="section">
      <div className="section-inner">
        <div className="two-col">
          <div className="col-side">
            <Kicker>{H.feat_kicker}</Kicker>
            {lang === "ko" ? (
              <h2 className="h2">132가지 이상의<br />다양한 제품.</h2>
            ) : (
              <h2 className="h2">132+ products.<br />Your label or ours.</h2>
            )}
            <p style={{ marginTop: 20 }}>
              {lang === "ko"
                ? "육류, 해산물, 소스, 밀키트, 즉석식품 등 저희 카탈로그의 일부 제품입니다. 자체 브랜드, 고객 브랜드 또는 OEM으로 제공 가능합니다."
                : "Meat, seafood, sauces, meal kits, and ready-to-eat products. A selection from our catalog of 132+ items, available as private label, your label, or OEM."}
            </p>
            <button className="cta" onClick={() => setView("products")} style={{ marginTop: 24 }}>
              {H.feat_cta} <span className="arr">→</span>
            </button>
          </div>
          <div>
            {loading ? (
              <div className="feat-empty">{lang === "ko" ? "카탈로그 로딩 중…" : "Loading catalog…"}</div>
            ) : error ? (
              <div className="feat-empty">{lang === "ko" ? "카탈로그를 불러올 수 없습니다" : "Catalog unavailable"}</div>
            ) : featured.length === 0 ? (
              <div className="feat-empty">{lang === "ko" ? "등록된 제품이 없습니다." : "No products published yet."}</div>
            ) : (
              <div className="feat-grid">
                {featured.map((p) => (
                  <div key={p.id} className="feat-card" onClick={() => onPick(p)}>
                    <div className="head">
                      <span>{p.sku}</span>
                      <span>{p.category}</span>
                    </div>
                    <ImgSlot label={(lang === "ko" && p.name_ko) ? p.name_ko : p.name} src={p.image} />
                    <div className="name">{(lang === "ko" && p.name_ko) ? p.name_ko : p.name}</div>
                    <div className="specs">
                      {fmtPrice(p.price) ? <span>{fmtPrice(p.price)}</span> : null}
                      {p.pid ? <React.Fragment><span>·</span><span>{p.pid}</span></React.Fragment> : null}
                    </div>
                    {p.badge ? (
                      <div className="specs">
                        <span className="badge blue">{p.badge}</span>
                      </div>
                    ) : null}
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

function HomeOps({ setView, lang, T }) {
  const H = T.home;
  return (
    <div className="section" style={{ background: "var(--bg-2)" }}>
      <div className="section-inner">
        <div className="two-col">
          <div className="col-side">
            <Kicker>{H.ops_kicker}</Kicker>
            {lang === "ko" ? (
              <h2 className="h2">10년 이상의 경력.<br />맞춤형 솔루션.</h2>
            ) : (
              <h2 className="h2">Over a decade of experience.<br />Customized solutions.</h2>
            )}
            <p style={{ marginTop: 20 }}>{H.ops_lede}</p>
            <button className="cta ghost" onClick={() => setView("services")} style={{ marginTop: 24 }}>
              {H.ops_cta} <span className="arr">→</span>
            </button>
          </div>
          <div>
            <div style={{ borderTop: "1px solid var(--rule)" }}>
              {H.ops_rows.map(([k, v]) => (
                <div key={k} className="ops-row">
                  <div className="ops-label">{k}</div>
                  <div className="ops-val">{v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function HomePartners({ setView, lang, T }) {
  const H = T.home;
  return (
    <div className="section">
      <div className="section-inner">
        <div className="two-col">
          <div className="col-side">
            <Kicker>{H.partner_kicker}</Kicker>
            {lang === "ko" ? (
              <h2 className="h2">업계 리더들이<br />신뢰합니다.</h2>
            ) : (
              <h2 className="h2">Trusted by<br />industry leaders.</h2>
            )}
          </div>
          <div>
            <div className="partner-grid">
              {H.partners.map((name) => (
                <div key={name}>{name}</div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function HomeCTA({ setView, lang, T }) {
  const H = T.home;
  return (
    <div className="section" style={{ background: "var(--ink)", color: "var(--bg)", borderBottom: "none" }}>
      <div className="section-inner grid-cta">
        <div>
          <Kicker>{H.cta_kicker}</Kicker>
          {lang === "ko" ? (
            <h2 className="h2" style={{ color: "var(--bg)" }}>
              함께 만들어<br />갑니다.
            </h2>
          ) : (
            <h2 className="h2" style={{ color: "var(--bg)" }}>
              Let's build<br />something together.
            </h2>
          )}
          <p className="lede" style={{ color: "rgba(250,250,247,0.7)", marginTop: 16 }}>
            {H.cta_lede}
          </p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <button className="cta" style={{ background: "var(--bg)", color: "var(--ink)" }} onClick={() => setView("products")}>
            {H.cta_browse} →
          </button>
          <a className="cta" style={{ background: "transparent", color: "var(--bg)", border: "1px solid var(--bg)", textAlign: "center" }} href="mailto:info@modufoodservice.com?subject=Inquiry">
            {H.cta_email} →
          </a>
        </div>
      </div>
    </div>
  );
}

function HomeView({ setView, onPick, catalog, lang, T }) {
  const lead = catalog.products[0];
  return (
    <div className="view">
      <HomeHero setView={setView} lead={lead} lang={lang} T={T} />
      <HomeFeatured setView={setView} onPick={onPick} catalog={catalog} lang={lang} T={T} />
      <HomeOps setView={setView} lang={lang} T={T} />
      <HomePartners setView={setView} lang={lang} T={T} />
      <HomeCTA setView={setView} lang={lang} T={T} />
    </div>
  );
}

Object.assign(window, { HomeView });