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

const REVIEW_IMAGES = [
  'https://aesthetics-media.b-cdn.net/REVIEWS/IMG_8585.jpg',
  'https://aesthetics-media.b-cdn.net/REVIEWS/IMG_8586.jpg',
  'https://aesthetics-media.b-cdn.net/REVIEWS/IMG_8587.jpg',
  'https://aesthetics-media.b-cdn.net/REVIEWS/IMG_8588.jpg',
  'https://aesthetics-media.b-cdn.net/REVIEWS/IMG_8589.jpg',
  'https://aesthetics-media.b-cdn.net/REVIEWS/IMG_8590.jpg',
  'https://aesthetics-media.b-cdn.net/REVIEWS/IMG_8591.jpg',
  'https://aesthetics-media.b-cdn.net/REVIEWS/IMG_8593.jpg',
  'https://aesthetics-media.b-cdn.net/REVIEWS/IMG_8594.jpg',
  'https://aesthetics-media.b-cdn.net/REVIEWS/IMG_8595.jpg',
  'https://aesthetics-media.b-cdn.net/REVIEWS/IMG_8596.jpg',
  'https://aesthetics-media.b-cdn.net/REVIEWS/IMG_8597.jpg',
  'https://aesthetics-media.b-cdn.net/REVIEWS/IMG_8598.jpg',
  'https://aesthetics-media.b-cdn.net/REVIEWS/IMG_8599.jpg',
];
window.REVIEW_IMAGES = REVIEW_IMAGES;

function ReviewCard({ src, mobile }) {
  // IG story ratio 9:16
  const w = mobile ? 200 : 260;
  return (
    <div style={{
      flex: '0 0 auto',
      width: w,
      aspectRatio: '9 / 16',
      borderRadius: 18,
      overflow: 'hidden',
      background: '#0B0B12',
      border: '1px solid rgba(255,255,255,0.06)',
      boxShadow: '0 16px 40px rgba(0,0,0,0.5), 0 0 40px rgba(201,76,255,0.1)',
      scrollSnapAlign: 'start',
    }}>
      <img src={src} alt="Artist review" loading="lazy" style={{
        width: '100%', height: '100%', objectFit: 'cover', display: 'block',
      }} />
    </div>
  );
}

function ReviewsHorizontalScroll({ mobile }) {
  const scrollerRef = React.useRef(null);
  const gap = mobile ? 14 : 20;
  const sidePad = mobile ? 20 : 48;
  const cardW = mobile ? 200 : 260;

  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>{`
        .review-scroll-track {
          -ms-overflow-style: none;
          scrollbar-width: none;
        }
        .review-scroll-track::-webkit-scrollbar {
          display: none;
        }
      `}</style>

      {/* Ambient purple glow behind */}
      <div style={{
        position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
        width: '80%', height: '80%', pointerEvents: 'none',
        background: 'radial-gradient(ellipse 60% 60% at 50% 50%, rgba(201,76,255,0.22) 0%, rgba(94,43,255,0.08) 40%, transparent 75%)',
        filter: 'blur(30px)',
        zIndex: 0,
      }} />

      {/* Arrows — desktop only */}
      {!mobile && (
        <>
          <button
            onClick={() => scroll(-1)}
            aria-label="Previous reviews"
            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 reviews"
            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="review-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',
          position: 'relative',
          zIndex: 1,
        }}
      >
        {REVIEW_IMAGES.map((src, i) => (
          <ReviewCard key={i} src={src} mobile={mobile} />
        ))}
      </div>
    </div>
  );
}

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

  return (
    <section style={{
      padding: mobile ? '80px 0 100px' : '140px 0 160px',
      background: 'radial-gradient(ellipse 60% 60% at 50% 50%, rgba(15,10,26,0.9) 0%, #050508 70%)',
      borderTop: '1px solid rgba(255,255,255,0.04)',
      borderBottom: '1px solid rgba(255,255,255,0.04)',
      overflow: 'hidden',
      position: 'relative',
    }}>
      <div style={{ textAlign: 'center', marginBottom: mobile ? 48 : 72, padding: '0 20px', maxWidth: 820, margin: mobile ? '0 auto 48px' : '0 auto 72px' }}>
        <FadeIn>
          <div style={{ color: '#7C7C90', fontSize: 11, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 20, fontFamily: "'JetBrains Mono', monospace" }}>
            Testimonials
          </div>
          <h2 style={{
            fontSize: mobile ? 'clamp(28px,8vw,42px)' : 'clamp(40px,5.5vw,68px)',
            fontWeight: 700, letterSpacing: '-0.035em', lineHeight: 1.05,
            color: '#F5F2FF', margin: 0, textWrap: 'balance',
          }}>
            Our artists say it better<br/>than we can.
          </h2>
        </FadeIn>
      </div>

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

Object.assign(window, { TestimonialsMarquee, ReviewsHorizontalScroll, ReviewCard });