/* 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">
          <CSDAMark size={56} />
          <div className="csda-header__brand-text">
            <span className="csda-header__brand-en">Career Strategy Development Association</span>
            <span className="csda-header__brand-ja">一般社団法人 キャリア戦略開発協会</span>
          </div>
        </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>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 18 }}>
            <CSDAMark size={56} />
            <div style={{ lineHeight: 1.2 }}>
              <div style={{ fontFamily: "var(--font-csda-en)", fontStyle: "italic", fontSize: 11, letterSpacing: "0.16em", color: "#E0382C" }}>Career Strategy Development Association</div>
              <div style={{ fontFamily: "var(--font-csda-mincho)", fontWeight: 700, fontSize: 14, color: "#fff" }}>一般社団法人 キャリア戦略開発協会</div>
            </div>
          </div>
          <p style={{ fontSize: 13, lineHeight: 1.9, color: "rgba(255,255,255,0.6)", margin: 0, maxWidth: 360 }}>
            個性分析を通して、自己理解と相互理解を深め、<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>
          </ul>
        </div>
        <div>
          <h4>お問い合わせ</h4>
          <ul>
            <li>愛知県名古屋市</li>
            <li>代表理事 菅野 祥一</li>
            <li style={{ marginTop: 12 }}><a href="contact.html">お問い合わせフォーム</a></li>
            <li><a href="https://line.me" target="_blank" rel="noreferrer">LINE 公式アカウント</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 });