// pages.jsx — page renderings for 転職ブログ

// Sample data --------------------------------------------------
const RANKING = [
  {
    rank: 1, name: 'リクルートエージェント',
    tagline: '業界最大級・非公開求人 50万件',
    score: 4.8, fee: '無料', age: '20〜40代',
    points: ['非公開求人が圧倒的に多い', '実績豊富なアドバイザー', '全業種・全職種に対応'],
    tag: 'PR', editor: '編集部おすすめ',
  },
  {
    rank: 2, name: 'doda エージェントサービス',
    tagline: 'スカウト・エージェントが一体型',
    score: 4.6, fee: '無料', age: '20〜30代',
    points: ['企業からのスカウトが届く', '年収査定ツールが使える', '面接対策が手厚い'],
    tag: 'PR', editor: '満足度No.1',
  },
  {
    rank: 3, name: 'ビズリーチ',
    tagline: 'ハイクラス向けスカウト型',
    score: 4.5, fee: '一部有料', age: '30〜50代',
    points: ['年収600万円以上の求人多数', '管理職・専門職向け', 'ヘッドハンターから直接連絡'],
    tag: 'PR', editor: 'ハイクラス',
  },
  {
    rank: 4, name: 'マイナビエージェント',
    tagline: '20代・第二新卒のサポートに強い',
    score: 4.3, fee: '無料', age: '20代',
    points: ['若手層のサポートが手厚い', '中小・優良企業の求人が豊富', '初めての転職に最適'],
    tag: 'PR', editor: '20代向け',
  },
  {
    rank: 5, name: 'JACリクルートメント',
    tagline: '管理職・専門職・外資系',
    score: 4.2, fee: '無料', age: '30〜40代',
    points: ['外資系・グローバル求人に強い', '一気通貫の担当制', '年収アップ実績多数'],
    tag: 'PR', editor: '外資・専門職',
  },
];

const FEATURED = [
  { cat: '比較', title: '【2026年最新】30代向け転職エージェント徹底比較ランキング', date: '2026.05.10', read: '12分', author: '佐藤 健一' },
  { cat: '年収', title: '30代で年収を100万円上げた人がやっている5つのこと', date: '2026.05.08', read: '8分', author: '田中 美咲' },
  { cat: '面接', title: '面接で必ず聞かれる「転職理由」失敗しない伝え方', date: '2026.05.05', read: '10分', author: '高橋 義昭' },
  { cat: '職務経歴', title: '職務経歴書テンプレート|採用担当が見るポイント', date: '2026.05.03', read: '7分', author: '編集部' },
];

const COLUMNS = [
  { cat: 'キャリア', title: '「市場価値」を測る3つの軸とは', author: '佐藤 健一', read: '6分' },
  { cat: '退職', title: '円満退職のための引き継ぎチェックリスト', author: '田中 美咲', read: '5分' },
  { cat: '副業', title: '本業に活きる副業の選び方', author: '高橋 義昭', read: '8分' },
  { cat: '英語', title: 'グローバル転職に必要な英語レベル', author: '編集部', read: '7分' },
  { cat: '面接', title: '逆質問で差をつける10の質問例', author: '佐藤 健一', read: '6分' },
  { cat: '退職', title: '退職代行サービスの選び方と注意点', author: '田中 美咲', read: '9分' },
];

const CATEGORIES = [
  { name: '転職サイト比較', count: 28 },
  { name: '転職エージェント', count: 42 },
  { name: '年代別ガイド', count: 36 },
  { name: '業界別転職', count: 51 },
  { name: '面接対策', count: 24 },
  { name: '職務経歴書', count: 18 },
  { name: '年収アップ', count: 22 },
  { name: '退職ノウハウ', count: 15 },
];

// ─────────────────────────────────────────────────────────────
// Sub-blocks
// ─────────────────────────────────────────────────────────────
function StarRow({ score }) {
  return (
    <span style={{display:'inline-flex', alignItems:'center', gap: 4, color:'#d49c2e'}}>
      {[0,1,2,3,4].map(i => (
        <span key={i} style={{opacity: i < Math.floor(score) ? 1 : (i < score ? 0.5 : 0.18)}}>{Icon.star}</span>
      ))}
      <span style={{fontFamily:'var(--font-num)',fontWeight:700,color:'var(--ink)',fontSize:13,marginLeft:4}}>{score.toFixed(1)}</span>
    </span>
  );
}

function PRTag() {
  return <span style={{
    display:'inline-block', fontFamily:'var(--font-num)', fontSize: 9, fontWeight: 700,
    letterSpacing:'.12em', padding:'2px 5px', border:'1px solid var(--ink-3)',
    color:'var(--ink-3)', lineHeight: 1,
  }}>PR</span>;
}

