import { Head, Link } from '@inertiajs/react'; import { BookOpen, CreditCard, FileText, Globe2, Map, MessageSquare, Rss, Sparkles, Type, } from 'lucide-react'; import type { LucideIcon } from 'lucide-react'; import { MarketingShell } from '@/layouts/marketing-shell'; import type { MarketingShellContent } from '@/layouts/marketing-shell'; import { useT } from '@/lib/i18n'; type Native = { name: string; category: string; tagline: string; description: string; icon: string; accent: 'slate' | 'sky' | 'violet' | 'indigo' | 'emerald' | 'amber'; }; type DataSource = { name: string; tagline: string; icon: string }; type RoadmapItem = { name: string; tagline: string }; type Props = { shell: MarketingShellContent; brand: string; native: Native[]; data_sources: DataSource[]; roadmap: RoadmapItem[]; }; const iconMap: Record = { BookOpen, CreditCard, FileText, Globe2, Map, MessageSquare, Rss, Sparkles, Type, }; const accentClass: Record = { slate: 'bg-slate-100 text-slate-700 ring-slate-200/80', sky: 'bg-sky-100 text-sky-700 ring-sky-200/80', violet: 'bg-violet-100 text-violet-700 ring-violet-200/80', indigo: 'bg-indigo-100 text-indigo-700 ring-indigo-200/80', emerald: 'bg-emerald-100 text-emerald-700 ring-emerald-200/80', amber: 'bg-amber-100 text-amber-700 ring-amber-200/80', }; function Icon({ name, className }: { name: string; className?: string }) { const Cmp = iconMap[name] ?? Sparkles; return ; } export default function Integrations({ shell, brand, native, data_sources, roadmap, }: Props) { const { t } = useT(); return ( <>
{t('Integrations')}

{t('Plug :brand into the', { brand })}{' '} {t('tools you already use')}

{t( 'Native sync where it matters, signed webhooks everywhere else. Bring your knowledge in. Push leads out. Capture human escalations without leaving Slack.', )}

{native.map((item) => (

{item.category}

{item.name}

{item.tagline}

{item.description}

))}
{t('Knowledge in')}

{t('Five ways to feed the agent')}

{t( 'Mix and match — most teams start with a sitemap crawl, paste a few FAQs, and turn on auto-index for the long tail.', )}

    {data_sources.map((src) => (

  • {src.name}

    {src.tagline}

    • ))}
{t('On the roadmap')}

{t('Coming soon')}

{t( 'Until these ship natively, the outgoing webhook + a Zapier catch-hook covers every CRM in your stack.', )}

    {roadmap.map((item) => (

  • {item.name}

    {item.tagline}

    • ))}

{t('Ready to plug it in?')}

{t( 'Free to start. Connect Notion, Slack, and your first webhook in under 5 minutes.', )}

{t('Get started free')} {t('Read the integration docs')}
); }