/* home.jsx — 咔嗒Lab 首页 · 经典高级 / Apple 产品官网风 */

function Chev() { return <span className="chev">›</span>; }

/* lightweight "product shot" preview per module */
function Preview({ which }) {
  if (which === 'community') {
    const evs = KSITE.community.events.slice(0, 3);
    return (
      <div className="ahp">
        <div className="ahp-h"><span className="t">近期社区活动</span><span className="m">128 场进行中</span></div>
        {evs.map((e) => (
          <div className="ahp-row" key={e.title}>
            <span className="d">{e.date}</span>
            <span className="x"><div className="a">{e.title}</div><div className="b">{e.org}</div></span>
            <span className="ahp-chip">{e.mode === '线上' ? '线上' : e.city}</span>
          </div>
        ))}
      </div>
    );
  }
  if (which === 'enterprise') {
    const es = KSITE.enterprise.events.slice(0, 3);
    return (
      <div className="ahp">
        <div className="ahp-h"><span className="t">企业动态</span><span className="m">42 家企业</span></div>
        {es.map((e) => (
          <div className="ahp-row" key={e.title}>
            <span className="d">{e.date}</span>
            <span className="x"><div className="a">{e.title}</div><div className="b">{e.company}</div></span>
            <span className="ahp-chip">{e.type}</span>
          </div>
        ))}
      </div>
    );
  }
  if (which === 'demo') {
    const its = KSITE.demo.items.slice(0, 4);
    return (
      <div className="ahp">
        <div className="ahp-h"><span className="t">技术广场</span><span className="m">860+ 项目</span></div>
        <div className="ahp-grid">
          {its.map((it) => (
            <div className="ahp-mini" key={it.name}>
              <span className="cat"><i style={{ background: `linear-gradient(150deg, hsl(${it.hue} 62% 58%), hsl(${it.hue + 26} 60% 46%))` }} />{it.type}</span>
              <div className="nm">{it.name}</div>
              <div className="bl">{it.blurb}</div>
            </div>
          ))}
        </div>
      </div>
    );
  }
  // post
  const ps = KSITE.posts.feed.slice(0, 3);
  return (
    <div className="ahp">
      <div className="ahp-h"><span className="t">社区发帖</span><span className="m">实时更新</span></div>
      {ps.map((p) => (
        <div className="ahp-post" key={p.title}>
          <span className="av" style={{ background: `linear-gradient(150deg, hsl(${p.hue} 58% 58%), hsl(${p.hue + 24} 56% 48%))` }} />
          <span><div className="nm">{p.author} · {p.kind}</div><div className="tt">{p.title}</div></span>
        </div>
      ))}
    </div>
  );
}

const FEATURES = [
  { key: 'community', href: '#community', eyebrow: '社区活动', h: '行业里的每一个 AI 社区，一处尽览', sub: '聚合全行业的 Meetup、分享会、工作坊与线上直播，按城市与形式自由筛选，再也不错过任何一场。', stats: [['170', '合作社区'], ['128', '进行中活动']] },
  { key: 'enterprise', href: '#enterprise', eyebrow: '企业活动', h: '紧跟头部企业的每一次动态', sub: '发布会、黑客松、开放日与训练营，第一时间报名参与，与产业前沿同频。', stats: [['42', '活跃企业'], ['实时', '动态更新']] },
  { key: 'demo', href: '#demo', eyebrow: '技术广场', h: '看得懂的 AI 作品广场', sub: '用大白话介绍每一个模型、工具、Skill、数据集与 Agent——它能做什么、谁在用，让技术价值一目了然。', stats: [['860+', '在线项目'], ['12k+', '社区成员']] },
  { key: 'post', href: '#post', eyebrow: '社区发帖', h: '人人都是社区主理人', sub: '发布想法、作品与教程，提出问题、找到同行。让真正有价值的火花被更多人看到。', stats: [['5.4k', '累计帖子'], ['人人', '可发布']] },
];

