import React from 'react';
import { Box, Typography, Button, Paper, Avatar } from '@mui/material';
import { LockOutlined as LockIcon } from '@mui/icons-material';

const ProFeatureGuard = ({ title, description, benefits = [], children }) => {
    return (
        <Box sx={{ position: 'relative', minHeight: 450 }}>
            {/* Blurred Background with reduced opacity */}
            <Box sx={{
                filter: 'blur(10px)',
                opacity: 0.3,
                pointerEvents: 'none',
                userSelect: 'none',
                transition: 'all 0.3s ease'
            }}>
                {children || (
                    <Box sx={{ p: 4 }}>
                        <Typography variant="h5" sx={{ mb: 2 }}>Premium Feature Interface</Typography>
                        <Box sx={{ height: 48, bgcolor: 'secondary.light', mb: 3, borderRadius: 2, opacity: 0.5 }} />
                        <Box sx={{ height: 48, bgcolor: 'secondary.light', mb: 3, borderRadius: 2, opacity: 0.5 }} />
                        <Box sx={{ height: 120, bgcolor: 'secondary.light', mb: 3, borderRadius: 4, opacity: 0.5 }} />
                    </Box>
                )}
            </Box>

            {/* Elite Modal Overlay */}
            <Box sx={{
                position: 'absolute',
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                zIndex: 10,
                p: 3
            }}>
                <Paper
                    elevation={0}
                    sx={{
                        p: 6,
                        maxWidth: 480,
                        textAlign: 'center',
                        borderRadius: '24px',
                        border: '1px solid rgba(226, 232, 240, 0.8)',
                        boxShadow: '0 30px 60px -12px rgba(0,0,0,0.12)',
                        background: '#ffffff',
                    }}
                >
                    <Avatar
                        sx={{
                            bgcolor: 'primary.light',
                            color: 'primary.main',
                            width: 64,
                            height: 64,
                            mx: 'auto',
                            mb: 3,
                            boxShadow: '0 8px 16px -4px rgba(79, 70, 229, 0.2)'
                        }}
                    >
                        <LockIcon sx={{ fontSize: 32 }} />
                    </Avatar>

                    <Typography variant="h5" sx={{ mb: 1.5, fontWeight: 800, color: 'text.primary' }}>
                        {title}
                    </Typography>
                    <Typography variant="body2" sx={{ mb: 4, px: 2, color: 'text.secondary', lineHeight: 1.6 }}>
                        {description}
                    </Typography>

                    {benefits.length > 0 && (
                        <Box sx={{ mb: 5, textAlign: 'left', px: 2 }}>
                            {benefits.map((benefit, i) => (
                                <Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 2, mb: 1.5 }}>
                                    <Box sx={{
                                        width: 6,
                                        height: 6,
                                        borderRadius: '50%',
                                        bgcolor: 'primary.main',
                                        mt: 1,
                                        flexShrink: 0,
                                        boxShadow: '0 0 8px rgba(79, 70, 229, 0.4)'
                                    }} />
                                    <Typography variant="body2" sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.8125rem' }}>
                                        {benefit}
                                    </Typography>
                                </Box>
                            ))}
                        </Box>
                    )}

                    <Button
                        variant="contained"
                        fullWidth
                        size="large"
                        href="https://woocommerce.com/products/conditional-store-restrictions/"
                        target="_blank"
                        sx={{
                            py: 1.75,
                            borderRadius: '12px',
                            fontWeight: 800,
                            letterSpacing: '0.02em',
                            boxShadow: '0 8px 20px -6px rgba(79, 70, 229, 0.4)',
                            '&:hover': {
                                boxShadow: '0 12px 24px -6px rgba(79, 70, 229, 0.5)',
                            }
                        }}
                    >
                        Explore Pro Features
                    </Button>

                    <Typography variant="caption" sx={{ display: 'block', mt: 3, color: 'text.secondary', fontWeight: 500, opacity: 0.7 }}>
                        Trusted by 5,000+ WooCommerce stores
                    </Typography>
                </Paper>
            </Box>
        </Box>
    );
};

export default ProFeatureGuard;
