/* DESIGN B — light / elegant corporate homepage */

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

  return (
    <div className="page B">
      {/* header */}
      <header className="B-header">
        <Brand className="B-brand" color="#1b2230" />
        <nav className="B-nav">
          {nav.map((n) => <a key={n} href="#">{n}</a>)}
        </nav>
        <div className="B-tel">
          <I.phone s={20} c="#16263f" />
          <div>
            <div className="num">03-6279-3375</div>
            <div className="hrs">平日 9:00-18:00</div>
          </div>
        </div>
        <a className="B-cta" href="#">
          <I.mail s={20} c="#fff" />
          お問い合わせ
        </a>
      </header>

      {/* hero */}
      <section className="B-hero">
        <div className="inner">
          <div className="art">
            <Img tone="cityLight" src="assets/hero2.jpg" alt="コンパス会計社 メインビジュアル" />
          </div>
          <div className="copy">
            <h1>お客様の“不安”をクリアに、<br />私たちが提案します。</h1>
            <p className="lead">税務・会計・社会保険労務の専門家として、<br />お客様のビジネスの成長を支えるパートナーであり続けます。</p>
            <div className="rule" />
            <div className="brandline">コンパス会計社</div>
          </div>
          <div className="B-scroll">SCROLL</div>
        </div>
      </section>

      {/* services */}
      <section className="B-serv">
        <div className="serv-wrap">
          {serv.map((s) => (
            <a key={s.n} className="serv-card" href="#">
              <div className="serv-top">
                <span className="serv-num">{s.n}</span>
                <span className="serv-ic">{s.ic}</span>
              </div>
              <h3>{s.jp}</h3>
              <div className="en">{s.en}</div>
              <p>{s.p}</p>
              <span className="serv-more">詳しく見る <span className="ar" /></span>
            </a>
          ))}
        </div>
      </section>

      {/* news */}
      <section className="news">
        <div className="news-wrap">
          <div className="news-head">
            <h2>News</h2>
            <div className="jp">お知らせ</div>
            <div className="rule" />
            <a className="news-btn" href="#">一覧を見る <span className="ar" /></a>
          </div>
          <div className="news-list">
            {news.map((n, i) => (
              <a className="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 */}
      <section className="B-contact">
        <Img tone="buildingDark" src="assets/contact.jpg" alt="お問い合わせ" />
        <div className="scrim" />
        <div className="contact-wrap">
          <div className="contact-head">
            <h2>Contact</h2>
            <div className="jp">お問い合わせ</div>
            <p>ご相談・ご質問など、<br />お気軽にお問い合わせください。</p>
          </div>
          <div className="contact-actions">
            <a className="contact-btn" href="#">
              <I.phone s={26} c="#b9985a" />
              <div>
                <span className="big">03-6279-3375</span>
                <div className="sub2">平日 9:00-18:00</div>
              </div>
            </a>
            <a className="contact-btn" href="#">
              <I.mail s={24} c="#b9985a" />
              <div>
                <span className="lab">お問い合わせフォーム</span>
                <div className="sub2">24時間受付中</div>
              </div>
              <span className="ar2" />
            </a>
          </div>
        </div>
      </section>

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

window.DesignLight = DesignLight;