// ModuFoodService — Services, About, Sustainability, Locations (EN / KO)

function ServicesView({ setView, lang, T }) {
  const S = T.services;
  const partners = [
    "DoorDash", "US Foods", "JFC International", "Wismettac",
    "Costa Brava Mediterranean Foods", "Wooltari", "MetaFoods",
    "iMart", "Cypress International Trading", "HMP",
    "Modu Cold Storage", "Modu Food Trading"
  ];
  return (
    <div className="view">
      <div className="section" style={{ borderTop: "none" }}>
        <div style={{ padding: "48px var(--pad) 32px" }}>
          <Kicker>{S.kicker}</Kicker>
          {lang === "ko" ? (
            <h1 className="h-display">
              고객 중심의<br />비즈니스 <em>솔루션.</em>
            </h1>
          ) : (
            <h1 className="h-display">
              Business solutions,<br />built <em>around you.</em>
            </h1>
          )}
          <p className="lede" style={{ marginTop: 16, maxWidth: "58ch" }}>{S.lede}</p>
        </div>
      </div>

      <div className="serv-grid">
        {S.cards.map((s, idx) => (
          <div key={idx} className="serv-card">
            <div className="head">
              <span className="no">{String(idx + 1).padStart(2, "0")} / 06</span>
              <span className="tag">{s.tag}</span>
            </div>
            <div className="t">{s.title}</div>
            <div className="d">{s.detail}</div>
            <ul>
              {s.points.map((p, i) => <li key={i}>{p}</li>)}
            </ul>
          </div>
        ))}
      </div>

      <div className="section" style={{ background: "var(--ink)", color: "var(--bg)", borderBottom: "none" }}>
        <div className="section-inner grid-half">
          <div>
            <Kicker>{S.process_kicker}</Kicker>
            <h2 className="h2" style={{ color: "var(--bg)" }}>{S.process_heading}</h2>
            <p className="lede" style={{ color: "rgba(250,250,247,0.7)", marginTop: 16 }}>{S.process_lede}</p>
          </div>
          <div>
            {S.stages.map(([w, t, d]) => (
              <div key={w} style={{
                display: "grid", gridTemplateColumns: "100px 140px 1fr", gap: 16,
                padding: "16px 0", borderTop: "1px solid rgba(250,250,247,0.15)",
                alignItems: "baseline"
              }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", color: "rgba(250,250,247,0.5)" }}>{w}</div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 18, letterSpacing: "-0.01em", color: "var(--bg)" }}>{t}</div>
                <div style={{ fontSize: 14, color: "rgba(250,250,247,0.75)" }}>{d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="section" style={{ background: "var(--bg-2)" }}>
        <div className="section-inner">
          <div className="two-col">
            <div className="col-side">
              <Kicker>{S.partner_kicker}</Kicker>
              {lang === "ko" ? (
                <h2 className="h2">업계 리더들이<br />신뢰합니다.</h2>
              ) : (
                <h2 className="h2">Trusted by<br />industry leaders.</h2>
              )}
              <p style={{ marginTop: 16 }}>{S.partner_lede}</p>
            </div>
            <div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, border: "1px solid var(--rule)", background: "var(--bg)" }}>
                {partners.map((name, i) => (
                  <div key={name} style={{
                    padding: "20px 24px",
                    borderRight: (i % 3 < 2) ? "1px solid var(--rule)" : "none",
                    borderBottom: i < partners.length - 3 ? "1px solid var(--rule)" : "none",
                    fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 15,
                    letterSpacing: "-0.005em", color: "var(--ink)"
                  }}>
                    {name}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function AboutView({ setView, lang, T }) {
  const A = T.about;
  return (
    <div className="view">
      {/* Hero: MODU: ALL mission */}
      <div className="section" style={{ borderTop: "none" }}>
        <div style={{ padding: "48px var(--pad) 32px" }}>
          <Kicker>{A.kicker}</Kicker>
          <h1 className="h-display">
            {A.mission_heading.split(".")[0]}.<br />
            <em>{A.mission_heading.split(".")[1] ? A.mission_heading.split(".")[1].trim() + "." : ""}</em>
          </h1>
          <p className="lede" style={{ marginTop: 16, maxWidth: "58ch" }}>{A.mission_text}</p>
        </div>
      </div>

      {/* Stats strip */}
      <div className="sus-kpis">
        {A.stats.map((s, i) => (
          <div key={i} className="kpi">
            <div className="n">{s.kpi}</div>
            <div className="l">{s.label}</div>
          </div>
        ))}
      </div>

      {/* Story + Facts + Timeline */}
      <div className="section">
        <div className="section-inner">
          <div className="about-grid">
            <div>
              <Kicker>{A.story_kicker}</Kicker>
              <p style={{ fontSize: 18, lineHeight: 1.55, color: "var(--ink)", marginTop: 16 }}>{A.p1}</p>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--ink-2)" }}>{A.p2}</p>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--ink-2)" }}>{A.p3}</p>

              <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 0, border: "1px solid var(--rule)" }}>
                {A.facts.map(([k, v], i) => (
                  <div key={k} style={{
                    padding: "16px 20px",
                    borderRight: i % 2 === 0 ? "1px solid var(--rule)" : "none",
                    borderBottom: i < 4 ? "1px solid var(--rule)" : "none"
                  }}>
                    <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--muted)" }}>{k}</div>
                    <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 16, letterSpacing: "-0.005em", marginTop: 4 }}>{v}</div>
                  </div>
                ))}
              </div>
            </div>

            <div>
              <Kicker>{A.timeline_kicker}</Kicker>
              <div className="timeline">
                {A.timeline.map(([y, t, d], i) => (
                  <div key={i} className="ev">
                    <div className="y">{y}</div>
                    <div>
                      <div className="t">{t}</div>
                      <div className="d">{d}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Certifications */}
      <div className="section" style={{ background: "var(--bg-2)" }}>
        <div className="section-inner">
          <Kicker>{A.certs_kicker}</Kicker>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, marginTop: 24, border: "1px solid var(--rule)", background: "var(--bg)" }}>
            {A.certs.map((c, i) => (
              <div key={c.label} style={{
                padding: "32px 24px",
                borderRight: i < 3 ? "1px solid var(--rule)" : "none",
                display: "flex", flexDirection: "column", gap: 8
              }}>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 28, letterSpacing: "-0.02em" }}>{c.label}</div>
                <div style={{ fontSize: 13, color: "var(--ink-2)" }}>{c.detail}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Ecosystem: Eating / Storing / Trading */}
      <div className="section" style={{ background: "var(--ink)", color: "var(--bg)", borderBottom: "none" }}>
        <div className="section-inner grid-half">
          <div>
            <Kicker>{A.eco_kicker}</Kicker>
            <h2 className="h2" style={{ color: "var(--bg)" }}>{A.eco_tagline}</h2>
          </div>
          <div>
            {A.eco.map((e) => (
              <div key={e.label} style={{
                display: "grid", gridTemplateColumns: "100px 1fr", gap: 16,
                padding: "20px 0", borderTop: "1px solid rgba(250,250,247,0.15)",
                alignItems: "baseline"
              }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", color: "rgba(250,250,247,0.5)", textTransform: "uppercase" }}>{e.label}</div>
                <div>
                  <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 18, letterSpacing: "-0.01em", color: "var(--bg)" }}>{e.name}</div>
                  <div style={{ fontSize: 14, color: "rgba(250,250,247,0.75)", marginTop: 2 }}>{e.detail}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function LocationsView({ setView, lang, T }) {
  const ko = lang === "ko";
  return (
    <div className="view">
      <div className="section" style={{ borderTop: "none" }}>
        <div style={{ padding: "48px var(--pad) 32px" }}>
          <Kicker>{ko ? "FIG.09 · 위치" : "FIG.09 · Location"}</Kicker>
          {ko ? (
            <h1 className="h-display">
              우리 <em>시설.</em>
            </h1>
          ) : (
            <h1 className="h-display">
              Our <em>facility.</em>
            </h1>
          )}
          <p className="lede" style={{ marginTop: 16, maxWidth: "50ch" }}>
            {ko
              ? "버논, 캘리포니아에 위치한 USDA 및 FDA 인증 제조 시설입니다."
              : "Our USDA and FDA certified manufacturing facility located in Vernon, California."}
          </p>
        </div>
      </div>

      <div className="loc-layout">
        <div className="loc-map-wrap">
          <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3307.2!2d-118.2165!3d33.9975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2cf0f3e3b3b3b%3A0x0!2s5050+Everett+Ct%2C+Vernon%2C+CA+90058!5e0!3m2!1sen!2sus!4v1700000000000"
            style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: "none" }}
            allowFullScreen=""
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
            title="Modu Food Service Location"
          />
          <div style={{
            position: "absolute", left: 16, top: 16,
            fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.1em",
            textTransform: "uppercase", color: "var(--muted)",
            background: "var(--bg)", padding: "4px 8px", border: "1px solid var(--rule)"
          }}>
            VERNON, CA · N 33°59' · W 118°13'
          </div>
        </div>

        <div className="loc-side" style={{ padding: "40px var(--pad)" }}>
          <div style={{ marginBottom: 40 }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 12 }}>
              {ko ? "주소" : "ADDRESS"}
            </div>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 22, letterSpacing: "-0.01em", lineHeight: 1.3 }}>
              5050 Everett Ct.<br />Vernon, CA 90058
            </div>
          </div>

          <div style={{ marginBottom: 40 }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 12 }}>
              {ko ? "전화" : "PHONE"}
            </div>
            <a href="tel:+13233213570" style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 18, letterSpacing: "-0.01em" }}>
              +1 (323) 321-3570
            </a>
          </div>

          <div style={{ marginBottom: 40 }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 12 }}>
              {ko ? "이메일" : "EMAIL"}
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              <a href="mailto:sales@modufoodservice.com" style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 16 }}>sales@modufoodservice.com</a>
              <a href="mailto:info@modufoodservice.com" style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 16 }}>info@modufoodservice.com</a>
            </div>
          </div>

          <div style={{ marginBottom: 40 }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 12 }}>
              {ko ? "운영 시간" : "HOURS"}
            </div>
            <div style={{ fontSize: 15, lineHeight: 1.6 }}>
              {ko ? "월요일 ~ 금요일: 오전 7:00 ~ 오후 5:00" : "Monday – Friday: 7:00 AM – 5:00 PM"}<br />
              {ko ? "토요일 ~ 일요일: 휴무" : "Saturday – Sunday: Closed"}
            </div>
          </div>

          <div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 12 }}>
              {ko ? "인증" : "CERTIFICATIONS"}
            </div>
            <div style={{ display: "flex", gap: 8 }}>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", padding: "6px 12px", border: "1px solid var(--rule)", color: "var(--ink)" }}>USDA</span>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", padding: "6px 12px", border: "1px solid var(--rule)", color: "var(--ink)" }}>FDA</span>
            </div>
            <div style={{ marginTop: 8, fontSize: 13, color: "var(--ink-2)" }}>
              {ko ? "USDA 검사 승인 (P-47238) · FDA 등록 시설" : "USDA Inspected (P-47238) · FDA Registered Facility"}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ServicesView, AboutView, LocationsView });
