// Cellular Automata Landing Page - Hub for cellular automata projects
const CellularAutomataLandingPage = () => {
  const { 
    Box, Typography, Card, CardContent, CardActionArea, CardMedia, 
    Grid, Container, Paper, useMediaQuery
  } = MaterialUI;

  const isVerySmall = useMediaQuery('(max-width: 400px)');

  // Card data for each cellular automata subpage
  const pages = [
    {
      title: 'Acoustic Modelling',
      description: 'Acoustic wave propagation simulation using the CA method of Leamy (2008).',
      route: 'acoustic-modelling',
      icon: '🌊',
      image: '/images/acoustic_cellular_automata_thumbnail.webp'
    },
    {
      title: "Conway's Game of Life",
      description: 'Interactive cellular automaton simulation devised by mathematician John Conway.',
      route: 'conways-game-of-life',
      icon: '🧬',
      image: '/images/game_of_life_thumbnail.webp'
    },
  ];

  // Navigate to a subpage using hash routing
  const navigateTo = (route) => {
    window.location.hash = route;
  };

  return (
    <Container maxWidth="lg">
      <Box sx={{ py: 4 }}>
        {/* Header Section */}
        <Paper 
          elevation={0} 
          sx={{ 
            p: { xs: 0, sm: 4 },
            mb: 4, 
            textAlign: 'center',
            backgroundColor: 'transparent'
          }}
        >
          <Typography 
            variant="h3" 
            component="h1" 
            gutterBottom
            sx={{ fontWeight: 500 }}
          >
            Cellular Automata
          </Typography>
          <Typography 
            variant="body1" 
            color="text.secondary"
            sx={{ 
              maxWidth: 600, 
              mx: 'auto',
              fontSize: '1.1rem',
              lineHeight: 1.7
            }}
          >
            Cellular automata are discrete computational models consisting of a network
            of cells, each evolving over time according to simple local rules based only
            on the states of neighbouring cells. Despite their simplicity, they can
            produce remarkably complex behaviour and have applications ranging from
            physics simulations to mathematical recreation.
          </Typography>
        </Paper>

        {/* Navigation Cards Grid */}
        <Grid container spacing={3} justifyContent="center">
          {pages.map((page) => (
            <Grid item xs={isVerySmall ? 12 : 6} sm={6} md={4} lg={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.CellularAutomataLandingPage = CellularAutomataLandingPage;