// terminal-insights.jsx — Discovery / analytics tiles.
// Mirrors the screenshot's "Discover" + "Insights" tabs. Tiles route to
// Council page sections + the Compute Story video.

function InsightTile({ title, sub, icon, color, onClick, href, badge }) {
  const inner = (
    <>
      <div style={{
        width: 44, height: 44, borderRadius: 12,
        background: color + '1a', border: `1px solid ${color}55`,
        color, display: 'flex', alignItems: 'center', justifyContent: 'center',
        marginBottom: 12,
      }}>{icon}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <div style={{ fontFamily: GE, fontSize: 15, fontWeight: 600, color: TM.text, letterSpacing: -0.2 }}>{title}</div>
        {badge && <Pill color={color} border={color}>{badge}</Pill>}
      </div>
      <div style={{ marginTop: 4, fontFamily: GE, fontSize: 12, color: TM.muted, lineHeight: 1.5, letterSpacing: -0.05 }}>{sub}</div>
    </>
  );
  const style = {
    textAlign: 'left', background: TM.surfaceHi, border: `1px solid ${TM.border}`,
    borderRadius: 12, padding: 16,
    display: 'flex', flexDirection: 'column',
  };
  if (href) {
    return <a href={href} style={style} target={href.startsWith('http') ? '_blank' : undefined} rel="noopener">{inner}</a>;
  }
  return <button onClick={onClick} style={style}>{inner}</button>;
}

function InsightsScreen() {
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflowY: 'auto' }} className="tx-scroll">
      <TopBar title="Insights"
        right={<AIButton/>}/>

      {/* Hero — daily Council status */}
      <div style={{
        margin: '16px 16px 0', padding: '16px 18px',
        background: `linear-gradient(135deg, ${TM.cyanSoft}, rgba(40,35,155,0.10))`,
        border: `1px solid ${TM.cyan}55`, borderRadius: 12,
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          fontFamily: GM, fontSize: 10, color: TM.cyan, letterSpacing: 1.2, fontWeight: 600,
        }}>
          <span style={{ width: 7, height: 7, borderRadius: 4, background: TM.green, animation: 'pulse-soft 1.6s ease-out infinite' }}/>
          COUNCIL ONLINE · 25 / 25 SIGNED TODAY
        </div>
        <div style={{ marginTop: 10, fontFamily: GE, fontSize: 17, fontWeight: 600, color: TM.text, letterSpacing: -0.3, lineHeight: 1.3 }}>
          Today's conviction is high. Three signals cleared above 90%.
        </div>
        <div style={{ marginTop: 6, fontFamily: GE, fontSize: 12.5, color: TM.muted, lineHeight: 1.5 }}>
          NVDA · long · 0.92 · cleared 23/25. BTC · long · 0.88 · cleared 22/25. SPY · long · 0.91 · cleared 24/25.
        </div>
      </div>

      <SectionHeader title="The Council" action="See all"/>
      <div style={{ padding: '0 16px', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
        <InsightTile
          title="The 25 Agents"
          sub="See every verifier, their stake, accuracy, and the wallet address each one signs with."
          color={TM.cyan} badge="LIVE"
          icon={<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.6"/><circle cx="12" cy="12" r="3" fill="currentColor"/></svg>}
          href="council.html#roster"/>
        <InsightTile
          title="Agreement Matrix"
          sub="25 × 25 heatmap proving the verifiers don't vote in lockstep."
          color={TM.violet}
          icon={<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" strokeWidth="1.6"/><line x1="3" y1="9" x2="21" y2="9" stroke="currentColor" strokeWidth="1.6"/><line x1="3" y1="15" x2="21" y2="15" stroke="currentColor" strokeWidth="1.6"/><line x1="9" y1="3" x2="9" y2="21" stroke="currentColor" strokeWidth="1.6"/><line x1="15" y1="3" x2="15" y2="21" stroke="currentColor" strokeWidth="1.6"/></svg>}
          href="council.html#matrix"/>
        <InsightTile
          title="Heartbeat"
          sub="Today's nonce + 25 signed responses. The 30-day calendar shows the platform's pulse."
          color={TM.green}
          icon={<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M3 12h4l2-7 4 14 2-7h6" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>}
          href="council.html#heartbeat"/>
        <InsightTile
          title="Slashing Log"
          sub="Public ledger of every wrong vote, with the on-chain slash tx."
          color={TM.red}
          icon={<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M12 3l9 5v6c0 5-4 9-9 9s-9-4-9-9V8l9-5z" stroke="currentColor" strokeWidth="1.6" fill="none"/></svg>}
          href="council.html#slashing"/>
      </div>

      <SectionHeader title="Verify it yourself" action="Docs"/>
      <div style={{ padding: '0 16px', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
        <InsightTile
          title="Compute Proof"
          sub="Real GPU dispatcher REST contract. Pinned to commit 5e504bfd."
          color={TM.cyan}
          icon={<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect x="3" y="6" width="18" height="12" rx="2" stroke="currentColor" strokeWidth="1.6"/><line x1="7" y1="10" x2="11" y2="10" stroke="currentColor" strokeWidth="1.6"/><line x1="7" y1="14" x2="15" y2="14" stroke="currentColor" strokeWidth="1.6"/></svg>}
          href="https://github.com/QuantumSwarms/epochcore-cusv-dispatcher/tree/5e504bfd"/>
        <InsightTile
          title="The Story"
          sub="58-second animated explainer of the compute difference vs other platforms."
          color={TM.orange} badge="VIDEO"
          icon={<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M8 5l12 7-12 7V5z" stroke="currentColor" strokeWidth="1.6" fill="currentColor"/></svg>}
          href="compute-story.html"/>
      </div>

      <SectionHeader title="Pricing"/>
      <div style={{ padding: '0 16px 24px' }}>
        <a href="https://www.tradexchange.cc/#pricing" style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '14px 16px', background: TM.surfaceHi,
          border: `1px solid ${TM.border}`, borderRadius: 12,
        }}>
          <div>
            <div style={{ fontFamily: GE, fontSize: 14.5, fontWeight: 600, color: TM.text, letterSpacing: -0.2 }}>
              Picks of the Day · $10 / session
            </div>
            <div style={{ marginTop: 3, fontFamily: GE, fontSize: 12, color: TM.muted }}>
              5 picks, 92%+ conviction, valid through close.
            </div>
          </div>
          <span style={{ color: TM.orange, fontSize: 22 }}>›</span>
        </a>
      </div>
    </div>
  );
}

Object.assign(window, { InsightsScreen, InsightTile });