/* global React, CSDAMark, CSDAArrow */

function CSDAHeader({ current = "home" }) {
  const items = [
    { id: "home",     ja: "ホーム",       en: "HOME",     href: "index.html" },
    { id: "programs", ja: "研修プログラム", en: "PROGRAMS", href: "programs.html" },
    { id: "profile",  ja: "講師紹介",     en: "PROFILE",  href: "profile.html" },
    { id: "contact",  ja: "お問い合わせ",  en: "CONTACT",  href: "contact.html" },
  ];
  return (
    <header className="csda-header">
      <div className="csda-header__inner">
        <a href="index.html" className="csda-header__brand" aria-label="CSDA Home">
          <img className="csda-header__logo" src="assets/csda-logo-official.svg" alt="一般社団法人 キャリア戦略開発協会" />
        </a>
        <nav className="csda-nav">
          {items.map(it => (
            <a key={it.id} href={it.href} className={current === it.id ? "is-active" : ""}>
              <span className="csda-nav__en">{it.en}</span>
              <span className="csda-nav__ja">{it.ja}</span>
            </a>
          ))}
        </nav>
      </div>
    </header>
  );
}

function CSDACtaBand({
  title = "カスタム研修・カリキュラム調整も承ります。",
  lead = "貴社の組織課題に合わせて、内容・所要時間・参加者規模を調整いたします。まずはお気軽にご相談ください。",
}) {
  return (
    <section className="csda-cta-band" data-screen-label="CTA Band">
      <div className="csda-cta-band__inner">
        <div className="csda-cta-band__text">
          <div className="csda-cta-band__eyebrow">Contact</div>
          <h3 className="csda-cta-band__title">{title}</h3>
          <p className="csda-cta-band__lead">{lead}</p>
        </div>
        <a href="contact.html" className="csda-btn csda-cta-band__btn">
          <span>お問い合わせ</span>
          <span className="csda-btn__arrow"><CSDAArrow color="#E0382C" /></span>
        </a>
      </div>
    </section>
  );
}

function CSDAFooter() {
  return (
    <footer className="csda-footer">
      <div className="csda-footer__inner">
        <div className="csda-footer__col--brand">
          <div className="csda-footer__brand">
            <img className="csda-footer__logo" src="assets/csda-logo-official.svg" alt="一般社団法人 キャリア戦略開発協会" />
          </div>
          <p style={{ fontSize: 12.5, lineHeight: 1.8, color: "rgba(255,255,255,0.6)", margin: 0, maxWidth: 340 }}>
            個性分析を通して、自己理解と相互理解を深め、<br />
            一人ひとりが活きる組織づくりを支援します。
          </p>
        </div>
        <div>
          <h4>サイトマップ</h4>
          <ul>
            <li><a href="index.html">ホーム</a></li>
            <li><a href="index.html#about">協会概要</a></li>
            <li><a href="programs.html">研修プログラム</a></li>
            <li><a href="profile.html">代表者プロフィール</a></li>
            <li><a href="contact.html">お問い合わせ</a></li>
          </ul>
        </div>
        <div>
          <h4>研修分野</h4>
          <ul>
            <li><a href="programs.html#compliance">コンプライアンス</a></li>
            <li><a href="programs.html#harassment">ハラスメント</a></li>
            <li><a href="programs.html#retention">離職防止</a></li>
            <li><a href="programs.html#servant">サーバントリーダーシップ</a></li>
            <li><a href="programs.html#leadership">理念経営ボードゲーム</a></li>
          </ul>
        </div>
        <div className="csda-footer__col--contact">
          <h4>お問い合わせ</h4>
          <ul className="csda-footer__contact">
            <li>
              <span className="csda-footer__nowrap">〒456-0002</span>{" "}
              <span className="csda-footer__nowrap">名古屋市熱田区金山町1-3-2-1102</span>
            </li>
            <li>一般社団法人 キャリア戦略開発協会</li>
            <li>代表理事 菅野 祥一</li>
            <li>
              <span className="csda-footer__nowrap">Mail：<a href="mailto:kanno@csda.jp">kanno@csda.jp</a></span>
              <span className="csda-footer__nowrap">URL：<a href="https://csda.jp/">csda.jp</a></span>
            </li>
            <li className="csda-footer__contact-cta"><a href="contact.html">お問い合わせフォーム</a></li>
          </ul>
        </div>
      </div>
      <div className="csda-footer__bottom">
        <span>© {new Date().getFullYear()} Career Strategy Development Association</span>
        <span>Individuality makes people stronger.</span>
      </div>
    </footer>
  );
}

Object.assign(window, { CSDAHeader, CSDAFooter, CSDACtaBand });