Pricing Section

import * as React from "react"
import { Check } from "lucide-react"
import "@/components/designos/designos.css"

export type PricePlan = { name: string; price: string; description: string; features: string[]; action: string; href: string; featured?: boolean }

export function PricingSection({ plans, title = "Choose your operating layer." }: { plans: PricePlan[]; title?: string }) {
  return <section className="dos-section"><header className="dos-section__head"><span className="dos-eyebrow">Pricing</span><h2 className="dos-section__title">{title}</h2></header><div className="dos-pricing-grid">{plans.map((plan) => <article key={plan.name} className={`dos-price${plan.featured ? " dos-price--featured" : ""}`}><span className="dos-eyebrow">{plan.name}</span><div className="dos-price__amount">{plan.price}</div><p className="dos-card__description">{plan.description}</p><ul className="dos-price__list">{plan.features.map((feature) => <li key={feature}><Check aria-hidden="true" />{feature}</li>)}</ul><a href={plan.href} className={`dos-button${plan.featured ? "" : " dos-button--secondary"}`}>{plan.action}</a></article>)}</div></section>
}