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

import React from 'react';
import accenture from "../assets/accenture.svg";
import adani from "../assets/adani-logo.svg";
import axis from "../assets/axis-bank.svg";
import ceat from "../assets/ceat-logo.svg";
import hsbc from "../assets/hsbc.svg";
import larsen from "../assets/larsen-toubro-logo.svg";
import levis from "../assets/levis.svg";
import tata from "../assets/tata-motors.svg";
import Frame1597884933 from "../imports/Frame1597884933-44-374";

// Logo data using Frame1597884944 logos with proper dimensions
const logoData = [
  { src: accenture, name: 'CANMOOR', width: 302, height: 54 },      // CANMOOR
  { src: ceat, name: 'BlackRock', width: 210, height: 54 },    // BlackRock
  { src: hsbc, name: 'Royal London', width: 145, height: 54 }, // Royal London
  { src: adani, name: 'Abstract', width: 172, height: 54 },     // Abstract
  { src: larsen, name: 'ARES', width: 163, height: 54 },         // ARES
  { src: axis, name: 'KADANS', width: 206, height: 54 },       // KADANS
  { src: levis, name: 'levis', width: 206, height: 54 },       // KADANS
  { src: tata, name: 'tata', width: 206, height: 54 },       

];

// 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] 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>
      </div>
    </section>
  );
}