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

const App = () => {
  const featured = READER_LETTERS.filter(l => l.featured);
  const regular = READER_LETTERS.filter(l => !l.featured);
  return (
    <>
      <SharedMasthead section="READER LETTERS" />
      <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 }}>SINCE VOL.01</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 }}>From Our Readers</div>
          <p style={{ maxWidth: 640, margin: "20px auto 0", fontSize: 14, lineHeight: 1.85, opacity: 0.85 }}>
            創刊以来いただいた読者の声から、編集部が選び返信を添えたものを掲載しています。<br />本欄に掲載したお手紙には、後日編集部からお礼のグッズをお送りしています。
          </p>
        </section>

        {/* Stats strip */}
        <div className="mod-stats" style={{ marginBottom: 48 }}>
          <div><div className="num">428</div><div className="lab">受領件数</div><div className="sub">2025-08〜2026-04</div></div>
          <div><div className="num">87</div><div className="lab">掲載数</div><div className="sub">編集部選</div></div>
          <div><div className="num">12</div><div className="lab">国内地域</div><div className="sub">送り主の所在地</div></div>
          <div><div className="num">100<span className="unit">%</span></div><div className="lab">返信率</div><div className="sub">必ず返信します</div></div>
        </div>

        {/* Featured (highlighted) */}
        <h2 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 30, fontWeight: 500, margin: "0 0 16px" }}>EDITOR'S PICK — 編集部推薦</h2>
        {featured.map(l => (
          <div className="mod-letter" key={l.id}>
            <div className="stamp">
              <span>★</span>
              <span>FEATURED</span>
            </div>
            <div className="body">
              <h3>{l.title}</h3>
              <p>{l.body}</p>
              {l.relatedSlug && (
                <div style={{ marginTop: 16, padding: "10px 14px", background: "var(--cream)", border: "1px solid var(--ink)", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.05em" }}>
                  → 関連記事: <a href={`/server/vps/vps-best/?slug=${l.relatedSlug}`} style={{ borderBottom: "1px solid var(--vermilion)", color: "var(--vermilion)" }}>{l.relatedSlug}</a>
                </div>
              )}
            </div>
            <div className="meta">
              <div className="id">{l.id}</div>
              <small>{l.issue} / {l.date}</small>
              <div className="name">{l.name}</div>
              <small>{l.age}歳 / {l.role}</small>
            </div>
          </div>
        ))}

        {/* Regular */}
        <h2 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 26, fontWeight: 500, margin: "48px 0 16px" }}>OTHER LETTERS — そのほかのお便り</h2>
        {regular.map(l => (
          <div className="mod-letter" key={l.id}>
            <div className="stamp normal">
              <span>{l.id}</span>
            </div>
            <div className="body">
              <h3 style={{ fontSize: 18 }}>{l.title}</h3>
              <p style={{ fontSize: 13 }}>{l.body}</p>
            </div>
            <div className="meta">
              <div className="id">{l.id}</div>
              <small>{l.issue} / {l.date}</small>
              <div className="name" style={{ fontSize: 16 }}>{l.name}</div>
              <small>{l.age}歳 / {l.role}</small>
            </div>
          </div>
        ))}

        {/* Submit CTA */}
        <section style={{ background: "var(--ink)", color: "var(--paper)", padding: "48px 56px", margin: "48px 0", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 40, alignItems: "center" }}>
          <div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.25em", color: "var(--vermilion)", marginBottom: 12 }}>SUBMIT YOUR LETTER</div>
            <h3 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 36, fontWeight: 500, margin: "0 0 16px", lineHeight: 1.2 }}>編集部に手紙を送る</h3>
            <p style={{ fontSize: 14, lineHeight: 1.85, margin: 0, opacity: 0.85 }}>
              記事のご感想・誤りのご指摘・取り上げてほしい話題・編集部への雑感、なんでも歓迎です。<br /><br />
              全件、副編集長 林 春香が目を通します。掲載するかどうかはご相談しますが、返信は必ずお送りします。<br />
              匿名希望もお受けします。
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <a href="/contact.html?type=letter" style={{ padding: "18px 24px", background: "var(--vermilion)", color: "var(--paper)", textAlign: "center", fontFamily: "'JetBrains Mono', monospace", fontSize: 13, letterSpacing: "0.2em", textTransform: "uppercase" }}>手紙フォームを開く →</a>
            <div style={{ padding: "16px 20px", border: "1px solid var(--paper)", fontSize: 12, lineHeight: 1.7, opacity: 0.85 }}>
              <b style={{ display: "block", marginBottom: 6, fontFamily: "'JetBrains Mono', monospace", letterSpacing: "0.15em" }}>POSTAL ADDRESS</b>
              〒151-0053 東京都渋谷区代々木1-XX-X<br />
              cynix編集部 「読者係」宛
            </div>
          </div>
        </section>

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

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