/* Poster 3 — ACID Y2K / SMILEY DUALITÉ (Animated)
   Animations :
   - Smileys siamois : déformation vivante via SVG <animate> sur feTurbulence + bounce vertical
   - "31" en fond : loom scale 6 s
   - Titre "SKOAD" : glitch jitter (translateX + skewX) toutes les 7 s
   - "//RAVE\\" : micro-glitch décalé 8 s
   - Sticker "TURNING 31" : bounce rotatif 2.5 s
   - Stickers coins : balancement doux
   - Lineup : ticker horizontal infini
   - Dates 22·23·24 : entrée décalée depuis le bas
   - Radial glow : pulse 4 s
*/
function PosterAcidAnimated({ tweaks = {} }) {
  const green      = tweaks.green      || '#00B14F';
  const greenBright= tweaks.greenBright|| '#2BFF6A';
  const ink        = tweaks.ink        || '#0a0a0a';
  const lineup     = tweaks.lineup     || ['JULIEN', 'GAEL', 'THOMAS', 'THIBAUD', 'GABIN', 'EWEN'];

  // Unique IDs par instance
  const acidId   = React.useRef('pa-acid-'   + Math.random().toString(36).slice(2, 7));
  const chromeId = React.useRef('pa-chrome-' + Math.random().toString(36).slice(2, 7));

  React.useEffect(() => {
    const ID = 'pa-anim-css';
    if (document.getElementById(ID)) return;
    const s = document.createElement('style');
    s.id = ID;
    s.textContent = `
      @keyframes pa-smiley {
        0%,100% { transform: translateY(0px)  scale(1);      }
        20%     { transform: translateY(-6px) scale(1.012);  }
        45%     { transform: translateY(3px)  scale(0.988);  }
        70%     { transform: translateY(-4px) scale(1.006);  }
      }
      @keyframes pa-31-loom {
        0%,100% { transform: translate(300px,640px) scale(1)    translate(-300px,-640px); opacity: 0.35; }
        50%      { transform: translate(300px,640px) scale(1.06) translate(-300px,-640px); opacity: 0.5;  }
      }
      @keyframes pa-title-glitch {
        0%,80%,100% { transform: translateX(0)   skewX(0deg);   filter: none;         }
        82%          { transform: translateX(5px)  skewX(-1deg);  filter: blur(0.5px); }
        84%          { transform: translateX(-4px) skewX(1deg);   filter: blur(0.3px); }
        86%          { transform: translateX(0)   skewX(0deg);   filter: none;        }
      }
      @keyframes pa-rave-glitch {
        0%,78%,100% { transform: translateX(0);    }
        80%          { transform: translateX(4px);  }
        82%          { transform: translateX(-3px); }
        84%          { transform: translateX(0);    }
      }
      @keyframes pa-bounce31 {
        0%,100% { transform: rotate(8deg)  translateY(0);   }
        35%     { transform: rotate(12deg) translateY(-6px); }
        65%     { transform: rotate(5deg)  translateY(-2px); }
      }
      @keyframes pa-sticker-l {
        0%,100% { transform: rotate(-3deg);               }
        50%      { transform: rotate(-5deg) scale(1.03); }
      }
      @keyframes pa-sticker-r {
        0%,100% { transform: rotate(2deg);               }
        50%      { transform: rotate(4deg)  scale(1.03); }
      }
      @keyframes pa-ticker {
        from { transform: translateX(0);   }
        to   { transform: translateX(-50%); }
      }
      @keyframes pa-date-in {
        from { opacity: 0; transform: translateY(24px) scale(0.85); }
        to   { opacity: 1; transform: translateY(0)    scale(1);    }
      }
      @keyframes pa-glow-pulse {
        0%,100% { transform: scale(1);    opacity: 1;   }
        50%      { transform: scale(1.14); opacity: 0.7; }
      }
    `;
    document.head.appendChild(s);
  }, []);

  const aId = acidId.current;
  const cId = chromeId.current;
  const tickerDur = `${8 + lineup.length * 1.2}s`;

  return (
    <div className="poster" style={{ background: ink, color: greenBright, overflow: 'hidden' }}>

      {/* Radial glow — pulse */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(circle at 50% 40%, rgba(43,255,106,0.14), transparent 60%)`,
        animation: 'pa-glow-pulse 4s ease-in-out infinite',
      }} />

      {/* SVG smileys */}
      <svg viewBox="0 0 600 848" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        <defs>
          <filter id={aId}>
            {/* Turbulence animée → smileys qui se déforment en continu */}
            <feTurbulence type="fractalNoise" baseFrequency="0.025" numOctaves="2" seed="3">
              <animate attributeName="baseFrequency"
                values="0.015;0.038;0.022;0.033;0.015"
                dur="5s" repeatCount="indefinite" />
            </feTurbulence>
            <feDisplacementMap in="SourceGraphic" scale="7" />
          </filter>
          <linearGradient id={cId} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%"   stopColor="#2BFF6A" />
            <stop offset="50%"  stopColor="#00B14F" />
            <stop offset="100%" stopColor="#007A37" />
          </linearGradient>
        </defs>

        {/* "31" — loom depuis le fond */}
        <text x="300" y="640" textAnchor="middle"
          style={{
            fontFamily: 'Anton, sans-serif', fontSize: 580, fill: 'none',
            stroke: green, strokeWidth: 2,
            animation: 'pa-31-loom 6s ease-in-out infinite',
          }}>
          31
        </text>

        {/* Smileys siamois — déformation vivante + bounce */}
        <g style={{ filter: `url(#${aId})`, animation: 'pa-smiley 4s ease-in-out infinite' }}>
          <circle cx="220" cy="400" r="140" fill={greenBright} />
          <circle cx="380" cy="400" r="140" fill={green} />
          <ellipse cx="180" cy="370" rx="14" ry="22" fill={ink} />
          <ellipse cx="260" cy="370" rx="14" ry="22" fill={ink} />
          <ellipse cx="340" cy="370" rx="14" ry="22" fill={ink} />
          <ellipse cx="420" cy="370" rx="14" ry="22" fill={ink} />
          <path d="M 130 440 Q 300 540, 470 440" fill="none" stroke={ink} strokeWidth="14" strokeLinecap="round" />
          <path d="M 235 480 Q 300 510, 365 480 L 365 470 L 235 470 Z" fill={ink} />
        </g>
      </svg>

      {/* Stickers coins */}
      <div style={{ position: 'absolute', top: 24, left: 24, right: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', zIndex: 5 }}>
        <div style={{
          background: greenBright, color: ink, padding: '4px 10px',
          fontFamily: 'DM Mono, monospace', fontSize: 10, letterSpacing: '0.15em',
          animation: 'pa-sticker-l 3s ease-in-out infinite',
        }}>★ SKOAD CREW ★</div>
        <div style={{
          background: ink, color: greenBright, padding: '4px 10px',
          fontFamily: 'DM Mono, monospace', fontSize: 10, letterSpacing: '0.15em',
          border: `1px solid ${greenBright}`,
          animation: 'pa-sticker-r 3.4s ease-in-out infinite',
        }}>{'♊︎'} TWINS EDITION</div>
      </div>

      {/* Titre SKOAD — glitch */}
      <div style={{ position: 'absolute', top: 60, left: 0, right: 0, textAlign: 'center', zIndex: 6 }}>
        <div className="f-rubik uppercase" style={{
          fontSize: 86, color: greenBright, lineHeight: 0.85, letterSpacing: '-0.06em',
          textShadow: `4px 4px 0 ${ink}, 8px 8px 0 ${green}`,
          animation: 'pa-title-glitch 7s ease-in-out infinite',
        }}>
          SKOAD
        </div>
        <div className="f-rubik uppercase" style={{
          fontSize: 52, color: ink, lineHeight: 0.9, marginTop: 2,
          textShadow: `2px 2px 0 ${greenBright}`,
          animation: 'pa-rave-glitch 8s ease-in-out infinite',
        }}>
          //RAVE\\
        </div>
      </div>

      {/* Sticker "TURNING 31" — bounce */}
      <div style={{
        position: 'absolute', top: 220, right: 26, zIndex: 7,
        background: greenBright, color: ink, padding: '8px 12px',
        fontFamily: 'DM Mono, monospace', fontSize: 11, letterSpacing: '0.1em',
        border: `2px solid ${ink}`,
        animation: 'pa-bounce31 2.5s ease-in-out infinite',
      }}>
        TURNING<br/><span style={{ fontFamily: 'Rubik Mono One', fontSize: 28 }}>31</span>
      </div>

      {/* Bottom block */}
      <div style={{ position: 'absolute', bottom: 22, left: 24, right: 24, zIndex: 8 }}>

        {/* Dates — entrée décalée */}
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 12, color: greenBright }}>
          <span className="f-anton" style={{
            fontSize: 90, lineHeight: 0.85,
            animation: 'pa-date-in 0.6s ease-out both', animationDelay: '0.05s',
          }}>22</span>
          <span className="f-anton" style={{ fontSize: 60, color: green }}>·</span>
          <span className="f-anton" style={{
            fontSize: 90, lineHeight: 0.85,
            animation: 'pa-date-in 0.6s ease-out both', animationDelay: '0.18s',
          }}>23</span>
          <span className="f-anton" style={{ fontSize: 60, color: green }}>·</span>
          <span className="f-anton" style={{
            fontSize: 90, lineHeight: 0.85,
            animation: 'pa-date-in 0.6s ease-out both', animationDelay: '0.31s',
          }}>24</span>
          <span className="f-mono" style={{
            fontSize: 12, letterSpacing: '0.2em', color: greenBright, marginLeft: 'auto',
            animation: 'pa-date-in 0.6s ease-out both', animationDelay: '0.44s',
          }}>MAI<br/>2026</span>
        </div>

        {/* Lineup — ticker horizontal */}
        <div style={{
          background: greenBright, color: ink, padding: '6px 10px',
          overflow: 'hidden', marginBottom: 10,
        }}>
          <div style={{
            display: 'inline-flex', whiteSpace: 'nowrap',
            fontFamily: 'Rubik Mono One', fontSize: 13, letterSpacing: '-0.02em',
            textTransform: 'uppercase', lineHeight: 1.3,
            animation: `pa-ticker ${tickerDur} linear infinite`,
          }}>
            {[0, 1].map(j => (
              <span key={j} style={{ display: 'inline-flex', alignItems: 'baseline', paddingRight: 40 }}>
                {lineup.map((n, i) => (
                  <span key={i} style={{ display: 'inline-flex', alignItems: 'baseline', gap: 8, marginRight: 8 }}>
                    <span>▶</span><span>{n}</span>
                  </span>
                ))}
                <span>▶</span>
              </span>
            ))}
          </div>
        </div>

        {/* Boîtes thèmes */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
          <div style={{ flex: 1, border: `2px solid ${greenBright}`, padding: '8px 10px', color: greenBright }}>
            <div className="f-mono" style={{ fontSize: 9, letterSpacing: '0.2em', opacity: 0.7 }}>NIGHT 02 · SAM</div>
            <div className="f-rubik uppercase" style={{ fontSize: 18, lineHeight: 1, marginTop: 4 }}>SKOAD</div>
            <div className="f-mono" style={{ fontSize: 8, letterSpacing: '0.12em', marginTop: 4 }}>▣ BOB VERT + HOODIE NOIR</div>
          </div>
          <div style={{ flex: 1, background: greenBright, color: ink, padding: '8px 10px' }}>
            <div className="f-mono" style={{ fontSize: 9, letterSpacing: '0.2em', opacity: 0.7 }}>NIGHT 03 · DIM</div>
            <div className="f-rubik uppercase" style={{ fontSize: 18, lineHeight: 1, marginTop: 4 }}>GEMINI</div>
            <div className="f-mono" style={{ fontSize: 8, letterSpacing: '0.12em', marginTop: 4 }}>{'♊︎'} DUALITÉ / TWINS / MIROIR</div>
          </div>
        </div>

        {/* Footer */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', borderTop: `1px solid ${green}`, paddingTop: 8 }}>
          <img src="assets/skoad_logo.png" alt="SKOAD" style={{ height: 56, width: 'auto', filter: 'invert(1) hue-rotate(180deg)' }} />
          <div className="f-mono uppercase" style={{ fontSize: 9, letterSpacing: '0.2em', color: greenBright, textAlign: 'right', lineHeight: 1.5 }}>
            <div>{'>>>'} EDITION XXXI</div>
            <div>{'>>>'} SECRET LOC.</div>
            <div>{'>>>'} RSVP REQUIRED</div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.PosterAcidAnimated = PosterAcidAnimated;