import React from 'react'; import { Head, Link, useForm } from '@inertiajs/react'; import { useTranslation } from 'react-i18next'; import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes'; import MarketingLayout from '@/layouts/mainWebsite'; import { useAnalytics } from '@/hooks/useAnalytics'; import { useCtaExperiment } from '@/hooks/useCtaExperiment'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Textarea } from '@/components/ui/textarea'; import { ArrowRight, Camera, QrCode, ShieldCheck, Sparkles, Smartphone } from 'lucide-react'; interface Package { id: number; name: string; description: string; price: number; } interface Props { packages: Package[]; } const heroBulletIcons = [Sparkles, ShieldCheck, Camera]; const howStepIcons = [QrCode, Smartphone, ShieldCheck]; const Home: React.FC = ({ packages }) => { const { t } = useTranslation('marketing'); const { localizedPath } = useLocalizedRoutes(); const { trackEvent } = useAnalytics(); const { variant: heroCtaVariant, trackClick: trackHeroCtaClick, } = useCtaExperiment('home_hero_cta'); const { data, setData, post, processing, errors, reset } = useForm({ name: '', email: '', message: '', }); const heroBulletsRaw = t('home.hero_bullets', { returnObjects: true }); const heroBullets = Array.isArray(heroBulletsRaw) ? (heroBulletsRaw as string[]) : []; const featuresRaw = t('home.features_highlight', { returnObjects: true }); const features = Array.isArray(featuresRaw) ? (featuresRaw as Array<{ title: string; description: string }>) : []; const howSteps = [ { icon: howStepIcons[0] ?? QrCode, title: t('home.step1_title'), description: t('home.step1_desc'), }, { icon: howStepIcons[1] ?? Smartphone, title: t('home.step2_title'), description: t('home.step2_desc'), }, { icon: howStepIcons[2] ?? ShieldCheck, title: t('home.step3_title'), description: t('home.step3_desc'), }, ]; const occasionLinks = [ { key: 'wedding', href: localizedPath('/anlaesse/hochzeit') }, { key: 'birthday', href: localizedPath('/anlaesse/geburtstag') }, { key: 'corporate', href: localizedPath('/anlaesse/firmenevent') }, { key: 'confirmation', href: localizedPath('/anlaesse/konfirmation') }, ]; const heroPrimaryHref = localizedPath('/demo'); const heroPrimaryLabel = heroCtaVariant === 'gradient' ? t('home.cta_demo_highlight') : t('home.cta_demo'); const heroSecondaryHref = localizedPath('/so-funktionierts'); const heroSecondaryLabel = t('home.cta_how'); const heroTertiaryHref = localizedPath('/packages'); const heroTertiaryLabel = t('home.cta_packages'); const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); post(localizedPath('/kontakt'), { onSuccess: () => { trackEvent({ category: 'marketing_home', action: 'contact_submit', }); reset(); }, }); }; React.useEffect(() => { if (Object.keys(errors).length > 0) { window.scrollTo({ top: 0, behavior: 'smooth' }); } }, [errors]); return (
{t('home.hero_tagline')}

{t('home.hero_title')}

{t('home.hero_description')}

{heroBullets.length > 0 && (
    {heroBullets.map((item, index) => { const Icon = heroBulletIcons[index % heroBulletIcons.length] ?? Sparkles; return (
  • {item}
    • ); })}
)}
trackEvent({ category: 'marketing_home', action: 'hero_packages_cta', }) } className="font-semibold text-rose-500 underline-offset-4 hover:underline dark:text-rose-200" > {heroTertiaryLabel}
{t('home.hero_image_alt')}

{t('home.how_title')}

{t('home.how_subtitle')}

{howSteps.map(({ icon: Icon, title, description }, index) => ( {title} {description} ))}
{t('home.demo_title')}

{t('home.demo_description')}

{t('home.demo_hint')}

{t('home.demo_media_alt')}

trackEvent({ category: 'marketing_home', action: 'demo_frame_cta', }) } className="text-sm font-semibold text-white underline-offset-4 hover:underline" > {t('home.demo_cta')}

{t('home.features_title')}

{features.map((feature, index) => ( {feature.title} {feature.description} ))}
{t('home.occasions_title')} {t('home.occasions_description')} {occasionLinks.map(({ key, href }) => ( trackEvent({ category: 'marketing_home', action: 'occasion_tile_click', name: key, }) } className="group flex items-center gap-3 rounded-xl border border-rose-100/60 bg-white/80 px-4 py-3 text-sm font-semibold text-rose-600 shadow-sm shadow-rose-100/50 transition hover:bg-rose-50 hover:text-rose-700 dark:border-rose-500/30 dark:bg-gray-900/70 dark:text-rose-200 dark:hover:bg-rose-500/10" > {t(`home.occasions.${key}`)} ))} {t('home.blog_teaser_title')} {t('home.blog_teaser_description')}

{t('home.packages_title')}

{t('home.packages_subtitle')}

{packages.slice(0, 2).map((pkg) => ( {pkg.name} {pkg.description}

{pkg.price} {t('currency.euro')}

))}
{t('home.contact_title')} {t('home.contact_lead')}
setData('name', event.target.value)} className="h-12 rounded-xl border-gray-200/70 bg-white/90 shadow-inner shadow-gray-200/40 focus-visible:ring-rose-300/60 dark:border-gray-700 dark:bg-gray-900/70" autoComplete="name" required /> {errors.name && (

{errors.name}

)}
setData('email', event.target.value)} className="h-12 rounded-xl border-gray-200/70 bg-white/90 shadow-inner shadow-gray-200/40 focus-visible:ring-rose-300/60 dark:border-gray-700 dark:bg-gray-900/70" autoComplete="email" required /> {errors.email && (

{errors.email}

)}