/* DESIGN G — SPLIT
   Architectural, asymmetric layout: a full-height FIXED left sidebar
   (brand fill, white text) with the brand, vertical nav and contact
   info, while the RIGHT column scrolls the page content.
   Collapses to a static top header on ≤980px. */

function DesignSplit() {
  const nav = [
    { jp: "会社案内", en: "About" },
    { jp: "サービス案内", en: "Service" },
    { jp: "採用情報", en: "Recruit" },
    { jp: "お知らせ", en: "News" },
    { jp: "お問い合わせ", en: "Contact" },
  ];
  const news = [
    { d: "2025.12.09", t: "年末年始営業のお知らせ" },
    { d: "2025.07.18", t: "夏期休業のお知らせ" },
    { d: "2024.12.05", t: "年末年始営業のお知らせ" },
  ];
  const serv = [
    { n: "01", jp: "税務・会計顧問", en: "TAX / ACCOUNTING",
      p: "税務申告や会計業務のサポートを通じて、正確で信頼性の高い経営基盤を支えます。" },
    { n: "02", jp: "社会保険労務士業務", en: "LABOR / SOCIAL INSURANCE",
      p: "労務管理や社会保険手続きの最適化で、安心して働ける環境づくりを支援します。" },
    { n: "03", jp: "経営コンサルティング", en: "CONSULTING",
      p: "経営課題を共に解決し、企業の成長と未来のビジョン実現をサポートします。" },
  ];

  return (
    <div className="page G" id="top">
      {/* ---- fixed left sidebar ---- */}
      <aside className="G-side">
        <div className="G-side-top">
          <a className="G-brand" href="#top">
            <LogoMark color="#fff" size={40} />
            <div className="G-brand-name">
              コンパス会計社<small>COMPASS-TAX</small>
            </div>
          </a>
        </div>

        <nav className="G-nav" aria-label="メインナビ">
          {nav.map((n, i) => (
            <a key={n.jp} className="G-nav-link" href="#">
              <span className="G-nav-no">{"0" + (i + 1)}</span>
              <span className="G-nav-txt">
                <span className="jp">{n.jp}</span>
                <span className="en">{n.en}</span>
              </span>
            </a>
          ))}
        </nav>

        <div className="G-side-btm">
          <a className="G-tel" href="tel:0362793375">
            <I.phone s={18} c="#fff" />
            <span className="G-tel-txt">
              <span className="num">03-6279-3375</span>
              <span className="hrs">受付時間 平日 9:00-18:00</span>
            </span>
          </a>
          <div className="G-social">
            <a className="fb" href="#" aria-label="Facebook"><I.fb /></a>
            <a className="ln" href="#" aria-label="LINE"><I.line /></a>
          </div>
          <div className="G-addr">
            〒169-0075<br />東京都新宿区高田馬場4-3-7 KSビル2F
          </div>
        </div>
      </aside>

      {/* ---- scrolling right column ---- */}
      <div className="G-main">
        {/* hero */}
        <section className="G-hero">
          <Img tone="deskDark" src="assets/hero1.jpg" alt="コンパス会計社 メインビジュアル" />
          <div className="G-hero-scrim" />
          <div className="G-hero-inner">
            <div className="G-hero-en">COMPASS ACCOUNTING &amp; TAX OFFICE</div>
            <h1>お客様の“不安”をクリアに、<br />私たちが提案します。</h1>
            <p className="G-hero-lead">
              税務・会計・社会保険労務の専門家として、<br />
              お客様のビジネスの成長を支えるパートナーであり続けます。
            </p>
          </div>
          <div className="G-scroll">SCROLL</div>
        </section>

        {/* about */}
        <section className="G-about" id="about">
          <figure className="G-about-fig">
            <Img tone="cityLight" src="assets/about.jpg" alt="コンパス会計社について" />
          </figure>
          <div className="G-about-txt">
            <div className="G-eyebrow"><span className="bar" />About Us</div>
            <h2>羅針盤のように、<br />経営の進むべき道を示す。</h2>
            <p>
              コンパス会計社は、高田馬場を拠点とする税理士・社会保険労務士事務所です。
              税務・会計・労務のトータルサポートを通じて、お客様一人ひとりに寄り添い、
              企業の持続的な成長を支えるパートナーであり続けます。
            </p>
            <a className="G-textlink" href="#">詳しく見る<span className="G-ar" /></a>
          </div>
        </section>

        {/* service */}
        <section className="G-serv" id="service">
          <div className="G-sec-head">
            <div className="G-eyebrow"><span className="bar" />Service</div>
            <h2>サービス案内</h2>
          </div>
          <div className="G-serv-list">
            {serv.map((s) => (
              <a key={s.n} className="G-serv-row" href="#">
                <span className="G-serv-no">{s.n}</span>
                <span className="G-serv-body">
                  <span className="jp">{s.jp}</span>
                  <span className="en">{s.en}</span>
                  <span className="p">{s.p}</span>
                </span>
                <span className="G-ar" />
              </a>
            ))}
          </div>
        </section>

        {/* news */}
        <section className="G-news" id="news">
          <div className="G-sec-head">
            <div className="G-eyebrow"><span className="bar" />News</div>
            <h2>お知らせ</h2>
          </div>
          <div className="G-news-list">
            {news.map((n, i) => (
              <a key={i} className="G-news-row" href="#">
                <span className="date">{n.d}</span>
                <span className="ttl">{n.t}</span>
                <span className="chev"><I.chev /></span>
              </a>
            ))}
          </div>
          <a className="G-textlink G-news-more" href="#">一覧を見る<span className="G-ar" /></a>
        </section>

        {/* contact */}
        <section className="G-contact" id="contact">
          <div className="G-contact-head">
            <div className="G-eyebrow light"><span className="bar" />Contact</div>
            <h2>お気軽にお問い合わせください</h2>
            <p>ご相談・ご質問など、まずはお電話またはフォームよりご連絡ください。</p>
          </div>
          <div className="G-contact-actions">
            <a className="G-cbtn" href="tel:0362793375">
              <span className="G-cbtn-ic"><I.phone s={24} /></span>
              <span className="txt">
                <span className="big">03-6279-3375</span>
                <span className="sub">受付時間：平日 9:00-18:00</span>
              </span>
            </a>
            <a className="G-cbtn form" href="#">
              <span className="G-cbtn-ic"><I.mail s={22} /></span>
              <span className="txt">
                <span className="lab">お問い合わせフォーム</span>
                <span className="sub">24時間受付中</span>
              </span>
              <span className="G-ar light" />
            </a>
          </div>
        </section>

        <Footer variant="B" />
      </div>
    </div>
  );
}

window.DesignSplit = DesignSplit;