/* DESIGN L — マガジン / MAGAZINE
   高級誌のようなエディトリアル。フルブリード写真を主役に、
   重なる大きな明朝見出し・キャプション・号数メタで雑誌組版を再現。
   色はすべて theme.css の CSS 変数から取得（ブランド色ハードコード無し）。 */

function DesignMag() {
  const nav = ["会社案内", "サービス案内", "採用情報", "お知らせ", "お問い合わせ"];

  const feats = [
    {
      n: "01", jp: "税務・会計顧問", en: "TAX / ACCOUNTING",
      src: "assets/service.jpg", cap: "Monthly bookkeeping to settlement",
      p: "毎月の記帳から決算・申告まで。数字を「分かる言葉」に翻訳し、経営者が本業に集中できる確かな土台を、伴走しながら整えます。",
    },
    {
      n: "02", jp: "社会保険労務士業務", en: "LABOR / SOCIAL INSURANCE",
      src: "assets/recruit.jpg", cap: "People, rules & social insurance",
      p: "入退社の手続き、就業規則、社会保険。人にまつわる煩雑な実務をまるごとお預かりし、働きやすい組織づくりを支えます。",
    },
    {
      n: "03", jp: "経営コンサルティング", en: "CONSULTING",
      src: "assets/about.jpg", cap: "Cash flow & next moves",
      p: "資金繰り・事業計画・補助金申請。かかりつけ医のように御社の状態を継続的に見守り、次の一手を数字とともにご提案します。",
    },
  ];

  const news = [
    { d: "2025.12.09", c: "NOTICE", t: "年末年始休業のお知らせ" },
    { d: "2025.07.18", c: "NOTICE", t: "夏期休業のお知らせ" },
    { d: "2024.12.05", c: "NOTICE", t: "年末年始休業のお知らせ" },
  ];

  const footNav = ["会社案内", "サービス案内", "採用情報", "お知らせ", "お問い合わせ", "プライバシーポリシー"];

  return (
    <div className="page L" id="top">
      {/* ---------- masthead / header ---------- */}
      <header className="L-hd">
        <div className="L-hd-in">
          <Brand className="L-brand" color="var(--brand)" />
          <nav className="L-nav">
            {nav.map((n) => <a key={n} href="#">{n}</a>)}
          </nav>
          <a className="L-tel" href="tel:0362793375">
            <I.phone s={16} c="var(--brand)" />
            <span className="num">03-6279-3375</span>
          </a>
        </div>
        <div className="L-masthead">
          <span className="line" />
          <span className="ttl">COMPASS-TAX JOURNAL</span>
          <span className="sub">EST. 高田馬場 · 税理士 &amp; 社会保険労務士</span>
          <span className="line" />
        </div>
      </header>

      {/* ---------- hero (full-bleed photo + overlapping headline) ---------- */}
      <section className="L-hero">
        <div className="L-hero-media">
          <Img src="assets/hero1.jpg" alt="高田馬場のオフィス" tone="buildingDark" />
          <span className="L-hero-cap">Photograph — Takadanobaba, Shinjuku</span>
        </div>
        <div className="L-hero-copy">
          <span className="kicker">COMPASS-TAX JOURNAL — 高田馬場</span>
          <h1>
            お客様の<em className="q">“不安”</em>を<br />
            クリアに、私たちが<br />
            提案します。
          </h1>
          <p className="lead">
            税務・会計から労務、経営の舵取りまで。数字の専門家として、
            経営者の傍らでいちばん近い相談相手であり続ける事務所です。
          </p>
          <div className="meta">
            <span className="vol">Vol. 04</span>
            <span className="sep" />
            <span>2025 — 税理士・社会保険労務士事務所</span>
          </div>
        </div>
      </section>

      {/* ---------- about / philosophy — editorial two column ---------- */}
      <section className="L-about">
        <div className="L-about-in">
          <figure className="L-about-fig">
            <Img src="assets/about_head.jpg" alt="コンパス会計社の理念" tone="office" />
            <figcaption>The office where numbers meet people.</figcaption>
          </figure>
          <div className="L-about-body">
            <span className="sec-no">01 — PHILOSOPHY</span>
            <h2>数字の向こうに、<br />人の営みを見つめて。</h2>
            <p className="drop">
              <span className="dropcap">私</span>たちは、決算書の数字を「作る」だけの事務所ではありません。
              その一つひとつの数字の裏側にある、経営者の決断や、働く人々の日々の営みまでを見つめ、
              寄り添うことを大切にしています。
            </p>
            <p>
              「こんな初歩的なこと、聞いていいのだろうか」——そう思うご相談こそ大歓迎です。
              専門用語をかみくだき、いつでも顔の見える距離で、御社の歩みを末永くお手伝いします。
            </p>
            <div className="sign">
              <span className="role">代表税理士・社会保険労務士</span>
              <span className="nm">田中　誠</span>
            </div>
          </div>
        </div>
      </section>

      {/* ---------- services — feature gallery ---------- */}
      <section className="L-serv">
        <header className="L-serv-hd">
          <span className="sec-no">02 — FEATURES</span>
          <h2>特集 · 3つのサービス</h2>
          <p>経営を支える3つの柱を、それぞれの現場から。</p>
        </header>
        <div className="L-serv-grid">
          {feats.map((f) => (
            <article className="L-feat" key={f.n}>
              <a className="L-feat-media" href="#">
                <Img src={f.src} alt={f.jp} tone="glassA" />
                <span className="L-feat-n">{f.n}</span>
                <span className="L-feat-cap">{f.cap}</span>
              </a>
              <div className="L-feat-body">
                <span className="en">{f.en}</span>
                <h3>{f.jp}</h3>
                <p>{f.p}</p>
                <a className="more" href="#">READ MORE <I.chev s={14} c="var(--accent)" /></a>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* ---------- news ---------- */}
      <section className="L-news">
        <div className="L-news-in">
          <header className="L-news-hd">
            <span className="sec-no">03 — NEWS</span>
            <h2>新着情報</h2>
          </header>
          <div className="L-news-list">
            {news.map((n, i) => (
              <a className="L-news-row" href="#" key={i}>
                <span className="date">{n.d}</span>
                <span className="cat">{n.c}</span>
                <span className="ttl">{n.t}</span>
                <span className="arw"><I.chev s={16} c="var(--brand)" /></span>
              </a>
            ))}
          </div>
          <a className="L-news-all" href="#">お知らせ一覧へ <I.chev s={15} c="var(--brand)" /></a>
        </div>
      </section>

      {/* ---------- contact — full-bleed photo band ---------- */}
      <section className="L-contact" id="contact">
        <div className="L-contact-media">
          <Img src="assets/contact.jpg" alt="お問い合わせ" tone="buildingDark" />
        </div>
        <div className="L-contact-in">
          <span className="kicker">CONTACT — 初回相談無料</span>
          <h2>まずは、お気軽に<br />お声がけください。</h2>
          <p>「何を聞けばいいか分からない」まま、そのままお越しいただいて大丈夫です。</p>
          <div className="L-contact-actions">
            <a className="tel" href="tel:0362793375">
              <span className="lab"><I.phone s={17} c="var(--on-brand)" />お電話でのご相談</span>
              <span className="num">03-6279-3375</span>
              <span className="hrs">受付 平日 9:00–18:00</span>
            </a>
            <a className="form" href="#">
              <I.mail s={20} c="var(--brand)" />
              <span className="ft">
                <span className="t1">お問い合わせフォーム</span>
                <span className="t2">24時間受付中</span>
              </span>
              <I.chev s={18} c="var(--brand)" />
            </a>
          </div>
        </div>
      </section>

      {/* ---------- footer ---------- */}
      <footer className="L-ft">
        <div className="L-ft-in">
          <div className="L-ft-brand">
            <Brand className="L-brand" color="var(--on-brand)" />
            <div className="L-ft-info">
              <span className="co">株式会社コンパス会計社</span>
              税理士・社会保険労務士オフィス<br />
              〒169-0075 東京都新宿区高田馬場4-3-7 KSビル2F<br />
              TEL. 03-6279-3375 ／ 受付 平日 9:00–18:00
            </div>
          </div>
          <ul className="L-ft-nav">
            {footNav.map((l) => (
              <li key={l}><a href="#"><I.chev s={12} c="var(--accent)" />{l}</a></li>
            ))}
          </ul>
        </div>
        <div className="L-ft-bar">
          <small>© 2025 COMPASS-TAX Inc. — COMPASS-TAX JOURNAL</small>
          <a className="L-top" href="#top"><span className="up" />PAGE TOP</a>
        </div>
      </footer>
    </div>
  );
}

window.DesignMag = DesignMag;