/* global React, window */
const { SharedMasthead, Breadcrumb, Colophon } = window.cynixShared;
const { GLOSSARY } = window.cynixCommunityData;

const ALPHABET = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];

const App = () => {
  // Group by first letter
  const grouped = {};
  GLOSSARY.forEach(g => {
    const first = g.term[0].toUpperCase();
    (grouped[first] ||= []).push(g);
  });
  Object.keys(grouped).forEach(k => grouped[k].sort((a,b) => a.term.localeCompare(b.term)));
  const usedLetters = new Set(Object.keys(grouped));

  return (
    <>
      <SharedMasthead section="GLOSSARY" />
      <main className="mod-shell">
        <Breadcrumb items={[{ label: "TOP", href: "index.html" }, { label: "用語集" }]} />

        <section style={{ borderTop: "4px double var(--ink)", borderBottom: "4px double var(--ink)", padding: "48px 0 56px", margin: "16px 0 48px", textAlign: "center" }}>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.3em", color: "var(--vermilion)", marginBottom: 14 }}>EDITORIAL DICTIONARY</div>
          <h1 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 80, fontWeight: 500, lineHeight: 0.95, margin: 0, letterSpacing: "-0.03em" }}>用語集</h1>
          <div style={{ fontFamily: "'Crimson Pro', serif", fontSize: 22, fontStyle: "italic", marginTop: 6, opacity: 0.7 }}>Glossary</div>
          <p style={{ maxWidth: 660, margin: "20px auto 0", fontSize: 14, lineHeight: 1.85, opacity: 0.85 }}>
            cynix.jpの記事中に出てくる専門用語を、編集部が「現場の言葉」で再定義した辞典です。<br />
            一般的な辞書定義に加え、本誌での扱い方を併記しています。<br />
            (現在 <span style={{ color: "var(--vermilion)", fontWeight: 600 }}>{GLOSSARY.length} 項</span> 収録 — 月次で追加更新)
          </p>
        </section>

        {/* Letter index bar */}
        <div className="mod-glossary-letter-bar">
          {ALPHABET.map(L => (
            <a key={L} className={usedLetters.has(L) ? "" : "disabled"} href={usedLetters.has(L) ? `#letter-${L}` : undefined}>{L}</a>
          ))}
        </div>

        {/* Sort by letter, render entries */}
        {Object.keys(grouped).sort().map(L => (
          <section key={L} id={`letter-${L}`}>
            <h2 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 64, fontWeight: 600, color: "var(--vermilion)", lineHeight: 1, margin: "32px 0 8px", letterSpacing: "-0.02em" }}>{L}</h2>
            <div className="cross-rule" style={{ borderTop: "2px solid var(--ink)" }}></div>
            {grouped[L].map(g => (
              <article className="mod-glossary-entry" key={g.term}>
                <div>
                  <div className="term">{g.term}</div>
                  <div className="reading">{g.reading}</div>
                  <div className="cat">{g.category}</div>
                </div>
                <div>
                  <p className="short">{g.short}</p>
                  <p className="body">{g.body}</p>
                  {g.relatedSlugs && g.relatedSlugs.length > 0 && (
                    <div style={{ marginTop: 14, padding: "8px 14px", background: "var(--cream)", border: "1px solid var(--ink)", display: "inline-block", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.05em" }}>
                      → 関連記事: {g.relatedSlugs.map((s, i) => (
                        <a key={s} href={`/server/vps/vps-best/?slug=${s}`} style={{ marginLeft: i ? 8 : 4, color: "var(--vermilion)", borderBottom: "1px solid var(--vermilion)" }}>{s}</a>
                      ))}
                    </div>
                  )}
                </div>
              </article>
            ))}
          </section>
        ))}

        {/* Suggest a term */}
        <section style={{ background: "var(--cream)", border: "2px solid var(--ink)", padding: "32px 40px", margin: "56px 0 32px", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 32, alignItems: "center" }}>
          <div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.25em", color: "var(--vermilion)", marginBottom: 10 }}>SUGGEST A TERM</div>
            <h3 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 26, fontWeight: 500, margin: "0 0 12px" }}>収録してほしい用語があれば</h3>
            <p style={{ fontSize: 13.5, lineHeight: 1.85, margin: 0 }}>
              本誌で「言葉の意味が説明されないまま使われていた」と感じた用語があれば、ご一報ください。<br />
              編集部が確認の上、定義を起こして本ページに追加します。
            </p>
          </div>
          <a href="/contact.html?type=glossary" style={{ display: "block", padding: "16px 24px", background: "var(--ink)", color: "var(--paper)", textAlign: "center", fontFamily: "'JetBrains Mono', monospace", fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase" }}>用語の収録依頼 →</a>
        </section>

        <Colophon />
      </main>
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);