/* @jsx React.createElement */

function CascadeReport() {
  const sources = [
    { name: "firmographic-primary",  attempts: "12,400", hits: "8,210",  rate: "66.2%", cost: "$  41" },
    { name: "email-discovery",       attempts: " 4,190", hits: "3,002",  rate: "71.6%", cost: "$ 138" },
    { name: "tech-stack-detection",  attempts: " 2,810", hits: "1,840",  rate: "65.5%", cost: "$  62" },
    { name: "social-graph",          attempts: " 1,940", hits: "1,612",  rate: "83.0%", cost: "$ 197" },
    { name: "news-events",           attempts: " 1,620", hits: "1,011",  rate: "62.4%", cost: "$  88" },
    { name: "ml-resolution",         attempts: " 1,140", hits: "  712",  rate: "62.5%", cost: "$  46" },
  ];
  return (
    <GtmosBlock
      headerLabel="CASCADE"
      headerType="REPORT  ·  APR 2026"
      date="2026-05-01  ·  FRI"
      hero={{
        value: "$8,342",
        amber: true,
        size: 96,
        ctx: "<strong>Saved vs. single-source.</strong> April.<br/>16,387 records. 6 sources. Cascade-routed."
      }}
      footerType="cascade report"
      body={
        <div>
          {/* supporting numbers — secondary, below the headline savings */}
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:0,borderTop:'1px solid #1F1F28',borderBottom:'1px solid #1F1F28'}}>
            <div style={{padding:'16px 20px 16px 0',borderRight:'1px solid #1F1F28'}}>
              <div style={{fontFamily:'var(--font-mono)',fontSize:10,letterSpacing:'0.1em',textTransform:'uppercase',color:'#6E6B66'}}>cascade cost</div>
              <div style={{fontFamily:'var(--font-mono)',fontWeight:300,fontSize:32,color:'#F5F1EA',lineHeight:1.05,marginTop:8}}>$572</div>
              <div style={{fontFamily:'var(--font-sans)',fontSize:12,color:'#A8A5A0',marginTop:4}}>this month</div>
            </div>
            <div style={{padding:'16px 20px',borderRight:'1px solid #1F1F28'}}>
              <div style={{fontFamily:'var(--font-mono)',fontSize:10,letterSpacing:'0.1em',textTransform:'uppercase',color:'#6E6B66'}}>single-source</div>
              <div style={{fontFamily:'var(--font-mono)',fontWeight:300,fontSize:32,color:'#A8A5A0',lineHeight:1.05,marginTop:8}}>$8,914</div>
              <div style={{fontFamily:'var(--font-sans)',fontSize:12,color:'#A8A5A0',marginTop:4}}>same records, one vendor</div>
            </div>
            <div style={{padding:'16px 0 16px 20px'}}>
              <div style={{fontFamily:'var(--font-mono)',fontSize:10,letterSpacing:'0.1em',textTransform:'uppercase',color:'#6E6B66'}}>ratio</div>
              <div style={{fontFamily:'var(--font-mono)',fontWeight:300,fontSize:32,color:'#A8A5A0',lineHeight:1.05,marginTop:8}}>15.6&times;</div>
              <div style={{fontFamily:'var(--font-sans)',fontSize:12,color:'#A8A5A0',marginTop:4}}>cheaper per hit</div>
            </div>
          </div>

          {/* source breakdown — tertiary detail */}
          <div style={{marginTop:22}}>
            <div style={{fontFamily:'var(--font-mono)',fontSize:10,letterSpacing:'0.12em',textTransform:'uppercase',color:'#6E6B66',marginBottom:10}}>source breakdown</div>
            <table>
              <thead><tr>
                <th>source</th>
                <th className="right">attempts</th>
                <th className="right">hits</th>
                <th className="right">rate</th>
                <th className="right">cost</th>
              </tr></thead>
              <tbody>
                {sources.map(s => (
                  <tr key={s.name}>
                    <td style={{fontFamily:'var(--font-mono)'}}>{s.name}</td>
                    <td className="num-cell">{s.attempts}</td>
                    <td className="num-cell">{s.hits}</td>
                    <td className="num-cell">{s.rate}</td>
                    <td className="num-cell">{s.cost}</td>
                  </tr>
                ))}
                <tr>
                  <td style={{fontFamily:'var(--font-mono)',color:'#A8A5A0',paddingTop:14}}>total</td>
                  <td className="num-cell muted" style={{paddingTop:14}}>24,100</td>
                  <td className="num-cell" style={{paddingTop:14,color:'#F5F1EA'}}>16,387</td>
                  <td className="num-cell" style={{paddingTop:14,color:'#F5F1EA'}}>68.0%</td>
                  <td className="num-cell" style={{paddingTop:14,color:'#F5F1EA'}}>$ 572</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      }
    />
  );
}
window.CascadeReport = CascadeReport;