/**
 * ArtistsMarquee — Homepage Case Studies section.
 * Horizontal scroll carousel.
 *  - Desktop: left/right arrows to navigate
 *  - Mobile: swipe with finger
 *  - Scroll snap for clean alignment
 */

const CASE_STUDY_IMAGES = [
  'https://aesthetics-media.b-cdn.net/IMG_8564.jpg',
  'https://aesthetics-media.b-cdn.net/IMG_8565.jpg',
  'https://aesthetics-media.b-cdn.net/IMG_8566.jpg',
  'https://aesthetics-media.b-cdn.net/IMG_8567.jpg',
  'https://aesthetics-media.b-cdn.net/IMG_8568.jpg',
  'https://aesthetics-media.b-cdn.net/IMG_8569.jpg',
  'https://aesthetics-media.b-cdn.net/IMG_8570.jpg',
  'https://aesthetics-media.b-cdn.net/IMG_9627%20(1).jpg',
];

const CASE_STUDY_GENRES = [
  'Hip-Hop',
  'Hip-Hop',
  'Hip-Hop',
  'Indie',
  'Latin',
  'Rock',
  'Alt',
  'Hip-Hop',
];

window.CASE_STUDY_IMAGES = CASE_STUDY_IMAGES;

function ArtistCard({ src, genre, mobile }) {
  const w = mobile ? 240 : 300;
  return (
    <div style={{
      position: 'relative',
      flex: '0 0 auto',
      width: w,
      aspectRatio: '0.78 / 1',
      borderRadius: 18,
      overflow: 'hidden',
      background: '#0B0B12',
      border: '1px solid rgba(255,255,255,0.07)',
      boxShadow: '0 12px 32px rgba(0,0,0,0.45), 0 0 40px rgba(201,76,255,0.08)',
      scrollSnapAlign: 'start',
    }}>
      <img
        src={src}
        alt=""
        loading="lazy"
        style={{
          width: '100%',
          height: '100%',
          objectFit: 'cover',
          objectPosition: 'top center',
          display: 'block',
        }}
      />
      <div style={{
        position: 'absolute', top: 12, left: 12,
        display: 'inline-flex', alignItems: 'center', gap: 6,
        background: 'rgba(5,5,8,0.72)',
        backdropFilter: 'blur(10px)',
        WebkitBackdropFilter: 'blur(10px)',
        border: '1px solid rgba(201,76,255,0.28)',
        padding: '5px 10px',
        borderRadius: 100,
      }}>
        <div style={{ width: 5, height: 5, borderRadius: '50%', background: '#1DB954', boxShadow: '0 0 6px #1DB954' }} />
        <span style={{
          color: '#F5F2FF', fontSize: 9, fontWeight: 700,
          letterSpacing: '0.1em', textTransform: 'uppercase',
          fontFamily: "'JetBrains Mono', monospace",
        }}>
          {genre}
        </span>
      </div>
    </div>
  );
}

