// Infinite tool-logo slider (ported from the framer-motion InfiniteSlider to CSS keyframes).
const TOOL_LOGOS = [
  { name: 'Photoshop', src: 'https://upload.wikimedia.org/wikipedia/commons/a/af/Adobe_Photoshop_CC_icon.svg' },
  { name: 'Illustrator', src: 'https://upload.wikimedia.org/wikipedia/commons/f/fb/Adobe_Illustrator_CC_icon.svg' },
  { name: 'InDesign', src: 'https://upload.wikimedia.org/wikipedia/commons/4/48/Adobe_InDesign_CC_icon.svg' },
  { name: 'Lightroom', src: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Adobe_Photoshop_Lightroom_CC_logo.svg' },
  { name: 'Figma', src: 'https://cdn.simpleicons.org/figma' },
  { name: 'Premiere Pro', src: 'https://upload.wikimedia.org/wikipedia/commons/4/40/Adobe_Premiere_Pro_CC_icon.svg' },
  { name: 'After Effects', src: 'https://upload.wikimedia.org/wikipedia/commons/c/cb/Adobe_After_Effects_CC_icon.svg' },
  { name: 'CapCut Pro', src: 'https://commons.wikimedia.org/wiki/Special:FilePath/Capcut-icon.svg' },
  { name: 'WordPress', src: 'https://cdn.simpleicons.org/wordpress/21759B' },
  { name: 'Elementor', src: 'https://cdn.simpleicons.org/elementor/92003B' },
  { name: 'HTML5', src: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg' },
  { name: 'CSS3', src: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg' },
  { name: 'Canva', src: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/canva/canva-original.svg' },
  { name: 'ChatGPT', src: 'https://commons.wikimedia.org/wiki/Special:FilePath/ChatGPT_logo.svg' },
  { name: 'Claude AI', src: 'https://cdn.simpleicons.org/claude' },
  { name: 'Midjourney', src: 'https://commons.wikimedia.org/wiki/Special:FilePath/Midjourney_Emblem.svg' },
];

function ToolSlider() {
  const items = [...TOOL_LOGOS, ...TOOL_LOGOS];
  return (
    <div className="tool-slider" aria-label="Software and tools">
      <div className="tool-slider-track">
        {items.map((t, i) => (
          <div className="tool-slide" key={i} aria-hidden={i >= TOOL_LOGOS.length}>
            <span className="tool-slide-tile"><img src={t.src} alt={`${t.name} logo`} loading="lazy" /></span>
            <span className="tool-slide-name">{t.name}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

window.ToolSlider = ToolSlider;