// Blog / Music Column archive
function Column() {
  const musicConfig = window.ALLIN_MUSIC_CONFIG || {};
  const archive = musicConfig.archive || {};
  const fallbackPosts = [
    {
      tag:'発声',
      title:'カラオケで "伸びる高音" の正体は、息の使い方だった。',
      excerpt:'高い音を出そうとすると、どうしても力んでしまう。でも、プロの歌い手はむしろ「抜いて」高音を出しています。その仕組みを、解剖学から解説。',
      photo:'https://images.unsplash.com/photo-1459749411175-04bf5292ceea?w=1400&q=80',
      date:'2026.04.18',
      read:'6 min',
      url:'#',
    },
    { tag:'機材', title:'大人が選ぶべき、最初のマイクの選び方。', date:'2026.04.12', read:'4 min', url:'#',
      photo:'https://images.unsplash.com/photo-1520166012956-add9ba0835cb?w=800&q=80' },
    { tag:'コラム', title:'なぜ、40代から歌を始める人が増えているのか。', date:'2026.04.05', read:'8 min', url:'#',
      photo:'https://images.unsplash.com/photo-1514525253161-7a46d19cd819?w=800&q=80' },
    { tag:'練習', title:'「自宅で声が出せない」大人のための、呼吸練習10分。', date:'2026.03.28', read:'5 min', url:'#',
      photo:'https://images.unsplash.com/photo-1478737270239-2f02b77fc618?w=800&q=80' },
    { tag:'発表会', title:'初ライブ当日、プロがやっている3つの準備。', date:'2026.03.22', read:'7 min', url:'#',
      photo:'https://images.unsplash.com/photo-1501612780327-45045538702b?w=800&q=80' },
  ];

  const sourcePosts = Array.isArray(archive.posts) && archive.posts.length ? archive.posts : fallbackPosts;
  const featured = sourcePosts[0];
  const posts = sourcePosts.slice(1);
  const total = archive.total || sourcePosts.length;
  const currentPage = archive.currentPage || 1;
  const totalPages = archive.totalPages || 1;
  const archiveUrl = archive.archiveUrl || ((musicConfig.routes || {})['column.html']) || '#';

  const photoFor = (post, size = 800) => post.photo || `https://images.unsplash.com/photo-1511379938547-c1f69419868d?w=${size}&q=80`;

  return (
    <main>
      <section id="column" className="section" style={{ paddingTop:150 }}>
        <div className="section-inner">
          <div style={{ display:'flex', alignItems:'flex-end', gap:40, marginBottom:48, flexWrap:'wrap' }}>
            <div style={{ flex:'1 1 460px' }}>
              <span className="eyebrow"><span className="dot" /> <span className="hash">#09</span> 音楽コラム</span>
              <h1 className="h2" style={{ marginBottom:0 }}>
                歌と音楽の、<br/>
                もう少し<em className="accent">深く</em>。
              </h1>
            </div>
            <a href={archiveUrl} style={{
              color:'var(--accent-2)', fontSize:13, fontWeight:700,
              borderBottom:'1px solid var(--accent-2)', paddingBottom:4,
            }}>すべての記事を読む（{total}件）→</a>
          </div>

          {featured ? (
            <div style={{ display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:24 }} className="column-archive-layout">
              <ArticleFeature post={featured} photo={photoFor(featured, 1400)} />

              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:16 }} className="column-archive-grid">
                {posts.slice(0, 4).map((post) => (
                  <ArticleCard key={post.url + post.title} post={post} photo={photoFor(post)} />
                ))}
              </div>
            </div>
          ) : (
            <div style={{
              padding:'72px 32px', border:'1px solid var(--rule)', background:'var(--bg-1)',
              color:'var(--ink-2)', textAlign:'center',
            }}>
              まだ記事が公開されていません。
            </div>
          )}

          {posts.length > 4 && (
            <div style={{
              display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:18,
              marginTop:24,
            }} className="column-more-grid">
              {posts.slice(4).map((post) => (
                <ArticleCard key={post.url + post.title} post={post} photo={photoFor(post)} large />
              ))}
            </div>
          )}

          {totalPages > 1 && (
            <nav style={{
              display:'flex', alignItems:'center', justifyContent:'center', gap:16,
              marginTop:48,
            }} aria-label="記事一覧ページ">
              {archive.prevUrl ? (
                <a href={archive.prevUrl} className="btn btn-ghost" style={{ padding:'13px 18px', fontSize:13 }}>← 前へ</a>
              ) : (
                <span className="btn btn-ghost" style={{ padding:'13px 18px', fontSize:13, opacity:0.35 }}>← 前へ</span>
              )}
              <span className="mono" style={{ color:'var(--ink-3)', fontSize:12, letterSpacing:1.5 }}>
                PAGE {currentPage} / {totalPages}
              </span>
              {archive.nextUrl ? (
                <a href={archive.nextUrl} className="btn btn-primary" style={{ padding:'13px 18px', fontSize:13 }}>次へ →</a>
              ) : (
                <span className="btn btn-primary" style={{ padding:'13px 18px', fontSize:13, opacity:0.35 }}>次へ →</span>
              )}
            </nav>
          )}
        </div>
      </section>
    </main>
  );
}

