/* Add custom Js styles below */ 
import { createUseStyles } from 'react-jss';

const useStyles = createUseStyles({
  '@global': {
    body: {
      background: 'linear-gradient(180deg, #0f1315 0%, #071214 100%)',
      color: '#efe6d8',
      fontFamily: '"Montserrat", "Helvetica Neue", Arial, sans-serif',
      lineHeight: 1.55,
      margin: 0,
      padding: 0,
    },
    h1: {
      fontFamily: '"Playfair Display", "Georgia", serif',
      color: '#efe6d8',
    },
    h2: {
      fontFamily: '"Playfair Display", "Georgia", serif',
      color: '#efe6d8',
    },
    a: {
      textDecoration: 'none',
      color: '#9aa1a3',
      transition: 'all 0.2s ease',
      '&:hover': { color: '#efe6d8' },
    },
  },

  container: {
    maxWidth: 1200,
    margin: '0 auto',
    padding: '3rem 1.5rem',
  },

  header: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: '1rem 0',
    '@media (max-width: 920px)': {
      flexDirection: 'column',
      alignItems: 'flex-start',
      gap: '0.6rem',
    },
  },

  brand: {
    display: 'flex',
    gap: '0.9rem',
    alignItems: 'center',
  },

  logo: {
    width: 58,
    height: 58,
    borderRadius: 10,
    background: 'linear-gradient(135deg, #121617, rgba(255,255,255,0.02))',
    border: '1px solid rgba(255,255,255,0.05)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    boxShadow: '0 8px 30px rgba(2,8,10,0.65)',
  },

  title: {
    fontFamily: '"Playfair Display", serif',
    fontSize: '1.1rem',
    fontWeight: 700,
    color: '#efe6d8',
  },

  nav: {
    display: 'flex',
    gap: '1rem',
    alignItems: 'center',
  },

  hero: {
    display: 'grid',
    gridTemplateColumns: '1fr 420px',
    gap: '2rem',
    alignItems: 'center',
    margin: '2.5rem 0',
    '@media (max-width: 920px)': {
      gridTemplateColumns: '1fr',
    },
  },

  heroCard: {
    background: 'linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01))',
    borderRadius: 14,
    padding: '2.2rem',
    boxShadow: '0 8px 30px rgba(2,8,10,0.65)',
    border: '1px solid rgba(255,255,255,0.04)',
  },

  btn: {
    display: 'inline-block',
    padding: '0.85rem 1.3rem',
    borderRadius: 12,
    fontWeight: 700,
    border: 0,
    cursor: 'pointer',
    transition: 'transform 150ms ease, box-shadow 150ms ease',
  },

  btnPrimary: {
    background: 'linear-gradient(90deg, #caa453, #d4b86a)',
    color: '#08110f',
    boxShadow: '0 6px 20px rgba(202,164,83,0.15)',
    '&:hover': { transform: 'translateY(-3px)' },
  },

  btnOutline: {
    background: 'transparent',
    border: '1px solid rgba(255,255,255,0.06)',
    color: '#efe6d8',
  },

  product: {
    display: 'flex',
    gap: '1rem',
    alignItems: 'center',
    padding: '1rem',
    borderRadius: 12,
    background: 'linear-gradient(180deg, rgba(255,255,255,0.01), transparent)',
    border: '1px solid rgba(255,255,255,0.03)',
  },

  productImage: {
    width: 96,
    height: 64,
    objectFit: 'cover',
    borderRadius: 8,
  },

  price: {
    fontWeight: 800,
    color: '#caa453',
  },

  footer: {
    marginTop: '3rem',
    padding: '2rem',
    borderTop: '1px solid rgba(255,255,255,0.03)',
    color: '#9aa1a3',
  },
});

export default useStyles;