// Hero — three variants -----------------------------------------
function Hero({ variant = 'editorial', mobile }) {
  if (variant === 'editorial') {
    return (
      <section style={{
        background:'var(--bg)', padding: mobile ? '36px 20px 40px' : '72px 40px 64px',
        borderBottom:'1px solid var(--rule)',
      }}>
        <div className="lx-fade-up" style={{display:'flex',alignItems:'center',gap:14,marginBottom:22, justifyContent: mobile?'flex-start':'center', animationDelay:'.1s'}}>
          <span className="lx-rule" style={{width:32,height:1,background:'var(--accent)',animationDelay:'.4s'}}/>
          <span style={{
            fontFamily:'var(--font-num)', fontSize:10, fontWeight:600, letterSpacing:'.42em',
            color:'var(--accent)', textTransform:'uppercase',
          }}>Feature · 2026.05.10</span>
          <span className="lx-rule" style={{width:32,height:1,background:'var(--accent)',animationDelay:'.4s'}}/>
        </div>
        <div style={{display:'grid', gridTemplateColumns: mobile?'1fr':'1.1fr .9fr', gap: mobile?28:56, alignItems:'center', maxWidth: 1100, margin:'0 auto'}}>
          <div>
            <h1 className="lx-fade-up" style={{
              margin:0, fontFamily:'var(--font-display)', fontWeight: 600,
              fontSize: mobile?32:54, lineHeight: 1.35, letterSpacing:'.06em', color:'var(--ink)',
              animationDelay:'.2s',
            }}>
              30代の転職を、<br/><em className="lx-gold-text" style={{fontStyle:'normal',fontWeight:700}}>失敗させない</em>。
            </h1>
            <p className="lx-fade-up" style={{
              marginTop: 26, fontSize: mobile?14:15.5, lineHeight: 2.1, color:'var(--ink-2)',
              maxWidth: 540, letterSpacing:'.04em', animationDelay:'.4s',
            }}>
              年収・キャリア・働き方——3つの軸で「次の一手」を選ぶための情報を、現役のキャリアアドバイザー監修のもと、編集部が独自に調査・比較しました。
            </p>
            <div className="lx-fade-up" style={{display:'flex',gap:14, marginTop: 36, flexWrap:'wrap', animationDelay:'.55s'}}>
              <button className="lx-shine-btn" style={{
                background:'var(--accent)',color:'var(--accent-ink)',border:0,
                padding:'15px 30px', fontSize:11, fontWeight:600, cursor:'pointer',
                display:'inline-flex',alignItems:'center',gap:12, letterSpacing:'.28em',
                fontFamily:'var(--font-display)',
              }}>ランキングを見る {Icon.arrow}</button>
              <button style={{
                background:'transparent',color:'var(--ink)',
                border:'1px solid var(--rule-strong)',
                padding:'15px 28px', fontSize:11, fontWeight:500, cursor:'pointer',
                letterSpacing:'.24em', fontFamily:'var(--font-display)',
              }}>診断ツール</button>
            </div>
            <div style={{
              display:'flex',gap: mobile?14:24,marginTop:24,paddingTop:20,
              borderTop:'1px solid var(--rule)', flexWrap:'wrap',
            }}>
              {[
                {n:'15', l:'比較サービス数'},
                {n:'382', l:'掲載記事'},
                {n:'12,800', l:'月間相談件数'},
              ].map((s,i)=>(
                <div key={i} className="lx-count" style={{animationDelay: `${.9+i*.18}s`}}>
                  <div className="lx-stat-num" style={{fontFamily:'var(--font-num)',fontSize:mobile?22:28,fontWeight:700,lineHeight:1,letterSpacing:'.02em'}}>{s.n}</div>
                  <div style={{fontSize:11,color:'var(--ink-3)',marginTop:8,letterSpacing:'.12em'}}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="lx-fade-up" style={{position:'relative', animationDelay:'.3s'}}>
            <div className="lx-reveal">
              <Placeholder label="HERO IMAGE · ビジネスパーソンの後ろ姿" ratio={mobile?'16/10':'4/3'} tone="cool" />
            </div>
            {/* Gold corner ornaments */}
            <span style={{position:'absolute',top:-1,left:-1,width:22,height:22,borderTop:'1px solid var(--accent)',borderLeft:'1px solid var(--accent)'}}/>
            <span style={{position:'absolute',top:-1,right:-1,width:22,height:22,borderTop:'1px solid var(--accent)',borderRight:'1px solid var(--accent)'}}/>
            <span style={{position:'absolute',bottom:-1,left:-1,width:22,height:22,borderBottom:'1px solid var(--accent)',borderLeft:'1px solid var(--accent)'}}/>
            <span style={{position:'absolute',bottom:-1,right:-1,width:22,height:22,borderBottom:'1px solid var(--accent)',borderRight:'1px solid var(--accent)'}}/>
            {/* Floating pulse dot */}
            <span className="lx-pulse-dot" style={{position:'absolute',top:14,right:14}}/>
            <div className="lx-float" style={{
              position:'absolute', left: -12, bottom: -12, background:'var(--bg)',
              border:'1px solid var(--rule-strong)', padding:'12px 16px', maxWidth: 220,
              display: mobile?'none':'block', boxShadow:'0 20px 50px rgba(54,40,20,.10)',
            }}>
              <div style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'.12em',marginBottom:4}}>監修</div>
              <div style={{fontSize:12,fontWeight:700,color:'var(--ink)'}}>キャリアコンサルタント<br/>山田 拓海 (国家資格保有)</div>
            </div>
          </div>
        </div>
      </section>
    );
  }
  if (variant === 'minimal') {
    return (
      <section style={{
        background:'var(--bg)', padding: mobile?'48px 16px':'80px 32px',
        borderBottom:'1px solid var(--rule)', textAlign:'center',
      }}>
        <div style={{fontFamily:'var(--font-num)',fontSize:10,letterSpacing:'.3em',color:'var(--accent)',fontWeight:700,marginBottom:18}}>TENSHOKU JOURNAL · EST.2024</div>
        <h1 style={{
          margin:0, fontFamily:'var(--font-display)', fontWeight: 800,
          fontSize: mobile?32:56, lineHeight: 1.2, color:'var(--ink)', letterSpacing:'.02em',
        }}>30代の、<br/>本気の転職を支える。</h1>
        <p style={{
          marginTop: 22, fontSize: 14, lineHeight: 1.9, color:'var(--ink-2)',
          maxWidth: 540, marginLeft:'auto', marginRight:'auto',
        }}>主要転職サービスを編集部が独自比較。<br/>監修者付きの記事だけを掲載しています。</p>
        <div style={{marginTop:32}}>
          <button style={{
            background:'var(--accent)',color:'var(--accent-ink)',border:0,
            padding:'14px 28px', fontSize:13, fontWeight:700, cursor:'pointer', borderRadius: 2,
          }}>ランキングを見る</button>
        </div>
      </section>
    );
  }
  // 'ticker' variant — like a finance front page
  return (
    <section style={{background:'var(--bg)',borderBottom:'1px solid var(--rule)'}}>
      <div style={{
        background:'var(--accent)', color:'var(--accent-ink)', padding:'10px 0',
        fontSize:11, fontFamily:'var(--font-num)', letterSpacing:'.15em',
        overflow:'hidden', whiteSpace:'nowrap', position:'relative',
      }}>
        <div className="lx-ticker-track">
          {[1,2].map(k=>(
            <React.Fragment key={k}>
              <span style={{fontWeight:800,letterSpacing:'.3em',paddingLeft:36}}>◇ TODAY</span>
              <span>リクルートエージェント 求人数 50万件突破</span>
              <span style={{opacity:.5}}>·</span>
              <span>30代の転職決定率 +12% YoY</span>
              <span style={{opacity:.5}}>·</span>
              <span>IT業界の平均年収 712万円</span>
              <span style={{opacity:.5}}>·</span>
              <span>スカウト送信数 月間+28%</span>
              <span style={{opacity:.5}}>·</span>
              <span>ハイクラス市場 中途採用 過去最高</span>
              <span style={{opacity:.5}}>·</span>
            </React.Fragment>
          ))}
        </div>
      </div>
      <div style={{padding: mobile?'28px 16px':'48px 32px', display:'grid',gridTemplateColumns: mobile?'1fr':'1fr 1fr', gap: mobile?16:48, alignItems:'center'}}>
        <div>
          <div style={{fontFamily:'var(--font-num)',fontSize:10,letterSpacing:'.22em',color:'var(--accent)',fontWeight:700,marginBottom:14}}>2026 SPRING EDITION</div>
          <h1 style={{margin:0,fontFamily:'var(--font-display)',fontWeight:800,fontSize:mobile?28:44,lineHeight:1.22,color:'var(--ink)'}}>
            <span style={{color:'rgb(218, 60, 21)'}}>"次の一手"を、</span><br/>データで決める。
          </h1>
          <p style={{marginTop:16,fontSize:14,lineHeight:1.85,color:'var(--ink-2)',maxWidth:480}}>
            実利用者2,400人のアンケートと編集部独自スコアで、30代キャリア層に本当に合う転職サービスを可視化。
          </p>
        </div>
        <div style={{
          background:'var(--bg-soft)',border:'1px solid var(--rule)', padding: 20,
        }}>
          <div style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'.1em',marginBottom:12}}>編集部スコア TOP3</div>
          {RANKING.slice(0,3).map((r,i)=>(
            <div key={i} style={{
              display:'flex',alignItems:'center',gap:14,padding:'12px 0',
              borderBottom: i<2?'1px solid var(--rule)':'none',
            }}>
              <div style={{fontFamily:'var(--font-num)',fontSize:24,fontWeight:800,color:'var(--accent)',width:32}}>0{r.rank}</div>
              <div style={{flex:1, minWidth:0}}>
                <div style={{fontSize:13,fontWeight:700,color:'var(--ink)',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{r.name}</div>
                <div style={{fontSize:11,color:'var(--ink-3)',marginTop:2}}>{r.tagline}</div>
              </div>
              <StarRow score={r.score} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Ranking card --------------------------------------------------
function RankingCard({ item, cardStyle = 'bordered', dark, compact }) {
  const isFlat = cardStyle === 'flat';
  const isElevated = cardStyle === 'elevated';
  return (
    <article className="lx-card" style={{
      background: 'var(--bg)',
      border: isFlat ? 'none' : '1px solid var(--rule-strong)',
      borderTop: isFlat ? '1px solid var(--rule)' : undefined,
      boxShadow: isElevated ? '0 1px 0 rgba(0,0,0,.04), 0 20px 60px rgba(54,40,20,.10)' : 'none',
      padding: compact ? '20px 24px' : '32px 36px',
      position:'relative', overflow:'hidden',
    }}>
      {item.rank <= 3 && !isFlat && (
        <div style={{position:'absolute', top: 0, left: 0, right: 0, height: 2, background:'var(--accent)'}}/>
      )}
      <div style={{display:'flex',gap: compact?14:20, alignItems:'flex-start'}}>
        {/* Rank badge */}
        <div style={{
          flex:'0 0 auto', width: compact?52:62,
          textAlign:'center',
        }}>
          <div style={{
            fontFamily:'var(--font-num)', fontSize:10, fontWeight:700, letterSpacing:'.2em',
            color:'var(--accent)',
          }}>RANK</div>
          <div style={{
            fontFamily:'var(--font-display)', fontWeight: 500, fontSize: compact?48:68,
            lineHeight: 1, color:'var(--accent)', marginTop: 6, fontStyle:'italic',
          }}>{item.rank}</div>
          <div style={{
            fontFamily:'var(--font-num)', fontSize:9, color:'var(--ink-3)', marginTop:4,
            letterSpacing:'.1em',
          }}>{item.editor}</div>
        </div>

        <div style={{flex:1, minWidth:0}}>
          <div style={{display:'flex',gap:8,alignItems:'center',marginBottom:6}}>
            <PRTag />
            <span style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'.05em'}}>{item.age}向け</span>
          </div>
          <h3 style={{
            margin:'0 0 8px',fontFamily:'var(--font-display)',fontWeight:600,fontSize: compact?19:24,
            color:'var(--ink)', letterSpacing:'.05em',
          }}>{item.name}</h3>
          <div style={{fontSize:12.5,color:'var(--ink-2)',marginBottom:20,letterSpacing:'.04em',lineHeight:1.8}}>{item.tagline}</div>

          {/* meta */}
          <div style={{
            display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 1,
            background:'var(--rule)', border:'1px solid var(--rule)', marginBottom: 14,
          }}>
            {[
              {l:'編集部スコア', v: <StarRow score={item.score}/>},
              {l:'利用料', v: <span style={{fontWeight:700,color:'var(--ink)',fontSize:13}}>{item.fee}</span>},
              {l:'対応年代', v: <span style={{fontWeight:700,color:'var(--ink)',fontSize:13}}>{item.age}</span>},
            ].map((m,i)=>(
              <div key={i} style={{background:'var(--bg)',padding:'8px 10px'}}>
                <div style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'.1em',marginBottom:4}}>{m.l}</div>
                <div>{m.v}</div>
              </div>
            ))}
          </div>

          {/* points */}
          {!compact && (
            <ul style={{margin:'0 0 16',padding:0,listStyle:'none',display:'flex',flexDirection:'column',gap:6}}>
              {item.points.map((p,i)=>(
                <li key={i} style={{display:'flex',gap:8,alignItems:'flex-start',fontSize:12.5,color:'var(--ink-2)',lineHeight:1.6}}>
                  <span style={{color:'var(--accent)',flex:'0 0 auto',marginTop:2}}>{Icon.check}</span>
                  <span>{p}</span>
                </li>
              ))}
            </ul>
          )}

          {/* CTAs */}
          <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
            <button style={{
              background:'var(--accent)',color:'var(--accent-ink)',border:0,
              padding:'14px 24px', fontSize:11, fontWeight:600, cursor:'pointer',
              display:'inline-flex',alignItems:'center',gap:10, letterSpacing:'.26em',
              fontFamily:'var(--font-display)',
            }}>公式サイト {Icon.ext}</button>
            <button style={{
              background:'transparent',color:'var(--ink-2)',border:'1px solid var(--rule-strong)',
              padding:'14px 22px', fontSize:11, fontWeight:500, cursor:'pointer',
              letterSpacing:'.22em', fontFamily:'var(--font-display)',
            }}>詳細レビュー</button>
          </div>
        </div>
      </div>
    </article>
  );
}

// Article card -------------------------------------------------
function ArticleCard({ item, size = 'm', cardStyle = 'bordered', dark }) {
  const isFlat = cardStyle === 'flat';
  const isElevated = cardStyle === 'elevated';
  if (size === 'l') {
    return (
      <article className="lx-card" style={{
        background:'var(--bg)',
        border: isFlat?'none':'1px solid var(--rule)',
        boxShadow: isElevated?'0 8px 24px rgba(0,0,0,.06)':'none',
      }}>
        <div className="lx-reveal">
          <Placeholder label={`ARTICLE COVER · ${item.cat}`} ratio="16/9" tone="warm" dark={dark} />
        </div>
        <div style={{padding: 18}}>
          <div style={{display:'flex',gap:10,alignItems:'center',marginBottom:8}}>
            <span style={{
              background:'var(--accent)',color:'var(--accent-ink)',fontSize:10,fontWeight:700,
              letterSpacing:'.1em',padding:'3px 7px',
            }}>{item.cat}</span>
            <span style={{fontFamily:'var(--font-num)',fontSize:10,color:'var(--ink-3)'}}>{item.date}</span>
          </div>
          <h3 style={{margin:0,fontFamily:'var(--font-display)',fontWeight:700,fontSize:18,color:'var(--ink)',lineHeight:1.45}}>{item.title}</h3>
          <div style={{display:'flex',gap:12,marginTop:14,fontSize:11,color:'var(--ink-3)',alignItems:'center'}}>
            <span style={{display:'inline-flex',alignItems:'center',gap:5}}>{Icon.user} {item.author}</span>
            <span style={{display:'inline-flex',alignItems:'center',gap:5}}>{Icon.clock} {item.read}</span>
          </div>
        </div>
      </article>
    );
  }
  // medium horizontal card
  return (
    <article className="lx-card" style={{
      display:'flex',gap:14,padding: isFlat?'14px 0':14,
      background:'var(--bg)',
      borderBottom: isFlat?'1px solid var(--rule)':'none',
      border: isFlat?'none':'1px solid var(--rule)',
      boxShadow: isElevated?'0 4px 16px rgba(0,0,0,.04)':'none',
    }}>
      <div style={{flex:'0 0 auto',width:120}}>
        <Placeholder label={item.cat} ratio="1/1" tone="warm" dark={dark} />
      </div>
      <div style={{flex:1,minWidth:0,display:'flex',flexDirection:'column'}}>
        <div style={{display:'flex',gap:8,alignItems:'center',marginBottom:6}}>
          <span style={{fontSize:10,fontWeight:700,color:'var(--accent)',letterSpacing:'.1em'}}>#{item.cat}</span>
          <span style={{fontFamily:'var(--font-num)',fontSize:10,color:'var(--ink-3)'}}>{item.date || ''}</span>
        </div>
        <h3 style={{margin:0,fontFamily:'var(--font-display)',fontWeight:700,fontSize:14.5,color:'var(--ink)',lineHeight:1.5}}>{item.title}</h3>
        <div style={{marginTop:'auto',paddingTop:10,display:'flex',gap:12,fontSize:11,color:'var(--ink-3)',alignItems:'center'}}>
          <span style={{display:'inline-flex',alignItems:'center',gap:5}}>{Icon.user} {item.author}</span>
          <span style={{display:'inline-flex',alignItems:'center',gap:5}}>{Icon.clock} {item.read}</span>
        </div>
      </div>
    </article>
  );
}

// Sidebar widget -----------------------------------------------
function Sidebar({ dark }) {
  return (
    <aside style={{display:'flex',flexDirection:'column',gap:28}}>
      {/* Editor pick */}
      <div style={{background:'var(--bg-soft)',padding:18,border:'1px solid var(--rule)'}}>
        <div style={{fontFamily:'var(--font-num)',fontSize:10,letterSpacing:'.22em',color:'var(--accent)',fontWeight:700,marginBottom:12}}>EDITOR'S PICK</div>
        <h4 style={{margin:'0 0 12',fontFamily:'var(--font-display)',fontSize:15,color:'var(--ink)',lineHeight:1.5}}>30代で本当に使うべき<br/>転職エージェント3選</h4>
        <Placeholder label="EDITOR PICK" ratio="16/9" tone="cool" dark={dark}/>
        <p style={{marginTop:12,fontSize:12,color:'var(--ink-2)',lineHeight:1.7}}>編集長 佐藤が、自身の転職経験をもとに厳選。</p>
      </div>
      {/* Popular */}
      <div>
        <div style={{
          borderBottom:'2px solid var(--ink)',paddingBottom:8,marginBottom:14,
          display:'flex',justifyContent:'space-between',alignItems:'baseline',
        }}>
          <h4 style={{margin:0,fontFamily:'var(--font-display)',fontWeight:800,fontSize:14,color:'var(--ink)'}}>人気記事</h4>
          <span style={{fontFamily:'var(--font-num)',fontSize:9,color:'var(--ink-3)',letterSpacing:'.15em'}}>WEEKLY</span>
        </div>
        {FEATURED.slice(0,4).map((a,i)=>(
          <div key={i} style={{display:'flex',gap:10,padding:'10px 0',borderBottom: i<3?'1px solid var(--rule)':'none'}}>
            <div style={{fontFamily:'var(--font-display)',fontWeight:900,fontSize:22,color:'var(--accent)',lineHeight:1,width:24}}>{i+1}</div>
            <div style={{flex:1,minWidth:0}}>
              <div style={{fontSize:12.5,color:'var(--ink)',fontWeight:600,lineHeight:1.5}}>{a.title}</div>
              <div style={{fontSize:10,color:'var(--ink-3)',marginTop:4,fontFamily:'var(--font-num)'}}>{a.date}</div>
            </div>
          </div>
        ))}
      </div>
      {/* Newsletter */}
      <div style={{background:'var(--accent)',color:'var(--accent-ink)',padding:20}}>
        <div style={{fontFamily:'var(--font-num)',fontSize:10,letterSpacing:'.2em',opacity:.7,marginBottom:8}}>NEWSLETTER</div>
        <h4 style={{margin:'0 0 10',fontFamily:'var(--font-display)',fontSize:16}}>週1回、30代の転職情報を。</h4>
        <p style={{margin:'0 0 14',fontSize:11.5,lineHeight:1.7,opacity:.85}}>編集部が厳選した記事を毎週金曜にお届け。登録無料。</p>
        <input placeholder="メールアドレス" style={{
          width:'100%',background:'rgba(255,255,255,.1)',border:'1px solid rgba(255,255,255,.25)',
          color:'inherit',padding:'9px 12px',fontSize:12,outline:'none',marginBottom:8,
        }}/>
        <button style={{
          width:'100%',background:'var(--accent-ink)',color:'var(--accent)',border:0,
          padding:'10px',fontSize:12,fontWeight:700,letterSpacing:'.05em',cursor:'pointer',
        }}>登録する</button>
      </div>
    </aside>
  );
}

// Footer -------------------------------------------------------
function SiteFooter({ mobile }) {
  return (
    <footer style={{background:'var(--bg-deep)',borderTop:'2px solid var(--ink)',padding: mobile?'28px 16px':'40px 32px',marginTop: 32}}>
      <div style={{display:'grid',gridTemplateColumns: mobile?'1fr':'1.4fr 1fr 1fr 1fr', gap: mobile?20:36, paddingBottom:28,borderBottom:'1px solid var(--rule)'}}>
        <div>
          <div style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:20,color:'var(--ink)'}}>転職ブログ</div>
          <div style={{fontFamily:'var(--font-num)',fontSize:9,letterSpacing:'.2em',color:'var(--ink-3)',marginTop:4}}>TENSHOKU JOURNAL</div>
          <p style={{fontSize:11.5,color:'var(--ink-2)',marginTop:14,lineHeight:1.7,maxWidth:300}}>30代キャリア層の「次の一手」を支える、独立系の転職情報メディア。国家資格保有のキャリアコンサルタント監修。</p>
        </div>
        {[
          {h:'カテゴリ', l:['転職サイト比較','転職エージェント','面接対策','職務経歴書','年収アップ']},
          {h:'年代別', l:['20代の転職','30代の転職','40代の転職','女性の転職','第二新卒']},
          {h:'運営', l:['編集ポリシー','監修体制','広告掲載について','プライバシー','お問い合わせ']},
        ].map((c,i)=>(
          <div key={i}>
            <div style={{fontSize:11,fontWeight:700,letterSpacing:'.12em',color:'var(--ink)',marginBottom:12}}>{c.h}</div>
            <ul style={{margin:0,padding:0,listStyle:'none',display:'flex',flexDirection:'column',gap:8}}>
              {c.l.map((x,j)=><li key={j} style={{fontSize:12,color:'var(--ink-2)'}}>{x}</li>)}
            </ul>
          </div>
        ))}
      </div>
      <div style={{display:'flex',justifyContent:'space-between',paddingTop:16,fontSize:10,color:'var(--ink-3)',fontFamily:'var(--font-num)',letterSpacing:'.05em',flexWrap:'wrap',gap:10}}>
        <span>© 2026 転職ブログ All rights reserved.</span>
        <span>当サイトは一部にアフィリエイト広告（PR）を含みます</span>
      </div>
    </footer>
  );
}

