import React from 'react';
import { Head, Link } from '@inertiajs/react';
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
import { useTranslation } from 'react-i18next';
import MarketingLayout from '@/layouts/mainWebsite';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import { Button } from '@/components/ui/button';
import { motion, useReducedMotion } from 'framer-motion';

interface OccasionsProps {
  type: string;
}

const Occasions: React.FC<OccasionsProps> = ({ type }) => {
  const { t, i18n } = useTranslation('marketing');
  const { localizedPath } = useLocalizedRoutes();
  const locale = i18n.language || 'de';
  const isEn = locale.toLowerCase().startsWith('en');
  const shouldReduceMotion = useReducedMotion();
  const viewportOnce = { once: true, amount: 0.25 };
  const revealUp = {
    hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 18 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] },
    },
  };
  const stagger = {
    hidden: {},
    visible: { transition: { staggerChildren: 0.12 } },
  };

  const occasionsContent = {
    hochzeit: {
      title: t('occasions.weddings.title'),
      description: t('occasions.weddings.description'),
      features: [
        t('occasions.weddings.benefit1'),
        t('occasions.weddings.benefit2'),
        t('occasions.weddings.benefit3'),
        t('occasions.weddings.benefit4'),
      ],
      cta: t('occasions.cta'),
    },
    geburtstag: {
      title: t('occasions.birthdays.title'),
      description: t('occasions.birthdays.description'),
      features: [
        t('occasions.birthdays.benefit1'),
        t('occasions.birthdays.benefit2'),
        t('occasions.birthdays.benefit3'),
        t('occasions.birthdays.benefit4'),
      ],
      cta: t('occasions.cta'),
    },
    firmenevent: {
      title: t('occasions.corporate.title'),
      description: t('occasions.corporate.description'),
      features: [
        t('occasions.corporate.benefit1'),
        t('occasions.corporate.benefit2'),
        t('occasions.corporate.benefit3'),
        t('occasions.corporate.benefit4'),
      ],
      cta: t('occasions.cta'),
    },
    konfirmation: {
      title: t('occasions.confirmation.title'),
      description: t('occasions.confirmation.description'),
      features: [
        t('occasions.confirmation.benefit1'),
        t('occasions.confirmation.benefit2'),
        t('occasions.confirmation.benefit3'),
        t('occasions.confirmation.benefit4'),
      ],
      cta: t('occasions.cta'),
    },
  } as const;

  const content = occasionsContent[type as keyof typeof occasionsContent] || occasionsContent.hochzeit;

  // Default, simple layout for unknown types
  if (!['hochzeit', 'geburtstag', 'firmenevent', 'konfirmation'].includes(type)) {
    return (
      <MarketingLayout title={content.title}>
        <Head title={content.title} />
        <div className="min-h-screen bg-gray-50 py-16 px-4 dark:bg-gray-900">
          <div className="container mx-auto max-w-4xl space-y-8">
            <div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400">
              <nav className="flex flex-wrap items-center gap-2">
                <Link href={localizedPath('/')} className="hover:text-gray-900 dark:hover:text-gray-100">
                  {t('nav.home')}
                </Link>
                <span>/</span>
                <span className="text-gray-700 dark:text-gray-200">{t('nav.occasions')}</span>
                <span>/</span>
                <span className="text-gray-700 dark:text-gray-200">{content.title}</span>
              </nav>
              <Link href={localizedPath('/packages')} className="text-pink-600 hover:text-pink-700">
                {t('nav.discover_packages')}
              </Link>
            </div>

            <div className="text-center">
              <h1 className="mb-6 font-display text-4xl font-bold text-gray-900 dark:text-gray-100 md:text-5xl">{content.title}</h1>
              <p className="mb-8 font-sans-marketing text-xl text-gray-600 dark:text-gray-300">{content.description}</p>
              <Link
                href={localizedPath('/packages')}
                className="rounded-full bg-[#FFB6C1] px-8 py-4 font-bold text-white transition hover:bg-pink-600"
              >
                {content.cta}
              </Link>
            </div>

            <div className="grid gap-8 md:grid-cols-3">
              {content.features.map((feature, index) => (
                <div key={index} className="rounded-lg bg-white p-6 text-center shadow-md dark:bg-gray-800">
                  <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-[#FFB6C1]">
                    <span className="font-bold text-white">{index + 1}</span>
                  </div>
                  <h3 className="mb-2 text-lg font-semibold text-gray-900 dark:text-gray-100">{feature}</h3>
                </div>
              ))}
            </div>
          </div>
        </div>
      </MarketingLayout>
    );
  }

  // Wedding (Hochzeit)
  if (type === 'hochzeit') {
    if (isEn) {
      return (
        <MarketingLayout title={content.title}>
          <Head title={content.title} />

          <section className="bg-gradient-to-br from-pink-50 via-white to-amber-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
            <motion.div className="container mx-auto max-w-5xl space-y-8" variants={stagger} initial="hidden" animate="visible">
              <motion.div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400" variants={revealUp}>
                <nav className="flex flex-wrap items-center gap-2">
                  <Link href={localizedPath('/')} className="hover:text-gray-900 dark:hover:text-gray-100">
                    {t('nav.home')}
                  </Link>
                  <span>/</span>
                  <span className="text-gray-700 dark:text-gray-200">{t('nav.occasions')}</span>
                  <span>/</span>
                  <span className="text-gray-700 dark:text-gray-200">{content.title}</span>
                </nav>
                <Link href={localizedPath('/packages')} className="text-pink-600 hover:text-pink-700">
                  {t('nav.discover_packages')}
                </Link>
              </motion.div>

              <motion.div variants={revealUp}>
                <Card className="relative overflow-hidden rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
                  <CardContent className="space-y-8 p-6 md:p-10">
                  <div className="flex flex-col gap-8 md:grid md:grid-cols-[minmax(0,1.3fr)_1fr] md:items-center">
                    <div className="space-y-5">
                      <Badge
                        variant="outline"
                        className="border-pink-200 bg-white/70 text-pink-600 dark:border-pink-500/60 dark:bg-gray-900/70 dark:text-pink-200"
                      >
                        {t('occasions.weddings.title')}
                      </Badge>
                      <h1 className="font-display text-3xl font-bold leading-tight text-gray-900 dark:text-gray-50 md:text-4xl">
                        Unposed, emotional wedding photos from your guests
                      </h1>
                      <p className="font-sans-marketing text-base leading-relaxed text-gray-700 dark:text-gray-200 md:text-lg">
                        The Fotospiel App turns your entire guest list into a creative photo team. Instead of stiff photo booth poses,
                        you get real moments – from tears of joy to dancefloor chaos – all collected in one moderated gallery.
                      </p>
                      <ul className="mt-4 space-y-2 text-sm text-gray-700 dark:text-gray-200">
                        <li>• Emotion-packed snapshots instead of staged photo booth pictures</li>
                        <li>• Guests become storytellers – no app store, no login required</li>
                        <li>• Everything in one GDPR-friendly gallery under your control</li>
                      </ul>
                      <div className="mt-6 flex flex-wrap gap-3">
                        <Button asChild className="bg-[#FFB6C1] text-white hover:bg-[#FF69B4]">
                          <Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
                        </Button>
                        <Button
                          asChild
                          variant="outline"
                          className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
                        >
                          <Link href={localizedPath('/packages')}>{content.cta}</Link>
                        </Button>
                      </div>
                    </div>

                    <div className="relative">
                      <div className="rounded-3xl bg-gradient-to-br from-pink-200 via-white to-amber-100 p-4 shadow-2xl dark:from-pink-900/40 dark:via-gray-900 dark:to-gray-950">
                        <div className="grid gap-2 text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
                          <div className="flex items-center justify-between rounded-2xl bg-white/80 px-4 py-3 dark:bg-gray-900/80">
                            <span>📱 QR at the entrance</span>
                            <span className="text-[10px] text-gray-500">Guests scan and join</span>
                          </div>
                          <div className="flex items-center justify-between rounded-2xl bg-white/80 px-4 py-3 dark:bg-gray-900/80">
                            <span>🎯 Photo tasks</span>
                            <span className="text-[10px] text-gray-500">“First dance”, “Biggest laugh”</span>
                          </div>
                          <div className="flex items-center justify-between rounded-2xl bg-white/80 px-4 py-3 dark:bg-gray-900/80">
                            <span>📸 Live gallery</span>
                            <span className="text-[10px] text-gray-500">Your day in real time</span>
                          </div>
                          <div className="flex items-center justify-between rounded-2xl bg-white/80 px-4 py-3 dark:bg-gray-900/80">
                            <span>💾 Download afterwards</span>
                            <span className="text-[10px] text-gray-500">Perfect for your album</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  </CardContent>
                </Card>
              </motion.div>
            </motion.div>
          </section>

          <section className="bg-white px-4 py-14 dark:bg-gray-950 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
            <motion.div className="container mx-auto max-w-6xl space-y-10" variants={stagger} initial="hidden" whileInView="visible" viewport={viewportOnce}>
              <motion.div className="grid gap-10 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]" variants={stagger}>
                <motion.div className="space-y-8" variants={revealUp}>
                  <div>
                    <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-50">{t('occasions.weddings.benefits_title')}</h2>
                    <p className="mt-2 text-gray-600 dark:text-gray-300">
                      Picture your wedding as a collaborative photo adventure: guests capture the day from their own perspectives –
                      from getting ready to the last song on the dancefloor.
                    </p>
                  </div>

                  <div className="grid gap-6 md:grid-cols-2">
                    <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                      <CardContent className="space-y-3 p-6">
                        <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                          Without the Fotospiel App
                        </p>
                        <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
                          <li>• Photos disappear into countless chat groups</li>
                          <li>• Photo booth images stay in a corner</li>
                          <li>• Many lovely moments never make it into your album</li>
                        </ul>
                      </CardContent>
                    </Card>

                    <Card className="border-pink-200 shadow-md dark:border-pink-500/50 dark:bg-gray-900">
                      <CardContent className="space-y-3 p-6">
                        <p className="text-sm font-semibold uppercase tracking-wide text-pink-600 dark:text-pink-300">
                          With the Fotospiel App
                        </p>
                        <ul className="space-y-2 text-sm text-gray-700 dark:text-gray-100">
                          <li>• Guests actively capture your celebration</li>
                          <li>• Tasks guide their view to your highlights</li>
                          <li>• You already see first favorite shots during the party</li>
                        </ul>
                      </CardContent>
                    </Card>
                  </div>

                  <div className="space-y-4">
                    <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-50">Best practices for your wedding setup</h3>
                    <ol className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
                      <li>1. Add the QR code to your invitation or wedding website.</li>
                      <li>2. Explain the photo tasks clearly – for example on table cards or next to the guestbook.</li>
                      <li>3. Announce a short “photo challenge” slot between dinner and party (e.g. 20–30 minutes).</li>
                      <li>4. Show a small slideshow of the best guest photos in the evening.</li>
                      <li>5. After the wedding, go through the gallery together and mark favorites for your album.</li>
                    </ol>
                  </div>
                </motion.div>

                <motion.aside className="space-y-6" variants={revealUp}>
                  <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                    <CardContent className="space-y-3 p-6">
                      <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                        Who is this ideal for?
                      </p>
                      <ul className="space-y-1 text-sm text-gray-700 dark:text-gray-200">
                        <li>• Couples who want real emotions instead of staged photos</li>
                        <li>• Best (wo)men planning a heartfelt surprise</li>
                        <li>• Photographers who value additional guest-perspective material</li>
                      </ul>
                    </CardContent>
                  </Card>

                  <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                    <CardContent className="space-y-3 p-6">
                      <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                        Our recommendation
                      </p>
                      <p className="text-sm text-gray-700 dark:text-gray-200">
                        For typical weddings with 60–150 guests, choose a package with enough photo storage and a longer gallery
                        lifetime so you can revisit your memories in peace.
                      </p>
                      <Button asChild size="sm" className="mt-1 bg-[#FFB6C1] text-white hover:bg-[#FF69B4]">
                        <Link href={localizedPath('/packages')}>{t('occasions.cta')}</Link>
                      </Button>
                    </CardContent>
                  </Card>

                  <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                    <CardContent className="space-y-3 p-6">
                      <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                        Frequently asked questions
                      </p>
                      <ul className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
                        <li>
                          <span className="font-semibold">Do guests need an account?</span>
                          <br />
                          No – scan the QR code, take photos, done.
                        </li>
                        <li>
                          <span className="font-semibold">How do we stay in control?</span>
                          <br />
                          You decide which photos are visible by moderating uploads.
                        </li>
                        <li>
                          <span className="font-semibold">What about poor reception?</span>
                          <br />
                          The Fotospiel App works offline and syncs later.
                        </li>
                      </ul>
                    </CardContent>
                  </Card>
                </motion.aside>
              </motion.div>

              <motion.div variants={revealUp}>
                <Separator className="my-8" />
              </motion.div>

              <motion.div variants={revealUp}>
                <div className="grid gap-6 md:grid-cols-2">
                  <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                    <CardContent className="space-y-3 p-6">
                      <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                        What couples say
                      </p>
                      <p className="text-sm text-gray-700 dark:text-gray-200">
                        “We ended up with more than 800 guest photos – from little mishaps to the most emotional moments. Our
                        photographer loved how well the Fotospiel App complemented her work.”
                      </p>
                    </CardContent>
                  </Card>

                  <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                    <CardContent className="space-y-3 p-6">
                      <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                        Next step
                      </p>
                      <p className="text-sm text-gray-700 dark:text-gray-200">
                        Try the Fotospiel App with a test event or set up your wedding gallery right away. You can start small and
                        upgrade later at any time.
                      </p>
                      <div className="flex flex-wrap gap-3">
                        <Button asChild size="sm" className="bg-[#FFB6C1] text-white hover:bg-[#FF69B4]">
                          <Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
                        </Button>
                        <Button
                          asChild
                          size="sm"
                          variant="outline"
                          className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
                        >
                          <Link href={localizedPath('/packages')}>{t('occasions.cta')}</Link>
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </motion.div>
            </motion.div>
        </section>
        </MarketingLayout>
      );
    }

    // German wedding content
    return (
      <MarketingLayout title={content.title}>
        <Head title={content.title} />

        <section className="bg-gradient-to-br from-pink-50 via-white to-amber-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
          <motion.div className="container mx-auto max-w-5xl space-y-8" variants={stagger} initial="hidden" animate="visible">
            <motion.div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400" variants={revealUp}>
              <nav className="flex flex-wrap items-center gap-2">
                <Link href={localizedPath('/')} className="hover:text-gray-900 dark:hover:text-gray-100">
                  {t('nav.home')}
                </Link>
                <span>/</span>
                <span className="text-gray-700 dark:text-gray-200">{t('nav.occasions')}</span>
                <span>/</span>
                <span className="text-gray-700 dark:text-gray-200">{content.title}</span>
              </nav>
              <Link href={localizedPath('/packages')} className="text-pink-600 hover:text-pink-700">
                {t('nav.discover_packages')}
              </Link>
            </motion.div>

            <motion.div variants={revealUp}>
              <Card className="relative overflow-hidden rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
                <CardContent className="space-y-8 p-6 md:p-10">
                <div className="flex flex-col gap-8 md:grid md:grid-cols-[minmax(0,1.3fr)_1fr] md:items-center">
                  <div className="space-y-5">
                    <Badge
                      variant="outline"
                      className="border-pink-200 bg-white/70 text-pink-600 dark:border-pink-500/60 dark:bg-gray-900/70 dark:text-pink-200"
                    >
                      {t('occasions.weddings.title')}
                    </Badge>
                    <h1 className="font-display text-3xl font-bold leading-tight text-gray-900 dark:text-gray-50 md:text-4xl">
                      {t('occasions.weddings.hero_title', { defaultValue: content.title })}
                    </h1>
                    <p className="font-sans-marketing text-base leading-relaxed text-gray-700 dark:text-gray-200 md:text-lg">
                      {content.description}
                    </p>
                    <ul className="mt-4 space-y-2 text-sm text-gray-700 dark:text-gray-200">
                      <li>• Emotionale Momentaufnahmen statt gestellter Fotobox-Bilder</li>
                      <li>• Gäste werden zu Storyteller:innen – ohne App-Download</li>
                      <li>• Alles DSGVO-freundlich in einer gemeinsamen Galerie</li>
                    </ul>
                    <div className="mt-6 flex flex-wrap gap-3">
                      <Button asChild className="bg-[#FFB6C1] text-white hover:bg-[#FF69B4]">
                        <Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
                      </Button>
                      <Button
                        asChild
                        variant="outline"
                        className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
                      >
                        <Link href={localizedPath('/packages')}>{content.cta}</Link>
                      </Button>
                    </div>
                  </div>

                  <div className="relative">
                    <div className="rounded-3xl bg-gradient-to-br from-pink-200 via-white to-amber-100 p-4 shadow-2xl dark:from-pink-900/40 dark:via-gray-900 dark:to-gray-950">
                      <div className="grid gap-2 text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
                        <div className="flex items-center justify-between rounded-2xl bg-white/80 px-4 py-3 dark:bg-gray-900/80">
                          <span>📱 QR-Code am Eingang</span>
                          <span className="text-[10px] text-gray-500">Gäste scannen &amp; starten</span>
                        </div>
                        <div className="flex items-center justify-between rounded-2xl bg-white/80 px-4 py-3 dark:bg-gray-900/80">
                          <span>🎯 Fotoaufgaben</span>
                          <span className="text-[10px] text-gray-500">„Erster Tanz", „Lautestes Lachen"</span>
                        </div>
                        <div className="flex items-center justify-between rounded-2xl bg-white/80 px-4 py-3 dark:bg-gray-900/80">
                          <span>📸 Live-Galerie</span>
                          <span className="text-[10px] text-gray-500">Euer Tag in Echtzeit</span>
                        </div>
                        <div className="flex items-center justify-between rounded-2xl bg-white/80 px-4 py-3 dark:bg-gray-900/80">
                          <span>💾 Download danach</span>
                          <span className="text-[10px] text-gray-500">Perfekt fürs Album</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                </CardContent>
              </Card>
            </motion.div>
          </motion.div>
        </section>

        <section className="bg-white px-4 py-14 dark:bg-gray-950 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
          <motion.div className="container mx-auto max-w-6xl space-y-10" variants={stagger} initial="hidden" whileInView="visible" viewport={viewportOnce}>
            <motion.div className="grid gap-10 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]" variants={revealUp}>
              <div className="space-y-8">
                <div>
                  <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-50">{t('occasions.weddings.benefits_title')}</h2>
                  <p className="mt-2 text-gray-600 dark:text-gray-300">
                    Stell dir eure Hochzeitsfeier als gemeinsames Foto-Abenteuer vor: Gäst:innen werden zu Geschichtenerzähler:innen,
                    die euren Tag aus ganz eigenen Blickwinkeln festhalten – vom Getting Ready bis zum letzten Song.
                  </p>
                </div>

                <div className="grid gap-6 md:grid-cols-2">
                  <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                    <CardContent className="space-y-3 p-6">
                      <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                        Ohne die Fotospiel App
                      </p>
                      <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
                        <li>• Fotos versteckt in zig WhatsApp-Gruppen</li>
                        <li>• Fotobox-Bilder bleiben in der Ecke</li>
                        <li>• Viele tolle Momente gehen unter</li>
                      </ul>
                    </CardContent>
                  </Card>

                  <Card className="border-pink-200 shadow-md dark:border-pink-500/50 dark:bg-gray-900">
                    <CardContent className="space-y-3 p-6">
                      <p className="text-sm font-semibold uppercase tracking-wide text-pink-600 dark:text-pink-300">
                        Mit der Fotospiel App
                      </p>
                      <ul className="space-y-2 text-sm text-gray-700 dark:text-gray-100">
                        <li>• Alle Gäste fotografieren aktiv mit</li>
                        <li>• Aufgaben leiten den Blick auf eure Highlights</li>
                        <li>• Ihr seht schon am Abend erste Lieblingsbilder</li>
                      </ul>
                    </CardContent>
                  </Card>
                </div>

                <div className="space-y-4">
                  <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-50">Best Practices für euren Hochzeitseinsatz</h3>
                  <ol className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
                    <li>1. QR-Code bereits in der Einladung oder auf eurer Hochzeitswebseite einbinden.</li>
                    <li>2. Fotoaufgaben klar kommunizieren – z.B. als Karte am Platz oder am Gästebuch.</li>
                    <li>3. Zwischen Essen und Party einen „Foto-Challenge"-Slot ankündigen (z.B. 20–30 Minuten).</li>
                    <li>4. Abends eine kleine Slideshow aus den besten Gäste-Fotos zeigen.</li>
                    <li>5. Nach der Hochzeit gemeinsam durch die Galerie gehen und Favoriten fürs Album markieren.</li>
                  </ol>
                </div>
              </div>

              <aside className="space-y-6">
                <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                  <CardContent className="space-y-3 p-6">
                    <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                      Für wen ist das ideal?
                    </p>
                    <ul className="space-y-1 text-sm text-gray-700 dark:text-gray-200">
                      <li>• Paare, die echte Emotionen statt gestellter Fotos möchten</li>
                      <li>• Trauzeug:innen, die eine liebevolle Aktion organisieren wollen</li>
                      <li>• Fotograf:innen, die ergänzendes Material aus Gästeperspektive schätzen</li>
                    </ul>
                  </CardContent>
                </Card>

                <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                  <CardContent className="space-y-3 p-6">
                    <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                      Unsere Empfehlung
                    </p>
                    <p className="text-sm text-gray-700 dark:text-gray-200">
                      Für typische Hochzeiten mit 60–150 Gästen passt meist ein Paket mit ausreichend Fotospeicher und einer
                      längeren Galeriedauer am besten.
                    </p>
                    <Button asChild size="sm" className="mt-1 bg-[#FFB6C1] text-white hover:bg-[#FF69B4]">
                      <Link href={localizedPath('/packages')}>{t('occasions.cta')}</Link>
                    </Button>
                  </CardContent>
                </Card>

                <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                  <CardContent className="space-y-3 p-6">
                    <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                      Häufige Fragen
                    </p>
                    <ul className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
                      <li>
                        <span className="font-semibold">Brauchen Gäste einen Account?</span>
                        <br />
                        Nein – QR scannen, Fotos machen, fertig.
                      </li>
                      <li>
                        <span className="font-semibold">Wie behaltet ihr die Kontrolle?</span>
                        <br />
                        Ihr könnt Fotos moderieren und nur freigegebene Bilder sichtbar machen.
                      </li>
                      <li>
                        <span className="font-semibold">Was ist mit schlechtem Empfang?</span>
                        <br />
                        Die PWA funktioniert auch offline und synchronisiert später.
                      </li>
                    </ul>
                  </CardContent>
                </Card>
              </aside>
            </motion.div>

            <motion.div variants={revealUp}>
              <Separator className="my-8" />
            </motion.div>

            <motion.div variants={revealUp}>
              <div className="grid gap-6 md:grid-cols-2">
                <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                <CardContent className="space-y-3 p-6">
                  <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                    Was Paare berichten
                  </p>
                  <p className="text-sm text-gray-700 dark:text-gray-200">
                    „Wir hatten über 800 Gästefotos – von kleinen Pannen bis zu den emotionalsten Momenten. Unsere Fotografin war
                    begeistert, wie gut die Fotospiel App ihre Arbeit ergänzt hat.“
                  </p>
                </CardContent>
              </Card>

                <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                <CardContent className="space-y-3 p-6">
                  <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                    Nächster Schritt
                  </p>
                  <p className="text-sm text-gray-700 dark:text-gray-200">
                    Testet die Fotospiel App mit einem Probe-Event oder legt direkt eure Hochzeits-Galerie an. Ihr könnt klein starten
                    und später jederzeit upgraden.
                  </p>
                  <div className="flex flex-wrap gap-3">
                    <Button asChild size="sm" className="bg-[#FFB6C1] text-white hover:bg-[#FF69B4]">
                      <Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
                    </Button>
                    <Button
                      asChild
                      size="sm"
                      variant="outline"
                      className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
                    >
                      <Link href={localizedPath('/packages')}>{t('occasions.cta')}</Link>
                    </Button>
                  </div>
                </CardContent>
              </Card>
              </div>
            </motion.div>
          </motion.div>
        </section>
      </MarketingLayout>
    );
  }

  // Birthday
  if (type === 'geburtstag') {
    if (isEn) {
      return (
        <MarketingLayout title={content.title}>
          <Head title={content.title} />

          <section className="bg-gradient-to-br from-amber-50 via-white to-pink-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
            <motion.div className="container mx-auto max-w-5xl space-y-8" variants={stagger} initial="hidden" animate="visible">
              <motion.div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400" variants={revealUp}>
                <nav className="flex flex-wrap items-center gap-2">
                  <Link href={localizedPath('/')} className="hover:text-gray-900 dark:hover:text-gray-100">
                    {t('nav.home')}
                  </Link>
                  <span>/</span>
                  <span className="text-gray-700 dark:text-gray-200">{t('nav.occasions')}</span>
                  <span>/</span>
                  <span className="text-gray-700 dark:text-gray-200">{content.title}</span>
                </nav>
                <Link href={localizedPath('/packages')} className="text-pink-600 hover:text-pink-700">
                  {t('nav.discover_packages')}
                </Link>
              </motion.div>

              <motion.div variants={revealUp}>
                <Card className="relative overflow-hidden rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
                  <CardContent className="space-y-8 p-6 md:p-10">
                  <div className="flex flex-col gap-8 md:grid md:grid-cols-[minmax(0,1.4fr)_1fr] md:items-center">
                    <div className="space-y-5">
                      <Badge
                        variant="outline"
                        className="border-amber-200 bg-white/70 text-amber-700 dark:border-amber-400/60 dark:bg-gray-900/70 dark:text-amber-200"
                      >
                        {content.title}
                      </Badge>
                      <h1 className="font-display text-3xl font-bold leading-tight text-gray-900 dark:text-gray-50 md:text-4xl">
                        More than just quick phone snaps
                      </h1>
                      <p className="font-sans-marketing text-base leading-relaxed text-gray-700 dark:text-gray-200 md:text-lg">
                        Whether it&apos;s a kids&apos; birthday or a big milestone party: the Fotospiel App turns all your guests into part of
                        the photo challenge. Instead of scattered images in chat groups, everything ends up in a single moderated
                        gallery.
                      </p>
                      <ul className="mt-4 space-y-2 text-sm text-gray-700 dark:text-gray-200">
                        <li>• QR code on invitations, cake or decor – everyone can join instantly</li>
                        <li>• Playful photo tasks like &quot;biggest smile&quot; or &quot;wildest cake moment&quot;</li>
                        <li>• Gallery for parents and friends – without social-media overload</li>
                      </ul>
                      <div className="mt-6 flex flex-wrap gap-3">
                        <Button asChild className="bg-amber-400 text-gray-900 hover:bg-amber-500">
                          <Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
                        </Button>
                        <Button
                          asChild
                          variant="outline"
                          className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
                        >
                          <Link href={localizedPath('/packages')}>{content.cta}</Link>
                        </Button>
                      </div>
                    </div>

                    <div className="relative">
                      <div className="rounded-3xl bg-gradient-to-br from-amber-200 via-white to-pink-200 p-4 shadow-2xl dark:from-amber-900/30 dark:via-gray-900 dark:to-pink-900/30">
                        <div className="grid gap-2 text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
                          <div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
                            <span>🎂 QR on the cake</span>
                            <span className="text-[10px] text-gray-500">Scan and start</span>
                          </div>
                          <div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
                            <span>🎉 Photo tasks</span>
                            <span className="text-[10px] text-gray-500">&quot;Funniest face&quot;, &quot;Party chaos&quot;</span>
                          </div>
                          <div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
                            <span>📱 Live gallery</span>
                            <span className="text-[10px] text-gray-500">For young and old</span>
                          </div>
                          <div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
                            <span>💾 Memory album</span>
                            <span className="text-[10px] text-gray-500">Download after the party</span>
                          </div>
                        </div>
                      </div>
                  </div>
                </div>
                  </CardContent>
                </Card>
              </motion.div>
            </motion.div>
          </section>

          <section className="bg-white px-4 py-14 dark:bg-gray-950 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
            <motion.div className="container mx-auto max-w-6xl space-y-10" variants={stagger} initial="hidden" whileInView="visible" viewport={viewportOnce}>
              <motion.div className="grid gap-10 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]" variants={revealUp}>
                <div className="space-y-8">
                  <div>
                    <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-50">How to turn your party into a photo challenge</h2>
                    <p className="mt-2 text-gray-600 dark:text-gray-300">
                      From kids&apos; birthdays to adult parties: the Fotospiel App turns passive guests into active story hunters. Your
                      best moments end up safely in one gallery instead of disappearing in chat noise.
                    </p>
                  </div>

                  <div className="grid gap-6 md:grid-cols-2">
                    <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                      <CardContent className="space-y-3 p-6">
                        <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                          Without the Fotospiel App
                        </p>
                        <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
                          <li>• Photos scattered across phones and chats</li>
                          <li>• Parents miss many moments</li>
                          <li>• Hard to pick pictures for thank-you messages</li>
                        </ul>
                      </CardContent>
                    </Card>

                    <Card className="border-amber-200 shadow-md dark:border-amber-400/60 dark:bg-gray-900">
                      <CardContent className="space-y-3 p-6">
                        <p className="text-sm font-semibold uppercase tracking-wide text-amber-700 dark:text-amber-200">
                          With the Fotospiel App
                        </p>
                        <ul className="space-y-2 text-sm text-gray-700 dark:text-gray-100">
                          <li>• All photos land in a single shared gallery</li>
                          <li>• Kids and adults enjoy playful challenges</li>
                          <li>• You end up with a colorful, complete memory album</li>
                        </ul>
                      </CardContent>
                    </Card>
                  </div>

                  <div className="space-y-4">
                    <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-50">Best practices for birthdays</h3>
                    <ol className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
                      <li>1. Place the QR code on invitations, cake or table stands.</li>
                      <li>2. Announce photo tasks out loud – kids love clear challenges.</li>
                      <li>3. Plan a short “photo session” slot (e.g. 15 minutes) in your schedule.</li>
                      <li>4. Send the gallery link to all guests after the party.</li>
                    </ol>
                  </div>
                </div>

                <aside className="space-y-6">
                  <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                    <CardContent className="space-y-3 p-6">
                      <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                        Who is this ideal for?
                      </p>
                      <ul className="space-y-1 text-sm text-gray-700 dark:text-gray-200">
                        <li>• Hosts who want vivid, shared memories</li>
                        <li>• Parents who want to see photos of all kids</li>
                        <li>• Friend groups who love fun challenges</li>
                      </ul>
                    </CardContent>
                  </Card>

                  <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                    <CardContent className="space-y-3 p-6">
                      <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                        Our recommendation
                      </p>
                      <p className="text-sm text-gray-700 dark:text-gray-200">
                        For birthdays with lots of kids, choose a package with enough photo storage and a longer gallery lifetime so
                        everyone can browse calmly after the event.
                      </p>
                      <Button asChild size="sm" className="mt-1 bg-amber-400 text-gray-900 hover:bg-amber-500">
                        <Link href={localizedPath('/packages')}>{t('occasions.cta')}</Link>
                      </Button>
                    </CardContent>
                  </Card>

                  <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                    <CardContent className="space-y-3 p-6">
                      <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                        Frequently asked questions
                      </p>
                      <ul className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
                        <li>
                          <span className="font-semibold">Do kids need their own account?</span>
                          <br />
                          No – it&apos;s enough if parents or older siblings scan the QR code.
                        </li>
                        <li>
                          <span className="font-semibold">Can I keep the gallery private?</span>
                          <br />
                          Yes, you decide who receives the link and which photos are visible.
                        </li>
                        <li>
                          <span className="font-semibold">What if the Wi-Fi is bad?</span>
                          <br />
                          The Fotospiel App stores photos offline and uploads them later.
                        </li>
                      </ul>
                    </CardContent>
                </Card>
              </aside>
            </motion.div>

            <motion.div variants={revealUp}>
              <Separator className="my-8" />
            </motion.div>

            <motion.div variants={revealUp}>
              <div className="grid gap-6 md:grid-cols-2">
                <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                <CardContent className="space-y-3 p-6">
                  <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                    What hosts say
                  </p>
                    <p className="text-sm text-gray-700 dark:text-gray-200">
                      “The kids loved the challenges – and we ended up with all photos in one place instead of scrolling through
                      hundreds of chat messages.”
                    </p>
                </CardContent>
              </Card>

                <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                <CardContent className="space-y-3 p-6">
                  <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                    Next step
                    </p>
                    <p className="text-sm text-gray-700 dark:text-gray-200">
                      Create your birthday event in the Fotospiel App now and test the flow with a few friends – your QR code will be
                      ready in minutes.
                    </p>
                    <div className="flex flex-wrap gap-3">
                      <Button asChild size="sm" className="bg-amber-400 text-gray-900 hover:bg-amber-500">
                        <Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
                      </Button>
                      <Button
                        asChild
                        size="sm"
                        variant="outline"
                        className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
                      >
                        <Link href={localizedPath('/packages')}>{t('occasions.cta')}</Link>
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </motion.div>
          </motion.div>
        </section>
        </MarketingLayout>
      );
    }

    // German version (existing content)
    return (
      <MarketingLayout title={content.title}>
        <Head title={content.title} />

        <section className="bg-gradient-to-br from-amber-50 via-white to-pink-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
          <motion.div className="container mx-auto max-w-5xl space-y-8" variants={stagger} initial="hidden" animate="visible">
            <motion.div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400" variants={revealUp}>
              <nav className="flex flex-wrap items-center gap-2">
                <Link href={localizedPath('/')} className="hover:text-gray-900 dark:hover:text-gray-100">
                  {t('nav.home')}
                </Link>
                <span>/</span>
                <span className="text-gray-700 dark:text-gray-200">{t('nav.occasions')}</span>
                <span>/</span>
                <span className="text-gray-700 dark:text-gray-200">{content.title}</span>
              </nav>
              <Link href={localizedPath('/packages')} className="text-pink-600 hover:text-pink-700">
                {t('nav.discover_packages')}
              </Link>
            </motion.div>

            <motion.div variants={revealUp}>
              <Card className="relative overflow-hidden rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
                <CardContent className="space-y-8 p-6 md:p-10">
                <div className="flex flex-col gap-8 md:grid md:grid-cols-[minmax(0,1.4fr)_1fr] md:items-center">
                  <div className="space-y-5">
                    <Badge
                      variant="outline"
                      className="border-amber-200 bg-white/70 text-amber-700 dark:border-amber-400/60 dark:bg-gray-900/70 dark:text-amber-200"
                    >
                      {content.title}
                    </Badge>
                    <h1 className="font-display text-3xl font-bold leading-tight text-gray-900 dark:text-gray-50 md:text-4xl">
                      Mehr als nur Handy-Schnappschüsse
                    </h1>
                    <p className="font-sans-marketing text-base leading-relaxed text-gray-700 dark:text-gray-200 md:text-lg">
                      Ob Kindergeburtstag oder runde Party: Mit der Fotospiel App werden alle Gäste Teil der Foto-Challenge.
                      Statt verstreuter Bilder in Chat-Gruppen landet alles in einer gemeinsamen, moderierten Galerie.
                    </p>
                    <ul className="mt-4 space-y-2 text-sm text-gray-700 dark:text-gray-200">
                      <li>• QR-Code auf Einladung, Torte oder Deko – jeder kann sofort mitmachen</li>
                      <li>• Spielerische Fotoaufgaben wie „größtes Lächeln" oder „größter Kuchen-Fail"</li>
                      <li>• Galerie für Eltern &amp; Freundeskreis – ohne Social-Media-Zwang</li>
                    </ul>
                    <div className="mt-6 flex flex-wrap gap-3">
                      <Button asChild className="bg-amber-400 text-gray-900 hover:bg-amber-500">
                        <Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
                      </Button>
                      <Button
                        asChild
                        variant="outline"
                        className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
                      >
                        <Link href={localizedPath('/packages')}>{content.cta}</Link>
                      </Button>
                    </div>
                  </div>

                  <div className="relative">
                    <div className="rounded-3xl bg-gradient-to-br from-amber-200 via-white to-pink-200 p-4 shadow-2xl dark:from-amber-900/30 dark:via-gray-900 dark:to-pink-900/30">
                      <div className="grid gap-2 text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
                        <div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
                          <span>🎂 QR auf der Torte</span>
                          <span className="text-[10px] text-gray-500">Scan &amp; los geht's</span>
                        </div>
                        <div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
                          <span>🎉 Foto-Aufgaben</span>
                          <span className="text-[10px] text-gray-500">„Lustigste Grimasse", „Party-Chaos"</span>
                        </div>
                        <div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
                          <span>📱 Live-Galerie</span>
                          <span className="text-[10px] text-gray-500">Für Groß &amp; Klein</span>
                        </div>
                        <div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
                          <span>💾 Erinnerungsalbum</span>
                          <span className="text-[10px] text-gray-500">Download nach der Feier</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                </CardContent>
              </Card>
            </motion.div>
          </motion.div>
        </section>

        <section className="bg-white px-4 py-14 dark:bg-gray-950 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
          <motion.div className="container mx-auto max-w-6xl space-y-10" variants={stagger} initial="hidden" whileInView="visible" viewport={viewportOnce}>
            <motion.div className="grid gap-10 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]" variants={revealUp}>
              <div className="space-y-8">
                <div>
                  <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-50">So wird eure Party zur Foto-Challenge</h2>
                  <p className="mt-2 text-gray-600 dark:text-gray-300">
                    Egal ob Kindergeburtstag oder Erwachsenen-Party: Die Fotospiel App macht aus passiven Gästen aktive
                    Geschichtensucher:innen. Die besten Momente landen sicher in eurer Galerie statt im Chat-Chaos.
                  </p>
                </div>

                <div className="grid gap-6 md:grid-cols-2">
                  <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                    <CardContent className="space-y-3 p-6">
                      <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                        Ohne die Fotospiel App
                      </p>
                      <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
                        <li>• Fotos verteilt auf zig Handys und Chats</li>
                        <li>• Eltern sehen vieles gar nicht</li>
                        <li>• Schwierige Auswahl für Dankes-Nachrichten</li>
                      </ul>
                    </CardContent>
                  </Card>

                  <Card className="border-amber-200 shadow-md dark:border-amber-400/60 dark:bg-gray-900">
                    <CardContent className="space-y-3 p-6">
                      <p className="text-sm font-semibold uppercase tracking-wide text-amber-700 dark:text-amber-200">
                        Mit der Fotospiel App
                      </p>
                      <ul className="space-y-2 text-sm text-gray-700 dark:text-gray-100">
                        <li>• Alle Fotos laufen in einer gemeinsamen Galerie ein</li>
                        <li>• Kids &amp; Erwachsene haben Spaß an den Aufgaben</li>
                        <li>• Am Ende habt ihr ein buntes, vollständiges Erinnerungsalbum</li>
                      </ul>
                    </CardContent>
                  </Card>
                </div>

                <div className="space-y-4">
                  <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-50">Best Practices für Geburtstage</h3>
                  <ol className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
                    <li>1. QR-Code auf Einladung, Torte oder Tischaufstellern platzieren.</li>
                    <li>2. Fotoaufgaben auch laut ankündigen – Kinder lieben klare Challenges.</li>
                    <li>3. Eine kurze „Foto-Session" (z.B. 15 Minuten) in den Ablauf einplanen.</li>
                    <li>4. Nach der Party einen Link zur Galerie an alle Gäste schicken.</li>
                  </ol>
                </div>
              </div>

              <aside className="space-y-6">
                <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                  <CardContent className="space-y-3 p-6">
                    <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                      Für wen ist das ideal?
                    </p>
                    <ul className="space-y-1 text-sm text-gray-700 dark:text-gray-200">
                      <li>• Gastgeber:innen, die eine lebendige Erinnerung schaffen wollen</li>
                      <li>• Eltern, die Fotos aller Kinder gesammelt sehen möchten</li>
                      <li>• Freundesgruppen, die Spaß-Challenges lieben</li>
                    </ul>
                  </CardContent>
                </Card>

                <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                  <CardContent className="space-y-3 p-6">
                    <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                      Unsere Empfehlung
                    </p>
                    <p className="text-sm text-gray-700 dark:text-gray-200">
                      Für Geburtstage mit vielen Kids empfiehlt sich ein Paket mit genügend Fotospeicher und längerer
                      Galeriedauer, damit auch nach der Feier alle in Ruhe stöbern können.
                    </p>
                    <Button asChild size="sm" className="mt-1 bg-amber-400 text-gray-900 hover:bg-amber-500">
                      <Link href={localizedPath('/packages')}>{t('occasions.cta')}</Link>
                    </Button>
                  </CardContent>
                </Card>

                <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                  <CardContent className="space-y-3 p-6">
                    <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                      Häufige Fragen
                    </p>
                    <ul className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
                      <li>
                        <span className="font-semibold">Brauchen Kinder ein eigenes Konto?</span>
                        <br />
                        Nein – es reicht, wenn Eltern oder ältere Geschwister den QR-Code scannen.
                      </li>
                      <li>
                        <span className="font-semibold">Kann ich die Galerie privat halten?</span>
                        <br />
                        Ja, ihr entscheidet, wer den Link bekommt und welche Fotos sichtbar sind.
                      </li>
                      <li>
                        <span className="font-semibold">Was, wenn das WLAN schlecht ist?</span>
                        <br />
                        Die Fotospiel App speichert Fotos offline und lädt sie später hoch.
                      </li>
                    </ul>
                  </CardContent>
                </Card>
              </aside>
            </motion.div>

            <motion.div variants={revealUp}>
              <Separator className="my-8" />
            </motion.div>

            <motion.div variants={revealUp}>
              <div className="grid gap-6 md:grid-cols-2">
                <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                <CardContent className="space-y-3 p-6">
                  <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                    Was Gastgeber:innen berichten
                  </p>
                  <p className="text-sm text-gray-700 dark:text-gray-200">
                    „Die Kinder hatten riesigen Spaß an den Aufgaben – und wir hatten am Ende alle Fotos an einem Ort, statt
                    hunderte Chat-Nachrichten durchsuchen zu müssen."
                  </p>
                </CardContent>
              </Card>

                <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                <CardContent className="space-y-3 p-6">
                  <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                    Nächster Schritt
                  </p>
                  <p className="text-sm text-gray-700 dark:text-gray-200">
                    Legt jetzt euer Geburtstags-Event in der Fotospiel App an und testet den Ablauf mit ein paar Freund:innen – der
                    QR-Code ist in wenigen Minuten startklar.
                  </p>
                  <div className="flex flex-wrap gap-3">
                    <Button asChild size="sm" className="bg-amber-400 text-gray-900 hover:bg-amber-500">
                      <Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
                    </Button>
                    <Button
                      asChild
                      size="sm"
                      variant="outline"
                      className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
                    >
                      <Link href={localizedPath('/packages')}>{t('occasions.cta')}</Link>
                    </Button>
                  </div>
                </CardContent>
              </Card>
              </div>
            </motion.div>
          </motion.div>
        </section>
      </MarketingLayout>
    );
  }

  // Corporate events
  if (type === 'firmenevent') {
    if (isEn) {
      return (
        <MarketingLayout title={content.title}>
          <Head title={content.title} />

          <section className="bg-gradient-to-br from-sky-50 via-white to-slate-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
            <motion.div className="container mx-auto max-w-5xl space-y-8" variants={stagger} initial="hidden" animate="visible">
              <motion.div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400" variants={revealUp}>
                <nav className="flex flex-wrap items-center gap-2">
                  <Link href={localizedPath('/')} className="hover:text-gray-900 dark:hover:text-gray-100">
                    {t('nav.home')}
                  </Link>
                  <span>/</span>
                  <span className="text-gray-700 dark:text-gray-200">{t('nav.occasions')}</span>
                  <span>/</span>
                  <span className="text-gray-700 dark:text-gray-200">{content.title}</span>
                </nav>
                <Link href={localizedPath('/packages')} className="text-pink-600 hover:text-pink-700">
                  {t('nav.discover_packages')}
                </Link>
              </motion.div>

              <motion.div variants={revealUp}>
                <Card className="relative overflow-hidden rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
                  <CardContent className="space-y-8 p-6 md:p-10">
                  <div className="flex flex-col gap-8 md:grid md:grid-cols-[minmax(0,1.5fr)_1fr] md:items-center">
                    <div className="space-y-5">
                      <Badge
                        variant="outline"
                        className="border-sky-200 bg-white/70 text-sky-700 dark:border-sky-400/60 dark:bg-gray-900/70 dark:text-sky-200"
                      >
                        {content.title}
                      </Badge>
                      <h1 className="font-display text-3xl font-bold leading-tight text-gray-900 dark:text-gray-50 md:text-4xl">
                        Event photos HR and marketing can actually use
                      </h1>
                      <p className="font-sans-marketing text-base leading-relaxed text-gray-700 dark:text-gray-200 md:text-lg">
                        The Fotospiel App collects all your event guests&apos; photos in one place – with moderation, branding options
                        and export capabilities. Perfect for HR, marketing and employer branding.
                      </p>
                      <ul className="mt-4 space-y-2 text-sm text-gray-700 dark:text-gray-200">
                        <li>• Photo challenges tailored to your format (fair, offsite, team event)</li>
                        <li>• Moderated gallery instead of uncontrolled social posting</li>
                        <li>• Export for website, intranet and internal comms</li>
                      </ul>
                      <div className="mt-6 flex flex-wrap gap-3">
                        <Button asChild className="bg-sky-600 text-white hover:bg-sky-700">
                          <Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
                        </Button>
                        <Button
                          asChild
                          variant="outline"
                          className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
                        >
                          <Link href={localizedPath('/packages')}>{content.cta}</Link>
                        </Button>
                      </div>
                    </div>

                    <div className="relative">
                      <div className="rounded-3xl bg-gradient-to-br from-sky-200 via-white to-emerald-100 p-4 shadow-2xl dark:from-sky-900/30 dark:via-gray-900 dark:to-emerald-900/30">
                        <div className="grid gap-2 text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
                          <div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
                            <span>🏷️ QR codes on badges &amp; signage</span>
                            <span className="text-[10px] text-gray-500">Join without app store</span>
                          </div>
                          <div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
                            <span>🎯 Themed photo tasks</span>
                            <span className="text-[10px] text-gray-500">“Best team photo”, “Innovation in action”</span>
                          </div>
                          <div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
                            <span>🛡️ Moderated gallery</span>
                            <span className="text-[10px] text-gray-500">Approval by the event team</span>
                          </div>
                          <div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
                            <span>📊 Export &amp; reporting</span>
                            <span className="text-[10px] text-gray-500">Material for HR &amp; marketing</span>
                          </div>
                        </div>
                      </div>
                  </div>
                </div>
                  </CardContent>
                </Card>
              </motion.div>
            </motion.div>
          </section>

          <section className="bg-white px-4 py-14 dark:bg-gray-950 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
            <motion.div className="container mx-auto max-w-6xl space-y-10" variants={stagger} initial="hidden" whileInView="visible" viewport={viewportOnce}>
              <motion.div className="grid gap-10 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]" variants={revealUp}>
                <div className="space-y-8">
                  <div>
                    <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-50">Why the Fotospiel App fits your company</h2>
                    <p className="mt-2 text-gray-600 dark:text-gray-300">
                      Instead of scattered snapshots on employees&apos; private devices, you get a central, controlled event gallery. Ideal
                      for internal communication, social media and employer branding – always with data protection in mind.
                    </p>
                  </div>

                  <div className="grid gap-6 md:grid-cols-2">
                    <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                      <CardContent className="space-y-3 p-6">
                        <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                          Without the Fotospiel App
                        </p>
                        <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
                          <li>• Images live on private employee devices</li>
                          <li>• Clearing rights for individual photos is time-consuming</li>
                          <li>• Little overview of available motifs</li>
                        </ul>
                      </CardContent>
                    </Card>

                    <Card className="border-sky-200 shadow-md dark:border-sky-400/60 dark:bg-gray-900">
                      <CardContent className="space-y-3 p-6">
                        <p className="text-sm font-semibold uppercase tracking-wide text-sky-700 dark:text-sky-200">
                          With the Fotospiel App
                        </p>
                        <ul className="space-y-2 text-sm text-gray-700 dark:text-gray-100">
                          <li>• Central gallery with approval workflow</li>
                          <li>• Quickly available visuals for internal and external channels</li>
                          <li>• Clarity on which images can be used</li>
                        </ul>
                      </CardContent>
                    </Card>
                  </div>

                  <div className="space-y-4">
                    <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-50">Best practices for corporate events</h3>
                    <ol className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
                      <li>1. Place QR codes visibly at registration, buffet and stage areas.</li>
                      <li>2. Briefly explain photo challenges in the welcome or moderation.</li>
                      <li>3. Assign someone on the event team to approve or hide photos.</li>
                      <li>4. Share a curated selection internally and, if appropriate, externally after the event.</li>
                    </ol>
                  </div>
                </div>

                <aside className="space-y-6">
                  <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                    <CardContent className="space-y-3 p-6">
                      <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                        Who is this ideal for?
                      </p>
                      <ul className="space-y-1 text-sm text-gray-700 dark:text-gray-200">
                        <li>• HR teams wanting to showcase culture and team spirit</li>
                        <li>• Marketing teams needing authentic event visuals</li>
                        <li>• Event agencies wanting to create extra value for clients</li>
                      </ul>
                    </CardContent>
                  </Card>

                  <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                    <CardContent className="space-y-3 p-6">
                      <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                        Our recommendation
                      </p>
                      <p className="text-sm text-gray-700 dark:text-gray-200">
                        For recurring formats like offsites or conferences, a yearly package keeps the Fotospiel App ready to go at
                        all times.
                      </p>
                      <Button asChild size="sm" className="mt-1 bg-sky-600 text-white hover:bg-sky-700">
                        <Link href={localizedPath('/packages')}>{t('occasions.cta')}</Link>
                      </Button>
                    </CardContent>
                  </Card>

                  <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                    <CardContent className="space-y-3 p-6">
                      <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                        Frequently asked questions
                      </p>
                      <ul className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
                        <li>
                          <span className="font-semibold">What about data protection?</span>
                          <br />
                          The Fotospiel App is designed for GDPR-compliant use; sensitive data is not stored unnecessarily.
                        </li>
                        <li>
                          <span className="font-semibold">Can we use our own branding?</span>
                          <br />
                          Yes – logos, colors and copy can be aligned with your brand.
                        </li>
                        <li>
                          <span className="font-semibold">How do we get images into the intranet?</span>
                          <br />
                          With simple exports and downloads, your comms team can pull the best shots.
                        </li>
                      </ul>
                    </CardContent>
                  </Card>
                </aside>
              </motion.div>

              <motion.div variants={revealUp}>
                <Separator className="my-8" />
              </motion.div>

              <motion.div variants={revealUp}>
                <div className="grid gap-6 md:grid-cols-2">
                  <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                  <CardContent className="space-y-3 p-6">
                    <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                      What companies say
                    </p>
                    <p className="text-sm text-gray-700 dark:text-gray-200">
                      “After our offsite we finally had all event photos available in one place – HR and marketing were able to prepare
                      intranet and LinkedIn stories within the same week.”
                    </p>
                  </CardContent>
                </Card>

                  <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                  <CardContent className="space-y-3 p-6">
                    <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                      Next step
                    </p>
                    <p className="text-sm text-gray-700 dark:text-gray-200">
                      Talk to your event or HR team about how the Fotospiel App could support your next event – or test it directly with
                      a small internal format.
                    </p>
                    <div className="flex flex-wrap gap-3">
                      <Button asChild size="sm" className="bg-sky-600 text-white hover:bg-sky-700">
                        <Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
                      </Button>
                      <Button
                        asChild
                        size="sm"
                        variant="outline"
                        className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
                      >
                        <Link href={localizedPath('/packages')}>{t('occasions.cta')}</Link>
                      </Button>
                    </div>
                  </CardContent>
                </Card>
                </div>
              </motion.div>
            </motion.div>
          </section>
        </MarketingLayout>
      );
    }

    // German corporate content
    return (
      <MarketingLayout title={content.title}>
        <Head title={content.title} />

        <section className="bg-gradient-to-br from-sky-50 via-white to-slate-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
          <motion.div className="container mx-auto max-w-5xl space-y-8" variants={stagger} initial="hidden" animate="visible">
            <motion.div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400" variants={revealUp}>
              <nav className="flex flex-wrap items-center gap-2">
                <Link href={localizedPath('/')} className="hover:text-gray-900 dark:hover:text-gray-100">
                  {t('nav.home')}
                </Link>
                <span>/</span>
                <span className="text-gray-700 dark:text-gray-200">{t('nav.occasions')}</span>
                <span>/</span>
                <span className="text-gray-700 dark:text-gray-200">{content.title}</span>
              </nav>
              <Link href={localizedPath('/packages')} className="text-pink-600 hover:text-pink-700">
                {t('nav.discover_packages')}
              </Link>
            </motion.div>

            <motion.div variants={revealUp}>
              <Card className="relative overflow-hidden rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
                <CardContent className="space-y-8 p-6 md:p-10">
                <div className="flex flex-col gap-8 md:grid md:grid-cols-[minmax(0,1.5fr)_1fr] md:items-center">
                  <div className="space-y-5">
                    <Badge
                      variant="outline"
                      className="border-sky-200 bg-white/70 text-sky-700 dark:border-sky-400/60 dark:bg-gray-900/70 dark:text-sky-200"
                    >
                      {content.title}
                    </Badge>
                    <h1 className="font-display text-3xl font-bold leading-tight text-gray-900 dark:text-gray-50 md:text-4xl">
                      Event-Fotos, die Marketing &amp; HR wirklich nutzen können
                    </h1>
                    <p className="font-sans-marketing text-base leading-relaxed text-gray-700 dark:text-gray-200 md:text-lg">
                      Die Fotospiel App sammelt alle Gäste-Fotos deines Firmenevents zentral – inklusive Moderation,
                      Branding-Optionen und Exportmöglichkeiten. Perfekt für HR, Marketing und Employer Branding.
                    </p>
                    <ul className="mt-4 space-y-2 text-sm text-gray-700 dark:text-gray-200">
                      <li>• Foto-Challenges passend zu deinem Format (Messe, Offsite, Team-Event)</li>
                      <li>• Moderierte Galerie statt unkontrolliertem Social-Media-Posting</li>
                      <li>• Export für Website, Intranet &amp; interne Kommunikation</li>
                    </ul>
                    <div className="mt-6 flex flex-wrap gap-3">
                      <Button asChild className="bg-sky-600 text-white hover:bg-sky-700">
                        <Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
                      </Button>
                      <Button
                        asChild
                        variant="outline"
                        className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
                      >
                        <Link href={localizedPath('/packages')}>{content.cta}</Link>
                      </Button>
                    </div>
                  </div>

                  <div className="relative">
                    <div className="rounded-3xl bg-gradient-to-br from-sky-200 via-white to-emerald-100 p-4 shadow-2xl dark:from-sky-900/30 dark:via-gray-900 dark:to-emerald-900/30">
                      <div className="grid gap-2 text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
                        <div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
                          <span>🏷️ QR-Codes an Badge &amp; Roll-Up</span>
                          <span className="text-[10px] text-gray-500">Teilnahme ohne App-Store</span>
                        </div>
                        <div className="flex itemsCenter justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
                          <span>🎯 Themen-Aufgaben</span>
                          <span className="text-[10px] text-gray-500">„Bestes Teamfoto", "Innovation in Aktion"</span>
                        </div>
                        <div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
                          <span>🛡️ Moderierte Galerie</span>
                          <span className="text-[10px] text-gray-500">Freigabe durch Orga-Team</span>
                        </div>
                        <div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
                          <span>📊 Export &amp; Reporting</span>
                          <span className="text-[10px] text-gray-500">Material für HR &amp; Marketing</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                </CardContent>
              </Card>
            </motion.div>
          </motion.div>
        </section>

        <section className="bg-white px-4 py-14 dark:bg-gray-950 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
          <motion.div className="container mx-auto max-w-6xl space-y-10" variants={stagger} initial="hidden" whileInView="visible" viewport={viewportOnce}>
            <motion.div className="grid gap-10 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]" variants={revealUp}>
              <div className="space-y-8">
                <div>
                  <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-50">Warum die Fotospiel App fürs Unternehmen passt</h2>
                  <p className="mt-2 text-gray-600 dark:text-gray-300">
                    Statt verstreuter Schnappschüsse auf privaten Smartphones erhält dein Unternehmen eine zentrale,
                    kontrollierte Event-Galerie. Ideal für interne Kommunikation, Social Media und Employer Branding – immer mit Blick
                    auf Datenschutz.
                  </p>
                </div>

                <div className="grid gap-6 md:grid-cols-2">
                  <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                    <CardContent className="space-y-3 p-6">
                      <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                        Ohne die Fotospiel App
                      </p>
                      <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
                        <li>• Bilder liegen auf privaten Geräten der Mitarbeitenden</li>
                        <li>• Rechteklärung für einzelne Fotos ist aufwendig</li>
                        <li>• Kaum Überblick, welche Motive existieren</li>
                      </ul>
                    </CardContent>
                  </Card>

                  <Card className="border-sky-200 shadow-md dark:border-sky-400/60 dark:bg-gray-900">
                    <CardContent className="space-y-3 p-6">
                      <p className="text-sm font-semibold uppercase tracking-wide text-sky-700 dark:text-sky-200">
                        Mit der Fotospiel App
                      </p>
                      <ul className="space-y-2 text-sm text-gray-700 dark:text-gray-100">
                        <li>• Zentrale Galerie mit Freigabe-Workflow</li>
                        <li>• Schnell verfügbare Motive für interne &amp; externe Kommunikation</li>
                        <li>• Klarheit, welche Bilder genutzt werden dürfen</li>
                      </ul>
                    </CardContent>
                  </Card>
                </div>

                <div className="space-y-4">
                  <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-50">Best Practices für Firmenevents</h3>
                  <ol className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
                    <li>1. QR-Codes sichtbar an Registrierung, Buffet und Bühnenbereich platzieren.</li>
                    <li>2. Foto-Challenges in der Begrüßung oder Moderation kurz erklären.</li>
                    <li>3. Verantwortliche Person im Orga-Team für die Freigabe der Fotos benennen.</li>
                    <li>4. Nach dem Event eine kuratierte Auswahl intern und ggf. extern teilen.</li>
                  </ol>
                </div>
              </div>

              <aside className="space-y-6">
                <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                  <CardContent className="space-y-3 p-6">
                    <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                      Für wen ist das ideal?
                    </p>
                    <ul className="space-y-1 text-sm text-gray-700 dark:text-gray-200">
                      <li>• HR-Teams, die Kultur &amp; Teamspirit sichtbar machen wollen</li>
                      <li>• Marketing, das authentische Event-Motive benötigt</li>
                      <li>• Event-Agenturen, die Mehrwert für Kund:innen schaffen möchten</li>
                    </ul>
                  </CardContent>
                </Card>

                <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                  <CardContent className="space-y-3 p-6">
                    <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                      Unsere Empfehlung
                    </p>
                    <p className="text-sm text-gray-700 dark:text-gray-200">
                      Für wiederkehrende Formate wie Offsites oder Konferenzen bietet sich ein Jahrespaket an, damit die Fotospiel App
                      jederzeit einsatzbereit ist.
                    </p>
                    <Button asChild size="sm" className="mt-1 bg-sky-600 text-white hover:bg-sky-700">
                      <Link href={localizedPath('/packages')}>{t('occasions.cta')}</Link>
                    </Button>
                  </CardContent>
                </Card>

                <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                  <CardContent className="space-y-3 p-6">
                    <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                      Häufige Fragen
                    </p>
                    <ul className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
                      <li>
                        <span className="font-semibold">Wie sieht es mit Datenschutz aus?</span>
                        <br />
                        Die Fotospiel App ist für DSGVO-konforme Nutzung ausgelegt; sensible Daten werden nicht unnötig gespeichert.
                      </li>
                      <li>
                        <span className="font-semibold">Können wir eigenes Branding nutzen?</span>
                        <br />
                        Ja – Logos, Farben und Texte lassen sich passend zu eurem Auftritt gestalten.
                      </li>
                      <li>
                        <span className="font-semibold">Wie kommen die Bilder ins Intranet?</span>
                        <br />
                        Über einfache Exporte und Downloads kann euer Kommunikationsteam die besten Motive übernehmen.
                      </li>
                    </ul>
                  </CardContent>
                </Card>
              </aside>
            </motion.div>

            <motion.div variants={revealUp}>
              <Separator className="my-8" />
            </motion.div>

            <motion.div variants={revealUp}>
              <div className="grid gap-6 md:grid-cols-2">
                <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                <CardContent className="space-y-3 p-6">
                  <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                    Was Unternehmen berichten
                  </p>
                  <p className="text-sm text-gray-700 dark:text-gray-200">
                    „Wir hatten nach unserem Offsite zum ersten Mal alle Event-Fotos zentral verfügbar – HR und Marketing konnten noch
                    in derselben Woche Storys fürs Intranet und LinkedIn vorbereiten."
                  </p>
                </CardContent>
              </Card>

                <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                <CardContent className="spacey-3 space-y-3 p-6">
                  <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                    Nächster Schritt
                  </p>
                  <p className="text-sm text-gray-700 dark:text-gray-200">
                    Sprich mit deinem Event- oder HR-Team darüber, wie die Fotospiel App euer nächstes Event begleiten kann – oder
                    teste sie direkt mit einem kleinen internen Format.
                  </p>
                  <div className="flex flex-wrap gap-3">
                    <Button asChild size="sm" className="bg-sky-600 text-white hover:bg-sky-700">
                      <Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
                    </Button>
                    <Button
                      asChild
                      size="sm"
                      variant="outline"
                      className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
                    >
                      <Link href={localizedPath('/packages')}>{t('occasions.cta')}</Link>
                    </Button>
                  </div>
                </CardContent>
              </Card>
              </div>
            </motion.div>
          </motion.div>
        </section>
      </MarketingLayout>
    );
  }

  // Confirmation / religious family events
  // Keep this one simpler but still richer than before
  if (type === 'konfirmation') {
    if (isEn) {
      return (
        <MarketingLayout title={content.title}>
          <Head title={content.title} />

          <section className="bg-gradient-to-br from-violet-50 via-white to-emerald-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
            <motion.div className="container mx-auto max-w-5xl space-y-8" variants={stagger} initial="hidden" animate="visible">
              <motion.div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400" variants={revealUp}>
                <nav className="flex flex-wrap items-center gap-2">
                  <Link href={localizedPath('/')} className="hover:text-gray-900 dark:hover:text-gray-100">
                    {t('nav.home')}
                  </Link>
                  <span>/</span>
                  <span className="text-gray-700 dark:text-gray-200">{t('nav.occasions')}</span>
                  <span>/</span>
                  <span className="text-gray-700 dark:text-gray-200">{content.title}</span>
                </nav>
                <Link href={localizedPath('/packages')} className="text-pink-600 hover:text-pink-700">
                  {t('nav.discover_packages')}
                </Link>
              </motion.div>

              <motion.div variants={revealUp}>
                <Card className="relative overflow-hidden rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
                  <CardContent className="space-y-6 p-6 md:p-10">
                  <div className="space-y-4 text-center md:text-left">
                    <Badge
                      variant="outline"
                      className="border-violet-200 bg-white/70 text-violet-700 dark:border-violet-400/60 dark:bg-gray-900/70 dark:text-violet-200"
                    >
                      {content.title}
                    </Badge>
                    <h1 className="font-display text-3xl font-bold leading-tight text-gray-900 dark:text-gray-50 md:text-4xl">
                      Memories of an important step in life
                    </h1>
                    <p className="font-sans-marketing text-base leading-relaxed text-gray-700 dark:text-gray-200 md:text-lg">
                      Confirmation, first communion or a blessing service: the Fotospiel App collects the most important moments from
                      the perspective of family and friends – discreet, respectful and easy to moderate.
                    </p>
                    <div className="mt-4 flex flex-wrap justify-center gap-3 md:justify-start">
                      <Button asChild className="bg-violet-500 text-white hover:bg-violet-600">
                        <Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
                      </Button>
                      <Button
                        asChild
                        variant="outline"
                        className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
                      >
                        <Link href={localizedPath('/packages')}>{content.cta}</Link>
                      </Button>
                    </div>
                  </div>
                  </CardContent>
                </Card>
              </motion.div>
            </motion.div>
          </section>

          <section className="bg-white px-4 py-14 dark:bg-gray-950 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
            <motion.div className="container mx-auto max-w-5xl space-y-10" variants={stagger} initial="hidden" whileInView="visible" viewport={viewportOnce}>
              <motion.div className="grid gap-8 md:grid-cols-2" variants={revealUp}>
                <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                  <CardContent className="space-y-3 p-6">
                    <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                      What the Fotospiel App provides here
                    </p>
                    <ul className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
                      <li>• Discreet photo tasks focused on family and togetherness</li>
                      <li>• Gallery only for invited guests – no public social-media pressure</li>
                      <li>• Watching the photos together later strengthens the shared memory</li>
                    </ul>
                  </CardContent>
                </Card>

                <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                  <CardContent className="space-y-3 p-6">
                    <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                      Best practices in the family circle
                    </p>
                    <ol className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
                      <li>1. Place the QR code at the entrance and in the hall or community space.</li>
                      <li>2. Choose photo tasks that are respectful and appropriate for the celebration.</li>
                      <li>3. Nominate a family member to approve or hide photos.</li>
                    </ol>
                  </CardContent>
                </Card>
              </motion.div>
            </motion.div>
          </section>
        </MarketingLayout>
      );
    }

    // German confirmation content
    return (
      <MarketingLayout title={content.title}>
        <Head title={content.title} />

        <section className="bg-gradient-to-br from-violet-50 via-white to-emerald-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
          <motion.div className="container mx-auto max-w-5xl space-y-8" variants={stagger} initial="hidden" animate="visible">
            <motion.div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400" variants={revealUp}>
              <nav className="flex flex-wrap items-center gap-2">
                <Link href={localizedPath('/')} className="hover:text-gray-900 dark:hover:text-gray-100">
                  {t('nav.home')}
                </Link>
                <span>/</span>
                <span className="text-gray-700 dark:text-gray-200">{t('nav.occasions')}</span>
                <span>/</span>
                <span className="text-gray-700 dark:text-gray-200">{content.title}</span>
              </nav>
              <Link href={localizedPath('/packages')} className="text-pink-600 hover:text-pink-700">
                {t('nav.discover_packages')}
              </Link>
            </motion.div>

            <motion.div variants={revealUp}>
              <Card className="relative overflow-hidden rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
                <CardContent className="space-y-6 p-6 md:p-10">
                <div className="space-y-4 text-center md:text-left">
                  <Badge
                    variant="outline"
                    className="border-violet-200 bg-white/70 text-violet-700 dark:border-violet-400/60 dark:bg-gray-900/70 dark:text-violet-200"
                  >
                    {content.title}
                  </Badge>
                  <h1 className="font-display text-3xl font-bold leading-tight text-gray-900 dark:text-gray-50 md:text-4xl">
                    Erinnerungen an einen besonderen Schritt im Leben
                  </h1>
                  <p className="font-sans-marketing text-base leading-relaxed text-gray-700 dark:text-gray-200 md:text-lg">
                    Konfirmation, Kommunion oder Segnungsfeier: Mit der Fotospiel App sammelt ihr die wichtigsten Momente aus Sicht der
                    Familie und Freund:innen – dezent, wertschätzend und gut moderierbar.
                  </p>
                  <div className="mt-4 flex flex-wrap justify-center gap-3 md:justify-start">
                    <Button asChild className="bg-violet-500 text-white hover:bg-violet-600">
                      <Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
                    </Button>
                    <Button
                      asChild
                      variant="outline"
                      className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
                    >
                      <Link href={localizedPath('/packages')}>{content.cta}</Link>
                    </Button>
                  </div>
                </div>
                </CardContent>
              </Card>
            </motion.div>
          </motion.div>
        </section>

        <section className="bg-white px-4 py-14 dark:bg-gray-950 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
          <motion.div className="container mx-auto max-w-5xl space-y-10" variants={stagger} initial="hidden" whileInView="visible" viewport={viewportOnce}>
            <motion.div className="grid gap-8 md:grid-cols-2" variants={revealUp}>
              <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                <CardContent className="space-y-3 p-6">
                  <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                    Was die Fotospiel App hier leistet
                  </p>
                  <ul className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
                    <li>• Diskrete Fotoaufgaben, die den Fokus auf Familie und Gemeinschaft legen</li>
                    <li>• Galerie nur für eingeladene Personen – kein öffentlicher Social-Media-Druck</li>
                    <li>• Späteres gemeinsames Anschauen der Bilder stärkt das Erinnerungsgefühl</li>
                  </ul>
                </CardContent>
              </Card>

              <Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                <CardContent className="space-y-3 p-6">
                  <p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                    Best Practices im Familienkreis
                  </p>
                  <ol className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
                    <li>1. QR-Code am Eingang und im Kirchen-/Gemeindesaal platzieren.</li>
                    <li>2. Fotoaufgaben wählen, die respektvoll und zur Feier passend sind.</li>
                    <li>3. Eine Person in der Familie festlegen, die Fotos freigibt oder ausblendet.</li>
                  </ol>
                </CardContent>
              </Card>
            </motion.div>
          </motion.div>
        </section>
      </MarketingLayout>
    );
  }
};

Occasions.layout = (page: React.ReactNode) => page;

export default Occasions;
