// pages/Article.jsx
const ArticlePage = ({ id, setRoute, openLineModal }) => {
  const article = ARTICLES.find(a => a.id === id) || ARTICLES[0];
  const cat = CATEGORIES.find(c => c.id === article.cat);
  const related = ARTICLES.filter(a => a.cat === article.cat && a.id !== article.id).slice(0, 3);

  return (
    <div className="page-enter">
      {/* Breadcrumb + Eyecatch */}
      <section className="container" style={{ padding: '32px 24px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, fontFamily: 'IBM Plex Mono, monospace', marginBottom: 20, opacity: .7 }}>
          <button onClick={() => setRoute({ page: 'home' })} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'inherit', padding: 0, fontFamily: 'inherit' }}>HOME</button>
          <span>/</span>
          <button onClick={() => setRoute({ page: 'list', cat: article.cat })} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'inherit', padding: 0, fontFamily: 'inherit' }}>{cat.label.toUpperCase()}</button>
          <span>/</span>
          <span style={{ color: 'var(--ink)' }}>ARTICLE #{article.id}</span>
        </div>

        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center', marginBottom: 16 }}>
          <span className="tag" style={{ background: cat.color, color: cat.id === 'site' ? 'var(--ink)' : '#fff' }}>
            {cat.emoji} {cat.label}
          </span>
          <span className="tag tag-yellow"><Icon name="fire" size={12}/> {article.tag}</span>
          <span style={{ fontSize: 12, opacity: .7, fontFamily: 'IBM Plex Mono, monospace' }}>{article.date}</span>
          <span style={{ fontSize: 12, opacity: .7, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
            <Icon name="clock" size={12} /> {article.read}分で読める
          </span>
        </div>

        <h1 style={{ fontSize: 'clamp(26px, 3.5vw, 40px)', fontWeight: 900, lineHeight: 1.3, margin: '0 0 20px', textWrap: 'balance' }}>
          {article.title}
        </h1>

        <div className="chunky" style={{
          aspectRatio: '16/7',
          background: cat.bg,
          backgroundImage: 'repeating-linear-gradient(45deg, rgba(26,26,46,.05) 0 10px, transparent 10px 20px)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          margin: '20px 0 40px', position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ fontSize: 100, opacity: .5 }}>{cat.emoji}</div>
          <div style={{ position: 'absolute', right: 24, bottom: 24 }}>
            <DotSensei size="md" pose="解説ポーズ" />
          </div>
          <div className="bubble" style={{ position: 'absolute', left: 30, top: 30, transform: 'rotate(-2deg)', fontSize: 14 }}>
            この記事、ガチで使えるで
          </div>
        </div>
      </section>

      {/* Article body */}
      <section style={{ maxWidth: 760, margin: '0 auto', padding: '0 24px' }}>
        <div className="chunky" style={{ padding: 20, background: 'var(--sub)', marginBottom: 28 }}>
          <div style={{ fontSize: 12, fontWeight: 900, marginBottom: 8, display: 'flex', alignItems: 'center', gap: 6 }}>
            <Icon name="pencil" size={14} /> この記事でわかること
          </div>
          <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 6 }}>
            <li style={{ fontSize: 14, fontWeight: 700, display: 'flex', gap: 8 }}><Icon name="check" size={16} /> 現場で毎日使えるAIプロンプトの基本型</li>
            <li style={{ fontSize: 14, fontWeight: 700, display: 'flex', gap: 8 }}><Icon name="check" size={16} /> 失敗しないツールの選び方と組み合わせ</li>
            <li style={{ fontSize: 14, fontWeight: 700, display: 'flex', gap: 8 }}><Icon name="check" size={16} /> コピペOKな実例テンプレ5本</li>
          </ul>
        </div>

        <div style={{ fontSize: 16, lineHeight: 1.9, fontWeight: 500 }}>
          <p>はい、ドット先生やで〜。今日もAI使いこなしたい会社員諸君、ようこそ。「{article.title}」のテーマ、めっちゃ相談多いんよ。「とりあえずAI触ってるけど、正直使いこなせてへん気がする…」ってやつ。</p>

          <h2 style={{ fontSize: 26, fontWeight: 900, margin: '40px 0 16px', display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ background: 'var(--yellow)', border: '2.5px solid var(--line)', borderRadius: 8, padding: '2px 10px', fontSize: 20, fontFamily: 'IBM Plex Mono, monospace' }}>01</span>
            まずは結論から言うで
          </h2>
          <p>結論、<strong>プロンプトは「役割→文脈→指示→出力形式」の4ブロックで組め</strong>。これだけで出力の質が3倍くらい変わるんよ。理由は後述するけど、AIは曖昧な指示に対して曖昧な答えしか返してくれへん。当たり前やけど、みんな忘れがちや。</p>

          <div className="chunky" style={{ padding: 18, background: '#fff8d6', margin: '20px 0', borderStyle: 'dashed' }}>
            <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              <Harin size="sm" pose="質問ポーズ" />
              <div className="bubble" style={{ flex: 1, background: '#fff' }}>
                <strong>ハリン：</strong>「役割」って、たとえば"あなたは優秀な編集者です"みたいな…？
              </div>
            </div>
          </div>

          <p>そう！よう分かってるやん、ハリン。役割を最初に指定するだけで、AIはそのキャラになりきって答えてくれる。これを<strong>ロールプロンプト</strong>言うんやけど、2026年現在でも超有効。</p>

          <h3 style={{ fontSize: 20, fontWeight: 900, margin: '32px 0 12px' }}>具体的なテンプレート</h3>
          <div className="chunky" style={{ padding: 18, background: 'var(--ink)', color: '#fff', fontFamily: 'IBM Plex Mono, monospace', fontSize: 13, lineHeight: 1.8, margin: '16px 0' }}>
            <div>【役割】あなたはプロの〇〇です。</div>
            <div>【文脈】次の状況について考えてください：〜</div>
            <div>【指示】以下のタスクを実行してください：〜</div>
            <div>【出力形式】箇条書き5本、各50字以内で。</div>
          </div>

          {/* Mid-article CTA */}
          <LineCTAInline openLineModal={openLineModal} />

          <h2 style={{ fontSize: 26, fontWeight: 900, margin: '40px 0 16px', display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ background: 'var(--yellow)', border: '2.5px solid var(--line)', borderRadius: 8, padding: '2px 10px', fontSize: 20, fontFamily: 'IBM Plex Mono, monospace' }}>02</span>
            やってはいけない失敗例
          </h2>
          <p>よくある失敗は「<strong>曖昧な指示を丸投げ</strong>」。例えば「議事録まとめて」だけ送る人、多いんちゃう？それやとAIは何を拾って何を捨てたらええか分からへん。具体的には次の3つがアカン。</p>

          <ol style={{ paddingLeft: 20, lineHeight: 2 }}>
            <li><strong>分量の指定がない</strong>（300字？3000字？）</li>
            <li><strong>読者の想定がない</strong>（上司？部下？社外？）</li>
            <li><strong>アウトプット形式がない</strong>（箇条書き？表？文章？）</li>
          </ol>

          <h2 style={{ fontSize: 26, fontWeight: 900, margin: '40px 0 16px', display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ background: 'var(--yellow)', border: '2.5px solid var(--line)', borderRadius: 8, padding: '2px 10px', fontSize: 20, fontFamily: 'IBM Plex Mono, monospace' }}>03</span>
            YouTubeでもっと詳しく解説してるで
          </h2>
          <p>文字だけやと分かりにくい人、YouTubeで実演版あるから見てみ〜。ハリンと一緒に失敗しながら学ぶスタイルや。</p>
          <div style={{ aspectRatio: '16/9', border: '2.5px solid var(--line)', borderRadius: 16, overflow: 'hidden', boxShadow: 'var(--shadow)', margin: '20px 0 32px' }}>
            <iframe
              src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0"
              title="関連YouTube動画"
              frameBorder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
              style={{ width: '100%', height: '100%', display: 'block' }}
            />
          </div>

          <h2 style={{ fontSize: 26, fontWeight: 900, margin: '40px 0 16px', display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ background: 'var(--yellow)', border: '2.5px solid var(--line)', borderRadius: 8, padding: '2px 10px', fontSize: 20, fontFamily: 'IBM Plex Mono, monospace' }}>04</span>
            まとめ
          </h2>
          <p>今日のポイントまとめたで。明日から試してみ〜。継続やで継続。</p>
          <ul style={{ lineHeight: 2 }}>
            <li>プロンプトは4ブロック構成で組む</li>
            <li>曖昧な丸投げは絶対やめる</li>
            <li>まずはコピペテンプレから始めてOK</li>
          </ul>
        </div>

        {/* End CTA */}
        <div style={{ margin: '40px 0' }}>
          <LineCTABanner openLineModal={openLineModal} />
        </div>
      </section>

      {/* Related */}
      <section className="container" style={{ padding: '40px 24px 60px' }}>
        <h2 style={{ fontSize: 24, fontWeight: 900, marginBottom: 20 }}>🔗 関連記事</h2>
        <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))' }}>
          {related.map(a => <ArticleCard key={a.id} article={a} setRoute={setRoute} />)}
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { ArticlePage });
