// Page components — exported to window

const { useState: useSt } = React;

const ARTICLES = [
  {
    id: 1,
    title: '「貯める力」家計の見える化でわかった3つのこと',
    excerpt: 'マネーフォワードを導入して半年。支出の「見えない漏れ」に気づいてから、家計が劇的に変わりました。サブスク整理で月5,000円の削減に成功した記録です。',
    date: '2026年4月15日',
    tags: ['貯める力', '家計管理'],
  },
  {
    id: 2,
    title: 'FP3級合格体験記：医療職パパが1ヶ月で合格した方法',
    excerpt: '2026年2月、FP3級に合格しました！仕事・育児・勉強の三刀流でも合格できた勉強法と、リベ活との相乗効果についてまとめました。',
    date: '2026年3月2日',
    tags: ['稼ぐ力', 'FP3級'],
  },
  {
    id: 3,
    title: 'NISAを始めて学んだ「インデックス投資」の基本',
    excerpt: '両学長の動画をきっかけにNISAを開始。インデックス投資と高配当株投資を組み合わせた私のポートフォリオと、始めてみて感じたリアルな変化を書きます。',
    date: '2026年2月10日',
    tags: ['増やす力', 'NISA'],
  },
  {
    id: 4,
    title: '「DIE WITH ZERO」を読んで人生設計が変わった話',
    excerpt: '「貯めることが正義」だと思っていた私が、この本を読んで180度考え方が変わりました。タイムバケットを作って、家族との時間を最優先にするようになったきっかけの本。',
    date: '2026年1月20日',
    tags: ['使う力', '読書'],
  },
  {
    id: 5,
    title: '妻の事業サポートで月収1万円アップを達成した話',
    excerpt: '2025年の目標「妻のサポートで月収を1万円増やす」を達成！サイト運用・Webライティング・経理サポートで実際に何をしたかを公開します。',
    date: '2025年12月28日',
    tags: ['稼ぐ力', '副業'],
  },
];

const BOOKS = [
  {
    title: 'DIE WITH ZERO',
    author: 'ビル・パーキンス',
    desc: '「お金を残して死ぬな」という衝撃のメッセージ。タイムバケットで人生を設計する考え方が、私の価値観を根本から変えた一冊。',
    tag: '人生設計',
    recommended: true,
  },
  {
    title: 'ドリルを売るには穴を売れ',
    author: '佐藤義典',
    desc: 'マーケティングの本質をわかりやすく解説。妻の事業サポートをする中で、顧客視点の重要性を改めて学んだ。',
    tag: 'マーケティング',
    recommended: true,
  },
  {
    title: 'お金の大学',
    author: '両@リベ大学長',
    desc: 'リベ活のバイブル。5つの力の基本がこの1冊に凝縮。まだ読んでいない方にはまず最初に読んでほしい本。',
    tag: '資産形成',
    recommended: true,
  },
];

const TOOLS = [
  { name: 'マネーフォワードME', desc: '家計の見える化に必須。口座・カード・証券を一元管理。月1回の家計チェックに活用中。', category: '家計管理' },
  { name: 'NISA口座（インデックス＆高配当）', desc: '長期の資産形成の軸。毎月コツコツ積み立て中。', category: '投資' },
  { name: 'MacBook Air', desc: '副業・ブログ・サイト運用の作業環境に投資。生産性が大幅アップした。', category: '作業環境' },
  { name: 'モバイルモニター', desc: 'MacBookと合わせてデュアルディスプレイ環境を構築。どこでも快適に作業できる。', category: '作業環境' },
  { name: 'ABCオンライン・WWS', desc: 'ライタースキルを高めるために所属。インプットとアウトプットの場として活用。', category: 'スキルアップ' },
];

