E-Commerce-Module/frontend/src/pages/HomePage.jsx

import React from 'react';
import { Box, Typography, Button, Grid, Card, CardMedia, CardContent, Container } from '@mui/material';
import { Link as RouterLink } from 'react-router-dom';
import { useProducts, useCategories } from '@hooks/apiHooks';
import imageUtils from '@utils/imageUtils';
import useBrandingSettings from '@hooks/brandingHooks';

const HomePage = () => {
  const { data: products, isLoading: productsLoading } = useProducts({ limit: 6 });
  const { data: categories, isLoading: categoriesLoading } = useCategories();
  const { data: brandingSettings } = useBrandingSettings();

  return (
    <Box>
      {/* Hero Section */}
      <Box 
        sx={{ 
          bgcolor: 'primary.main', 
          color: 'primary.contrastText',
          py: 8,
          mb: 6,
          borderRadius: 2,
          backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))',
          backgroundSize: 'cover',
          backgroundPosition: 'center',
        }}
      >
        <Container maxWidth="md">
          <Typography variant="h2" component="h1" gutterBottom>
            {brandingSettings?.site_main_page_title || `Discover Natural Wonders`}
          </Typography>
          <Typography variant="h5" paragraph>
            {brandingSettings?.site_main_page_subtitle || `Unique rocks, bones, and sticks from around my backyards`}
          </Typography>
          <Button 
            variant="contained" 
            color="secondary" 
            size="large"
            component={RouterLink}
            to="/products"
            sx={{ mt: 2 }}
          >
            Shop Now
          </Button>
        </Container>
      </Box>

      {/* Categories Section */}
      <Typography variant="h4" component="h2" gutterBottom>
        Shop by Category
      </Typography>
      
      {!categoriesLoading && categories && (
        <Grid container spacing={3} mb={6}>
          {categories.map((category) => (
            <Grid item xs={12} sm={4} key={category.id}>
              <Card 
                component={RouterLink}
                to={`/products?category=${category.name}`}
                sx={{
                  height: '100%',
                  display: 'flex',
                  flexDirection: 'column',
                  textDecoration: 'none',
                  transition: '0.3s',
                  '&:hover': {
                    transform: 'scale(1.03)',
                    boxShadow: (theme) => theme.shadows[8],
                  },
                }}
              >
                <CardMedia
                  component="img"
                  height="200"
                  image={category.image_path ? imageUtils.getImageUrl(category.image_path) : "https://placehold.co/600x400/000000/FFFF"}
                  alt={category.name}
                />
                <CardContent>
                  <Typography gutterBottom variant="h5" component="div">
                    {category.name}
                  </Typography>
                  <Typography variant="body2" color="text.secondary">
                    {category.description}
                  </Typography>
                </CardContent>
              </Card>
            </Grid>
          ))}
        </Grid>
      )}

      {/* Featured Products Section */}
      <Typography variant="h4" component="h2" gutterBottom>
        Featured {brandingSettings?.product_title || `Products`}
      </Typography>
      {!productsLoading && products && (
        <Grid container spacing={3}>
          {products.slice(0, 6).map((product) => (
            <Grid item xs={12} sm={6} md={4} key={product.id}>
              <Card 
                component={RouterLink}
                to={`/products/${product.id}`}
                sx={{
                  height: '100%',
                  display: 'flex',
                  flexDirection: 'column',
                  textDecoration: 'none',
                  transition: '0.3s',
                  '&:hover': {
                    transform: 'scale(1.03)',
                    boxShadow: (theme) => theme.shadows[8],
                  },
                }}
              >
                <CardMedia
                  component="img"
                  height="200"
                  image={(product.images && product.images.length > 0) 
                    ? imageUtils.getImageUrl(product.images.find(img => img.isPrimary)?.path || product.images[0].path 
                   ) : "https://placehold.co/600x400/000000/FFFF"}
                  alt={product.name}
                />
                <CardContent sx={{ flexGrow: 1 }}>
                  <Typography gutterBottom variant="h6" component="div">
                    {product.name}
                  </Typography>
                  <Typography variant="body2" color="text.secondary" mb={2}>
                    {product.description.length > 100 
                      ? `${product.description.substring(0, 100)}...` 
                      : product.description}
                  </Typography>
                  <Typography variant="h6" color="primary">
                    ${parseFloat(product.price).toFixed(2)}
                  </Typography>
                </CardContent>
              </Card>
            </Grid>
          ))}
        </Grid>
      )}
      
      {/* Call to Action */}
      <Box 
        sx={{ 
          mt: 8,
          py: 6,
          textAlign: 'center',
          bgcolor: 'background.paper',
          borderRadius: 2,
        }}
      >
        <Typography variant="h4" component="h2" gutterBottom>
          {brandingSettings?.site_main_bottom_sting || `Ready to explore more?`}
        </Typography>
        <Button 
          variant="contained" 
          color="primary" 
          size="large"
          component={RouterLink}
          to="/products"
          sx={{ mt: 2 }}
        >
        View All {brandingSettings?.product_title || `Products`}
        </Button>
      </Box>
    </Box>
  );
};

export default HomePage;