/* MACHIKADO ROOMS — shared components */
const { useState, useEffect } = React;
const D = window.MACHIKADO;

/* top-level section that a (leaf or section) id belongs to */
const catOf = (id) => D.catMap[id] || { id, jp: "記事", en: "Story" };
const authOf = (id) => D.authors[id] || { name: "編集部", role: "", initials: "—" };
const sectionOf = (id) => {
  const c = D.catMap[id];
  if (!c) return null;
  return c.parent ? D.catMap[c.parent] : c;
};
/* tag accent color by section: sell/reform → brick, buy/invest → olive */
const OLIVE_SECTIONS = { buy: true, invest: true };
const tagToneOf = (catId) => {
  const sec = sectionOf(catId);
  return sec && OLIVE_SECTIONS[sec.id] ? "olive" : "brick";
};

/* ---- brand mark : 2×2 grid square (お部屋＝四角 motif) ---- */
function BrandMark() {
  return (
    <span className="brand-mark"><i></i><i></i><i></i><i></i></span>
  );
}

/* ---- corner marks : L-bracket (街角＝角 motif) ---- */
function CornerMarks({ corners = ["tl"] }) {
  return (
    <React.Fragment>
      {corners.map((c) => <span key={c} className={"cm cm--" + c}></span>)}
    </React.Fragment>
  );
}

/* ---- header ---- */
function Header({ go, theme, toggleTheme, route = {} }) {
  const activeSec = route.page === "category" && route.cat
    ? (sectionOf(route.cat) || {}).id
    : route.page === "feature" ? "__feature"
    : route.page === "column" ? "__column" : null;
  const navItems = [
    ...D.sections.map((s) => ({ key: s.id, label: s.jp, route: { page: "category", cat: s.id } })),
    { key: "__feature", label: "特集", route: { page: "feature" } },
    { key: "__column", label: "コラム", route: { page: "column" } },
  ];
  return (
    <header className="site-header">
      <div className="wrap site-header__inner">
        <a className="brand" onClick={() => go({ page: "top" })}>
          <BrandMark />
          <span className="brand-text">
            <span className="brand-name">MACHIKADO ROOMS</span>
            <span className="brand-sub">マチカドルームス</span>
          </span>
        </a>
        <nav className="site-nav">
          {navItems.map((n) => (
            <a key={n.key} className={n.key === activeSec ? "is-active" : ""} onClick={() => go(n.route)}>{n.label}</a>
          ))}
        </nav>
        <div className="site-header__tools">
          <button className="search-pill" type="button"><span className="sq"></span>記事をさがす</button>
          <button className="theme-toggle" type="button" onClick={toggleTheme} aria-label="テーマ切り替え">
            <span className="sq"></span><span className="mono">{theme === "dark" ? "LIGHT" : "DARK"}</span>
          </button>
        </div>
      </div>
    </header>
  );
}

/* ---- article card ---- (rich variant adds leaf sub-label + excerpt) */
function ArticleCard({ a, go, rich }) {
  const c = catOf(a.cat);
  const sec = sectionOf(a.cat) || c;
  const isLeaf = !!(D.catMap[a.cat] && D.catMap[a.cat].parent);
  return (
    <a className="article-card" onClick={() => go({ page: "article", id: a.id })}>
      <span className={"article-card__media frame " + (a.image ? "has-img" : "ph")}>
        {a.image ? <img className="media-img" src={a.image} alt="" loading="lazy" /> : null}
        <CornerMarks corners={["tl"]} />
        {!a.image ? <span className="ph__label">PHOTO ─ {a.img || a.title}</span> : null}
      </span>
      <span className="article-card__cat">
        <span className={"tag tag--" + tagToneOf(a.cat)}>{sec.jp}</span>
        {rich && isLeaf ? <span className="article-card__sub">{c.jp}</span> : null}
      </span>
      <h3 className="article-card__title">{a.title}</h3>
      {rich ? <p className="article-card__excerpt">{a.dek}</p> : null}
      <span className="article-card__meta">{a.date} ・ {sec.en.toUpperCase()}</span>
    </a>
  );
}

/* ---- footer ---- */
function Footer({ go }) {
  return (
    <footer className="site-footer">
      <div className="wrap site-footer__inner">
        <div className="foot-brand">
          <a className="brand" onClick={() => go({ page: "top" })}>
            <BrandMark />
            <span className="brand-name">MACHIKADO ROOMS</span>
          </a>
          <p className="foot-tagline">街角から、住まいを考える。<br />売る・買う・リフォーム・投資のオウンドメディア。</p>
        </div>
        <div className="foot-col">
          <h4>CATEGORY</h4>
          <ul>
            {D.sections.map((s) => (
              <li key={s.id}><a onClick={() => go({ page: "category", cat: s.id })}>{s.jp}</a></li>
            ))}
          </ul>
        </div>
        <div className="foot-col">
          <h4>READ</h4>
          <ul>
            <li><a onClick={() => go({ page: "category", cat: "all" })}>特集</a></li>
            <li><a onClick={() => go({ page: "feature" })}>街角採集</a></li>
            <li><a onClick={() => go({ page: "column" })}>街角コラム</a></li>
            <li><a onClick={() => go({ page: "category", cat: "all" })}>事例集</a></li>
          </ul>
        </div>
        <div className="foot-col">
          <h4>ABOUT</h4>
          <ul>
            <li><a>このメディアについて</a></li>
            <li><a>運営会社</a></li>
            <li><a>お問い合わせ</a></li>
            <li><a>プライバシー</a></li>
          </ul>
        </div>
      </div>
      <div className="wrap site-footer__bar">
        <span className="mono">© 2026 MACHIKADO ROOMS</span>
        <span className="mono">マチカドルームス ／ サテライト型オウンドメディア</span>
      </div>
    </footer>
  );
}

Object.assign(window, { BrandMark, CornerMarks, Header, Footer, ArticleCard, catOf, authOf, sectionOf, tagToneOf });