import { Link, usePage } from '@inertiajs/react'; import { useMemo, useRef, useState } from 'react'; import type { FormEvent } from 'react'; import { dashboard, login, register } from '@/routes'; import PrismLayout from './_layout'; import PrismChat from './interactive-chat'; import type {PrismChatHandle} from './interactive-chat'; type ContentLink = { label: string; href: string }; type IconContentCard = { icon: string; title: string; description: string; }; type SettingRow = { label: string; hint: string; value: string; }; type LandingContent = { brand_name: string; nav_items: ContentLink[]; header: { resources_label: string; resources_href: string; primary_button_label: string; primary_button_href: string; }; hero: { badge: string; line_one: string; accent: string; line_two_suffix: string; line_three_prefix: string; line_three_highlight: string; line_four_highlight: string; description: string; site_test_label: string; site_test_placeholder: string; site_test_button_label: string; site_test_helper: string; live_demo_notice: string; }; chat_preview: { title: string; badge: string; question: string; answer: string; plan_badge: string; plan_name: string; plan_price: string; plan_interval: string; plan_note: string; plan_features: string[]; plan_button_label: string; typing_label: string; powered_by_prefix: string; }; stats: Array<{ icon: string; value: string; label: string }>; video: { badge: string; title: string; description: string; bullets: string[]; duration_label: string; tag_label: string; scene_label: string; card_title: string; timecode: string; chips: string[]; footer_title: string; footer_description: string; button_label: string; href: string; }; where_it_fits: { badge: string; title: string; cards: IconContentCard[]; }; feature_grid: { badge: string; title: string; cards: IconContentCard[]; }; control: { badge: string; title: string; description: string; callouts: IconContentCard[]; settings_card_title: string; settings_rows: SettingRow[]; cancel_label: string; save_button_label: string; }; steps: { badge: string; title: string; items: IconContentCard[]; }; insights: { badge: string; chart_title: string; chart_description: string; metric_label: string; metric_value: string; metric_trend: string; chart_points: number[]; chart_labels: string[]; cards: IconContentCard[]; }; testimonials: { badge: string; title: string; kicker: string; items: Array<{ name: string; role: string; company: string; quote: string; avatar?: string | null; }>; }; faq: { badge: string; title: string; kicker: string; items: Array<{ question: string; answer: string }>; }; final_cta: { title: string; description: string; primary_button_label: string; primary_button_href: string; secondary_button_label: string; secondary_button_href: string; }; footer: { brand_description: string; socials: ContentLink[]; groups: Array<{ title: string; links: ContentLink[] }>; legal_title: string; legal_links: ContentLink[]; copyright: string; }; }; type Props = { canRegister: boolean; demoAgentId: string | null; content: LandingContent; }; type AuthProps = { auth: { user?: { id: number | string } | null }; }; function shortStarter(question: string): string { const trimmed = question.replace(/^\s*[A-Za-z]+\s*[:.]?\s*/, '').trim(); if (trimmed.length <= 38) { return trimmed.replace(/[.?!]+$/, '?'); } return trimmed.slice(0, 36).trim() + '…'; } export default function PrismHome({ canRegister, demoAgentId, content }: Props) { const { auth } = usePage().props; const hasUser = Boolean(auth.user); const primaryHref = hasUser ? dashboard().url : canRegister ? register().url : login().url; const [openFaq, setOpenFaq] = useState(0); const [tIdx, setTIdx] = useState(0); const testimonialCount = content.testimonials.items.length; const testimonial = content.testimonials.items[tIdx % Math.max(1, testimonialCount)] ?? null; const chatStarters = useMemo( () => content.faq.items .slice(0, 4) .map((item) => shortStarter(item.question)), [content.faq.items], ); const priceCard = content.chat_preview.plan_features.length > 0 ? { plan: content.chat_preview.plan_name, price: content.chat_preview.plan_price, interval: content.chat_preview.plan_interval, features: content.chat_preview.plan_features.slice(0, 3), cta: content.chat_preview.plan_button_label, } : null; return ( setTIdx( (i) => (i - 1 + testimonialCount) % Math.max(1, testimonialCount), ) } onNext={() => setTIdx((i) => (i + 1) % Math.max(1, testimonialCount)) } /> setOpenFaq((cur) => (cur === i ? -1 : i))} /> ); } function Hero({ hero, chat, stats, brandName, demoAgentId, starters, priceCard, }: { hero: LandingContent['hero']; chat: LandingContent['chat_preview']; stats: LandingContent['stats']; brandName: string; demoAgentId: string | null; starters: string[]; priceCard: { plan: string; price: string; interval: string; features: string[]; cta: string; } | null; }) { const [domain, setDomain] = useState(''); const [tryToken, setTryToken] = useState(null); const [tryTitle, setTryTitle] = useState(null); const [tryIntro, setTryIntro] = useState(null); const [tryStatus, setTryStatus] = useState<'idle' | 'loading' | 'ready' | 'error'>('idle'); const [tryError, setTryError] = useState(null); const chatRef = useRef(null); const ask = (text: string) => { chatRef.current?.ask(text); }; const onSubmit = async (event: FormEvent) => { event.preventDefault(); const url = domain.trim(); if (!url || tryStatus === 'loading') { return; } setTryStatus('loading'); setTryError(null); try { const response = await fetch('/api/v1/widget/try-now', { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json', }, credentials: 'omit', body: JSON.stringify({ url }), }); const payload = await response.json(); if (!response.ok) { const message = payload?.error?.message || 'We could not load that page. Try a different URL.'; throw new Error(message); } setTryToken(payload.data.token); setTryTitle(payload.data.title); setTryIntro(payload.data.initial_message); setTryStatus('ready'); } catch (error) { setTryStatus('error'); setTryError( error instanceof Error && error.message ? error.message : 'We could not load that page. Try a different URL.', ); } }; return (

{hero.line_one}{' '}{hero.accent}{' '}{hero.line_two_suffix}{' '}{hero.line_three_prefix}{' '}{hero.line_three_highlight}{' '}{hero.line_four_highlight}

{hero.description}

setDomain(e.target.value)} aria-label={hero.site_test_label} disabled={tryStatus === 'loading'} />
{tryStatus === 'ready' && tryTitle ? (
Loaded {tryTitle} — ask the chat below about it.
) : tryStatus === 'error' && tryError ? (
{tryError}
) : (
{hero.site_test_helper || 'No credit card required'} Instant preview {hero.live_demo_notice || 'Live demo on this page'}
)}
); } const STAT_ICONS = [ , , , , ]; function PricingMockCard({ url, heading, plans, onPlanClick, }: { url: string; heading: string; plans: Array<{ name: string; price: string | null; interval?: string; highlight: boolean; }>; onPlanClick?: (plan: string) => void; }) { return (
{url}
{heading}
{plans.map((p) => ( ))}
); } function CrmCard({ intent, planInterest, engagementTime, leadScore, }: { intent: string; planInterest: string; engagementTime: string; leadScore: number; }) { return ( ); } function renderStars(score: number) { const full = Math.floor(score); const half = score - full >= 0.5; const out = []; for (let i = 0; i < 5; i++) { if (i < full) { out.push(); } else if (i === full && half) { out.push(); } else { out.push(); } } return out; } function Star({ fill, half }: { fill: string; half?: boolean }) { return ( ); } function NotifyCard() { return ( ); } function HeroMockConnectors() { return ( ); } function Stats({ stats }: { stats: LandingContent['stats'] }) { return (
{stats.map((s, idx) => (
{s.label}
{s.value}
{s.label}
))}
); } function Walkthrough({ video }: { video: LandingContent['video'] }) { return (
{video.badge}

{video.title}

See live demo →
{video.duration_label}
00:00 / {video.timecode} {video.scene_label}
); } function UseCases({ whereItFits, primaryHref, }: { whereItFits: LandingContent['where_it_fits']; primaryHref: string; }) { return (
{whereItFits.badge}

{whereItFits.title}

Get started →
{whereItFits.cards.map((card) => (

{card.title}

{card.description}

))}
); } function Features({ featureGrid, }: { featureGrid: LandingContent['feature_grid']; }) { return (
{featureGrid.badge}

{featureGrid.title}

{featureGrid.cards.map((card, idx) => (

{card.title}

{card.description}

{String(idx + 1).padStart(2, '0')} /{' '} {card.title.split(' ')[0]}
))}
); } function Tune({ control }: { control: LandingContent['control'] }) { return (
{control.badge}

{control.title}

{control.title}

{control.description}

{control.callouts.map((callout) => (
{callout.title} {callout.description}
))}
{control.settings_card_title}
/ pricing-page
{control.settings_rows.map((row) => (
{row.label}
{row.hint}
{row.value}
))}
); } function Steps({ steps }: { steps: LandingContent['steps'] }) { return (
{steps.badge}

{steps.title}

{steps.items.map((step, idx) => (
{idx + 1} Step {['one', 'two', 'three'][idx] || idx + 1}

{step.title}

{step.description}

))}
); } function buildSparkline(points: number[]) { const resolved = points.length > 0 ? points : [10, 20, 30, 40, 60, 80, 100]; const w = 600; const h = 160; const max = Math.max(...resolved, 1); const min = Math.min(...resolved, 0); const range = Math.max(max - min, 1); const stepX = resolved.length > 1 ? w / (resolved.length - 1) : 0; const coords = resolved.map((p, i) => ({ x: i * stepX, y: h - ((p - min) / range) * h, })); const line = coords .map((c, i) => `${i === 0 ? 'M' : 'L'}${c.x.toFixed(2)},${c.y.toFixed(2)}`) .join(' '); const area = `${line} L${w},${h} L0,${h} Z`; return { line, area, w, h, last: coords[coords.length - 1] }; } function Analytics({ insights }: { insights: LandingContent['insights'] }) { const spark = useMemo( () => buildSparkline(insights.chart_points), [insights.chart_points], ); return (
{insights.badge}

{insights.chart_title}

{insights.metric_label}
{insights.metric_value}
{insights.metric_trend}
{insights.chart_description}
{spark.last ? ( ) : null}
{insights.chart_labels.map((l) => ( {l} ))}
{insights.cards.map((card) => (
{card.title}

{card.description}

View report
))}
); } function Testimonial({ testimonials, current, total, onPrev, onNext, }: { testimonials: LandingContent['testimonials']; current: LandingContent['testimonials']['items'][number] | null; total: number; onPrev: () => void; onNext: () => void; }) { if (!current) { return null; } return (
{testimonials.badge}

{testimonials.title}

{current.name.charAt(0)}
“
{current.quote}
{current.name} {current.role} · {current.company}
{total > 1 ? (
) : null}
); } function FAQ({ faq, open, onToggle, }: { faq: LandingContent['faq']; open: number; onToggle: (idx: number) => void; }) { return (
{faq.items.map((item, i) => (
{open === i ? (
{item.answer}
) : null}
))}
); } function CTA({ finalCta, primaryHref, hasUser, }: { finalCta: LandingContent['final_cta']; primaryHref: string; hasUser: boolean; }) { const label = hasUser ? 'Open dashboard' : 'Get started'; return (
Ready when you are

{finalCta.title}

{finalCta.description}

{label}
); }