/* @jsx React.createElement */

function SignalIntelligence() {
  const accounts = [
    { rank: "01", name: "ramp.com",        why: "VP RevOps hired. New sheriff signal, t-9d.",      score: "98" },
    { rank: "02", name: "linear.app",      why: "Series C announced. Expansion bucket, t-2d.",      score: "94" },
    { rank: "03", name: "vercel.com",      why: "Sequencer instance dormant 14d. Leaky bucket.",     score: "91" },
    { rank: "04", name: "retool.com",      why: "3 SDRs added to prospecting tool. Expansion bucket.",     score: "88" },
    { rank: "05", name: "browserco.com",   why: "Job spec: GTM Engineer. Custom: ICP-fit shift.",   score: "84" },
    { rank: "06", name: "warp.dev",        why: "New CRO posted. New sheriff signal, t-1d.",        score: "82" },
  ];
  return (
    <GtmosBlock
      headerLabel="SIGNAL"
      headerType="INTELLIGENCE"
      date="2026-04-30  ·  THU"
      hero={{ value: "47", amber: false, ctx: "<strong>Tier-1 accounts</strong> flagged today.<br/>Routed to your sequencer at 06:00 PT." , size: 88 }}
      footerType="signal intelligence"
      body={
        <div>
          {accounts.map((a) => (
            <div className="sig-row" key={a.rank}>
              <span className="rank">{a.rank}</span>
              <span>
                <div className="name">{a.name}</div>
                <div className="why">{a.why}</div>
              </span>
              <span className="bucket">
                {a.rank === "01" || a.rank === "06" ? "new sheriff" : a.rank === "02" || a.rank === "04" ? "expansion" : a.rank === "03" ? "leaky" : "custom"}
              </span>
              <span className="score">{a.score}</span>
            </div>
          ))}
        </div>
      }
    />
  );
}
window.SignalIntelligence = SignalIntelligence;