/* ===========================================================
   KooshaNews — Website (home). Composes the design-system bundle.
   data-wbc-module / data-wbc-bind attributes map each block to
   the central webcasting modules (markets · news · ads · media · live).
   =========================================================== */
const { Button, Badge, Chip, Card, NewsCard, Icon, MarketStat, Spark, Ticker, Logo } = window.DesignSystem_7abc08;
const BrandLogo = Logo || function ({ size = 38 }) {
  return React.createElement('span', { style: { display: 'flex', alignItems: 'center', gap: 9 } },
    React.createElement('span', { style: { width: size, height: size, borderRadius: 'var(--r-sm)', display: 'grid', placeItems: 'center', background: 'linear-gradient(150deg, var(--gold), var(--gold-600))', color: 'var(--on-gold)', fontWeight: 900, fontSize: size*0.5 } }, 'ک'),
    React.createElement('b', { style: { fontSize: 'var(--t-h4)', fontWeight: 900, letterSpacing: '-0.02em' } }, 'کوشا', React.createElement('span', { style: { color: 'var(--gold)' } }, 'نیوز'))
  );
};
const D = window.KOOSHA;
const t = (s) => (window.KI18N ? window.KI18N.t(s) : s);
const tnum = (s) => (window.KI18N && window.KI18N.getLang() === 'en' ? window.KI18N.digits(String(s)) : s);
const CAT = Object.fromEntries(D.categories.map(c => [c.key, c.label]));
const HUE = { econ:'var(--c-econ)', market:'var(--c-market)', world:'var(--c-world)', energy:'var(--c-energy)', tech:'var(--c-tech)', gold:'var(--c-gold)', sport:'var(--c-sport)', social:'var(--c-social)', culture:'var(--c-culture)' };

/* ---------- Header ---------- */
function MarketBar() {
  return (
    <div className="market-bar scroll" data-wbc-module="markets" data-wbc-bind="ticker">
      {D.markets.map(m => (
        <div className="market-cell" key={m.symbol}>
          <span className="mc-label">{t(m.label)}</span>
          <span className="mc-value">{tnum(m.value)}</span>
          <span className={'chg ' + (m.change >= 0 ? 'is-up' : 'is-down')} style={{ padding:'1px 5px', fontSize:'var(--t-2xs)' }}>
            {m.change >= 0 ? '▲' : '▼'} {Math.abs(m.change).toFixed(2)}٪
          </span>
        </div>
      ))}
    </div>
  );
}

function Header({ theme, onTheme, onAuth, lang, onLang }) {
  return (
    <header style={{ position:'sticky', top:0, zIndex:40, background:'var(--bg-0)', borderBottom:'1px solid var(--line)' }}>
      <Ticker items={D.breaking.map(t)} />
      <MarketBar />
      <div className="wrap-max row between" style={{ height:'var(--header-h)', gap:18 }}>
        <a href="#/" className="row" style={{ gap:11, textDecoration:'none' }}>
          <BrandLogo size={40} />
        </a>
        <nav className="row nav-scroll" style={{ gap:2 }}>
          <a href="#/live" className="nav-link nav-live" style={{ whiteSpace:'nowrap' }}><span className="live-dot" style={{ background:'var(--live)' }}></span> {t('پخش زنده')}</a>
          {D.categories.map((c,i) => (
            <a key={c.key} href={'#/cat/'+c.key} className="nav-link" style={{ '--cat':HUE[c.key], whiteSpace:'nowrap' }}>{t(c.label)}</a>
          ))}
        </nav>
        <div className="row" style={{ gap:8 }}>
          <button className="btn btn-icon btn-ghost" aria-label={t('جستجو')}><Icon name="search" size={18} /></button>
          <button className="btn btn-icon btn-ghost" aria-label="حالت روشن/تیره" onClick={onTheme}>
            <Icon name={theme === 'dark' ? 'sun' : 'moon'} size={18} />
          </button>
          <button className="btn btn-ghost btn-sm lang-switch" onClick={onLang} aria-label="language">{lang === 'fa' ? 'EN' : 'فا'}</button>
          <Button variant="ghost" size="sm" icon="user" onClick={() => onAuth('login')}>{t('ورود')}</Button>
          <Button variant="gold" size="sm" onClick={() => onAuth('signup')}>{t('اشتراک ویژه')}</Button>
        </div>
      </div>
    </header>
  );
}

