import { useState, useEffect } from 'react'
import {
  Box,
  Container,
  Typography,
  Button,
  Grid,
  Card,
  CardContent,
  useTheme,
  alpha,
  Stack,
  IconButton,
  Tooltip,
  Chip,
  useMediaQuery,
  Divider
} from '@mui/material'
import {
  Analytics,
  TrendingUp,
  Speed,
  GitHub,
  LinkedIn,
  Email,
  ArrowForward,
  CheckCircleOutline,
  AutoGraph,
  ShowChart,
  Timeline
} from '@mui/icons-material'
import Header from './Header'
import { motion } from 'framer-motion'

const features = [
  {
    title: 'Real-time Analytics',
    description: 'Track your portfolio performance with live market data and advanced metrics',
    icon: AutoGraph,
    highlights: ['Live market data', 'Performance tracking', 'Custom alerts'],
    gradient: 'linear-gradient(135deg, #6B73FF 0%, #000DFF 100%)'
  },
  {
    title: 'Smart Insights',
    description: 'AI-powered recommendations to optimize your investment strategy',
    icon: ShowChart,
    highlights: ['AI predictions', 'Market trends', 'Smart alerts'],
    gradient: 'linear-gradient(135deg, #FF6B6B 0%, #FF000D 100%)'
  },
  {
    title: 'Risk Analysis',
    description: 'Comprehensive risk assessment and portfolio diversification tools',
    icon: Timeline,
    highlights: ['Risk metrics', 'Portfolio scoring', 'Market signals'],
    gradient: 'linear-gradient(135deg, #36D1DC 0%, #5B86E5 100%)'
  }
]

const stats = [
  { label: 'Active Users', value: '10K+' },
  { label: 'Daily Trades', value: '1M+' },
  { label: 'Analysis Done', value: '500K+' }
]

const socialLinks = [
  { icon: GitHub, label: 'GitHub', url: 'https://github.com' },
  { icon: LinkedIn, label: 'LinkedIn', url: 'https://linkedin.com' },
  { icon: Email, label: 'Email', url: 'mailto:contact@example.com' }
]

