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

  return (
    <div className="fade-in">
      <PageHead title="News & Information" sub="Announcements, governance updates and stories from across Cape Town sport." />
      <div className="wrap" style={{ padding: '0 32px' }}>
        <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('article', { id: feat.id })} style={{ width: '100%', textAlign: 'left', overflow: 'hidden', display: 'grid', gridTemplateColumns: '1.1fr 1fr', marginBottom: 24 }}>
            <Photo h={280} tag={feat.category} src={feat.photo} />
            <div style={{ padding: 32, 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: 28, fontWeight: 900, margin: '10px 0 12px', lineHeight: 1.2, letterSpacing: '-.01em' }}>{feat.title}</h2>
              <p style={{ fontSize: 15.5, color: 'var(--muted)', lineHeight: 1.6, margin: 0 }}>{feat.excerpt}</p>
              <span style={{ color: 'var(--ocean)', fontWeight: 800, fontSize: 14, marginTop: 16 }}>Read article ›</span>
            </div>
          </button>
        )}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 }}>
          {rest.map(n => (
            <button key={n.id} className="card card-hover" onClick={() => go('article', { id: n.id })} style={{ textAlign: 'left', overflow: 'hidden' }}>
              <Photo h={150} tag={n.category} src={n.photo} />
              <div style={{ padding: 18 }}>
                <div style={{ fontSize: 11.5, fontWeight: 800, color: 'var(--ocean)', textTransform: 'uppercase' }}>{n.category} · {fmtDate(n.date)}</div>
                <div style={{ fontSize: 16.5, fontWeight: 800, margin: '7px 0 6px', lineHeight: 1.25 }}>{n.title}</div>
                <div style={{ fontSize: 13.5, color: 'var(--muted)', lineHeight: 1.5 }}>{n.excerpt}</div>
              </div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

function ArticleDetail({ id }) {
  const { go } = CTSCShell.useNav();
  const { data } = CTSCStore.useStore();
  const { fmtDate, fedName } = CTSCStore;
  const { Photo } = CTSCShell;
  const n = data.news.find(x => x.id === id);
  if (!n) return <PageHead title="Article not found" sub="" />;
  return (
    <div className="fade-in">
      <div className="wrap" style={{ padding: '28px 32px 0', maxWidth: 820 }}>
        <button onClick={() => go('news')} style={{ color: 'var(--ocean)', fontSize: 13, fontWeight: 700, marginBottom: 20 }}>‹ All news</button>
        <div style={{ fontSize: 12.5, fontWeight: 800, color: 'var(--ocean)', textTransform: 'uppercase', letterSpacing: '.07em' }}>{n.category} · {fmtDate(n.date)} · {fedName(data, n.fedId)}</div>
        <h1 style={{ fontSize: 38, fontWeight: 900, margin: '12px 0 22px', letterSpacing: '-.02em', lineHeight: 1.12 }}>{n.title}</h1>
        <Photo h={340} tag="Article photography" src={n.photo} style={{ borderRadius: 10, marginBottom: 26 }} />
        <p style={{ fontSize: 19, lineHeight: 1.6, color: 'var(--navy)', fontWeight: 600, marginBottom: 20 }}>{n.excerpt}</p>
        <p style={{ fontSize: 17, lineHeight: 1.75, color: '#3c4f5a' }}>{n.body}</p>
      </div>
    </div>
  );
}

function FundraisingPage() {
  const { go } = CTSCShell.useNav();
  const { data } = CTSCStore.useStore();
  const { fmtMoney, fmtDate, fedName } = CTSCStore;
  const list = data.fundraising.filter(c => c.status === 'Approved');
  return (
    <div className="fade-in">
      <PageHead title="Fundraising Campaigns" sub="Support clubs and athletes across the city. Federations launch and manage campaigns through the member portal." />
      <div className="wrap" style={{ padding: '0 32px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 18 }}>
          {list.map(c => {
            const pct = Math.min(100, Math.round(c.raised / c.goal * 100));
            return (
              <div key={c.id} className="card" style={{ overflow: 'hidden' }}>
                <CTSCShell.Photo h={150} tag={fedName(data, c.fedId)} />
                <div style={{ padding: 20 }}>
                  <h3 style={{ fontSize: 17.5, fontWeight: 800, margin: '0 0 8px', lineHeight: 1.25 }}>{c.title}</h3>
                  <p style={{ fontSize: 13.5, color: 'var(--muted)', lineHeight: 1.5, margin: '0 0 16px' }}>{c.desc}</p>
                  <div style={{ height: 9, background: 'var(--line2)', borderRadius: 5, overflow: 'hidden', marginBottom: 8 }}>
                    <div style={{ width: pct + '%', height: '100%', background: 'linear-gradient(90deg,var(--ocean),var(--gold))', borderRadius: 5 }}></div>
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, fontWeight: 800, marginBottom: 16 }}>
                    <span style={{ color: 'var(--navy)' }}>{fmtMoney(c.raised)}</span>
                    <span style={{ color: 'var(--muted)' }}>of {fmtMoney(c.goal)} · {pct}%</span>
                  </div>
                  <button className="btn btn-gold" style={{ width: '100%', justifyContent: 'center' }}>Donate</button>
                  <div style={{ fontSize: 12, color: 'var(--muted)', textAlign: 'center', marginTop: 10, fontWeight: 600 }}>Closes {fmtDate(c.deadline)}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}
window.NewsPage = NewsPage;
window.ArticleDetail = ArticleDetail;
window.FundraisingPage = FundraisingPage;