/* DESIGN K — BENTO
   2024-style "bento box" grid: asymmetric rounded tiles that mix flat
   color faces, a photo, big numbers and line-icons. Playful yet clean.
   Everything is scoped to the .K wrapper; on ≤720px every tile collapses
   into a single stacked column (no horizontal scroll). */

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

  const ICON = { calc: I.calc, people: I.people, chart: I.chart };
  const serv = [
    { ic: "calc", jp: "税務・会計顧問", en: "TAX / ACCOUNTING",
      p: "月次の記帳から決算・申告まで。数字を経営に活かせる、正確で信頼できる会計基盤づくりをお手伝いします。", big: true },
    { ic: "people", jp: "社会保険労務士業務", en: "LABOR",
      p: "労務管理・社会保険手続きを最適化し、安心して働ける環境を。" },
    { ic: "chart", jp: "経営コンサルティング", en: "CONSULTING",
      p: "資金繰り・事業計画まで、経営目線で伴走します。" },
  ];

  const why = [
    { no: "01", t: "ワンストップ対応", d: "税務・会計・労務をまとめて相談できる安心感。窓口はひとつです。" },
    { no: "02", t: "迅速なレスポンス", d: "ご連絡には原則当日〜翌営業日で対応。待たせません。" },
    { no: "03", t: "経営目線の提案", d: "数字を報告して終わりにせず、その先の意思決定まで支えます。" },
  ];

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

  return (
    <div className="page K" id="top">
      {/* ---------- header ---------- */}
      <header className="K-head">
        <a className="K-brand" href="#top">
          <LogoMark size={36} />
          <span className="K-brand-name">コンパス会計社<small>COMPASS-TAX</small></span>
        </a>
        <nav className="K-nav" aria-label="メインナビ">
          {nav.map((n) => <a key={n} href="#">{n}</a>)}
        </nav>
        <a className="K-pill" href="#contact">お問い合わせ<I.chev s={14} /></a>
      </header>

      {/* ---------- hero bento ---------- */}
      <section className="K-hero">
        <div className="K-bento">
          {/* big catch tile */}
          <div className="K-tile t-hero">
            <span className="t-eyebrow">COMPASS ACCOUNTING &amp; TAX OFFICE</span>
            <h1>お客様の<em>“不安”</em>をクリアに、<br />私たちが提案します。</h1>
            <p>高田馬場の税理士・社会保険労務士事務所。税務・会計から労務・経営まで、ワンストップでサポートします。</p>
            <div className="t-hero-cta">
              <a className="K-btn" href="#contact">無料相談をする<I.chev s={15} /></a>
              <a className="K-btn ghost" href="#service">サービスを見る</a>
            </div>
          </div>

          {/* photo tile */}
          <div className="K-tile t-photo">
            <Img tone="office" src="assets/hero2.jpg" alt="コンパス会計社 オフィス" />
          </div>

          {/* number tile — brand fill */}
          <div className="K-tile t-stat brand">
            <span className="t-num">300<small>社</small></span>
            <span className="t-cap">顧問先の実績</span>
          </div>

          {/* icon tile — accent */}
          <div className="K-tile t-icon accent">
            <span className="t-ic"><I.calc /></span>
            <span className="t-cap">安心のサポート体制</span>
          </div>

          {/* wide soft tile */}
          <div className="K-tile t-why soft">
            <span className="t-mini-en">Why us</span>
            <p>地域に根ざして20年以上。<br />数字の“その先”まで、共に考えます。</p>
          </div>

          {/* number tiles */}
          <div className="K-tile t-stat2">
            <span className="t-num">20<small>年</small></span>
            <span className="t-cap">地域での歩み</span>
          </div>
          <div className="K-tile t-stat3 line">
            <span className="t-num">98<small>%</small></span>
            <span className="t-cap">継続ご契約率</span>
          </div>
        </div>
      </section>

      {/* ---------- services ---------- */}
      <section className="K-serv" id="service">
        <div className="K-sec-head">
          <span className="K-eyebrow">Service</span>
          <h2>サービス案内</h2>
        </div>
        <div className="K-serv-grid">
          {serv.map((s, i) => {
            const Ic = ICON[s.ic];
            return (
              <a key={s.jp} className={"K-sv" + (s.big ? " sv-1" : " sv-" + (i + 1))} href="#">
                <span className="sv-ic"><Ic /></span>
                <h3>{s.jp}</h3>
                <span className="en">{s.en}</span>
                <p>{s.p}</p>
                <span className="sv-more">詳しく見る<I.chev s={14} /></span>
              </a>
            );
          })}
        </div>
      </section>

      {/* ---------- reasons / numbers ---------- */}
      <section className="K-why">
        <div className="K-sec-head">
          <span className="K-eyebrow">Why us</span>
          <h2>選ばれる理由</h2>
        </div>
        <div className="K-why-grid">
          {why.map((w) => (
            <div key={w.no} className="K-tile K-reason">
              <span className="r-no">{w.no}</span>
              <h4>{w.t}</h4>
              <p>{w.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* ---------- news ---------- */}
      <section className="K-news" id="news">
        <div className="K-sec-head">
          <span className="K-eyebrow">News</span>
          <h2>お知らせ</h2>
        </div>
        <div className="K-news-grid">
          {news.map((n, i) => (
            <a key={i} className="K-tile K-nt" href="#">
              <span className="n-top">
                <span className="n-date">{n.d}</span>
                <span className="n-cat">{n.c}</span>
              </span>
              <span className="n-ttl">{n.t}</span>
              <span className="n-more">続きを読む<I.chev s={13} /></span>
            </a>
          ))}
        </div>
      </section>

      {/* ---------- contact CTA tile ---------- */}
      <section className="K-contact" id="contact">
        <div className="t-contact brand">
          <div className="K-ct-l">
            <span className="K-eyebrow2">Contact</span>
            <h2>まずは、お気軽に<br />ご相談ください。</h2>
            <p>ご相談・ご質問など、お電話またはフォームよりお問い合わせいただけます。</p>
          </div>
          <div className="K-ct-actions">
            <a className="K-tel" href="tel:0362793375">
              <span className="K-tel-ic"><I.phone s={22} c="#fff" /></span>
              <span className="K-tel-txt">
                <span className="num">03-6279-3375</span>
                <span className="hrs">受付時間：平日 9:00-18:00</span>
              </span>
            </a>
            <a className="K-formbtn" href="#">
              <span className="fb-l">
                <span className="fb-ic"><I.mail s={20} /></span>
                <span className="fb-txt">
                  <span className="lab">お問い合わせフォーム</span>
                  <span className="sub">24時間受付中</span>
                </span>
              </span>
              <I.chev s={16} />
            </a>
          </div>
        </div>
      </section>

      <Footer variant="B" />
    </div>
  );
}

window.DesignBento = DesignBento;