/* DESIGN A — dark navy corporate homepage */

function DesignDark() {
  const nav = ["会社案内", "サービス案内", "採用情報", "お知らせ", "お問い合わせ"];
  const news = [
    { d: "2025.12.09", t: "年末年始営業のお知らせ" },
    { d: "2025.07.18", t: "夏期休業のお知らせ" },
    { d: "2024.12.05", t: "年末年始営業のお知らせ" },
  ];
  const cards = [
    { n: "01", en: "About Us", jp: "会社案内", tone: "glassA", img: "assets/about.jpg",
      p: "コンパス会計社は、税務・会計・社会保険労務のプロフェッショナルとして、お客様のビジネスを支えます。" },
    { n: "02", en: "Service", jp: "サービス案内", tone: "deskDark", img: "assets/service.jpg",
      p: "税務顧問から経営コンサルティングまで、お客様の課題に寄り添い、最適なソリューションをご提供します。" },
    { n: "03", en: "Recruit", jp: "採用情報", tone: "people", img: "assets/recruit.jpg",
      p: "コンパス会計社で、あなたの可能性を広げませんか。共に成長できる仲間を募集しています。" },
  ];

  return (
    <div className="page A">
      {/* header */}
      <header className="A-header">
        <div className="A-top">
          <Brand className="A-brand" color="#1b2230" />
          <div className="A-utils">
            <div className="A-social">
              <a className="fb" href="#" aria-label="Facebook"><I.fb /></a>
              <a className="ln" href="#" aria-label="LINE"><I.line /></a>
            </div>
            <div className="A-tel">
              <I.phone s={20} c="#16263f" />
              <span className="num">03-6279-3375</span>
            </div>
          </div>
        </div>
        <nav className="A-nav">
          {nav.map((n, i) => <a key={n} href="#" className={i === 0 ? "active" : ""}>{n}</a>)}
        </nav>
      </header>

      {/* hero */}
      <section className="A-hero">
        <Img tone="deskDark" src="assets/hero1.jpg" alt="コンパス会計社 メインビジュアル" />
        <div className="scrim" />
        <div className="inner">
          <h1>お客様の“不安”をクリアに、<br />私たちが提案します。</h1>
          <div className="sub">コンパス会計社</div>
        </div>
        <div className="A-scroll">SCROLL</div>
      </section>

      {/* trio */}
      <section className="A-trio">
        {cards.map((c) => (
          <a key={c.n} className="A-card" href="#">
            <Img tone={c.tone} src={c.img} alt={c.jp} />
            <div className="scrim" />
            <div className="body">
              <div className="num">{c.n}</div>
              <h3>{c.en}<span>{c.jp}</span></h3>
              <p>{c.p}</p>
              <span className="A-more">詳しく見る <span className="ar" /></span>
            </div>
          </a>
        ))}
      </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="A-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="#fff" />
              <span className="big">03-6279-3375</span>
            </a>
            <a className="contact-btn" href="#">
              <I.mail s={24} c="#fff" />
              <span className="lab">お問い合わせフォーム</span>
              <span className="ar2" />
            </a>
          </div>
        </div>
      </section>

      {/* footer */}
      <Footer variant="A" />
    </div>
  );
}

window.DesignDark = DesignDark;