// LandingPage.jsx
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'
import MobileLanding from './MobileLanding'

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
    }
  }

  // Original desktop version
  const DesktopLanding = () => (
    <Box
      sx={{
        minHeight: '100vh',
        bgcolor: 'background.default',
        overflow: 'hidden',
        position: 'relative',
        display: 'flex',
        flexDirection: 'column',
        margin: 0,
        padding: 0,
        '&::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',
          margin: 0,
          padding: 0,
          '& > *': {
            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',
            position: 'relative',
            '&::before': {
              content: '""',
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              height: '100%',
              background: `linear-gradient(180deg, ${alpha(theme.palette.primary.main, 0.05)} 0%, transparent 100%)`,
              zIndex: 0
            }
          }}
        >
          <Container
            maxWidth="lg"
            sx={{
              px: { xs: 2, sm: 4, md: 8 },
              position: 'relative',
              zIndex: 1
            }}
          >
            <Grid container spacing={{ xs: 4, md: 6 }} alignItems="center">
              <Grid item xs={12} md={6}>
                <Fade in timeout={1000}>
                  <Box>
                    {/* Enhanced 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,
                        position: 'relative',
                        mb: 1,
                        ml: { xs: 2, md: 4 },
                        transition: 'all 0.3s ease-in-out',
                        '&::before': {
                          content: '""',
                          position: 'absolute',
                          inset: -2,
                          borderRadius: 'inherit',
                          background: `linear-gradient(135deg, ${theme.palette.primary.main} 0%, ${theme.palette.secondary.main} 100%)`,
                          opacity: theme.palette.mode === 'dark' ? 0.2 : 0.1,
                          transition: 'opacity 0.3s ease-in-out'
                        },
                        '&::after': {
                          content: '""',
                          position: 'absolute',
                          inset: 0,
                          borderRadius: 'inherit',
                          border: `1px solid ${alpha(
                            theme.palette.primary.main, 
                            theme.palette.mode === 'dark' ? 0.2 : 0.1
                          )}`,
                          background: alpha(
                            theme.palette.background.paper,
                            theme.palette.mode === 'dark' ? 0.1 : 0.8
                          )
                        },
                        '&:hover': {
                          transform: 'translateY(-2px)',
                          '&::before': {
                            opacity: theme.palette.mode === 'dark' ? 0.25 : 0.15
                          }
                        }
                      }}
                    >
                      <Box
                        sx={{
                          position: 'relative',
                          width: '100%',
                          height: '100%',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center'
                        }}
                      >
                        <Analytics
                          sx={{
                            position: 'absolute',
                            fontSize: { xs: 48, md: 56 },
                            background: `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
                            WebkitBackgroundClip: 'text',
                            WebkitTextFillColor: 'transparent',
                            transform: 'rotate(-10deg) translateX(-5px)',
                            filter: `drop-shadow(0 2px 4px ${alpha(theme.palette.primary.main, 0.2)})`,
                            opacity: 0.9
                          }}
                        />
                        <Assessment
                          sx={{
                            position: 'absolute',
                            fontSize: { xs: 48, md: 56 },
                            background: `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
                            WebkitBackgroundClip: 'text',
                            WebkitTextFillColor: 'transparent',
                            transform: 'translateX(5px)',
                            filter: `drop-shadow(0 2px 4px ${alpha(theme.palette.primary.main, 0.2)})`,
                            opacity: 0.7
                          }}
                        />
                      </Box>
                    </Box>

                    {/* Enhanced title with animations */}
                    <Typography
                      component="h1"
                      variant="h2"
                      sx={{
                        fontSize: { xs: '2.5rem', sm: '3rem', md: '4rem', lg: '4.5rem' },
                        fontWeight: 800,
                        textAlign: { xs: 'center', md: 'left' },
                        ml: { xs: 0, md: 4 },
                        position: 'relative',
                      }}
                    >
                      <Box
                        component="span"
                        sx={{
                          position: 'relative',
                          background: `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
                          WebkitBackgroundClip: 'text',
                          WebkitTextFillColor: 'transparent',
                          '&::after': {
                            content: '""',
                            position: 'absolute',
                            bottom: -8,
                            left: 0,
                            width: '100%',
                            height: '3px',
                            background: `linear-gradient(90deg, 
                              ${alpha(theme.palette.primary.main, 0)},
                              ${alpha(theme.palette.primary.main, 0.8)},
                              ${alpha(theme.palette.secondary.main, 0.8)},
                              ${alpha(theme.palette.primary.main, 0)}
                            )`,
                            backgroundSize: '200% 100%',
                            borderRadius: '2px',
                            opacity: 0,
                            boxShadow: `
                              0 0 8px ${alpha(theme.palette.primary.main, 0.3)},
                              0 0 16px ${alpha(theme.palette.primary.main, 0.2)}
                            `,
                            animation: 'fadeIn 0.8s ease-out forwards 0.5s, shimmer 2s infinite linear',
                          },
                        }}
                      >
                        Portfolio Analytics
                      </Box>
                      <Box
                        component="div"
                        sx={{
                          display: 'block',
                          fontSize: { xs: '2rem', sm: '2.5rem', md: '3.5rem', lg: '4rem' },
                          background: `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
                          WebkitBackgroundClip: 'text',
                          WebkitTextFillColor: 'transparent',
                          mt: 1,
                          fontWeight: 700,
                        }}
                      >
                        Platform
                      </Box>
                    </Typography>

                    {/* Enhanced description with animation */}
                    <Typography
                      variant="h5"
                      sx={{
                        mb: { xs: 3, md: 4 },
                        mt: { xs: 2, md: 3 },
                        fontSize: { xs: '1.1rem', sm: '1.25rem', md: '1.5rem' },
                        lineHeight: 1.6,
                        textAlign: { xs: 'center', md: 'left' },
                        ml: { xs: 0, md: 4 },
                        maxWidth: { xs: '100%', md: '80%' },
                        px: { xs: 2, md: 0 },
                        color: alpha(theme.palette.text.secondary, 0.9),
                        '& strong': {
                          background: `linear-gradient(120deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
                          WebkitBackgroundClip: 'text',
                          WebkitTextFillColor: 'transparent',
                          fontWeight: 600
                        }
                      }}
                    >
                      <strong>Advanced portfolio analysis</strong> and comparison tools to optimize your investments
                      with <strong>real-time data</strong> and comprehensive metrics.
                    </Typography>

                    {/* Enhanced action buttons with animations */}
                    <Box
                      sx={{
                        opacity: 0,
                        transform: 'translateY(20px)',
                        animation: 'slideUp 0.6s ease-out forwards 0.6s',
                        '@keyframes slideUp': {
                          from: {
                            opacity: 0,
                            transform: 'translateY(20px)'
                          },
                          to: {
                            opacity: 1,
                            transform: 'translateY(0)'
                          }
                        }
                      }}
                    >
                      <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.8,
                            px: 4,
                            fontSize: '1rem',
                            fontWeight: 600,
                            borderRadius: 3,
                            boxShadow: `0 4px 12px ${alpha(theme.palette.primary.main, 0.25)}`,
                            '&:hover': {
                              transform: 'translateY(-2px)',
                              boxShadow: `0 6px 16px ${alpha(theme.palette.primary.main, 0.35)}`
                            },
                            transition: 'all 0.3s ease-in-out'
                          }}
                        >
                          Start with Tutorial
                        </Button>
                        <Button
                          variant="outlined"
                          size="large"
                          onClick={handleSkipTutorial}
                          fullWidth={isMobile}
                          sx={{
                            py: 1.8,
                            px: 4,
                            fontSize: '1rem',
                            fontWeight: 500,
                            borderRadius: 3,
                            borderWidth: 2,
                            '&:hover': {
                              borderWidth: 2,
                              transform: 'translateY(-2px)',
                              boxShadow: `0 4px 12px ${alpha(theme.palette.primary.main, 0.15)}`
                            },
                            transition: 'all 0.3s ease-in-out'
                          }}
                        >
                          Skip Tutorial
                        </Button>
                      </Stack>
                    </Box>
                  </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.whatsNew
                        ? 'scaleX(1)'
                        : 'scaleX(0)',
                      transformOrigin: 'left',
                      transition: 'transform 1.5s 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.whatsNew
                        ? 'scaleX(1)'
                        : 'scaleX(0)',
                      transformOrigin: 'left',
                      transition: 'transform 1.5s 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: 'auto',
            position: 'relative',
            marginBottom: 0,
            borderTop: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
          }}
        >
          <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>

      {/* 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} />

      {/* Scroll To Top */}
      <ScrollToTop />
    </Box>
  )

  return isMobile ? (
    <MobileLanding
      theme={theme}
      features={features}
      socialLinks={socialLinks}
      handleStartWithTutorial={handleStartWithTutorial}
      handleSkipTutorial={handleSkipTutorial}
      handleSpeedDialAction={handleSpeedDialAction}
      showTutorial={showTutorial}
      handleTutorialClose={handleTutorialClose}
      openSpeedDial={openSpeedDial}
      setOpenSpeedDial={setOpenSpeedDial}
    />
  ) : (
    <DesktopLanding />
  )
}

// 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


enhance my above code by deleting some redundancy part(make sure dont affect any existing features) and remove the hero section icon as well while add another design to replace the hero section icon so its not that empty in there
return full update code to me