// Articles list page components — real published articles (no fabricated counts)
const { useState } = React;

// ============ Blog Hero ============
function BlogHero() {
  return (
    <section className="page-hero blog-hero" data-screen-label="01 BlogHero">
      <div className="ph-grid-bg" aria-hidden="true" />
      <div className="ph-glow ph-glow-tech" aria-hidden="true" />
      <div className="ph-glow ph-glow-touch" aria-hidden="true" />
      <div className="ph-inner">
        <nav className="ph-crumb">
          <a href="index.html">HOME</a>
          <span>/</span>
          <span className="is-current">BLOG</span>
        </nav>
        <div className="ph-eyebrow">
          <span className="line-deco" />KASHINOYA JOURNAL<span className="line-deco" />
        </div>
        <h1 className="ph-title">
          <span className="ph-title-en">Blog</span>
          <span className="ph-title-jp">補助金・AI・経営の知見</span>
        </h1>
        <p className="ph-lead">
          中小企業の成長を後押しする補助金情報、生成AI・DXの実践ノウハウ、経営のヒントを配信。
          <br />現場で「使える」記事をお届けします。
        </p>
        <div className="ph-stats">
          <div className="ph-stat"><b>8</b><span> 記事</span></div>
          <div className="ph-stat-divider" />
          <div className="ph-stat"><b>2</b><span> カテゴリ</span></div>
          <div className="ph-stat-divider" />
          <div className="ph-stat"><b>随時</b><span> 更新</span></div>
        </div>
      </div>
    </section>
  );
}

// ============ Featured Article ============
function FeaturedArticle() {
  return (
    <section className="featured-article" data-screen-label="02 Featured">
      <div className="fa-inner">
        <div className="fa-eyebrow">
          <span className="fa-pulse" />
          <span>FEATURED — 編集部おすすめ</span>
        </div>
        <a href="articles.html" className="fa-card">
          <div className="fa-image">
            <div className="fa-image-fill" />
            <div className="fa-image-pattern" />
            <div className="fa-image-tag">SUBSIDY</div>
            <div className="fa-image-num">2026<br />01</div>
          </div>
          <div className="fa-body">
            <div className="fa-meta">
              <span className="fa-cat fa-cat-touch">補助金活用</span>
              <span className="fa-date">2026.01.05</span>
            </div>
            <h2 className="fa-title">
              もう迷わない！ものづくり補助金 vs 省力化投資補助金。<br />
              <em>5つの違い</em>から自社に最適な補助金を見つける方法
            </h2>
            <p className="fa-desc">
              「最新の機械を導入して生産性を上げたいが、資金が…」というお悩みをお持ちの方へ。
              ものづくり補助金と省力化投資補助金の違いを、対象・上限額・補助率など5つの視点から徹底比較し、自社に最適な選択肢を整理します。
            </p>
            <div className="fa-tags">
              <span className="fa-tag">#ものづくり補助金</span>
              <span className="fa-tag">#省力化投資補助金</span>
              <span className="fa-tag">#設備投資</span>
            </div>
            <div className="fa-cta">
              続きを読む
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                <path d="M5 10h10M10 5l5 5-5 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </div>
          </div>
        </a>
      </div>
    </section>
  );
}

// ============ Category Filter ============
const CATEGORIES = [
  { id: "all",     label: "すべて",     count: 8, theme: "all" },
  { id: "subsidy", label: "補助金活用", count: 7, theme: "touch" },
  { id: "news",    label: "お知らせ",   count: 1, theme: "tech" },
];

function CategoryBar({ active, onChange }) {
  return (
    <div className="cat-bar-wrap">
      <div className="cat-bar">
        {CATEGORIES.map(c => (
          <button
            key={c.id}
            className={`cat-pill cat-pill-${c.theme} ${active === c.id ? "is-active" : ""}`}
            onClick={() => onChange(c.id)}
          >
            <span className="cat-pill-label">{c.label}</span>
            <span className="cat-pill-count">{c.count}</span>
          </button>
        ))}
      </div>
      <div className="cat-search">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
          <circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="1.8"/>
          <path d="M20 20l-3.5-3.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
        </svg>
        <input type="text" placeholder="記事を検索…" />
      </div>
    </div>
  );
}