function ArtistsHorizontalScroll({ mobile }) {
  const scrollerRef = React.useRef(null);
  const gap = mobile ? 14 : 22;
  const sidePad = mobile ? 20 : 48;
  const cardW = mobile ? 240 : 300;

  function scroll(dir) {
    const el = scrollerRef.current;
    if (!el) return;
    el.scrollBy({ left: dir * (cardW + gap), behavior: 'smooth' });
  }

  return (
    <div style={{ position: 'relative', width: '100%' }}>
      {/* Hide scrollbar visually */}
      <style>{`
        .artist-scroll-track {
          -ms-overflow-style: none;
          scrollbar-width: none;
        }
        .artist-scroll-track::-webkit-scrollbar {
          display: none;
        }
      `}</style>

      {/* Arrows — desktop only */}
      {!mobile && (
        <>
          <button
            onClick={() => scroll(-1)}
            aria-label="Previous artists"
            style={{
              position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)',
              zIndex: 3, width: 48, height: 48, borderRadius: '50%',
              background: 'rgba(11,11,18,0.9)', border: '1px solid rgba(255,255,255,0.08)',
              color: '#F5F2FF', cursor: 'pointer', backdropFilter: 'blur(8px)',
              WebkitBackdropFilter: 'blur(8px)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              transition: 'all 200ms',
            }}
            onMouseEnter={e => {
              e.currentTarget.style.borderColor = 'rgba(201,76,255,0.4)';
              e.currentTarget.style.background = 'rgba(28,16,40,0.9)';
            }}
            onMouseLeave={e => {
              e.currentTarget.style.borderColor = 'rgba(255,255,255,0.08)';
              e.currentTarget.style.background = 'rgba(11,11,18,0.9)';
            }}
          >
            <svg width="18" height="18" viewBox="0 0 16 16" fill="none">
              <path d="M10 3.5L6 8l4 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
          <button
            onClick={() => scroll(1)}
            aria-label="Next artists"
            style={{
              position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)',
              zIndex: 3, width: 48, height: 48, borderRadius: '50%',
              background: 'rgba(11,11,18,0.9)', border: '1px solid rgba(255,255,255,0.08)',
              color: '#F5F2FF', cursor: 'pointer', backdropFilter: 'blur(8px)',
              WebkitBackdropFilter: 'blur(8px)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              transition: 'all 200ms',
            }}
            onMouseEnter={e => {
              e.currentTarget.style.borderColor = 'rgba(201,76,255,0.4)';
              e.currentTarget.style.background = 'rgba(28,16,40,0.9)';
            }}
            onMouseLeave={e => {
              e.currentTarget.style.borderColor = 'rgba(255,255,255,0.08)';
              e.currentTarget.style.background = 'rgba(11,11,18,0.9)';
            }}
          >
            <svg width="18" height="18" viewBox="0 0 16 16" fill="none">
              <path d="M6 3.5L10 8l-4 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
        </>
      )}

      {/* Edge fade hints */}
      <div style={{
        position: 'absolute', left: 0, top: 0, bottom: 0,
        width: sidePad, pointerEvents: 'none',
        background: 'linear-gradient(to right, #050508, transparent)',
        zIndex: 2,
      }} />
      <div style={{
        position: 'absolute', right: 0, top: 0, bottom: 0,
        width: sidePad, pointerEvents: 'none',
        background: 'linear-gradient(to left, #050508, transparent)',
        zIndex: 2,
      }} />

      {/* The scrollable track */}
      <div
        ref={scrollerRef}
        className="artist-scroll-track"
        style={{
          display: 'flex',
          gap: `${gap}px`,
          overflowX: 'auto',
          overflowY: 'hidden',
          paddingLeft: sidePad,
          paddingRight: sidePad,
          paddingTop: mobile ? 10 : 20,
          paddingBottom: mobile ? 10 : 20,
          scrollSnapType: 'x mandatory',
          WebkitOverflowScrolling: 'touch',
          touchAction: 'pan-x pan-y',
        }}
      >
        {CASE_STUDY_IMAGES.map((src, i) => (
          <ArtistCard key={i} src={src} genre={CASE_STUDY_GENRES[i]} mobile={mobile} />
        ))}
      </div>
    </div>
  );
}

function ArtistsMarquee() {
  const w = useWindowWidth();
  const mobile = w < 768;

  return (
    <section id="case-studies" style={{
      padding: mobile ? '80px 0 90px' : '140px 0 150px',
      background: '#050508',
      borderTop: '1px solid rgba(255,255,255,0.04)',
      overflow: 'hidden',
      position: 'relative',
    }}>
      <div style={{ textAlign: 'center', marginBottom: mobile ? 48 : 72, padding: '0 20px' }}>
        <FadeIn>
          <div style={{ color: '#7C7C90', fontSize: 11, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 20, fontFamily: "'JetBrains Mono', monospace" }}>
            Case studies
          </div>
          <h2 style={{
            fontSize: mobile ? 'clamp(34px,10vw,52px)' : 'clamp(52px,6.5vw,84px)',
            fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1.02,
            color: '#F5F2FF', margin: '0 0 18px', textWrap: 'balance',
          }}>
            Artists see the{' '}
            <span style={{ background: 'linear-gradient(135deg, #A78BFA 0%, #7C3AED 50%, #C084FC 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>difference</span>
          </h2>
          <div style={{ width: 40, height: 2, background: '#7C3AED', margin: '0 auto 18px', borderRadius: 1 }} />
          <p style={{ color: '#A1A1B3', fontSize: mobile ? 18 : 26, fontWeight: 500, letterSpacing: '-0.02em', fontStyle: 'italic' }}>
            You will, too.
          </p>
        </FadeIn>
      </div>

      <ArtistsHorizontalScroll mobile={mobile} />
    </section>
  );
}

Object.assign(window, { ArtistsMarquee, ArtistsHorizontalScroll, ArtistCard });