/* DESIGN I — 和モダン (Wa Modern)
   Quiet, premium, distinctly Japanese: washi ground, mincho headings,
   tategaki (vertical) labels & hero couplet, hairline brand rules,
   generous "ma" (negative space). Navy + gold as restrained accents.
   Deliberately distinct from D (寄り添い / warm familiarity):
   this one is "refined stillness". */

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

  return (
    <div className="page I">
      {/* header — mincho brand, quiet horizontal nav, hairline rule */}
      <header className="wa-header">
        <div className="wa-head-in">
          <Brand className="wa-brand" color="currentColor" />
          <nav className="wa-nav">{nav.map((n) => <a key={n} href="#">{n}</a>)}</nav>
          <div className="wa-head-tel">
            <I.phone s={18} c="currentColor" />
            <div>
              <div className="num">03-6279-3375</div>
              <div className="hrs">平日 9:00-18:00</div>
            </div>
          </div>
        </div>
        <div className="wa-hairline" />
      </header>

      {/* hero — horizontal catch beside a tategaki couplet + framed photo */}
      <section className="wa-hero">
        <div className="wa-hero-in">
          <div className="wa-hero-copy">
            <div className="wa-eyebrow">税理士・社会保険労務士事務所<span className="sp">／</span>高田馬場</div>
            <h1>
              お客様の“不安”をクリアに、<br />
              私たちが提案します。
            </h1>
            <div className="wa-rule" />
            <p className="wa-lead">
              税務・会計・社会保険労務の専門家として、<br />
              お客様のビジネスの成長を、静かに、確かに支えます。
            </p>
            <a className="wa-btn" href="#">
              私たちについて<span className="ar" />
            </a>
          </div>
          <div className="wa-hero-art">
            <div className="wa-tate wa-tate-hero">信頼を、未来へ。</div>
            <div className="wa-frame">
              <Img tone="cityLight" src="assets/hero2.jpg" alt="コンパス会計社 メインビジュアル" />
            </div>
          </div>
        </div>
      </section>

      {/* greeting / philosophy — mincho, lots of ma */}
      <section className="wa-intro">
        <div className="wa-seigaiha" aria-hidden="true" />
        <div className="wa-intro-in">
          <div className="wa-side">
            <span className="wa-tate wa-tate-label">ご挨拶</span>
          </div>
          <div className="wa-intro-body">
            <div className="wa-en">Greeting</div>
            <h2>数字の向こうに、<br />人の営みがある。</h2>
            <p>
              私たちは羅針盤のように、お客様の歩む道を指し示す存在でありたいと考えています。
              一つひとつの数字に宿る想いに寄り添い、静かに、確かに。
              高田馬場の地から、確かな専門性と誠実さで、企業の未来を支えてまいります。
            </p>
            <div className="wa-sign">
              <span className="co">株式会社コンパス会計社</span>
              <span className="en">COMPASS-TAX</span>
            </div>
          </div>
          <div className="wa-intro-art">
            <div className="wa-frame wa-frame-tall">
              <Img tone="office" src="assets/ceo.jpg" alt="代表挨拶" />
            </div>
          </div>
        </div>
      </section>

      {/* services — tategaki numerals, mincho titles, quiet grid */}
      <section className="wa-serv">
        <div className="wa-sec-head">
          <div className="wa-en">Service</div>
          <h2>サービス案内</h2>
          <div className="wa-rule center" />
        </div>
        <div className="wa-serv-grid">
          {serv.map((s) => (
            <a key={s.k} className="wa-card" href="#">
              <span className="wa-num">{s.k}</span>
              <div className="wa-card-in">
                <span className="wa-ic">{s.ic}</span>
                <h3>{s.jp}</h3>
                <div className="wa-en small">{s.en}</div>
                <p>{s.p}</p>
                <span className="wa-more">詳しく見る<span className="ar" /></span>
              </div>
            </a>
          ))}
        </div>
      </section>

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

      {/* contact band — brand fill, white text, tel + form + hours */}
      <section className="wa-contact">
        <span className="wa-tate wa-tate-contact" aria-hidden="true">お問い合わせ</span>
        <div className="wa-contact-in">
          <div className="wa-contact-head">
            <div className="wa-en on">Contact</div>
            <h2>お気軽に、ご相談ください。</h2>
            <p>税務・労務・経営のご相談を承ります。まずはお電話またはフォームより。</p>
          </div>
          <div className="wa-contact-actions">
            <a className="wa-cbtn" href="#">
              <I.phone s={24} c="currentColor" />
              <div>
                <span className="big">03-6279-3375</span>
                <span className="sub">受付時間：平日 9:00-18:00</span>
              </div>
            </a>
            <a className="wa-cbtn form" href="#">
              <I.mail s={22} c="currentColor" />
              <div>
                <span className="lab">お問い合わせフォーム</span>
                <span className="sub">24時間受付中</span>
              </div>
              <span className="ar" />
            </a>
          </div>
        </div>
      </section>

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

window.DesignWa = DesignWa;