import React from 'react';
import {
  Box,
  AppBar,
  Toolbar,
  Container
} from '@mui/material';
import Footer from './components/Footer.js';
import { Logo, CategoryList } from './components/header/index.js';


class PrerenderHome extends React.Component {
  render() {
    return React.createElement(
      Box,
      {
        sx: {
          display: 'flex',
          flexDirection: 'column',
          minHeight: '100vh',
          mb: 0,
          pb: 0,
          bgcolor: 'background.default'
        }
      },
      React.createElement(
        AppBar,
        { position: 'sticky', color: 'primary', elevation: 0, sx: { zIndex: 1100 } },
        React.createElement(
          Toolbar,
          { sx: { minHeight: 64, py: { xs: 0.5, sm: 0 } } },
          React.createElement(
            Container,
            { maxWidth: 'lg', sx: {
              display: 'flex',
              alignItems: 'center',
              px: { xs: 0, sm: 3 }
            } },
            React.createElement(
              Box,
              {
                sx: {
                  display: 'flex',
                  alignItems: 'center',
                  width: '100%',
                  flexDirection: { xs: 'column', sm: 'row' }
                }
              },
              React.createElement(
                Box,
                {
                  sx: {
                    display: 'flex',
                    alignItems: 'center',
                    width: '100%',
                    justifyContent: { xs: 'space-between', sm: 'flex-start' },
                    minHeight: { xs: 52, sm: 'auto' },
                    px: { xs: 0, sm: 0 }
                  }
                },
                React.createElement(Logo),
                // Invisible SearchBar placeholder on desktop
                React.createElement(
                  Box,
                  {
                    sx: {
                      display: { xs: 'none', sm: 'block' },
                      flexGrow: 1,
                      height: 41, // Reserve space for SearchBar
                      opacity: 0 // Invisible placeholder
                    }
                  }
                ),
                // Invisible ButtonGroup placeholder
                React.createElement(
                  Box,
                  {
                    sx: {
                      display: 'flex',
                      alignItems: { xs: 'flex-end', sm: 'center' },
                      transform: { xs: 'translateY(4px) translateX(9px)', sm: 'none' },
                      ml: { xs: 0, sm: 0 },
                      gap: { xs: 0.5, sm: 1 },
                      opacity: 0 // Invisible placeholder
                    }
                  },
                  // Placeholder for LanguageSwitcher (approx width)
                  React.createElement(
                    Box,
                    { sx: { width: 40, height: 40 } }
                  ),
                  // Placeholder for LoginComponent (approx width)
                  React.createElement(
                    Box,
                    { sx: { width: 40, height: 40 } }
                  ),
                  // Placeholder for Cart button (approx width)
                  React.createElement(
                    Box,
                    { sx: { width: 48, height: 40, ml: 1 } }
                  )
                )
              ),

              // Invisible SearchBar placeholder on mobile
              React.createElement(
                Box,
                {
                  sx: {
                    display: { xs: 'block', sm: 'none' },
                    width: '100%',
                    mt: { xs: 1, sm: 0 },
                    mb: { xs: 0.5, sm: 0 },
                    px: { xs: 0, sm: 0 },
                    height: 41, // Reserve space for SearchBar
                    opacity: 0 // Invisible placeholder
                  }
                }
              )
            )
          )
        ),
        React.createElement(CategoryList, { categoryId: 209, activeCategoryId: null })
      ),
      React.createElement(Footer)
    );
  }
}

export default PrerenderHome;