/* P・SPO HP 共通レイアウト — Header / Footer / Layout */

const { useState: useStateL } = React;

function Header({ active }) {
  const [open, setOpen] = useStateL(false);
  const joinUrl = (window.PSPO_SITE && window.PSPO_SITE.joinUrl) || "/join/";
  const links = [
    { href: "/locations/", label: "店舗" },
    { href: "/pricing/", label: "料金" },
    { href: "/facilities/", label: "設備" },
    { href: "/join/", label: "入会案内" },
    { href: "/news/", label: "お知らせ" },
    { href: "/faq/", label: "FAQ" },
    { href: "/company/", label: "会社情報" },
  ];
  return (
    <header className="header">
      <div className="container header__inner">
        <a href="/" className="header__brand">
          <img src="/assets/logo-pspo.png" alt="P・SPO" />
          <span className="header__brand-text">
            <span className="name">CHITACOH</span>
            <span className="sub">24時間メンバーズスペース</span>
          </span>
        </a>
        <nav className={"header__nav" + (open ? " is-open" : "")}>
          {links.map((l) => (
            <a key={l.href} href={l.href}
               style={active === l.href ? { color: "var(--c-coral)", fontWeight: 700 } : null}>
              {l.label}
            </a>
          ))}
        </nav>
        <div className="header__cta">
          <a className="btn btn--ghost" href="/contact/">お問い合わせ</a>
          <a className="btn btn--primary" href="/join/">入会する →</a>
        </div>
        <button className="header__menu-btn" onClick={() => setOpen(!open)} aria-label="メニュー">
          {open ? "✕" : "☰"}
        </button>
      </div>
    </header>
  );
}

function Footer() {
  const site = window.PSPO_SITE;
  const locs = window.PSPO_LOCATIONS;
  const year = new Date().getFullYear();
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__grid">
          <div className="footer__brand">
            <img src="/assets/logo-pspo.png" alt="P・SPO" />
            <p>
              {site.brand}<br/>
              {site.description}<br/>
              運営: {site.operator}
            </p>
          </div>
          <div>
            <h4>店舗</h4>
            <ul>
              {locs.map((l) => (
                <li key={l.id}><a href={"/locations/" + l.id + "/"}>{l.name}</a></li>
              ))}
              <li><a href="/locations/">店舗一覧</a></li>
            </ul>
          </div>
          <div>
            <h4>サービス</h4>
            <ul>
              <li><a href="/pricing/">料金プラン</a></li>
              <li><a href="/facilities/">設備・サービス</a></li>
              <li><a href="/join/">入会案内</a></li>
              <li><a href="/campaign/">キャンペーン</a></li>
            </ul>
          </div>
          <div>
            <h4>サポート</h4>
            <ul>
              <li><a href="/news/">お知らせ</a></li>
              <li><a href="/faq/">よくある質問</a></li>
              <li><a href="/contact/">お問い合わせ</a></li>
              <li><a href="/company/">会社情報</a></li>
              <li><a href="/legal/privacy/">プライバシーポリシー</a></li>
              <li><a href="/legal/terms/">利用規約</a></li>
            </ul>
          </div>
        </div>
        <div className="footer__bottom">
          <span>&copy; {year} {site.operator}. All rights reserved.</span>
          <span>P・SPO CHITACOH</span>
        </div>
      </div>
    </footer>
  );
}

function Breadcrumb({ items }) {
  return (
    <nav className="page-hero__breadcrumb">
      <a href="/">ホーム</a>
      {items.map((it, i) => (
        <React.Fragment key={i}>
          <span className="sep">›</span>
          {it.href
            ? <a href={it.href}>{it.label}</a>
            : <span>{it.label}</span>}
        </React.Fragment>
      ))}
    </nav>
  );
}

function PageHero({ breadcrumb, title, lede }) {
  return (
    <section className="page-hero">
      <div className="container">
        {breadcrumb && <Breadcrumb items={breadcrumb} />}
        <h1 className="page-hero__title">{title}</h1>
        {lede && <p className="page-hero__lede">{lede}</p>}
      </div>
    </section>
  );
}

function Layout({ active, children }) {
  return (
    <>
      <Header active={active} />
      <main>{children}</main>
      <Footer />
    </>
  );
}