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

const CONTACT_EMAIL = "cynix@jpsm.ne.jp";
const SUBJECTS = [
  { id: "editorial", label: "記事の取材依頼・寄稿希望", icon: "✎", lead: "編集部", sla: "3営業日以内", recipient: CONTACT_EMAIL },
  { id: "fact", label: "誤情報の指摘・訂正のお願い", icon: "△", lead: "ファクトチェック", sla: "1営業日以内", recipient: CONTACT_EMAIL, urgent: true },
  { id: "press", label: "プレスリリース・新サービス情報", icon: "P", lead: "編集部", sla: "5営業日以内", recipient: CONTACT_EMAIL },
  { id: "biz", label: "広告・タイアップのご相談", icon: "$", lead: "営業窓口", sla: "3営業日以内", recipient: CONTACT_EMAIL },
  { id: "join", label: "寄稿者として参加したい", icon: "+", lead: "編集長", sla: "7営業日以内", recipient: CONTACT_EMAIL },
  { id: "other", label: "その他のお問い合わせ", icon: "?", lead: "編集部", sla: "5営業日以内", recipient: CONTACT_EMAIL },
];

function buildMailto(formData, selected) {
  const get = (k) => (formData.get(k) || "").toString().trim();
  const subjectText = get("subject_text") || selected.label;
  const subject = "[cynix.jp / " + selected.label + "] " + subjectText;
  const lines = [
    "■ お問い合わせ種別: " + selected.label,
    "■ お名前: " + get("name"),
    "■ 所属: " + get("org"),
    "■ メール: " + get("email"),
    "■ 電話: " + get("phone"),
  ];
  if (get("fact_url")) lines.push("■ 該当記事URL: " + get("fact_url"));
  lines.push("", "─────────── 本文 ───────────", get("message"), "", "─────────── 送信元 ───────────", "cynix.jp お問い合わせフォーム", "送信日時: " + new Date().toLocaleString("ja-JP"));
  return "mailto:" + selected.recipient + "?subject=" + encodeURIComponent(subject) + "&body=" + encodeURIComponent(lines.join("\n"));
}

const FAQ = [
  { q: "返信までどれくらいかかりますか？", a: "種別ごとに異なります。誤情報の指摘は最優先で1営業日、その他は3〜7営業日以内に編集部から返信します。お急ぎの場合はメール件名に【至急】とご記載ください。" },
  { q: "PR記事・タイアップは受けていますか？", a: "はい、受けています。ただし編集部の選定方針に合致する場合のみで、コンテンツは必ず[PR]ラベルを明示します。順位や評価の差し替えはお請けできません。" },
  { q: "提供サンプルは受け取りますか？", a: "原則として受け取りません。編集部が必要と判断したサービスは、編集部の予算で実契約します。送られてきた物品はご返送します。" },
  { q: "電話での問い合わせは可能ですか？", a: "現在、電話窓口は設けておりません。記録の正確性を担保するため、すべてメールでの応対をお願いしています。" },
  { q: "誤った情報を見つけたら？", a: "「誤情報の指摘」フォームから件名に該当URLを記載してご連絡ください。確認後、24時間以内に訂正・追記します。訂正履歴はすべて記事末尾に明示します。" },
];

