// ===== Category Page App (category-page.jsx) =====
const { useState } = React;

// ===== Category Hero =====
const CategoryHero = ({ meta, catKey }) => (
  <section className="archive-hero">
    <div className="archive-hero-inner">
      <nav className="archive-crumb">
        <a href={window.CAT_KEY === 'all' ? '../index.html' : 'index.html'}>HOME</a>
        <span>/</span>
        <span className="now">{meta.name}</span>
      </nav>

<div className="archive-title-row">
        <div>
          <h1 className="archive-title">
            <span className="en">{meta.en}</span>
            {meta.name}
          </h1>
          <p className="archive-lede">{meta.desc}</p>
        </div>
        <div className="archive-meta">
          <div className="archive-meta-item">
            <div className="n">{meta.count}</div>
            <div className="l">ARTICLES</div>
          </div>
          <div className="archive-meta-item">
            <div className="n">無料</div>
            <div className="l">ALL FREE</div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ===== Helpers =====
const fmtTitle = (title) => {
  const parts = [];
  let cur = '';
  let inBracket = false;
  for (let i = 0; i < title.length; i++) {
    const c = title[i];
    if (c === '【') { inBracket = true; if (cur) { parts.push(cur); cur = ''; } cur += c; }
    else if (c === '】') { inBracket = false; cur += c; }
    else if (!inBracket && c === '？') { cur += c; parts.push(cur); cur = ''; }
    else if (!inBracket && c === '：') { if (cur) parts.push(cur); cur = ''; }
    else { cur += c; }
  }
  if (cur) parts.push(cur);
  const filtered = parts.filter(p => p.length > 0);
  if (filtered.length <= 1) return title;
  return filtered.map((p, i) => <React.Fragment key={i}>{i > 0 && <br/>}{p}</React.Fragment>);
};
// ===== Grid Card =====
const CatGridCard = ({ a }) => {
  return (
  <a href={a.href} className="archive-card">
    <div className={"archive-card-thumb " + a.thumb}>
      <div className="ph-overlay-dots"></div>
      <span className="pill">{a.pill}</span>
      {a.isNew && <span className="new-bg">NEW</span>}
      <span className="reads">👁 {a.reads}</span>
      <div style={{position:'absolute',top:'50%',left:0,right:0,transform:'translateY(-60%)',padding:'0 14px',textAlign:'center',pointerEvents:'none'}}>
        <p style={{color:'#fff',fontSize:'13px',fontWeight:800,lineHeight:1.5,textShadow:'0 1px 6px rgba(0,0,0,0.55)',display:'-webkit-box',WebkitLineClamp:3,WebkitBoxOrient:'vertical',overflow:'hidden',margin:0}}>{fmtTitle(a.title)}</p>
      </div>
      <div style={{position:'absolute',bottom:'8px',left:'8px',display:'flex',alignItems:'center',gap:'5px'}}>
        <div style={{width:'18px',height:'18px',borderRadius:'4px',background:'var(--cyan-500)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'11px',fontWeight:900,color:'#fff',flexShrink:0}}>A</div>
        <span style={{fontSize:'10px',fontWeight:700,color:'#fff',lineHeight:1.2,whiteSpace:'nowrap',textShadow:'0 1px 3px rgba(0,0,0,0.5)'}}>AI Blog Start</span>
      </div>
    </div>
    <div className="archive-card-body">
      <div className="archive-card-meta">
        <span>{a.date}</span>
        <span>·</span>
        <span><Icon name="clock" size={11}/> 読了 {a.time}</span>
      </div>
      <h3 className="archive-card-title">{a.title}</h3>
      <p className="archive-card-excerpt">{a.excerpt}</p>
      <div className="archive-card-foot">
        <div style={{display:"flex",gap:"6px",flexWrap:"wrap"}}>
          {a.tags.slice(0,2).map((t, i) => <span key={i} className="tag-sm">#{t}</span>)}
        </div>
      </div>
    </div>
  </a>
  );
};

// ===== List Card =====
const CatListCard = ({ a }) => {
  return (
  <a href={a.href} className="archive-list-card">
    <div className={"archive-card-thumb " + a.thumb}>
      <div className="ph-overlay-dots"></div>
      <span className="pill">{a.pill}</span>
      <div style={{position:'absolute',top:'50%',left:0,right:0,transform:'translateY(-60%)',padding:'0 10px',textAlign:'center',pointerEvents:'none'}}>
        <p style={{color:'#fff',fontSize:'11px',fontWeight:800,lineHeight:1.45,textShadow:'0 1px 5px rgba(0,0,0,0.55)',display:'-webkit-box',WebkitLineClamp:3,WebkitBoxOrient:'vertical',overflow:'hidden',margin:0}}>{fmtTitle(a.title)}</p>
      </div>
      <div style={{position:'absolute',bottom:'6px',left:'6px',display:'flex',alignItems:'center',gap:'4px'}}>
        <div style={{width:'14px',height:'14px',borderRadius:'3px',background:'var(--cyan-500)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'9px',fontWeight:900,color:'#fff',flexShrink:0}}>A</div>
        <span style={{fontSize:'9px',fontWeight:700,color:'#fff',lineHeight:1.2,whiteSpace:'nowrap',textShadow:'0 1px 3px rgba(0,0,0,0.5)'}}>AI Blog Start</span>
      </div>
    </div>
    <div className="body">
      <div className="meta">
        {a.isNew && <span className="new-bg" style={{fontSize:"9px",padding:"1px 6px",borderRadius:"4px",marginRight:"6px"}}>NEW</span>}
        <span>{a.date}</span>
        <span>· 読了 {a.time}</span>
      </div>
      <h3 className="title">{a.title}</h3>
      <p className="excerpt">{a.excerpt}</p>
      <div style={{display:"flex",gap:"6px",marginTop:"8px",flexWrap:"wrap"}}>
        {a.tags.slice(0,2).map((t, i) => <span key={i} className="tag-sm">#{t}</span>)}
      </div>
    </div>
    <div className="reads-block">
      <div className="n">{a.reads}</div>
      <div className="l">READS</div>
    </div>
  </a>
  );
};

// ===== Sidebar =====
const CatSidebar = ({ catKey, articles }) => {
  const ranking = [...articles]
    .sort((a, b) => parseInt(b.reads.replace(/,/g,"")) - parseInt(a.reads.replace(/,/g,"")))
    .slice(0, 5);

  return (
    <aside className="sidebar">
      {/* このカテゴリーの人気記事 */}
      <div className="widget">
        <div className="widget-head">
          <div className="t">このカテゴリーの人気記事</div>
          <div className="en">POPULAR IN {window.CAT_META[catKey].en}</div>
        </div>
        <ol className="rank-list">
          {ranking.map((r, i) => (
            <li key={i} className={"rank-item" + (i < 3 ? " top3" : "")}>
              <div className="rank-num">{String(i + 1).padStart(2, "0")}</div>
              <div className="rank-body">
                <h4 className="rank-title">
                  <a href={r.href} style={{color:"inherit",textDecoration:"none"}}>{r.title}</a>
                </h4>
                <div className="rank-meta">👁 {r.reads}</div>
              </div>
            </li>
          ))}
        </ol>
      </div>

      {/* カテゴリー一覧 */}
      <div className="widget">
        <div className="widget-head">
          <div className="t">カテゴリー</div>
          <div className="en">CATEGORIES</div>
        </div>
        <ul className="cat-list">
          {Object.entries(window.CAT_META).filter(([k]) => k !== 'all').map(([key, m]) => (
            <li key={key}>
              <a href={(window.CAT_KEY === 'all' ? '../' : '') + window.CAT_PAGES[key]} className={"cat-link" + (key === catKey ? " active" : "")}>
                <div className="ic"><Icon name={m.icon} size={16}/></div>
                <div className="txt">
                  <div style={{fontSize:"13.5px",fontWeight:700}}>{m.name}</div>
                  <div style={{fontSize:"11px",color:"var(--ink-500)",marginTop:"1px"}}>{m.en}</div>
                </div>
                <div className="cnt">{String(m.count).padStart(2,"0")}</div>
              </a>
            </li>
          ))}
        </ul>
      </div>

      {/* ロードマップCTA */}
      <div className="widget news-widget">
        <div className="widget-head">
          <div className="t">月5万円ロードマップ</div>
          <div className="en">FREE GUIDE</div>
        </div>
        <div className="widget-body">
          <p className="d">AIブログで月5万円稼ぐまでの具体的な行動計画を無料公開 📘</p>
          <a href="articles/ai-blog-50000-roadmap.html" className="news-btn"
            style={{display:"block",textAlign:"center",textDecoration:"none"}}>
            無料で読む →
          </a>
        </div>
      </div>

      <CtaWidget/>
    </aside>
  );
};

// ===== App =====
const App = () => {
  const catKey = window.CAT_KEY;
  const isAll = catKey === 'all';
  const base = isAll ? '../' : '';
  const meta   = window.CAT_META[catKey] || window.CAT_META.start;
  const articles = window.CAT_ARTICLES[catKey] || [];
  const [view, setView] = useState("grid");

  const nav = [
    { label: "ホーム", href: base + "index.html" },
    ...Object.entries(window.CAT_META).filter(([k]) => k !== 'all').map(([key, m]) => ({
      label: m.name,
      href:  base + window.CAT_PAGES[key],
      active: key === catKey,
    })),
  ];

  return (
    <React.Fragment>
      <Header nav={nav} articlesHref={isAll ? "index.html" : "articles/index.html"}/>
      <CategoryHero meta={meta} catKey={catKey}/>

      <div style={{maxWidth:"var(--container)",margin:"0 auto",padding:"0 24px 60px"}}>
        {/* ツールバー */}
        <div className="archive-toolbar">
          <div className="result">
            <strong>{articles.length}</strong> 件 · <strong>{meta.name}</strong>
          </div>
          <div className="view-seg">
            <button className={view === "grid" ? "on" : ""} onClick={() => setView("grid")} aria-label="グリッド表示">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
            </button>
            <button className={view === "list" ? "on" : ""} onClick={() => setView("list")} aria-label="リスト表示">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
            </button>
          </div>
        </div>

        {/* メインコンテンツ + サイドバー */}
        <div className="archive-container">
          <main>
            {view === "grid" ? (
              <div className="archive-grid">
                {articles.map((a, i) => <CatGridCard key={i} a={a}/>)}
              </div>
            ) : (
              <div className="archive-list">
                {articles.map((a, i) => <CatListCard key={i} a={a}/>)}
              </div>
            )}
          </main>
          <CatSidebar catKey={catKey} articles={articles}/>
        </div>
      </div>

      <Footer/>
    </React.Fragment>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);