// Editor Eye LP — Service Catalog
// DATA: loaded from service-catalog-data.js (AUTO-GENERATED by catalog-gen from tools.yaml)
// UI:   defined below (ServiceCatalog component)
// Exposes window.ServiceCatalog (overrides the one in sections-2.jsx)
//
// NOTE: IIFE で全体を包む。これがないと、Babel Standalone @7.29.0 が
// type="text/babel" スクリプトを共有スコープで評価する関係で、
// sections-2.jsx の `function ServiceCatalog` 宣言と衝突して
// `function ServiceCatalog` の再宣言が黙って失敗し、新版が window に反映されない。
// IIFE 内に閉じれば top-level の衝突を回避できる。

(function() {

// ============================================================================
// Data — sourced from window.ServiceCatalogData (service-catalog-data.js)
// ============================================================================

const {
  SUB_ACTIONS,
  TOTAL_TOOLS,
  TOTAL_SUBACTIONS,
  FLAT_TOOLS,
  TOTAL_FLAT,
} = window.ServiceCatalogData;

// ============================================================================
// KNOWLEDGE_CATEGORIES — LP 固有データ（tools.yaml 外）
// ============================================================================


// === 6 Knowledge categories ==================================================

const KNOWLEDGE_CATEGORIES = [
  { roman: "Ⅰ", title: "実装メカニズム", en: "Implementation Mechanism", body: "Unity 内部で何が起きているか。公開ドキュメントの表面的説明では到達しない実装層の知識。", color: "#1F4E6E" },
  { roman: "Ⅱ", title: "概念対応表",     en: "Concept Mapping",          body: "ユーザー概念 ↔ Unity 実装のマッピング。自然言語指示を実装コードに橋渡し。",                color: "#1B7388" },
  { roman: "Ⅲ", title: "挙動の連鎖",     en: "Behavior Chain",           body: "ある操作が引き起こす一連の連鎖。副作用の理解が深まる。",                                 color: "#1F4E6E" },
  { roman: "Ⅳ", title: "意図と結果のギャップ", en: "Intent-Result Gap",   body: "「なぜ意図通り動かないか」のトラブルシュート。ユーザーの問題解消のカテゴリⅠ派生。",        color: "#E76C7E" },
  { roman: "Ⅴ", title: "バージョン依存挙動", en: "Version-Specific",      body: "Unity バージョン固有の挙動知識",                                                            color: "#E8A33C" },
  { roman: "Ⅵ", title: "ベストプラクティス", en: "Best Practices",        body: "設計判断の支援。",                                                                          color: "#34A88A" }
];

const KNOWLEDGE_CATEGORIES_EN = [
  { roman: "I",  title: "Implementation Mechanism", en: "What's inside Unity",  body: "What actually happens inside Unity. The implementation-layer knowledge public docs never reach.", color: "#1F4E6E" },
  { roman: "II", title: "Concept Mapping",          en: "User intent ↔ Unity",   body: "Mapping between user concepts and Unity implementations. Bridges natural language to real code.", color: "#1B7388" },
  { roman: "III",title: "Behavior Chain",           en: "Cause and effect",      body: "The chain of consequences a single operation triggers. Builds your model of side effects.",       color: "#1F4E6E" },
  { roman: "IV", title: "Intent-Result Gap",        en: "Why it didn't work",    body: "Troubleshooting \"why doesn't this match what I asked for.\" A symptom-first derivative of I.",  color: "#E76C7E" },
  { roman: "V",  title: "Version-Specific",         en: "Per-Unity-version",     body: "Unity version-specific behavior knowledge.",                                                       color: "#E8A33C" },
  { roman: "VI", title: "Best Practices",           en: "Design judgment",       body: "Design judgment support.",                                                                         color: "#34A88A" }
];

// === Helpers =================================================================

function nsAccent(ns) {
  return ns === "scene"     ? "var(--blue)"
       : ns === "assets"    ? "var(--orange)"
       : ns === "workbench" ? "var(--ultramarine)"
       : ns === "runtime"   ? "#34A88A"
       : ns === "core"      ? "var(--ink-2)"
       : ns === "build"     ? "#8C6FCB"
       : ns === "testing"   ? "#34A88A"
       : ns === "execution" ? "#E8A33C"
       : ns === "knowledge" ? "var(--ultramarine)"
       : "var(--ink-3)";
}

// Definition list: name → description rows
// items: [action, desc_ja, desc_en] 3-tuples
function SubActionList({ items, accent, lang }) {
  const isJa = lang === "ja";
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: "minmax(200px, max-content) 1fr",
      columnGap: 22,
      rowGap: 0,
      borderTop: "1px solid var(--rule)"
    }}>
      {items.map(([name, desc_ja, desc_en], i) => {
        const desc = isJa ? desc_ja : (desc_en || desc_ja);
        return (
          <React.Fragment key={i}>
            <div className="mono" style={{
              fontSize: 12.5, fontWeight: 600, color: "var(--ink)",
              padding: "10px 0",
              borderBottom: "1px solid var(--rule)",
              display: "flex", alignItems: "center", gap: 10,
              wordBreak: "break-word"
            }}>
              <span style={{
                width: 4, height: 4, borderRadius: "50%",
                background: accent, opacity: 0.6, display: "inline-block", flexShrink: 0
              }}/>
              {name}
            </div>
            <div style={{
              fontSize: 13, color: "var(--ink-2)",
              padding: "10px 0",
              borderBottom: "1px solid var(--rule)",
              lineHeight: 1.55
            }}>
              {desc}
            </div>
          </React.Fragment>
        );
      })}
    </div>
  );
}