// ── Home Page ────────────────────────────────────────────────
function HomePage({ setPage, theme: t }) {
  return (
    <div style={{ maxWidth: 900, margin: '0 auto', padding: '0 24px 80px' }}>
      {/* Hero */}
      <div style={{ padding: '64px 0 48px', borderBottom: `1px solid ${t.border}`, marginBottom: 56 }}>
        <p style={{ fontSize: 13, color: t.accent, letterSpacing: '0.1em', marginBottom: 12, fontWeight: 500 }}>PAPA NO RIBE-KATSU NIKKI</p>
        <h1 style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 'clamp(28px, 5vw, 42px)', fontWeight: 600, color: t.text, lineHeight: 1.4, marginBottom: 20, textWrap: 'pretty' }}>
          お金の自由を目指す<br />沖縄パパの記録
        </h1>
        <p style={{ fontSize: 15, color: t.textMuted, lineHeight: 1.9, maxWidth: 560, marginBottom: 32 }}>
          医療職・2児のパパ・WWS認定ライターの「かなさん」が、両学長のリベラルアーツ大学で学んだことを実践・記録するブログです。「今日が人生で一番若い日」を合言葉に、自由な生活を目指して歩んでいます。
        </p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <button onClick={() => setPage('profile')} style={{
            background: t.accent, color: '#fff', border: 'none', borderRadius: 8,
            padding: '12px 24px', fontSize: 14, cursor: 'pointer', fontFamily: "'Noto Sans JP', sans-serif", fontWeight: 500,
          }}>プロフィールを見る</button>
          <button onClick={() => setPage('learn')} style={{
            background: 'none', color: t.accent, border: `1.5px solid ${t.accent}`, borderRadius: 8,
            padding: '12px 24px', fontSize: 14, cursor: 'pointer', fontFamily: "'Noto Sans JP', sans-serif",
          }}>リベ活の学びへ</button>
        </div>
      </div>

      {/* 5つの力 サマリー */}
      <div style={{ marginBottom: 64 }}>
        <SectionTitle title="5つの力の実践状況" subtitle="リベ大で学んだ5つの力を日々実践中" theme={t} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))', gap: 12 }}>
          {[
            { icon: '🏦', label: '貯める力', count: 4, color: t.accent },
            { icon: '📈', label: '増やす力', count: 1, color: t.accent },
            { icon: '💼', label: '稼ぐ力', count: 3, color: t.accent },
            { icon: '🛡️', label: '守る力', count: 1, color: t.accent },
            { icon: '🎯', label: '使う力', count: 4, color: t.accent },
          ].map(f => (
            <div key={f.label} style={{ background: t.bgSecondary, borderRadius: 10, padding: '16px', textAlign: 'center', border: `1px solid ${t.border}` }}>
              <div style={{ fontSize: 24, marginBottom: 6 }}>{f.icon}</div>
              <div style={{ fontSize: 13, fontWeight: 600, color: t.text, marginBottom: 4 }}>{f.label}</div>
              <div style={{ fontSize: 20, fontWeight: 700, color: t.accent }}>{f.count}</div>
              <div style={{ fontSize: 11, color: t.textMuted }}>実践中</div>
            </div>
          ))}
        </div>
      </div>

      {/* 最新記事 */}
      <div style={{ marginBottom: 64 }}>
        <SectionTitle title="最新記事" subtitle="リベ活の実践記録を発信中" theme={t} />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {ARTICLES.slice(0, 3).map(a => (
            <ArticleCard key={a.id} article={a} theme={t} onClick={() => {}} />
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 24 }}>
          <button onClick={() => setPage('learn')} style={{
            background: 'none', border: `1px solid ${t.border}`, borderRadius: 8,
            padding: '10px 32px', fontSize: 14, color: t.textMuted, cursor: 'pointer', fontFamily: "'Noto Sans JP', sans-serif",
          }}>すべての記事を見る →</button>
        </div>
      </div>

      {/* ひとこと */}
      <div style={{ background: t.bgAccent, borderRadius: 16, padding: '32px', border: `1px solid ${t.border}` }}>
        <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 18, color: t.accent, marginBottom: 12, lineHeight: 1.6 }}>
          「現状維持では後退するばかりである」
        </p>
        <p style={{ fontSize: 14, color: t.textMuted, lineHeight: 1.8 }}>
          育児・仕事・リベ活を両立しながら、家族との時間を最優先に。同じような環境のパパ・ママさんと繋がりたい、学びをシェアしたいという思いでこのブログを書いています。
        </p>
        <p style={{ fontSize: 13, color: t.accent, marginTop: 16, fontWeight: 500 }}>— かなさん（沖縄・医療職・2児のパパ）</p>
      </div>
    </div>
  );
}

