/* page-enterprise.jsx — 企业活动集合页 */

function EnterprisePage() {
  const db = useKadaDB();
  const D = KSITE.enterprise, M = KSITE.pageMeta.enterprise;
  const allEvents = db.events('e');
  const [type, setType] = React.useState('全部');
  const list = allEvents.filter((e) => type === '全部' || e.type === type);
  const feat = list.find((e) => e.feat) || list[0];
  const rest = list.filter((e) => e !== feat);

  return (
    <React.Fragment>
      <div className="ka-stage">
        <Backdrop particles={5} />
        <div className="kc">
          <header className="pb">
            <span className="eyebrow"><span className="pulse" /> {M.kicker}</span>
            <h1>追踪头部企业的<span className="ac">每一次</span>动态</h1>
            <p>{M.desc}</p>
          </header>
        </div>
      </div>

      <div className="kc">
        <div className="flt" style={{ margin: '6px 0 30px' }}>
          <span className="lbl">类型</span>
          {D.types.map((tp) => <button key={tp} className={'fchip nm-rise-sm' + (type === tp ? ' on' : '')} onClick={() => setType(tp)}>{tp}</button>)}
        </div>

        <div className="ka-cols">
          <div>
            {feat && (
              <Reveal>
                <a className="en-feat nm-rise nm-press" href={'#event/e' + allEvents.indexOf(feat)}>
                  <div className="lead">
                    <div className="co">{feat.company} · {feat.type}</div>
                    <h3>{feat.title}</h3>
                    <div className="sub">
                      <span className="muted">{feat.mode}</span>
                      <span className="muted mono">{feat.city}</span>
                    </div>
                  </div>
                  <div className="when">
                    <div className="big">{feat.date}</div>
                    <div className="muted mono" style={{ fontSize: 12, marginTop: 6 }}>2026</div>
                    <span className="join-link" style={{ marginTop: 18 }}>报名 <Arrow size={13} /></span>
                  </div>
                </a>
              </Reveal>
            )}
            <div className="list-head" style={{ marginTop: 8 }}>
              <h2 className="sec-title" style={{ fontSize: 22 }}>更多活动</h2>
              <span className="count">{list.length} 场</span>
            </div>
            <div className="elist">
              {rest.map((e, i) => (
                <Reveal key={e.id || e.title} delay={i * 60}>
                  <a className="erow nm-rise nm-press" href={'#event/e' + allEvents.indexOf(e)}>
                    <span className="d">{e.date}<span>2026</span></span>
                    <div className="mid">
                      <h3>{e.title}</h3>
                      <div className="sub">
                        <span className="tbadge nm-sink-sm">{e.type}</span>
                        <span>{e.company}</span>
                        <span className="mono">{e.mode === '线上' ? '线上' : e.mode + ' · ' + e.city}</span>
                      </div>
                    </div>
                    <div className="end">
                      <span className="join-link">了解详情 <Arrow size={13} /></span>
                    </div>
                  </a>
                </Reveal>
              ))}
            </div>
          </div>

          <aside className="ka-side">
            <div className="side-card nm-rise">
              <h4>活跃企业 <span className="count">{D.companies.length}</span></h4>
              {D.companies.map((c) => (
                <a key={c.name} className="org" href="#">
                  <span className="ava nm-sink-sm">{c.en.charAt(0)}</span>
                  <span className="meta"><div className="n">{c.name}</div><div className="s">{c.count} 场活动</div></span>
                  <span className="arrow-dot"><Arrow /></span>
                </a>
              ))}
            </div>
            <div className="side-card nm-rise" style={{ textAlign: 'center' }}>
              <h4 style={{ justifyContent: 'center' }}>挂出企业活动</h4>
              <p className="muted" style={{ fontSize: 13.5, lineHeight: 1.6, margin: '0 0 18px' }}>不需要合作——企业方或社区成员都能把发布会、黑客松、招聘挂上来，让更多 AI 人看到。</p>
              <a href="#submit_event/e" className="btn btn-accent" style={{ width: '100%', justifyContent: 'center' }}>挂出活动 <Arrow /></a>
            </div>
          </aside>
        </div>
      </div>
    </React.Fragment>
  );
}

(window.__KADA_PAGES = window.__KADA_PAGES || {}).enterprise = { Comp: EnterprisePage, active: 'enterprise' };
if (!window.__KADA_SPA) {
  ReactDOM.createRoot(document.getElementById('root')).render(
    <KadaPage active="enterprise"><EnterprisePage /></KadaPage>
  );
}