// Page 5: Stories list (magazine) + Page 6: Article

const StoriesListPage = ({ onNav }) => {
  const c = useTokens();
  const isMobile = useIsMobile();
  const D = window.HAOLIN_DATA;
  const [cat, setCat] = useState('all');

  const featured = D.articles.find(a => a.featured) || D.articles[0];
  const rest = D.articles.filter(a => a.id !== featured.id);
  const filtered = cat === 'all' ? rest : rest.filter(a => a.cat === D.categories.find(x=>x.key===cat)?.label);

  return (
    <div style={{background:c.bg, minHeight:'100vh'}}>
      {/* Hero banner */}
      <div style={{background: c.ink, color:'#fff', padding: isMobile ? '36px 20px' : '60px 32px'}}>
        <div style={{maxWidth:1240, margin:'0 auto', display:'flex', justifyContent:'space-between', alignItems:'flex-end', flexWrap:'wrap', gap: isMobile ? 12 : 24}}>
          <div>
            <span style={{fontSize:13, color:c.warm, fontWeight:600, letterSpacing:'0.1em'}}>特派員報導</span>
            <h1 style={{fontFamily:'var(--hl-font-heading)', fontSize: isMobile ? 30 : 52, fontWeight:500, margin: isMobile ? '10px 0 6px' : '14px 0 8px', color:'#fff', lineHeight:1.25}}>現場的人，現場的事。</h1>
            <p style={{fontSize: isMobile ? 14 : 17, color:'#C8B9A8', margin:0, lineHeight:1.75, maxWidth:580}}>每一個好鄰居團都有一位特派員，定期採訪、寫稿。我們不寫空話，只寫真正發生過的事。</p>
          </div>
          <div style={{fontSize:13, color:'#B8A998'}}>共 {D.articles.length} 篇報導 · 每週更新</div>
        </div>
      </div>

      {/* Filter */}
      <div style={{padding: isMobile ? '16px 16px' : '28px 32px', borderBottom:`1px solid ${c.line}`, overflowX: isMobile ? 'auto' : 'visible'}}>
        <div style={{maxWidth:1240, margin:'0 auto', display:'flex', gap:8, flexWrap: isMobile ? 'nowrap' : 'wrap'}}>
          <FilterChip active={cat==='all'} onClick={()=>setCat('all')}>全部</FilterChip>
          {D.categories.map(ct => <FilterChip key={ct.key} active={cat===ct.key} onClick={()=>setCat(ct.key)}>{ct.label}</FilterChip>)}
        </div>
      </div>

      <div style={{maxWidth:1240, margin:'0 auto', padding: isMobile ? '24px 16px 48px' : '48px 32px 80px'}}>
        {/* Featured */}
        {cat === 'all' && (
          <div
            onClick={()=>onNav('article', featured.id)}
            style={{
              display:'grid',
              gridTemplateColumns: isMobile ? '1fr' : '1.3fr 1fr',
              gap: isMobile ? 0 : 40,
              background:c.paper, borderRadius:'var(--hl-radius-2xl)',
              border:`1px solid ${c.line}`, overflow:'hidden',
              cursor:'pointer', marginBottom: isMobile ? 28 : 48,
            }}
          >
            <div style={{minHeight: isMobile ? 200 : 380}}>
              <PhotoPlaceholder width={700} height={isMobile ? 200 : 460} label={featured.group} src={(D.groups.find(g => g.name === featured.group) || {}).cover}/>
            </div>
            <div style={{padding: isMobile ? '20px 22px 24px' : '48px 48px 40px', display:'flex', flexDirection:'column', justifyContent:'center'}}>
              <div style={{display:'flex', gap:8, marginBottom: isMobile ? 10 : 14, flexWrap:'wrap'}}>
                <Tag tone="primary">Featured</Tag>
                <Tag>{featured.cat}</Tag>
              </div>
              <h2 style={{fontFamily:'var(--hl-font-heading)', fontSize: isMobile ? 22 : 34, fontWeight:500, color:c.ink, margin:'0 0 12px', lineHeight:1.35}}>{featured.title}</h2>
              <p style={{fontSize: isMobile ? 14 : 16, color:c.inkSoft, lineHeight:1.85, margin:'0 0 16px'}}>{featured.excerpt}</p>
              <div style={{display:'flex', gap: isMobile ? 8 : 16, color:c.inkMuted, fontSize:12, alignItems:'center', flexWrap:'wrap'}}>
                <span>特派員 {featured.reporter}</span>
                <span>·</span>
                <span>{featured.date}</span>
                <span>·</span>
                <span>{featured.read}</span>
              </div>
            </div>
          </div>
        )}

        <div style={{display:'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 16 : 24}}>
          {filtered.map(a => <ArticleCard key={a.id} article={a} onClick={()=>onNav('article', a.id)}/>)}
        </div>
      </div>
    </div>
  );
};

// Page 6: Article Detail
const ArticlePage = ({ onNav, articleId }) => {
  const c = useTokens();
  const isMobile = useIsMobile();
  const D = window.HAOLIN_DATA;
  const a = D.articles.find(x => x.id === articleId) || D.articles[0];
  const group = D.groups.find(g => g.name === a.group);

  return (
    <div style={{background: c.bg, minHeight:'100vh', paddingBottom: isMobile ? 60 : 100}}>
      {/* Top */}
      <div style={{padding: isMobile ? '24px 16px 16px' : '48px 32px 24px'}}>
        <div style={{maxWidth:720, margin:'0 auto'}}>
          <button onClick={()=>onNav('stories')} style={{background:'none', border:'none', color:c.inkSoft, fontSize:14, cursor:'pointer', display:'inline-flex', gap:6, alignItems:'center', marginBottom: isMobile ? 16 : 24, fontFamily:'var(--hl-font-body)'}}>
            ← 所有報導
          </button>
          <div style={{display:'flex', gap:10, marginBottom: isMobile ? 14 : 18, flexWrap:'wrap'}}>
            <Tag tone="primary">{a.cat}</Tag>
            <Tag>{a.group}</Tag>
          </div>
          <h1 style={{fontFamily:'var(--hl-font-heading)', fontSize: isMobile ? 26 : 'clamp(32px, 4vw, 48px)', fontWeight:500, color:c.ink, margin:'0 0 16px', lineHeight:1.35, letterSpacing:'0.01em'}}>{a.title}</h1>
          <p style={{fontSize: isMobile ? 16 : 19, color:c.inkSoft, lineHeight:1.75, margin:'0 0 20px', fontFamily:'var(--hl-font-heading)', fontWeight:400}}>{a.excerpt}</p>
          <div style={{display:'flex', gap: isMobile ? 10 : 14, alignItems:'center', fontSize:13, color:c.inkMuted, paddingBottom: isMobile ? 20 : 28, borderBottom:`1px solid ${c.line}`, flexWrap:'wrap'}}>
            <AvatarGeo size={isMobile ? 28 : 32} seed={a.id.charCodeAt(1)}/>
            <span style={{color:c.ink, fontWeight:500}}>特派員 {a.reporter}</span>
            <span>·</span>
            <span>{a.date}</span>
            <span>·</span>
            <span>{a.read}</span>
          </div>
        </div>
      </div>

      {/* Cover */}
      <div style={{maxWidth:960, margin: isMobile ? '0 auto 24px' : '0 auto 40px', padding: isMobile ? '0 16px' : '0 32px'}}>
        <div style={{borderRadius:'var(--hl-radius-2xl)', overflow:'hidden', height: isMobile ? 220 : 440}}>
          <PhotoPlaceholder width={960} height={isMobile ? 220 : 440} label={`${a.group} - 封面照片`} src={group?.cover}/>
        </div>
      </div>

      {/* Body */}
      <article style={{maxWidth:680, margin:'0 auto', padding: isMobile ? '0 16px' : '0 32px', fontSize: isMobile ? 16 : 18, lineHeight: isMobile ? 1.9 : 2, color:c.ink, fontFamily:'var(--hl-font-body)'}}>
        <p>週六早上九點，{a.group.slice(0,5)}的人開始陸陸續續到齊。</p>
        <p>推車、揹巾、抱著的、自己走的──每個小孩都有自己的移動方式，每個爸媽也都有自己疲憊的樣子。有人剛從夜班下來，眼睛還腫著；有人一手抱寶寶、一手拿著早餐店的豆漿。</p>
        <p style={{fontFamily:'var(--hl-font-heading)', fontSize:24, fontWeight:500, lineHeight:1.5, padding:'32px 0 32px 24px', borderLeft:`3px solid ${c.primary}`, color:c.ink, margin:'36px 0'}}>
          「我以為我來這邊是要跟其他爸媽交朋友，結果我發現，我來這邊只是想要不孤單兩個小時。」
        </p>
        <p>{a.excerpt}</p>
        <div style={{height: isMobile ? 200 : 320, borderRadius:'var(--hl-radius-xl)', overflow:'hidden', margin: isMobile ? '24px 0' : '40px 0'}}>
          <PhotoPlaceholder width={680} height={isMobile ? 200 : 320} label="活動現場照片" src={group?.cover}/>
        </div>
        <h3 style={{fontFamily:'var(--hl-font-heading)', fontSize: isMobile ? 21 : 26, fontWeight:500, color:c.ink, margin: isMobile ? '32px 0 14px' : '48px 0 20px'}}>為什麼這樣的聚會重要</h3>
        <p>這不是一個課程，也不是支持團體。沒有報名表，不收費，不點名。來了就來了，走了就走了。但奇怪的是，大家會持續地出現。</p>
        <p>主揪{group?.host.name || '美君'}說，她一開始什麼都沒規劃，只是覺得週六早上自己一個人帶小孩很無聊，就在社區 Line 群組裡問：「有沒有人要一起去溪邊走走？」結果來了七個人。</p>
        <p>一年多過去，每週都還有人來。</p>
        <p style={{fontFamily:'var(--hl-font-heading)', fontSize: isMobile ? 18 : 24, fontWeight:500, lineHeight:1.6, padding: isMobile ? '20px 0 20px 18px' : '32px 0 32px 24px', borderLeft:`3px solid ${c.primary}`, color:c.ink, margin: isMobile ? '24px 0' : '36px 0'}}>
          「我們沒有做什麼特別的事，就是固定時間出現。但我發現這就夠了。」
        </p>
        <p>她說自己不算什麼「主揪」，只是一個「每週六都會出現在那邊的人」。</p>
        <p>但對新加入的爸媽來說，這個「每週都會出現的人」，已經很珍貴了。</p>
      </article>

      {/* About the group */}
      {group && <div style={{maxWidth:680, margin: isMobile ? '40px auto 0' : '72px auto 0', padding: isMobile ? '0 16px' : '0 32px'}}>
        <div style={{background:c.bgAlt, borderRadius:'var(--hl-radius-2xl)', padding: isMobile ? '22px 20px' : '32px 36px'}}>
          <div style={{fontSize:12, color:c.primary, fontWeight:600, letterSpacing:'0.1em', marginBottom:12}}>關於這個好鄰居</div>
          <div style={{display:'flex', gap: isMobile ? 14 : 20, alignItems:'flex-start'}}>
            <AvatarGeo size={isMobile ? 44 : 56} seed={group.id.charCodeAt(1)}/>
            <div style={{flex:1, minWidth:0}}>
              <h3 style={{fontFamily:'var(--hl-font-heading)', fontSize: isMobile ? 18 : 22, color:c.ink, margin:'0 0 6px', fontWeight:500}}>{group.name}</h3>
              <p style={{fontSize:14, color:c.inkSoft, margin:'0 0 14px', lineHeight:1.7}}>{group.tagline}</p>
              <div style={{display:'flex', gap:8, marginBottom:16, flexWrap:'wrap'}}>
                {group.tags.map(t => <Tag key={t}>{t}</Tag>)}
              </div>
              <div style={{display:'flex', gap:10, flexWrap:'wrap'}}>
                <Button size="sm" onClick={()=>onNav('group-detail', group.id)}>看團體詳情</Button>
                <Button variant="ghost" size="sm" onClick={()=>onNav('groups')}>找類似團體</Button>
              </div>
            </div>
          </div>
        </div>
      </div>}
    </div>
  );
};

Object.assign(window, { StoriesListPage, ArticlePage });