'use client';

import { motion } from 'motion/react';

/**
 * Branded Ladezustand waehrend der initialen Route-/Datenauslieferung.
 * Pulsiert dezent mit dem Yumder-Herz, passend zur Splash-Aesthetik.
 */
export default function Loading() {
  return (
    <div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-neutral-950">
      <motion.div
        animate={{ scale: [1, 1.12, 1] }}
        transition={{ duration: 1.1, repeat: Infinity, ease: 'easeInOut' }}
        className="w-16 h-16 rounded-2xl bg-gradient-to-tr from-yumder-pink to-pink-500 flex items-center justify-center shadow-[0_0_40px_rgba(254,60,114,0.4)]"
      >
        <svg viewBox="0 0 24 24" className="w-8 h-8 text-white" fill="currentColor" aria-hidden="true">
          <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
        </svg>
      </motion.div>
    </div>
  );
}