import { Head, Link, router } from '@inertiajs/react'; import { Check, ChevronDown } from 'lucide-react'; import { useState } from 'react'; import { MarketingShell } from '@/layouts/marketing-shell'; import type { MarketingShellContent } from '@/layouts/marketing-shell'; import { useT } from '@/lib/i18n'; type Plan = { name: string; monthly_price: number; yearly_price: number; currency: string; currency_symbol: string; decimal_places: number; tagline: string; volume: string; cta_label: string; cta_href: string; highlight: boolean; features: string[]; }; type LifetimePlan = { id: string; name: string; price: number | null; currency: string; currency_symbol: string; decimal_places: number; features: string[]; tagline: string; cta_label: string; cta_href: string; monthly_conversations: number; }; type Interval = 'month' | 'year'; type CurrencyChoice = { code: string; name: string; symbol: string }; type MatrixCell = string | boolean; type MatrixRow = { label: string; free: MatrixCell; standard: MatrixCell; pro: MatrixCell; }; type Faq = { q: string; a: string }; type Props = { shell: MarketingShellContent; brand: string; plans: Plan[]; lifetime_plans: LifetimePlan[]; currency: string; currencies: CurrencyChoice[]; matrix: MatrixRow[]; faqs: Faq[]; contact_email: string; }; function formatPrice(value: number, symbol: string, decimals: number): string { return `${symbol}${value.toLocaleString(undefined, { minimumFractionDigits: decimals, maximumFractionDigits: decimals, })}`; } function MatrixValue({ value }: { value: MatrixCell }) { if (value === true) { return ( ); } if (value === false) { return —; } return {value}; } function FaqItem({ q, a }: Faq) { const [open, setOpen] = useState(false); return (
{open && (

{a}

)}
); } export default function Pricing({ shell, brand, plans, lifetime_plans, currency, currencies, matrix, faqs, contact_email, }: Props) { const { t } = useT(); const [interval, setInterval] = useState('month'); const onCurrencyChange = (code: string) => { if (code === currency) { return; } router.visit(`/pricing?currency=${encodeURIComponent(code)}`, { preserveScroll: true, preserveState: false, }); }; const hasAnnualOption = plans.some( (p) => p.yearly_price > 0 && p.monthly_price > 0, ); const annualSavingsPercent = (() => { const candidate = plans.find( (p) => p.monthly_price > 0 && p.yearly_price > 0, ); if (!candidate) { return 0; } const monthlyOverYear = candidate.monthly_price * 12; const saved = monthlyOverYear - candidate.yearly_price; return monthlyOverYear === 0 ? 0 : Math.round((saved / monthlyOverYear) * 100); })(); return ( <>
{t('Pricing')}

{t('Simple,')}{' '} {t('conversation-based')} {' '} {t('pricing')}

{t( 'Start free. Upgrade when you outgrow it. No per-seat fees, no setup fees, no surprise overages — just a clear conversation limit.', )}

{hasAnnualOption && ( <>
{[ { v: 'month' as const, label: t('Monthly'), }, { v: 'year' as const, label: t('Yearly'), }, ].map((opt) => ( ))}
{annualSavingsPercent > 0 && ( {t('Save :percent% with yearly', { percent: annualSavingsPercent, })} )} )} {currencies.length > 1 && ( )}
{(() => { // Adaptive grid: 1 plan → single centered card, // 2 → 2 cols, 3 → 3 cols, 4+ → 4 cols. Keeps // cards visually balanced regardless of how // many plans the operator left visible. const n = plans.length; const cols = n <= 1 ? 'mx-auto max-w-md md:grid-cols-1' : n === 2 ? 'md:grid-cols-2' : n === 3 ? 'md:grid-cols-3' : 'md:grid-cols-2 lg:grid-cols-4'; return (
{plans.map((plan) => { const showYearly = interval === 'year' && plan.yearly_price > 0; const headlinePrice = showYearly ? Math.round(plan.yearly_price / 12) : plan.monthly_price; const ctaHref = interval === 'year' && plan.yearly_price > 0 ? plan.cta_href + (plan.cta_href.includes('?') ? '&' : '?') + 'interval=year' : plan.cta_href; return (
{plan.highlight && ( {t('Most popular')} )}

{plan.name}

{plan.tagline}

{formatPrice( headlinePrice, plan.currency_symbol, plan.decimal_places, )} {headlinePrice > 0 && ( {t('/month')} )}
{showYearly && plan.yearly_price > 0 && (

{t(':price billed annually', { price: formatPrice( plan.yearly_price, plan.currency_symbol, plan.decimal_places, ), })}

)}

{plan.volume}

    {plan.features.map((feature) => (
  • {feature}
    • ))}
{plan.cta_label}
); })}
); })()}

{t('Need higher limits or a self-hosted license?')}{' '} {t('Talk to us about Enterprise')} .

{lifetime_plans.length > 0 && (
{t('Lifetime deal')}

{t('Pay once. Use forever.')}

{t( 'A one-time purchase that unlocks the agent for the lifetime of your account — no monthly bill, no surprise renewal.', )}

{lifetime_plans.map((plan) => (

{plan.name}

{plan.tagline}

{plan.price === null ? '—' : formatPrice( plan.price, plan.currency_symbol, plan.decimal_places, )} {t('one-time')}
{plan.monthly_conversations > 0 && (

{t(':count conversations / month', { count: plan.monthly_conversations.toLocaleString(), })}

)}
    {plan.features.map((feature) => (
  • {feature}
    • ))}
{plan.cta_label}
))}
)}

{t('Compare every feature')}

{t( 'Everything you can do on each plan, side by side.', )}

{matrix.map((row) => ( ))}
{t('Feature')} {t('Free')} {t('Standard')} {t('Pro')}
{row.label}

{t('Frequently asked')}

{faqs.map((faq) => ( ))}

{t('Ready to ship a real sales AI?')}

{t( 'Free to start. Deploys in 5 minutes. No card required.', )}

{t('Get started free')}
); }