/* MStheory website — Pricing / paywall */
const { PricingCard } = window.MStheoryDesignSystem_61eb29;

function Pricing({ t, onCheckout }) {
  return (
    <section id="pricing" style={{ position: "relative", paddingBlock: "var(--space-32)" }}>
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "var(--grad-spotlight)", pointerEvents: "none" }} />
      <div className="ms-container" style={{ position: "relative", display: "grid", gridTemplateColumns: "1fr 0.9fr", gap: "56px", alignItems: "center" }}>
        <div className="ms-pricing-copy">
          <p className="ms-eyebrow">{t.pricing.eyebrow}</p>
          <h2 style={{ fontSize: "var(--text-2xl)", marginTop: "12px", marginBottom: "20px" }}>{t.pricing.title}</h2>
          <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px" }}>
            {t.pricing.features.map((f, i) => (
              <li key={i} style={{ display: "flex", gap: "10px", alignItems: "flex-start", color: "var(--text-secondary)", fontSize: "var(--text-sm)" }}>
                <span style={{ color: "var(--text-gold)", flexShrink: 0 }}>✓</span>{f}
              </li>
            ))}
          </ul>
        </div>
        <div style={{ maxWidth: "420px", justifySelf: "end", width: "100%" }}>
          <PricingCard
            price={t.pricing.price}
            period={t.pricing.period}
            title={t.pricing.title}
            features={t.pricing.features.slice(0, 4)}
            ctaLabel={t.pricing.cta}
            onCheckout={onCheckout}
          />
        </div>
      </div>
    </section>
  );
}
window.Pricing = Pricing;