--- /** * PricingSection.astro * A high-performance, zero-JS pricing component for federal SaaS products. */ interface Tier { name: string; priceMonthly: number | null; features: string[]; highlighted?: boolean; ctaLabel: string; ctaHref: string; } interface Props { heading: string; subheading?: string; tiers?: Tier[]; } const { heading = "Simple, Transparent Pricing", subheading = "Scalable solutions for federal agencies and contractors.", tiers = [ { name: "Starter", priceMonthly: 0, features: ["Basic reporting", "Standard security", "Email support"], ctaLabel: "Get Started", ctaHref: "#" }, { name: "Pro", priceMonthly: 299, features: ["Advanced analytics", "FedRAMP readiness", "Priority support"], highlighted: true, ctaLabel: "Go Pro", ctaHref: "#" }, { name: "Enterprise", priceMonthly: null, features: ["Custom compliance", "Dedicated support", "Full API access"], ctaLabel: "Contact Us", ctaHref: "#" } ] } = Astro.props; const currencyFormatter = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0, }); // Pre-format prices at build time to ensure zero client-side JS const processedTiers = tiers.map((tier) => ({ ...tier, displayPrice: tier.priceMonthly !== null ? currencyFormatter.format(tier.priceMonthly) : "Contact us", })); ---

{heading}

{subheading &&

{subheading}

}
{processedTiers.map((tier) => (
{tier.highlighted && (
Most popular
)}

{tier.name}

{tier.priceMonthly !== null && $} {tier.displayPrice.replace('$', '')} {tier.priceMonthly !== null && /mo}
    {tier.features.map((feature) => (
  • {feature}
    • ))}
{tier.ctaLabel}
))}