// Landing Page Component - Main entry point with navigation cards
const LandingPage = () => {
  const { 
    Box, Typography, Card, CardContent, CardActionArea, CardMedia, 
    Grid, Container, Paper, Avatar
  } = MaterialUI;

  // Card data for each subpage
  const pages = [
    {
      title: 'Live Data',
      description: 'Real-time sensor data from around my home.',
      route: 'live-data',
      icon: '📊',
      image: '/images/live-data-plot.png'
    },
    {
      title: 'Plants',
      description: 'Monitoring moisture levels for my houseplants.',
      route: 'plants',
      icon: null,
      image: '/images/plant1.png'
    },
    {
      title: 'Image Tools',
      description: 'Upload images and apply filters like blur, sharpen, and grayscale.',
      route: 'image-tools',
      icon: '🖼️',
      image: null
    },
    {
      title: '3D Viewer',
      description: 'Experimenting with rendering 3D data such as point clouds and meshes.',
      route: '3d-viewer',
      icon: '🧊',
      image: null
    },
    {
      title: 'Server Analytics',
      description: 'Usage statistics and performance metrics for this server.',
      route: 'analytics',
      icon: '📈',
      image: null
    },
    {
      title: 'Resume',
      description: 'My professional background and experience.',
      route: 'resume',
      icon: '📄',
      image: null
    },
  ];

  // Navigate to a subpage using hash routing
  const navigateTo = (route) => {
    const routeMapping = {
      'live-data': 'live-data',
      'plants': 'plants',
      'image-tools': 'image-tools',
      '3d-viewer': '3d-viewer',
      'analytics': 'analytics',
      'resume': 'resume',
    };
    const cleanUrl = routeMapping[route] || route;
    window.location.hash = cleanUrl;
  };

  return (
    <Container maxWidth="lg">
      <Box sx={{ py: 4 }}>
        {/* Header Section */}
        <Paper 
          elevation={0} 
          sx={{ 
            p: 4, 
            mb: 4, 
            textAlign: 'center',
            backgroundColor: 'transparent'
          }}
        >
          <Typography 
            variant="h3" 
            component="h1" 
            gutterBottom
            sx={{ fontWeight: 500 }}
          >
            Pseudoremy Projects
          </Typography>
          <Typography 
            variant="body1" 
            color="text.secondary"
            sx={{ 
              maxWidth: 600, 
              mx: 'auto',
              fontSize: '1.1rem',
              lineHeight: 1.7
            }}
          >
            I like building and experimenting with software, hardware, and anything 
            in between. Here you'll find small tools, experiments, and assorted 
            projects I work on mostly for fun.
          </Typography>
        </Paper>

        {/* Navigation Cards Grid */}
        <Grid container spacing={3} justifyContent="center">
          {pages.map((page) => (
            <Grid item xs={12} sm={6} md={3} key={page.route}>
              <Card 
                sx={{ 
                  height: '100%',
                  display: 'flex',
                  flexDirection: 'column',
                  transition: 'transform 0.2s, box-shadow 0.2s',
                  '&:hover': {
                    transform: 'translateY(-4px)',
                    boxShadow: 6
                  }
                }}
              >
                <CardActionArea 
                  onClick={() => navigateTo(page.route)}
                  sx={{ 
                    flexGrow: 1, 
                    display: 'flex', 
                    flexDirection: 'column',
                    alignItems: 'stretch'
                  }}
                >
                  {/* Image or Icon placeholder */}
                  {page.image ? (
                    <CardMedia
                      component="img"
                      height="160"
                      image={page.image}
                      alt={page.title}
                      sx={{ objectFit: 'cover' }}
                    />
                  ) : (
                    <Box
                      sx={{
                        height: 160,
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        backgroundColor: 'action.hover',
                        fontSize: '4rem'
                      }}
                    >
                      {page.icon}
                    </Box>
                  )}
                  <CardContent sx={{ flexGrow: 1, borderTop: '1px solid', borderColor: 'divider' }}>
                    <Typography 
                      gutterBottom 
                      variant="h6" 
                      component="h2"
                      sx={{ fontWeight: 500 }}
                    >
                      {page.title}
                    </Typography>
                    <Typography 
                      variant="body2" 
                      color="text.secondary"
                    >
                      {page.description}
                    </Typography>
                  </CardContent>
                </CardActionArea>
              </Card>
            </Grid>
          ))}
        </Grid>
      </Box>
    </Container>
  );
};

// Export to global scope for browser-based JSX compilation
window.LandingPage = LandingPage;