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

export const PromotionDialog = styled(Dialog)({
	'& .MuiBackdrop-root': {
		background: 'rgba(7, 16, 29, 0.68)',
		backdropFilter: 'blur(8px)'
	},
	'& .MuiDialog-paper': {
		width: 'min(840px, calc(100% - 28px))',
		maxWidth: 840,
		margin: 14,
		borderRadius: 8,
		overflow: 'hidden',
		background: 'var(--store-surface)',
		border: '1px solid color-mix(in srgb, var(--store-primary) 18%, rgba(255,255,255,0.5))',
		boxShadow: '0 36px 100px rgba(3, 10, 20, 0.34)'
	}
});

export const PromotionLayout = styled('div')(({ theme }) => ({
	position: 'relative',
	minHeight: 460,
	display: 'grid',
	gridTemplateColumns: 'minmax(0, 1.12fr) minmax(320px, 0.88fr)',
	[theme.breakpoints.down('sm')]: {
		minHeight: 0,
		gridTemplateColumns: '1fr'
	}
}));

export const PromotionMedia = styled('div')(({ theme }) => ({
	position: 'relative',
	minHeight: 460,
	overflow: 'hidden',
	background: 'color-mix(in srgb, var(--store-primary) 12%, var(--store-background))',
	'&::after': {
		content: '""',
		position: 'absolute',
		inset: 0,
		background: 'linear-gradient(180deg, transparent 48%, rgba(4, 12, 24, 0.54))'
	},
	[theme.breakpoints.down('sm')]: {
		minHeight: 235,
		maxHeight: 260
	}
}));

export const PromotionImage = styled('img')({
	width: '100%',
	height: '100%',
	minHeight: 'inherit',
	display: 'block',
	objectFit: 'cover',
	transition: 'transform var(--store-motion-slow, 400ms) ease',
	'.MuiDialog-paper:hover &': { transform: 'scale(1.025)' }
});

export const PromotionMediaLabel = styled('span')({
	position: 'absolute',
	left: 22,
	bottom: 20,
	zIndex: 2,
	maxWidth: 'calc(100% - 44px)',
	color: '#fff',
	fontSize: 11,
	fontWeight: 900,
	letterSpacing: '0.08em',
	textTransform: 'uppercase',
	textShadow: '0 3px 16px rgba(0,0,0,0.34)'
});

export const PromotionBody = styled('div')(({ theme }) => ({
	minWidth: 0,
	display: 'flex',
	flexDirection: 'column',
	justifyContent: 'center',
	padding: '54px 42px 38px',
	color: 'var(--store-text)',
	[theme.breakpoints.down('sm')]: {
		padding: '34px 24px 26px'
	}
}));

export const PromotionClose = styled('button')({
	position: 'absolute',
	top: 14,
	right: 14,
	zIndex: 5,
	width: 40,
	height: 40,
	display: 'inline-flex',
	alignItems: 'center',
	justifyContent: 'center',
	borderRadius: '50%',
	border: '1px solid rgba(20,33,31,0.1)',
	background: 'rgba(255,255,255,0.9)',
	color: 'var(--store-text)',
	boxShadow: '0 10px 28px rgba(15,23,42,0.14)',
	cursor: 'pointer',
	transition: 'transform 180ms ease, background 180ms ease',
	'&:hover': { transform: 'rotate(5deg) scale(1.05)', background: '#fff' },
	'&:focus-visible': {
		outline: '3px solid color-mix(in srgb, var(--store-accent) 42%, transparent)',
		outlineOffset: 2
	},
	'& svg': { fontSize: 20 }
});

export const PromotionBadge = styled('span')({
	alignSelf: 'flex-start',
	display: 'inline-flex',
	alignItems: 'center',
	gap: 7,
	minHeight: 30,
	padding: '0 11px',
	borderRadius: 999,
	background: 'color-mix(in srgb, var(--store-accent) 14%, transparent)',
	color: 'color-mix(in srgb, var(--store-accent) 72%, var(--store-text))',
	fontSize: 10.5,
	fontWeight: 950,
	letterSpacing: '0.06em',
	textTransform: 'uppercase',
	'& svg': { fontSize: 16 }
});

export const PromotionTitle = styled('h2')({
	margin: '20px 0 0',
	fontSize: 34,
	fontWeight: 950,
	lineHeight: 1.06,
	letterSpacing: 0,
	overflowWrap: 'break-word',
	'@media (max-width: 600px)': { fontSize: 28 }
});

export const PromotionDescription = styled('p')({
	margin: '16px 0 0',
	color: 'var(--store-muted)',
	fontSize: 14,
	lineHeight: 1.65
});

export const PromotionActions = styled('div')(({ theme }) => ({
	marginTop: 30,
	display: 'flex',
	alignItems: 'center',
	gap: 10,
	[theme.breakpoints.down('sm')]: {
		alignItems: 'stretch',
		flexDirection: 'column'
	}
}));

const actionBase = {
	minHeight: 46,
	display: 'inline-flex',
	alignItems: 'center',
	justifyContent: 'center',
	gap: 8,
	padding: '0 18px',
	borderRadius: 999,
	fontFamily: 'inherit',
	fontSize: 12,
	fontWeight: 950,
	cursor: 'pointer',
	transition: 'transform 180ms ease, box-shadow 180ms ease, background 180ms ease',
	'& svg': { fontSize: 18 },
	'&:hover': { transform: 'translateY(-2px)' },
	'&:focus-visible': {
		outline: '3px solid color-mix(in srgb, var(--store-accent) 40%, transparent)',
		outlineOffset: 2
	}
};

export const PromotionPrimaryAction = styled('button')({
	...actionBase,
	border: 0,
	background:
		'linear-gradient(135deg, var(--store-primary), color-mix(in srgb, var(--store-primary) 66%, var(--store-secondary)))',
	color: '#fff',
	boxShadow: '0 14px 30px color-mix(in srgb, var(--store-primary) 30%, transparent)',
	'&:hover': {
		...actionBase['&:hover'],
		boxShadow: '0 20px 38px color-mix(in srgb, var(--store-primary) 40%, transparent)'
	}
});

export const PromotionSecondaryAction = styled('button')({
	...actionBase,
	border: '1px solid color-mix(in srgb, var(--store-primary) 18%, rgba(20,33,31,0.1))',
	background: 'transparent',
	color: 'var(--store-muted)',
	'&:hover': {
		...actionBase['&:hover'],
		background: 'color-mix(in srgb, var(--store-primary) 6%, transparent)',
		color: 'var(--store-primary)'
	}
});