import React from 'react'; import { useTheme } from 'ThemeContext'; const TabNavigation = ({ activeTab, setActiveTab }) => { const theme = useTheme(); const tabStyle = (isActive) => ({ padding: '12px 20px', borderRadius: theme.borderRadius, background: isActive ? activeTab === 'trustpilot' ? `linear-gradient(90deg, #36806B80 0%, #36806B80 100%)` : `linear-gradient(90deg, #0066ff80 0%, #0066ff80 100%)` : 'rgba(18, 18, 18, 0.5)', color: isActive ? '#fff' : theme.colors.lightText, fontWeight: isActive ? '600' : '400', cursor: 'pointer', margin: '0 8px', transition: 'all 0.3s ease', border: isActive ? activeTab === 'trustpilot' ? `1px solid #36806B40` : `1px solid #0066ff40` : '1px solid transparent', boxShadow: isActive ? '0 4px 12px rgba(0,0,0,0.2)' : 'none', transform: 'translateY(0)', '&:hover': { transform: 'translateY(-2px)', boxShadow: isActive ? '0 6px 16px rgba(0,0,0,0.3)' : '0 4px 12px rgba(0,0,0,0.15)', border: isActive ? activeTab === 'trustpilot' ? `1px solid #36806B60` : `1px solid #0066ff60` : '1px solid rgba(255,255,255,0.1)', background: isActive ? activeTab === 'trustpilot' ? `linear-gradient(90deg, #36806B90 0%, #36806B90 100%)` : `linear-gradient(90deg, #0066ff90 0%, #0066ff90 100%)` : 'rgba(30, 30, 30, 0.6)' } }); // SVG icons for tabs const googleIcon = ( ); const trustpilotIcon = ( ); return (

setActiveTab('general')} onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = activeTab === 'general' ? '0 6px 16px rgba(0,0,0,0.3)' : '0 4px 12px rgba(0,0,0,0.15)'; e.currentTarget.style.border = activeTab === 'general' ? '1px solid #0066ff60' : '1px solid rgba(255,255,255,0.1)'; e.currentTarget.style.background = activeTab === 'general' ? 'linear-gradient(90deg, #0066ff90 0%, #0066ff90 100%)' : 'rgba(30, 30, 30, 0.6)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = activeTab === 'general' ? '0 4px 12px rgba(0,0,0,0.2)' : 'none'; e.currentTarget.style.border = activeTab === 'general' ? '1px solid #0066ff40' : '1px solid transparent'; e.currentTarget.style.background = activeTab === 'general' ? 'linear-gradient(90deg, #0066ff80 0%, #0066ff80 100%)' : 'rgba(18, 18, 18, 0.5)'; }} >

{googleIcon} Google

setActiveTab('trustpilot')} onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = activeTab === 'trustpilot' ? '0 6px 16px rgba(0,0,0,0.3)' : '0 4px 12px rgba(0,0,0,0.15)'; e.currentTarget.style.border = activeTab === 'trustpilot' ? '1px solid #36806B60' : '1px solid rgba(255,255,255,0.1)'; e.currentTarget.style.background = activeTab === 'trustpilot' ? 'linear-gradient(90deg, #36806B90 0%, #36806B90 100%)' : 'rgba(30, 30, 30, 0.6)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = activeTab === 'trustpilot' ? '0 4px 12px rgba(0,0,0,0.2)' : 'none'; e.currentTarget.style.border = activeTab === 'trustpilot' ? '1px solid #36806B40' : '1px solid transparent'; e.currentTarget.style.background = activeTab === 'trustpilot' ? 'linear-gradient(90deg, #36806B80 0%, #36806B80 100%)' : 'rgba(18, 18, 18, 0.5)'; }} >

{trustpilotIcon} Trust Pilot

); }; export default TabNavigation;