/* DESIGN N — GLASS / glassmorphism · vivid gradient fintech look
   Registered as window.DesignGlass, styled entirely under .N in designGlass.css.
   Brand/accent colors come from theme vars (see designGlass.css) so the color
   switcher re-skins this design too. Vivid brand gradient background + frosted
   glass panels/cards floating on top. */

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

  const stats = [
    { num: "300", unit: "社", lab: "顧問先" },
    { num: "20", unit: "年", lab: "業歴" },
    { num: "98", 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 N">
      {/* ---- vivid gradient background + soft light blobs ---- */}
      <div className="n-bg" aria-hidden="true">
        <span className="n-blob b1" />
        <span className="n-blob b2" />
        <span className="n-blob b3" />
        <span className="n-blob b4" />
      </div>

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

      {/* ---- hero ---- */}
      <section className="n-hero">
        <div className="n-hero-in">
          <div className="n-glass n-hero-copy">
            <span className="n-eyebrow"><span className="n-dot" />税理士 · 社会保険労務士事務所</span>
            <h1>
              お客様の&ldquo;不安&rdquo;を<br />
              <span className="n-hl">クリアに</span>、<br />
              私たちが提案します。
            </h1>
            <p className="n-lead">
              東京・高田馬場のコンパス会計社。税務・会計、社会保険労務、経営コンサルティングを
              ワンストップで。軽やかに、確かに。経営者の隣に立つ専門家です。
            </p>
            <div className="n-hero-btns">
              <a className="n-btn n-btn-fill" href="#contact">無料相談はこちら</a>
              <a className="n-btn n-btn-ghost" href="#service">サービスを見る <I.chev s={15} /></a>
            </div>
            <div className="n-hero-note">受付 平日 9:00 - 18:00 ／ 初回相談 無料</div>
          </div>

          <div className="n-hero-art">
            <div className="n-hero-frame">
              <Img tone="office" src="assets/hero1.jpg" alt="コンパス会計社 オフィス" />
            </div>
            <div className="n-glass n-float n-float-a">
              <span className="n-float-num">300<small>社</small></span>
              <span className="n-float-lab">顧問先からの信頼</span>
            </div>
            <div className="n-glass n-float n-float-b">
              <span className="n-float-ic"><I.chart /></span>
              <span className="n-float-lab2">満足度 <b>98%</b></span>
            </div>
          </div>
        </div>
      </section>

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

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

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

      {/* ---- contact CTA (phone + form) ---- */}
      <section className="n-contact" id="contact">
        <div className="n-glass n-contact-panel">
          <div className="n-contact-copy">
            <span className="n-kicker">CONTACT</span>
            <h2>まずは、お気軽に<br />ご相談ください。</h2>
            <p>ご相談・お見積りは無料です。御社に最適なプランをご提案します。</p>
            <a className="n-glass n-contact-tel" href="tel:0362793375">
              <span className="n-contact-ic"><I.phone s={22} /></span>
              <span>
                <span className="n-contact-num">03-6279-3375</span>
                <span className="n-contact-sub">受付 平日 9:00 - 18:00</span>
              </span>
            </a>
          </div>
          <form className="n-form" onSubmit={(e) => e.preventDefault()}>
            <label className="n-field">
              <span>お名前</span>
              <input type="text" placeholder="山田 太郎" />
            </label>
            <label className="n-field">
              <span>メールアドレス</span>
              <input type="email" placeholder="you@example.com" />
            </label>
            <label className="n-field">
              <span>ご相談内容</span>
              <textarea rows={3} placeholder="ご相談内容をご記入ください" />
            </label>
            <button className="n-btn n-btn-fill n-form-btn" type="submit">
              送信する <I.chev s={15} />
            </button>
          </form>
        </div>
      </section>

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

window.DesignGlass = DesignGlass;