/* DESIGN D — 寄り添い / WARM
   "かかりつけ"の会計事務所 (office-momiki.com 風)。
   温かく親しみやすく誠実。代表挨拶ヒーロー＋お悩みストリップ。
   すべての色は theme.css の CSS 変数から取得（ブランド色ハードコード無し）。 */

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

  const worries = [
    { q: "Q.1", t: "税務調査が来たらと思うと、不安で夜も眠れない。" },
    { q: "Q.2", t: "創業したばかりで、何から手をつければいいか分からない。" },
    { q: "Q.3", t: "今の顧問料が、自社にとって適正なのか判断できない。" },
    { q: "Q.4", 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: "資金繰り・事業計画・補助金。かかりつけ医のように御社の状態を継続的に見守り、次の一手をご提案します。" },
  ];

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

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

  return (
    <div className="page D">
      {/* ---------- header ---------- */}
      <header className="D-hd">
        <div className="D-hd-in">
          <Brand className="D-brand" color="var(--brand)" />
          <nav className="D-nav">
            {nav.map((n) => <a key={n} href="#">{n}</a>)}
          </nav>
          <div className="D-hd-r">
            <a className="D-tel" href="tel:0362793375">
              <span className="ic"><I.phone s={20} c="var(--brand)" /></span>
              <span className="txt">
                <span className="num">03-6279-3375</span>
                <span className="hrs">受付 平日 9:00–18:00</span>
              </span>
            </a>
            <a className="D-cta" href="#contact">
              <I.mail s={18} c="var(--on-brand)" />
              <span>お問い合わせ</span>
            </a>
          </div>
        </div>
      </header>

      {/* ---------- hero / greeting ---------- */}
      <section className="D-hero">
        <span className="D-blob b1" aria-hidden="true" />
        <span className="D-blob b2" aria-hidden="true" />
        <div className="D-hero-in">
          <div className="copy">
            <span className="eyebrow"><span className="line" />代表挨拶 <em>GREETING</em></span>
            <h1>あなたに寄り添う<br /><span className="mk">“かかりつけ”</span>の<br />会計事務所。</h1>
            <div className="lead">
              <p>はじめまして。コンパス会計社の田中と申します。私たちは、数字を通じて経営者の「不安」に寄り添う、まちのかかりつけ医のような事務所でありたいと考えています。</p>
              <p>「こんな小さなこと、聞いていいのかな」——そう思うご相談こそ大歓迎です。税務や労務の専門用語をかみくだき、いつでも顔の見える距離で、御社の歩みを末永くお手伝いします。</p>
              <p>まずはお茶でも飲むような気持ちで、どうぞお気軽に扉を叩いてください。</p>
            </div>
            <div className="sign">
              <span className="role">代表税理士・社会保険労務士</span>
              <span className="nm">田中　誠</span>
            </div>
          </div>
          <div className="art">
            <div className="portrait">
              <Img src="assets/ceo.jpg" alt="代表税理士 田中 誠" tone="people" />
            </div>
            <span className="badge">
              <LogoMark size={22} color="var(--on-brand)" />
              いつでも、あなたのそばに。
            </span>
          </div>
        </div>
      </section>

      {/* ---------- worries ---------- */}
      <section className="D-worry">
        <div className="D-worry-in">
          <div className="D-head center">
            <span className="eyebrow c"><span className="line" />お悩み <em>CHECK</em></span>
            <h2>こんなお悩み、<br className="sp-br" />ありませんか？</h2>
          </div>
          <div className="worry-grid">
            {worries.map((w) => (
              <div className="worry-card" key={w.q}>
                <span className="q">{w.q}</span>
                <p>{w.t}</p>
              </div>
            ))}
          </div>
          <div className="worry-foot">
            <p>ひとつでも当てはまったら、どうか一人で抱え込まないでください。<br />私たちが、いちばん近くで解決策を一緒に探します。</p>
            <a className="D-btn" href="#contact"><span>まずは相談してみる</span><I.chev s={16} c="var(--on-brand)" /></a>
          </div>
        </div>
      </section>

      {/* ---------- services ---------- */}
      <section className="D-serv">
        <div className="D-serv-in">
          <div className="D-head center">
            <span className="eyebrow"><span className="line" />サービス <em>SERVICE</em></span>
            <h2>3つの柱で、経営をまるごと支えます。</h2>
          </div>
          <div className="serv-grid">
            {serv.map((s) => (
              <a className="serv-card" href="#" key={s.n}>
                <span className="serv-n">{s.n}</span>
                <div className="serv-ic">{s.ic}</div>
                <h3>{s.jp}</h3>
                <span className="serv-en">{s.en}</span>
                <p>{s.p}</p>
                <span className="serv-more">詳しく見る <I.chev s={15} c="var(--brand)" /></span>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- news ---------- */}
      <section className="D-news">
        <div className="D-news-in">
          <div className="D-head">
            <span className="eyebrow"><span className="line" />お知らせ <em>NEWS</em></span>
            <h2>新着情報</h2>
          </div>
          <div className="news-list">
            {news.map((n, i) => (
              <a className="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="arw"><I.chev s={16} c="var(--brand)" /></span>
              </a>
            ))}
          </div>
          <a className="D-btn ghost" href="#"><span>お知らせ一覧へ</span><I.chev s={16} c="var(--brand)" /></a>
        </div>
      </section>

      {/* ---------- contact band ---------- */}
      <section className="D-contact" id="contact">
        <div className="D-contact-in">
          <div className="c-copy">
            <span className="eyebrow on-brand"><span className="line" />お問い合わせ <em>CONTACT</em></span>
            <h2>まずは、お気軽に<br />お声がけください。</h2>
            <p>初回のご相談は無料です。「何を聞けばいいか分からない」まま、そのままお越しいただいて大丈夫です。</p>
          </div>
          <div className="c-actions">
            <a className="c-tel" href="tel:0362793375">
              <span className="lab"><I.phone s={18} c="var(--on-brand)" />お電話でのご相談</span>
              <span className="num">03-6279-3375</span>
              <span className="hrs">受付 平日 9:00–18:00</span>
            </a>
            <a className="c-form" href="#">
              <I.mail s={22} c="var(--brand)" />
              <span className="ft">
                <span className="t1">お問い合わせフォーム</span>
                <span className="t2">24時間受付中</span>
              </span>
              <I.chev s={18} c="var(--brand)" />
            </a>
          </div>
        </div>
      </section>

      {/* ---------- footer ---------- */}
      <footer className="D-ft">
        <div className="D-ft-in">
          <div className="D-ft-brand">
            <Brand className="D-brand" color="var(--brand)" />
            <div className="D-ft-info">
              <span className="co">株式会社コンパス会計社</span>
              税理士・社会保険労務士オフィス<br />
              〒169-0075 東京都新宿区高田馬場4-3-7 KSビル2F<br />
              TEL. 03-6279-3375 ／ 受付 平日 9:00–18:00
            </div>
          </div>
          <ul className="D-ft-nav">
            {footNav.map((l) => (
              <li key={l}><a href="#"><I.chev s={13} c="var(--accent)" />{l}</a></li>
            ))}
          </ul>
        </div>
        <div className="D-ft-bar">
          <small>© 2025 COMPASS-TAX Inc.</small>
          <a className="D-top" href="#top"><span className="up" />PAGE TOP</a>
        </div>
      </footer>
    </div>
  );
}

window.DesignWarm = DesignWarm;