/* global React, window */
const { SharedMasthead, Breadcrumb, Colophon } = window.cynixShared;
const { EDITORS_LETTERS } = window.cynixBusinessData;
const { AUTHORS } = window.cynixDataExt;

const findAuth = (id) => AUTHORS.find(a => a.slug === id) || AUTHORS[0];

const App = () => {
  const featured = EDITORS_LETTERS.find(l => l.featured) || EDITORS_LETTERS[0];
  const authFt = findAuth(featured.author);

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

        {/* Hero */}
        <section className="mod-newsletter-hero">
          <div className="left">
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.3em", color: "var(--vermilion)" }}>WEEKLY EDITORIAL — FREE</div>
            <h1>編集部からの手紙</h1>
            <p>毎週土曜の朝、編集長三宅または当番編集者が、その週の取材で見えたことを綴ります。記事化の前段階の生の声、編集会議の風景、検証中のサービスの所感など、本誌に書かない話だけを書く媒体です。</p>
            <div style={{ display: "flex", gap: 24, fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.15em" }}>
              <div><span style={{ color: "var(--vermilion)", fontSize: 22, fontFamily: "'Crimson Pro', serif", fontWeight: 600 }}>12,400</span> 登録者</div>
              <div><span style={{ color: "var(--vermilion)", fontSize: 22, fontFamily: "'Crimson Pro', serif", fontWeight: 600 }}>62%</span> 開封率</div>
              <div><span style={{ color: "var(--vermilion)", fontSize: 22, fontFamily: "'Crimson Pro', serif", fontWeight: 600 }}>0</span> スパム</div>
            </div>
          </div>
          <form className="form" onSubmit={(e) => { e.preventDefault(); const email = (new FormData(e.target).get('email') || '').toString().trim(); if (!email || !email.includes('@')) { alert('メールアドレスを入力してください。'); return; } const s = encodeURIComponent('[cynix.jp] Newsletter Subscribe'); const b = encodeURIComponent('cynix.jp ニュースレター購読のお申し込み Email: ' + email); window.location.href = 'mailto:cynix@jpsm.ne.jp?subject=' + s + '&body=' + b; }}>
            <h6>SUBSCRIBE — 無料登録</h6>
            <input type="email" name="email" placeholder="you@example.com" />
            <input type="text" placeholder="お名前 (任意)" />
            <button type="submit">登録する →</button>
            <small>毎週土曜朝6時配信。いつでも1クリックで解除できます。<br />配信停止URLは全メール末尾に明示。プライバシーポリシーは <a href="/legal.html?tab=privacy" style={{ borderBottom: "1px solid currentColor" }}>こちら</a>。</small>
          </form>
        </section>

        {/* Featured letter */}
        <h2 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 30, fontWeight: 500, margin: "0 0 16px" }}>LATEST ISSUE — 最新号</h2>
        <article style={{ border: "2px solid var(--ink)", padding: "32px 40px", background: "var(--cream)", marginBottom: 48 }}>
          <header style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", borderBottom: "1px solid var(--ink)", paddingBottom: 14, marginBottom: 24 }}>
            <div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.18em", color: "var(--vermilion)" }}>ISSUE {featured.num} — {featured.date}</div>
              <h3 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 32, fontWeight: 500, margin: "8px 0 0", lineHeight: 1.25 }}>{featured.title}</h3>
            </div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", textAlign: "right" }}>BY <b style={{ color: "var(--vermilion)" }}>{authFt.name_jp}</b><br /><span style={{ opacity: 0.65 }}>{authFt.role_jp}</span></div>
          </header>
          <p style={{ fontFamily: "'Crimson Pro', serif", fontSize: 17, lineHeight: 1.85, fontStyle: "italic", margin: "0 0 24px" }}>{featured.excerpt}</p>
          <div style={{ display: "flex", gap: 12 }}>
            <a href={`editors-letter.html?num=${featured.num}`} style={{ display: "inline-block", padding: "12px 24px", background: "var(--ink)", color: "var(--paper)", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.15em" }}>続きを読む →</a>
            <a href="/editors-letter.html" style={{ display: "inline-block", padding: "12px 24px", border: "1px solid var(--ink)", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.15em" }}>バックナンバー一覧</a>
          </div>
        </article>

        {/* Past issues preview */}
        <h2 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 30, fontWeight: 500, margin: "0 0 16px" }}>BACK ISSUES — バックナンバー</h2>
        {EDITORS_LETTERS.slice(0, 6).filter(l => !l.featured).map(l => {
          const a = findAuth(l.author);
          return (
            <div className="mod-letter-issue" key={l.num}>
              <div className="num">{l.num}<small>ISSUE</small></div>
              <div className="body">
                <h3>{l.title}</h3>
                <p>{l.excerpt}</p>
              </div>
              <div className="side">
                <div>{l.date}</div>
                <div style={{ color: "var(--vermilion)", fontWeight: 600 }}>{a.name_jp}</div>
                <div style={{ opacity: 0.65, textTransform: "none" }}>{a.role_jp}</div>
                <a href={`editors-letter.html?num=${l.num}`} style={{ marginTop: "auto", padding: "6px 10px", background: "var(--ink)", color: "var(--paper)", textAlign: "center", fontSize: 10 }}>READ</a>
              </div>
            </div>
          );
        })}

        {/* What you get */}
        <h2 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 30, fontWeight: 500, margin: "48px 0 16px" }}>WHAT YOU GET — お届けする内容</h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, border: "2px solid var(--ink)", marginBottom: 48 }}>
          {[
            { n: "01", t: "編集会議の議事録", d: "次号で何を取り上げるか、なぜその切り口か。記事公開前の議論を共有します。" },
            { n: "02", t: "検証中のサービス所感", d: "30日連続検証中の生のレポート。記事化前の率直な印象を、メルマガ限定で。" },
            { n: "03", t: "編集者の私的おすすめ", d: "本誌では取り上げきれない、編集者個人として使っているツール・本・購読サービス。" },
          ].map((c, i) => (
            <div key={c.n} style={{ padding: "28px 24px", borderRight: i < 2 ? "1px solid var(--ink)" : "none" }}>
              <div style={{ fontFamily: "'Crimson Pro', serif", fontSize: 38, fontWeight: 600, color: "var(--vermilion)", lineHeight: 1 }}>{c.n}</div>
              <h4 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 18, fontWeight: 500, margin: "12px 0 8px" }}>{c.t}</h4>
              <p style={{ fontSize: 13, lineHeight: 1.8, margin: 0 }}>{c.d}</p>
            </div>
          ))}
        </div>

        {/* Subscribe again CTA */}
        <section style={{ background: "var(--ink)", color: "var(--paper)", padding: "40px 48px", marginBottom: 48, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, alignItems: "center" }}>
          <div>
            <h3 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 32, fontWeight: 500, margin: "0 0 12px" }}>登録は1クリック</h3>
            <p style={{ fontSize: 14, lineHeight: 1.85, margin: 0, opacity: 0.85 }}>毎週土曜朝6時、5分で読める分量で。<br />合わなければ1クリックで解除できます。</p>
          </div>
          <form onSubmit={(e) => { e.preventDefault(); const email = (new FormData(e.target).get('email') || '').toString().trim(); if (!email || !email.includes('@')) { alert('メールアドレスを入力してください。'); return; } const s = encodeURIComponent('[cynix.jp] Newsletter Subscribe'); const b = encodeURIComponent('cynix.jp ニュースレター購読のお申し込み Email: ' + email); window.location.href = 'mailto:cynix@jpsm.ne.jp?subject=' + s + '&body=' + b; }} style={{ display: "flex", gap: 8 }}>
            <input type="email" name="email" placeholder="メールアドレス" style={{ flex: 1, padding: "14px 16px", border: "1px solid var(--paper)", background: "transparent", color: "var(--paper)", fontFamily: "'Noto Sans JP', sans-serif", fontSize: 14 }} />
            <button type="submit" style={{ padding: "14px 24px", background: "var(--vermilion)", color: "var(--paper)", border: "none", fontFamily: "'JetBrains Mono', monospace", fontSize: 12, letterSpacing: "0.15em", cursor: "pointer" }}>登録</button>
          </form>
        </section>

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

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