const { useState, useEffect } = React;

const BONUS_MEDIA = [
  '/uploads/miniabonus/bonus01.jpg', '/uploads/miniabonus/bonus02.jpg', '/uploads/miniabonus/bonus03.jpg',
  '/uploads/miniabonus/bonus04.jpg', '/uploads/miniabonus/bonus05.jpg', '/uploads/miniabonus/bonus06.jpg',
  '/uploads/miniabonus/bonus07.mp4', '/uploads/miniabonus/bonus08.mp4', '/uploads/miniabonus/bonus09.mp4',
  '/uploads/miniabonus/bonus10.mp4', '/uploads/miniabonus/bonus11.mp4', '/uploads/miniabonus/bonus12.mp4',
  '/uploads/miniabonus/bonus13.mp4', '/uploads/miniabonus/bonus14.mp4', '/uploads/miniabonus/bonus15.mp4',
];

const bonusCol1 = BONUS_MEDIA.filter((_, i) => i % 3 === 0);
const bonusCol2 = BONUS_MEDIA.filter((_, i) => i % 3 === 1);
const bonusCol3 = BONUS_MEDIA.filter((_, i) => i % 3 === 2);

const isVideo = (src) => /\.mp4(\?|$)/i.test(src);

function BonusCol({ imgs, dir, speed }) {
  const loop = [...imgs, ...imgs];
  return (
    <div style={{
      display: 'flex', flexDirection: 'column', gap: 6,
      animation: `${dir === 'up' ? 'bColUp' : 'bColDown'} ${speed}s linear infinite`,
      willChange: 'transform',
    }}>
      {loop.map((src, i) => (
        <div key={i} style={{ borderRadius: 10, overflow: 'hidden', flexShrink: 0, aspectRatio: '4/3' }}>
          {isVideo(src) ? (
            <video src={src} autoPlay muted loop playsInline preload="metadata"
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
              onError={e => { e.currentTarget.style.opacity = '0'; }}
            />
          ) : (
            <img src={src} alt="" loading="lazy"
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
              onError={e => { e.currentTarget.style.opacity = '0'; }}
            />
          )}
        </div>
      ))}
    </div>
  );
}

function BonusSection() {
  const [isLight, setIsLight] = useState(false);
  useEffect(() => {
    const check = () => setIsLight(document.documentElement.getAttribute('data-theme') === 'light');
    check();
    const obs = new MutationObserver(check);
    obs.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
    return () => obs.disconnect();
  }, []);

  return (
    <section id="bonus" className="section">
      <div className="container">
        <div className="bonus-frame" style={{
          position: 'relative', overflow: 'hidden',
          borderRadius: 20, height: 460,
          background: 'var(--bg)',
          border: '1px solid var(--line-strong)',
        }}>
          <div className="bonus-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22, padding: '12px 0', height: '100%' }}>
            <BonusCol imgs={bonusCol1} dir="up"   speed={32} />
            <BonusCol imgs={bonusCol2} dir="down" speed={40} />
            <BonusCol imgs={bonusCol3} dir="up"   speed={28} />
          </div>

          <div style={{ position: 'absolute', inset: 0, background: isLight ? 'rgba(255,255,255,0.88)' : 'rgba(0,0,0,0.84)', zIndex: 2 }} />

          <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 60, zIndex: 3, pointerEvents: 'none', background: 'linear-gradient(to bottom, var(--bg) 0%, transparent 100%)' }} />
          <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 120, zIndex: 3, pointerEvents: 'none', background: 'linear-gradient(to top, var(--bg) 0%, var(--bg) 20%, transparent 100%)' }} />
          <div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, width: 80, zIndex: 3, pointerEvents: 'none', background: 'linear-gradient(to right, var(--bg) 0%, transparent 100%)' }} />
          <div style={{ position: 'absolute', top: 0, bottom: 0, right: 0, width: 80, zIndex: 3, pointerEvents: 'none', background: 'linear-gradient(to left, var(--bg) 0%, transparent 100%)' }} />

          <div style={{
            position: 'absolute', inset: 0, zIndex: 4,
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center', gap: 24,
            padding: '0 32px', textAlign: 'center',
          }}>
            <h2 className="h2" style={{
              color: isLight ? 'var(--ink)' : '#fff',
              textTransform: 'none',
              textShadow: isLight ? '0 2px 20px rgba(255,255,255,0.8)' : '0 2px 32px rgba(0,0,0,0.9)',
              lineHeight: 1.15,
              textAlign: 'center',
            }}>
              Des bonus offerts<br /><span className="serif-i" style={{ color: 'var(--accent)', fontWeight: 400 }}>chaque mois.</span>
            </h2>

            <div style={{
              position: 'relative', overflow: 'hidden',
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '12px 30px', borderRadius: 100,
              background: 'var(--bg-card)',
              border: '1px solid var(--accent)',
              boxShadow: isLight
                ? '0 4px 20px rgba(0,0,0,0.08), 0 0 20px var(--accent-glow)'
                : '0 0 20px var(--accent-glow), 0 0 44px color-mix(in oklab, var(--accent) 14%, transparent)',
              animation: `${isLight ? 'badgePulseLight' : 'badgePulseDark'} 7s ease-in-out infinite`,
            }}>
              <div style={{
                position: 'absolute',
                top: '50%', left: 0,
                width: 70, height: 70,
                borderRadius: '50%',
                background: 'var(--accent)',
                opacity: 0.22,
                filter: 'blur(18px)',
                transform: 'translateY(-50%)',
                animation: 'glowSlide 7s ease-in-out infinite',
                pointerEvents: 'none',
              }} />
              <span style={{ fontSize: 14, color: 'var(--ink-dim)', fontWeight: 500, position: 'relative' }}>Valeur</span>
              <span style={{ fontSize: 14, color: 'var(--ink-mute)', textDecoration: 'line-through', position: 'relative' }}>500€</span>
              <span style={{ width: 1, height: 14, background: 'var(--line-strong)', display: 'inline-block', flexShrink: 0 }} />
              <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--accent)', fontFamily: 'Geist Mono, monospace', letterSpacing: '0.05em', position: 'relative' }}>OFFERT</span>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes bColUp   { from { transform: translateY(0); }    to { transform: translateY(-50%); } }
        @keyframes bColDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
        @keyframes glowSlide {
          0%   { left: -35px; opacity: 0.1; }
          50%  { left: calc(100% - 35px); opacity: 0.28; }
          100% { left: -35px; opacity: 0.1; }
        }
        @keyframes badgePulseDark {
          0%, 100% { box-shadow: 0 0 20px var(--accent-glow), 0 0 44px color-mix(in oklab, var(--accent) 14%, transparent); }
          50%      { box-shadow: 0 0 30px var(--accent-glow), 0 0 64px color-mix(in oklab, var(--accent) 24%, transparent); }
        }
        @keyframes badgePulseLight {
          0%, 100% { box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 0 20px var(--accent-glow); }
          50%      { box-shadow: 0 6px 30px rgba(0,0,0,0.12), 0 0 30px var(--accent-glow); }
        }
        @media (max-width: 768px) {
          .bonus-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
          .bonus-grid > div:last-child { display: none; }
          .bonus-frame { height: 360px !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { BonusSection });