'use client' import type { ComponentPropsWithoutRef } from 'react' import { useState } from 'react' import { Check, Sparkles } from 'lucide-react' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '@/components/ui/card' import { cn } from '@/lib/utils' export type PricingInterval = 'monthly' | 'yearly' export type PricingPlan = { id: string name: string description: string monthlyPrice: string yearlyPrice: string priceSuffix?: string features: readonly string[] ctaLabel: string ctaHref: string featured?: boolean badge?: string } export type PricingSectionOneProps = ComponentPropsWithoutRef<'section'> & { eyebrow?: string heading?: string description?: string plans?: readonly PricingPlan[] defaultInterval?: PricingInterval billingIntervalLabel?: string monthlyLabel?: string yearlyLabel?: string yearlyNote?: string } const defaultPlans: readonly PricingPlan[] = [ { id: 'starter', name: 'Starter', description: 'For small teams organizing their first repeatable workflow.', monthlyPrice: '$19', yearlyPrice: '$15', priceSuffix: '/ seat', features: ['3 active projects', 'Core automations', 'Email support', 'Unlimited guests'], ctaLabel: 'Start free', ctaHref: '#get-started', }, { id: 'scale', name: 'Scale', description: 'For growing teams that need control, reporting, and faster execution.', monthlyPrice: '$49', yearlyPrice: '$39', priceSuffix: '/ seat', features: [ 'Unlimited projects', 'Advanced automations', 'Custom reporting', 'Priority support', 'Role-based access', ], ctaLabel: 'Start 14-day trial', ctaHref: '#get-started', featured: true, badge: 'Most popular', }, { id: 'enterprise', name: 'Enterprise', description: 'For organizations with security, procurement, and support requirements.', monthlyPrice: 'Custom', yearlyPrice: 'Custom', features: [ 'Everything in Scale', 'SAML and SCIM', 'Audit logs', 'Dedicated success manager', 'Custom legal terms', ], ctaLabel: 'Talk to sales', ctaHref: '#contact-sales', }, ] type PricingCardProps = { interval: PricingInterval plan: PricingPlan } function PricingCard({ interval, plan }: PricingCardProps) { const price = interval === 'yearly' ? plan.yearlyPrice : plan.monthlyPrice const hasNumericPrice = price !== 'Custom' return (

{plan.name} {plan.badge ? ( ) : null}

{plan.description}

{price} {hasNumericPrice && plan.priceSuffix ? ( {plan.priceSuffix} ) : null}

{feature}

) } export function PricingSectionOne({ className, eyebrow = 'Simple pricing', heading = 'Choose the plan that fits how your team works', description = 'Start small, upgrade when you need to, and keep every core workflow included.', plans = defaultPlans, defaultInterval = 'monthly', billingIntervalLabel = 'Choose billing interval', monthlyLabel = 'Monthly', yearlyLabel = 'Yearly', yearlyNote = 'Save 20%', ...props }: PricingSectionOneProps) { const [interval, setInterval] = useState(defaultInterval) return (

{eyebrow ? {eyebrow} : null}

{heading}

{description}

{plans.map((plan) => ( ))}

) } export default PricingSectionOne