/* DESIGN M — DARK LUX  (フルダーク・ラグジュアリー)
   ページ全体がダーク。中立の near-black（#0f1319 系, 局所CSS変数）に
   ブランドの暗色を薄く重ね、アクセント（ゴールド var(--accent)）の
   細線・数字・微光で上質な高級感を演出。
   ・半透明の暗色ヘッダー＋白ナビ＋ゴールド枠線CTA
   ・静かなヒーロー（hero1.jpg 低opacity）＋ゴールドの装飾線と見出し
   ・ゴールド細枠のダークカード（ホバーで縁が光る）
   ・ゴールド巨大数字の「選ばれる理由」バンド
   ・ダーク行＋細罫のお知らせ／ダーク＋ゴールドのお問い合わせ
   共有ヘルパー（Brand / Img / I / Footer）を利用。色は theme.css の変数で切替。 */

function DesignDarkLux() {
  const nav = ["会社案内", "サービス案内", "採用情報", "お知らせ", "お問い合わせ"];

  const news = [
    { d: "2025.12.09", t: "年末年始営業のお知らせ", c: "NOTICE" },
    { d: "2025.07.18", t: "夏期休業のお知らせ", c: "NOTICE" },
    { d: "2024.12.05", t: "年末年始営業のお知らせ", c: "NOTICE" },
  ];

  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: "経営課題を共に解決し、企業の成長と未来のビジョンの実現を伴走してサポートします。" },
  ];

  const stats = [
    { num: "300", unit: "社", lab: "顧問先", en: "CLIENTS" },
    { num: "20",  unit: "年", lab: "実績",   en: "EXPERIENCE" },
    { num: "98",  unit: "%", lab: "満足度", en: "SATISFACTION" },
  ];

  return (
    <div className="page M">
      {/* ---------- HERO（全面ダーク・静かな高級感） ---------- */}
      <section className="M-hero">
        <Img tone="deskDark" src="assets/hero1.jpg" alt="コンパス会計社 メインビジュアル" />
        <div className="M-hero-glow" />
        <div className="M-hero-grain" />

        <header className="M-head">
          <Brand className="M-brand" color="#fff" />
          <nav className="M-nav">
            {nav.map((n, i) => (
              <a key={n} href="#" className={i === 0 ? "active" : ""}>{n}</a>
            ))}
          </nav>
          <div className="M-head-utils">
            <div className="M-tel">
              <I.phone s={17} />
              <div>
                <span className="num">03-6279-3375</span>
                <span className="hrs">平日 9:00-18:00</span>
              </div>
            </div>
            <a className="M-head-cta" href="#">お問い合わせ<I.chev s={13} /></a>
          </div>
        </header>

        <div className="M-hero-inner">
          <div className="M-hero-copy">
            <span className="M-eyebrow">COMPASS-TAX · 高田馬場</span>
            <h1>
              お客様の<em>“不安”</em>をクリアに、<br />
              私たちが<span className="ul">提案します。</span>
            </h1>
            <p className="M-lead">
              税務・会計・社会保険労務の専門家として、<br />
              確かな知見と誠実さで、企業の未来を上質に、力強く。
            </p>
            <div className="M-hero-btns">
              <a className="M-btn primary" href="#"><I.mail s={17} />お問い合わせ</a>
              <a className="M-btn ghost" href="#">サービスを見る<I.chev s={14} /></a>
            </div>
          </div>
        </div>

        <div className="M-scroll"><span>SCROLL</span></div>
      </section>

      {/* ---------- SERVICES（ゴールド細枠のダークカード） ---------- */}
      <section className="M-services">
        <div className="M-sec-head">
          <span className="M-sec-en">Services</span>
          <h2>サービス案内</h2>
          <div className="M-sec-rule" />
        </div>

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

      {/* ---------- STATS band（選ばれる理由・ゴールド巨大数字） ---------- */}
      <section className="M-stats">
        <div className="M-stats-wrap">
          <div className="M-stats-head">
            <span className="M-sec-en gold">Why COMPASS</span>
            <h2>選ばれる理由</h2>
          </div>
          <div className="M-stats-grid">
            {stats.map((s) => (
              <div key={s.lab} className="M-stat">
                <div className="M-stat-num">
                  <span className="big">{s.num}</span>
                  <span className="unit">{s.unit}</span>
                </div>
                <div className="M-stat-lab">{s.lab}</div>
                <div className="M-stat-en">{s.en}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- NEWS（ダーク行＋細罫） ---------- */}
      <section className="M-news">
        <div className="M-news-wrap">
          <div className="M-news-head">
            <span className="M-sec-en">News</span>
            <h2>お知らせ</h2>
            <a className="M-news-btn" href="#">一覧を見る<span className="ar" /></a>
          </div>
          <div className="M-news-list">
            {news.map((n, i) => (
              <a className="M-news-row" href="#" key={i}>
                <span className="date">{n.d}</span>
                <span className="cat">{n.c}</span>
                <span className="ttl">{n.t}</span>
                <span className="chev"><I.chev /></span>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- CONTACT（ダーク＋ゴールドCTA・電話＋フォーム） ---------- */}
      <section className="M-contact">
        <Img tone="deskDark" src="assets/contact.jpg" alt="お問い合わせ" />
        <div className="M-contact-grad" />
        <div className="M-contact-glow" />
        <div className="M-contact-wrap">
          <div className="M-contact-copy">
            <span className="M-sec-en gold">Contact</span>
            <h2>まずは、お気軽に<br />ご相談ください。</h2>
            <p>税務・会計・労務のことなら、私たちにお任せください。<br />初回のご相談は無料で承っております。</p>
            <a className="M-tel-block" href="tel:0362793375">
              <span className="ic"><I.phone s={22} /></span>
              <span className="tx">
                <span className="big">03-6279-3375</span>
                <span className="sub">平日 9:00-18:00</span>
              </span>
            </a>
          </div>

          <form className="M-form" onSubmit={(e) => e.preventDefault()}>
            <div className="M-field">
              <label>お名前</label>
              <input type="text" placeholder="山田 太郎" />
            </div>
            <div className="M-field">
              <label>メールアドレス</label>
              <input type="email" placeholder="example@compass-tax.jp" />
            </div>
            <div className="M-field">
              <label>ご相談内容</label>
              <textarea rows={3} placeholder="ご相談内容をご記入ください" />
            </div>
            <button type="submit" className="M-submit">
              <I.mail s={17} />送信する<span className="ar" />
            </button>
          </form>
        </div>
      </section>

      {/* ---------- FOOTER（共有・全面ダークに調整） ---------- */}
      <Footer variant="B" />
    </div>
  );
}

window.DesignDarkLux = DesignDarkLux;