/* ---------- Hero ---------- */
function Hero() {
  const lead = D.lead;
  return (
    <section className="wrap-max" style={{ paddingTop:24 }} data-wbc-module="news" data-wbc-bind="lead">
      <div className="hero-grid">
        <article className="news-card rise" style={{ cursor:'pointer' }}>
          <div className="nc-media" style={{ aspectRatio:'16/8' }}>
            <div className="media-ph" style={{ width:'100%', height:'100%', background:`linear-gradient(135deg, color-mix(in srgb, ${HUE[lead.category]} 30%, var(--bg-2)), var(--bg-1))` }}>
              <Icon name="coin" size={64} style={{ color:HUE[lead.category], opacity:.55 }} />
            </div>
            <div style={{ position:'absolute', insetInlineStart:14, top:14 }}><Badge category={lead.category}>{t(CAT[lead.category])}</Badge></div>
          </div>
          <div className="nc-body" style={{ padding:'20px 22px 24px', gap:12 }}>
            <div className="kicker">{t('خبر اصلی')}</div>
            <h1 className="display" style={{ fontSize:'var(--t-display)' }}>{t(lead.title)}</h1>
            <p className="lead-text">{t(lead.lead)}</p>
            <div className="nc-meta" style={{ marginTop:4 }}>
              <span className="row" style={{ gap:4 }}><Icon name="clock" size={14} />{t(lead.time)}</span>
              <span className="row" style={{ gap:4 }}><Icon name="eye" size={14} />{t(lead.views)} {t('بازدید')}</span>
            </div>
          </div>
        </article>
        <aside className="col" style={{ gap:14 }} data-wbc-bind="important">
          <div className="section-head" style={{ marginBottom:2 }}><h2 style={{ fontSize:'var(--t-h3)' }}>{t('مهم‌ترین‌ها')}</h2></div>
          {D.important.map((n,i) => (
            <a key={n.id} href={'#/news/'+n.id} className="imp-item">
              <span className="imp-num num">{tnum((i+1).toLocaleString('fa'))}</span>
              <span className="col" style={{ gap:6 }}>
                <span className="imp-title">{t(n.title)}</span>
                <span className="row" style={{ gap:8 }}>
                  <Badge category={n.category}>{t(CAT[n.category])}</Badge>
                  <span style={{ fontSize:'var(--t-xs)', color:'var(--text-3)' }}>{t(n.time)}</span>
                </span>
              </span>
            </a>
          ))}
        </aside>
      </div>
    </section>
  );
}

/* ---------- Market watch ---------- */
function MarketWatch() {
  const top = D.markets.slice(0,4);
  return (
    <section className="wrap-max sec" data-wbc-module="markets" data-wbc-bind="snapshot">
      <div className="section-head">
        <Icon name="candles" size={22} style={{ color:'var(--gold)' }} />
        <h2>{t('دیدبان بازار')}</h2>
        <span className="sh-rule"></span>
        <Button variant="ghost" size="sm" iconEnd="chevLeft">{t('همهٔ بازارها')}</Button>
      </div>
      <div className="mw-grid">
        {top.map(m => (
          <MarketStat key={m.symbol} icon={m.type==='crypto'?'cpu':m.type==='currency'?'dollar':m.type==='index'?'chart':'coin'}
            asset={{ label:t(m.label), value:tnum(m.value), change:m.change, spark:m.spark }} />
        ))}
      </div>
    </section>
  );
}

/* ---------- Latest rail ---------- */
function Latest() {
  return (
    <section className="wrap-max sec" data-wbc-module="news" data-wbc-bind="latest">
      <div className="section-head">
        <h2>{t('تازه‌ترین‌ها')}</h2><span className="sh-rule"></span>
        <div className="row" style={{ gap:6 }}>
          {D.categories.slice(0,4).map((c,i) => <Chip key={c.key} active={i===0}>{t(c.label)}</Chip>)}
        </div>
      </div>
      <div className="rail-grid">
        {D.latest.map(n => (
          <NewsCard key={n.id} title={t(n.title)} category={n.category} categoryLabel={t(CAT[n.category])} time={t(n.time)} views={t(n.views)} />
        ))}
      </div>
    </section>
  );
}

/* ---------- Ad slot ---------- */
function AdSlot({ spec, sticky }) {
  return (
    <div data-wbc-module="ads" data-wbc-bind={spec === D.ads.leaderboard ? 'leaderboard' : 'sidebar'}
      className="ad-slot" style={{ aspectRatio:`${spec.w} / ${spec.h}`, maxWidth:spec.w }}>
      <span className="dim" style={{ fontSize:'var(--t-xs)' }}><Icon name="grid" size={14} style={{ verticalAlign:'-2px', marginInlineEnd:6 }} />{t(spec.label)}</span>
    </div>
  );
}