const App = () => {
  const [subject, setSubject] = useState("editorial");
  const selected = SUBJECTS.find((s) => s.id === subject);

  return (
    <div className="cross-shell">
      <SharedMasthead section="CONTACT · EDITORIAL · DESK" />
      <Breadcrumb items={[
        { label: "HOME", href: "cynix-jp.html" },
        { label: "CONTACT" },
      ]} />

      <div className="cross-head">
        <div>
          <div className="kicker">CYNIX.JP — EDITORIAL DESK</div>
          <h1>
            編集部に、<em>手紙を</em>。
          </h1>
          <p className="deck">
            訂正のご指摘、寄稿のご相談、取材のお申し込み、その他何でも。 cynix.jp編集部は、読者・取材先・寄稿希望者からのコンタクトを大切にしています。種別を選んでいただくと、適切な担当者へ最短で届きます。
          </p>
        </div>
        <div className="meta">
          <span>RESPONSE</span>
          <span className="big">3-5</span>
          <span>BUSINESS DAYS</span>
          <span style={{ marginTop: 8 }}>FACT-CHECK · 1 DAY</span>
        </div>
      </div>

      {/* Contact form — magazine "letter to the editor" style */}
      <div className="cross-h2">
        <span className="num">SECTION 01</span>
        <span className="label">お問い合わせフォーム</span>
        <span className="right">SELECT TYPE → COMPOSE → SEND</span>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "320px 1fr", gap: 0, border: "2px solid var(--ink)", marginBottom: 56 }}>
        {/* Subject sidebar */}
        <div style={{ background: "var(--cream)", borderRight: "1px solid var(--ink)", padding: "20px 0" }}>
          <div style={{ padding: "0 20px", marginBottom: 12, fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", color: "var(--vermilion)", fontWeight: 700 }}>STEP 01 · 種別を選ぶ</div>
          <div>
            {SUBJECTS.map((s) => (
              <button key={s.id} onClick={() => setSubject(s.id)} style={{
                display: "grid", gridTemplateColumns: "32px 1fr", gap: 12, alignItems: "start",
                width: "100%", padding: "14px 20px", textAlign: "left",
                background: subject === s.id ? "var(--ink)" : "transparent",
                color: subject === s.id ? "var(--paper)" : "var(--ink)",
                border: "none", borderTop: "1px solid var(--ink)",
                cursor: "pointer", transition: "background 0.15s",
                fontFamily: "inherit",
              }}>
                <span style={{
                  width: 28, height: 28, borderRadius: "50%",
                  background: subject === s.id ? "var(--vermilion)" : "var(--paper)",
                  color: subject === s.id ? "var(--paper)" : "var(--vermilion)",
                  border: "1px solid currentColor",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontFamily: "'JetBrains Mono', monospace", fontSize: 13, fontWeight: 700,
                  flexShrink: 0,
                }}>{s.icon}</span>
                <div>
                  <div style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 13, fontWeight: 700, lineHeight: 1.4 }}>
                    {s.label}
                    {s.urgent && <span style={{ marginLeft: 6, padding: "1px 5px", background: "var(--vermilion)", color: "var(--paper)", fontSize: 9, fontFamily: "'JetBrains Mono', monospace", letterSpacing: "0.05em", verticalAlign: "middle" }}>URGENT</span>}
                  </div>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.1em", textTransform: "uppercase", marginTop: 3, opacity: 0.65 }}>
                    → {s.lead} · {s.sla}
                  </div>
                </div>
              </button>
            ))}
          </div>
        </div>

        {/* Form body */}
        <form
          style={{ padding: "32px 36px", background: "var(--paper)" }}
          onSubmit={(e) => {
            e.preventDefault();
            if (!e.target.agree.checked) {
              alert("プライバシーポリシーに同意のチェックをお願いします。");
              return;
            }
            const fd = new FormData(e.target);
            window.location.href = buildMailto(fd, selected);
          }}
        >
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 6 }}>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", color: "var(--vermilion)", fontWeight: 700 }}>STEP 02 · 内容を記入</div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.1em", color: "var(--ink)" }}>TO: <span style={{ color: "var(--vermilion)", fontWeight: 700 }}>{selected.recipient}</span></div>
          </div>
          <h3 style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 22, fontWeight: 900, lineHeight: 1.3, margin: "8px 0 24px" }}>{selected.label}</h3>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 16 }}>
            <div>
              <label style={{ display: "block", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", color: "var(--ink)", fontWeight: 700, marginBottom: 6 }}>
                NAME / お名前 <span style={{ color: "var(--vermilion)" }}>*</span>
              </label>
              <input type="text" name="name" required defaultValue="" placeholder="山田 太郎" style={inputStyle} />
            </div>
            <div>
              <label style={{ display: "block", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", color: "var(--ink)", fontWeight: 700, marginBottom: 6 }}>
                ORGANIZATION / 所属
              </label>
              <input type="text" name="org" defaultValue="" placeholder="株式会社○○" style={inputStyle} />
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 16 }}>
            <div>
              <label style={{ display: "block", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", color: "var(--ink)", fontWeight: 700, marginBottom: 6 }}>
                EMAIL <span style={{ color: "var(--vermilion)" }}>*</span>
              </label>
              <input type="email" name="email" required defaultValue="" placeholder="you@example.com" style={inputStyle} />
            </div>
            <div>
              <label style={{ display: "block", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", color: "var(--ink)", fontWeight: 700, marginBottom: 6 }}>
                PHONE / 電話 (任意)
              </label>
              <input type="tel" name="phone" defaultValue="" placeholder="03-0000-0000" style={inputStyle} />
            </div>
          </div>

          {subject === "fact" && (
            <div style={{ marginBottom: 16 }}>
              <label style={{ display: "block", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", color: "var(--ink)", fontWeight: 700, marginBottom: 6 }}>
                該当記事URL <span style={{ color: "var(--vermilion)" }}>*</span>
              </label>
              <input type="url" name="fact_url" required defaultValue="" placeholder="https://cynix.jp/article/..." style={inputStyle} />
            </div>
          )}

          <div style={{ marginBottom: 16 }}>
            <label style={{ display: "block", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", color: "var(--ink)", fontWeight: 700, marginBottom: 6 }}>
              SUBJECT / 件名 <span style={{ color: "var(--vermilion)" }}>*</span>
            </label>
            <input type="text" name="subject_text" required defaultValue="" placeholder="件名を入力してください" style={inputStyle} />
          </div>

          <div style={{ marginBottom: 16 }}>
            <label style={{ display: "block", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", color: "var(--ink)", fontWeight: 700, marginBottom: 6 }}>
              MESSAGE / 本文 <span style={{ color: "var(--vermilion)" }}>*</span>
            </label>
            <textarea name="message" required rows={8} placeholder="お問い合わせの内容を、できるだけ具体的にお書きください。" style={{ ...inputStyle, fontFamily: "'Noto Sans JP', serif", lineHeight: 1.7, resize: "vertical" }} defaultValue="" />
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--muted)", marginTop: 4, textAlign: "right" }}>
              送信ボタンを押すとメーラーが起動し、 cynix@jpsm.ne.jp 宛にメールを送信します。
            </div>
          </div>

          <div style={{ display: "flex", alignItems: "center", padding: "16px 20px", border: "1px dashed var(--ink)", marginBottom: 24, background: "var(--cream)" }}>
            <input type="checkbox" id="agree" name="agree" required style={{ marginRight: 12, width: 16, height: 16, accentColor: "var(--vermilion)" }} />
            <label htmlFor="agree" style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 12, lineHeight: 1.7, color: "var(--ink)" }}>
              <a href="/legal.html" style={{ color: "var(--vermilion)", borderBottom: "1px solid currentColor" }}>プライバシーポリシー</a> に同意の上、送信します。お問い合わせ内容は編集部内で共有され、ご返信のためのみに利用します。
            </label>
          </div>

          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 20, borderTop: "1px solid var(--ink)" }}>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.1em", color: "var(--muted)" }}>
              STEP 03 · 送信 → {selected.recipient}
            </div>
            <button type="submit" style={{
              padding: "14px 32px", background: "var(--ink)", color: "var(--paper)",
              border: "1px solid var(--ink)", fontFamily: "'Noto Sans JP', serif", fontWeight: 900, fontSize: 14,
              cursor: "pointer", letterSpacing: "0.02em",
            }}>
              送信する <span style={{ fontFamily: "'JetBrains Mono', monospace", marginLeft: 6 }}>→</span>
            </button>
          </div>
        </form>
      </div>

      {/* Direct contacts grid */}
      <div className="cross-h2">
        <span className="num">SECTION 02</span>
        <span className="label">DIRECT CONTACTS — 直接ご連絡</span>
        <span className="right">6 ROUTES</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, marginBottom: 56, border: "1px solid var(--ink)" }}>
        {SUBJECTS.map((s, i) => (
          <div key={s.id} style={{
            padding: "20px 22px",
            borderRight: (i + 1) % 3 !== 0 ? "1px solid var(--ink)" : "none",
            borderBottom: i < 3 ? "1px solid var(--ink)" : "none",
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
              <span style={{ width: 24, height: 24, borderRadius: "50%", background: "var(--ink)", color: "var(--vermilion)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "'JetBrains Mono', monospace", fontSize: 12, fontWeight: 700 }}>{s.icon}</span>
              <span style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 13, fontWeight: 900, lineHeight: 1.4 }}>{s.label}</span>
            </div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 700, color: "var(--vermilion)", marginBottom: 4 }}>{s.recipient}</div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--muted)" }}>
              {s.lead} · {s.sla}
            </div>
          </div>
        ))}
      </div>

      {/* Address/legal entity */}
      <div className="cross-h2">
        <span className="num">SECTION 03</span>
        <span className="label">運営会社情報 — Office</span>
        <span className="right">CYNIX EDITORIAL CO., LTD.</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, border: "1px solid var(--ink)", marginBottom: 64 }}>
        <div style={{ padding: "32px 36px", borderRight: "1px solid var(--ink)" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "'Noto Serif JP', serif", fontSize: 13 }}>
            <tbody>
              {[
                ["商号", "株式会社cynix編集部"],
                ["代表者", "三宅 直人 (編集長兼任)"],
                ["設立", "2025年7月"],
                ["所在地", "〒150-0042 東京都渋谷区宇田川町△△ -○○ 編集部ビル3F"],
                ["事業内容", "オンライン雑誌『cynix.jp』の編集・運営、IT選定コンサルティング"],
                ["登録番号", "T○○○○○○○○○○○○○ (適格請求書発行事業者)"],
              ].map(([k, v]) => (
                <tr key={k} style={{ borderBottom: "1px dashed var(--ink)" }}>
                  <th style={{ textAlign: "left", padding: "10px 12px 10px 0", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.1em", color: "var(--vermilion)", fontWeight: 700, textTransform: "uppercase", verticalAlign: "top", width: 100 }}>{k}</th>
                  <td style={{ padding: "10px 0", lineHeight: 1.6 }}>{v}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div style={{
          background: "var(--ink)", color: "var(--paper)", padding: "32px 36px",
          display: "flex", flexDirection: "column", justifyContent: "center",
        }}>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.2em", color: "var(--highlight)", fontWeight: 700, marginBottom: 12 }}>OFFICE HOURS</div>
          <div style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 22, fontWeight: 900, marginBottom: 16, lineHeight: 1.4 }}>平日 10:00 — 18:00<br />土・日・祝 休業</div>
          <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 13, lineHeight: 1.85, opacity: 0.85, margin: "0 0 12px" }}>
            お問い合わせは24時間受け付けています。営業時間外にいただいたメールは、翌営業日から順次対応します。
          </p>
          <p style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.1em", color: "var(--highlight)", fontWeight: 700, margin: 0 }}>
            ✉ hello@cynix.jp
          </p>
        </div>
      </div>

      {/* FAQ */}
      <div className="cross-h2">
        <span className="num">SECTION 04</span>
        <span className="label">FREQUENTLY ASKED — よくあるご質問</span>
        <span className="right">5 QUESTIONS</span>
      </div>
      <div style={{ marginBottom: 64 }}>
        {FAQ.map((f, i) => (
          <details key={i} style={{
            borderTop: "1px solid var(--ink)", borderBottom: i === FAQ.length - 1 ? "1px solid var(--ink)" : "none",
            padding: "18px 0",
          }}>
            <summary style={{
              listStyle: "none", cursor: "pointer", display: "flex", alignItems: "baseline", gap: 16,
              fontFamily: "'Noto Sans JP', serif", fontSize: 16, fontWeight: 900,
            }}>
              <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 14, fontWeight: 700, color: "var(--vermilion)" }}>Q.{String(i + 1).padStart(2, "0")}</span>
              <span style={{ flex: 1 }}>{f.q}</span>
              <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 18, fontWeight: 700, color: "var(--vermilion)" }}>+</span>
            </summary>
            <div style={{ display: "flex", gap: 16, marginTop: 12, paddingLeft: 8 }}>
              <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 14, fontWeight: 700, color: "var(--ink)", flexShrink: 0 }}>A.</span>
              <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 14, lineHeight: 1.85, color: "var(--muted)", margin: 0, textWrap: "pretty" }}>{f.a}</p>
            </div>
          </details>
        ))}
      </div>

      <Colophon />
    </div>
  );
};

const inputStyle = {
  width: "100%", padding: "12px 14px",
  border: "1px solid var(--ink)", background: "var(--paper)", color: "var(--ink)",
  fontFamily: "'JetBrains Mono', monospace", fontSize: 13,
  outline: "none", boxSizing: "border-box",
};

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