function Pricing({ onInquire }) {
  const tiers = [
    {
      id: "Pulse",
      price: "USD 1,500",
      tagline: "Baseline pulse for analysts who only need the top of the table.",
      features: [
        { label: "Top 20 named importers", incl: true },
        { label: "1-sentence commentary per importer", incl: true },
        { label: "HS-code split (8471 / 8542)", incl: true },
        { label: "Coverage band per chart", incl: true },
        { label: "IMMEX cross-reference matrix", incl: false },
        { label: "Cluster analysis (hyperscale / telco / FS)", incl: false },
        { label: "Monthly intra-quarter delta", incl: false },
        { label: "Founder Q&A session (45 min)", incl: false },
      ],
      sla: "5-day SLA",
      pages: "≈ 18 pages",
      cta: "Inquire",
    },
    {
      id: "Bundle",
      price: "USD 2,200",
      tagline: "The standard reference deck for engagement teams.",
      highlight: true,
      ribbon: "Most requested",
      features: [
        { label: "Top 50 named importers", incl: true, plus: true },
        { label: "Extended commentary per importer", incl: true, plus: true },
        { label: "HS-code split + sub-codes", incl: true },
        { label: "Coverage band per chart", incl: true },
        { label: "IMMEX cross-reference matrix", incl: true, plus: true },
        { label: "Cluster analysis (hyperscale / telco / FS)", incl: true, plus: true },
        { label: "Monthly intra-quarter delta", incl: false },
        { label: "Founder Q&A session (45 min)", incl: false },
      ],
      sla: "5-day SLA",
      pages: "≈ 38 pages",
      cta: "Inquire",
    },
    {
      id: "Extended",
      price: "USD 2,800",
      tagline: "Bundle plus monthly cadence and a working session with the founder.",
      features: [
        { label: "Top 50 named importers", incl: true },
        { label: "Extended commentary per importer", incl: true },
        { label: "HS-code split + sub-codes", incl: true },
        { label: "Coverage band per chart", incl: true },
        { label: "IMMEX cross-reference matrix", incl: true },
        { label: "Cluster analysis (hyperscale / telco / FS)", incl: true },
        { label: "Monthly intra-quarter delta", incl: true, plus: true },
        { label: "Founder Q&A session (45 min)", incl: true, plus: true },
      ],
      sla: "10-day SLA",
      pages: "≈ 58 pages",
      cta: "Inquire",
    },
  ];

  return (
    <section id="pricing" style={{ background: PALETTE.paper, borderBottom: `1px solid ${PALETTE.rule}` }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "96px 32px" }} className="vst-section">
        <div style={{ maxWidth: 760, marginBottom: 48 }}>
          <Eyebrow style={{ marginBottom: 14, color: PALETTE.green }}>Available Now · R003 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",
          }}>
            Named entity intelligence on demand.
          </h2>
          <p style={{
            fontFamily: "Inter, sans-serif", fontSize: 17, lineHeight: 1.6,
            color: PALETTE.mute1, marginTop: 14, marginBottom: 0,
          }}>
            Three tiers. Same methodology. Disclosed coverage on every chart. Pricing public — engagement
            terms confirmed in writing before any commitment.
          </p>
        </div>

        <div className="vst-grid-3" style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0,
          border: `1px solid ${PALETTE.rule}`, background: PALETTE.white,
        }}>
          {tiers.map((t, i) => (
            <article key={t.id} style={{
              padding: "32px 28px 28px",
              borderRight: i < tiers.length - 1 ? `1px solid ${PALETTE.rule}` : "none",
              borderTop: t.highlight ? `2px solid ${PALETTE.amber}` : "none",
              background: t.highlight ? "#FFFCF5" : PALETTE.white,
              position: "relative",
              display: "flex", flexDirection: "column",
              marginTop: t.highlight ? -1 : 0,
            }}>
              {t.ribbon && (
                <div style={{
                  position: "absolute", top: -1, right: 16,
                  background: PALETTE.amber, color: PALETTE.paper,
                  fontFamily: "Inter, sans-serif", fontSize: 10, fontWeight: 600,
                  letterSpacing: ".14em", textTransform: "uppercase",
                  padding: "5px 10px",
                }}>{t.ribbon}</div>
              )}

              <div style={{
                fontFamily: "Inter, sans-serif", fontSize: 11, fontWeight: 600,
                letterSpacing: ".14em", textTransform: "uppercase",
                color: PALETTE.mute2, marginBottom: 10,
              }}>R003 · {t.id}</div>

              <div style={{
                fontFamily: "'Source Serif 4', serif", fontSize: 36, fontWeight: 600,
                color: PALETTE.navy, letterSpacing: "-.018em", lineHeight: 1,
                fontVariantNumeric: "tabular-nums",
              }}>{t.price}</div>
              <div style={{
                fontFamily: "JetBrains Mono, monospace", fontSize: 11,
                color: PALETTE.mute2, marginTop: 8, letterSpacing: ".04em",
              }}>per report · USD</div>

              <p style={{
                fontFamily: "Inter, sans-serif", fontSize: 13.5, lineHeight: 1.55,
                color: PALETTE.mute1, marginTop: 16, marginBottom: 22, minHeight: 60,
              }}>{t.tagline}</p>

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

              <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "grid", gap: 10 }}>
                {t.features.map(f => (
                  <li key={f.label} style={{
                    display: "flex", gap: 10, alignItems: "flex-start",
                    fontFamily: "Inter, sans-serif", fontSize: 13,
                    color: f.incl ? PALETTE.ink : PALETTE.mute3,
                    lineHeight: 1.45,
                    fontWeight: f.plus ? 500 : 400,
                  }}>
                    {f.incl ? (
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={f.plus ? PALETTE.amber : PALETTE.green} strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 3 }}><path d="M20 6L9 17l-5-5"/></svg>
                    ) : (
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 3, opacity: 0.5 }}><path d="M5 12h14"/></svg>
                    )}
                    <span style={{ textDecoration: f.incl ? "none" : "none" }}>{f.label}</span>
                  </li>
                ))}
              </ul>

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

              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 22 }}>
                <div>
                  <div style={{ fontFamily: "Inter, sans-serif", fontSize: 9.5, fontWeight: 600, letterSpacing: ".14em", color: PALETTE.mute2, textTransform: "uppercase" }}>Delivery</div>
                  <div style={{ fontFamily: "Inter, sans-serif", fontSize: 13, fontWeight: 600, color: PALETTE.navy, marginTop: 4, fontVariantNumeric: "tabular-nums" }}>{t.sla}</div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div style={{ fontFamily: "Inter, sans-serif", fontSize: 9.5, fontWeight: 600, letterSpacing: ".14em", color: PALETTE.mute2, textTransform: "uppercase" }}>Format</div>
                  <div style={{ fontFamily: "Inter, sans-serif", fontSize: 13, fontWeight: 600, color: PALETTE.navy, marginTop: 4 }}>{t.pages}</div>
                </div>
              </div>

              {t.highlight ? (
                <PrimaryButton onClick={() => onInquire({ id: "R003 Bundle", title: "R003 Bundle" })} style={{ width: "100%" }}>
                  {t.cta} <span className="vst-link-arrow">→</span>
                </PrimaryButton>
              ) : (
                <button
                  onClick={() => onInquire({ id: `R003 ${t.id}`, title: `R003 ${t.id}` })}
                  style={{
                    background: "transparent",
                    color: PALETTE.navy,
                    border: `1px solid ${PALETTE.rule2}`,
                    borderRadius: 4,
                    padding: "11px 20px",
                    fontFamily: "Inter, sans-serif", fontSize: 14, fontWeight: 600,
                    cursor: "pointer", width: "100%",
                    transition: "background 120ms",
                  }}
                  onMouseEnter={e => e.currentTarget.style.background = "rgba(10,25,41,.04)"}
                  onMouseLeave={e => e.currentTarget.style.background = "transparent"}
                >
                  {t.cta} <span className="vst-link-arrow">→</span>
                </button>
              )}
            </article>
          ))}
        </div>

        <div style={{
          marginTop: 24, paddingTop: 18, borderTop: `1px solid ${PALETTE.rule}`,
          display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16,
          fontFamily: "Inter, sans-serif", fontSize: 12, color: PALETTE.mute1,
        }}>
          <span>All tiers ship as searchable PDF + CSV underlying-data appendix.</span>
          <span style={{ fontFamily: "JetBrains Mono, monospace" }}>Engagement terms · NDA · payment in advance — confirmed in writing before delivery.</span>
        </div>
      </div>
    </section>
  );
}

window.Pricing = Pricing;