// blog-list.jsx — BLOG セクションの記事タイトル一覧
// ▼ 記事ページができたら href に URL を入れてください（'#' のままだとリンクなし表示）
const BLOG_CATEGORIES = [
  { id: 'life', en: 'Life Events', jp: '離婚・ライフイベント編', posts: [
    { title: '離婚するとき住宅はどうする？「損をしない家の選択肢」と３つの注意点', href: 'blog/divorce-house-options.html' },
    { title: '離婚で「住宅ローンの連帯保証人」から外れる方法はある？', href: 'blog/divorce-joint-guarantor.html' },
    { title: '元夫名義の家に住み続けるリスクと、名義変更の手続き', href: 'blog/ex-husband-house-title-transfer.html' },
    { title: '離婚時の「任意売却」とは？ローンが返せなくても家を売る方法', href: 'blog/divorce-voluntary-sale.html' },
    { title: 'シングルマザーの家探し！福井市で賃貸vs購入どっちがいい？', href: 'blog/single-mother-rent-or-buy-fukui.html' },
    { title: '親から実家を相続することに…離婚を機にUターンする際の注意点', href: 'blog/inherit-family-home-u-turn.html' },
  ]},
  { id: 'women', en: 'For Women', jp: '女性の住まい・初めての不動産編', posts: [
    { title: '女性の単身世帯が増加中！福井市で「独身女性がマンションを買う」リアル', href: 'blog/single-woman-condo-fukui.html' },
    { title: '初めての家探しで失敗しない！女性宅建士が教える「内見チェックポイント」', href: 'blog/first-home-viewing-checklist.html' },
    { title: '「実家じまい」どうする？福井に眠る空き家の処分と活用のステップ', href: 'blog/closing-family-home-vacant-house.html' },
    { title: '相談しやすさNo.1を目指して。私が「女性専門の不動産相談」を始めた理由（自己紹介記事）', href: 'blog/about-women-real-estate-consultation.html' },
    { title: 'パートや派遣社員でも住宅ローンは組める？福井の地銀の審査の目安', href: 'blog/part-time-mortgage-fukui.html' },
  ]},
  { id: 'local', en: 'Fukui Local', jp: '福井市・地域密着編', posts: [
    { title: '【福井市】子育て世代に人気のエリア3選！学校区や住みやすさを比較', href: 'blog/fukui-family-areas.html' },
    { title: '冬の福井の家探し！「雪対策（消雪道路・カーポート）」で見るべきポイント', href: 'blog/fukui-winter-snow-house-hunting.html' },
    { title: '福井駅周辺の再開発でどう変わる？これからの福井市の地価と買い時', href: 'blog/fukui-station-redevelopment-land-price.html' },
    { title: '福井市でマイホームを建てるなら、中古住宅リノベーションもアリな理由', href: 'blog/fukui-used-house-renovation.html' },
    { title: '福井市の「空き家補助金」は使える？お得に家を売買・リフォームする方法', href: 'blog/fukui-vacant-house-subsidy.html' },
  ]},
  { id: 'money', en: 'Money & Selling', jp: 'お金・売却の基礎知識編', posts: [
    { title: '家を売るときにかかる「諸費用」と「税金」のハナシを分かりやすく', href: 'blog/home-sale-costs-taxes.html' },
    { title: '【売却】一括査定サイトのデメリットとは？地元の不動産屋に直接頼むメリット', href: 'blog/bulk-appraisal-vs-local-agent.html' },
    { title: '「住みながら家を売る」ってできる？見学者を迎えるコツとスケジュール', href: 'blog/sell-while-living.html' },
    { title: '中古一戸建て、売り出しから平均何ヶ月で売れる？福井のリアルな期間', href: 'blog/fukui-used-house-sale-period.html' },
    { title: '買ってはいけない中古物件の特徴とは？宅建士が見る「建物の危険信号」', href: 'blog/used-house-red-flags.html' },
  ]},
];

const BlogList = () => {
  const bp = useBreakpoint();
  const isMobile = bp === 'mobile';
  const [cat, setCat] = React.useState(BLOG_CATEGORIES[0].id);
  let n = 0;
  const numbered = BLOG_CATEGORIES.map(c => ({ ...c, posts: c.posts.map(p => ({ ...p, no: ++n })) }));
  const current = numbered.find(c => c.id === cat);
  return (
    <div style={{ maxWidth: 1000, margin: '0 auto' }}>
      <div role="tablist" style={{ display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, minmax(0,1fr))' : 'repeat(4, minmax(0,1fr))', gap: isMobile ? 8 : 12, marginBottom: pick(bp, 40, 32, 24) }}>
        {numbered.map(c => {
          const on = c.id === cat;
          return (
            <button key={c.id} role="tab" aria-selected={on} onClick={() => setCat(c.id)} style={{
              border: '1px solid var(--ink)', borderRadius: 999, cursor: 'pointer', padding: isMobile ? '10px 8px' : '12px 14px', minHeight: 44,
              background: on ? 'var(--ink)' : 'transparent', color: on ? '#fff' : 'var(--ink)', transition: 'background .25s, color .25s',
              display: 'grid', gap: 2, textAlign: 'center',
            }}>
              <span style={{ fontFamily: 'var(--mono)', fontSize: isMobile ? 9 : 10, letterSpacing: '0.16em', opacity: 0.75 }}>{c.en.toUpperCase()}</span>
              <span style={{ fontFamily: 'var(--sans-jp)', fontSize: isMobile ? 11.5 : 13, fontWeight: 500 }}>{c.jp}</span>
            </button>
          );
        })}
      </div>
      <ul key={cat} className="blog-list" style={{ listStyle: 'none', margin: 0, padding: 0, borderTop: '1px solid var(--line-strong)' }}>
        {current.posts.map(p => {
          const off = !p.href || p.href === '#';
          return (
            <li key={p.no} style={{ borderBottom: '1px solid var(--line-strong)' }}>
              <a href={off ? undefined : p.href} className="blog-row" style={{
                display: 'grid', gridTemplateColumns: isMobile ? '34px minmax(0,1fr) 22px' : '56px minmax(0,1fr) 28px', alignItems: 'center', gap: isMobile ? 10 : 20,
                padding: pick(bp, '24px 8px', '22px 6px', '18px 2px'), color: 'var(--ink)', textDecoration: 'none', cursor: off ? 'default' : 'pointer',
              }}>
                <span style={{ fontFamily: 'var(--serif-en)', fontSize: pick(bp, 22, 20, 17), color: 'var(--pink-500)' }}>{String(p.no).padStart(2, '0')}</span>
                <span style={{ fontFamily: 'var(--serif-jp)', fontSize: pick(bp, 17, 16, 14.5), lineHeight: 1.7, fontWeight: 500, textWrap: 'pretty' }}>{p.title}</span>
                <span aria-hidden="true" style={{ opacity: off ? 0.3 : 1, justifySelf: 'end' }}>
                  <svg width="16" height="16" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.3"><path d="M2 6h8M6.5 2.5L10 6l-3.5 3.5" /></svg>
                </span>
              </a>
            </li>
          );
        })}
      </ul>
    </div>
  );
};

Object.assign(window, { BlogList, BLOG_CATEGORIES });