import { styled } from '@mui/material/styles';

export const PromoPanel = styled('div')({
	display: 'grid',
	gap: 6,
	padding: 14,
	borderRadius: 14,
	background: 'color-mix(in srgb, var(--store-secondary) 10%, #fff)',
	border: '1px solid color-mix(in srgb, var(--store-secondary) 18%, transparent)',
	'& span': {
		color: 'var(--store-muted)',
		fontSize: 13
	}
});

export const NewsHeader = styled('div')({
	display: 'grid',
	gridTemplateColumns: '42px minmax(0, 1fr)',
	gap: 10,
	alignItems: 'center',
	'& > span': {
		width: 42,
		height: 42,
		display: 'grid',
		placeItems: 'center',
		borderRadius: 999,
		background:
			'linear-gradient(135deg, var(--store-accent), color-mix(in srgb, var(--store-accent) 68%, var(--store-primary)))',
		color: '#fff',
		boxShadow: '0 14px 26px color-mix(in srgb, var(--store-accent) 28%, transparent)'
	},
	'& strong': {
		display: 'block',
		fontSize: 16,
		fontWeight: 950,
		color: 'var(--store-text)'
	},
	'& small': {
		display: 'block',
		marginTop: 2,
		color: 'var(--store-muted)',
		fontSize: 12,
		lineHeight: 1.25
	}
});

export const NewsList = styled('div')({
	display: 'grid',
	gap: 12
});

export const NewsCard = styled('button')({
	position: 'relative',
	display: 'grid',
	gridTemplateColumns: '74px minmax(0, 1fr)',
	gap: 12,
	width: '100%',
	padding: 10,
	border: '1px solid color-mix(in srgb, var(--store-primary) 12%, rgba(255, 255, 255, 0.78))',
	borderRadius: 16,
	background:
		'linear-gradient(135deg, rgba(255, 255, 255, 0.94), color-mix(in srgb, var(--store-background) 90%, #ffffff))',
	boxShadow: '0 12px 26px rgba(15, 23, 42, 0.06)',
	cursor: 'pointer',
	textAlign: 'left',
	overflow: 'hidden',
	transition: 'transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease',
	'&::before': {
		content: '""',
		position: 'absolute',
		inset: '0 auto 0 0',
		width: 4,
		background: 'var(--store-primary)',
		opacity: 0.74
	},
	'&[data-news="producto_nuevo"]::before': {
		background: 'var(--store-success)'
	},
	'&[data-news="campana"]::before': {
		background: 'var(--store-accent)'
	},
	'&[data-news="b2b"]::before': {
		background: 'var(--store-secondary)'
	},
	'& img': {
		width: 74,
		height: 92,
		objectFit: 'cover',
		borderRadius: 12,
		display: 'block',
		transition: 'transform 220ms ease'
	},
	'& > div': {
		minWidth: 0,
		display: 'grid',
		alignContent: 'start',
		gap: 5
	},
	'& strong': {
		color: 'var(--store-text)',
		fontSize: 14,
		lineHeight: 1.2,
		fontWeight: 950
	},
	'& span': {
		color: 'var(--store-muted)',
		fontSize: 12,
		lineHeight: 1.35
	},
	'&:hover': {
		transform: 'translateY(-3px)',
		borderColor: 'color-mix(in srgb, var(--store-accent) 34%, #ffffff)',
		boxShadow: '0 18px 34px rgba(15, 23, 42, 0.11)'
	},
	'&:hover img': {
		transform: 'scale(1.04)'
	},
	'&:focus-visible': {
		outline: '3px solid color-mix(in srgb, var(--store-accent) 34%, transparent)',
		outlineOffset: 3
	}
});

export const NewsTag = styled('span')({
	width: 'max-content',
	display: 'inline-flex',
	alignItems: 'center',
	gap: 4,
	minHeight: 24,
	padding: '0 8px',
	borderRadius: 999,
	background: 'color-mix(in srgb, var(--store-primary) 8%, #ffffff)',
	color: 'var(--store-primary) !important',
	fontSize: '11px !important',
	fontWeight: '900 !important'
});

export const NewsAction = styled('span')({
	display: 'inline-flex',
	alignItems: 'center',
	gap: 3,
	marginTop: 2,
	color: 'var(--store-primary) !important',
	fontSize: '12px !important',
	fontWeight: '950 !important'
});