/* DESIGN E — CLEAN / modern SaaS-consulting homepage
   Registered as window.DesignClean, styled entirely under .E in designClean.css.
   Brand/accent colors come from theme vars (see designClean.css). */

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

  const stats = [
    { num: "300", unit: "社", lab: "顧問先" },
    { num: "20", unit: "年", lab: "業歴" },
    { num: "98", unit: "%", lab: "顧客満足度" },
    { num: "12", unit: "名", lab: "有資格者" },
  ];

  const serv = [
    { ic: <I.calc />, jp: "税務・会計顧問", en: "TAX / ACCOUNTING",
      p: "月次決算から税務申告まで。数字を可視化し、経営判断に活きる会計をワンストップでご提供します。" },
    { ic: <I.people />, jp: "社会保険労務士業務", en: "LABOR / SOCIAL INSURANCE",
      p: "給与計算・社会保険手続き・就業規則の整備まで。人が安心して働ける環境づくりを支えます。" },
    { ic: <I.chart />, jp: "経営コンサルティング", en: "CONSULTING",
      p: "資金繰り・事業計画・補助金活用。専門家の視点で、企業の成長と未来の実現を伴走支援します。" },
  ];

  const why = [
    { n: "01", t: "ワンストップ対応", p: "税務・労務・経営を一つの窓口で。部門をまたぐご相談もスムーズに解決します。" },
    { n: "02", t: "迅速なレスポンス", p: "「連絡が早い」と選ばれる事務所。疑問はためこまず、その場でクリアに。" },
    { n: "03", t: "明朗な料金", p: "分かりやすい料金体系で、はじめての方も安心。お見積りは無料です。" },
  ];

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

  return (
    <div className="page E">
      {/* ---- sticky nav ---- */}
      <header className="e-nav">
        <div className="e-nav-in">
          <Brand className="e-brand" color="var(--brand)" />
          <nav className="e-links">
            {nav.map((n) => <a key={n} href="#">{n}</a>)}
          </nav>
          <div className="e-nav-right">
            <a className="e-tel" href="tel:0362793375">
              <I.phone s={17} />
              <span>03-6279-3375</span>
            </a>
            <a className="e-pill" href="#contact">お問い合わせ</a>
          </div>
        </div>
      </header>

      {/* ---- hero ---- */}
      <section className="e-hero">
        <div className="e-hero-in">
          <div className="e-hero-copy">
            <span className="e-eyebrow">税理士 · 社会保険労務士事務所</span>
            <h1>数字とヒトの両面から、<br />会社の&ldquo;これから&rdquo;を支える。</h1>
            <p className="e-lead">
              東京・高田馬場のコンパス会計社。税務・会計、社会保険労務、経営コンサルティングを
              ワンストップで。経営者に寄り添う、あなたの隣の専門家です。
            </p>
            <div className="e-hero-btns">
              <a className="e-btn e-btn-fill" href="#contact">無料相談はこちら</a>
              <a className="e-btn e-btn-line" href="#service">サービスを見る <I.chev s={15} /></a>
            </div>
            <div className="e-hero-note">
              <span className="e-dot" />受付 平日 9:00 - 18:00 ／ 初回相談 無料
            </div>
          </div>
          <div className="e-hero-art">
            <Img tone="office" src="assets/hero2.jpg" alt="コンパス会計社 オフィス" />
            <div className="e-hero-badge">
              <span className="bignum">300<small>社</small></span>
              <span className="blab">顧問先からの信頼</span>
            </div>
          </div>
        </div>
      </section>

      {/* ---- trust stat band ---- */}
      <section className="e-stats">
        <div className="e-stats-in">
          <div className="e-stats-head">
            <span className="e-kicker">BY THE NUMBERS</span>
            <h2>数字で見るコンパス会計社</h2>
          </div>
          <div className="e-stats-grid">
            {stats.map((s) => (
              <div className="e-stat" key={s.lab}>
                <div className="e-stat-num">{s.num}<small>{s.unit}</small></div>
                <div className="e-stat-lab">{s.lab}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ---- services ---- */}
      <section className="e-serv" id="service">
        <div className="e-sec-head">
          <span className="e-kicker">SERVICE</span>
          <h2>3本柱で経営をサポート</h2>
          <p>専門領域をまたいで、御社の課題をまるごとお引き受けします。</p>
        </div>
        <div className="e-serv-grid">
          {serv.map((s) => (
            <a className="e-card" href="#" key={s.jp}>
              <span className="e-card-ic">{s.ic}</span>
              <h3>{s.jp}</h3>
              <div className="e-card-en">{s.en}</div>
              <p>{s.p}</p>
              <span className="e-card-more">詳しく見る <I.chev s={15} /></span>
            </a>
          ))}
        </div>
      </section>

      {/* ---- why choose us ---- */}
      <section className="e-why">
        <div className="e-why-in">
          <div className="e-why-head">
            <span className="e-kicker">WHY COMPASS</span>
            <h2>選ばれる<br />3つの理由</h2>
            <p>はじめての方にも、乗り換えをお考えの方にも。</p>
          </div>
          <div className="e-why-list">
            {why.map((w) => (
              <div className="e-why-item" key={w.n}>
                <span className="e-why-num">{w.n}</span>
                <div>
                  <h3>{w.t}</h3>
                  <p>{w.p}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ---- news ---- */}
      <section className="e-news">
        <div className="e-news-in">
          <div className="e-news-head">
            <span className="e-kicker">NEWS</span>
            <h2>お知らせ</h2>
            <a className="e-news-all" href="#">一覧を見る <I.chev s={15} /></a>
          </div>
          <div className="e-news-list">
            {news.map((n, i) => (
              <a className="e-news-row" href="#" key={i}>
                <span className="e-news-date">{n.d}</span>
                <span className="e-news-cat">{n.c}</span>
                <span className="e-news-ttl">{n.t}</span>
                <span className="e-news-chev"><I.chev s={16} /></span>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* ---- big CTA ---- */}
      <section className="e-cta" id="contact">
        <div className="e-cta-in">
          <div className="e-cta-copy">
            <span className="e-kicker light">CONTACT</span>
            <h2>まずは、お気軽に<br />ご相談ください。</h2>
            <p>ご相談・お見積りは無料です。御社に最適なプランをご提案します。</p>
          </div>
          <div className="e-cta-actions">
            <a className="e-cta-card" href="tel:0362793375">
              <span className="e-cta-ic"><I.phone s={24} /></span>
              <span className="e-cta-num">03-6279-3375</span>
              <span className="e-cta-sub">受付 平日 9:00 - 18:00</span>
            </a>
            <a className="e-cta-card fill" href="#">
              <span className="e-cta-ic"><I.mail s={22} /></span>
              <span className="e-cta-num2">お問い合わせフォーム</span>
              <span className="e-cta-sub2">24時間受付中 <I.chev s={15} /></span>
            </a>
          </div>
        </div>
      </section>

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

window.DesignClean = DesignClean;