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

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

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

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

  // Original desktop version
  const DesktopLanding = () => (
    <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} />

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

  // Modify the return statement to conditionally render based on screen size
  return isMobile ? <MobileLanding /> : <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

enhanced the above code with the below and return me full updated code:
// Inside the MobileLanding component, update these sections:

const MobileLanding = () => (
  <Box
    sx={{
      minHeight: '100vh',
      bgcolor: 'background.default',
      overflow: 'hidden',
      position: 'relative',
      display: 'flex',
      flexDirection: 'column',
      pb: 8, // Add padding bottom to avoid FAB overlap
    }}
  >
    {/* Hero Section */}
    <Box
      sx={{
        pt: 3,
        pb: 4,
        px: 2,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        textAlign: 'center'
      }}
    >
      {/* Logo */}
      <Box
        sx={{
          display: 'inline-flex',
          alignItems: 'center',
          justifyContent: 'center',
          width: 64,
          height: 64,
          borderRadius: 2,
          bgcolor: alpha(theme.palette.primary.main, 0.1),
          mb: 3
        }}
      >
        <Analytics sx={{ fontSize: 36, color: theme.palette.primary.main }} />
      </Box>

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

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

    {/* Features Section */}
    <Box
      sx={{
        py: 4,
        px: 2,
        bgcolor: alpha(theme.palette.primary.main, 0.03)
      }}
    >
      <Typography
        variant="h5"
        align="center"
        sx={{ 
          mb: 3,
          fontWeight: 'bold'
        }}
      >
        Key Features
      </Typography>
      
      <Stack spacing={2}>
        {features.slice(0, 3).map((feature) => (
          <Paper
            key={feature.title}
            elevation={0}
            sx={{
              p: 2.5,
              borderRadius: 2,
              bgcolor: alpha(feature.color, 0.04),
              border: `1px solid ${alpha(feature.color, 0.1)}`
            }}
          >
            <Stack direction="row" spacing={2} alignItems="center">
              <Box
                sx={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  width: 40,
                  height: 40,
                  borderRadius: 1.5,
                  bgcolor: alpha(feature.color, 0.1),
                  color: feature.color
                }}
              >
                <feature.icon sx={{ fontSize: 24 }} />
              </Box>
              <Box sx={{ flex: 1 }}>
                <Typography 
                  variant="subtitle1" 
                  sx={{ 
                    fontWeight: 600,
                    mb: 0.5
                  }}
                >
                  {feature.title}
                </Typography>
                <Typography 
                  variant="body2" 
                  color="text.secondary"
                  sx={{
                    fontSize: '0.875rem',
                    lineHeight: 1.5
                  }}
                >
                  {feature.description}
                </Typography>
              </Box>
            </Stack>
          </Paper>
        ))}
      </Stack>
    </Box>

    {/* Footer */}
    <Box
      component="footer"
      sx={{
        py: 3,
        mt: 'auto',
        borderTop: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
        textAlign: 'center'
      }}
    >
      <Stack
        direction="row"
        spacing={3}
        justifyContent="center"
        sx={{ mb: 2 }}
      >
        {socialLinks.map(({ icon: Icon, label, url }) => (
          <IconButton
            key={label}
            href={url}
            target="_blank"
            rel="noopener noreferrer"
            size="small"
            sx={{
              color: 'text.secondary',
              '&:hover': {
                color: 'primary.main'
              }
            }}
          >
            <Icon sx={{ fontSize: 20 }} />
          </IconButton>
        ))}
      </Stack>
      <Typography
        variant="caption"
        color="text.secondary"
      >
        © {new Date().getFullYear()} Portfolio Analytics
      </Typography>
    </Box>

    {/* Speed Dial */}
    <SpeedDial
      ariaLabel="Quick actions"
      sx={{
        position: 'fixed',
        bottom: { xs: 40, sm: 24 }, // Increased bottom spacing
        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>

    <Tutorial open={showTutorial} onClose={handleTutorialClose} />
    <Backdrop open={openSpeedDial} />
  </Box>
)