import { useState, useEffect } from 'react'
import {
  Box,
  Container,
  Typography,
  Button,
  Grid,
  Card,
  CardContent,
  useTheme,
  alpha,
  Stack,
  Fade,
  Zoom,
  Paper,
  Divider,
  useMediaQuery,
  IconButton,
  Tooltip,
  SpeedDial,
  SpeedDialAction,
  SpeedDialIcon,
  Backdrop,
  Chip,
  Rating,
  LinearProgress,
  Avatar,
  Fab,
  Slide,
  useScrollTrigger,
  Grow
} from '@mui/material'
import {
  Timeline,
  ShowChart,
  Compare,
  Analytics,
  TrendingUp,
  Assessment,
  AccountBalance,
  Speed,
  CloudSync,
  Autorenew,
  LinkedIn,
  Email,
  KeyboardArrowDown,
  Help,
  PlayArrow,
  Info,
  Star,
  Lightbulb,
  BarChart,
  Insights,
  KeyboardArrowUp,
  NewReleases,
  Update
} from '@mui/icons-material'
import Tutorial from './Tutorial'

const features = [
  {
    title: 'Portfolio Analysis',
    description: 'Analyze your investment portfolio with comprehensive metrics and performance indicators.',
    icon: Analytics,
    color: '#2196f3',
    details: [
      {
        left: [
          'Performance metrics',
          'Risk assessment tools'
        ],
        right: [
          'Historical analysis',
          'Custom date ranges'
        ]
      }
    ]
  },
  {
    title: 'Real-time Data',
    description: 'Access real-time market data and historical performance for accurate analysis.',
    icon: ShowChart,
    color: '#4caf50',
    details: [
      {
        left: [
          'Live market data',
          'Historical prices'
        ],
        right: [
          'Automated updates',
          'Data validation'
        ]
      }
    ]
  },
  {
    title: 'Portfolio Comparison',
    description: 'Compare multiple portfolios and benchmark against market indices.',
    icon: Compare,
    color: '#ff9800',
    details: [
      {
        left: [
          'Side-by-side comparison',
          'Benchmark analysis'
        ],
        right: [
          'Performance attribution',
          'Custom benchmarks'
        ]
      }
    ]
  },
  {
    title: 'Risk Assessment',
    description: 'Evaluate portfolio risk metrics and correlation analysis.',
    icon: Speed,
    color: '#f44336',
    details: [
      {
        left: [
          'Risk metrics calculation',
          'Correlation analysis'
        ],
        right: [
          'Volatility assessment',
          'Drawdown analysis'
        ]
      }
    ]
  },
  {
    title: 'Performance Tracking',
    description: 'Track portfolio performance over time with detailed metrics and charts.',
    icon: TrendingUp,
    color: '#9c27b0',
    details: [
      {
        left: [
          'Performance monitoring',
          'Interactive charts'
        ],
        right: [
          'Custom reporting',
          'Export capabilities'
        ]
      }
    ]
  },
  {
    title: 'Cloud Sync',
    description: 'Save and load your portfolios securely across devices.',
    icon: CloudSync,
    color: '#00bcd4',
    details: [
      {
        left: [
          'Secure storage',
          'Cross-device sync'
        ],
        right: [
          'Backup & restore',
          'Version history'
        ]
      }
    ]
  }
]

const socialLinks = [
  { icon: Autorenew, label: 'Status', url: 'https://status.twinight.co' },
  { icon: LinkedIn, label: 'LinkedIn', url: 'https://linkedin.com' },
  { icon: Email, label: 'Email', url: 'mailto:philip@twinight.co' }
]

const statistics = [
  {
    value: '99%',
    label: 'Accuracy',
    icon: Timeline,
    color: '#2196f3'
  },
  {
    value: '24/7',
    label: 'Real-time Updates',
    icon: Insights,
    color: '#4caf50'
  },
  {
    value: '50+',
    label: 'Metrics',
    icon: BarChart,
    color: '#ff9800'
  }
]

// Update the testimonials data first
const testimonials = [
  {
    name: 'Sarah Chen',
    role: 'Senior Portfolio Manager',
    company: 'Capital Investments Ltd',
    avatar: null, // We'll use the first letter of the name
    rating: 5,
    comment: 'The real-time analytics and risk assessment tools have transformed how we manage client portfolios. The interface is intuitive and the insights are invaluable.',
    tags: ['Risk Analysis', 'Real-time Data']
  },
  {
    name: 'Michael Roberts',
    role: 'Investment Director',
    company: 'Quantum Fund Management',
    avatar: null,
    rating: 5,
    comment: 'Outstanding portfolio comparison features. Being able to analyze multiple strategies simultaneously has greatly improved our decision-making process.',
    tags: ['Portfolio Comparison', 'Strategy Analysis']
  },
  {
    name: 'Emma Thompson',
    role: 'Quantitative Analyst',
    company: 'Global Asset Management',
    avatar: null,
    rating: 5,
    comment: 'The correlation analysis and risk metrics are exactly what we needed. The platform has become an essential part of our daily workflow.',
    tags: ['Correlation Analysis', 'Risk Metrics']
  }
]

