/* DESIGN C — full-bleed hero, About section, dark image service cards */

function DesignAbout() {
  const nav = ["会社案内", "サービス案内", "採用情報", "お知らせ", "お問い合わせ"];
  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", tone: "deskDark", img: "assets/service.jpg",
      p: "税務申告や会計業務のサポートを通じて、正確で信頼性の高い経営基盤を支えます。" },
    { n: "02", jp: "社会保険労務士業務", en: "LABOR / SOCIAL INSURANCE", tone: "office", img: "assets/recruit.jpg",
      p: "労務管理や社会保険手続きの最適化で、安心して働ける環境づくりを支援します。" },
    { n: "03", jp: "経営コンサルティング", en: "CONSULTING", tone: "people", img: "assets/service_head.jpg",
      p: "経営課題を共に解決し、企業の成長と未来のビジョン実現をサポートします。" },
  ];

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

      {/* about */}
      <section className="C-about">
        <div className="about-wrap">
          <div className="about-txt">
            <div className="en">About Us</div>
            <h2>コンパス会計社について</h2>
            <p>コンパス会計社は、税務・会計・社会保険労務の<br />トータルサポートを通じて、企業の持続的な成長に貢献します。</p>
            <a className="about-btn" href="#">詳しく見る <span className="ar" /></a>
          </div>
          <div className="about-img">
            <Img tone="cityLight" src="assets/about.jpg" alt="コンパス会計社について" />
          </div>
        </div>
      </section>

      {/* service */}
      <section className="C-serv">
        <div className="sec-head">
          <h2>Service</h2>
          <div className="jp">サービス案内</div>
          <div className="rule" />
        </div>
        <div className="cserv-wrap">
          {serv.map((s) => (
            <a key={s.n} className="cserv-card" href="#">
              <Img tone={s.tone} src={s.img} alt={s.jp} />
              <div className="scrim" />
              <div className="body">
                <div className="cserv-num">{s.n}</div>
                <h3>{s.jp}</h3>
                <div className="en">{s.en}</div>
                <p>{s.p}</p>
                <span className="cserv-more">詳しく見る <span className="ar" /></span>
              </div>
            </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 C-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>ご相談・ご質問などお気軽にお問い合わせください。</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.DesignAbout = DesignAbout;