/* @jsx React.createElement */

function DeliveryReport() {
  const domains = [
    { d: "sales.acme.com",     pct: "97.4%", state: "live",       am: false },
    { d: "outbound.acme.com",  pct: "96.1%", state: "live",       am: false },
    { d: "go.acme.io",         pct: "84.2%", state: "anomaly",    am: true  },
    { d: "team.acme.com",      pct: "92.8%", state: "warmup d12", am: false },
    { d: "hello.acme.io",      pct: "98.0%", state: "live",       am: false },
  ];
  return (
    <GtmosBlock
      headerLabel="DELIVERY"
      headerType="REPORT  ·  APR 2026"
      date="2026-05-01  ·  FRI"
      hero={{ value: "94.1%", amber: false, ctx: "<strong>Primary-inbox placement</strong> across 5 sending domains.<br/>1 anomaly. Quiet otherwise." }}
      footerType="delivery report"
      body={
        <div>
          {/* anomaly band — promoted above the table, impossible to miss */}
          <div className="anomaly-band">
            <div className="anom-eyebrow">
              <span className="dot" />
              anomaly  ·  go.acme.io
            </div>
            <div className="anom-grid">
              <div className="anom-num">
                <div className="big">&minus;11.6<span className="unit">pts</span></div>
                <div className="lbl">placement, 48h</div>
              </div>
              <div className="anom-num">
                <div className="big alt">84.2<span className="unit">%</span></div>
                <div className="lbl">current placement</div>
              </div>
              <div className="anom-body">
                Routed to backup pool at 04:12 PT. Re&#8209;warm cycle initiated &middot; ETA 6 days. Outbound sends auto&#8209;diverted. <span className="muted-inline">No action required.</span>
              </div>
            </div>
          </div>

          {/* domain table — quiet, supporting context */}
          <div style={{marginTop:20}}>
            <div style={{fontFamily:'var(--font-mono)',fontSize:10,letterSpacing:'0.12em',textTransform:'uppercase',color:'#6E6B66',marginBottom:10}}>all sending domains</div>
            {domains.map(x => (
              <div className="del-row" key={x.d}>
                <span className="domain">{x.d}</span>
                <span className={"pct" + (x.am ? " am" : "")}>{x.pct}</span>
                <span className="state" style={x.am ? {color:'#C2410C'} : {}}>
                  <span style={{display:'inline-block',width:7,height:7,borderRadius:999,background:x.am ? '#C2410C' : '#6E6B66',marginRight:8,verticalAlign:1}} />
                  {x.state}
                </span>
                <span style={{fontFamily:'var(--font-mono)',fontSize:11,color:'#6E6B66'}}>{x.am ? "investigate" : "ok"}</span>
              </div>
            ))}
          </div>
        </div>
      }
    />
  );
}
window.DeliveryReport = DeliveryReport;