/* DESIGN F — ミニマル / editorial · luxury
   Less is more: 巨大な明朝見出し・大量の余白・極細ヘアライン罫・
   番号付きサービス索引。ほぼ黒文字＋白地、ブランド色は罫/番号/ホバーの
   ごく一部のみ。全 CSS は .F 配下にスコープ。 */

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

  const serv = [
    { n: "01", jp: "税務・会計顧問", en: "TAX / ACCOUNTING",
      p: "税務申告や会計業務のサポートを通じて、正確で信頼性の高い経営基盤を支えます。" },
    { n: "02", jp: "社会保険労務士業務", en: "LABOR / SOCIAL INSURANCE",
      p: "労務管理や社会保険手続きの最適化で、安心して働ける環境づくりを支援します。" },
    { n: "03", jp: "経営コンサルティング", en: "CONSULTING",
      p: "経営課題を共に解決し、企業の成長と未来のビジョン実現をサポートします。" },
  ];

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

  const footNav = ["会社案内", "サービス案内", "採用情報", "お知らせ", "お問い合わせ", "プライバシーポリシー"];

  return (
    <div className="page F">
      {/* ── header：極シンプル（ブランド左・細いナビ右・テキストリンクのみ） ── */}
      <header className="F-hd">
        <Brand className="F-brand" color="#141414" />
        <nav className="F-nav">
          {nav.map((n) => <a key={n} href="#">{n}</a>)}
        </nav>
        <a className="F-tel" href="tel:0362793375">
          <span className="lab">TEL</span>
          <span className="num">03-6279-3375</span>
        </a>
      </header>

      {/* ── hero：特大明朝キャッチ＋広い余白 ── */}
      <section className="F-hero">
        <div className="F-hero-meta">
          <span className="l">コンパス会計社</span>
          <span className="r">TAX &amp; LABOR OFFICE</span>
        </div>
        <h1 className="F-hero-h">
          お客様の“不安”を<br />
          クリアに、私たちが<br />
          提案します。
        </h1>
        <div className="F-hero-foot">
          <p className="lead">
            税務・会計・社会保険労務の専門家として、<br />
            お客様のビジネスの成長を支えるパートナーであり続けます。
          </p>
          <span className="scroll">SCROLL<span className="line" /></span>
        </div>
      </section>

      {/* ── 大きな写真 1枚（editorial） ── */}
      <section className="F-figure">
        <Img tone="cityLight" src="assets/hero1.jpg" alt="コンパス会計社 オフィス" />
        <div className="F-fig-cap">
          <span className="no">— 001</span>
          <span className="tx">高田馬場・税理士 / 社会保険労務士事務所</span>
        </div>
      </section>

      {/* ── About ステートメント ── */}
      <section className="F-about">
        <div className="F-idx">Statement <span className="sl">/</span> 理念</div>
        <p className="F-statement">
          数字の向こうにある、<br className="bp" />経営者の想いに寄り添う。<br />
          税務・会計・労務の専門家として、<br className="bp" />
          お客様一人ひとりの「これから」を、<br />
          静かに、確かに支えていきます。
        </p>
      </section>

      {/* ── サービス：番号付き索引リスト ── */}
      <section className="F-serv">
        <div className="F-sec-head">
          <span className="en">Services</span>
          <span className="jp">サービス案内</span>
        </div>
        <div className="F-serv-list">
          {serv.map((s) => (
            <a key={s.n} className="F-serv-row" href="#">
              <span className="F-serv-num">{s.n}</span>
              <span className="F-serv-name">
                <span className="jp">{s.jp}</span>
                <span className="en">{s.en}</span>
              </span>
              <span className="F-serv-desc">{s.p}</span>
              <span className="F-serv-ar"><I.chev /></span>
            </a>
          ))}
        </div>
      </section>

      {/* ── お知らせ：クリーンな行 ── */}
      <section className="F-news">
        <div className="F-sec-head">
          <span className="en">News</span>
          <span className="jp">お知らせ</span>
        </div>
        <div className="F-news-list">
          {news.map((n, i) => (
            <a key={i} className="F-news-row" href="#">
              <span className="date">{n.d}</span>
              <span className="ttl">{n.t}</span>
              <span className="ar"><I.chev /></span>
            </a>
          ))}
        </div>
        <a className="F-news-all" href="#">一覧を見る<span className="ar"><I.chev /></span></a>
      </section>

      {/* ── お問い合わせ：抑制の効いたブロック ── */}
      <section className="F-contact">
        <div className="F-sec-head">
          <span className="en">Contact</span>
          <span className="jp">お問い合わせ</span>
        </div>
        <p className="F-contact-lead">
          ご相談・ご質問など、お気軽にお問い合わせください。
        </p>
        <a className="F-contact-tel" href="tel:0362793375">03-6279-3375</a>
        <div className="F-contact-hrs">平日 9:00 – 18:00</div>
        <a className="F-contact-form" href="#">
          お問い合わせフォーム<span className="ar"><I.chev /></span>
        </a>
      </section>

      {/* ── フッター：ミニマル（会社情報＋ナビ＋PAGE TOP） ── */}
      <footer className="F-ft">
        <div className="F-ft-top">
          <div className="F-ft-brand">
            <Brand className="F-ft-brandbox" color="#141414" />
            <div className="F-ft-info">
              <span className="co">株式会社コンパス会計社</span><br />
              税理士・社会保険労務士オフィス<br />
              〒169-0075 東京都新宿区高田馬場4-3-7 KSビル2F<br />
              TEL. 03-6279-3375
            </div>
          </div>
          <nav className="F-ft-nav">
            {footNav.map((l) => <a key={l} href="#">{l}</a>)}
          </nav>
        </div>
        <div className="F-ft-bottom">
          <span className="cr">© COMPASS-TAX</span>
          <a className="F-ft-pagetop" href="#top">
            PAGE TOP<span className="up" />
          </a>
        </div>
      </footer>
    </div>
  );
}

window.DesignMinimal = DesignMinimal;