import React from 'react';
import { Head, Link, useForm } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
import MarketingLayout from '@/layouts/mainWebsite';
import { useAnalytics } from '@/hooks/useAnalytics';
import { useCtaExperiment } from '@/hooks/useCtaExperiment';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { ArrowRight, Camera, QrCode, ShieldCheck, Sparkles, Smartphone, Loader2, CheckCircle2 } from 'lucide-react';
import { usePage } from '@inertiajs/react';
import { motion, useReducedMotion } from 'framer-motion';

interface Package {
  id: number;
  name: string;
  description: string;
  price: number;
}

interface Props {
  packages: Package[];
}

interface HoneypotPayload {
  enabled: boolean;
  nameFieldName: string;
  validFromFieldName: string;
  encryptedValidFrom: string;
}

type ContactFormData = {
  name: string;
  email: string;
  message: string;
  [key: string]: string;
};

const heroBulletIcons = [Sparkles, ShieldCheck, Camera];
const howStepIcons = [QrCode, Smartphone, ShieldCheck];

const Home: React.FC<Props> = ({ packages }) => {
  const { t } = useTranslation('marketing');
  const { localizedPath } = useLocalizedRoutes();
  const { trackEvent } = useAnalytics();
  const {
    variant: heroCtaVariant,
    trackClick: trackHeroCtaClick,
  } = useCtaExperiment('home_hero_cta');
  const { flash, honeypot } = usePage<{ flash?: { success?: string }; honeypot?: HoneypotPayload }>().props;
  const shouldReduceMotion = useReducedMotion();
  const honeypotDefaults = React.useMemo(() => {
    if (!honeypot?.enabled) {
      return {};
    }

    return {
      [honeypot.nameFieldName]: '',
      [honeypot.validFromFieldName]: honeypot.encryptedValidFrom,
    };
  }, [honeypot?.enabled, honeypot?.encryptedValidFrom, honeypot?.nameFieldName, honeypot?.validFromFieldName]);

  const { data, setData, post, processing, errors, reset } = useForm<ContactFormData>({
    name: '',
    email: '',
    message: '',
    ...honeypotDefaults,
  });

  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 revealFadeIn = {
    hidden: { opacity: 0 },
    visible: { opacity: 1, transition: { duration: 0.5, ease: 'easeOut' } },
  };
  const revealFade = {
    hidden: { opacity: 0 },
    visible: { opacity: 1, transition: { duration: 0.5, ease: 'easeOut' } },
  };
  const stagger = {
    hidden: {},
    visible: { transition: { staggerChildren: 0.12 } },
  };
  const heroCardVariants = shouldReduceMotion
    ? { rest: {}, hover: {} }
    : {
        rest: { y: 0, scale: 1, rotateX: 0, rotateY: 0 },
        hover: {
          y: -8,
          scale: 1.01,
          rotateX: -2,
          rotateY: 3,
          transition: { type: 'spring', stiffness: 180, damping: 20 },
        },
      };
  const heroGlowVariants = shouldReduceMotion
    ? { rest: {}, hover: {} }
    : {
        rest: { opacity: 0.4, scale: 1 },
        hover: { opacity: 0.7, scale: 1.03, transition: { duration: 0.35, ease: 'easeOut' } },
      };
  const heroShineVariants = shouldReduceMotion
    ? { rest: {}, hover: {} }
    : {
        rest: { x: '-120%', opacity: 0 },
        hover: { x: '120%', opacity: 0.8, transition: { duration: 0.8, ease: 'easeOut' } },
      };

  const heroBulletsRaw = t('home.hero_bullets', { returnObjects: true });
  const heroBullets = Array.isArray(heroBulletsRaw) ? (heroBulletsRaw as string[]) : [];

  const featuresRaw = t('home.features_highlight', { returnObjects: true });
  const features = Array.isArray(featuresRaw)
    ? (featuresRaw as Array<{ title: string; description: string }>)
    : [];

  const howSteps = [
    {
      icon: howStepIcons[0] ?? QrCode,
      title: t('home.step1_title'),
      description: t('home.step1_desc'),
    },
    {
      icon: howStepIcons[1] ?? Smartphone,
      title: t('home.step2_title'),
      description: t('home.step2_desc'),
    },
    {
      icon: howStepIcons[2] ?? ShieldCheck,
      title: t('home.step3_title'),
      description: t('home.step3_desc'),
    },
  ];

  const occasionLinks = [
    { key: 'wedding', href: localizedPath('/anlaesse/hochzeit') },
    { key: 'birthday', href: localizedPath('/anlaesse/geburtstag') },
    { key: 'corporate', href: localizedPath('/anlaesse/firmenevent') },
    { key: 'confirmation', href: localizedPath('/anlaesse/konfirmation') },
  ];

  const heroPrimaryHref = localizedPath('/demo');
  const heroPrimaryLabel =
    heroCtaVariant === 'gradient' ? t('home.cta_demo_highlight') : t('home.cta_demo');
  const heroSecondaryHref = localizedPath('/so-funktionierts');
  const heroSecondaryLabel = t('home.cta_how');
  const heroTertiaryHref = localizedPath('/packages');
  const heroTertiaryLabel = t('home.cta_packages');

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    post(localizedPath('/kontakt'), {
      onSuccess: () => {
        trackEvent({
          category: 'marketing_home',
          action: 'contact_submit',
        });
        reset();
      },
    });
  };

  React.useEffect(() => {
    if (Object.keys(errors).length > 0) {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  }, [errors]);

  return (
    <MarketingLayout title={t('home.title')}>
      <Head title={t('home.hero_title')} />

      <section id="hero" className="bg-aurora-enhanced py-20 px-4 text-gray-900 dark:text-gray-100">
        <div className="container mx-auto flex max-w-6xl flex-col items-center gap-12 md:flex-row">
          <motion.div
            className="flex flex-col gap-8 text-center md:w-1/2 md:text-left"
            variants={stagger}
            initial="hidden"
            animate="visible"
          >
            <div className="flex flex-col gap-4">
              <motion.div variants={revealFadeIn}>
                <Badge className="mx-auto w-fit bg-white/80 px-3 py-1 text-xs font-semibold uppercase text-rose-500 shadow-sm md:mx-0 md:text-[0.72rem]">
                  {t('home.hero_tagline')}
                </Badge>
              </motion.div>
              <motion.div>
                <motion.h1 className="font-display text-4xl font-bold leading-tight md:text-5xl lg:text-6xl" variants={revealFadeIn}>
                  {t('home.hero_title')}
                </motion.h1>
              </motion.div>
              <motion.div>
                <motion.p className="text-lg text-gray-700 dark:text-gray-200 md:text-xl" variants={revealFadeIn}>
                  {t('home.hero_description')}
                </motion.p>
              </motion.div>
              {heroBullets.length > 0 && (
                <motion.div>
                  <motion.ul
                    className="mx-auto flex flex-col gap-3 text-left text-sm font-semibold text-gray-700 dark:text-gray-200 md:mx-0"
                    variants={stagger}
                  >
                    {heroBullets.map((item, index) => {
                      const Icon = heroBulletIcons[index % heroBulletIcons.length] ?? Sparkles;
                      return (
                        <motion.li key={`hero-bullet-${index}`} className="flex items-start gap-3" variants={revealFadeIn}>
                          <span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-white/80 text-rose-500 shadow-sm dark:bg-gray-900/70">
                            <Icon className="h-4 w-4" aria-hidden />
                          </span>
                          <span className="flex-1 text-base">{item}</span>
                        </motion.li>
                      );
                    })}
                  </motion.ul>
                </motion.div>
              )}
            </div>
            <motion.div
              className="flex flex-wrap items-center justify-center gap-3 md:justify-start"
              variants={revealFadeIn}
            >
              <Button
                asChild
                size="lg"
                className={
                  heroCtaVariant === 'gradient'
                    ? 'group h-12 rounded-full bg-gradient-to-r from-[#ff5f87] via-[#ec4899] to-[#6366f1] px-7 text-base font-semibold text-white shadow-[0_18px_35px_-18px_rgba(236,72,153,0.7)] transition hover:from-[#ff4470] hover:via-[#ec4899] hover:to-[#4f46e5]'
                    : 'group h-12 rounded-full bg-white/90 px-7 text-base font-semibold text-rose-500 shadow-md shadow-rose-200/40 transition hover:bg-white'
                }
              >
                <Link
                  href={heroPrimaryHref}
                  onClick={() => {
                    trackHeroCtaClick();
                    trackEvent({
                      category: 'marketing_home',
                      action: 'hero_cta',
                      name: `demo:${heroCtaVariant}`,
                    });
                  }}
                  className="flex items-center gap-2"
                >
                  <span>{heroPrimaryLabel}</span>
                  <ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" aria-hidden />
                </Link>
              </Button>
              <Button
                asChild
                variant="outline"
                size="lg"
                className="h-12 rounded-full border-rose-200 bg-white/80 px-6 text-base font-semibold text-rose-500 shadow-sm transition hover:bg-white dark:border-rose-500/30 dark:bg-transparent dark:text-rose-200 dark:hover:bg-white/10"
              >
                <Link
                  href={heroSecondaryHref}
                  onClick={() =>
                    trackEvent({
                      category: 'marketing_home',
                      action: 'hero_secondary_cta',
                    })
                  }
                  className="flex items-center gap-2"
                >
                  <span>{heroSecondaryLabel}</span>
                </Link>
              </Button>
              <Link
                href={heroTertiaryHref}
                onClick={() =>
                  trackEvent({
                    category: 'marketing_home',
                    action: 'hero_packages_cta',
                  })
                }
                className="font-semibold text-rose-500 underline-offset-4 hover:underline dark:text-rose-200"
              >
                {heroTertiaryLabel}
              </Link>
            </motion.div>
          </motion.div>
          <motion.div
            className="relative w-full max-w-xl md:w-1/2"
            variants={revealFade}
            initial="hidden"
            animate="visible"
            style={{ perspective: 1200 }}
          >
            <motion.div initial="rest" animate="rest" whileHover="hover">
              <motion.div
                className="absolute inset-0 rounded-3xl bg-white/40 blur-xl"
                aria-hidden
                variants={heroGlowVariants}
              />
              <motion.div
                className="relative overflow-hidden rounded-[32px] border border-white/60 shadow-2xl"
                variants={heroCardVariants}
                style={{ transformStyle: 'preserve-3d' }}
              >
                <motion.span
                  className="pointer-events-none absolute inset-0"
                  variants={heroShineVariants}
                  style={{
                    background: 'linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.65) 50%, rgba(255,255,255,0) 100%)',
                    mixBlendMode: 'screen',
                  }}
                />
                <motion.img
                  src="/joyous_wedding_guests_posing.jpg"
                  alt={t('home.hero_image_alt')}
                  className="h-full w-full scale-[1.04] object-cover"
                  initial={shouldReduceMotion ? false : { opacity: 0, scale: 1.02 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
                />
              </motion.div>
            </motion.div>
          </motion.div>
        </div>
      </section>

      <section id="how-it-works" className="bg-gray-50 py-20 px-4 dark:bg-gray-950">
        <div className="container mx-auto max-w-6xl">
          <div className="mx-auto max-w-3xl text-center">
            <h2 className="font-display text-3xl font-bold md:text-4xl">{t('home.how_title')}</h2>
            <p className="mt-4 text-base text-muted-foreground md:text-lg">
              {t('home.how_subtitle')}
            </p>
          </div>
          <div className="mt-12 grid gap-6 md:grid-cols-3">
            {howSteps.map(({ icon: Icon, title, description }, index) => (
              <motion.div
                key={`how-step-${index}`}
                variants={revealUp}
                initial="hidden"
                whileInView="visible"
                viewport={viewportOnce}
              >
                <Card className="border-gray-200/70 bg-white/90 shadow-md shadow-gray-200/40 transition hover:-translate-y-1 hover:shadow-lg hover:shadow-rose-200/30 dark:border-gray-800/60 dark:bg-gray-900/60">
                  <CardHeader className="flex flex-col gap-4">
                    <span className="flex h-12 w-12 items-center justify-center rounded-full bg-rose-100/80 text-rose-500 shadow-inner shadow-rose-200/60 dark:bg-rose-500/20 dark:text-rose-100">
                      <Icon className="h-6 w-6" aria-hidden />
                    </span>
                    <CardTitle className="text-xl">{title}</CardTitle>
                    <CardDescription className="text-sm leading-relaxed text-slate-600 dark:text-slate-300">
                      {description}
                    </CardDescription>
                  </CardHeader>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      <section className="bg-slate-950 py-20 px-4 text-white">
        <div className="container mx-auto max-w-6xl">
          <div className="grid gap-10 md:grid-cols-[1.1fr_0.9fr] md:items-center">
            <motion.div
              className="flex flex-col gap-6"
              variants={stagger}
              initial="hidden"
              whileInView="visible"
              viewport={viewportOnce}
            >
              <Badge className="w-fit bg-white/15 px-3 py-1 text-xs uppercase tracking-[0.35em] text-white/80">
                {t('home.demo_title')}
              </Badge>
              <motion.h2 className="font-display text-3xl font-semibold leading-tight md:text-4xl" variants={revealUp}>
                {t('home.demo_description')}
              </motion.h2>
              <motion.p className="text-sm text-white/75" variants={revealUp}>
                {t('home.demo_hint')}
              </motion.p>
              <motion.div variants={revealUp}>
                <Button
                  asChild
                  size="lg"
                  className="h-12 w-fit rounded-full bg-white px-7 text-base font-semibold text-slate-900 shadow-lg shadow-white/30 transition hover:bg-white/90"
                >
                  <Link
                    href={localizedPath('/demo')}
                    onClick={() =>
                      trackEvent({
                        category: 'marketing_home',
                        action: 'demo_section_cta',
                      })
                    }
                    className="flex items-center gap-2"
                  >
                    <span>{t('home.demo_cta')}</span>
                    <ArrowRight className="h-4 w-4" aria-hidden />
                  </Link>
                </Button>
              </motion.div>
            </motion.div>
            <motion.div
              className="relative mx-auto w-full max-w-sm"
              variants={revealUp}
              initial="hidden"
              whileInView="visible"
              viewport={viewportOnce}
            >
              <motion.div className="absolute inset-0 rounded-[42px] bg-gradient-to-br from-rose-400 via-purple-500 to-indigo-500 opacity-80 blur-2xl" aria-hidden />
              <div className="relative aspect-[9/16] w-full overflow-hidden rounded-[42px] border border-white/20 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 shadow-[0_40px_90px_-30px_rgba(15,23,42,0.75)]">
                <div className="flex h-full flex-col items-center justify-center gap-4 p-6 text-center">
                  <Smartphone className="h-12 w-12 text-white/60" aria-hidden />
                  <p className="text-sm text-white/75">{t('home.demo_media_alt')}</p>
                  <Link
                    href={localizedPath('/demo')}
                    onClick={() =>
                      trackEvent({
                        category: 'marketing_home',
                        action: 'demo_frame_cta',
                      })
                    }
                    className="text-sm font-semibold text-white underline-offset-4 hover:underline"
                  >
                    {t('home.demo_cta')}
                  </Link>
                </div>
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      <section className="bg-white py-20 px-4 dark:bg-gray-950">
        <div className="container mx-auto max-w-6xl">
          <div className="mx-auto max-w-3xl text-center">
            <h2 className="font-display text-3xl font-bold md:text-4xl">{t('home.features_title')}</h2>
          </div>
          <div className="mt-12 grid gap-6 md:grid-cols-3">
            {features.map((feature, index) => (
              <motion.div
                key={`feature-${index}`}
                variants={revealUp}
                initial="hidden"
                whileInView="visible"
                viewport={viewportOnce}
              >
                <Card className="border-gray-200/80 bg-gray-50/80 shadow-sm shadow-rose-100/40 transition hover:-translate-y-1 hover:shadow-lg hover:shadow-rose-200/40 dark:border-gray-800/60 dark:bg-gray-900/70">
                  <CardHeader>
                    <CardTitle className="text-xl">{feature.title}</CardTitle>
                    <CardDescription className="text-sm leading-relaxed text-slate-600 dark:text-slate-300">
                      {feature.description}
                    </CardDescription>
                  </CardHeader>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      <section className="bg-gray-50 py-20 px-4 dark:bg-gray-950/80">
        <div className="container mx-auto max-w-6xl">
          <div className="grid gap-10 lg:grid-cols-[1.15fr_0.85fr]">
            <motion.div variants={revealUp} initial="hidden" whileInView="visible" viewport={viewportOnce}>
              <Card className="border-rose-200/50 bg-white/95 shadow-md shadow-rose-200/40 dark:border-rose-500/30 dark:bg-gray-900/80">
                <CardHeader className="flex flex-col gap-4">
                  <Badge className="w-fit bg-rose-100 px-3 py-1 text-xs font-semibold uppercase text-rose-600 dark:bg-rose-500/20 dark:text-rose-200">
                    {t('home.occasions_title')}
                  </Badge>
                  <CardTitle className="text-2xl">{t('home.occasions_description')}</CardTitle>
                </CardHeader>
                <CardContent className="grid gap-3 sm:grid-cols-2">
                  {occasionLinks.map(({ key, href }) => (
                    <Link
                      key={key}
                      href={href}
                      onClick={() =>
                        trackEvent({
                          category: 'marketing_home',
                          action: 'occasion_tile_click',
                          name: key,
                        })
                      }
                      className="group flex items-center gap-3 rounded-xl border border-rose-100/60 bg-white/80 px-4 py-3 text-sm font-semibold text-rose-600 shadow-sm shadow-rose-100/50 transition hover:bg-rose-50 hover:text-rose-700 dark:border-rose-500/30 dark:bg-gray-900/70 dark:text-rose-200 dark:hover:bg-rose-500/10"
                    >
                      <ArrowRight className="h-4 w-4 -translate-x-1 transition group-hover:translate-x-0" aria-hidden />
                      <span>{t(`home.occasions.${key}`)}</span>
                    </Link>
                  ))}
                </CardContent>
              </Card>
            </motion.div>

            <motion.div variants={revealUp} initial="hidden" whileInView="visible" viewport={viewportOnce}>
              <Card className="border-gray-200/70 bg-white/95 shadow-md shadow-gray-200/40 transition hover:-translate-y-1 hover:shadow-lg hover:shadow-rose-200/40 dark:border-gray-800/60 dark:bg-gray-900/80">
                <CardHeader>
                  <CardTitle className="text-2xl">{t('home.blog_teaser_title')}</CardTitle>
                  <CardDescription className="text-sm leading-relaxed text-muted-foreground">
                    {t('home.blog_teaser_description')}
                  </CardDescription>
                </CardHeader>
                <CardFooter className="px-6 pb-6">
                  <Button
                    asChild
                    variant="ghost"
                    className="group inline-flex items-center gap-2 rounded-full px-0 text-base font-semibold text-rose-500 transition hover:text-rose-600 dark:text-rose-200 dark:hover:text-rose-100"
                  >
                    <Link
                      href={localizedPath('/blog')}
                      onClick={() =>
                        trackEvent({
                          category: 'marketing_home',
                          action: 'blog_teaser_cta',
                        })
                      }
                      className="flex items-center gap-2"
                    >
                      <span>{t('home.blog_teaser_cta')}</span>
                      <ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" aria-hidden />
                    </Link>
                  </Button>
                </CardFooter>
              </Card>
            </motion.div>
          </div>
        </div>
      </section>

      <section className="bg-white py-20 px-4 dark:bg-gray-950">
        <div className="container mx-auto max-w-6xl">
          <div className="flex flex-col items-center justify-between gap-4 text-center md:flex-row md:text-left">
            <div>
              <h2 className="font-display text-3xl font-bold md:text-4xl">
                {t('home.packages_title')}
              </h2>
              <p className="mt-3 max-w-2xl text-base text-muted-foreground md:text-lg">
                {t('home.packages_subtitle')}
              </p>
            </div>
            <Button
              asChild
              className="h-11 rounded-full bg-gradient-to-r from-[#ff5f87] via-[#ec4899] to-[#6366f1] px-6 text-sm font-semibold text-white shadow-lg shadow-rose-300/30 transition hover:from-[#ff4470] hover:via-[#ec4899] hover:to-[#4f46e5]"
            >
              <Link
                href={localizedPath('/packages')}
                onClick={() =>
                  trackEvent({
                    category: 'marketing_home',
                    action: 'all_packages_cta',
                  })
                }
              >
                {t('home.all_packages')}
              </Link>
            </Button>
          </div>
          <div className="mt-10 grid gap-8 md:grid-cols-2">
            {packages.slice(0, 2).map((pkg) => (
              <motion.div
                key={pkg.id}
                variants={revealUp}
                initial="hidden"
                whileInView="visible"
                viewport={viewportOnce}
              >
                <Card className="border-gray-200 bg-white/95 text-center shadow-md shadow-rose-200/30 transition hover:-translate-y-1 hover:shadow-xl hover:shadow-rose-200/40 dark:border-gray-800 dark:bg-gray-900/80">
                  <CardHeader className="gap-4">
                    <CardTitle className="text-2xl">{pkg.name}</CardTitle>
                    <CardDescription className="text-sm text-muted-foreground">
                      {pkg.description}
                    </CardDescription>
                  </CardHeader>
                  <CardContent className="flex flex-col items-center gap-4">
                    <p className="text-3xl font-bold text-rose-500">
                      {pkg.price} {t('currency.euro')}
                    </p>
                    <Button
                      asChild
                      className="rounded-full bg-rose-500 px-5 py-2 text-sm font-semibold text-white shadow-lg shadow-rose-200/40 transition hover:bg-rose-600"
                    >
                      <Link
                        href={`${localizedPath('/packages')}?package_id=${pkg.id}`}
                        onClick={() =>
                          trackEvent({
                            category: 'marketing_home',
                            action: 'package_teaser_cta',
                            name: pkg.name,
                            value: pkg.price,
                          })
                        }
                      >
                        {t('home.view_details')}
                      </Link>
                    </Button>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      <section id="contact" className="bg-gray-50 py-20 px-4 dark:bg-gray-950/80">
        <div className="container mx-auto max-w-4xl">
          <Card className="border-gray-200/70 bg-white/95 shadow-lg shadow-rose-200/40 dark:border-gray-800/60 dark:bg-gray-900/80">
              <CardHeader className="text-center">
                <Badge className="mx-auto mb-3 w-fit bg-rose-100 px-3 py-1 text-xs font-semibold uppercase text-rose-600 dark:bg-rose-500/20 dark:text-rose-200">
                  {t('home.contact_title')}
                </Badge>
                <CardTitle className="text-2xl md:text-3xl">{t('home.contact_lead')}</CardTitle>
              </CardHeader>
              <CardContent>
                {flash?.success ? (
                  <div className="mb-4 flex items-center gap-2 rounded-xl border border-emerald-200/70 bg-emerald-50 px-3 py-2 text-sm text-emerald-800 dark:border-emerald-500/40 dark:bg-emerald-500/10 dark:text-emerald-100">
                    <CheckCircle2 className="h-4 w-4" />
                    <span>{flash.success}</span>
                  </div>
                ) : null}
                <div className="grid gap-6 lg:grid-cols-[1fr,1.1fr]">
                  <div className="space-y-3 rounded-2xl border border-rose-100/70 bg-rose-50/50 p-5 text-left text-sm text-slate-700 shadow-inner dark:border-rose-500/20 dark:bg-rose-500/5 dark:text-slate-200">
                    <p className="text-xs font-semibold uppercase tracking-wide text-rose-500 dark:text-rose-200">
                      {t('home.contact_title')}
                    </p>
                    <p className="text-base font-semibold text-slate-900 dark:text-white">{t('home.contact_lead')}</p>
                    <ul className="space-y-2">
                      <li className="flex items-start gap-3">
                        <div className="mt-0.5 h-2.5 w-2.5 rounded-full bg-rose-500" />
                        <span>{t('home.hero_bullets.0', 'Antwort in <24h')}</span>
                      </li>
                      <li className="flex items-start gap-3">
                        <div className="mt-0.5 h-2.5 w-2.5 rounded-full bg-rose-500" />
                        <span>{t('home.hero_bullets.1', 'Keine Weitergabe, kein Tracking')}</span>
                      </li>
                      <li className="flex items-start gap-3">
                        <div className="mt-0.5 h-2.5 w-2.5 rounded-full bg-rose-500" />
                        <span>{t('home.contact_privacy')}</span>
                      </li>
                    </ul>
                    <div className="rounded-xl border border-white/60 bg-white/80 p-3 text-xs font-medium text-slate-700 shadow-sm dark:border-white/10 dark:bg-white/10 dark:text-slate-100">
                      {t('home.contact_privacy')}
                    </div>
                  </div>
                  <form onSubmit={handleSubmit} className="space-y-6">
                    {honeypot?.enabled ? (
                      <div className="hidden" aria-hidden>
                        <input
                          type="text"
                          name={honeypot.nameFieldName}
                          id={honeypot.nameFieldName}
                          value={data[honeypot.nameFieldName] ?? ''}
                          onChange={(event) => setData(honeypot.nameFieldName, event.target.value)}
                          autoComplete="off"
                          tabIndex={-1}
                        />
                        <input
                          type="text"
                          name={honeypot.validFromFieldName}
                          value={data[honeypot.validFromFieldName] ?? honeypot.encryptedValidFrom}
                          readOnly
                          tabIndex={-1}
                        />
                      </div>
                    ) : null}
                    <div className="grid gap-4 md:grid-cols-2">
                      <div className="flex flex-col gap-2">
                        <label htmlFor="name" className="text-sm font-semibold text-gray-600 dark:text-gray-200">
                          {t('home.name_label')} *
                        </label>
                        <Input
                          id="name"
                          value={data.name}
                          onChange={(event) => setData('name', event.target.value)}
                          className="h-12 rounded-xl border-gray-200/70 bg-white/90 shadow-inner shadow-gray-200/40 focus-visible:ring-rose-300/60 dark:border-gray-700 dark:bg-gray-900/70"
                          autoComplete="name"
                          required
                          aria-invalid={Boolean(errors.name)}
                          aria-describedby={errors.name ? 'contact-name-error' : undefined}
                        />
                        {errors.name && (
                          <p id="contact-name-error" className="text-sm font-medium text-rose-600 dark:text-rose-300">{errors.name}</p>
                        )}
                      </div>
                      <div className="flex flex-col gap-2">
                        <label htmlFor="email" className="text-sm font-semibold text-gray-600 dark:text-gray-200">
                          {t('home.email_label')} *
                        </label>
                        <Input
                          id="email"
                          type="email"
                          value={data.email}
                          onChange={(event) => setData('email', event.target.value)}
                          className="h-12 rounded-xl border-gray-200/70 bg-white/90 shadow-inner shadow-gray-200/40 focus-visible:ring-rose-300/60 dark:border-gray-700 dark:bg-gray-900/70"
                          autoComplete="email"
                          required
                          aria-invalid={Boolean(errors.email)}
                          aria-describedby={errors.email ? 'contact-email-error' : undefined}
                        />
                        {errors.email && (
                          <p id="contact-email-error" className="text-sm font-medium text-rose-600 dark:text-rose-300">{errors.email}</p>
                        )}
                      </div>
                    </div>
                    <div className="flex flex-col gap-2">
                      <label htmlFor="message" className="text-sm font-semibold text-gray-600 dark:text-gray-200">
                        {t('home.message_label')} *
                      </label>
                      <Textarea
                        id="message"
                        rows={5}
                        value={data.message}
                        onChange={(event) => setData('message', event.target.value)}
                        className="rounded-xl border-gray-200/70 bg-white/90 shadow-inner shadow-gray-200/40 focus-visible:ring-rose-300/60 dark:border-gray-700 dark:bg-gray-900/70"
                        required
                        aria-invalid={Boolean(errors.message)}
                        aria-describedby={errors.message ? 'contact-message-error' : undefined}
                      />
                      {errors.message && (
                        <p id="contact-message-error" className="text-sm font-medium text-rose-600 dark:text-rose-300">{errors.message}</p>
                      )}
                    </div>
                    <div className="space-y-3 text-sm text-muted-foreground">
                      <p>{t('home.contact_privacy')}</p>
                      <Button
                        type="submit"
                        disabled={processing}
                        className="h-12 w-full rounded-full bg-gradient-to-r from-[#ff5f87] via-[#ec4899] to-[#6366f1] text-base font-semibold text-white shadow-[0_18px_35px_-18px_rgba(236,72,153,0.7)] transition hover:from-[#ff4470] hover:via-[#ec4899] hover:to-[#4f46e5] disabled:cursor-not-allowed disabled:opacity-60"
                      >
                        {processing ? (
                          <span className="flex items-center justify-center gap-2">
                            <Loader2 className="h-4 w-4 animate-spin" />
                            {t('home.sending')}
                          </span>
                        ) : (
                          t('home.send')
                        )}
                      </Button>
                    </div>
                  </form>
                </div>
              </CardContent>
            </Card>
        </div>
      </section>

      <section className="bg-white py-20 px-4 dark:bg-gray-950">
        <div className="container mx-auto max-w-6xl">
          <div className="mx-auto max-w-3xl text-center">
            <h2 className="font-display text-3xl font-bold md:text-4xl">
              {t('home.testimonials_title')}
            </h2>
            <p className="mt-4 text-base text-muted-foreground">{t('home.testimonials_subtitle')}</p>
          </div>
          <div className="mt-12 grid gap-6 md:grid-cols-3">
            {[t('home.testimonial1'), t('home.testimonial2'), t('home.testimonial3')].map(
              (quote, index) => (
                <Card
                  key={`testimonial-${index}`}
                  className="border-gray-200/70 bg-white/95 shadow-md shadow-rose-200/40 dark:border-gray-800/60 dark:bg-gray-900/80"
                >
                  <CardContent className="flex h-full flex-col justify-between gap-4 p-6">
                    <p className="text-base italic text-slate-700 dark:text-slate-200">{quote}</p>
                  </CardContent>
                </Card>
              ),
            )}
          </div>
        </div>
      </section>

      <section className="bg-gray-50 py-20 px-4 dark:bg-gray-950/80">
        <div className="container mx-auto max-w-4xl">
          <div className="mx-auto text-center">
            <h2 className="font-display text-3xl font-bold md:text-4xl">{t('home.faq_title')}</h2>
            <p className="mt-3 text-base text-muted-foreground">{t('home.faq_subtitle')}</p>
          </div>
          <div className="mt-10 space-y-4">
            {[{ q: t('home.faq1_q'), a: t('home.faq1_a') }, { q: t('home.faq2_q'), a: t('home.faq2_a') }].map(
              ({ q, a }, index) => (
                <Card
                  key={`faq-${index}`}
                  className="border-gray-200/70 bg-white/95 shadow-sm shadow-gray-200/40 dark:border-gray-800/60 dark:bg-gray-900/80"
                >
                  <CardHeader>
                    <CardTitle className="text-lg">{q}</CardTitle>
                    <CardDescription className="text-sm leading-relaxed text-muted-foreground">
                      {a}
                    </CardDescription>
                  </CardHeader>
                </Card>
              ),
            )}
          </div>
        </div>
      </section>
    </MarketingLayout>
  );
};

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

export default Home;