function Coverage({ onWaitlist, onInquire }) {
  const reports = [
    {
      id: "R001",
      title: "Methodology Snapshot",
      desc: "Foundational primer. Disambiguation method, sourcing chain, coverage policy, revision protocol.",
      status: "Coming Q3 2026",
      statusKind: "soon",
      cta: "Waitlist",
      action: "waitlist",
      tag: "PRIMER",
    },
    {
      id: "R002",
      title: "Industry Benchmarks",
      desc: "AI compute import benchmarks across Mexican market segments. Sector-by-sector breakdowns and HS-code deep dives.",
      status: "Coming Q3 2026",
      statusKind: "soon",
      cta: "Waitlist",
      action: "waitlist",
      tag: "BENCHMARK",
    },
    {
      id: "R003",
      title: "Custom Bundle",
      desc: "Named-entity intelligence on demand. Three tiers covering Top 20 to full-year Bundle + Q&A.",
      status: "LIVE",
      price: "USD 1,500 — 2,800",
      statusKind: "live",
      cta: "Inquire",
      action: "inquire",
      tag: "FLAGSHIP",
      highlight: true,
    },
    {
      id: "R004",
      title: "Cross-Border Trade Flows",
      desc: "Quarterly cross-border AI compute flows: US → Mexico → onward, with bonded-warehouse leakage.",
      status: "Coming Q4 2026",
      statusKind: "soon",
      cta: "Waitlist",
      action: "waitlist",
      tag: "BUNDLE",
    },
    {
      id: "R005",
      title: "Sector Deep Dives",
      desc: "Annual sector deep dives: hyperscale, telco, financial services, sovereign compute.",
      status: "Coming Q4 2026",
      statusKind: "soon",
      cta: "Waitlist",
      action: "waitlist",
      tag: "EXTENDED",
    },
  ];

  function handle(r) {
    if (r.action === "waitlist") onWaitlist(r);
    else onInquire(r);
  }

  return (
    <section id="coverage" style={{ background: PALETTE.paper2, borderBottom: `1px solid ${PALETTE.rule}` }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "96px 32px" }} className="vst-section">
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "flex-end",
          gap: 32, flexWrap: "wrap", marginBottom: 40,
        }}>
          <div style={{ maxWidth: 720 }}>
            <Eyebrow style={{ marginBottom: 14 }}>Research Series</Eyebrow>
            <h2 className="vst-h2" style={{
              fontFamily: "'Source Serif 4', serif", fontSize: 44, fontWeight: 600,
              lineHeight: 1.12, letterSpacing: "-.018em", color: PALETTE.navy, margin: 0, textWrap: "balance",
            }}>
              Five reports across the coverage stack.
            </h2>
            <p style={{
              fontFamily: "Inter, sans-serif", fontSize: 17, lineHeight: 1.6,
              color: PALETTE.mute1, marginTop: 14, marginBottom: 0, maxWidth: 620,
            }}>
              Each report carries a published coverage figure and revision policy. R003 is live now;
              the rest enter production through 2026 in the order analysts requested them.
            </p>
          </div>
          <div style={{
            fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: PALETTE.mute2, letterSpacing: ".02em",
            display: "flex", gap: 16, alignItems: "center",
          }}>
            <span style={{ display: "inline-flex", gap: 6, alignItems: "center" }}>
              <span style={{ width: 6, height: 6, background: PALETTE.green, borderRadius: 999 }}/> LIVE
            </span>
            <span style={{ display: "inline-flex", gap: 6, alignItems: "center" }}>
              <span style={{ width: 6, height: 6, background: PALETTE.mute2, borderRadius: 999 }}/> SCHEDULED
            </span>
          </div>
        </div>

        <div className="vst-grid-5" style={{
          display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 14, alignItems: "stretch",
        }}>
          {reports.map(r => (
            <article
              key={r.id}
              className="vst-card"
              style={{
                background: PALETTE.white,
                border: `1px solid ${PALETTE.rule}`,
                borderTop: `2px solid ${r.highlight ? PALETTE.amber : PALETTE.navy}`,
                padding: 18,
                display: "flex", flexDirection: "column", gap: 10,
                position: "relative",
              }}
            >
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span style={{
                  background: r.highlight ? PALETTE.amber100 : PALETTE.blue100,
                  color: r.highlight ? "#7A4500" : PALETTE.blue700,
                  padding: "3px 7px", borderRadius: 2,
                  fontFamily: "Inter, sans-serif", fontSize: 9.5,
                  fontWeight: 600, letterSpacing: ".08em",
                }}>{r.tag}</span>
                <span style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 10.5, color: PALETTE.mute2, letterSpacing: ".04em" }}>{r.id}</span>
              </div>

              <h3 style={{
                fontFamily: "'Source Serif 4', serif", fontSize: 19, fontWeight: 600,
                lineHeight: 1.22, color: PALETTE.navy, margin: 0, letterSpacing: "-.012em",
                minHeight: 44,
              }}>{r.title}</h3>

              <p style={{
                fontFamily: "Inter, sans-serif", fontSize: 12.5, lineHeight: 1.5,
                color: PALETTE.mute1, margin: 0, flex: 1,
              }}>{r.desc}</p>

              <hr style={{ border: 0, borderTop: `1px solid ${PALETTE.rule}`, margin: "4px 0 0" }}/>

              <div>
                <div style={{
                  fontFamily: "Inter, sans-serif", fontSize: 9.5, fontWeight: 600,
                  letterSpacing: ".14em", color: PALETTE.mute2, marginBottom: 4, textTransform: "uppercase",
                }}>Status</div>
                <div style={{
                  display: "inline-flex", alignItems: "center", gap: 6,
                  fontFamily: "Inter, sans-serif", fontSize: 12.5, fontWeight: 600, color: PALETTE.navy,
                }}>
                  <span style={{
                    width: 6, height: 6, borderRadius: 999,
                    background: r.statusKind === "live" ? PALETTE.green : PALETTE.mute2,
                  }}/>
                  {r.status}
                </div>
                {r.price && (
                  <div style={{
                    fontFamily: "JetBrains Mono, monospace", fontSize: 11.5,
                    color: PALETTE.mute1, marginTop: 4,
                  }}>{r.price}</div>
                )}
              </div>

              <button
                onClick={() => handle(r)}
                style={{
                  background: "transparent", border: 0, padding: 0, marginTop: "auto",
                  fontFamily: "Inter, sans-serif", fontSize: 12.5, fontWeight: 600,
                  color: r.highlight ? PALETTE.amber : PALETTE.blue,
                  textDecoration: "none", cursor: "pointer", textAlign: "left",
                  paddingTop: 4,
                }}
              >{r.cta} <span className="vst-link-arrow">→</span></button>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Coverage = Coverage;