/* @jsx React.createElement */

function TamMap() {
  return (
    <GtmosBlock
      headerLabel="TAM"
      headerType="MAP  ·  Q2 2026"
      date="2026-04-01  ·  WED"
      hero={{ value: "31,420", amber: false, size: 108, ctx: "<strong>Addressable accounts</strong> in the universe.<br/>+ 9,200 since Q1. ICP-fit refreshed." }}
      footerType="tam map"
      body={
        <div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:0,borderTop:'1px solid #1F1F28',borderBottom:'1px solid #1F1F28'}}>
            <div style={{padding:'18px 20px 18px 0',borderRight:'1px solid #1F1F28'}}>
              <div style={{fontFamily:'var(--font-mono)',fontSize:10,letterSpacing:'0.1em',textTransform:'uppercase',color:'#6E6B66'}}>added</div>
              <div style={{fontFamily:'var(--font-mono)',fontWeight:300,fontSize:42,color:'#C2410C',lineHeight:1.05,marginTop:8}}>+9,200</div>
              <div style={{fontFamily:'var(--font-sans)',fontSize:12,color:'#A8A5A0',marginTop:6}}>net-new this quarter</div>
            </div>
            <div style={{padding:'18px 20px',borderRight:'1px solid #1F1F28'}}>
              <div style={{fontFamily:'var(--font-mono)',fontSize:10,letterSpacing:'0.1em',textTransform:'uppercase',color:'#6E6B66'}}>churned</div>
              <div style={{fontFamily:'var(--font-mono)',fontWeight:300,fontSize:42,color:'#A8A5A0',lineHeight:1.05,marginTop:8}}>&minus;1,840</div>
              <div style={{fontFamily:'var(--font-sans)',fontSize:12,color:'#A8A5A0',marginTop:6}}>icp-fit drop or shutdown</div>
            </div>
            <div style={{padding:'18px 0 18px 20px'}}>
              <div style={{fontFamily:'var(--font-mono)',fontSize:10,letterSpacing:'0.1em',textTransform:'uppercase',color:'#6E6B66'}}>icp-fit shift</div>
              <div style={{fontFamily:'var(--font-mono)',fontWeight:300,fontSize:42,color:'#A8A5A0',lineHeight:1.05,marginTop:8}}>2,016</div>
              <div style={{fontFamily:'var(--font-sans)',fontSize:12,color:'#A8A5A0',marginTop:6}}>re-tiered, same universe</div>
            </div>
          </div>
          <div style={{marginTop:18}}>
            <table>
              <thead><tr>
                <th>tier</th>
                <th className="right">accounts</th>
                <th className="right">delta</th>
                <th className="right">share</th>
              </tr></thead>
              <tbody>
                <tr><td style={{fontFamily:'var(--font-mono)'}}>tier 1 &middot; sheriff-ready</td><td className="num-cell">3,142</td><td className="num-cell am">+412</td><td className="num-cell muted">10.0%</td></tr>
                <tr><td style={{fontFamily:'var(--font-mono)'}}>tier 2 &middot; expansion</td><td className="num-cell">9,820</td><td className="num-cell muted">+1,210</td><td className="num-cell muted">31.3%</td></tr>
                <tr><td style={{fontFamily:'var(--font-mono)'}}>tier 3 &middot; nurture</td><td className="num-cell">18,458</td><td className="num-cell muted">+5,738</td><td className="num-cell muted">58.7%</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      }
    />
  );
}
window.TamMap = TamMap;