function LandingPage({ onGetStarted, isDarkMode, onToggleTheme }) {
  const theme = useTheme()
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))

  return (
    <Box sx={{ 
      minHeight: '100vh',
      width: '100%',
      background: theme.palette.mode === 'dark'
        ? `linear-gradient(to bottom right, ${alpha(theme.palette.primary.dark, 0.5)}, ${theme.palette.background.default})`
        : `linear-gradient(to bottom right, ${alpha(theme.palette.primary.light, 0.3)}, ${theme.palette.background.default})`,
      overflowX: 'hidden'
    }}>
      <Header 
        isDarkMode={isDarkMode}
        onToggleTheme={onToggleTheme}
        sx={{
          backdropFilter: 'blur(10px)',
          backgroundColor: alpha(theme.palette.background.paper, 0.8),
          borderBottom: 1,
          borderColor: 'divider'
        }}
      />

      {/* Hero Section */}
      <Box 
        sx={{ 
          width: '100%',
          pt: { xs: 8, md: 12 },
          pb: { xs: 8, md: 14 }
        }}
      >
        <Container>
          <Grid container spacing={6} alignItems="center">
            <Grid item xs={12} lg={6}>
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8 }}
              >
                <Stack spacing={3}>
                  <Chip
                    label="Next-Gen Portfolio Analytics"
                    color="primary"
                    size="medium"
                    sx={{ 
                      width: 'fit-content',
                      fontWeight: 600,
                      fontSize: '0.9rem',
                      py: 1,
                      px: 1.5,
                      background: theme.palette.primary.main,
                      color: theme.palette.primary.contrastText,
                      borderRadius: '16px',
                      boxShadow: theme.shadows[2]
                    }}
                  />
                  <Typography
                    variant="h1"
                    sx={{
                      fontSize: { xs: '2.5rem', sm: '3rem', md: '4rem' },
                      fontWeight: 800,
                      letterSpacing: '-0.02em',
                      background: `linear-gradient(45deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
                      backgroundClip: 'text',
                      WebkitBackgroundClip: 'text',
                      WebkitTextFillColor: 'transparent',
                      lineHeight: 1.1
                    }}
                  >
                    Transform Your Investment Strategy
                  </Typography>
                  <Typography
                    variant="h5"
                    sx={{ 
                      color: 'text.secondary',
                      maxWidth: 580,
                      lineHeight: 1.6,
                      fontSize: { xs: '1.1rem', md: '1.25rem' }
                    }}
                  >
                    Harness the power of AI and real-time analytics to make smarter investment decisions
                    and optimize your portfolio performance.
                  </Typography>

                  <Stack 
                    direction={{ xs: 'column', sm: 'row' }} 
                    spacing={2}
                    sx={{ pt: 2 }}
                  >
                    <Button
                      variant="contained"
                      size="large"
                      onClick={onGetStarted}
                      endIcon={<ArrowForward />}
                      sx={{
                        borderRadius: 3,
                        py: 1.5,
                        px: 4,
                        fontSize: '1.1rem',
                        background: `linear-gradient(45deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
                        boxShadow: `0 8px 24px ${alpha(theme.palette.primary.main, 0.25)}`,
                        '&:hover': {
                          transform: 'translateY(-2px)',
                          boxShadow: `0 12px 32px ${alpha(theme.palette.primary.main, 0.35)}`
                        },
                        transition: 'all 0.3s ease'
                      }}
                    >
                      Get Started Now
                    </Button>
                    <Button
                      variant="outlined"
                      size="large"
                      sx={{
                        borderRadius: 3,
                        py: 1.5,
                        px: 4,
                        fontSize: '1.1rem',
                        borderWidth: 2,
                        borderColor: theme.palette.primary.main,
                        color: theme.palette.primary.main,
                        '&:hover': {
                          borderWidth: 2,
                          transform: 'translateY(-2px)',
                          boxShadow: theme => `0 8px 24px ${alpha(theme.palette.primary.main, 0.15)}`,
                          backgroundColor: alpha(theme.palette.primary.main, 0.04)
                        },
                        transition: 'all 0.3s ease'
                      }}
                    >
                      Watch Demo
                    </Button>
                  </Stack>

                  <Stack 
                    direction="row" 
                    spacing={4} 
                    divider={<Divider orientation="vertical" flexItem />} 
                    sx={{ 
                      pt: 4,
                      opacity: 0.9
                    }}
                  >
                    {stats.map((stat, index) => (
                      <Box key={index}>
                        <Typography 
                          variant="h3" 
                          sx={{ 
                            fontWeight: 700,
                            background: `linear-gradient(45deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
                            backgroundClip: 'text',
                            WebkitBackgroundClip: 'text',
                            WebkitTextFillColor: 'transparent',
                          }}
                        >
                          {stat.value}
                        </Typography>
                        <Typography variant="body2" color="text.secondary">
                          {stat.label}
                        </Typography>
                      </Box>
                    ))}
                  </Stack>
                </Stack>
              </motion.div>
            </Grid>

            <Grid item xs={12} lg={6}>
              <motion.div
                initial={{ opacity: 0, scale: 0.95 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.8, delay: 0.2 }}
              >
                <Box
                  sx={{
                    position: 'relative',
                    width: '100%',
                    height: { xs: 300, sm: 400, md: 500 },
                    borderRadius: 4,
                    overflow: 'hidden',
                    background: theme => alpha(theme.palette.primary.main, 0.05),
                    boxShadow: theme => `0 32px 64px ${alpha(theme.palette.primary.main, 0.15)}`,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    transition: 'transform 0.3s ease',
                    '&:hover': {
                      transform: 'scale(1.02)',
                      boxShadow: theme => `0 40px 80px ${alpha(theme.palette.primary.main, 0.2)}`
                    }
                  }}
                >
                  {/* Placeholder for animated chart/graph visualization */}
                  <ShowChart sx={{ fontSize: { xs: 80, sm: 100, md: 120 }, color: theme.palette.primary.main, opacity: 0.1 }} />
                  {/* You can replace the above with actual animated graphics or images */}
                </Box>
              </motion.div>
            </Grid>
          </Grid>
        </Container>
      </Box>

      {/* Features Section */}
      <Box sx={{ 
        py: { xs: 8, md: 12 },
        background: theme.palette.background.default,
      }}>
        <Container>
          <Grid container spacing={4}>
            {features.map((feature, index) => (
              <Grid item xs={12} md={4} key={feature.title}>
                <motion.div
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                  viewport={{ once: true }}
                >
                  <Card
                    elevation={0}
                    sx={{
                      height: '100%',
                      background: theme.palette.background.paper,
                      borderRadius: 4,
                      transition: 'all 0.3s ease',
                      border: '1px solid',
                      borderColor: alpha(theme.palette.divider, 0.15),
                      overflow: 'hidden',
                      '&:hover': {
                        transform: 'translateY(-8px)',
                        boxShadow: theme => `0 12px 32px ${alpha(theme.palette.primary.main, 0.15)}`,
                        borderColor: theme.palette.primary.main
                      }
                    }}
                  >
                    <Box
                      sx={{
                        height: 4,
                        background: feature.gradient
                      }}
                    />
                    <CardContent sx={{ p: 4 }}>
                      <feature.icon
                        sx={{
                          fontSize: 48,
                          color: 'primary.main',
                          mb: 2
                        }}
                      />
                      <Typography variant="h5" gutterBottom fontWeight="bold">
                        {feature.title}
                      </Typography>
                      <Typography color="text.secondary" paragraph>
                        {feature.description}
                      </Typography>
                      <Stack spacing={1.5} mt={3}>
                        {feature.highlights.map((highlight, i) => (
                          <Stack key={i} direction="row" spacing={1.5} alignItems="center">
                            <CheckCircleOutline sx={{ fontSize: 20, color: 'success.main' }} />
                            <Typography variant="body2" color="text.secondary">
                              {highlight}
                            </Typography>
                          </Stack>
                        ))}
                      </Stack>
                    </CardContent>
                  </Card>
                </motion.div>
              </Grid>
            ))}
          </Grid>
        </Container>
      </Box>

      {/* Footer */}
      <Box
        component="footer"
        sx={{
          py: 4,
          background: theme.palette.background.paper,
          borderTop: 1,
          borderColor: 'divider'
        }}
      >
        <Container>
          <Stack
            direction={{ xs: 'column', sm: 'row' }}
            justifyContent="space-between"
            alignItems="center"
            spacing={2}
          >
            <Typography variant="body2" color="text.secondary">
              © {new Date().getFullYear()} Portfolio Analytics. All rights reserved.
            </Typography>
            <Stack direction="row" spacing={1}>
              {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',
                        transform: 'translateY(-2px)'
                      },
                      transition: 'all 0.2s ease'
                    }}
                  >
                    <Icon />
                  </IconButton>
                </Tooltip>
              ))}
            </Stack>
          </Stack>
        </Container>
      </Box>
    </Box>
  )
}

export default LandingPage


refactor and enhance the whole landing page to be more modern and MUI style with more fashion design
give me the full updated code