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 / 8473.30)", 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: "Q&A session post-delivery", 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 (full universe · 4 HS families)", 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: "Q&A session post-delivery", 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 (full universe · 4 HS families)", 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: "Q&A session post-delivery", 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 style={{ marginTop: 64 }}>
          <Eyebrow style={{ marginBottom: 14, color: PALETTE.blue }}>
            Ongoing Engagement · Retainer Tiers
          </Eyebrow>
          <h3 style={{
            fontFamily: "'Source Serif 4', serif", fontSize: 32, fontWeight: 600,
            lineHeight: 1.18, letterSpacing: "-.015em", color: PALETTE.navy,
            margin: 0, marginBottom: 14, textWrap: "balance",
          }}>
            Standing analyst access. Quarterly refreshes. Priority delivery.
          </h3>
          <p style={{
            fontFamily: "Inter, sans-serif", fontSize: 16, lineHeight: 1.55,
            color: PALETTE.mute1, marginTop: 0, marginBottom: 32, maxWidth: 720,
          }}>
            For ongoing intelligence work beyond single-report purchases.
            Three tiers covering individual analysts through enterprise teams.
          </p>

          <div className="vst-grid-3" style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0,
            border: `1px solid ${PALETTE.rule}`, background: PALETTE.white,
          }}>
            {[
              {
                id: "Basic",
                price: "USD 3,000",
                tagline: "Entry tier for individual analysts and emerging consultancies.",
                features: [
                  { label: "4 analyst-hours per month", incl: true },
                  { label: "1 quarterly product update", incl: true },
                  { label: "1 monthly check-in call (30 min)", incl: true },
                  { label: "48-hour response priority", incl: true },
                  { label: "1 custom query per month", incl: true },
                  { label: "Named dedicated analyst", incl: false },
                  { label: "Quarterly strategic memo", incl: false },
                  { label: "Unlimited custom queries", incl: false },
                ],
                sla: "48h priority",
                scope: "4 hrs/mo",
                cta: "Inquire",
              },
              {
                id: "Standard",
                price: "USD 5,000",
                tagline: "PE/VC and boutique consultancy standard with dedicated analyst.",
                highlight: true,
                ribbon: "Most picked",
                features: [
                  { label: "8 analyst-hours per month", incl: true, plus: true },
                  { label: "1 quarterly product update", incl: true },
                  { label: "2 monthly check-in calls", incl: true, plus: true },
                  { label: "24-hour response priority", incl: true, plus: true },
                  { label: "2 custom queries per month", incl: true, plus: true },
                  { label: "Named dedicated analyst (when ramped)", incl: true, plus: true },
                  { label: "Quarterly strategic memo", incl: false },
                  { label: "Unlimited custom queries", incl: false },
                ],
                sla: "24h priority",
                scope: "8 hrs/mo",
                cta: "Inquire",
              },
              {
                id: "Premium",
                price: "USD 8,000",
                tagline: "Enterprise tier with weekly cadence and unlimited queries.",
                features: [
                  { label: "16 analyst-hours per month", incl: true },
                  { label: "2 quarterly product updates", incl: true },
                  { label: "Weekly check-in calls", incl: true },
                  { label: "12-hour response priority", incl: true },
                  { label: "Unlimited custom queries", incl: true, plus: true },
                  { label: "Named dedicated analyst", incl: true },
                  { label: "Quarterly strategic memo (4-pages)", incl: true, plus: true },
                  { label: "Priority on R001-R005 delivery", incl: true, plus: true },
                ],
                sla: "12h priority",
                scope: "16 hrs/mo",
                cta: "Inquire",
              },
            ].map((t, i, arr) => (
              <article key={t.id} style={{
                padding: "32px 28px 28px",
                borderRight: i < arr.length - 1 ? `1px solid ${PALETTE.rule}` : "none",
                borderTop: t.highlight ? `2px solid ${PALETTE.blue}` : "none",
                background: t.highlight ? "#F4F1E8" : 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.blue, 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,
                }}>Retainer · {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 month · 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.blue : 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>{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: 10 }}>
                  <div>
                    <div style={{ fontFamily: "Inter, sans-serif", fontSize: 9.5, fontWeight: 600, letterSpacing: ".14em", color: PALETTE.mute2, textTransform: "uppercase" }}>Response</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" }}>Scope</div>
                    <div style={{ fontFamily: "Inter, sans-serif", fontSize: 13, fontWeight: 600, color: PALETTE.navy, marginTop: 4 }}>{t.scope}</div>
                  </div>
                </div>

                <div style={{
                  marginBottom: 16,
                  fontFamily: "JetBrains Mono, monospace", fontSize: 10.5,
                  color: PALETTE.mute2, letterSpacing: ".02em",
                }}>
                  6-month minimum · then month-to-month
                </div>

                {t.highlight ? (
                  <PrimaryButton onClick={() => onInquire({ id: `Retainer ${t.id}`, title: `Retainer ${t.id}` })} style={{ width: "100%" }}>
                    {t.cta} <span className="vst-link-arrow">→</span>
                  </PrimaryButton>
                ) : (
                  <button
                    onClick={() => onInquire({ id: `Retainer ${t.id}`, title: `Retainer ${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 retainers include methodology consultation, priority delivery, and founder access. 6-month minimum commitment with 30-day notice thereafter. 10% discount on 12-month upfront commitments.</span>
            <span style={{ fontFamily: "JetBrains Mono, monospace" }}>Annual commitment optional · −10% on upfront 12-month</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Pricing = Pricing;