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

// El footer toma un tinte de la marca (color Secundario) mezclado a un tono muy
// oscuro: así cada paleta lo tiñe visiblemente pero se mantiene oscuro y con el
// texto blanco legible. La proporción de Secundario es baja a propósito para no
// aclararlo aunque el Secundario sea un color brillante.
const footerSurface = 'color-mix(in srgb, var(--store-secondary) 22%, #0a1018)';
const footerSurfaceStrong = 'color-mix(in srgb, var(--store-secondary) 15%, #05080e)';
const mutedText = 'rgba(255,255,255,0.64)';

export const StoreFooter = styled('footer')({
	position: 'relative',
	zIndex: 4,
	marginTop: 72,
	background: `linear-gradient(160deg, ${footerSurface} 0%, ${footerSurfaceStrong} 100%)`,
	color: '#fff',
	// Deja espacio abajo en móvil para que el botón flotante de WhatsApp no tape
	// los medios de pago / copyright de la barra inferior.
	'@media (max-width: 640px)': {
		paddingBottom: 84
	},
	'&::before': {
		content: '""',
		position: 'absolute',
		top: 0,
		left: 0,
		right: 0,
		height: 4,
		background: 'linear-gradient(90deg, var(--store-primary), var(--store-accent), var(--store-secondary))'
	}
});

export const FooterLead = styled('div')(({ theme }) => ({
	width: 'min(1440px, 100%)',
	margin: '0 auto',
	padding: '56px clamp(18px, 4vw, 56px) 42px',
	display: 'grid',
	gridTemplateColumns: 'minmax(280px, 1.15fr) minmax(480px, 1.55fr) auto',
	alignItems: 'center',
	gap: '34px clamp(24px, 3.4vw, 54px)',
	borderBottom: '1px solid rgba(255,255,255,0.11)',
	[theme.breakpoints.down('lg')]: {
		gridTemplateColumns: 'minmax(260px, 1fr) minmax(420px, 1.5fr)'
	},
	[theme.breakpoints.down('md')]: {
		gridTemplateColumns: '1fr',
		alignItems: 'stretch'
	},
	[theme.breakpoints.down('sm')]: {
		paddingTop: 42,
		gap: 28
	}
}));

export const FooterLeadBrand = styled('div')({
	minWidth: 0,
	display: 'flex',
	alignItems: 'center',
	gap: 18,
	'& > span': {
		flex: '0 0 60px',
		width: '60px !important',
		height: '60px !important',
		borderRadius: '8px !important',
		boxShadow: '0 14px 32px color-mix(in srgb, var(--store-primary) 30%, transparent)'
	}
});

export const FooterLeadCopy = styled('div')({
	flex: '1 1 auto',
	minWidth: 0,
	width: '100%',
	'& small': {
		display: 'block',
		marginBottom: 7,
		color: 'var(--store-accent)',
		fontSize: 11,
		fontWeight: 900,
		letterSpacing: '0.08em',
		textTransform: 'uppercase'
	},
	'& h2': {
		margin: 0,
		fontSize: 28,
		fontWeight: 900,
		lineHeight: 1.12,
		letterSpacing: 0,
		overflowWrap: 'break-word'
	},
	'& p': {
		margin: '9px 0 0',
		maxWidth: 480,
		color: mutedText,
		fontSize: 13,
		lineHeight: 1.6
	}
});

export const FooterTrustGrid = styled('div')(({ theme }) => ({
	display: 'grid',
	gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
	[theme.breakpoints.down('sm')]: {
		gridTemplateColumns: '1fr',
		gap: 18
	}
}));

export const FooterTrustItem = styled('div')(({ theme }) => ({
	minWidth: 0,
	display: 'grid',
	gridTemplateColumns: '42px minmax(0, 1fr)',
	alignItems: 'center',
	gap: 12,
	padding: '7px 20px',
	borderLeft: '1px solid rgba(255,255,255,0.12)',
	'&:first-of-type': {
		borderLeft: 0,
		paddingLeft: 0
	},
	'& > span': {
		display: 'inline-flex',
		alignItems: 'center',
		justifyContent: 'center',
		width: 42,
		height: 42,
		borderRadius: '50%',
		background: 'color-mix(in srgb, var(--store-primary) 22%, rgba(255,255,255,0.05))',
		border: '1px solid color-mix(in srgb, var(--store-accent) 34%, transparent)',
		color: 'var(--store-accent)'
	},
	'& svg': { fontSize: 21 },
	'& strong': {
		display: 'block',
		fontSize: 13,
		lineHeight: 1.3
	},
	'& small': {
		display: 'block',
		marginTop: 3,
		color: 'rgba(255,255,255,0.48)',
		fontSize: 11,
		lineHeight: 1.35,
		overflowWrap: 'anywhere'
	},
	[theme.breakpoints.down('sm')]: {
		padding: 0,
		borderLeft: 0
	}
}));

