// Sculty Dog — Blobs animati di sfondo
// Ogni schermata ha la sua palette + composizione per dare identità diversa.

const BLOB_THEMES = {
  home: {
    // Warm cream con accento terracotta tenue in alto — coerente col nuovo hero unificato
    tint: 'linear-gradient(180deg, #f0e2d8 0%, #ece4d8 12%, #ebe8e3 45%, #ebe8e3 100%)',
    blobs: [],
  },
  galleria: {
    // Sfumatura morbida — pesca → crema → panna, su tutta l'altezza pagina
    tint: 'linear-gradient(180deg, #efe4dc 0%, #ece5db 25%, #ebe8e3 55%, #ebe8e3 100%)',
    blobs: [],
  },
  processo: {
    // Sfumatura sabbia → panna su tutta la pagina processo
    tint: 'linear-gradient(180deg, #ede7dc 0%, #e8dfcf 25%, #ebe8e3 55%, #ebe8e3 100%)',
    blobs: [],
  },
  configura: {
    // Sfumatura blu/lilla → panna su tutta la pagina configura
    tint: 'linear-gradient(180deg, #e4e8ed 0%, #e8e6ec 25%, #ebe8e3 55%, #ebe8e3 100%)',
    blobs: [],
  },
  checkout: {
    // Verde salvia + crema — rassicurante, "sei quasi lì"
    tint: 'linear-gradient(180deg, #e8ebe0 0%, #ece7de 50%, #eae8e0 100%)',
    blobs: [
      { color: '#bcd4b0', size: 520, top: '-5%',  left: '-8%', dur: 58, delay: 0 },
      { color: '#e8d8a8', size: 420, top: '30%',  left: '78%', dur: 70, delay: 8 },
      { color: '#c8d8b8', size: 380, top: '70%',  left: '-5%', dur: 62, delay: 15 },
    ],
  },
  traccia: {
    // Rosa + giallo soft — "prenditi cura", gioioso
    tint: 'linear-gradient(180deg, #efe4e0 0%, #ede6d8 50%, #eae4dc 100%)',
    blobs: [
      { color: '#f4a8c4', size: 500, top: '-5%', left: '-8%', dur: 58, delay: 0 },
      { color: '#f3d67a', size: 420, top: '30%', left: '80%', dur: 66, delay: 8 },
      { color: '#e8c0a8', size: 380, top: '70%', left: '0%',  dur: 62, delay: 15 },
    ],
  },
  conferma: {
    // Tutti i colori in festa — celebrazione
    tint: 'linear-gradient(180deg, #efe4e0 0%, #e8ebe0 50%, #e4e8ed 100%)',
    blobs: [
      { color: '#f4a8c4', size: 460, top: '-5%',  left: '-10%', dur: 54, delay: 0 },
      { color: '#f3d67a', size: 380, top: '20%',  left: '78%',  dur: 62, delay: 6 },
      { color: '#bcd4b0', size: 420, top: '55%',  left: '-5%',  dur: 58, delay: 12 },
      { color: '#a9c9e8', size: 400, top: '75%',  left: '70%',  dur: 66, delay: 9 },
      { color: '#d9b8e0', size: 360, top: '40%',  left: '40%',  dur: 50, delay: 16 },
    ],
  },
};

function FloatingBlobs({ screen = 'home' }) {
  const theme = BLOB_THEMES[screen] || BLOB_THEMES.home;

  return (
    <>
      <style>{`
        @keyframes sd-blob-float-1 {
          0%   { transform: translate(0, 0) scale(1); }
          25%  { transform: translate(80px, -50px) scale(1.06); }
          50%  { transform: translate(40px, 70px) scale(0.95); }
          75%  { transform: translate(-60px, 30px) scale(1.04); }
          100% { transform: translate(0, 0) scale(1); }
        }
        @keyframes sd-blob-float-2 {
          0%   { transform: translate(0, 0) scale(1); }
          25%  { transform: translate(-70px, 40px) scale(1.08); }
          50%  { transform: translate(30px, 80px) scale(0.94); }
          75%  { transform: translate(60px, -30px) scale(1.05); }
          100% { transform: translate(0, 0) scale(1); }
        }
        @keyframes sd-blob-float-3 {
          0%   { transform: translate(0, 0) scale(1); }
          25%  { transform: translate(50px, 60px) scale(0.96); }
          50%  { transform: translate(-40px, -50px) scale(1.08); }
          75%  { transform: translate(-70px, 40px) scale(0.98); }
          100% { transform: translate(0, 0) scale(1); }
        }
        @keyframes sd-bg-fade {
          from { opacity: 0; }
          to   { opacity: 1; }
        }
      `}</style>

      {/* Sfumatura di fondo (cambia per pagina) — scrolla col documento */}
      <div
        key={`tint-${screen}`}
        aria-hidden="true"
        style={{
          position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
          background: theme.tint,
          zIndex: 0,
          pointerEvents: 'none',
          animation: 'sd-bg-fade 0.8s ease-out',
        }}
      />

      {/* Blob animati — distribuiti lungo tutta l'altezza del documento */}
      <div
        key={`blobs-${screen}`}
        aria-hidden="true"
        style={{
          position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
          pointerEvents: 'none', zIndex: 0,
          overflow: 'hidden',
          animation: 'sd-bg-fade 0.8s ease-out',
        }}
      >
        {/* Ripeto i blob per 6 "fasce" verticali così coprono tutto lo scroll */}
        {[0, 1, 2, 3, 4, 5].map(band => (
          theme.blobs.map((b, i) => (
            <div
              key={`${screen}-${band}-${i}`}
              style={{
                position: 'absolute',
                top: `calc(${b.top} + ${band * 100}vh)`,
                left: b.left,
                width: b.size, height: b.size,
                borderRadius: '50%',
                background: b.color,
                opacity: 0.5,
                filter: 'blur(90px)',
                animation: `sd-blob-float-${(i % 3) + 1} ${b.dur}s linear ${b.delay + band * 2}s infinite`,
                willChange: 'transform',
              }}
            />
          ))
        ))}
      </div>
    </>
  );
}

Object.assign(window, { FloatingBlobs });