/* DESIGN H — BOLD
   大胆・プレミアム・ドラマチック。フルビューポートの斜めグラデ・ヒーロー、
   特大タイポ＋ゴールドのアンダーライン、ヒーローに重なる3枚のサービスカード、
   4ステップのフロー、数字バンド、お知らせ、大きなお問い合わせCTA。
   共有ヘルパー（Brand / Img / I / Footer）を利用。色は theme.css の変数で切替。 */

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

  const news = [
    { d: "2025.12.09", t: "年末年始営業のお知らせ" },
    { d: "2025.07.18", t: "夏期休業のお知らせ" },
    { d: "2024.12.05", 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 steps = [
    { n: "01", t: "ご相談",           p: "現状の課題やご要望を丁寧にヒアリングします。" },
    { n: "02", t: "お見積り・ご提案", p: "最適なプランとお見積りを明確にご提案します。" },
    { n: "03", t: "ご契約",           p: "内容にご納得いただいたうえでご契約します。" },
    { n: "04", t: "継続サポート",     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 H">
      {/* ---------- HERO (full viewport / integrated dark header) ---------- */}
      <section className="H-hero">
        <Img tone="buildingDark" src="assets/hero1.jpg" alt="コンパス会計社 メインビジュアル" />
        <div className="H-hero-glow" />
        <div className="H-hero-grad" />

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

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

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

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

        <div className="H-sec-head">
          <span className="H-sec-en">Flow</span>
          <h2>ご相談から継続支援までの流れ</h2>
          <div className="H-sec-rule" />
        </div>

        <div className="H-flow">
          {steps.map((s) => (
            <div key={s.n} className="H-step">
              <span className="H-step-num">{s.n}</span>
              <h4>{s.t}</h4>
              <p>{s.p}</p>
            </div>
          ))}
        </div>
      </section>

      {/* ---------- STATS band (選ばれる理由) ---------- */}
      <section className="H-stats">
        <div className="H-stats-wrap">
          <div className="H-stats-head">
            <span className="H-sec-en on-brand">Why COMPASS</span>
            <h2>選ばれる理由</h2>
          </div>
          <div className="H-stats-grid">
            {stats.map((s) => (
              <div key={s.lab} className="H-stat">
                <div className="H-stat-num">
                  <span className="big">{s.num}</span>
                  <span className="unit">{s.unit}</span>
                </div>
                <div className="H-stat-lab">{s.lab}</div>
                <div className="H-stat-en">{s.en}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- NEWS ---------- */}
      <section className="H-news">
        <div className="H-news-wrap">
          <div className="H-news-head">
            <span className="H-sec-en">News</span>
            <h2>お知らせ</h2>
            <a className="H-news-btn" href="#">一覧を見る<span className="ar" /></a>
          </div>
          <div className="H-news-list">
            {news.map((n, i) => (
              <a className="H-news-row" href="#" key={i}>
                <span className="date">{n.d}</span>
                <span className="ttl">{n.t}</span>
                <span className="chev"><I.chev /></span>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- CONTACT CTA ---------- */}
      <section className="H-contact">
        <Img tone="buildingDark" src="assets/contact.jpg" alt="お問い合わせ" />
        <div className="H-contact-grad" />
        <div className="H-contact-wrap">
          <div className="H-contact-copy">
            <span className="H-sec-en on-brand">Contact</span>
            <h2>まずは、お気軽に<br />ご相談ください。</h2>
            <p>税務・会計・労務のことなら、私たちにお任せください。<br />初回のご相談は無料で承っております。</p>
          </div>
          <div className="H-contact-actions">
            <a className="H-contact-card tel" href="#">
              <span className="ic"><I.phone s={26} /></span>
              <span className="big">03-6279-3375</span>
              <span className="sub2">平日 9:00-18:00</span>
            </a>
            <a className="H-contact-card form" href="#">
              <span className="ic"><I.mail s={24} /></span>
              <span className="lab">お問い合わせフォーム</span>
              <span className="sub3">24時間受付中<span className="ar" /></span>
            </a>
          </div>
        </div>
      </section>

      {/* ---------- FOOTER (shared) ---------- */}
      <Footer variant="B" />
    </div>
  );
}

window.DesignBold = DesignBold;