// === Component ===============================================================

function ServiceCatalog({ t, lang }) {
  const [openTools, setOpenTools] = React.useState(() => new Set());
  const [showFlat, setShowFlat] = React.useState(false);

  const toggle = (i) => {
    setOpenTools(prev => {
      const next = new Set(prev);
      if (next.has(i)) next.delete(i); else next.add(i);
      return next;
    });
  };
  const expandAll = () => setOpenTools(new Set(SUB_ACTIONS.map((_, i) => i)));
  const collapseAll = () => setOpenTools(new Set());

  const cats = lang === "ja" ? KNOWLEDGE_CATEGORIES : KNOWLEDGE_CATEGORIES_EN;
  const isJa = lang === "ja";

  return (
    <section id="features" className="section section-rule">
      <div className="container">

        {/* === B-1: Lead === */}
        <div className="reveal catalog-lead" style={{ marginBottom: 28, display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 32, flexWrap: "wrap" }}>
          <div style={{ maxWidth: 1040, flex: "1 1 640px", minWidth: 0 }}>
            <h2 className="h-section h-mega" style={{ margin: "12px 0 16px" }}>
              {isJa ? (
                <><span className="kw-grad">{TOTAL_SUBACTIONS}</span> の SubAction × <span className="kw-grad">1,476</span> の Knowledge entries で、<br/>Unity 操作のすべてを実装する。</>
              ) : (
                <><span className="kw-grad">{TOTAL_SUBACTIONS}</span> SubActions × <span className="kw-grad">1,476</span> Knowledge entries.<br/>Every Unity operation, implemented.</>
              )}
            </h2>
            <p style={{ color: "var(--ink-3)", fontSize: 17, margin: 0 }}>
              {isJa
                ? "未実装機能は載せない。これが Editor Eye が今この瞬間にできること、すべて。"
                : "We don't list features that don't exist. This is what Editor Eye can do, today."}
            </p>
          </div>
          <a href="#cta" className="btn btn-cta" style={{ flexShrink: 0, marginBottom: 4 }}>
            {isJa ? "今すぐ無料で始める" : "Start free now"}
          </a>
        </div>

        {/* Stat chips */}
        <div className="reveal" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginBottom: 72 }}>
          {t.catalog.stats.map((s, i) => {
            const dark = i === 0 || i === 1;
            return (
              <div key={i} style={{
                padding: "32px 28px",
                borderRadius: 16,
                background: dark ? "#0F1624" : "var(--bg-soft)",
                color: dark ? "#fff" : "var(--ink)",
                border: dark ? "1px solid #1A2236" : "1px solid var(--rule)",
                display: "flex", flexDirection: "column", justifyContent: "space-between",
                minHeight: 200, gap: 18
              }}>
                <div className={dark ? "stat-mega" : ""} style={dark ? {} : {
                  fontSize: 56, fontWeight: 900, letterSpacing: "-0.04em", lineHeight: 0.95, fontFamily: "var(--font-display)", color: "var(--ink)"
                }}>
                  {s.num}
                </div>
                <div className="stat-label" style={{ color: dark ? "rgba(255,255,255,0.5)" : "var(--ink-4)" }}>
                  {s.label}
                </div>
              </div>
            );
          })}
        </div>

        {/* === B-2: Tool Categories === */}
        <div style={{ marginBottom: 24, display: "flex", alignItems: "baseline", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
          <h3 className="h-section" style={{ fontSize: 26, margin: 0, letterSpacing: "-0.015em" }}>
            {isJa ? "Tool Category" : "Tool Categories"}
          </h3>

        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 18, marginBottom: 96 }} className="catalog-grid">
          {t.catalog.groups.map((g, i) => {
            const TOOL_COLORS = ["#1F4E6E", "#1B7A6B", "#E05A6A", "#D4A017"];
            const color = TOOL_COLORS[i % TOOL_COLORS.length];
            return (
              <article key={i} className="reveal tool-cat-card" style={{
                borderRadius: 8,
                border: "1px solid var(--rule)",
                background: "var(--bg)",
                overflow: "hidden",
                boxShadow: "var(--shadow-1)",
                transitionDelay: `${i * 0.08}s`
              }}>
                <div style={{
                  background: color,
                  padding: "14px 18px",
                  display: "flex", alignItems: "center", gap: 12,
                  color: "#fff",
                  position: "relative"
                }}>
                  <span style={{
                    width: 32, height: 32, borderRadius: "50%",
                    border: "1.5px solid rgba(255,255,255,0.85)",
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 13,
                    flexShrink: 0
                  }}>{g.roman}</span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontWeight: 700, fontSize: 15, letterSpacing: "-0.01em", lineHeight: 1.2 }}>
                      {g.roman}. {g.title}
                    </div>
                    <div style={{ fontStyle: "italic", fontSize: 12, opacity: 0.9, marginTop: 2 }}>{g.en}</div>
                  </div>
                  <span className="mono" style={{
                    fontSize: 11.5,
                    padding: "4px 10px",
                    borderRadius: 999,
                    background: "rgba(255,255,255,0.18)",
                    color: "#fff",
                    border: "1px solid rgba(255,255,255,0.3)",
                    letterSpacing: "0.02em",
                    flexShrink: 0
                  }}>{g.count} actions</span>
                </div>
                <div style={{ padding: "16px 18px", borderTop: `2px solid ${color}` }}>
                  <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "grid", gap: 8 }}>
                    {g.items.map((it, j) => (
                      <li key={j} style={{ display: "flex", gap: 10, fontSize: 13.5, color: "var(--ink-2)", lineHeight: 1.55 }}>
                        <span style={{ color: color, fontWeight: 700, fontSize: 12, flexShrink: 0 }}>—</span>
                        <span>{it}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </article>
            );
          })}
        </div>

        {/* === B-3: SubAction full list === */}
        <div style={{ marginBottom: 20, display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
          <div>
            <h3 className="h-section" style={{ fontSize: 26, margin: 0, letterSpacing: "-0.015em" }}>
              {isJa ? "ツール別 SubAction 一覧" : "SubActions by tool"}
            </h3>
            <p className="mono" style={{ fontSize: 12, color: "var(--ink-3)", letterSpacing: "0.04em", margin: "6px 0 0" }}>
              {`${TOTAL_TOOLS} gateway tools · ${TOTAL_SUBACTIONS} sub_actions`}
            </p>
          </div>
          <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
            <button onClick={expandAll} className="btn btn-ghost" style={{ padding: "8px 14px", fontSize: 12.5 }}>{isJa?"すべて展開":"Expand all"}</button>
            <button onClick={collapseAll} className="btn btn-ghost" style={{ padding: "8px 14px", fontSize: 12.5 }}>{isJa?"すべて畳む":"Collapse all"}</button>
            <a href="#cta" className="btn btn-cta" style={{ marginLeft: 4 }}>
              {isJa ? "今すぐ無料で始める" : "Start free now"}
            </a>
          </div>
        </div>

        <div style={{ background: "var(--bg)", border: "1px solid var(--rule)", borderRadius: 14, overflow: "hidden", marginBottom: 24 }}>
          {SUB_ACTIONS.map((tool, i) => {
            const isOpen = openTools.has(i);
            const accent = nsAccent(tool.ns);
            const blurb = isJa ? tool.blurb_ja : tool.blurb_en;
            return (
              <div key={i} style={{ borderTop: i === 0 ? 0 : "1px solid var(--rule)" }}>
                <button onClick={() => toggle(i)} style={{
                  width: "100%", textAlign: "left",
                  padding: "16px 22px", border: 0,
                  background: isOpen ? "var(--bg-soft)" : "transparent",
                  display: "flex", alignItems: "center", gap: 14, cursor: "pointer"
                }}>
                  <span style={{
                    width: 16, height: 16, borderRadius: 4,
                    background: accent, opacity: 0.18, flexShrink: 0
                  }}/>
                  <span className="mono" style={{ fontSize: 13, color: "var(--ink)", fontWeight: 600, letterSpacing: "0.005em" }}>
                    <span style={{ color: "var(--ink-4)" }}>gateway.{tool.ns}.</span>{tool.name}
                  </span>
                  <span className="tag mono" style={{ fontSize: 10.5, marginLeft: 4 }}>{tool.count}</span>
                  <span style={{ flex: 1 }} />
                  <span style={{
                    fontSize: 16, color: "var(--ink-3)",
                    transform: isOpen ? "rotate(45deg)" : "rotate(0)",
                    transition: "transform .2s"
                  }}>+</span>
                </button>
                {isOpen && (
                  <div style={{ padding: "0 22px 22px 52px" }}>
                    {blurb && (
                      <p style={{
                        fontSize: 13.5, lineHeight: 1.7, color: "var(--ink-2)",
                        margin: "0 0 18px",
                        paddingLeft: 12,
                        borderLeft: `2px solid ${accent}`,
                        opacity: 0.95
                      }}>{blurb}</p>
                    )}
                    {tool.sections ? (
                      <div style={{ display: "grid", gap: 24 }}>
                        {tool.sections.map((sec, k) => (
                          <div key={k}>
                            <div className="mono" style={{
                              fontSize: 11, fontWeight: 700, letterSpacing: "0.06em",
                              color: "var(--ink-3)", textTransform: "uppercase",
                              marginBottom: 4
                            }}>
                              {isJa ? sec.label_ja : sec.label_en} · {sec.items.length}
                            </div>
                            <SubActionList items={sec.items} accent={accent} lang={lang} />
                          </div>
                        ))}
                      </div>
                    ) : (
                      <SubActionList items={tool.items} accent={accent} lang={lang} />
                    )}
                  </div>
                )}
              </div>
            );
          })}
        </div>

        {/* === Flat-call tools === */}
        <div style={{ background: "var(--bg-soft)", border: "1px dashed var(--rule-2)", borderRadius: 12, padding: "18px 22px", marginBottom: 96 }}>
          <button onClick={() => setShowFlat(s => !s)} style={{
            background: "transparent", border: 0, padding: 0,
            color: "var(--ink-2)", fontSize: 13.5, fontWeight: 600,
            display: "inline-flex", alignItems: "center", gap: 8, cursor: "pointer"
          }}>
            <span style={{ fontSize: 14, transform: showFlat ? "rotate(90deg)" : "rotate(0)", transition: "transform .2s", display: "inline-block" }}>▶</span>
            {isJa ? `フラット呼び出しツール (sub_action なし) · ${TOTAL_FLAT}`
                  : `Flat-call tools (no sub_action) · ${TOTAL_FLAT}`}
          </button>
          {showFlat && (
            <div style={{ marginTop: 18, display: "grid", gap: 22 }}>
              {FLAT_TOOLS.map((g, gi) => {
                const accent = nsAccent(g.ns);
                return (
                  <div key={gi}>
                    <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginBottom: 8 }}>
                      <span style={{
                        width: 8, height: 8, borderRadius: 2,
                        background: accent, opacity: 0.55, display: "inline-block"
                      }}/>
                      <span className="mono" style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.06em", color: "var(--ink-2)", textTransform: "uppercase" }}>
                        {isJa ? g.title_ja : g.title_en}
                      </span>
                      <span className="mono" style={{ fontSize: 10.5, color: "var(--ink-3)" }}>· {g.items.length}</span>
                    </div>
                    <div style={{
                      display: "grid",
                      gridTemplateColumns: "minmax(220px, max-content) 1fr",
                      columnGap: 18, rowGap: 6,
                      fontSize: 12.5, lineHeight: 1.55
                    }}>
                      {g.items.map((row, ri) => (
                        <React.Fragment key={ri}>
                          <span className="mono" style={{ color: "var(--ink)", fontWeight: 600, wordBreak: "break-word" }}>{row[0]}</span>
                          <span style={{ color: "var(--ink-2)" }}>{isJa ? row[1] : row[2]}</span>
                        </React.Fragment>
                      ))}
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>

        {/* === B-4: Knowledge categories === */}
        <div style={{ marginBottom: 28, display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 16 }}>
          <div>
            <h3 className="h-section" style={{ fontSize: 30, margin: 0, color: "var(--ultramarine)", letterSpacing: "-0.015em" }}>
              {isJa ? "あなたの創作活動を支える知識DBの6つのカテゴリー" : "The 6 Knowledge Categories"}
            </h3>
            <p style={{ color: "var(--ink-3)", fontSize: 14, margin: "6px 0 0" }}>
              {isJa ? "knowledge_entries.category "
                    : "The 6 enum values for knowledge_entries.category"}
            </p>
          </div>
          <a href="#cta" className="btn btn-cta" style={{ flexShrink: 0 }}>
            {isJa ? "今すぐ無料で始める" : "Start free now"}
          </a>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }} className="kcat-grid">
          {cats.map((c, i) => (
            <article key={i} style={{
              borderRadius: 8,
              border: "1px solid var(--rule)",
              background: "var(--bg)",
              overflow: "hidden",
              boxShadow: "var(--shadow-1)"
            }}>
              <div style={{
                background: c.color,
                padding: "14px 18px",
                display: "flex", alignItems: "center", gap: 12,
                color: "#fff"
              }}>
                <span style={{
                  width: 32, height: 32, borderRadius: "50%",
                  border: "1.5px solid rgba(255,255,255,0.85)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 13,
                  flexShrink: 0
                }}>{c.roman}</span>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 15, letterSpacing: "-0.01em", lineHeight: 1.2 }}>
                    {c.roman}. {c.title}
                  </div>
                  <div style={{ fontStyle: "italic", fontSize: 12, opacity: 0.9, marginTop: 2 }}>{c.en}</div>
                </div>
              </div>
              <div style={{ padding: "16px 18px", borderTop: `2px solid ${c.color}` }}>
                <p style={{ color: "var(--ink-2)", fontSize: 13.5, margin: 0, lineHeight: 1.65 }}>{c.body}</p>
              </div>
            </article>
          ))}
        </div>

      </div>
      <style>{`
        @media (max-width: 880px) { .catalog-grid { grid-template-columns: 1fr !important; } .kcat-grid { grid-template-columns: 1fr !important; } }
        @media (max-width: 1100px) and (min-width: 881px) { .kcat-grid { grid-template-columns: 1fr 1fr !important; } }
      `}</style>
    </section>
  );
}

window.ServiceCatalog = ServiceCatalog;

})();
