/* sections-a.jsx — Hero, News, Tools (Nav/Footer live in chrome.jsx) */
const { useState: useStateA, useMemo: useMemoA } = React;
const { COUNTERS, NEWS, TOOLS, TOOL_CATS, MODELS, FUNDING, TOOLS_FULL } = window.RADAR;

function Hero({ tweaks }) {
  return (
    <header className="hero" id="top">
      <div className="aurora">
        <div className="blob b1"></div><div className="blob b2"></div>
        <div className="blob b3"></div><div className="blob b4"></div>
      </div>
      {tweaks.particles !== 'off' && (
        <div className="hero-particles">
          <ParticleField density={tweaks.particles === 'dense' ? 1.5 : 1} />
        </div>
      )}
      <div className="hero-fade"></div>

      <div className="hero-inner">
        <span className="hero-badge">
          <span className="tag">LIVE</span>
          <span className="live-dot"></span>
          Tracking {COUNTERS.find(c => /launch/i.test(c.k))?.v || '—'} launches, {MODELS.length} models &amp; {FUNDING.length} funding rounds today
        </span>
        <h1>Everything happening in AI. <span className="grad-text">One place.</span></h1>
        <p className="hero-sub">
          Track AI tools, models, launches, GitHub repositories, research papers, startup funding,
          free credits and trends — in real time, across the entire ecosystem.
        </p>
        <div className="hero-ctas">
          <a className="btn primary lg" href="#news">Explore AI</a>
          <a className="btn ghost lg" href="#models">Compare models</a>
        </div>
      </div>

      <div className="counters">
        <div className="counters-grid">
          {COUNTERS.map((c) => (
            <div className="counter" key={c.k}>
              <div className="cv"><CountUp to={c.v} /></div>
              <div className="ck">{c.k}</div>
            </div>
          ))}
        </div>
      </div>
    </header>
  );
}

/* ---------------- NEWS ---------------- */
const NEWS_TABS = ['All', 'Models', 'Funding', 'Research', 'Launches'];

function NewsSection() {
  const [tab, setTab] = useStateA('All');
  const list = useMemoA(() => NEWS.filter((n) => tab === 'All' || n.cat === tab), [tab]);
  const feat = list[0];
  const rest = list.slice(1, 5);
  return (
    <section className="section" id="news">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="sec-eyebrow grad-text"><span className="dot"></span>Today in AI</span>
          <h2>The signal, without the scroll.</h2>
          <p>Every launch, paper, model drop and mega-round — summarized, scored for momentum, and refreshed around the clock.</p>
          <a className="more" href="news.html">Open the full news feed →</a>
        </div>
        <div className="pills reveal">
          {NEWS_TABS.map((t) => (
            <button key={t} className={'pill' + (tab === t ? ' on' : '')} onClick={() => setTab(t)}>{t}</button>
          ))}
        </div>
        {feat ? (
          <div className="news-grid reveal">
            <article className="news-feat">
              <div className="news-meta">
                <span className={'cat-chip cat-' + feat.cat}>{feat.cat}</span>
                <span className="src">{feat.src}</span><span>·</span><span>{feat.time}</span>
                <span className="trend-score">▲ {feat.trend} trend</span>
              </div>
              <h3>{feat.title}</h3>
              <p className="sum">{feat.sum}</p>
              <div style={{ marginTop: 'auto', paddingTop: 22 }}>
                <a className="btn ghost" href="#news" style={{ padding: '9px 18px' }}>Read briefing</a>
              </div>
            </article>
            <div className="news-list">
              {rest.map((n) => (
                <article className="news-item" key={n.title}>
                  <div className="news-meta">
                    <span className={'cat-chip cat-' + n.cat}>{n.cat}</span>
                    <span className="src">{n.src}</span><span>·</span><span>{n.time}</span>
                    <span className="trend-score">▲ {n.trend}</span>
                  </div>
                  <h4>{n.title}</h4>
                </article>
              ))}
            </div>
          </div>
        ) : null}
      </div>
    </section>
  );
}

/* ---------------- TOOLS ---------------- */
function ToolsSection() {
  const [cat, setCat] = useStateA('All');
  const [q, setQ] = useStateA('');
  const list = useMemoA(() => TOOLS.filter((t) => {
    if (cat !== 'All' && t.cat !== cat) return false;
    if (q && !(t.name + ' ' + t.desc + ' ' + t.cat).toLowerCase().includes(q.toLowerCase())) return false;
    return true;
  }), [cat, q]);
  return (
    <section className="section alt" id="tools">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="sec-eyebrow grad-text"><span className="dot"></span>Tool directory</span>
          <h2>{TOOLS_FULL?.length?.toLocaleString() || TOOLS.length.toLocaleString()} AI tools. Actually organized.</h2>
          <p>Every tool rated, priced and categorized — with alternatives, traffic estimates and real reviews.</p>
          <a className="more" href="tools.html">Browse the full directory →</a>
        </div>
        <div className="tools-bar reveal">
          <div className="search">
            <span className="ic">⌕</span>
            <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search tools…" />
          </div>
          <div className="pills" style={{ marginBottom: 0 }}>
            {TOOL_CATS.map((c) => (
              <button key={c} className={'pill' + (cat === c ? ' on' : '')} onClick={() => setCat(c)}>{c}</button>
            ))}
          </div>
        </div>
        <div className="tool-grid reveal">
          {list.map((t) => (
            <article className="tool-card" key={t.name}>
              <div className="tool-top">
                <div className="tool-logo" style={{ background: `linear-gradient(135deg, hsl(${t.hue} 80% 55%), hsl(${t.hue + 40} 75% 60%))` }}>{t.glyph}</div>
                <div>
                  <div className="tool-name">{t.name}</div>
                  <div className="tool-cat">{t.cat} · {t.users} users</div>
                </div>
              </div>
              <p className="tool-desc">{t.desc}</p>
              <div className="tool-foot">
                <span className="tool-rating"><span className="star">★</span>{t.rating.toFixed(1)}</span>
                <span className="tool-price">{t.price}</span>
              </div>
            </article>
          ))}
          {list.length === 0 && (
            <p style={{ gridColumn: '1/-1', color: 'var(--ink-3)', textAlign: 'center', padding: '40px 0' }}>
              No tools match "{q}" in {cat}.
            </p>
          )}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, NewsSection, ToolsSection });