import { Form, Head, Link, usePage } from '@inertiajs/react'; import { BarChart3, BookOpen, Box, Check, ChevronDown, CircleCheck, ClipboardList, Clock3, Globe2, LockKeyhole, Minus, Play, Plus, Quote, ShieldCheck, Sparkles, Tags, Target, TrendingUp, Zap, } from 'lucide-react'; import type { LucideIcon } from 'lucide-react'; import { useEffect, useMemo, useRef, useState } from 'react'; import type { ReactNode } from 'react'; import AppLogoIcon from '@/components/app-logo-icon'; import { DirArrow } from '@/components/dir-icon'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Dialog, DialogContent } from '@/components/ui/dialog'; import { Input } from '@/components/ui/input'; import { Separator } from '@/components/ui/separator'; import { useBranding } from '@/hooks/use-branding'; import { MarketingShell } from '@/layouts/marketing-shell'; import { useT } from '@/lib/i18n'; import { cn } from '@/lib/utils'; import { dashboard, login, register } from '@/routes'; import { start } from '@/routes/marketing'; 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; }; }; const iconMap: Record = { BarChart3, BookOpen, Box, CircleCheck, ClipboardList, Clock3, LockKeyhole, ShieldCheck, Sparkles, Tags, Target, TrendingUp, Zap, }; const pineButtonClass = 'bg-[#173f2c] text-[#f7f4ec] hover:bg-[#123322] hover:text-[#f7f4ec]'; function resolveIcon( name: string, fallback: LucideIcon = Sparkles, ): LucideIcon { return iconMap[name] ?? fallback; } /** * Convert a Vimeo / YouTube URL into the matching embeddable iframe * URL plus a public thumbnail URL we can render as the card preview. * Falls back gracefully for anything we don't recognise. */ function toEmbedUrl(href: string): { url: string; isEmbed: boolean; thumbnail: string | null; } { if (!href) { return { url: href, isEmbed: false, thumbnail: null }; } // Vimeo: vimeo.com/{id} → player.vimeo.com/video/{id} // vumbnail.com is a public Vimeo thumbnail proxy that doesn't // require an API key; serves the largest available poster. const vimeo = href.match(/vimeo\.com\/(?:video\/)?(\d+)/); if (vimeo) { return { url: `https://player.vimeo.com/video/${vimeo[1]}?autoplay=1&muted=1&playsinline=1`, isEmbed: true, thumbnail: `https://vumbnail.com/${vimeo[1]}.jpg`, }; } // YouTube: watch?v={id} or youtu.be/{id} → youtube.com/embed/{id} const youtube = href.match( /(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/))([\w-]{11})/, ); if (youtube) { return { url: `https://www.youtube.com/embed/${youtube[1]}?autoplay=1&mute=1&playsinline=1&rel=0`, isEmbed: true, thumbnail: `https://i.ytimg.com/vi/${youtube[1]}/maxresdefault.jpg`, }; } return { url: href, isEmbed: false, thumbnail: null }; } function resolveHref( href: string, primaryHref: | ReturnType | ReturnType | ReturnType, ): string { if (href === '__primary__') { return typeof primaryHref === 'string' ? primaryHref : primaryHref.url; } return href; } function buildChartPath(points: number[]): string { const resolvedPoints = points.length > 0 ? points : [0]; const maxValue = Math.max(...resolvedPoints); const minValue = Math.min(...resolvedPoints); const chartTop = 42; const chartBottom = 205; const xStep = resolvedPoints.length > 1 ? 640 / (resolvedPoints.length - 1) : 0; return resolvedPoints .map((point, index) => { const ratio = maxValue === minValue ? 0.5 : (point - minValue) / (maxValue - minValue); const x = index * xStep; const y = chartBottom - ratio * (chartBottom - chartTop); return `${index === 0 ? 'M' : 'L'}${x.toFixed(2)} ${y.toFixed(2)}`; }) .join(' '); } function SectionLabel({ children }: { children: ReactNode }) { return ( {children} ); } function LogoMark({ className }: { className?: string }) { return ( ); } function FeatureIcon({ icon: Icon, dark = false, }: { icon: LucideIcon; dark?: boolean; }) { return ( ); } function ChatPreview({ content, brandName, }: { content: LandingContent['chat_preview']; brandName: string; }) { return (
{content.title}
{content.badge}
{content.question}
{content.answer}
{content.plan_badge}

{content.plan_name}

{content.plan_price} {content.plan_interval}

{content.plan_note}

{content.plan_features.map((item) => (
{item}
))}
{content.typing_label}
{content.powered_by_prefix}{' '} {brandName}
); } function GrowthChart({ content }: { content: LandingContent['insights'] }) { const { t } = useT(); const linePath = buildChartPath(content.chart_points); const areaPath = `${linePath} L640 250 L0 250 Z`; const labels = content.chart_labels.length > 0 ? content.chart_labels : [t('Now')]; return (

{content.chart_title}

{content.chart_description}

{content.metric_label}

{content.metric_value} {content.metric_trend}
{[40, 90, 140, 190].map((y) => ( ))} {labels.map((label, index) => ( 1 ? 64 + (index * 520) / (labels.length - 1) : 320 } y="238" fill="#7a8174" fontSize="14" textAnchor="middle" > {label} ))}
); } /** * Initials fallback when a testimonial has no avatar image. Two * letters max, uppercase. Stable across renders for a given name so * the swatch colour stays the same. */ function initialsFor(name: string): string { const parts = name.trim().split(/\s+/).filter(Boolean); if (parts.length === 0) { return '–'; } if (parts.length === 1) { return parts[0].slice(0, 2).toUpperCase(); } return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase(); } /** * Auto-advancing testimonial carousel. Pure-Preact, no Embla / Splide * dependency — keeps the marketing bundle small. Auto-advances every * 7 s, pauses on hover/focus, supports arrow keys and the visible * prev/next buttons. Dot pagination at the bottom. * * Renders one card at a time on every viewport — the testimonial * lives or dies on the quote being readable, so we don't squeeze two * onto a phone screen. */ function TestimonialCarousel({ content, }: { content: LandingContent['testimonials']; }) { const { t } = useT(); const items = content.items; const [active, setActive] = useState(0); const [paused, setPaused] = useState(false); const containerRef = useRef(null); const count = items.length; useEffect(() => { if (count <= 1 || paused) { return; } const id = window.setInterval(() => { setActive((i) => (i + 1) % count); }, 7000); return () => window.clearInterval(id); }, [count, paused]); if (count === 0) { return null; } const prev = () => setActive((i) => (i - 1 + count) % count); const next = () => setActive((i) => (i + 1) % count); const handleKey = (e: React.KeyboardEvent) => { if (e.key === 'ArrowLeft') { e.preventDefault(); prev(); } else if (e.key === 'ArrowRight') { e.preventDefault(); next(); } }; const current = items[active]; return (
{content.badge}

{content.title}

{content.kicker}

setPaused(true)} onMouseLeave={() => setPaused(false)} onFocus={() => setPaused(true)} onBlur={() => setPaused(false)} onKeyDown={handleKey} className="rounded-3xl border border-[#173f2c]/10 bg-white p-7 shadow-[0_24px_48px_-32px_rgba(23,63,44,0.45)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#173f2c]/40 sm:p-9" >
); } /** * FAQ accordion. Multi-open allowed (one item being open doesn't * collapse the others) — visitors are allowed to compare two answers * side by side. Dependency-free: just a Set in state and * controlled
-style toggle. */ function FaqAccordion({ content }: { content: LandingContent['faq'] }) { const items = content.items; const [open, setOpen] = useState>(() => new Set([0])); if (items.length === 0) { return null; } const toggle = (i: number) => { setOpen((prev) => { const next = new Set(prev); if (next.has(i)) { next.delete(i); } else { next.add(i); } return next; }); }; return (
{content.badge}

{content.title}

{content.kicker}

    {items.map((item, i) => { const isOpen = open.has(i); return (
  • {isOpen && (
    {item.answer}
    )}
    • ); })}
); } export default function MarketingHome({ canRegister, demoAgentId, content, }: Props) { const branding = useBranding(); const [videoOpen, setVideoOpen] = useState(false); const videoEmbed = useMemo( () => toEmbedUrl(content.video.href), [content.video.href], ); const { auth, demo } = usePage().props; const hasUser = Boolean(auth.user); const siteTitle = branding.site_title || content.brand_name; const primaryHref = hasUser ? dashboard() : canRegister ? register() : login(); // Demo-mode: every CTA on the body of the landing page that points // into the app opens in a new tab so the reviewer keeps the // marketing surface open while exploring the live demo. Skip when // the user is already signed in — that's an admin browsing past // their own marketing copy, not a fresh reviewer. const demoOpenInNewTab = Boolean(demo) && !hasUser; const ctaTargetProps = demoOpenInNewTab ? { target: '_blank' as const, rel: 'noopener noreferrer' } : {}; return ( <>
{content.hero.badge}

{content.hero.line_one} {content.hero.accent} {' '} {content.hero.line_two_suffix} {content.hero.line_three_prefix}{' '}

{content.hero.description}

{content.hero.site_test_label}

{({ processing, errors }) => ( <>
{errors.domain && (

{errors.domain}

)} )}

{content.hero.site_test_helper}

{demoAgentId && (

{content.hero.live_demo_notice}

)}
{content.stats.map((stat, index) => { const Icon = resolveIcon( stat.icon, Sparkles, ); return (

{stat.value}

{stat.label}

{index < content.stats.length - 1 && ( )}
); })}
{content.video.badge}

{content.video.title}

{content.video.description}

{content.video.bullets.map((item) => (
{item}
))}
{/* If the configured URL is a recognised Vimeo / YouTube link we open it inline in a modal. For anything else (a direct page link, a .mp4 etc.) we fall back to navigating normally. */} {videoEmbed.isEmbed ? ( ) : (

{content.video.footer_title}

{content.video.footer_description}

{content.video.button_label}
)} {videoEmbed.isEmbed && videoOpen && (