export const FooterLeadActions = styled('div')(({ theme }) => ({
	display: 'flex',
	flexDirection: 'column',
	gap: 10,
	minWidth: 148,
	[theme.breakpoints.between('md', 'lg')]: {
		gridColumn: '1 / -1',
		flexDirection: 'row'
	},
	[theme.breakpoints.down('md')]: {
		flexDirection: 'row'
	},
	[theme.breakpoints.down('sm')]: {
		flexDirection: 'column'
	}
}));

const actionStyles = {
	minHeight: 44,
	padding: '0 18px',
	display: 'inline-flex',
	alignItems: 'center',
	justifyContent: 'center',
	gap: 8,
	borderRadius: 8,
	fontSize: 12,
	fontWeight: 900,
	textDecoration: 'none',
	whiteSpace: 'nowrap',
	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) 55%, transparent)',
		outlineOffset: 3
	}
};

export const FooterPrimaryAction = styled('a')({
	...actionStyles,
	background: '#25d366',
	color: '#072d16',
	boxShadow: '0 12px 28px rgba(37,211,102,0.2)',
	'&:hover': {
		...actionStyles['&:hover'],
		background: '#35e477',
		boxShadow: '0 16px 32px rgba(37,211,102,0.28)'
	}
});

export const FooterSecondaryAction = styled('a')({
	...actionStyles,
	background: 'rgba(255,255,255,0.07)',
	border: '1px solid rgba(255,255,255,0.18)',
	color: '#fff',
	'&:hover': {
		...actionStyles['&:hover'],
		background: 'rgba(255,255,255,0.13)',
		boxShadow: '0 12px 28px rgba(0,0,0,0.18)'
	}
});

export const FooterInner = styled('div')(({ theme }) => ({
	width: 'min(1440px, 100%)',
	margin: '0 auto',
	padding: '42px clamp(18px, 4vw, 56px)',
	display: 'grid',
	gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
	gap: '34px clamp(28px, 4vw, 62px)',
	alignItems: 'start',
	'& > [data-contact="true"]': {
		paddingLeft: 24,
		borderLeft: '2px solid color-mix(in srgb, var(--store-accent) 62%, transparent)'
	},
	[theme.breakpoints.down('sm')]: {
		gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
		gap: '32px 24px',
		'& > [data-contact="true"]': {
			gridColumn: '1 / -1',
			paddingLeft: 0,
			borderLeft: 0
		}
	}
}));

export const FooterSection = styled('div')({
	minWidth: 0,
	display: 'flex',
	flexDirection: 'column',
	gap: 16
});

export const FooterColumnTitle = styled('strong')({
	position: 'relative',
	display: 'block',
	paddingBottom: 13,
	color: '#fff',
	fontSize: 12,
	fontWeight: 900,
	letterSpacing: '0.07em',
	textTransform: 'uppercase',
	'&::after': {
		content: '""',
		position: 'absolute',
		bottom: 0,
		left: 0,
		width: 32,
		height: 2,
		background: 'var(--store-accent)'
	}
});

export const FooterLinks = styled('nav')({
	display: 'flex',
	flexDirection: 'column',
	gap: 4
});

export const FooterLinkItem = styled('a')({
	position: 'relative',
	display: 'inline-flex',
	alignItems: 'center',
	width: 'max-content',
	maxWidth: '100%',
	minHeight: 32,
	padding: 0,
	border: 0,
	background: 'transparent',
	color: mutedText,
	fontFamily: 'inherit',
	fontSize: 13,
	textAlign: 'left',
	textDecoration: 'none',
	cursor: 'pointer',
	transition: 'color 180ms ease, transform 180ms ease',
	'&::before': {
		content: '"›"',
		width: 0,
		overflow: 'hidden',
		color: 'var(--store-accent)',
		fontSize: 18,
		transition: 'width 180ms ease'
	},
	'&:hover': {
		color: '#fff',
		transform: 'translateX(3px)'
	},
	'&:hover::before': { width: 14 },
	'&:focus-visible': {
		outline: '2px solid var(--store-accent)',
		outlineOffset: 3,
		borderRadius: 3
	}
});

export const FooterContactList = styled('div')({
	display: 'flex',
	flexDirection: 'column',
	gap: 6
});

export const FooterContactItem = styled('a')({
	minWidth: 0,
	minHeight: 32,
	display: 'flex',
	alignItems: 'center',
	gap: 9,
	color: mutedText,
	fontSize: 13,
	lineHeight: 1.4,
	textDecoration: 'none',
	transition: 'color 180ms ease, transform 180ms ease',
	'& svg': { color: 'var(--store-accent)' },
	'& span': { overflowWrap: 'anywhere' },
	'&:hover': {
		color: '#fff',
		transform: 'translateX(2px)'
	},
	'&[data-whatsapp="true"] svg': { color: '#25d366' }
});

export const FooterTopStrip = styled('div')({
	width: '100%',
	borderTop: '1px solid rgba(255,255,255,0.08)',
	background: 'rgba(255,255,255,0.035)'
});