/* ---------- Two column: most read + analysis | sidebar ---------- */
function Digest() {
  return (
    <section className="wrap-max sec">
      <div className="digest-grid">
        <div className="col" style={{ gap:34 }}>
          <div data-wbc-module="news" data-wbc-bind="mostRead">
            <div className="section-head"><Icon name="fire" size={20} style={{ color:'var(--c-energy)' }} /><h2 style={{ fontSize:'var(--t-h2)' }}>{t('پربازدیدترین')}</h2><span className="sh-rule"></span></div>
            <ol className="mostread">
              {D.mostRead.map((n,i) => (
                <li key={n.id}><a href="#" className="mr-item">
                  <span className="mr-rank num">{tnum((i+1).toLocaleString('fa'))}</span>
                  <span className="mr-title">{t(n.title)}</span>
                  <span className="mr-views num"><Icon name="eye" size={13} />{t(n.views)}</span>
                </a></li>
              ))}
            </ol>
          </div>
          <div data-wbc-module="news" data-wbc-bind="analysis">
            <div className="section-head"><Icon name="dossier" size={20} style={{ color:'var(--c-tech)' }} /><h2 style={{ fontSize:'var(--t-h2)' }}>{t('تحلیل و یادداشت')}</h2><span className="sh-rule"></span></div>
            <div className="rail-grid" style={{ gridTemplateColumns:'repeat(2,1fr)' }}>
              {D.analysis.map(a => (
                <article key={a.id} className="news-card" style={{ cursor:'pointer' }}>
                  <div className="nc-body" style={{ gap:10 }}>
                    <Badge category={a.category}>{t(a.time)}</Badge>
                    <h3 className="nc-title">{t(a.title)}</h3>
                    <span className="row" style={{ gap:7, color:'var(--text-3)', fontSize:'var(--t-xs)' }}><Icon name="user" size={13} />{t(a.author)}</span>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </div>
        <aside className="col" style={{ gap:24 }}>
          <div className="panel" style={{ padding:18 }} data-wbc-module="markets" data-wbc-bind="prices">
            <div className="row between" style={{ marginBottom:6 }}>
              <b style={{ fontSize:'var(--t-h4)' }}>{t('قیمت‌های لحظه‌ای')}</b>
              <span className="live-badge" style={{ background:'var(--up-soft)', color:'var(--up)' }}><span className="live-dot" style={{ background:'var(--up)' }}></span>{t('زنده')}</span>
            </div>
            {D.markets.slice(0,6).map(m => (
              <MarketStat key={m.symbol} variant="row" icon={m.type==='crypto'?'cpu':m.type==='currency'?'dollar':'coin'} asset={{ label:t(m.label), value:tnum(m.value), change:m.change }} />
            ))}
          </div>
          <AdSlot spec={D.ads.sidebar} />
          <div className="panel" style={{ padding:18 }} data-wbc-module="media" data-wbc-bind="videos">
            <div className="section-head" style={{ marginBottom:14 }}><Icon name="video" size={18} style={{ color:'var(--gold)' }} /><b style={{ fontSize:'var(--t-h4)' }}>{t('ویدیوها')}</b></div>
            <div className="col" style={{ gap:12 }}>
              {D.videos.slice(0,3).map(v => (
                <a key={v.id} href="#" className="vid-item">
                  <span className="vid-thumb" style={{ background:`linear-gradient(135deg, color-mix(in srgb, ${HUE[v.category]} 28%, var(--bg-2)), var(--bg-1))` }}>
                    <Icon name="play" size={18} style={{ color:'#fff' }} /><span className="vid-dur num">{tnum(v.dur)}</span>
                  </span>
                  <span className="vid-title">{t(v.title)}</span>
                </a>
              ))}
            </div>
          </div>
        </aside>
      </div>
    </section>
  );
}

/* ---------- Category blocks (sport / social / culture + more) ---------- */
function CategoryBlocks() {
  const keys = ['sport','social','culture'];
  return (
    <section className="wrap-max sec" data-wbc-module="news" data-wbc-bind="byCategory">
      <div className="cat-blocks">
        {keys.map(k => (
          <div className="cat-block" key={k} style={{ '--cat':HUE[k] }}>
            <div className="cat-block-head">
              <span className="cat-dot"></span>
              <h2 style={{ fontSize:'var(--t-h3)' }}>{t(CAT[k])}</h2>
              <span className="sh-rule"></span>
              <a href={'#/cat/'+k} className="cat-more" style={{ fontSize:'var(--t-xs)', color:'var(--text-3)' }}>{t('بیشتر')}</a>
            </div>
            <div className="col" style={{ gap:2 }}>
              {(D.byCategory[k]||[]).map((n,i) => (
                <a key={n.id} href="#" className="cat-item">
                  {i===0 ? (
                    <span className="cat-lead-thumb" style={{ background:`linear-gradient(135deg, color-mix(in srgb, ${HUE[k]} 30%, var(--bg-2)), var(--bg-1))` }}></span>
                  ) : null}
                  <span className="col" style={{ gap:5 }}>
                    <span className={i===0 ? 'cat-lead-title' : 'cat-row-title'}>{t(n.title)}</span>
                    <span style={{ fontSize:'var(--t-xs)', color:'var(--text-3)' }}>{t(n.time)}</span>
                  </span>
                </a>
              ))}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- Live strip + playlist ---------- */
function LiveStrip() {
  const L = D.live;
  const [cur, setCur] = React.useState(0);
  const list = L.playlist || [];
  const active = list[cur] || L.onAir;
  return (
    <section className="wrap-max sec" data-wbc-module="live" data-wbc-bind="player">
      <div className="section-head"><Icon name="broadcast" size={22} style={{ color:'var(--live)' }} /><h2>{t('پخش زنده و پلی‌لیست')}</h2><span className="sh-rule"></span></div>
      <div className="live-strip">
        <div className="live-player" data-hls={L.onAir.hls}>
          <div className="media-ph" style={{ position:'absolute', inset:0, background:`linear-gradient(135deg, color-mix(in srgb, var(--live) ${active.live?22:14}%, var(--bg-1)), var(--bg-0))` }}></div>
          <div style={{ position:'relative', zIndex:1 }} className="col center gap-3">
            <button className="play-fab"><Icon name="play" size={30} style={{ color:'#fff' }} /></button>
            {active.live ? <Badge live>{t('زنده')} · HLS</Badge> : <span className="cat-badge" style={{ '--cat':'var(--gold)' }}>{active.type || 'VOD'}</span>}
          </div>
          <div className="live-caption">
            <b>{t(active.title)}</b>
            <span className="dim num" style={{ fontSize:'var(--t-xs)' }}>
              {active.live ? <React.Fragment><Icon name="eye" size={13} style={{ verticalAlign:'-2px' }} /> {tnum(L.onAir.viewers)} {t('بیننده')}</React.Fragment> : tnum(active.dur)}
            </span>
          </div>
        </div>
        <div className="panel" style={{ padding:14 }} data-wbc-bind="playlist">
          <div className="section-head" style={{ marginBottom:10 }}><Icon name="play" size={16} style={{ color:'var(--gold)' }} /><b style={{ fontSize:'var(--t-h4)' }}>{t('پلی‌لیست')}</b><span className="sh-rule"></span><span style={{ fontSize:'var(--t-xs)', color:'var(--text-3)' }} className="num">{tnum(list.length.toLocaleString('fa'))} {t('برنامه')}</span></div>
          <div className="col" style={{ gap:2, maxHeight:280, overflow:'auto' }}>
            {list.map((p,i) => (
              <button key={p.id} className={'pl-row' + (i===cur?' is-active':'')} onClick={() => setCur(i)}>
                <span className="pl-ico">{p.live ? <span className="live-dot" style={{ background:'var(--live)' }}></span> : <Icon name="play" size={13} />}</span>
                <span className="pl-title">{t(p.title)}</span>
                <span className="num" style={{ fontSize:'var(--t-2xs)', color:p.live?'var(--live)':'var(--text-3)' }}>{tnum(p.dur)}</span>
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  const cols = [
    { t:'بخش‌ها',  items: D.categories.map(c => ({ label:c.label, href:'#/cat/'+c.key })) },
    { t:'خدمات',   items: ['اشتراک ویژه','خبرنامه','اپلیکیشن','API بازار'].map(x => ({ label:x, href:'#' })) },
    { t:'کوشانیوز', items: [{ label:'دربارهٔ ما', href:'#/about' }, { label:'تماس با ما', href:'#/contact' }, { label:'تبلیغات', href:'#' }, { label:'قوانین', href:'#' }] },
  ];
  return (
    <footer data-wbc-module="footer" data-wbc-bind="footer" style={{ borderTop:'1px solid var(--line)', marginTop:48, background:'var(--bg-1)' }}>
      <div className="wrap-max" style={{ padding:'40px 20px 28px', display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 1fr', gap:28 }}>
        <div className="col" style={{ gap:12 }}>
          <BrandLogo size={36} />
          <p className="body-text" style={{ fontSize:'var(--t-sm)', maxWidth:300 }}>{t('پلتفرم خبری اقتصادمحور و ویدیو-محور؛ دیدبان لحظه‌ای بازار، آرشیو ویدیویی و پخش زنده.')}</p>
          <span className="mbind" style={{ fontSize:'var(--t-2xs)', color:'var(--text-3)' }}>{t('footer · ماژول مرکزی')}</span>
        </div>
        {cols.map(col => (
          <div className="col" style={{ gap:10 }} key={col.t}>
            <b style={{ fontSize:'var(--t-sm)', color:'var(--text-1)' }}>{t(col.t)}</b>
            {col.items.map(x => <a key={x.label} href={x.href} style={{ fontSize:'var(--t-sm)', color:'var(--text-3)' }}>{t(x.label)}</a>)}
          </div>
        ))}
      </div>
      <div className="wrap-max row between" style={{ padding:'16px 20px', borderTop:'1px solid var(--line)', fontSize:'var(--t-xs)', color:'var(--text-3)' }}>
        <span>© {tnum('۱۴۰۴')} {t('کوشانیوز')} — {t('تمامی حقوق محفوظ است.')}</span>
        <span>kooshanews.ir</span>
      </div>
    </footer>
  );
}

/* ---------- Category / About / Contact pages ---------- */
function catItems(key) {
  const fromLatest = D.latest.filter(n => n.category === key);
  const fromBy = (D.byCategory[key] || []).map(n => ({ ...n, category:key }));
  const merged = [...fromLatest, ...fromBy];
  return merged.length ? merged : D.latest.map(n => ({ ...n }));
}
function catVideos(key) {
  const v = D.videos.filter(x => x.category === key);
  return v.length ? v : D.videos;
}

function CategoryPage({ catKey }) {
  const label = CAT[catKey] || 'دسته';
  const hue = HUE[catKey] || 'var(--gold)';
  const items = catItems(catKey);
  const featured = items.slice(0, Math.min(4, items.length));
  const vids = catVideos(catKey);
  const [si, setSi] = React.useState(0);
  React.useEffect(() => {
    setSi(0);
    const t = setInterval(() => setSi(i => featured.length ? (i + 1) % featured.length : 0), 5500);
    return () => clearInterval(t);
  }, [catKey]);
  const f = featured[si] || featured[0] || items[0];
  return (
    <main className="wrap-max" style={{ paddingTop:18 }} data-wbc-module="news" data-wbc-bind="category">
      <nav className="crumbs"><a href="#/">خانه</a><Icon name="chevLeft" size={13} /><span style={{ color:hue }}>{label}</span></nav>
      <header className="cat-page-head" style={{ '--cat':hue }}>
        <span className="cat-dot"></span>
        <h1 style={{ fontSize:'var(--t-display)' }}>{label}</h1>
        <span className="sh-rule"></span>
        <span className="dim num" style={{ fontSize:'var(--t-sm)' }}>{items.length.toLocaleString('fa')} خبر</span>
      </header>
      <div className="cat-layout">
        <div className="col" style={{ gap:26 }}>
          <section className="slider" style={{ '--cat':hue }} data-wbc-bind="latest">
            <div className="slide-media" style={{ background:`linear-gradient(135deg, color-mix(in srgb, ${hue} 32%, var(--bg-2)), var(--bg-1))` }}>
              <button className="play-fab"><Icon name="play" size={28} style={{ color:'#fff' }} /></button>
              <span className="slide-tag"><Badge category={catKey}>{label}</Badge></span>
              <span className="slide-vidflag num"><Icon name="video" size={13} /> ویدیو</span>
            </div>
            <div className="slide-cap">
              <div className="kicker">آخرین خبر</div>
              <h2 style={{ fontSize:'var(--t-h1)' }}>{f && f.title}</h2>
              <span className="dim num" style={{ fontSize:'var(--t-xs)' }}><Icon name="clock" size={13} style={{ verticalAlign:'-2px' }} /> {f && f.time}{f && f.views ? ` · ${f.views} بازدید` : ''}</span>
            </div>
            <div className="slide-nav">
              <button onClick={() => setSi(i => (i - 1 + featured.length) % featured.length)} aria-label="قبلی"><Icon name="chevRight" size={18} /></button>
              <div className="dots">{featured.map((_, i) => <span key={i} className={'dot' + (i === si ? ' on' : '')} onClick={() => setSi(i)}></span>)}</div>
              <button onClick={() => setSi(i => (i + 1) % featured.length)} aria-label="بعدی"><Icon name="chevLeft" size={18} /></button>
            </div>
          </section>
          <section data-wbc-bind="list">
            <div className="section-head"><h2>تیتر اخبار {label}</h2><span className="sh-rule"></span></div>
            <ol className="title-list">
              {items.map((n, i) => (
                <li key={(n.id || 'x') + '-' + i}><a href="#" className="tl-item">
                  <span className="tl-bullet" style={{ background:hue }}></span>
                  <span className="tl-title">{n.title}</span>
                  <span className="tl-time num">{n.time}</span>
                </a></li>
              ))}
            </ol>
          </section>
        </div>
        <aside className="col" style={{ gap:14 }} data-wbc-module="media" data-wbc-bind="visual">
          <div className="section-head" style={{ marginBottom:2 }}><Icon name="video" size={18} style={{ color:hue }} /><h2 style={{ fontSize:'var(--t-h3)' }}>خبرهای تصویری</h2></div>
          {vids.map((v, i) => (
            <a key={(v.id || 'v') + i} href="#" className="visual-card">
              <span className="vc-thumb" style={{ background:`linear-gradient(135deg, color-mix(in srgb, ${HUE[v.category] || hue} 30%, var(--bg-2)), var(--bg-1))` }}>
                <Icon name="play" size={20} style={{ color:'#fff' }} />
                <span className="vc-dur num">{v.dur}</span>
              </span>
              <span className="vc-title">{v.title}</span>
            </a>
          ))}
          <AdSlot spec={D.ads.sidebar} />
        </aside>
      </div>
    </main>
  );
}

function AboutPage() {
  return (
    <main className="wrap-max" style={{ paddingTop:18 }} data-wbc-module="pages" data-wbc-bind="about">
      <nav className="crumbs"><a href="#/">خانه</a><Icon name="chevLeft" size={13} /><span>دربارهٔ ما</span></nav>
      <header className="cat-page-head"><h1 style={{ fontSize:'var(--t-display)' }}>دربارهٔ کوشانیوز</h1><span className="sh-rule"></span></header>
      <p className="lead-text" style={{ maxWidth:760 }}>کوشانیوز یک پلتفرم خبری اقتصادمحور و ویدیو-محور است؛ دیدبان لحظه‌ای بازار، آرشیو ویدیویی، پخش زندهٔ رویدادها و پوشش دسته‌های ورزشی، اجتماعی و فرهنگی.</p>
      <div className="about-grid">
        {[['bolt','مأموریت','گزارش دقیق، سریع و بی‌طرفِ بازار و جامعه.'],['video','ویدیو-محور','هر خبر مهم با روایت تصویری و پخش زنده.'],['users','اعتماد','راستی‌آزمایی منابع و شفافیت داده‌ها.']].map(([ic,t,d]) => (
          <div className="panel col" style={{ padding:20, gap:8 }} key={t}><Icon name={ic} size={22} style={{ color:'var(--gold)' }} /><b style={{ fontSize:'var(--t-h4)' }}>{t}</b><span className="dim" style={{ fontSize:'var(--t-sm)' }}>{d}</span></div>
        ))}
      </div>
    </main>
  );
}

function ContactPage() {
  return (
    <main className="wrap-max" style={{ paddingTop:18 }} data-wbc-module="pages" data-wbc-bind="contact">
      <nav className="crumbs"><a href="#/">خانه</a><Icon name="chevLeft" size={13} /><span>تماس با ما</span></nav>
      <header className="cat-page-head"><h1 style={{ fontSize:'var(--t-display)' }}>تماس با ما</h1><span className="sh-rule"></span></header>
      <div className="contact-grid">
        <form className="panel" style={{ padding:22 }} onSubmit={e => e.preventDefault()}>
          <div className="col" style={{ gap:14 }}>
            <label className="fld"><span>نام</span><input className="inp" placeholder="نام شما" /></label>
            <label className="fld"><span>ایمیل</span><input className="inp" placeholder="email@example.com" /></label>
            <label className="fld"><span>پیام</span><textarea className="inp" rows={5} placeholder="پیام شما…"></textarea></label>
            <Button variant="gold">ارسال پیام</Button>
          </div>
        </form>
        <aside className="col" style={{ gap:12 }}>
          {[['comment','ایمیل','info@kooshanews.ir'],['broadcast','تلفن','۰۲۱-۹۱۰۰۰۰۰۰'],['globe','نشانی','تهران، خیابان آزادی']].map(([ic,t,v]) => (
            <div className="panel row" style={{ padding:16, gap:12, alignItems:'center' }} key={t}><Icon name={ic} size={20} style={{ color:'var(--gold)' }} /><div className="col" style={{ gap:2 }}><b style={{ fontSize:'var(--t-sm)' }}>{t}</b><span className="dim num" style={{ fontSize:'var(--t-sm)' }}>{v}</span></div></div>
          ))}
        </aside>
      </div>
    </main>
  );
}

function LivePage() {
  const L = D.live;
  return (
    <main className="wrap-max" style={{ paddingTop:18 }} data-wbc-module="live" data-wbc-bind="page">
      <nav className="crumbs"><a href="#/">خانه</a><Icon name="chevLeft" size={13} /><span style={{ color:'var(--live)' }}>پخش زنده</span></nav>
      <header className="cat-page-head" style={{ '--cat':'var(--live)' }}>
        <span className="live-dot" style={{ background:'var(--live)', width:11, height:11 }}></span>
        <h1 style={{ fontSize:'var(--t-display)' }}>پخش زنده و آرشیو ویدیو</h1>
        <span className="sh-rule"></span>
        <span className="dim num" style={{ fontSize:'var(--t-sm)' }}>{L.onAir.viewers} بیننده</span>
      </header>
      <LiveStrip />
    </main>
  );
}

/* ---------- App + hash router ---------- */
function useHashRoute() {
  const [route, setRoute] = React.useState(() => window.location.hash || '#/');
  React.useEffect(() => {
    const on = () => { setRoute(window.location.hash || '#/'); window.scrollTo(0, 0); };
    window.addEventListener('hashchange', on);
    return () => window.removeEventListener('hashchange', on);
  }, []);
  return route;
}

/* ---------- AI / Tech news section (sourced from reputable AI sites) ---------- */
function AINews() {
  const items = D.aiNews || [];
  const lead = items[0]; const rest = items.slice(1);
  return (
    <section className="wrap-max sec" data-wbc-module="news" data-wbc-bind="aiNews">
      <div className="section-head">
        <Icon name="cpu" size={22} style={{ color:'var(--c-tech)' }} />
        <h2 style={{ fontSize:'var(--t-h2)' }}>{t('فناوری و هوش مصنوعی')}</h2>
        <span className="ai-auto"><Icon name="bolt" size={12} /> {t('به‌روزرسانی خودکار از منابع معتبر')}</span>
        <span className="sh-rule"></span>
        <a href="#/ai" className="cat-more" style={{ fontSize:'var(--t-xs)', color:'var(--text-3)' }}>{t('همه')}</a>
      </div>
      <div className="ai-grid">
        <a href={'#/news/'+lead.id} className="ai-lead" style={{ '--cat':'var(--c-tech)' }}>
          <span className="ai-lead-thumb"><Icon name="cpu" size={52} style={{ color:'var(--c-tech)', opacity:.5 }} /></span>
          <div className="col" style={{ gap:8, padding:'4px 2px' }}>
            <span className="cat-badge" style={{ '--cat':'var(--c-tech)' }}>{t(lead.tag)}</span>
            <h3 style={{ fontSize:'var(--t-h3)', lineHeight:1.4 }}>{t(lead.title)}</h3>
            <span className="ai-src"><Icon name="link" size={12} /> {lead.source} · {t(lead.time)}</span>
          </div>
        </a>
        <ul className="ai-list">
          {rest.map(n => (
            <li key={n.id}><a href={'#/news/'+n.id} className="ai-row">
              <span className="ai-tag">{t(n.tag)}</span>
              <span className="ai-row-title">{t(n.title)}</span>
              <span className="ai-src"><Icon name="link" size={11} /> {n.source} · {t(n.time)}</span>
            </a></li>
          ))}
        </ul>
      </div>
    </section>
  );
}

/* ---------- Subscription + coin wallet (webcasting coin module) ---------- */
function Subscribe() {
  const C = D.coin; const S = D.subscription;
  return (
    <section className="wrap-max sec" id="subscribe" data-wbc-module="coin" data-wbc-bind="subscription">
      <div className="section-head">
        <Icon name="coin" size={22} style={{ color:'var(--gold)' }} />
        <h2 style={{ fontSize:'var(--t-h2)' }}>{t('اشتراک ویژه و کیف پول سکه')}</h2>
        <span className="sh-rule"></span>
        <span className="coin-bal"><Icon name="coin" size={15} /> {t('موجودی')}: <b className="num">{tnum(C.balance.toLocaleString('fa'))}</b> {t('سکه')}</span>
      </div>

      <div className="sub-grid">
        {/* tiers */}
        <div className="tiers">
          {S.tiers.map(tr => (
            <div className={'tier' + (tr.hot ? ' hot' : '')} key={tr.key}>
              {tr.hot && <span className="tier-flag">{t('پیشنهاد ویژه')}</span>}
              <div className="tier-name">{t(tr.name)}</div>
              <div className="tier-price num">{t(tr.price)}</div>
              <ul className="tier-feats">
                {tr.feats.map(f => <li key={f}><Icon name="check" size={14} style={{ color:'var(--gold)' }} />{t(f)}</li>)}
              </ul>
              <Button variant={tr.hot ? 'gold' : 'ghost'} block icon={tr.coins ? 'coin' : 'user'}>{t(tr.cta)}</Button>
            </div>
          ))}
        </div>

        {/* wallet */}
        <aside className="wallet" data-wbc-bind="wallet">
          <div className="wallet-head">
            <div>
              <span className="dim" style={{ fontSize:'var(--t-xs)' }}>{t('موجودی کیف پول')}</span>
              <div className="wallet-bal num"><Icon name="coin" size={22} style={{ color:'var(--gold)' }} /> {tnum(C.balance.toLocaleString('fa'))}</div>
              <span className="dim num" style={{ fontSize:'var(--t-xs)' }}>≈ {tnum(C.rial)} {t('ریال')}</span>
            </div>
            <span className="wbind-tag">coin · مخزن</span>
          </div>
          <div className="coin-packs">
            {C.packages.map(p => (
              <button className={'coin-pack' + (p.tag==='محبوب'?' best':'')} key={p.id}>
                {p.tag && <span className="pack-tag">{t(p.tag)}</span>}
                <span className="pack-coins num"><Icon name="coin" size={15} style={{ color:'var(--gold)' }} /> {tnum(p.coins.toLocaleString('fa'))}</span>
                {p.bonus>0 && <span className="pack-bonus num">+{tnum(p.bonus.toLocaleString('fa'))} {t('هدیه')}</span>}
                <span className="pack-price num">{tnum(p.price)} ت</span>
              </button>
            ))}
          </div>
          <div className="unlocks">
            <span className="dim" style={{ fontSize:'var(--t-xs)' }}>{t('سکه‌ها را خرج کنید:')}</span>
            {C.unlocks.map(u => (
              <div className="unlock-row" key={u.title}>
                <span className="unlock-ic"><Icon name={u.icon} size={14} /></span>
                <span className="unlock-title">{t(u.title)}</span>
                <span className="unlock-cost num"><Icon name="coin" size={12} style={{ color:'var(--gold)' }} /> {tnum(u.cost.toLocaleString('fa'))}<i> / {t(u.note)}</i></span>
              </div>
            ))}
          </div>
        </aside>
      </div>
    </section>
  );
}

/* ---------- Single-article page ---------- */
function findArticle(id) {
  const D2 = D;
  const pools = [[D2.lead], D2.important, D2.latest, D2.analysis, D2.aiNews, ...Object.values(D2.byCategory || {})];
  for (const p of pools) { const f = (p || []).find(x => x.id === id); if (f) return f; }
  return D2.lead;
}
function ArticlePage({ id }) {
  const a = findArticle(id);
  const cat = a.category || 'tech';
  const hue = HUE[cat] || 'var(--c-tech)';
  const body = a.lead
    ? [t(a.lead), t('بر پایهٔ گزارش‌های دریافتی، این خبر به‌صورت خودکار از منبع اصلی استخراج و بازنویسی شده است. جزئیات بیشتر در حال پیگیری است.'), t('کارشناسان معتقدند پیامدهای این رویداد در روزهای آینده روشن‌تر خواهد شد؛ کوشانیوز این موضوع را دنبال می‌کند.')]
    : [t('متن کامل این خبر در دسترس است.')];
  const related = (D.latest || []).filter(x => x.id !== id).slice(0, 4);
  const socials = ['telegram','instagram','x','whatsapp','link'];
  const sIcon = { telegram:'share', instagram:'image', x:'share', whatsapp:'comment', link:'link' };
  return (
    <main className="wrap-max article" style={{ paddingTop:18 }} data-wbc-module="news" data-wbc-bind="article">
      <div className="art-grid">
        <article>
          <a href={'#/cat/'+cat} className="cat-badge" style={{ '--cat':hue }}>{t(CAT[cat] || 'خبر')}</a>
          <h1 className="display art-title">{t(a.title)}</h1>
          <div className="art-meta">
            <span className="row" style={{ gap:5 }}><Icon name="clock" size={14} />{t(a.time || 'به‌تازگی')}</span>
            {a.views && <span className="row" style={{ gap:5 }}><Icon name="eye" size={14} />{t(a.views)} {t('بازدید')}</span>}
            {a.source && <span className="row" style={{ gap:5 }}><Icon name="link" size={13} /> {t('منبع:')} <code>{a.source}</code></span>}
            {a.author && <span className="row" style={{ gap:5 }}><Icon name="user" size={13} />{t(a.author)}</span>}
          </div>
          <div className="art-cover" style={{ background:`linear-gradient(135deg, color-mix(in srgb, ${hue} 30%, var(--bg-2)), var(--bg-1))` }}>
            <Icon name={cat==='tech'?'cpu':'coin'} size={64} style={{ color:hue, opacity:.5 }} />
          </div>
          <div className="art-body">
            {body.map((p,i) => <p key={i}>{p}</p>)}
          </div>
          <div className="art-share">
            <span className="dim" style={{ fontSize:'var(--t-sm)' }}>{t('اشتراک‌گذاری:')}</span>
            {socials.map(s => <button key={s} className="share-btn" aria-label={s}><Icon name={sIcon[s]} size={16} /></button>)}
            <span className="art-src-note"><Icon name="link" size={12} /> {t('بازنشر با ذکر منبع کوشانیوز')}</span>
          </div>
        </article>
        <aside className="col" style={{ gap:20 }}>
          <div className="panel" style={{ padding:18 }} data-wbc-module="markets" data-wbc-bind="prices">
            <b style={{ fontSize:'var(--t-h4)' }}>{t('دادهٔ بازار')}</b>
            <div style={{ marginTop:10 }}>
              {D.markets.slice(0,4).map(m => (
                <MarketStat key={m.symbol} variant="row" icon={m.type==='crypto'?'cpu':m.type==='currency'?'dollar':'coin'} asset={{ label:t(m.label), value:tnum(m.value), change:m.change }} />
              ))}
            </div>
          </div>
          <div className="panel" style={{ padding:18 }}>
            <div className="section-head" style={{ marginBottom:12 }}><Icon name="fire" size={16} style={{ color:'var(--c-energy)' }} /><b style={{ fontSize:'var(--t-h4)' }}>{t('مرتبط')}</b></div>
            <div className="col" style={{ gap:2 }}>
              {related.map(r => (
                <a key={r.id} href={'#/news/'+r.id} className="tl-item" style={{ padding:'10px 2px' }}>
                  <span className="tl-bullet" style={{ background:HUE[r.category] }}></span>
                  <span className="col" style={{ gap:3 }}><span style={{ fontSize:'var(--t-sm)', lineHeight:1.5 }}>{t(r.title)}</span><span style={{ fontSize:'var(--t-xs)', color:'var(--text-3)' }}>{t(r.time)}</span></span>
                </a>
              ))}
            </div>
          </div>
        </aside>
      </div>
    </main>
  );
}

function HomePage() {
  return (
    <main>
      <Hero />
      <div className="wrap-max sec"><AdSlot spec={D.ads.leaderboard} /></div>
      <MarketWatch />
      <Latest />
      <CategoryBlocks />
      <AINews />
      <LiveStrip />
      <Subscribe />
      <Digest />
    </main>
  );
}

/* ---------- Auth modal (login / special-subscription signup) ---------- */
function AuthModal({ mode, onClose, onSwitch }) {
  const [sent, setSent] = React.useState(false);
  React.useEffect(() => { setSent(false); }, [mode]);
  if (!mode) return null;
  const isSignup = mode === 'signup';
  return (
    <div className="auth-overlay" onClick={onClose}>
      <div className="auth-card" onClick={e => e.stopPropagation()} data-wbc-module="users" data-wbc-bind="auth">
        <button className="auth-x" onClick={onClose} aria-label="بستن"><Icon name="close" size={18} /></button>
        <div className="auth-head">
          <BrandLogo size={34} />
          <h3 className="display">{isSignup ? 'اشتراک ویژهٔ کوشانیوز' : 'ورود به حساب'}</h3>
          <p className="auth-sub">
            {isSignup
              ? 'برای دریافت خبرهای ویژه، تحلیل‌ها و خبرنامهٔ بازار عضو شوید.'
              : 'با شمارهٔ موبایل، کد ورود و رمز عبور وارد شوید.'}
          </p>
        </div>

        <div className="auth-body">
          {isSignup && (
            <label className="auth-field">
              <span>نام و نام خانوادگی</span>
              <input type="text" placeholder="مثلاً سارا کاویانی" />
            </label>
          )}
          <label className="auth-field">
            <span>موبایل یا ایمیل</span>
            <input type="text" placeholder="۰۹۱۲۳۴۵۶۷۸۹" dir="ltr" />
          </label>

          <label className="auth-field">
            <span>کد ورود (پیامک‌شده)</span>
            <div className="auth-code">
              <input type="text" placeholder="— — — — — —" dir="ltr" maxLength={6} />
              <button className="auth-code-btn" onClick={() => setSent(true)}>
                {sent ? 'کد ارسال شد ✓' : 'ارسال کد'}
              </button>
            </div>
          </label>

          <label className="auth-field">
            <span>رمز عبور</span>
            <input type="password" placeholder="••••••••" dir="ltr" />
          </label>

          <Button variant="gold" icon="arrow" block>{isSignup ? 'ثبت‌نام و فعال‌سازی اشتراک' : 'ورود'}</Button>

          <div className="auth-alt">
            <span>روش جایگزین:</span>
            <button className="auth-link">ورود با گوگل</button>
          </div>
        </div>

        <div className="auth-foot">
          {isSignup ? (
            <span>حساب دارید؟ <button className="auth-link" onClick={() => onSwitch('login')}>وارد شوید</button></span>
          ) : (
            <span>هنوز عضو نیستید؟ <button className="auth-link" onClick={() => onSwitch('signup')}>اشتراک ویژه بگیرید</button></span>
          )}
        </div>
        <div className="auth-note"><Icon name="lock" size={12} /> ورود امن مطابق سامانهٔ یکپارچهٔ وب‌کستینگ — کد و رمز هم‌زمان</div>
      </div>
    </div>
  );
}

function App() {
  const [theme, setTheme] = React.useState('dark');
  const [auth, setAuth] = React.useState(null);
  const [, force] = React.useReducer(x => x + 1, 0);
  const lang = window.KI18N ? window.KI18N.getLang() : 'fa';
  const route = useHashRoute();
  React.useEffect(() => {
    if (theme === 'light') document.documentElement.setAttribute('data-theme','light');
    else document.documentElement.removeAttribute('data-theme');
  }, [theme]);
  const toggleLang = () => { if (window.KI18N) window.KI18N.setLang(lang === 'fa' ? 'en' : 'fa'); force(); };
  let page;
  if (route.startsWith('#/cat/')) {
    const key = route.slice('#/cat/'.length);
    page = <CategoryPage catKey={key} key={key} />;
  } else if (route.startsWith('#/news/')) {
    const id = route.slice('#/news/'.length);
    page = <ArticlePage id={id} key={id} />;
  } else if (route === '#/ai') page = <main><AINews /></main>;
  else if (route === '#/subscribe') page = <main><Subscribe /></main>;
  else if (route === '#/about') page = <AboutPage />;
  else if (route === '#/contact') page = <ContactPage />;
  else if (route === '#/live') page = <LivePage />;
  else page = <HomePage />;
  return (
    <React.Fragment key={lang}>
      <Header theme={theme} onTheme={() => setTheme(t => t === 'dark' ? 'light' : 'dark')} onAuth={() => { if (window.WCAuth) window.WCAuth.open(); else setAuth('login'); }} lang={lang} onLang={toggleLang} />
      {page}
      <Footer />
      <AuthModal mode={auth} onClose={() => setAuth(null)} onSwitch={setAuth} />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);