import React from 'react'; import { Head, Link } from '@inertiajs/react'; import { useTranslation } from 'react-i18next'; import MarketingLayout from '@/layouts/mainWebsite'; import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'; import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'; import { CheckCircle2, Images, Sparkles, Users } from 'lucide-react'; type HeroStat = { value: string; label: string }; type ExperienceStep = { title: string; description: string }; type ExperienceGroup = { label: string; intro: string; steps: ExperienceStep[]; callouts: string[]; }; type TimelineItem = { title: string; body: string; tips: string[] }; type UseCase = { value: string; label: string; goal: string; recommendations: string[]; ideas: string[]; }; type FaqItem = { question: string; answer: string }; const iconByUseCase: Record = { wedding: , birthday: , corporate: , confirmation: , public: , }; const HowItWorks: React.FC = () => { const { t } = useTranslation('marketing'); const { localizedPath } = useLocalizedRoutes(); const hero = t('how_it_works_page.hero', { returnObjects: true }) as { title: string; subtitle: string; primaryCta: string; secondaryCta: string; stats: HeroStat[]; }; const experience = t('how_it_works_page.experience', { returnObjects: true }) as { host: ExperienceGroup; guest: ExperienceGroup; }; const pillars = t('how_it_works_page.pillars', { returnObjects: true }) as Array<{ title: string; description: string; }>; const timeline = t('how_it_works_page.timeline', { returnObjects: true }) as TimelineItem[]; const useCases = t('how_it_works_page.use_cases', { returnObjects: true }) as { title: string; description: string; tabs: UseCase[]; }; const checklist = t('how_it_works_page.checklist', { returnObjects: true }) as { title: string; items: string[]; cta: string; }; const faq = t('how_it_works_page.faq', { returnObjects: true }) as { title: string; items: FaqItem[]; }; const support = t('how_it_works_page.support', { returnObjects: true }) as { title: string; description: string; cta: string; }; return (
Fotospiel Flow

{hero.title}

{hero.subtitle}

{hero.stats.map((stat) => ( {stat.value} {stat.label} ))}
{experience.host.label} {experience.guest.label}
Core Features

{t('home.features_title', 'Warum Fotospiel?')}

{t('home.hero_description')}

{pillars.map((pillar) => ( {pillar.title}

{pillar.description}

))}
{t('how_it_works_page.timeline_title', 'Der Ablauf im Detail')}

Ein klarer Fahrplan für dein Event

{timeline.map((item, index) => (
{index + 1} {item.title}

{item.body}

{item.tips?.length ? (

{t('marketing.actions.tips', 'Tipps')}

    {item.tips.map((tip) => (
  • {tip}
    • ))}
) : null} ))}
{useCases.title}

{useCases.description}

{useCases.tabs.map((tab) => ( {tab.label} ))} {useCases.tabs.map((tab) => (
{tab.label} {tab.goal}
{iconByUseCase[tab.value] ?? }

{t('marketing.labels.recommendations', 'Empfehlungen')}

    {tab.recommendations.map((item) => (
  • {item}
    • ))}

{t('marketing.labels.challengeIdeas', 'Ideen für Challenges')}

{tab.ideas.map((idea) => ( {idea} ))}
))}
{checklist.title} {t('marketing.labels.prepHint', 'Alles, was du vor dem Event abhaken solltest.')}
    {checklist.items.map((item) => (
  • {item}
    • ))}

{faq.title}

{faq.items.map((item, index) => ( {item.question} {item.answer} ))}
{support.title} {support.description}
); }; const ExperiencePanel: React.FC<{ data: ExperienceGroup }> = ({ data }) => { const { t } = useTranslation('marketing'); return ( {data.label} {data.intro}
{data.steps.map((step, index) => (
{index + 1}

{step.title}

{step.description}

))}
{data.callouts?.length ? (

{t('how_it_works_page.labels.good_to_know', 'Gut zu wissen')}

    {data.callouts.map((item) => (
  • {item}
    • ))}
) : null} ); }; HowItWorks.layout = (page: React.ReactNode) => page; export default HowItWorks;