/* DESIGN J — もみき風 (office-momiki.com near-clone, 税理士版)
   A faithful re-creation of a classic Japanese shigyo (士業) site:
   white centered header, brand-overlay hero with 3 gradient "bubbles",
   a global pill nav band, then a dense 2-column body (≈300px left
   sidebar + ≈840px right main), and a text-nav footer with a
   brand-ink copyright band. All brand color comes from theme vars,
   so the palette switcher (navy → green) re-skins it into the
   original momiki-style green. Deliberately distinct from D (navy
   re-interpretation): J is the literal layout clone. */

function DesignMomiki() {
  const gnav = ["事務所概要", "スタッフ紹介", "業務のご案内", "個人のお客様", "法人のお客様", "費用・報酬", "お問い合わせ"];

  const bubbles = ["税務・会計\n関連業務", "社会保険労務\n関連業務", "経営・法人\n関連業務"];

  const sideNav = ["税務・会計顧問", "社会保険労務士業務", "経営コンサルティング", "個人のお客様", "法人のお客様"];

  const sideBoxes = [
    { ic: <I.people />, t: "代表インタビュー", p: "「かかりつけ」に込めた想い" },
    { ic: <I.calc />, t: "スタッフブログ", p: "事務所の日々をお届けします" },
    { ic: <I.chart />, t: "無料相談の窓口", p: "初回のご相談は無料です" },
  ];

  const services = [
    { t: "税務・会計\n関連業務", p: "月次顧問・決算申告・記帳代行" },
    { t: "社会保険労務\n関連業務", p: "給与計算・就業規則・助成金" },
    { t: "経営・法人\n関連業務", p: "創業支援・事業計画・資金繰り" },
  ];

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

  const blog = [
    { d: "2025.11.20", cat: "その他（一般）", au: "田中 誠", t: "高田馬場の秋、事務所の窓辺から一枚。" },
    { d: "2025.10.02", cat: "その他（一般）", au: "田中 誠", t: "インボイス制度、ここだけは押さえたい要点。" },
    { d: "2025.08.19", cat: "その他（一般）", au: "田中 誠", t: "スタッフ研修に行ってきました。" },
  ];

  return (
    <div className="page J">
      {/* ============ header (white, centered container) ============ */}
      <header className="mk-header">
        <div className="mk-head-in">
          <a className="mk-logo" href="#top">
            <LogoMark color="currentColor" size={46} />
            <div className="mk-logo-txt">
              <span className="mk-cred">税理士　社会保険労務士</span>
              <span className="mk-name">コンパス会計社</span>
            </div>
          </a>
          <div className="mk-head-addr">
            東京都新宿区高田馬場4-3-7 KSビル2F
          </div>
          <div className="mk-head-tel">
            <span className="mk-tel-ic"><I.phone s={30} c="currentColor" /></span>
            <div className="mk-tel-body">
              <span className="mk-tel-num">03-6279-3375</span>
              <span className="mk-tel-hrs">平日 9:00〜18:00</span>
              <span className="mk-tel-note">土日祝日も受付しております。</span>
            </div>
          </div>
        </div>
      </header>

      {/* ============ hero (full-width, brand overlay + 3 bubbles) ============ */}
      <section className="mk-hero">
        <Img tone="cityLight" src="assets/hero2.jpg" alt="コンパス会計社 メインビジュアル" />
        <div className="mk-hero-veil" aria-hidden="true" />
        <div className="mk-hero-in">
          <h1 className="mk-hero-catch">
            あなたに寄り添う<br />
            「かかりつけ」の会計事務所
          </h1>
          <div className="mk-bubbles">
            {bubbles.map((b, i) => (
              <div className="mk-bubble" key={i}>
                <span>{b.split("\n").map((l, j) => <React.Fragment key={j}>{l}<br /></React.Fragment>)}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============ global nav band (pills) ============ */}
      <nav className="mk-gnav">
        <div className="mk-gnav-in">
          {gnav.map((n) => (
            <a className="mk-pill" href="#" key={n}>{n}</a>
          ))}
        </div>
      </nav>

      {/* ============ body: 2 columns ============ */}
      <div className="mk-body">
        <div className="mk-body-in">
          {/* ------- left sidebar ------- */}
          <aside className="mk-side">
            <div className="mk-callbox">
              <div className="mk-callbox-h">無料相談のお申し込み</div>
              <div className="mk-callbox-b">
                <span className="mk-callbox-ic"><I.phone s={26} c="currentColor" /></span>
                <div>
                  <div className="mk-callbox-num">03-6279-3375</div>
                  <div className="mk-callbox-hrs">平日 9:00〜18:00</div>
                  <div className="mk-callbox-note">土日祝日も受付しております。</div>
                </div>
              </div>
            </div>

            <a className="mk-formbtn" href="#">
              <span className="mk-formbtn-ic"><I.mail s={20} c="currentColor" /></span>
              <span className="mk-formbtn-txt">
                <b>お問い合わせフォーム</b>
                <small>24時間受付</small>
              </span>
              <span className="mk-chev"><I.chev /></span>
            </a>

            <div className="mk-side-h">業務のご案内</div>
            <div className="mk-side-nav">
              {sideNav.map((s) => (
                <a className="mk-side-btn" href="#" key={s}>
                  <span>{s}</span>
                  <span className="mk-chev"><I.chev /></span>
                </a>
              ))}
            </div>

            <div className="mk-side-cards">
              {sideBoxes.map((b) => (
                <a className="mk-side-card" href="#" key={b.t}>
                  <span className="mk-side-card-ic">{b.ic}</span>
                  <span className="mk-side-card-txt">
                    <b>{b.t}</b>
                    <small>{b.p}</small>
                  </span>
                </a>
              ))}
            </div>
          </aside>

          {/* ------- right main ------- */}
          <main className="mk-main">
            {/* greeting */}
            <section className="mk-greet">
              <h2 className="mk-h2">ごあいさつ</h2>
              <div className="mk-greet-in">
                <div className="mk-greet-txt">
                  <p>
                    このたびは、コンパス会計社のホームページをご覧いただき、誠にありがとうございます。
                    私たちは高田馬場を拠点に、税務・会計から社会保険労務、経営のご相談までを
                    ワンストップでお引き受けする「かかりつけ」の事務所です。
                  </p>
                  <p>
                    数字の向こうには、必ずお客様一人ひとりの想いや暮らしがあります。
                    その想いに寄り添い、専門用語をかみ砕きながら、わかりやすく・誠実に。
                    小さなご相談ほど、どうぞお気軽にお声がけください。
                  </p>
                  <p>
                    お客様が本業に集中できるよう、面倒な手続きや数字まわりは私たちが。
                    末永いお付き合いのなかで、事業と暮らしの安心をお守りしてまいります。
                  </p>
                  <a className="mk-more" href="#">…つづきはこちら<span className="mk-chev"><I.chev /></span></a>
                </div>
                <figure className="mk-greet-fig">
                  <div className="mk-portrait">
                    <Img tone="office" src="assets/ceo.jpg" alt="代表 田中 誠" />
                  </div>
                  <figcaption>代表　田中 誠</figcaption>
                </figure>
              </div>
            </section>

            {/* 3 service boxes */}
            <section className="mk-serv">
              {services.map((s) => (
                <a className="mk-serv-card" href="#" key={s.t}>
                  <h3 className="mk-serv-title">
                    {s.t.split("\n").map((l, j) => <React.Fragment key={j}>{l}<br /></React.Fragment>)}
                  </h3>
                  <p className="mk-serv-note">{s.p}</p>
                </a>
              ))}
            </section>

            {/* 2 wide boxes */}
            <section className="mk-wide">
              <a className="mk-wide-card mk-wide-person" href="#">
                <div className="mk-wide-body">
                  <b>個人のお客様</b>
                  <small>確定申告・相続・開業支援</small>
                </div>
              </a>
              <a className="mk-wide-card mk-wide-corp" href="#">
                <div className="mk-wide-body">
                  <b>法人のお客様</b>
                  <small>法人税務・記帳代行・給与計算・助成金</small>
                </div>
              </a>
            </section>

            {/* news */}
            <section className="mk-panel">
              <div className="mk-panel-h">
                <span>更新情報・ニュース</span>
                <span className="mk-panel-chev"><I.chev /></span>
              </div>
              <div className="mk-news">
                {news.map((n, i) => (
                  <a className="mk-news-row" href="#" key={i}>
                    <span className="mk-news-date">{n.d}</span>
                    <span className="mk-news-ttl">{n.t}</span>
                  </a>
                ))}
              </div>
            </section>

            {/* blog */}
            <section className="mk-panel">
              <div className="mk-panel-h">
                <span>スタッフブログ</span>
                <span className="mk-panel-chev"><I.chev /></span>
              </div>
              <div className="mk-blog">
                {blog.map((b, i) => (
                  <a className="mk-blog-row" href="#" key={i}>
                    <span className="mk-avatar">
                      <Img tone="people" src="assets/ceo.jpg" alt={b.au} />
                    </span>
                    <div className="mk-blog-body">
                      <div className="mk-blog-meta">
                        <span className="mk-blog-date">{b.d}</span>
                        <span className="mk-cat">{b.cat}</span>
                        <span className="mk-blog-au">{b.au}</span>
                      </div>
                      <div className="mk-blog-ttl">{b.t}</div>
                    </div>
                  </a>
                ))}
              </div>
            </section>
          </main>
        </div>
      </div>

      {/* ============ footer ============ */}
      <footer className="mk-footer">
        <div className="mk-foot-in">
          <div className="mk-foot-nav">
            {["HOME", "事務所概要", "スタッフ紹介", "業務のご案内", "個人のお客様", "法人のお客様", "費用・報酬", "お問い合わせ"].map((l) => (
              <a href="#" key={l}>{l}</a>
            ))}
          </div>
          <div className="mk-foot-nav mk-foot-sub">
            {["プライバシーポリシー", "更新情報・ニュース", "サイトマップ"].map((l) => (
              <a href="#" key={l}>{l}</a>
            ))}
          </div>
        </div>
        <div className="mk-copy">Copyright © コンパス会計社</div>
      </footer>
    </div>
  );
}

window.DesignMomiki = DesignMomiki;