// ── Profile Page ─────────────────────────────────────────────
function ProfilePage({ theme: t }) {
  const strengths = ['最上志向', '学習欲', '社交性', '目標志向', '共感性', '収集心', '着想', '個別化', '調和性', 'ポジティブ'];
  const certs = ['保健師・看護師免許', '第1種衛生管理者免許', 'WWS認定ライター（株式会社メリル）', '日商簿記3級', 'FP3級'];
  const wantToConnect = ['妊娠中や育児中のママパパ', 'ブロガーやWebライターの方', '夢に向かって挑戦している方'];

  return (
    <div style={{ maxWidth: 900, margin: '0 auto', padding: '48px 24px 80px' }}>
      <SectionTitle title="プロフィール" subtitle="かなさんについて" theme={t} />

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 40, marginBottom: 48, alignItems: 'start' }}>
        {/* Avatar placeholder */}
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
          <div style={{
            width: 160, height: 160, borderRadius: '50%',
            border: `3px solid ${t.accentLight}`,
            overflow: 'hidden',
            background: t.bgSecondary,
          }}>
            <img src="uploads/note-image.png" alt="かなさん" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 18, fontWeight: 600, color: t.text }}>かなさん</p>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', justifyContent: 'center' }}>
            {['沖縄', '医療職', 'パパ'].map(tag => (
              <span key={tag} style={{ fontSize: 11, padding: '3px 10px', borderRadius: 20, background: t.bgAccent, color: t.accent }}>{tag}</span>
            ))}
          </div>
        </div>
        {/* Bio */}
        <div>
          <div style={{ background: t.bgSecondary, borderRadius: 12, padding: '20px 24px', border: `1px solid ${t.border}`, marginBottom: 16 }}>
            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
              {[
                ['出身地', '沖縄県🌺'],
                ['職種', '医療関係（保健師・看護師）'],
                ['家族構成', '妻（個人事業主）＋未就学児2名の4人家族'],
                ['副業', '妻の事業サポート、Webライティング'],
              ].map(([k, v]) => (
                <tr key={k} style={{ borderBottom: `1px solid ${t.border}` }}>
                  <td style={{ padding: '10px 0', fontSize: 12, color: t.textMuted, whiteSpace: 'nowrap', paddingRight: 20, width: 100 }}>{k}</td>
                  <td style={{ padding: '10px 0', fontSize: 14, color: t.text }}>{v}</td>
                </tr>
              ))}
            </table>
          </div>
          <p style={{ fontSize: 14, color: t.text, lineHeight: 1.9 }}>
            お金に困らない自由な生活を手に入れるため、リベシティへ入会。「自分に忠実に生きる」ことを目標に、家族や価値観の合う仲間との時間を大切にしながら、情熱を注げる仕事で価値を提供することを目指しています。
          </p>
        </div>
      </div>

      {/* リベシティ活動 */}
      <div style={{ marginBottom: 48 }}>
        <h3 style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 18, color: t.text, marginBottom: 16 }}>リベシティでの活動</h3>
        <div style={{ background: t.bgAccent, borderRadius: 12, padding: '20px 24px', border: `1px solid ${t.border}` }}>
          <p style={{ fontSize: 14, color: t.text, lineHeight: 1.9 }}>
            <strong>よくいるチャット：</strong>沖縄🌺交流＆作業オフ会<br />
            1歳の娘や2歳の息子も一緒に参加！子連れでも安心して過ごせる会です。<br /><br />
            <strong>好きなリベ大コンテンツ：</strong><br />
            ・「豊かさマインドを持つ人」と「欠乏マインドを持つ人」の決定的な違い（人生論）<br />
            ・失敗しない独立のための10条件（人生論）<br />
            ・毎朝の学長ライブ、お金の講義やニュース
          </p>
        </div>
      </div>

      {/* ストレングスファインダー */}
      <div style={{ marginBottom: 48 }}>
        <h3 style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 18, color: t.text, marginBottom: 16 }}>ストレングスファインダー TOP10</h3>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {strengths.map((s, i) => (
            <div key={s} style={{
              display: 'flex', alignItems: 'center', gap: 8,
              background: i < 5 ? t.bgAccent : t.bgSecondary,
              border: `1px solid ${i < 5 ? t.accentLight : t.border}`,
              borderRadius: 8, padding: '8px 14px',
            }}>
              <span style={{ fontSize: 12, color: t.accent, fontWeight: 700, minWidth: 20 }}>#{i + 1}</span>
              <span style={{ fontSize: 14, color: t.text }}>{s}</span>
            </div>
          ))}
        </div>
      </div>

      {/* 資格 */}
      <div style={{ marginBottom: 48 }}>
        <h3 style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 18, color: t.text, marginBottom: 16 }}>保有資格</h3>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {certs.map(c => (
            <div key={c} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 14, color: t.text }}>
              <span style={{ color: t.accent, fontSize: 16 }}>🏅</span>{c}
            </div>
          ))}
        </div>
      </div>

      {/* 好きな言葉・本・人 */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 16, marginBottom: 48 }}>
        {[
          { label: '好きな言葉', items: ['「現状維持では後退するばかりである」', '「1.01の法則・0.99の法則」'] },
          { label: '好きな本', items: ['DIE WITH ZERO', 'ドリルを売るには穴を売れ'] },
          { label: '好きな人', items: ['両学長', 'なかじさん', 'ヒトデさん'] },
        ].map(block => (
          <div key={block.label} style={{ background: t.bgSecondary, borderRadius: 12, padding: '18px 20px', border: `1px solid ${t.border}` }}>
            <p style={{ fontSize: 12, color: t.accent, fontWeight: 600, marginBottom: 10, letterSpacing: '0.05em' }}>{block.label}</p>
            {block.items.map(i => <p key={i} style={{ fontSize: 13, color: t.text, lineHeight: 1.7, marginBottom: 4 }}>・{i}</p>)}
          </div>
        ))}
      </div>

      {/* 繋がりたい方へ */}
      <div style={{ background: t.bgAccent, borderRadius: 16, padding: '28px 32px', border: `1px solid ${t.border}` }}>
        <p style={{ fontSize: 14, fontWeight: 600, color: t.accent, marginBottom: 12 }}>こんな方と繋がりたいです✨</p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {wantToConnect.map(w => (
            <span key={w} style={{ fontSize: 13, padding: '6px 16px', borderRadius: 20, background: t.bg, color: t.text, border: `1px solid ${t.border}` }}>
              {w}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── Learn Page ───────────────────────────────────────────────
function LearnPage({ theme: t }) {
  const [activeTag, setActiveTag] = useSt('すべて');
  const tags = ['すべて', '貯める力', '増やす力', '稼ぐ力', '守る力', '使う力'];
  const filtered = activeTag === 'すべて' ? ARTICLES : ARTICLES.filter(a => a.tags.includes(activeTag));

  return (
    <div style={{ maxWidth: 900, margin: '0 auto', padding: '48px 24px 80px' }}>
      <SectionTitle title="リベ活の学び" subtitle="5つの力を実践した記録と気づき" theme={t} />

      {/* 5つの力カード */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 16, marginBottom: 48 }}>
        <ForceCard icon="🏦" label="貯める力" theme={t} items={[
          'マネーフォワードで家計の見える化',
          '価値観マップを作成',
          'FP3級を取得（R8.2月合格）',
          'サブスク・支出管理表の活用',
        ]} />
        <ForceCard icon="📈" label="増やす力" theme={t} items={[
          'NISA（インデックス投資）',
          '高配当株投資を開始',
        ]} />
        <ForceCard icon="💼" label="稼ぐ力" theme={t} items={[
          '妻の事業サポート（サイト・ブログ運営）',
          'Webライティング（WWS認定）',
          '経理サポート（簿記3級活用）',
        ]} />
        <ForceCard icon="🛡️" label="守る力" theme={t} items={[
          '保険の見直し検討中',
        ]} />
        <ForceCard icon="🎯" label="使う力" theme={t} items={[
          '時短家電・サービスで時間を買う',
          'ABCオンライン・WWS所属',
          '月2冊以上本を読む',
          'タイムバケットで人生設計',
        ]} />
      </div>

      {/* 記事一覧 */}
      <div>
        <h3 style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 18, color: t.text, marginBottom: 16 }}>実践記事一覧</h3>
        <div style={{ display: 'flex', gap: 8, marginBottom: 24, flexWrap: 'wrap' }}>
          {tags.map(tag => (
            <button key={tag} onClick={() => setActiveTag(tag)} style={{
              padding: '6px 16px', borderRadius: 20, border: `1px solid ${activeTag === tag ? t.accent : t.border}`,
              background: activeTag === tag ? t.accent : 'none', color: activeTag === tag ? '#fff' : t.textMuted,
              fontSize: 13, cursor: 'pointer', fontFamily: "'Noto Sans JP', sans-serif", transition: 'all 0.15s',
            }}>{tag}</button>
          ))}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {filtered.map(a => <ArticleCard key={a.id} article={a} theme={t} onClick={() => {}} />)}
        </div>
      </div>
    </div>
  );
}

