/* sections-b.jsx — Models, Repos, Credits, Funding, CTA (Footer lives in chrome.jsx) */
const { useState: useStateB, useMemo: useMemoB } = React;
const { MODELS, REPOS, CREDITS, FUNDING } = window.RADAR;

function fmtK(n) { return n >= 1000 ? (n / 1000).toFixed(1).replace(/\.0$/, '') + 'k' : String(n); }

/* ---------------- MODELS ---------------- */
const MODEL_COLS = [
  { key: 'score', label: 'Intelligence' },
  { key: 'in$', label: 'Input $/M', asc: true },
  { key: 'speed', label: 'Tok/s' },
];

function ModelsSection() {
  const [sort, setSort] = useStateB('score');
  const col = MODEL_COLS.find((c) => c.key === sort);
  const list = useMemoB(() => [...MODELS].sort((a, b) => col.asc ? a[sort] - b[sort] : b[sort] - a[sort]), [sort]);
  const maxScore = 100;
  return (
    <section className="section" id="models">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="sec-eyebrow grad-text"><span className="dot"></span>Model hub</span>
          <h2>Every frontier model, side by side.</h2>
          <p>Benchmarks, context windows, pricing and speed — updated with every release. Click a column to re-rank.</p>
          <a className="more" href="models.html">Open the full model hub →</a>
        </div>
        <div className="model-table reveal">
          <div className="mt-row head">
            <span style={{ fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 600, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>Model</span>
            <button className={'mt-c-ctx'} style={{ cursor: 'default' }}>Context</button>
            <button className={sort === 'in$' ? 'on' : ''} onClick={() => setSort('in$')}>Input $/M {sort === 'in$' ? '↑' : ''}</button>
            <button className={sort === 'score' ? 'on' : ''} onClick={() => setSort('score')}>Intelligence {sort === 'score' ? '↓' : ''}</button>
            <button className={'mt-c-speed ' + (sort === 'speed' ? 'on' : '')} onClick={() => setSort('speed')}>Tok/s {sort === 'speed' ? '↓' : ''}</button>
          </div>
          {list.map((m) => (
            <div className="mt-row" key={m.name}>
              <div className="m-id">
                <div className="m-dot" style={{ background: m.sat === 0 ? '#1a1d29' : `linear-gradient(135deg, hsl(${m.hue} 75% 52%), hsl(${m.hue + 36} 70% 58%))` }}>
                  {m.name[0]}
                </div>
                <div>
                  <div className="m-name">{m.name}</div>
                  <div className="m-org">{m.org}</div>
                </div>
              </div>
              <div className="m-num mt-c-ctx">{m.ctx} <small>tokens</small></div>
              <div className="m-num">${m.in$.toFixed(2)} <small>/ ${m.out$.toFixed(0)} out</small></div>
              <div className="score-bar">
                <div className="score-track"><div className="score-fill" style={{ width: `${(m.score / maxScore) * 100}%` }}></div></div>
                <span className="score-val">{m.score.toFixed(1)}</span>
              </div>
              <div className="m-num mt-c-speed">{m.speed} <small>tok/s</small></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- REPOS ---------------- */
function ReposSection() {
  const colors = ['#2563eb', '#7c3aed', '#06b6d4', '#10b981', '#db2777', '#f59e0b'];
  return (
    <section className="section alt" id="repos">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="sec-eyebrow grad-text"><span className="dot"></span>GitHub AI radar</span>
          <h2>Watch the breakouts happen.</h2>
          <p>Star velocity across 142k tracked AI repositories — agents, MCP servers, inference engines and whatever ships tonight.</p>
          <a className="more" href="github.html">Open the GitHub radar →</a>
        </div>
        <div className="repo-grid reveal">
          {REPOS.map((r, i) => (
            <article className="repo-card" key={r.name}>
              <div className="repo-name"><span className="owner">{r.owner}/</span>{r.name}</div>
              <div className="repo-stats">
                <span className="repo-stars">★ {fmtK(r.stars)}</span>
                <span className="repo-delta">+{fmtK(r.today)} today</span>
              </div>
              <div className="repo-spark"><MiniSpark data={r.spark} color={colors[i % colors.length]} w={250} h={40} /></div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- CREDITS ---------------- */
function CreditsSection() {
  return (
    <section className="section" id="credits">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="sec-eyebrow grad-text"><span className="dot"></span>Free credits tracker</span>
          <h2>$735k in free AI compute, expiring soon.</h2>
          <p>Every cloud and lab credit program in one list — with eligibility, deadlines and live countdowns.</p>
        </div>
        <div className="credit-grid reveal">
          {CREDITS.map((c) => {
            const pct = Math.max(4, Math.round((c.days / c.max) * 100));
            const urgent = c.days <= 21;
            return (
              <article className="credit-card" key={c.org + c.program}>
                <div className="credit-top">
                  <div className="tool-logo" style={{ width: 40, height: 40, borderRadius: 11, fontSize: 16, background: `linear-gradient(135deg, hsl(${c.hue} 78% 52%), hsl(${c.hue + 40} 72% 58%))` }}>{c.glyph}</div>
                  <div>
                    <div className="tool-name" style={{ fontSize: 15 }}>{c.org}</div>
                    <div className="tool-cat">{c.program}</div>
                  </div>
                </div>
                <div className="credit-amt">{c.amount} <small>in credits</small></div>
                <div className="credit-who">{c.who}</div>
                <div className="credit-exp">
                  <div className="lbl"><span>Application window</span><b className={urgent ? 'urgent' : ''}>{c.days} days left</b></div>
                  <div className="exp-track"><div className={'exp-fill' + (urgent ? ' urgent' : '')} style={{ width: pct + '%' }}></div></div>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---------------- FUNDING ---------------- */
function FundingSection() {
  return (
    <section className="section alt" id="funding">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="sec-eyebrow grad-text"><span className="dot"></span>Startup intelligence</span>
          <h2>Follow the money.</h2>
          <p>Every AI funding round, acquisition and new unicorn — tracked the moment it's announced.</p>
        </div>
        <div className="fund-table reveal">
          <div className="fund-row head">
            <span>Company</span><span>Round</span><span>Raised</span>
            <span className="fund-c-val">Valuation</span><span className="fund-c-lead">Lead investor</span><span className="fund-c-when">When</span>
          </div>
          {FUNDING.map((f) => (
            <div className="fund-row" key={f.co}>
              <div>
                <div className="fund-co">{f.co}</div>
                <div className="fund-cat">{f.cat}</div>
              </div>
              <div><span className="round-chip">{f.round}</span></div>
              <div className="fund-amt">{f.amt}</div>
              <div className="fund-cell fund-c-val">{f.val}</div>
              <div className="fund-cell fund-c-lead">{f.lead}</div>
              <div className="fund-cell fund-c-when">{f.when}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- CTA + FOOTER ---------------- */
function CtaSection() {
  return (
    <section className="section" id="cta">
      <div className="wrap">
        <div className="cta reveal">
          <div className="aurora">
            <div className="blob b1"></div><div className="blob b2"></div><div className="blob b3"></div>
          </div>
          <h2>Stop refreshing twelve tabs.</h2>
          <p>One radar for the entire AI ecosystem — free while in beta. Set your interests and get a personalized daily briefing.</p>
          <div className="hero-ctas">
            <a className="btn primary lg" href="#top">Create your radar</a>
            <a className="btn ghost lg" href="#news">Browse today's signal</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer_unused_see_chrome() {
  return null;
}

Object.assign(window, { ModelsSection, ReposSection, CreditsSection, FundingSection, CtaSection });