Function CompetitionTabs

web/src/components/ui/landing/competition/tabs.tsx:93–315

({
  progress = 0,
  animationComplexity = 'full',
  layout = 'horizontal',
  activeTab: controlledActiveTab,
  onTabChange,
}: CompetitionTabsProps)

}

export function CompetitionTabs({
  progress = 0,
  animationComplexity = 'full',
  layout = 'horizontal',
  activeTab: controlledActiveTab,
  onTabChange,
}: CompetitionTabsProps) {
  const [internalActiveTab, setInternalActiveTab] =
    useState<CompetitorType>('cursor')

  const activeTab =
    controlledActiveTab !== undefined ? controlledActiveTab : internalActiveTab
  const isMobile = useIsMobile()

  const isVertical = layout === 'vertical' && !isMobile

  const handleTabClick = (tab: CompetitorType) => {
    if (onTabChange) {
      onTabChange(tab)
    } else {
      setInternalActiveTab(tab)
    }
  }

  useEffect(() => {
    if (controlledActiveTab !== undefined) return

    const tabThreshold = 100 / competitors.length
    const tabIndex = Math.min(
      Math.floor(progress / tabThreshold),
      competitors.length - 1,
    )

    if (progress > 0) {
      setInternalActiveTab(competitors[tabIndex])
    }
  }, [progress, controlledActiveTab])

  return (
    <div
      className={cn('h-full', isVertical ? 'flex flex-row' : 'flex flex-col')}
    >
      <div
        className={cn(
          isVertical
            ? 'w-1/4 p-2 flex flex-col border-r border-zinc-800/50 bg-black/10'
            : isMobile
              ? 'p-1 grid grid-cols-4 gap-1 border-b border-zinc-800/50 bg-black/10'
              : 'p-2 flex border-b border-zinc-800/50 bg-black/10',
          'min-h-[40px]',
        )}
        role="tablist"
        aria-orientation={isVertical ? 'vertical' : 'horizontal'}
      >
        {competitors.map((competitor) => (
          <motion.button
            key={competitor}
            role="tab"