export const FooterTopStripInner = styled('div')(({ theme }) => ({
	width: 'min(1440px, 100%)',
	margin: '0 auto',
	padding: '18px clamp(18px, 4vw, 56px)',
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'space-between',
	gap: 18,
	[theme.breakpoints.down('sm')]: {
		flexDirection: 'column',
		alignItems: 'flex-start'
	}
}));

export const FooterTopSocialGroup = styled('div')({
	display: 'flex',
	alignItems: 'center',
	gap: 9,
	flexWrap: 'wrap'
});

export const FooterTopSocialLabel = styled('span')({
	marginRight: 4,
	color: 'rgba(255,255,255,0.42)',
	fontSize: 10,
	fontWeight: 900,
	letterSpacing: '0.08em',
	textTransform: 'uppercase'
});

export const FooterSocialBtn = styled('a')({
	display: 'inline-flex',
	alignItems: 'center',
	justifyContent: 'center',
	width: 40,
	height: 40,
	borderRadius: '50%',
	border: '1px solid rgba(255,255,255,0.15)',
	background: 'rgba(255,255,255,0.07)',
	color: 'rgba(255,255,255,0.82)',
	textDecoration: 'none',
	transition: 'transform 180ms ease, background 180ms ease, border-color 180ms ease',
	'&:hover': { transform: 'translateY(-3px)', color: '#fff' },
	'&[data-network="instagram"]:hover': {
		background: '#d62976',
		borderColor: '#d62976'
	},
	'&[data-network="facebook"]:hover': {
		background: '#1877f2',
		borderColor: '#1877f2'
	},
	'&[data-network="whatsapp"]:hover': {
		background: '#25d366',
		borderColor: '#25d366'
	},
	'&[data-network="tiktok"]:hover': {
		background: '#010101',
		borderColor: '#ff0050'
	},
	'&[data-network="linkedin"]:hover': {
		background: '#0a66c2',
		borderColor: '#0a66c2'
	},
	'&:focus-visible': {
		outline: '2px solid var(--store-accent)',
		outlineOffset: 3
	}
});

export const FooterTopPaymentGroup = styled('div')({
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'flex-end',
	gap: 8,
	flexWrap: 'wrap'
});

export const FooterTopPaymentLabel = styled('span')({
	marginRight: 4,
	color: 'rgba(255,255,255,0.42)',
	fontSize: 10,
	fontWeight: 900,
	letterSpacing: '0.08em',
	textTransform: 'uppercase'
});

export const PaymentPill = styled('span')({
	minHeight: 28,
	padding: '0 10px',
	display: 'inline-flex',
	alignItems: 'center',
	borderRadius: 6,
	background: 'rgba(255,255,255,0.08)',
	border: '1px solid rgba(255,255,255,0.15)',
	color: 'rgba(255,255,255,0.76)',
	fontSize: 10.5,
	fontWeight: 800
});

export const FooterBottom = styled('div')({
	background: 'rgba(0,0,0,0.28)',
	borderTop: '1px solid rgba(255,255,255,0.07)'
});

export const FooterBottomInner = styled('div')(({ theme }) => ({
	width: 'min(1440px, 100%)',
	margin: '0 auto',
	padding: '13px clamp(18px, 4vw, 56px)',
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'space-between',
	gap: 14,
	[theme.breakpoints.down('sm')]: {
		alignItems: 'flex-start'
	}
}));

export const FooterBottomLeft = styled('div')({
	minWidth: 0,
	display: 'flex',
	alignItems: 'center'
});

export const FooterBottomRight = styled('div')({
	display: 'flex',
	alignItems: 'center',
	gap: 14,
	'& span': {
		color: 'rgba(255,255,255,0.34)',
		fontSize: 10.5
	},
	'@media (max-width: 480px)': {
		'& span': { display: 'none' }
	}
});

export const FooterBottomCopy = styled('span')({
	color: 'rgba(255,255,255,0.55)',
	fontSize: 11,
	fontWeight: 600,
	lineHeight: 1.45
});

export const FooterBackToTop = styled('button')({
	width: 38,
	height: 38,
	flex: '0 0 38px',
	display: 'inline-flex',
	alignItems: 'center',
	justifyContent: 'center',
	borderRadius: '50%',
	border: '1px solid rgba(255,255,255,0.17)',
	background: 'rgba(255,255,255,0.08)',
	color: '#fff',
	cursor: 'pointer',
	transition: 'transform 180ms ease, background 180ms ease',
	'& svg': { fontSize: 19 },
	'&:hover': {
		transform: 'translateY(-3px)',
		background: 'var(--store-primary)'
	},
	'&:focus-visible': {
		outline: '2px solid var(--store-accent)',
		outlineOffset: 3
	}
});

// Aliases retained for imports from previous storefront iterations.
export const FooterAccentBar = styled('div')({});
export const FooterBrand = styled('div')({});
export const FooterBrandTop = styled('div')({});
export const FooterBrandName = styled('strong')({});
export const FooterBrandDesc = styled('span')({});
export const FooterSocialRow = styled('div')({});
export const FooterTrust = styled('div')({});
export const PaymentRow = styled('div')({});