// shell.jsx — Masthead, Footer, layout shell

const Masthead = ({ lang, page, onNav, onLang }) => {
  const t = window.PW_CONTENT[lang];
  const navItems = [
    { id: "home", label: t.nav.home },
    { id: "about", label: t.nav.about },
    { id: "contact", label: t.nav.contact },
  ];
  return (
    <header className="pw-masthead" data-screen-label="Masthead">
      <div className="pw-masthead-rule" />
      <div className="pw-masthead-row">
        <a className="pw-mark" onClick={(e) => { e.preventDefault(); onNav("home"); }} href="#">
          <img src="assets/logo-pigeon-green.png" alt="Pigeonworks" />
          <span className="pw-wordmark">Pigeonworks</span>
        </a>
        <nav className="pw-nav">
          {navItems.map((n) => (
            <button
              key={n.id}
              className={`pw-nav-link ${page === n.id ? "is-active" : ""}`}
              onClick={() => onNav(n.id)}
            >
              {n.label}
            </button>
          ))}
          <span className="pw-nav-divider" />
          <span className="pw-lang">
            <button
              className={lang === "ja" ? "is-active" : ""}
              onClick={() => onLang("ja")}
            >日本語</button>
            <span className="pw-lang-sep">·</span>
            <button
              className={lang === "en" ? "is-active" : ""}
              onClick={() => onLang("en")}
            >EN</button>
          </span>
        </nav>
      </div>
      <div className="pw-masthead-rule pw-masthead-rule--bottom" />
      <div className="pw-masthead-meta pw-masthead-meta--center">
        <span>{t.masthead.left}</span>
        <span>{t.masthead.center}</span>
        <span>{t.masthead.right}</span>
      </div>
    </header>
  );
};

const Footer = ({ lang, onNav }) => {
  const t = window.PW_CONTENT[lang].home.footer;
  const sig = window.PW_CONTENT[lang].signature;
  // Map English labels to nav targets
  const linkFor = (label) => {
    const map = lang === "ja"
      ? {
          "シリーズ": "home",
          "便り": "home",
          "工房ノート": "home",
          "わたしたちについて": "about",
          "問い合わせ": "contact",
          "コーチング・カウンセリング": "contact",
          "プライバシー": "privacy",
          "利用規約": "terms",
          "特定商取引法に基づく表記": "tokushoho",
        }
      : {
          "Series": "home",
          "Letter": "home",
          "Studio notes": "home",
          "About": "about",
          "Contact": "contact",
          "Coaching · Counseling": "contact",
          "Privacy": "privacy",
          "Terms": "terms",
          "Commercial notice": "tokushoho",
        };
    return map[label] || "home";
  };
  return (
    <footer className="pw-footer">
      <div className="pw-footer-signature">
        <span className="pw-essay-signature">
          <span className="pw-signature-name">{sig.name}</span>
          {sig.nameEn && <span className="pw-signature-name-en">{sig.nameEn}</span>}
          <span className="pw-signature-seal" aria-label="seal">{sig.sealChar}</span>
        </span>
      </div>
      <div className="pw-footer-row">
        <div className="pw-footer-mark">
          <img src="assets/logo-pigeon-green.png" alt="" />
          <div>
            <div className="pw-wordmark" style={{ fontSize: 18 }}>Pigeonworks</div>
            <div className="pw-footer-blurb">{t.blurb}</div>
          </div>
        </div>
        <div className="pw-footer-cols">
          <div>
            <div className="pw-footer-col-title">{t.col1Title}</div>
            {t.col1.map((l) => (
              <button key={l} onClick={() => onNav(linkFor(l))}>{l}</button>
            ))}
          </div>
          <div>
            <div className="pw-footer-col-title">{t.col2Title}</div>
            {t.col2.map((l) => (
              <button key={l} onClick={() => onNav(linkFor(l))}>{l}</button>
            ))}
          </div>
          <div>
            <div className="pw-footer-col-title">{t.col3Title}</div>
            {t.col3.map((l) => (
              <button key={l} onClick={() => onNav(linkFor(l))}>{l}</button>
            ))}
          </div>
        </div>
      </div>
      <div className="pw-footer-meta">
        <span>{t.copy}</span>
        <span>{t.set}</span>
        <span>{t.place}</span>
      </div>
    </footer>
  );
};

window.Masthead = Masthead;
window.Footer = Footer;