// ── Books Page ────────────────────────────────────────────────
function BooksPage({ theme: t }) {
  return (
    <div style={{ maxWidth: 900, margin: '0 auto', padding: '48px 24px 80px' }}>
      <SectionTitle title="おすすめ書籍・ツール" subtitle="リベ活で実際に役立った本とツールを紹介" theme={t} />

      <div style={{ marginBottom: 56 }}>
        <h3 style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 18, color: t.text, marginBottom: 20 }}>📚 おすすめ書籍</h3>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {BOOKS.map((b, i) => (
            <div key={i} style={{ background: t.bgSecondary, borderRadius: 12, padding: '22px 24px', border: `1px solid ${t.border}`, display: 'grid', gridTemplateColumns: '1fr auto', gap: 16, alignItems: 'start' }}>
              <div>
                <div style={{ display: 'flex', gap: 8, marginBottom: 8, alignItems: 'center', flexWrap: 'wrap' }}>
                  {b.recommended && <span style={{ fontSize: 11, padding: '2px 8px', borderRadius: 20, background: t.accent, color: '#fff' }}>かなさん推薦</span>}
                  <span style={{ fontSize: 11, padding: '2px 8px', borderRadius: 20, background: t.bgAccent, color: t.accent }}>{b.tag}</span>
                </div>
                <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 17, fontWeight: 600, color: t.text, marginBottom: 4 }}>{b.title}</p>
                <p style={{ fontSize: 13, color: t.textMuted, marginBottom: 10 }}>著：{b.author}</p>
                <p style={{ fontSize: 14, color: t.text, lineHeight: 1.8 }}>{b.desc}</p>
              </div>
              <div style={{
                width: 60, height: 80, borderRadius: 4, flexShrink: 0,
                background: `linear-gradient(135deg, ${t.bgAccent}, ${t.accentLight}20)`,
                border: `1px solid ${t.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24,
              }}>📖</div>
            </div>
          ))}
        </div>
      </div>

      <div>
        <h3 style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 18, color: t.text, marginBottom: 20 }}>🛠️ 活用中のツール</h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 14 }}>
          {TOOLS.map((tool, i) => (
            <div key={i} style={{ background: t.bg, borderRadius: 12, padding: '18px 20px', border: `1px solid ${t.border}` }}>
              <span style={{ fontSize: 11, padding: '2px 10px', borderRadius: 20, background: t.bgAccent, color: t.accent, display: 'inline-block', marginBottom: 10 }}>{tool.category}</span>
              <p style={{ fontSize: 15, fontWeight: 600, color: t.text, marginBottom: 8 }}>{tool.name}</p>
              <p style={{ fontSize: 13, color: t.textMuted, lineHeight: 1.7 }}>{tool.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── Review Page ───────────────────────────────────────────────
function ReviewPage({ theme: t }) {
  const [openYear, setOpenYear] = useSt('2026');

  const reviews = {
    '2026': {
      goals: [
        { icon: '👨‍👩‍👧‍👦', text: '子ども達との思い出作りを最優先に' },
        { icon: '💼', text: '妻の事業目標（月収80万等）達成に貢献' },
        { icon: '🔥', text: '情熱を持って仕事に打ち込む' },
      ],
      note: '2030年3月までに「仕事を選ぶ自由」を確保することを長期目標に、まずは2026年の目標を着実に実行中。FP3級合格（R8.2月）という最初の一歩を踏み出せた！',
    },
    '2025': {
      achievements: [
        { text: '妻サポートで妻の月収を1万円増やす', done: true },
        { text: '簿記3級を取得（R7.10月達成）', done: true },
        { text: '家族で名古屋旅行', done: true },
        { text: '家族で宮古島旅行', done: true },
        { text: '家族で広島旅行', done: false },
      ],
      note: '目標の多くを達成できた充実の1年。妻サポートで実績を作り、自分のスキルも確実に上がっている実感あり。簿記3級も取得でき、お金の知識が実務に活かせるようになってきた。',
    },
  };

  return (
    <div style={{ maxWidth: 900, margin: '0 auto', padding: '48px 24px 80px' }}>
      <SectionTitle title="振り返り日記" subtitle="目標と実績の記録" theme={t} />

      {/* 長期目標 */}
      <div style={{ background: t.bgAccent, borderRadius: 16, padding: '28px 32px', marginBottom: 48, border: `1px solid ${t.border}` }}>
        <p style={{ fontSize: 12, color: t.accent, fontWeight: 600, letterSpacing: '0.1em', marginBottom: 12 }}>LONG TERM GOAL</p>
        <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 20, color: t.text, fontWeight: 600, marginBottom: 8 }}>小金持ち山に到達して、さらに豊かな人生を過ごす</p>
        <p style={{ fontSize: 14, color: t.textMuted }}>目標：2030年3月までに「仕事を選ぶ自由」を確保する</p>
      </div>

      {/* Year tabs */}
      <div style={{ display: 'flex', gap: 8, marginBottom: 32 }}>
        {['2026', '2025'].map(y => (
          <button key={y} onClick={() => setOpenYear(y)} style={{
            padding: '8px 24px', borderRadius: 8, border: `1px solid ${openYear === y ? t.accent : t.border}`,
            background: openYear === y ? t.accent : 'none', color: openYear === y ? '#fff' : t.textMuted,
            fontSize: 14, cursor: 'pointer', fontFamily: "'Noto Sans JP', sans-serif", fontWeight: openYear === y ? 600 : 400,
            transition: 'all 0.15s',
          }}>{y}年</button>
        ))}
      </div>

      {openYear === '2026' && (
        <div>
          <h3 style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 18, color: t.text, marginBottom: 20 }}>2026年の抱負</h3>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 24 }}>
            {reviews['2026'].goals.map((g, i) => (
              <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'center', background: t.bgSecondary, borderRadius: 10, padding: '16px 20px', border: `1px solid ${t.border}` }}>
                <span style={{ fontSize: 24 }}>{g.icon}</span>
                <span style={{ fontSize: 15, color: t.text }}>{g.text}</span>
              </div>
            ))}
          </div>
          <div style={{ background: t.bg, borderRadius: 10, padding: '18px 20px', border: `1px solid ${t.border}` }}>
            <p style={{ fontSize: 14, color: t.textMuted, lineHeight: 1.9 }}>{reviews['2026'].note}</p>
          </div>
        </div>
      )}

      {openYear === '2025' && (
        <div>
          <h3 style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 18, color: t.text, marginBottom: 20 }}>2025年の振り返り</h3>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 24 }}>
            {reviews['2025'].achievements.map((a, i) => (
              <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'center', background: a.done ? t.bgAccent : t.bgSecondary, borderRadius: 10, padding: '14px 20px', border: `1px solid ${a.done ? t.accentLight : t.border}` }}>
                <span style={{ fontSize: 18, flexShrink: 0 }}>{a.done ? '✅' : '⬜'}</span>
                <span style={{ fontSize: 14, color: t.text, textDecoration: a.done ? 'none' : 'none' }}>{a.text}</span>
                {a.done && <span style={{ marginLeft: 'auto', fontSize: 12, color: t.accent, fontWeight: 500 }}>達成！</span>}
              </div>
            ))}
          </div>
          <div style={{ background: t.bg, borderRadius: 10, padding: '18px 20px', border: `1px solid ${t.border}` }}>
            <p style={{ fontSize: 14, color: t.textMuted, lineHeight: 1.9 }}>{reviews['2025'].note}</p>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { HomePage, ProfilePage, LearnPage, BooksPage, ReviewPage, ARTICLES });