// ============ Article List ============
const COVERS = ["subsidy-1", "subsidy-2", "subsidy-3", "ai-1"];

const ARTICLES = [
  { id: 1, cat: "subsidy", catLabel: "補助金活用", title: "2025年版 IT導入補助金とは？ 対象となる「ITツール」の範囲", date: "2025.12.25", tags: ["IT導入補助金", "ITツール"] },
  { id: 2, cat: "subsidy", catLabel: "補助金活用", title: "【2025年版】中小企業向け 代表的5大補助金 徹底比較まとめ", date: "2025.12.25", tags: ["補助金比較", "中小企業"] },
  { id: 3, cat: "subsidy", catLabel: "補助金活用", title: "補助金と助成金の違いとは｜金額や種類について解説【2025年最新】", date: "2026.01.05", tags: ["補助金", "助成金"] },
  { id: 4, cat: "subsidy", catLabel: "補助金活用", title: "もう迷わない！ものづくり補助金 vs 省力化投資補助金。5つの違いから自社に最適な補助金を見つける方法", date: "2026.01.05", tags: ["ものづくり補助金", "省力化投資補助金"] },
  { id: 5, cat: "subsidy", catLabel: "補助金活用", title: "5分で理解！持続化補助金（小規模事業者持続化補助金）とは？事例でポイント解説", date: "2026.01.05", tags: ["持続化補助金", "小規模事業者"] },
  { id: 6, cat: "news", catLabel: "お知らせ", title: "【2026年度予定】デジタル化・AI導入補助金（旧IT導入補助金）とは？2025年度との違い・申請のポイント", date: "2026.01.06", tags: ["デジタル化・AI導入補助金", "IT導入補助金"] },
  { id: 7, cat: "subsidy", catLabel: "補助金活用", title: "【第18回】小規模事業者持続化補助金 採択後の交付申請・事業実施ガイド", date: "2026.04.23", tags: ["持続化補助金", "交付申請"] },
  { id: 8, cat: "subsidy", catLabel: "補助金活用", title: "【第18回】小規模事業者持続化補助金 実績報告ガイド｜確定検査から精算払請求まで", date: "2026.05.02", tags: ["持続化補助金", "実績報告"] },
];

function ArticleList({ active }) {
  const base = active === "all" ? ARTICLES : ARTICLES.filter(a => a.cat === active);
  const sorted = [...base].sort((a, b) => b.date.localeCompare(a.date));
  return (
    <div className="al-grid">
      {sorted.map((a, idx) => (
        <a key={a.id} className={`al-card al-card-${a.cat}`} href="articles.html">
          <div className={`al-cover al-cover-${COVERS[idx % COVERS.length]}`}>
            <div className="al-cover-pattern" />
            <div className="al-cover-id">#{String(a.id).padStart(3, "0")}</div>
          </div>
          <div className="al-body">
            <div className="al-meta">
              <span className={`al-cat al-cat-${a.cat}`}>{a.catLabel}</span>
              <span className="al-date">{a.date}</span>
            </div>
            <h3 className="al-title">{a.title}</h3>
            <div className="al-foot">
              <div className="al-tags">
                {a.tags.slice(0, 2).map((t, i) => <span key={i} className="al-tag">#{t}</span>)}
              </div>
            </div>
          </div>
        </a>
      ))}
    </div>
  );
}

// ============ Main App ============
function BlogApp() {
  const [active, setActive] = useState("all");
  return (
    <>
      <BlogHero />
      <FeaturedArticle />
      <section className="blog-list" data-screen-label="03 List">
        <div className="bl-inner">
          <div className="bl-head">
            <h2 className="bl-title">
              <span className="bl-title-en">Latest Articles</span>
              <span className="bl-title-jp">最新の記事</span>
            </h2>
          </div>
          <CategoryBar active={active} onChange={setActive} />
          <ArticleList active={active} />
        </div>
      </section>
    </>
  );
}

Object.assign(window, { BlogApp });