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

export const FloatingActionsRoot = styled('aside')({
	position: 'fixed',
	right: 'max(18px, env(safe-area-inset-right))',
	bottom: 'max(20px, env(safe-area-inset-bottom))',
	zIndex: 1180,
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'flex-end',
	gap: 10,
	pointerEvents: 'none',
	'@media (max-width: 600px)': {
		right: 'max(12px, env(safe-area-inset-right))',
		bottom: 'max(14px, env(safe-area-inset-bottom))'
	}
});

export const BackToTopButton = styled('button')({
	position: 'relative',
	width: 44,
	height: 44,
	display: 'inline-flex',
	alignItems: 'center',
	justifyContent: 'center',
	borderRadius: '50%',
	border: '1px solid color-mix(in srgb, var(--store-primary) 20%, rgba(255,255,255,0.72))',
	background: 'color-mix(in srgb, var(--store-surface) 94%, transparent)',
	color: 'var(--store-primary)',
	boxShadow: '0 14px 34px rgba(8, 24, 45, 0.16)',
	backdropFilter: 'blur(12px)',
	cursor: 'pointer',
	pointerEvents: 'auto',
	opacity: 0,
	visibility: 'hidden',
	transform: 'translateY(12px) scale(0.92)',
	transition:
		'opacity 180ms ease, visibility 180ms ease, transform 180ms ease, color 180ms ease, background 180ms ease',
	'&[data-visible="true"]': {
		opacity: 1,
		visibility: 'visible',
		transform: 'translateY(0) scale(1)'
	},
	'&:hover': {
		background: 'var(--store-primary)',
		color: '#fff',
		transform: 'translateY(-2px) scale(1.04)'
	},
	'&:focus-visible': {
		outline: '3px solid color-mix(in srgb, var(--store-accent) 42%, transparent)',
		outlineOffset: 2
	},
	'& svg': { fontSize: 25 }
});

export const WhatsAppAction = styled('a')({
	minHeight: 52,
	display: 'inline-flex',
	alignItems: 'center',
	gap: 10,
	padding: '6px 16px 6px 7px',
	borderRadius: 999,
	border: '1px solid rgba(255,255,255,0.34)',
	background: 'linear-gradient(135deg, #20c865, #0ea94f)',
	color: '#fff',
	boxShadow: '0 18px 42px rgba(14, 169, 79, 0.28)',
	textDecoration: 'none',
	pointerEvents: 'auto',
	transition: 'transform 180ms ease, box-shadow 180ms ease',
	'&:hover': {
		transform: 'translateY(-3px)',
		boxShadow: '0 24px 48px rgba(14, 169, 79, 0.38)'
	},
	'&:focus-visible': {
		outline: '3px solid color-mix(in srgb, #25d366 42%, transparent)',
		outlineOffset: 3
	},
	'@media (max-width: 600px)': {
		width: 52,
		padding: 6,
		justifyContent: 'center'
	}
});

export const WhatsAppIconShell = styled('span')({
	width: 38,
	height: 38,
	flex: '0 0 38px',
	display: 'inline-flex',
	alignItems: 'center',
	justifyContent: 'center',
	borderRadius: '50%',
	background: 'rgba(255,255,255,0.17)',
	boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.18)',
	'& svg': { fontSize: 24 }
});

export const WhatsAppCopy = styled('span')({
	display: 'flex',
	flexDirection: 'column',
	lineHeight: 1.12,
	'& small': {
		fontSize: 9,
		fontWeight: 800,
		opacity: 0.78,
		textTransform: 'uppercase',
		letterSpacing: '0.04em'
	},
	'& strong': {
		marginTop: 3,
		fontSize: 12,
		fontWeight: 900,
		letterSpacing: 0
	},
	'@media (max-width: 600px)': { display: 'none' }
});

export const FloatingActionHint = styled('span')({
	position: 'absolute',
	right: 54,
	top: '50%',
	padding: '7px 10px',
	borderRadius: 6,
	background: 'color-mix(in srgb, var(--store-text) 92%, #000)',
	color: '#fff',
	fontSize: 11,
	fontWeight: 800,
	whiteSpace: 'nowrap',
	opacity: 0,
	visibility: 'hidden',
	transform: 'translate(4px, -50%)',
	transition: 'opacity 160ms ease, visibility 160ms ease, transform 160ms ease',
	'button:hover &': {
		opacity: 1,
		visibility: 'visible',
		transform: 'translate(0, -50%)'
	},
	'@media (max-width: 600px)': { display: 'none' }
});

export const floatingActionsReducedMotion = {
	'@media (prefers-reduced-motion: reduce)': {
		'&, & *': {
			transitionDuration: '0.01ms !important',
			animationDuration: '0.01ms !important'
		}
	}
};