// ─────────────────────────────────────────────────────────────
// PAGE: Top
// ─────────────────────────────────────────────────────────────
function TopPage({ t, mobile }) {
  const layout = t.layout || 'two-col';
  const isOne = layout === 'one-col' || mobile;
  return (
    <div style={{background:'var(--bg-deep)', color:'var(--ink)', fontFamily:'var(--font-body)'}}>
      <SiteHeader mobile={mobile} />
      <Hero variant={t.hero || 'editorial'} mobile={mobile} />

      <div style={{padding: mobile?'0 16px':'0 32px', maxWidth: 1280, margin:'0 auto'}}>
        {/* Ranking section */}
        <section style={{padding: mobile?'32px 0 8px':'48px 0 16px'}}>
          <SectionHead kicker="RANKING" title="30代におすすめ転職サイト・エージェント TOP5" action="全比較を見る" />
          <p style={{fontSize:12,color:'var(--ink-3)',marginTop:-6,marginBottom:18}}>編集部独自スコア / 2026年5月更新 · 実利用者2,400人のアンケートを反映</p>
          <div style={{display:'flex',flexDirection:'column',gap: 12}}>
            {RANKING.map((r,i)=><RankingCard key={i} item={r} cardStyle={t.cardStyle} compact={false}/>)}
          </div>
        </section>

        {/* Featured + Sidebar */}
        <section style={{padding: mobile?'24px 0':'40px 0', display:'grid', gridTemplateColumns: isOne?'1fr':'1fr 320px', gap: mobile?28:40}}>
          <div>
            <SectionHead kicker="FEATURED" title="編集部おすすめ記事" action="すべての記事" />
            <div style={{display:'grid',gridTemplateColumns: mobile?'1fr':'1fr 1fr',gap:16,marginBottom:24}}>
              {FEATURED.slice(0,2).map((a,i)=><ArticleCard key={i} item={a} size="l" cardStyle={t.cardStyle}/>)}
            </div>
            <div style={{display:'flex',flexDirection:'column',gap:0}}>
              {FEATURED.slice(2).map((a,i)=><ArticleCard key={i} item={a} size="m" cardStyle="flat"/>)}
            </div>

            <div style={{height:32}}/>
            <SectionHead kicker="COLUMN" title="キャリア・コラム" />
            <div style={{display:'grid',gridTemplateColumns: mobile?'1fr':'1fr 1fr', gap: 0, borderTop:'1px solid var(--rule)'}}>
              {COLUMNS.map((c,i)=>(
                <div key={i} style={{
                  padding:'14px 0', borderBottom:'1px solid var(--rule)',
                  paddingRight: !mobile && i%2===0 ? 16 : 0,
                  paddingLeft: !mobile && i%2===1 ? 16 : 0,
                }}>
                  <div style={{display:'flex',gap:10,alignItems:'center',marginBottom:6}}>
                    <span style={{fontSize:10,fontWeight:700,letterSpacing:'.1em',color:'var(--accent)'}}>#{c.cat}</span>
                    <span style={{fontSize:10,color:'var(--ink-3)',fontFamily:'var(--font-num)'}}>{c.read}</span>
                  </div>
                  <div style={{fontSize:13.5,fontWeight:600,color:'var(--ink)',lineHeight:1.5}}>{c.title}</div>
                  <div style={{fontSize:11,color:'var(--ink-3)',marginTop:6}}>{c.author}</div>
                </div>
              ))}
            </div>
          </div>
          {!isOne && <Sidebar/>}
        </section>

        {/* Categories grid */}
        <section style={{padding: mobile?'16px 0 32px':'24px 0 48px'}}>
          <SectionHead kicker="CATEGORIES" title="カテゴリから探す" />
          <div style={{display:'grid',gridTemplateColumns: mobile?'repeat(2,1fr)':'repeat(4,1fr)',gap:1,background:'var(--rule)',border:'1px solid var(--rule)'}}>
            {CATEGORIES.map((c,i)=>(
              <div key={i} style={{background:'var(--bg)',padding:'18px 16px',cursor:'pointer'}}>
                <div style={{fontFamily:'var(--font-num)',fontSize:10,color:'var(--ink-3)',letterSpacing:'.1em'}}>{String(i+1).padStart(2,'0')}</div>
                <div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:15,color:'var(--ink)',marginTop:6}}>{c.name}</div>
                <div style={{fontSize:11,color:'var(--ink-3)',marginTop:4,fontFamily:'var(--font-num)'}}>{c.count} articles</div>
              </div>
            ))}
          </div>
        </section>
      </div>

      <SiteFooter mobile={mobile} />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// PAGE: Ranking detail