function ArticleFeature({ post, photo }) {
  return (
    <a href={post.url} style={{
      position:'relative', display:'block',
      border:'1px solid var(--rule)', overflow:'hidden',
      minHeight:440,
      backgroundImage:`url(${photo})`, backgroundSize:'cover', backgroundPosition:'center',
    }}>
      <div style={{
        position:'absolute', inset:0,
        background:'linear-gradient(180deg, transparent 30%, rgba(5,8,17,0.95)), linear-gradient(45deg, oklch(70% 0.25 250 / 0.25), transparent 60%)',
        mixBlendMode:'multiply',
      }} />
      <div style={{
        position:'absolute', top:20, left:20,
        padding:'5px 10px',
        background:'var(--accent)', color:'var(--bg-0)',
        fontFamily:'var(--ff-display)', fontSize:11, letterSpacing:2,
        boxShadow:'var(--accent-glow)',
      }}>FEATURED · {post.tag}</div>
      <div style={{
        position:'absolute', bottom:0, left:0, right:0, padding:'28px 32px',
      }}>
        <div className="mono" style={{ fontSize:11, color:'var(--ink-3)', letterSpacing:1.5 }}>
          {post.date} · {post.read}
        </div>
        <h2 style={{
          margin:'10px 0 14px', fontSize:32, fontWeight:900, lineHeight:1.25, letterSpacing:-0.5, color:'#fff',
          textShadow:'0 2px 20px rgba(0,0,0,0.5)',
        }}>{post.title}</h2>
        {post.excerpt && (
          <p style={{
            margin:0, fontSize:14, lineHeight:1.8, color:'rgba(232,237,247,0.85)', maxWidth:520,
          }}>{post.excerpt}</p>
        )}
        <div style={{ marginTop:18, color:'var(--accent-2)', fontSize:14, fontWeight:700 }}>
          続きを読む →
        </div>
      </div>
    </a>
  );
}

function ArticleCard({ post, photo, large }) {
  return (
    <a href={post.url} style={{
      display:'flex', flexDirection:'column',
      background:'var(--bg-1)', border:'1px solid var(--rule)',
      overflow:'hidden', transition:'border-color .15s',
      minHeight: large ? 300 : 'auto',
    }}
      onMouseEnter={e => e.currentTarget.style.borderColor='var(--accent)'}
      onMouseLeave={e => e.currentTarget.style.borderColor='var(--rule)'}
    >
      <div style={{
        height: large ? 160 : 120, position:'relative',
        backgroundImage:`url(${photo})`, backgroundSize:'cover', backgroundPosition:'center',
      }}>
        <div style={{
          position:'absolute', inset:0,
          background:'linear-gradient(45deg, oklch(70% 0.25 250 / 0.3), transparent 80%)',
          mixBlendMode:'multiply',
        }} />
        <span className="mono" style={{
          position:'absolute', top:10, left:10,
          padding:'3px 8px', fontSize:10, letterSpacing:1.5,
          background:'rgba(5,8,17,0.8)', color:'var(--accent-2)',
          border:'1px solid var(--rule-strong)',
        }}>{post.tag}</span>
      </div>
      <div style={{ padding:'14px 16px 16px', flex:1, display:'flex', flexDirection:'column', gap:8 }}>
        <h2 style={{ margin:0, fontSize:large ? 17 : 14, fontWeight:700, lineHeight:1.45, letterSpacing:0 }}>{post.title}</h2>
        {large && post.excerpt && (
          <p style={{ margin:'2px 0 0', fontSize:13, lineHeight:1.7, color:'var(--ink-2)' }}>{post.excerpt}</p>
        )}
        <div className="mono" style={{ fontSize:10, color:'var(--ink-3)', letterSpacing:1, marginTop:'auto' }}>
          {post.date} · {post.read}
        </div>
      </div>
    </a>
  );
}

window.Column = Column;