/* global React, window */
// Shared components for article hierarchy — masthead, breadcrumb, byline, related, colophon
const { CATEGORIES_EXT, AUTHORS, ARTICLES } = window.cynixDataExt;

const findAuthor = (slug) => AUTHORS.find((a) => a.slug === slug) || AUTHORS[0];
const findCategory = (id) => CATEGORIES_EXT.find((c) => c.id === id) || CATEGORIES_EXT[0];

const SharedMasthead = ({ section }) => (
  <header className="masthead">
    <div className="masthead-top">
      <div className="left">VOL. 09 · APRIL 2026 · {section || "ARTICLE"}</div>
      <div className="center">cynix.jp — A JPSM GROUP MEDIA</div>
      <div className="right">
        <a href="/cynix-jp.html">TOP</a>
        <a href="/newsletter.html">SUBSCRIBE</a>
        <a href="/search.html">Q SEARCH</a>
      </div>
    </div>
    <div className="masthead-main">
      <div className="masthead-tagline" style={{ borderTop: "none", borderBottom: "none" }}>
        TECH<br />JOURNAL
      </div>
      <div className="masthead-logo">
        <a href="/cynix-jp.html" style={{ color: "inherit", textDecoration: "none" }}>
          cyni<span className="ex">x</span>.jp
        </a>
      </div>
      <div className="masthead-meta">
        ¥ FREE · ONLINE<br />WEEK 17 / 52
      </div>
    </div>
    <nav className="masthead-nav">
      {CATEGORIES_EXT.map((c, i) => (
        <a key={c.id} href={`/category-${c.id === "domain" ? "domain-ssl" : c.id === "ai" ? "ai-tools" : c.id === "rsv" ? "reservation" : c.id}.html`}>
          <span className="num">{String((i + 1) * 12).padStart(3, "0")}</span>
          {c.en.toUpperCase()}
        </a>
      ))}
    </nav>
  </header>
);

const Breadcrumb = ({ items }) => (
  <div className="cy-crumb">
    {items.map((it, i) => (
      <React.Fragment key={i}>
        {i > 0 && <span className="sep">/</span>}
        {it.href ? <a href={it.href}>{it.label}</a> : <span className="here">{it.label}</span>}
      </React.Fragment>
    ))}
  </div>
);

const Colophon = () => (
  <footer className="colophon-mini">
    <div>
      <h6>EDITORIAL</h6>
      <a href="/about.html">ABOUT</a>
      <a href="/editorial-team.html">編集部紹介</a>
      <a href="/editors-letter.html">編集長コラム</a>
      <a href="/monthly-archive.html">バックナンバー</a>
      <a href="/event-archive.html">編集部夜会</a>
      <a href="/reader-letters.html">読者の手紙</a>
    </div>
    <div>
      <h6>CATEGORIES</h6>
      {CATEGORIES_EXT.map((c) => (
        <a key={c.id} href={`/category-${c.id === "domain" ? "domain-ssl" : c.id === "ai" ? "ai-tools" : c.id === "rsv" ? "reservation" : c.id}.html`}>{c.title}</a>
      ))}
    </div>
    <div>
      <h6>DISCOVER</h6>
      <a href="/search.html">検索</a>
      <a href="/tag-archive.html">タグ一覧</a>
      <a href="/series-archive.html">シリーズ</a>
      <a href="/popular-rankings.html">人気ランキング</a>
      <a href="/glossary.html">用語集</a>
      <a href="/data-dashboard.html">データルーム</a>
      <a href="/bookmarks.html">ブックマーク</a>
    </div>
    <div>
      <h6>BUSINESS</h6>
      <a href="/media-kit.html">媒体資料</a>
      <a href="/pricing.html">料金表</a>
      <a href="/case-studies.html">タイアップ実績</a>
      <a href="/newsletter.html">メルマガ登録</a>
      <a href="/contact.html">お問い合わせ</a>
    </div>
    <div>
      <h6>LEGAL</h6>
      <a href="/legal.html?tab=privacy">プライバシー</a>
      <a href="/legal.html?tab=terms">利用規約</a>
      <a href="/legal.html?tab=ad">広告掲載基準</a>
      <a href="/legal.html?tab=cookie">Cookie</a>
      <a href="/sitemap.html">サイトマップ</a>
    </div>
    <div>
      <h6>cynix.jp</h6>
      <span>A JPSM GROUP MEDIA</span>
      <span>© 2026 cynix.jp</span>
    </div>
  </footer>
);

const RelatedArticles = ({ items }) => (
  <section className="related">
    <div className="related-head">
      <h3>続きを<em>読む</em>。</h3>
      <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", opacity: 0.6 }}>EDITOR'S PICKS · {items.length} ARTICLES</span>
    </div>
    <div className="related-grid">
      {items.slice(0, 3).map((a, i) => {
        const cat = findCategory(a.category);
        const auth = findAuthor(a.author);
        const href = "/" + a.category + (a.subcategory ? "/" + a.subcategory : "") + "/" + a.slug + "/";
        return (
          <a key={a.slug} className="related-card" href={href}>
            <span className="num">{String(i + 1).padStart(2, "0")}</span>
            <span className="row-cat" style={{ alignSelf: "flex-start" }}>{cat.title}</span>
            <h4>{a.title}</h4>
            <span className="meta">By {auth.name_jp} · {a.readTime}min · {a.published}</span>
          </a>
        );
      })}
    </div>
  </section>
);

const ArticleVisual = ({ category, deco }) => {
  const cat = findCategory(category);
  return (
    <div style={{ position: "relative", width: "100%", height: "100%", minHeight: 460 }}>
      <div style={{ position: "absolute", inset: 0, background: `radial-gradient(ellipse at 30% 30%, ${cat.accent}33 0%, transparent 50%), radial-gradient(ellipse at 70% 70%, ${cat.color}66 0%, transparent 60%), linear-gradient(135deg, #0A0A0A 0%, ${cat.color} 70%, #0A0A0A 100%)` }}></div>
      <div className="art-cover-deco">{deco || "実"}</div>
      <svg viewBox="0 0 600 460" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
        <path d="M -10 360 Q 150 320 300 350 T 610 340" stroke={cat.accent} strokeOpacity="0.6" strokeWidth="1.5" fill="none" />
        <path d="M -10 400 Q 200 380 400 395 T 610 390" stroke="#FFF200" strokeOpacity="0.4" strokeWidth="1" fill="none" strokeDasharray="2 6" />
        <path d="M 50 460 Q 150 460 220 360 L 280 200 Q 295 175 310 200 L 380 360 Q 450 460 550 460 Z" fill="#F4EFE3" opacity="0.15" />
        <circle cx="450" cy="120" r="44" fill="#E63535" opacity="0.85" />
      </svg>
      <div style={{ position: "absolute", bottom: 24, left: 32, right: 32, color: "#F4EFE3", zIndex: 3 }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", textTransform: "uppercase", color: cat.accent, marginBottom: 8 }}>{cat.en}</div>
        <div style={{ fontFamily: "'Noto Sans JP', serif", fontStyle: "italic", fontWeight: 900, fontSize: 22, lineHeight: 1.3 }}>{cat.title}</div>
      </div>
    </div>
  );
};

window.cynixShared = { SharedMasthead, Breadcrumb, Colophon, RelatedArticles, ArticleVisual, findAuthor, findCategory };