// Add What's New section data
const whatsNew = [
  {
    title: 'Real-time Analytics',
    description: 'Get instant insights with our new real-time analytics engine',
    icon: Update,
    color: '#00bcd4',
    tag: 'New'
  },
  {
    title: 'Enhanced Reporting',
    description: 'Export detailed reports with advanced visualization options',
    icon: Assessment,
    color: '#4caf50',
    tag: 'Updated'
  },
  {
    title: 'Smart Alerts',
    description: 'Set up custom alerts for portfolio performance thresholds',
    icon: NewReleases,
    color: '#ff9800',
    tag: 'Coming Soon'
  }
]

// Scroll to top component
function ScrollToTop() {
  const trigger = useScrollTrigger({
    disableHysteresis: true,
    threshold: 100
  })

  const handleClick = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }

  return (
    <Zoom in={trigger}>
      <Box
        role="presentation"
        sx={{
          position: 'fixed',
          bottom: 32,
          right: 32,
          zIndex: 1
        }}
      >
        <Fab
          color="primary"
          size="medium"
          aria-label="scroll back to top"
          onClick={handleClick}
          sx={{
            boxShadow: theme => `0 8px 16px ${alpha(theme.palette.primary.main, 0.25)}`
          }}
        >
          <KeyboardArrowUp />
        </Fab>
      </Box>
    </Zoom>
  )
}