function HeroOrbit() {
  const [on, setOn] = React.useState(false);
  return (
    <div className={'ah-orbit' + (on ? ' is-on' : '')} onMouseEnter={() => setOn(true)} onMouseLeave={() => setOn(false)} role="img" aria-label="咔嗒Lab 连接社区、企业、技术与创作者">
      <span className="ah-orbit-glow" />
      <svg className="ah-orbit-lines" viewBox="0 0 1000 460" preserveAspectRatio="none" aria-hidden="true">
        <line x1="500" y1="230" x2="130" y2="110" pathLength="1" /><line x1="500" y1="230" x2="870" y2="92" pathLength="1" />
        <line x1="500" y1="230" x2="200" y2="377" pathLength="1" /><line x1="500" y1="230" x2="800" y2="368" pathLength="1" />
      </svg>
      <a className="ah-node n1" href="#community"><span className="nd" />社区活动</a>
      <a className="ah-node n2" href="#enterprise"><span className="nd" />企业活动</a>
      <a className="ah-node n3" href="#demo"><span className="nd" />技术广场</a>
      <a className="ah-node n4" href="#post"><span className="nd" />社区发帖</a>
      <div className="ah-hub">
        <span className="ah-hub-ring" />
        <span className="ah-hub-label">咔嗒<span className="ah-hub-dot" />一下</span>
      </div>
    </div>
  );
}

function HomePage() {
  return (
    <div className="ah">
      {/* HERO */}
      <section className="ah-hero">
        <p className="ah-kicker">咔嗒Lab</p>
        <h1 className="ah-h1">咔嗒一下<br />连接整个 AI 世界</h1>
        <p className="ah-sub">面向全球 AI 社区、企业与开发者的交流平台。让真正有价值的技术思想、创新火花与全球红利，精准地发出属于它们的「咔嗒」声。</p>
        <div className="ah-links">
          <a className="link" href="#community">浏览社区活动 <Chev /></a>
          <a className="link" href="#auth">免费加入 <Chev /></a>
        </div>

        <HeroOrbit />
      </section>

      {/* FEATURE ROWS */}
      {FEATURES.map((f, i) => (
        <section className={'ah-feature' + (i % 2 ? ' alt flip' : '')} key={f.key}>
          <div className="inner">
            <div className="copy">
              <Reveal>
                <p className="eyebrow2">{f.eyebrow}</p>
                <h2>{f.h}</h2>
                <p className="fsub">{f.sub}</p>
                <div className="fstat">
                  {f.stats.map((s) => <div key={s[1]}><div className="v">{s[0]}</div><div className="l">{s[1]}</div></div>)}
                </div>
                <a className="link" href={f.href}>了解更多 <Chev /></a>
              </Reveal>
            </div>
            <Reveal className="shot" tag="div"><Preview which={f.key} /></Reveal>
          </div>
        </section>
      ))}

      {/* EVENTS STRIP */}
      <section className="ah-events">
        <div className="head">
          <h2>近期活动</h2>
          <a className="link" href="#community">查看全部 <Chev /></a>
        </div>
        <div className="ah-evgrid">
          {KSITE.community.events.slice(0, 3).map((e, i) => (
            <Reveal key={e.title} delay={i * 90}>
              <a className="ah-ev" href={'#event/c' + i}>
                <div className="top"><span className="date">{e.date}<span>{e.day}</span></span><span className="ahp-chip">{e.tag}</span></div>
                <h3>{e.title}</h3>
                <div className="org">{e.org} · {e.mode === '线上' ? '线上' : e.city}</div>
              </a>
            </Reveal>
          ))}
        </div>
      </section>

      {/* CLOSING CTA */}
      <section className="ah-cta">
        <h2>加入咔嗒Lab</h2>
        <p>与全球 AI 社区、企业与开发者一起，咔嗒一下，连接更大的世界。</p>
        <div className="btns">
          <a className="ah-btn ah-btn-primary" href="#auth">免费加入</a>
          <a className="ah-btn ah-btn-ghost" href="#demo">逛逛技术广场</a>
        </div>
      </section>
    </div>
  );
}

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