// ─────────────────────────────────────────────────────────────
function RankingPage({ t, mobile }) {
  return (
    <div style={{background:'var(--bg-deep)',color:'var(--ink)',fontFamily:'var(--font-body)'}}>
      <SiteHeader mobile={mobile} />
      <div style={{padding: mobile?'0 16px':'0 32px',maxWidth:1280,margin:'0 auto'}}>
        <Breadcrumb items={['ホーム','ランキング','30代向け転職エージェント']} />
        <header style={{padding:'16px 0 28px',borderBottom:'1px solid var(--rule)',marginBottom:32}}>
          <div style={{fontFamily:'var(--font-num)',fontSize:10,letterSpacing:'.22em',color:'var(--accent)',fontWeight:700,marginBottom:10}}>RANKING · 2026 SPRING</div>
          <h1 style={{margin:0,fontFamily:'var(--font-display)',fontWeight:800,fontSize:mobile?26:38,color:'var(--ink)',lineHeight:1.3}}>
            【2026年最新】<br/>30代向け転職エージェント比較ランキング
          </h1>
          <div style={{display:'flex',gap:mobile?12:20,marginTop:18,fontSize:12,color:'var(--ink-3)',flexWrap:'wrap'}}>
            <span style={{display:'inline-flex',alignItems:'center',gap:6}}><Avatar initials="SK" size={22}/> 佐藤 健一 · 編集長</span>
            <span style={{display:'inline-flex',alignItems:'center',gap:5}}>{Icon.shield} 山田 拓海 監修</span>
            <span style={{display:'inline-flex',alignItems:'center',gap:5}}>{Icon.clock} 12分</span>
            <span style={{fontFamily:'var(--font-num)'}}>2026.05.10 更新</span>
          </div>
        </header>

        {/* Comparison table */}
        <section style={{marginBottom: 36}}>
          <SectionHead kicker="OVERVIEW" title="一目でわかる比較表" />
          <div style={{overflowX:'auto',border:'1px solid var(--rule)'}}>
            <table style={{width:'100%',borderCollapse:'collapse',fontSize:12,minWidth:600}}>
              <thead>
                <tr style={{background:'var(--bg-soft)'}}>
                  {['順位','サービス名','スコア','利用料','対応年代','求人数'].map(h=>(
                    <th key={h} style={{padding:'10px 12px',textAlign:'left',fontWeight:700,fontSize:11,color:'var(--ink)',letterSpacing:'.05em',borderBottom:'1px solid var(--rule-strong)'}}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {RANKING.map((r,i)=>(
                  <tr key={i} style={{borderBottom:'1px solid var(--rule)',background:'var(--bg)'}}>
                    <td style={{padding:'14px 12px',fontFamily:'var(--font-num)',fontSize:18,fontWeight:800,color:'var(--accent)'}}>{r.rank}</td>
                    <td style={{padding:'14px 12px',fontWeight:700,color:'var(--ink)'}}>{r.name}</td>
                    <td style={{padding:'14px 12px'}}><StarRow score={r.score}/></td>
                    <td style={{padding:'14px 12px',color:'var(--ink-2)'}}>{r.fee}</td>
                    <td style={{padding:'14px 12px',color:'var(--ink-2)'}}>{r.age}</td>
                    <td style={{padding:'14px 12px',fontFamily:'var(--font-num)',color:'var(--ink-2)'}}>{[500000,260000,150000,80000,45000][i].toLocaleString()}+</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </section>

        <section style={{display:'grid',gridTemplateColumns: mobile?'1fr':'1fr 300px', gap: 40, paddingBottom: 40}}>
          <div style={{display:'flex',flexDirection:'column',gap:16}}>
            <SectionHead kicker="DETAILS" title="ランキング詳細レビュー" />
            {RANKING.map((r,i)=><RankingCard key={i} item={r} cardStyle={t.cardStyle}/>)}
          </div>
          {!mobile && <Sidebar/>}
        </section>
      </div>
      <SiteFooter mobile={mobile}/>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// PAGE: Article
// ─────────────────────────────────────────────────────────────
function ArticlePage({ t, mobile }) {
  return (
    <div style={{background:'var(--bg-deep)',color:'var(--ink)',fontFamily:'var(--font-body)'}}>
      <SiteHeader mobile={mobile}/>
      <div style={{padding: mobile?'0 16px':'0 32px',maxWidth:1080,margin:'0 auto'}}>
        <Breadcrumb items={['ホーム','年収','記事']} />
        <article style={{background:'var(--bg)',padding: mobile?'24px 18px':'56px 64px',border:'1px solid var(--rule)',marginBottom:40}}>
          <div style={{textAlign:'center',marginBottom:24}}>
            <span style={{
              display:'inline-block',background:'var(--accent)',color:'var(--accent-ink)',
              fontSize:10,fontWeight:700,letterSpacing:'.15em',padding:'4px 10px',
            }}>YEARLY INCOME</span>
          </div>
          <h1 style={{
            margin:'0 auto',maxWidth:720,textAlign:'center',
            fontFamily:'var(--font-display)',fontWeight:800,fontSize:mobile?24:36,
            color:'var(--ink)',lineHeight:1.4,
          }}>30代で年収を100万円上げた人がやっている<br/>5つのこと</h1>
          <div style={{
            display:'flex',justifyContent:'center',gap:18,marginTop:24,fontSize:11.5,
            color:'var(--ink-3)',flexWrap:'wrap',
          }}>
            <span style={{display:'inline-flex',alignItems:'center',gap:6}}><Avatar initials="TM" size={22}/> 田中 美咲</span>
            <span style={{display:'inline-flex',alignItems:'center',gap:5}}>{Icon.shield} 山田 拓海 監修</span>
            <span style={{fontFamily:'var(--font-num)'}}>2026.05.08 · 8分</span>
          </div>

          <div style={{margin:'36px -16px 32px'}}>
            <Placeholder label="ARTICLE COVER · ノートとペン" ratio="16/8" tone="cool"/>
          </div>

          {/* TOC */}
          <div style={{
            background:'var(--bg-soft)',border:'1px solid var(--rule)',padding:18,marginBottom:32,
          }}>
            <div style={{fontFamily:'var(--font-num)',fontSize:10,letterSpacing:'.2em',color:'var(--accent)',fontWeight:700,marginBottom:10}}>TABLE OF CONTENTS</div>
            <ol style={{margin:0,paddingLeft:18,fontSize:13,color:'var(--ink-2)',lineHeight:2}}>
              <li>30代の平均年収と現実</li>
              <li>年収アップに必要な3つの軸</li>
              <li>5つの実践ステップ</li>
              <li>転職 vs 社内昇給 どちらが有利か</li>
              <li>まとめ: 最初の一歩</li>
            </ol>
          </div>

          {/* Body */}
          <div style={{fontSize:15,lineHeight:2,color:'var(--ink)',maxWidth:680,margin:'0 auto'}}>
            <h2 style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:22,borderLeft:'4px solid var(--accent)',paddingLeft:14,margin:'32px 0 18px'}}>30代の平均年収と現実</h2>
            <p>30代の平均年収は、男性で約487万円、女性で約382万円と言われています。しかし「平均」という数字は実態を正確には表しません。業界・職種・企業規模によって、その差は大きく開きます。</p>
            <p>本記事では、編集部が独自に調査した <strong style={{background:'linear-gradient(transparent 60%, rgba(212,156,46,.35) 60%)'}}>「30代で年収を100万円以上引き上げた124人」</strong> の共通点をもとに、再現性のある5つの行動を解説します。</p>

            <blockquote style={{
              margin:'28px 0',padding:'18px 20px',background:'var(--bg-soft)',
              borderLeft:'3px solid var(--accent)',fontSize:14,fontStyle:'normal',color:'var(--ink-2)',
            }}>「年収は『努力』では上がりません。上がるのは『市場との接続』を変えた時です。」<br/><span style={{display:'block',marginTop:8,fontSize:11,color:'var(--ink-3)'}}>— 山田 拓海 (キャリアコンサルタント)</span></blockquote>

            <h2 style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:22,borderLeft:'4px solid var(--accent)',paddingLeft:14,margin:'32px 0 18px'}}>年収アップに必要な3つの軸</h2>
            <p>市場価値を構成する要素は、(1) スキルの希少性、(2) 業界の成長性、(3) ポジションの裁量、の3軸に分解できます。それぞれをどう伸ばすか、順に見ていきましょう。</p>
          </div>

          {/* Inline ranking promo */}
          <div style={{
            background:'var(--bg-soft)',border:'1px solid var(--rule)',padding: mobile?20:28,marginTop:36,
          }}>
            <div style={{fontFamily:'var(--font-num)',fontSize:10,letterSpacing:'.2em',color:'var(--accent)',fontWeight:700,marginBottom:8}}>RELATED RANKING</div>
            <h3 style={{margin:'0 0 16',fontFamily:'var(--font-display)',fontWeight:800,fontSize:18,color:'var(--ink)'}}>年収アップを狙うなら、まずこの3社</h3>
            <div style={{display:'flex',flexDirection:'column',gap:10}}>
              {RANKING.slice(0,3).map((r,i)=><RankingCard key={i} item={r} cardStyle="elevated" compact/>)}
            </div>
          </div>
        </article>
      </div>
      <SiteFooter mobile={mobile}/>
    </div>
  );
}

Object.assign(window, { TopPage, RankingPage, ArticlePage });