'use client';

import Link from 'next/link';

const styles = {
  brandSection: {
    marginTop: '2rem',
    textAlign: 'center' as const,
    color: '#2e4057',
    position: 'relative' as const
  },
  brandSectionBar: {
    content: '',
    position: 'absolute' as const,
    top: '-15px',
    left: '50%',
    transform: 'translateX(-50%)',
    width: '50px',
    height: '3px',
    backgroundColor: '#edae49',
    borderRadius: '3px'
  },
  brandList: {
    marginTop: '0.8rem',
    display: 'flex',
    justifyContent: 'center',
    flexWrap: 'wrap' as const,
    gap: '1.2rem'
  },
  brandLink: {
    color: '#083d77',
    textDecoration: 'none',
    fontWeight: '500',
    padding: '0.5rem 1rem',
    borderRadius: '20px',
    transition: 'all 0.2s ease',
    backgroundColor: 'white',
    border: '1px solid rgba(8, 61, 119, 0.1)'
  }
};

export default function BrandList() {
  return (
    <div style={styles.brandSection}>
      <div style={styles.brandSectionBar}></div>
      <p>Popular brands</p>
      <div style={styles.brandList}>
        <Link 
          href="/results?brand=1" 
          style={styles.brandLink}
          onMouseOver={(e) => {
            e.currentTarget.style.backgroundColor = '#edae49';
            e.currentTarget.style.color = '#2e4057';
          }}
          onMouseOut={(e) => {
            e.currentTarget.style.backgroundColor = 'white';
            e.currentTarget.style.color = '#083d77';
          }}
        >Tesla</Link>
        <Link 
          href="/results?brand=2" 
          style={styles.brandLink}
          onMouseOver={(e) => {
            e.currentTarget.style.backgroundColor = '#edae49';
            e.currentTarget.style.color = '#2e4057';
          }}
          onMouseOut={(e) => {
            e.currentTarget.style.backgroundColor = 'white';
            e.currentTarget.style.color = '#083d77';
          }}
        >BMW</Link>
        <Link 
          href="/results?brand=3" 
          style={styles.brandLink}
          onMouseOver={(e) => {
            e.currentTarget.style.backgroundColor = '#edae49';
            e.currentTarget.style.color = '#2e4057';
          }}
          onMouseOut={(e) => {
            e.currentTarget.style.backgroundColor = 'white';
            e.currentTarget.style.color = '#083d77';
          }}
        >Toyota</Link>
        <Link 
          href="/results?brand=4" 
          style={styles.brandLink}
          onMouseOver={(e) => {
            e.currentTarget.style.backgroundColor = '#edae49';
            e.currentTarget.style.color = '#2e4057';
          }}
          onMouseOut={(e) => {
            e.currentTarget.style.backgroundColor = 'white';
            e.currentTarget.style.color = '#083d77';
          }}
        >Audi</Link>
        <Link 
          href="/results?brand=5" 
          style={styles.brandLink}
          onMouseOver={(e) => {
            e.currentTarget.style.backgroundColor = '#edae49';
            e.currentTarget.style.color = '#2e4057';
          }}
          onMouseOut={(e) => {
            e.currentTarget.style.backgroundColor = 'white';
            e.currentTarget.style.color = '#083d77';
          }}
        >Mercedes</Link>
      </div>
    </div>
  );
}