function LandingPage({ onGetStarted, isDarkMode, onToggleTheme }) {
  const theme = useTheme()
  const [showTutorial, setShowTutorial] = useState(false)
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
  const [openSpeedDial, setOpenSpeedDial] = useState(false)
  const [showProgress, setShowProgress] = useState(false)

  // Add section visibility tracking
  const [visibleSections, setVisibleSections] = useState({
    features: false,
    whatsNew: false,
    testimonials: false
  })

  // Intersection Observer setup
  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            setVisibleSections(prev => ({
              ...prev,
              [entry.target.id]: true
            }))
          }
        })
      },
      { threshold: 0.1 }
    )

    const sections = ['features', 'whatsNew', 'testimonials']
    sections.forEach(section => {
      const element = document.getElementById(section)
      if (element) observer.observe(element)
    })

    return () => observer.disconnect()
  }, [])

  const handleStartWithTutorial = () => {
    setShowTutorial(true)
  }

  const handleTutorialClose = (completed) => {
    setShowTutorial(false)
    if (completed) {
      onGetStarted()
    }
  }

  const handleSkipTutorial = () => {
    onGetStarted()
  }

  const scrollToFeatures = () => {
    document.getElementById('features').scrollIntoView({ behavior: 'smooth' })
  }

  const handleSpeedDialAction = (action) => {
    setOpenSpeedDial(false)
    switch (action) {
      case 'tutorial':
        handleStartWithTutorial()
        break
      case 'start':
        setShowProgress(true)
        setTimeout(() => {
          setShowProgress(false)
          handleSkipTutorial()
        }, 1500)
        break
      default:
        break
    }
  }

  return (
    <Box 
      sx={{ 
        minHeight: '100vh',
        bgcolor: 'background.default',
        overflow: 'hidden',
        position: 'relative',
        display: 'flex',
        flexDirection: 'column',
        '&::before': {
          content: '""',
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          background: theme.palette.mode === 'light'
            ? `linear-gradient(45deg, ${alpha(theme.palette.primary.light, 0.03)}, ${alpha(theme.palette.primary.main, 0.03)})`
            : `linear-gradient(45deg, ${alpha(theme.palette.primary.dark, 0.03)}, ${alpha(theme.palette.primary.main, 0.03)})`,
          zIndex: 0,
          pointerEvents: 'none'
        }
      }}
    >
      {/* Content container */}
      <Box
        sx={{
          flex: 1,
          display: 'flex',
          flexDirection: 'column',
          position: 'relative',
          zIndex: 1,
          bgcolor: 'background.default',
          '& > *': {
            marginBottom: 0
          }
        }}
      >
        {/* Hero Section */}
        <Box
          sx={{
            flex: 1,
            display: 'flex',
            alignItems: 'center',
            pt: { xs: 2, md: 4 },
            pb: { xs: 4, md: 6 },
            bgcolor: 'background.default'
          }}
        >
          <Container 
            maxWidth="lg"
            sx={{
              px: { xs: 2, sm: 4, md: 8 }
            }}
          >
            <Grid container spacing={{ xs: 4, md: 6 }} alignItems="center">
              <Grid item xs={12} md={6}>
                <Fade in timeout={1000}>
                  <Box>
                    {/* Updated hero logo/icon design */}
                    <Box
                      sx={{
                        display: 'inline-flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        width: { xs: 80, md: 96 },
                        height: { xs: 80, md: 96 },
                        borderRadius: 3,
                        bgcolor: 'transparent',
                        mb: 3,
                        ml: { xs: 2, md: 4 },
                        position: 'relative',
                        '&::before': {
                          content: '""',
                          position: 'absolute',
                          inset: 0,
                          background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.12)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`,
                          borderRadius: 'inherit',
                        }
                      }}
                    >
                      <Box 
                        sx={{ 
                          position: 'relative',
                          width: '100%',
                          height: '100%',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center'
                        }}
                      >
                        <Analytics 
                          sx={{ 
                            fontSize: { xs: 48, md: 56 },
                            color: theme.palette.primary.main,
                            transform: 'rotate(-10deg)',
                            position: 'absolute',
                            left: '10%',
                            top: '50%',
                            marginTop: '-24px'
                          }} 
                        />
                        <Assessment 
                          sx={{ 
                            fontSize: { xs: 48, md: 56 },
                            color: alpha(theme.palette.primary.main, 0.7),
                            position: 'absolute',
                            right: '10%',
                            top: '50%',
                            marginTop: '-24px'
                          }} 
                        />
                      </Box>
                    </Box>

                    {/* Enhanced title with better alignment */}
                    <Typography
                      component="h1"
                      variant="h2"
                      sx={{
                        fontSize: { xs: '2rem', sm: '2.5rem', md: '3.5rem', lg: '4rem' },
                        fontWeight: 800,
                        color: theme.palette.primary.main,
                        mb: 1,
                        textAlign: { xs: 'center', md: 'left' },
                        ml: { xs: 0, md: 4 },
                        position: 'relative',
                        '&::after': {
                          content: '""',
                          position: 'absolute',
                          bottom: -4,
                          left: { xs: '50%', md: 0 },
                          transform: { xs: 'translateX(-50%)', md: 'none' },
                          width: { xs: '80px', md: '120px' },
                          height: '4px',
                          background: `linear-gradient(90deg, ${theme.palette.primary.main}, transparent)`,
                          borderRadius: 2
                        }
                      }}
                    >
                      Portfolio
                      <Box 
                        component="span" 
                        sx={{ 
                          display: 'block',
                          fontSize: { xs: '1.75rem', sm: '2rem', md: '3rem', lg: '3.5rem' },
                          background: `linear-gradient(135deg, ${theme.palette.text.primary} 0%, ${alpha(theme.palette.text.primary, 0.8)} 100%)`,
                          backgroundClip: 'text',
                          WebkitBackgroundClip: 'text',
                          WebkitTextFillColor: 'transparent',
                          position: 'relative',
                          pl: { md: '2px' }, // Slight padding for alignment
                          '&::after': {
                            content: '""',
                            position: 'absolute',
                            bottom: -8,
                            left: 0,
                            width: '40%',
                            height: 3,
                            background: `linear-gradient(90deg, ${theme.palette.primary.main}, transparent)`,
                            borderRadius: 1
                          }
                        }}
                      >
                        Analytics Platform
                      </Box>
                    </Typography>

                    {/* Description with proper alignment */}
                    <Typography
                      variant="h5"
                      color="text.secondary"
                      sx={{
                        mb: { xs: 3, md: 4 },
                        mt: { xs: 2, md: 3 }, // Added top margin for spacing
                        fontSize: { xs: '1rem', sm: '1.25rem', md: 'inherit' },
                        lineHeight: 1.6,
                        textAlign: { xs: 'center', md: 'left' },
                        ml: { xs: 0, md: 4 },
                        maxWidth: { xs: '100%', md: '80%' }, // Adjusted max width
                        px: { xs: 2, md: 0 }, // Added padding for mobile
                        position: 'relative',
                        '&::before': {
                          content: '""',
                          position: 'absolute',
                          top: -12,
                          left: { xs: '50%', md: 0 },
                          transform: { xs: 'translateX(-50%)', md: 'none' },
                          width: 40,
                          height: 2,
                          bgcolor: alpha(theme.palette.primary.main, 0.3),
                          borderRadius: 1
                        }
                      }}
                    >
                      Advanced portfolio analysis and comparison tools to optimize your investments
                      with real-time data and comprehensive metrics.
                    </Typography>

                    {/* Buttons aligned with icon */}
                    <Stack
                      direction={{ xs: 'column', sm: 'row' }}
                      spacing={2}
                      justifyContent={{ xs: 'center', md: 'flex-start' }}
                      sx={{ 
                        mb: { xs: 4, md: 0 },
                        ml: { xs: 0, md: 4 },
                        width: { xs: '100%', sm: 'auto' }
                      }}
                    >
                      <Button
                        variant="contained"
                        size="large"
                        onClick={handleStartWithTutorial}
                        startIcon={<Assessment />}
                        fullWidth={isMobile}
                        sx={{
                          py: 1.5,
                          px: 3,
                          fontSize: '1rem',
                          boxShadow: 2
                        }}
                      >
                        Start with Tutorial
                      </Button>
                      <Button
                        variant="outlined"
                        size="large"
                        onClick={handleSkipTutorial}
                        fullWidth={isMobile}
                        sx={{
                          py: 1.5,
                          px: 3,
                          fontSize: '1rem'
                        }}
                      >
                        Skip Tutorial
                      </Button>
                    </Stack>
                  </Box>
                </Fade>
              </Grid>

              {/* Statistics cards with simpler, consistent styling */}
              <Grid item xs={12} md={6}>
                <Grid 
                  container 
                  spacing={2}
                  sx={{
                    px: { xs: 0, md: 2 },
                  }}
                >
                  {statistics.map((stat, index) => (
                    <Grid item xs={12} sm={4} key={stat.label}>
                      <Zoom in timeout={1000 + index * 200}>
                        <Paper
                          elevation={1}
                          sx={{
                            p: 3,
                            height: '100%',
                            borderRadius: 2,
                            display: 'flex',
                            flexDirection: 'column',
                            alignItems: 'center',
                            justifyContent: 'center',
                            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                            bgcolor: alpha(stat.color, theme.palette.mode === 'light' ? 0.05 : 0.1),
                            border: `1px solid ${alpha(stat.color, theme.palette.mode === 'light' ? 0.1 : 0.2)}`,
                            '&:hover': {
                              transform: 'translateY(-8px)',
                              bgcolor: alpha(stat.color, theme.palette.mode === 'light' ? 0.08 : 0.15),
                              boxShadow: `0 8px 24px ${alpha(stat.color, theme.palette.mode === 'light' ? 0.15 : 0.25)}`,
                            }
                          }}
                        >
                          <Box
                            sx={{
                              display: 'flex',
                              alignItems: 'center',
                              justifyContent: 'center',
                              width: 56,
                              height: 56,
                              borderRadius: 2,
                              bgcolor: alpha(stat.color, 0.1),
                              mb: 2
                            }}
                          >
                            <stat.icon sx={{ fontSize: 28, color: stat.color }} />
                          </Box>
                          <Typography 
                            variant="h3" 
                            component="div"
                            fontWeight="bold"
                            sx={{
                              color: stat.color,
                              fontSize: { xs: '2rem', sm: '2.5rem' },
                              lineHeight: 1.2,
                              mb: 1
                            }}
                          >
                            {stat.value}
                          </Typography>
                          <Typography 
                            variant="subtitle1"
                            color="text.secondary"
                            align="center"
                            sx={{
                              fontSize: { xs: '0.875rem', sm: '1rem' },
                              fontWeight: 500
                            }}
                          >
                            {stat.label}
                          </Typography>
                        </Paper>
                      </Zoom>
                    </Grid>
                  ))}
                </Grid>
              </Grid>
            </Grid>
          </Container>
        </Box>

        {/* What's New Section with improved spacing */}
        <Box
          id="whatsNew"
          sx={{
            py: { xs: 6, md: 8 },
            bgcolor: 'background.default',
            position: 'relative',
            mt: 0,
            mb: 0
          }}
        >
          <Container 
            maxWidth="lg"
            sx={{
              px: { xs: 4, sm: 6, md: 8 },
            }}
          >
            <Slide direction="up" in={visibleSections.whatsNew} timeout={1000}>
              <Box>
                <Typography
                  variant="h3"
                  align="center"
                  fontWeight="bold"
                  sx={{ 
                    mb: { xs: 3, md: 4 },
                    background: `linear-gradient(120deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
                    WebkitBackgroundClip: 'text',
                    WebkitTextFillColor: 'transparent',
                    position: 'relative',
                    display: 'inline-block',
                    left: '50%',
                    transform: 'translateX(-50%)',
                    '&::after': {
                      content: '""',
                      position: 'absolute',
                      bottom: -8,
                      left: 0,
                      width: '100%',
                      height: 3,
                      background: `linear-gradient(90deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
                      borderRadius: 2,
                      transform: visibleSections.whatsNew ? 'scaleX(1)' : 'scaleX(0)',
                      transformOrigin: 'left',
                      transition: 'transform 1.5s ease-out',
                    }
                  }}
                >
                  What's New
                </Typography>
                <Typography
                  variant="h6"
                  align="center"
                  color="text.secondary"
                  sx={{ mb: 6, maxWidth: 600, mx: 'auto' }}
                >
                  Latest updates and improvements to enhance your portfolio analysis experience
                </Typography>
                <Grid 
                  container 
                  spacing={4}
                  sx={{ 
                    mx: 'auto',
                    width: 'calc(100% + 32px)',
                    ml: -2,
                    mr: -2
                  }}
                >
                  {whatsNew.map((item, index) => (
                    <Grid item xs={12} md={4} key={item.title}>
                      <Grow
                        in={visibleSections.whatsNew}
                        timeout={1000 + index * 200}
                      >
                        <Card
                          elevation={theme.palette.mode === 'light' ? 1 : 2}
                          sx={{
                            height: '100%',
                            borderRadius: 4,
                            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                            border: `1px solid ${alpha(item.color, theme.palette.mode === 'light' ? 0.1 : 0.2)}`,
                            bgcolor: theme.palette.mode === 'light' ? 'background.paper' : 'background.paper',
                            position: 'relative',
                            overflow: 'visible',
                            '&:hover': {
                              transform: 'translateY(-8px)',
                              boxShadow: `0 12px 28px ${alpha(item.color, theme.palette.mode === 'light' ? 0.2 : 0.3)}`,
                              '& .whats-new-icon': {
                                transform: 'scale(1.1)',
                                bgcolor: alpha(item.color, theme.palette.mode === 'light' ? 0.15 : 0.25),
                              }
                            }
                          }}
                        >
                          <Box
                            sx={{
                              position: 'absolute',
                              top: -16,
                              right: 16,
                              zIndex: 1
                            }}
                          >
                            <Chip
                              label={item.tag}
                              color={
                                item.tag === 'New' ? 'success' :
                                item.tag === 'Updated' ? 'primary' :
                                'warning'
                              }
                              size="small"
                              sx={{
                                fontWeight: 'bold',
                                boxShadow: theme => `0 4px 12px ${alpha(theme.palette.primary.main, 0.25)}`
                              }}
                            />
                          </Box>
                          <CardContent sx={{ p: 4 }}>
                            <Box
                              sx={{
                                display: 'flex',
                                alignItems: 'center',
                                mb: 2
                              }}
                            >
                              <Avatar
                                sx={{
                                  bgcolor: alpha(item.color, 0.1),
                                  color: item.color,
                                  width: 56,
                                  height: 56,
                                  mb: 2
                                }}
                              >
                                <item.icon sx={{ fontSize: 28 }} />
                              </Avatar>
                            </Box>
                            <Typography
                              variant="h5"
                              gutterBottom
                              fontWeight="bold"
                            >
                              {item.title}
                            </Typography>
                            <Typography
                              color="text.secondary"
                              sx={{ lineHeight: 1.6 }}
                            >
                              {item.description}
                            </Typography>
                          </CardContent>
                        </Card>
                      </Grow>
                    </Grid>
                  ))}
                </Grid>
              </Box>
            </Slide>
          </Container>
        </Box>

        {/* Features Section with improved spacing */}
        <Box 
          id="features" 
          sx={{ 
            py: { xs: 6, md: 8 },
            position: 'relative',
            mb: -8,
            bgcolor: 'background.default'
          }}
        >
          <Container 
            maxWidth="lg"
            sx={{
              px: { xs: 4, sm: 6, md: 8 },
            }}
          >
            <Typography
              variant="h3"
              align="center"
              fontWeight="bold"
              sx={{ 
                mb: { xs: 3, md: 4 },
                background: `linear-gradient(120deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
                WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent',
                position: 'relative',
                display: 'inline-block',
                left: '50%',
                transform: 'translateX(-50%)',
                '&::after': {
                  content: '""',
                  position: 'absolute',
                  bottom: -8,
                  left: 0,
                  width: '100%',
                  height: 3,
                  background: `linear-gradient(90deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
                  borderRadius: 2,
                  transform: visibleSections.features ? 'scaleX(1)' : 'scaleX(0)',
                  transformOrigin: 'left',
                  transition: 'transform 0.8s ease-out',
                }
              }}
            >
              Features
            </Typography>
            <Typography
              variant="h6"
              align="center"
              color="text.secondary"
              sx={{ mb: 6, maxWidth: 600, mx: 'auto' }}
            >
              Powerful tools and analytics to optimize your investment strategy
            </Typography>
            <Grid 
              container 
              spacing={4}
              sx={{ 
                mx: 'auto',
                width: 'calc(100% + 32px)',
                ml: -2,
                mr: -2
              }}
            >
              {features.map((feature, index) => (
                <Grid 
                  item 
                  xs={12} 
                  sm={6} 
                  md={4} 
                  key={feature.title}
                  sx={{
                    px: { xs: 2, sm: 3, md: 4 }
                  }}
                >
                  <Zoom in timeout={1000 + index * 200}>
                    <Card
                      elevation={theme.palette.mode === 'light' ? 1 : 2}
                      sx={{
                        height: '100%',
                        display: 'flex',
                        flexDirection: 'column',
                        borderRadius: 4,
                        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                        border: `1px solid ${alpha(feature.color, theme.palette.mode === 'light' ? 0.1 : 0.2)}`,
                        bgcolor: theme.palette.mode === 'light' ? 'background.paper' : 'background.paper',
                        '&:hover': {
                          transform: 'translateY(-8px)',
                          boxShadow: `0 12px 28px ${alpha(feature.color, theme.palette.mode === 'light' ? 0.2 : 0.3)}`,
                          '& .feature-icon': {
                            transform: 'scale(1.1)',
                            bgcolor: alpha(feature.color, theme.palette.mode === 'light' ? 0.15 : 0.25),
                          }
                        }
                      }}
                    >
                      <Box
                        sx={{
                          p: 3,
                          background: `linear-gradient(135deg, ${alpha(feature.color, theme.palette.mode === 'light' ? 0.1 : 0.15)} 0%, ${alpha(feature.color, theme.palette.mode === 'light' ? 0.05 : 0.1)} 100%)`,
                        }}
                      >
                        <Box
                          className="feature-icon"
                          sx={{
                            display: 'inline-flex',
                            p: 2,
                            borderRadius: '50%',
                            bgcolor: alpha(feature.color, theme.palette.mode === 'light' ? 0.1 : 0.2),
                            mb: 2,
                            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                          }}
                        >
                          <feature.icon
                            sx={{
                              fontSize: 44,
                              color: feature.color,
                            }}
                          />
                        </Box>
                        <Typography
                          gutterBottom
                          variant="h5"
                          component="h2"
                          fontWeight="bold"
                          sx={{
                            fontSize: { xs: '1.35rem', sm: '1.5rem' },
                            mb: 1.5
                          }}
                        >
                          {feature.title}
                        </Typography>
                        <Typography 
                          color="text.secondary" 
                          paragraph
                          sx={{
                            fontSize: { xs: '0.95rem', sm: '1rem' },
                            mb: 1
                          }}
                        >
                          {feature.description}
                        </Typography>
                      </Box>
                      <CardContent 
                        sx={{ 
                          flexGrow: 1,
                          display: 'flex',
                          alignItems: 'center',
                          p: 3,
                          pt: 2.5,
                          pb: 3
                        }}
                      >
                        <Grid 
                          container 
                          spacing={3}
                          sx={{
                            justifyContent: 'center',
                            alignItems: 'center'
                          }}
                        >
                          <Grid item xs={6}>
                            <Stack spacing={2.5}>
                              {feature.details[0].left.map((detail, i) => (
                                <Box
                                  key={i}
                                  sx={{
                                    display: 'flex',
                                    alignItems: 'center',
                                    gap: 1.5
                                  }}
                                >
                                  <Box
                                    sx={{
                                      width: 8,
                                      height: 8,
                                      borderRadius: '50%',
                                      bgcolor: feature.color,
                                      flexShrink: 0
                                    }}
                                  />
                                  <Typography 
                                    variant="body2" 
                                    color="text.secondary"
                                    sx={{
                                      fontSize: { xs: '0.875rem', sm: '0.95rem' },
                                      fontWeight: 500
                                    }}
                                  >
                                    {detail}
                                  </Typography>
                                </Box>
                              ))}
                            </Stack>
                          </Grid>
                          <Grid item xs={6}>
                            <Stack spacing={2.5}>
                              {feature.details[0].right.map((detail, i) => (
                                <Box
                                  key={i}
                                  sx={{
                                    display: 'flex',
                                    alignItems: 'center',
                                    gap: 1.5
                                  }}
                                >
                                  <Box
                                    sx={{
                                      width: 8,
                                      height: 8,
                                      borderRadius: '50%',
                                      bgcolor: feature.color,
                                      flexShrink: 0
                                    }}
                                  />
                                  <Typography 
                                    variant="body2" 
                                    color="text.secondary"
                                    sx={{
                                      fontSize: { xs: '0.875rem', sm: '0.95rem' },
                                      fontWeight: 500
                                    }}
                                  >
                                    {detail}
                                  </Typography>
                                </Box>
                              ))}
                            </Stack>
                          </Grid>
                        </Grid>
                      </CardContent>
                    </Card>
                  </Zoom>
                </Grid>
              ))}
            </Grid>
          </Container>
        </Box>

        {/* Testimonials Section with improved spacing */}
        <Box 
          id="testimonials"
          sx={{ 
            py: { xs: 6, md: 8 },
            bgcolor: theme.palette.mode === 'light' 
              ? alpha(theme.palette.primary.main, 0.02)
              : alpha(theme.palette.primary.dark, 0.02),
            position: 'relative',
            mt: 0,
            borderTop: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
            zIndex: 1
          }}
        >
          <Container maxWidth="lg">
            <Typography
              variant="h3"
              align="center"
              fontWeight="bold"
              sx={{ 
                mb: { xs: 3, md: 4 },
                background: `linear-gradient(120deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
                WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent',
                position: 'relative',
                display: 'inline-block',
                left: '50%',
                transform: 'translateX(-50%)',
                '&::after': {
                  content: '""',
                  position: 'absolute',
                  bottom: -8,
                  left: 0,
                  width: '100%',
                  height: 3,
                  background: `linear-gradient(90deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
                  borderRadius: 2,
                  transform: visibleSections.testimonials ? 'scaleX(1)' : 'scaleX(0)',
                  transformOrigin: 'left',
                  transition: 'transform 0.8s ease-out',
                }
              }}
            >
              What Our Users Say
            </Typography>
            
            <Typography
              variant="h6"
              align="center"
              color="text.secondary"
              sx={{ mb: 6, maxWidth: 600, mx: 'auto' }}
            >
              Trusted by investment professionals worldwide to deliver accurate insights and powerful analytics
            </Typography>

            <Grid 
              container 
              spacing={3}
              sx={{ mb: 4 }}
            >
              {testimonials.map((testimonial, index) => (
                <Grid item xs={12} md={4} key={index}>
                  <Card
                    elevation={0}
                    sx={{
                      height: '100%',
                      bgcolor: alpha(theme.palette.background.paper, theme.palette.mode === 'light' ? 0.6 : 0.4),
                      backdropFilter: 'blur(8px)',
                      border: `1px solid ${alpha(theme.palette.divider, theme.palette.mode === 'light' ? 0.1 : 0.2)}`,
                      borderRadius: 3,
                      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                      '&:hover': {
                        transform: 'translateY(-8px)',
                        bgcolor: theme.palette.background.paper,
                        boxShadow: theme.shadows[8],
                        '& .testimonial-avatar': {
                          transform: 'scale(1.1)',
                        }
                      }
                    }}
                  >
                    <CardContent sx={{ p: 3 }}>
                      <Box sx={{ mb: 2 }}>
                        <Rating 
                          value={testimonial.rating} 
                          readOnly 
                          size="small"
                          sx={{
                            color: theme.palette.primary.main,
                            opacity: 0.9
                          }}
                        />
                      </Box>
                      
                      <Typography
                        variant="body1"
                        sx={{ 
                          mb: 3,
                          color: alpha(theme.palette.text.primary, 0.87),
                          lineHeight: 1.6,
                          fontStyle: 'italic'
                        }}
                      >
                        "{testimonial.comment}"
                      </Typography>

                      <Stack direction="row" spacing={1} sx={{ mb: 3 }}>
                        {testimonial.tags.map((tag) => (
                          <Chip
                            key={tag}
                            label={tag}
                            size="small"
                            sx={{
                              bgcolor: alpha(theme.palette.primary.main, 0.1),
                              color: theme.palette.primary.main,
                              fontWeight: 500
                            }}
                          />
                        ))}
                      </Stack>

                      <Stack direction="row" spacing={2} alignItems="center">
                        <Avatar
                          className="testimonial-avatar"
                          sx={{
                            bgcolor: theme.palette.primary.main,
                            width: 48,
                            height: 48,
                            fontSize: '1.2rem',
                            fontWeight: 500,
                            transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                          }}
                        >
                          {testimonial.name[0]}
                        </Avatar>
                        <Box>
                          <Typography variant="subtitle1" fontWeight="bold">
                            {testimonial.name}
                          </Typography>
                          <Typography 
                            variant="body2" 
                            color="text.secondary"
                            sx={{ mb: 0.5 }}
                          >
                            {testimonial.role}
                          </Typography>
                          <Typography 
                            variant="caption" 
                            color="text.secondary"
                            sx={{ 
                              display: 'flex',
                              alignItems: 'center',
                              gap: 0.5
                            }}
                          >
                            <Box
                              component="span"
                              sx={{
                                width: 6,
                                height: 6,
                                borderRadius: '50%',
                                bgcolor: theme.palette.success.main
                              }}
                            />
                            {testimonial.company}
                          </Typography>
                        </Box>
                      </Stack>
                    </CardContent>
                  </Card>
                </Grid>
              ))}
            </Grid>

            <Box 
              sx={{ 
                display: 'flex', 
                justifyContent: 'center',
                gap: 2
              }}
            >
              <Button
                variant="outlined"
                size="large"
                startIcon={<Star />}
                sx={{
                  borderRadius: 2,
                  py: 1,
                  px: 3
                }}
              >
                View All Reviews
              </Button>
            </Box>
          </Container>
        </Box>

        {/* Footer with improved spacing */}
        <Box 
          component="footer" 
          sx={{ 
            py: 4,
            mt: -2,
            position: 'relative'
          }}
        >
          <Container 
            maxWidth="lg"
            sx={{
              px: { xs: 4, sm: 6, md: 8 },
            }}
          >
            <Stack
              direction="row"
              justifyContent="center"
              alignItems="center"
              spacing={2}
            >
              {socialLinks.map(({ icon: Icon, label, url }) => (
                <Tooltip key={label} title={label}>
                  <IconButton
                    href={url}
                    target="_blank"
                    rel="noopener noreferrer"
                    sx={{
                      color: 'text.secondary',
                      '&:hover': {
                        color: 'primary.main',
                      },
                    }}
                  >
                    <Icon />
                  </IconButton>
                </Tooltip>
              ))}
            </Stack>
            <Typography
              variant="body2"
              color="text.secondary"
              align="center"
              sx={{ mt: 2 }}
            >
              © {new Date().getFullYear()} Portfolio Analytics. All rights reserved.
            </Typography>
          </Container>
        </Box>
      </Box>

      {/* Quick Action Speed Dial */}
      <SpeedDial
        ariaLabel="Quick actions"
        sx={{ 
          position: 'fixed', 
          bottom: { xs: 24, sm: 16 }, 
          right: { xs: 16, sm: 16 }
        }}
        icon={<SpeedDialIcon />}
        open={openSpeedDial}
        onOpen={() => setOpenSpeedDial(true)}
        onClose={() => setOpenSpeedDial(false)}
      >
        <SpeedDialAction
          icon={<Help />}
          tooltipTitle="Start Tutorial"
          onClick={() => handleSpeedDialAction('tutorial')}
        />
        <SpeedDialAction
          icon={<PlayArrow />}
          tooltipTitle="Quick Start"
          onClick={() => handleSpeedDialAction('start')}
        />
      </SpeedDial>

      {/* Loading Progress */}
      {showProgress && (
        <Box
          sx={{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            zIndex: 9999
          }}
        >
          <LinearProgress />
        </Box>
      )}

      {/* Tutorial Dialog */}
      <Tutorial 
        open={showTutorial} 
        onClose={handleTutorialClose}
      />

      {/* Backdrop for SpeedDial */}
      <Backdrop open={openSpeedDial} />
    </Box>
  )
}

// Add keyframes for animations
const keyframes = `
  @keyframes pulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.2; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  }
`

// Add styles to document
const style = document.createElement('style')
style.innerHTML = keyframes
document.head.appendChild(style)

export default LandingPage

combine the below into above and return me full updated code:

// First, add useMediaQuery near the top imports
import { useMediaQuery } from '@mui/material'

// Inside the LandingPage component, add this near the top:
function LandingPage({ onGetStarted, isDarkMode, onToggleTheme }) {
  const theme = useTheme()
  const [showTutorial, setShowTutorial] = useState(false)
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
  // ... existing code

  // Create a mobile-optimized version of the landing page
  const MobileLanding = () => (
    <Box 
      sx={{ 
        minHeight: '100vh',
        bgcolor: 'background.default',
        overflow: 'hidden',
        position: 'relative',
        display: 'flex',
        flexDirection: 'column'
      }}
    >
      <Box
        sx={{
          flex: 1,
          display: 'flex',
          flexDirection: 'column',
          position: 'relative',
          zIndex: 1,
          bgcolor: 'background.default'
        }}
      >
        {/* Hero Section */}
        <Box
          sx={{
            flex: 1,
            display: 'flex',
            alignItems: 'center',
            pt: 4,
            pb: 6
          }}
        >
          <Container maxWidth="sm">
            <Fade in timeout={1000}>
              <Box sx={{ textAlign: 'center' }}>
                {/* Logo */}
                <Box
                  sx={{
                    display: 'inline-flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    width: 80,
                    height: 80,
                    borderRadius: 3,
                    bgcolor: 'transparent',
                    mb: 3,
                    position: 'relative'
                  }}
                >
                  <Analytics 
                    sx={{ 
                      fontSize: 48,
                      color: theme.palette.primary.main
                    }} 
                  />
                </Box>

                {/* Title */}
                <Typography
                  variant="h3"
                  sx={{
                    fontWeight: 800,
                    color: theme.palette.primary.main,
                    mb: 2,
                    fontSize: '2rem'
                  }}
                >
                  Portfolio
                  <Box 
                    component="span" 
                    sx={{ 
                      display: 'block',
                      fontSize: '1.75rem',
                      color: 'text.primary',
                      mt: 1
                    }}
                  >
                    Analytics Platform
                  </Box>
                </Typography>

                {/* Description */}
                <Typography
                  variant="body1"
                  color="text.secondary"
                  sx={{
                    mb: 4,
                    px: 2,
                    lineHeight: 1.6
                  }}
                >
                  Advanced portfolio analysis and comparison tools to optimize your investments
                  with real-time data and comprehensive metrics.
                </Typography>

                {/* Action Buttons */}
                <Stack
                  direction="column"
                  spacing={2}
                  sx={{ px: 2 }}
                >
                  <Button
                    variant="contained"
                    size="large"
                    onClick={handleStartWithTutorial}
                    startIcon={<Assessment />}
                    fullWidth
                    sx={{
                      py: 1.5,
                      fontSize: '1rem'
                    }}
                  >
                    Start with Tutorial
                  </Button>
                  <Button
                    variant="outlined"
                    size="large"
                    onClick={handleSkipTutorial}
                    fullWidth
                    sx={{
                      py: 1.5,
                      fontSize: '1rem'
                    }}
                  >
                    Skip Tutorial
                  </Button>
                </Stack>
              </Box>
            </Fade>
          </Container>
        </Box>

        {/* Key Features Section */}
        <Box
          sx={{
            py: 6,
            bgcolor: alpha(theme.palette.primary.main, 0.03)
          }}
        >
          <Container maxWidth="sm">
            <Typography
              variant="h4"
              align="center"
              sx={{ mb: 4, fontWeight: 'bold' }}
            >
              Key Features
            </Typography>
            <Stack spacing={3}>
              {features.slice(0, 3).map((feature) => (
                <Paper
                  key={feature.title}
                  elevation={0}
                  sx={{
                    p: 3,
                    borderRadius: 2,
                    border: `1px solid ${alpha(feature.color, 0.1)}`,
                    bgcolor: alpha(feature.color, 0.05)
                  }}
                >
                  <Stack direction="row" spacing={2} alignItems="center">
                    <feature.icon sx={{ fontSize: 32, color: feature.color }} />
                    <Box>
                      <Typography variant="h6" gutterBottom>
                        {feature.title}
                      </Typography>
                      <Typography variant="body2" color="text.secondary">
                        {feature.description}
                      </Typography>
                    </Box>
                  </Stack>
                </Paper>
              ))}
            </Stack>
          </Container>
        </Box>

        {/* Footer */}
        <Box 
          component="footer" 
          sx={{ 
            py: 4,
            borderTop: `1px solid ${alpha(theme.palette.divider, 0.1)}`
          }}
        >
          <Container maxWidth="sm">
            <Stack
              direction="row"
              justifyContent="center"
              alignItems="center"
              spacing={2}
            >
              {socialLinks.map(({ icon: Icon, label, url }) => (
                <Tooltip key={label} title={label}>
                  <IconButton
                    href={url}
                    target="_blank"
                    rel="noopener noreferrer"
                    sx={{
                      color: 'text.secondary',
                      '&:hover': {
                        color: 'primary.main',
                      },
                    }}
                  >
                    <Icon />
                  </IconButton>
                </Tooltip>
              ))}
            </Stack>
            <Typography
              variant="body2"
              color="text.secondary"
              align="center"
              sx={{ mt: 2 }}
            >
              © {new Date().getFullYear()} Portfolio Analytics
            </Typography>
          </Container>
        </Box>
      </Box>

      {/* Tutorial Dialog */}
      <Tutorial 
        open={showTutorial} 
        onClose={handleTutorialClose}
      />
    </Box>
  )

  // Modify the return statement to conditionally render based on screen size
  return isMobile ? (
    <MobileLanding />
  ) : (
    // Original desktop version
    <Box>
      {/* ... existing desktop layout ... */}
    </Box>
  )
}