// Blog list + blog post
function BlogPage() {
  const { go } = CTSCShell.useNav();
  const { data } = CTSCStore.useStore();
  const { fmtDate } = CTSCStore;
  const { Photo, Avatar } = CTSCShell;
  const [cat, setCat] = React.useState('All');
  const approved = [...(data.blog || [])].filter(b => b.status === 'Approved').sort((a, b) => b.date.localeCompare(a.date));
  const cats = ['All', ...Array.from(new Set(approved.map(b => b.category)))];
  const list = approved.filter(b => cat === 'All' || b.category === cat);
  const [feat, ...rest] = list;

  return (
    <div className="fade-in">
      <section style={{ background: 'linear-gradient(180deg,var(--navy),var(--navy2))', color: '#fff' }}>
        <div className="wrap" style={{ padding: '46px 32px' }}>
          <div className="eyebrow gold" style={{ color: 'var(--gold)' }}>The CTSC Blog</div>
          <h1 style={{ fontSize: 44, fontWeight: 900, margin: '14px 0 8px', letterSpacing: '-.02em' }}>Stories from Cape sport</h1>
          <p style={{ fontSize: 16.5, color: '#bcd0de', maxWidth: 600, margin: 0, lineHeight: 1.5 }}>Spotlights, behind-the-scenes, history and the fun side of sport in the Mother City.</p>
        </div>
      </section>
      <div className="wrap" style={{ padding: '26px 32px 0' }}>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 26 }}>
          {cats.map(c => <button key={c} className={'chip' + (cat === c ? ' active' : '')} onClick={() => setCat(c)}>{c}</button>)}
        </div>
        {feat && (
          <button className="card card-hover" onClick={() => go('post', { id: feat.id })} style={{ width: '100%', textAlign: 'left', overflow: 'hidden', display: 'grid', gridTemplateColumns: '1.1fr 1fr', marginBottom: 24 }}>
            <Photo h={300} tag={feat.category} src={feat.photo} />
            <div style={{ padding: 36, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              <div style={{ fontSize: 12, fontWeight: 800, color: 'var(--ocean)', textTransform: 'uppercase', letterSpacing: '.07em' }}>{feat.category} · {fmtDate(feat.date)}</div>
              <h2 style={{ fontSize: 30, fontWeight: 900, margin: '10px 0 12px', lineHeight: 1.18, letterSpacing: '-.01em' }}>{feat.title}</h2>
              <p style={{ fontSize: 15.5, color: 'var(--muted)', lineHeight: 1.6, margin: 0 }}>{feat.excerpt}</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 18 }}>
                <Avatar name={feat.author} size={34} />
                <span style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--navy)' }}>{feat.author}</span>
              </div>
            </div>
          </button>
        )}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 }}>
          {rest.map(b => (
            <button key={b.id} className="card card-hover" onClick={() => go('post', { id: b.id })} style={{ textAlign: 'left', overflow: 'hidden' }}>
              <Photo h={160} tag={b.category} src={b.photo} />
              <div style={{ padding: 20 }}>
                <div style={{ fontSize: 11.5, fontWeight: 800, color: 'var(--ocean)', textTransform: 'uppercase' }}>{b.category} · {fmtDate(b.date)}</div>
                <div style={{ fontSize: 17, fontWeight: 800, margin: '7px 0 7px', lineHeight: 1.25 }}>{b.title}</div>
                <div style={{ fontSize: 13.5, color: 'var(--muted)', lineHeight: 1.5, marginBottom: 14 }}>{b.excerpt}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                  <Avatar name={b.author} size={28} />
                  <span style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--navy)' }}>{b.author}</span>
                </div>
              </div>
            </button>
          ))}
        </div>
        {list.length === 0 && <p style={{ color: 'var(--muted)', fontSize: 15, padding: '20px 0' }}>No posts in this category yet.</p>}
      </div>
    </div>
  );
}

function BlogPost({ id }) {
  const { go } = CTSCShell.useNav();
  const { data } = CTSCStore.useStore();
  const { fmtDate } = CTSCStore;
  const { Photo, Avatar } = CTSCShell;
  const b = (data.blog || []).find(x => x.id === id);
  if (!b) return <PageHead title="Post not found" sub="" />;
  const more = (data.blog || []).filter(x => x.status === 'Approved' && x.id !== id).slice(0, 3);
  return (
    <div className="fade-in">
      <div className="wrap" style={{ padding: '28px 32px 0', maxWidth: 820 }}>
        <button onClick={() => go('blog')} style={{ color: 'var(--ocean)', fontSize: 13, fontWeight: 700, marginBottom: 20 }}>‹ The CTSC Blog</button>
        <div style={{ fontSize: 12.5, fontWeight: 800, color: 'var(--ocean)', textTransform: 'uppercase', letterSpacing: '.07em' }}>{b.category} · {fmtDate(b.date)}</div>
        <h1 style={{ fontSize: 38, fontWeight: 900, margin: '12px 0 18px', letterSpacing: '-.02em', lineHeight: 1.12 }}>{b.title}</h1>
        <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 24 }}>
          <Avatar name={b.author} size={40} />
          <div><div style={{ fontSize: 14.5, fontWeight: 800, color: 'var(--navy)' }}>{b.author}</div><div style={{ fontSize: 12.5, color: 'var(--muted)', fontWeight: 600 }}>Cape Town Sport Council</div></div>
        </div>
        <Photo h={340} tag="Blog photography" src={b.photo} style={{ borderRadius: 10, marginBottom: 26 }} />
        <p style={{ fontSize: 19, lineHeight: 1.6, color: 'var(--navy)', fontWeight: 600, marginBottom: 20 }}>{b.excerpt}</p>
        <p style={{ fontSize: 17, lineHeight: 1.75, color: '#3c4f5a', whiteSpace: 'pre-line' }}>{b.body}</p>
      </div>
      {more.length > 0 && (
        <div className="wrap" style={{ padding: '40px 32px 0' }}>
          <div className="sech"><h2 style={{ fontSize: 22 }}>More from the blog</h2><button className="lnk" onClick={() => go('blog')}>All posts ›</button></div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 }}>
            {more.map(p => (
              <button key={p.id} className="card card-hover" onClick={() => go('post', { id: p.id })} style={{ textAlign: 'left', overflow: 'hidden' }}>
                <Photo h={130} tag={p.category} src={p.photo} />
                <div style={{ padding: 16 }}>
                  <div style={{ fontSize: 11, fontWeight: 800, color: 'var(--ocean)', textTransform: 'uppercase' }}>{p.category}</div>
                  <div style={{ fontSize: 15, fontWeight: 800, marginTop: 5, lineHeight: 1.25 }}>{p.title}</div>
                </div>
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}
window.BlogPage = BlogPage;
window.BlogPost = BlogPost;