KLC-Website-Frontend/src/components/LogosSection.tsx

import React from 'react';
import imgImage36 from "figma:asset/6bdf8056f51bbdc6dd9dab9044a6579a254bd02c.png";
import imgImage39 from "figma:asset/037c4659b7b0bf15b1dfdcd4868cb42e8257e838.png";
import imgImage43 from "figma:asset/c57ec1f4466f68e607139a3cd6d52f7e2f372408.png";
import imgImage45 from "figma:asset/4833274f0a593cd31fdefe553b70bb016de281af.png";
import imgImage38 from "figma:asset/d5bab6ea4f3d8cef3b0425c45cfee7faea19fdbc.png";
import imgImage47 from "figma:asset/e8fad960112d5eba554c3969d08891ebe4d4b9c7.png";
import Frame1597884933 from "../imports/Frame1597884933-44-374";

// Logo data using Frame1597884944 logos with proper dimensions
const logoData = [
  { src: imgImage36, name: 'CANMOOR', width: 302, height: 54 },      // CANMOOR
  { src: imgImage45, name: 'BlackRock', width: 210, height: 54 },    // BlackRock
  { src: imgImage38, name: 'Royal London', width: 145, height: 54 }, // Royal London
  { src: imgImage39, name: 'Abstract', width: 172, height: 54 },     // Abstract
  { src: imgImage47, name: 'ARES', width: 163, height: 54 },         // ARES
  { src: imgImage43, name: 'KADANS', width: 206, height: 54 },       // KADANS
  // Repeat logos for more variety in scrolling
  { src: imgImage36, name: 'CANMOOR', width: 302, height: 54 },      // CANMOOR (repeat)
  { src: imgImage45, name: 'BlackRock', width: 210, height: 54 },    // BlackRock (repeat)
  { src: imgImage38, name: 'Royal London', width: 145, height: 54 }, // Royal London (repeat)
  { src: imgImage39, name: 'Abstract', width: 172, height: 54 },     // Abstract (repeat)
  { src: imgImage47, name: 'ARES', width: 163, height: 54 },         // ARES (repeat)
  { src: imgImage43, name: 'KADANS', width: 206, height: 54 },       // KADANS (repeat)
];

// Top row logos - Original 6 unique logos
const topRowLogos = logoData.slice(0, 6);

// Bottom row logos - Repeated 6 logos for variety
const bottomRowLogos = logoData.slice(6, 12);

interface LogoItemProps {
  logo: typeof logoData[0];
  index: number;
  duplicate?: boolean;
}

function LogoItem({ logo, index, duplicate = false }: LogoItemProps) {
  // Scale down larger logos while maintaining aspect ratio
  const scaledWidth = logo.width > 250 ? Math.round(logo.width * 0.8) : logo.width;
  const displayWidth = Math.max(120, Math.min(scaledWidth, 250)); // Min 120px, Max 250px
  
  return (
    <div
      className="logo-ticker-item flex-shrink-0 flex items-center justify-center mx-8"
      style={{
        width: `${displayWidth}px`,
        height: '54px',
        minWidth: `${displayWidth}px`,
      }}
      aria-label={logo.name}
      role="listitem"
      tabIndex={duplicate ? -1 : 0}
    >
      <img
        src={logo.src}
        alt={`${logo.name} logo`}
        style={{
          width: '100%',
          height: 'auto',
          maxHeight: '54px',
          objectFit: 'contain',
        }}
        className="logo-ticker-item-image"
      />
    </div>
  );
}

export function LogosSection() {
  return (
    <section 
      className="py-16 overflow-hidden"
      style={{ 
        backgroundColor: '#F7F7FD', // Same as app background
        width: '100%',
      }}
    >
      {/* Reference Frame Component (Hidden - maintains import) */}
      <div className="hidden" aria-hidden="true">
        <Frame1597884933 />
      </div>

      {/* Logo Ticker - Two Rows */}
      <div 
        className="w-full relative"
        role="region"
        aria-label="Client logos showcase"
      >
        {/* Top Row - Scrolling Left to Right */}
        <div 
          className="relative h-[54px] mb-16 overflow-hidden"
          role="list"
          aria-label="Client logos row 1"
        >
          <div className="flex items-center h-full will-change-transform">
            <div 
              className="scroll-left flex items-center h-full" 
              style={{ 
                width: '400%',
                gap: '80px',
                paddingLeft: '40px',
                paddingRight: '40px'
              }}
            >
              {/* Create multiple sets for seamless infinite scroll */}
              {[1, 2, 3, 4].map((setNumber) => (
                <div 
                  key={`top-set-${setNumber}`} 
                  className="flex items-center h-full"
                  style={{ gap: '80px' }}
                >
                  {topRowLogos.map((logo, index) => (
                    <LogoItem 
                      key={`top-${setNumber}-${index}`} 
                      logo={logo} 
                      index={index} 
                      duplicate={setNumber > 1} 
                    />
                  ))}
                </div>
              ))}
            </div>
          </div>
        </div>
        
        {/* Bottom Row - Scrolling Right to Left */}
        <div 
          className="relative h-[54px] overflow-hidden"
          role="list"
          aria-label="Client logos row 2"
        >
          <div className="flex items-center h-full will-change-transform">
            <div 
              className="scroll-right flex items-center h-full" 
              style={{ 
                width: '400%',
                gap: '80px',
                paddingLeft: '40px',
                paddingRight: '40px'
              }}
            >
              {/* Create multiple sets for seamless infinite scroll */}
              {[1, 2, 3, 4].map((setNumber) => (
                <div 
                  key={`bottom-set-${setNumber}`} 
                  className="flex items-center h-full"
                  style={{ gap: '80px' }}
                >
                  {bottomRowLogos.map((logo, index) => (
                    <LogoItem 
                      key={`bottom-${setNumber}-${index}`} 
                      logo={logo} 
                      index={index} 
                      duplicate={setNumber > 1} 
                    />
                  ))}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}