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

export const ContactPageView = styled('section')({
	display: 'grid',
	gap: 22
});

export const ContactBreadcrumb = styled('nav')({
	display: 'flex',
	alignItems: 'center',
	gap: 8,
	minHeight: 38,
	paddingBottom: 12,
	borderBottom: '1px solid rgba(20, 33, 31, 0.1)',
	color: 'var(--store-muted)',
	fontSize: 13,
	fontWeight: 850,
	'& svg': {
		fontSize: 16
	},
	'& button': {
		display: 'inline-flex',
		alignItems: 'center',
		gap: 6,
		padding: 0,
		border: 0,
		background: 'transparent',
		color: 'var(--store-muted)',
		font: 'inherit',
		cursor: 'pointer'
	},
	'& button:hover': {
		color: 'var(--store-primary)'
	},
	'& strong': {
		color: 'var(--store-danger)',
		fontWeight: 850
	}
});

export const ContactTitle = styled('h1')({
	margin: '26px 0 -6px',
	color: 'var(--store-text)',
	fontSize: 24,
	fontWeight: 850,
	letterSpacing: 0
});

export const ContactMapFrame = styled('section')({
	position: 'relative',
	minHeight: 386,
	overflow: 'hidden',
	border: '1px solid rgba(20, 33, 31, 0.1)',
	background: 'color-mix(in srgb, var(--store-background) 70%, #ffffff)',
	'& iframe': {
		width: '100%',
		height: 386,
		display: 'block',
		border: 0
	},
	'@media (max-width: 720px)': {
		minHeight: 310,
		'& iframe': {
			height: 310
		}
	}
});

export const ContactMapCard = styled('div')({
	position: 'absolute',
	top: 18,
	left: 20,
	zIndex: 2,
	display: 'grid',
	gridTemplateColumns: '1fr auto auto',
	alignItems: 'center',
	gap: 12,
	width: 'min(340px, calc(100% - 40px))',
	padding: '18px 20px',
	background: '#fff',
	border: '1px solid rgba(20, 33, 31, 0.08)',
	boxShadow: '0 18px 44px rgba(15, 23, 42, 0.16)',
	'& strong': {
		display: 'block',
		color: 'var(--store-text)',
		fontSize: 15,
		fontWeight: 900
	},
	'& span': {
		display: 'block',
		marginTop: 4,
		color: 'var(--store-muted)',
		fontSize: 13,
		lineHeight: 1.4
	},
	'& a': {
		width: 38,
		height: 38,
		display: 'grid',
		placeItems: 'center',
		borderRadius: 999,
		background: 'color-mix(in srgb, var(--store-primary) 8%, #ffffff)',
		color: 'var(--store-primary)',
		textDecoration: 'none',
		transition: 'background 160ms ease, color 160ms ease, transform 160ms ease'
	},
	'& a:hover': {
		transform: 'translateY(-2px)',
		background: 'var(--store-primary)',
		color: '#fff'
	},
	'@media (max-width: 560px)': {
		position: 'static',
		width: '100%',
		gridTemplateColumns: '1fr auto auto',
		boxShadow: 'none',
		borderInline: 0,
		borderTop: 0
	}
});

export const ContactBody = styled('section')(({ theme }) => ({
	display: 'grid',
	gridTemplateColumns: 'minmax(280px, 0.72fr) minmax(0, 1.28fr)',
	gap: 42,
	alignItems: 'start',
	[theme.breakpoints.down('md')]: {
		gridTemplateColumns: '1fr',
		gap: 28
	}
}));

export const ContactStoreInfo = styled('aside')({
	display: 'grid',
	gap: 18,
	'& h2': {
		margin: 0,
		color: 'var(--store-text)',
		fontSize: 20,
		fontWeight: 850,
		letterSpacing: 0
	}
});

export const ContactInfoLine = styled('a')({
	display: 'grid',
	gridTemplateColumns: '24px minmax(0, 1fr)',
	alignItems: 'start',
	gap: 12,
	color: 'var(--store-muted)',
	fontSize: 14,
	lineHeight: 1.45,
	textDecoration: 'none',
	'& svg': {
		marginTop: 1,
		color: 'var(--store-muted)',
		fontSize: 21
	},
	'&:hover': {
		color: 'var(--store-primary)'
	}
});

export const ContactCopy = styled('p')({
	margin: 0,
	color: 'var(--store-muted)',
	fontSize: 14,
	lineHeight: 1.85
});

export const ContactFormPanel = styled('form')({
	display: 'grid',
	gap: 16,
	'& h2': {
		margin: 0,
		color: 'var(--store-text)',
		fontSize: 22,
		fontWeight: 850,
		letterSpacing: 0,
		textAlign: 'left'
	}
});

export const ContactFormGrid = styled('div')({
	display: 'grid',
	gridTemplateColumns: '140px minmax(0, 1fr)',
	gap: '16px 18px',
	alignItems: 'start',
	'& label': {
		paddingTop: 10,
		color: 'var(--store-muted)',
		fontSize: 13,
		fontWeight: 850,
		textAlign: 'right'
	},
	'& input, & textarea': {
		width: '100%',
		minHeight: 38,
		padding: '8px 10px',
		border: '1px solid rgba(20, 33, 31, 0.18)',
		borderRadius: 0,
		background: '#fff',
		color: 'var(--store-text)',
		fontSize: 14,
		outline: 0,
		transition: 'border-color 160ms ease, box-shadow 160ms ease'
	},
	'& textarea': {
		minHeight: 202,
		resize: 'vertical'
	},
	'& input:focus, & textarea:focus': {
		borderColor: 'var(--store-primary)',
		boxShadow: '0 0 0 3px color-mix(in srgb, var(--store-primary) 12%, transparent)'
	},
	'@media (max-width: 640px)': {
		gridTemplateColumns: '1fr',
		gap: 8,
		'& label': {
			paddingTop: 0,
			textAlign: 'left'
		}
	}
});

export const ContactRequired = styled('span')({
	color: 'var(--store-danger)',
	fontWeight: 950
});

export const ContactSubmit = styled('button')({
	justifySelf: 'end',
	minHeight: 42,
	padding: '0 20px',
	border: 0,
	background: 'var(--store-text)',
	color: '#fff',
	fontSize: 14,
	fontWeight: 850,
	cursor: 'pointer',
	transition: 'background 160ms ease, transform 160ms ease',
	'&:hover': {
		transform: 'translateY(-1px)',
		background: 'var(--store-primary)'
	}
});