import { Head, Link } from '@inertiajs/react'; import { Check } from 'lucide-react'; import { MarketingShell } from '@/layouts/marketing-shell'; import type { MarketingShellContent } from '@/layouts/marketing-shell'; import { useT } from '@/lib/i18n'; type Step = { number: string; title: string; duration: string; description: string; sub_points: string[]; }; type LatencyRow = { phase: string; budget: string }; type Props = { shell: MarketingShellContent; brand: string; steps: Step[]; latency: LatencyRow[]; }; export default function HowItWorks({ shell, brand, steps, latency }: Props) { const { t } = useT(); return ( <>
{t('How it works')}

{t('From URL to live sales agent in')}{' '} {t('under 5 minutes')}

{t( ":brand reads your website, builds an AI agent grounded in your own content, and embeds it on any page with one line of HTML. Here's exactly what happens.", { brand }, )}

{steps.map((step) => (
{step.number}

{step.title}

{step.duration}

{step.description}

{step.sub_points.length > 0 && (
    {step.sub_points.map((point) => (
  • {point}
    • ))}
)}
))}
{t('Hot path contract')}

{t('1 second to first token. Every time.')}

{t( 'The visitor-message → first-token path has a hard p95 budget. No DB writes, no synchronous webhooks, no retries. Persistence and analytics are dispatched async after the stream completes.', )}

{t( 'OpenTelemetry spans wrap every phase so when the budget breaks the span heatmap points right at the offender.', )}

{t('p95 latency budget')}

    {latency.map((row) => (
  • {row.phase} {row.budget}
    • ))}
  • {t('Total to first token')} {t('~ 865 ms')}

{t('Try it on your own site.')}

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

{t('Start free')} {t('See pricing')}
); }