src/pages/Home.jsx

import { useNavigate } from 'react-router-dom';
import { Button, Box } from '@mui/material';
import { styled } from '@mui/system';
import { fadeIn } from '../styles/animations';
import { useAuth } from '../hooks/useAuth';

const HeroSection = styled('section')(({ theme }) => ({
  minHeight: '90vh',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
  textAlign: 'center',
  padding: theme.spacing(4),
  position: 'relative',
  backgroundImage: 'url("/assets/hero-background.webp")',
  backgroundSize: 'cover',
  backgroundPosition: 'center',
  color: '#fff',
  '&::before': {
    content: '""',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    zIndex: 1,
  },
}));

const ContentContainer = styled(Box)(({ theme }) => ({
  position: 'relative',
  zIndex: 2,
  animation: `${fadeIn} 1.2s ease-out`,
  maxWidth: '800px',
}));

const Title = styled('h1')(({ theme }) => ({
  fontSize: '3.5rem',
  marginBottom: theme.spacing(2),
  fontWeight: 700,
  color: '#fff',
  textShadow: '0 2px 4px rgba(0, 0, 0, 0.3)',
}));

const Subtitle = styled('p')(({ theme }) => ({
  fontSize: '1.5rem',
  marginBottom: theme.spacing(4),
  lineHeight: 1.6,
  textShadow: '0 1px 2px rgba(0, 0, 0, 0.3)',
}));

const CTAButton = styled(Button)(({ theme }) => ({
  padding: theme.spacing(1.5, 4),
  fontSize: '1.1rem',
  borderRadius: '50px',
  fontWeight: 600,
  boxShadow: '0 4px 14px rgba(0, 0, 0, 0.25)',
  transition: 'all 0.3s ease',
  '&:hover': {
    transform: 'translateY(-3px)',
    boxShadow: '0 6px 20px rgba(0, 0, 0, 0.3)',
  }
}));

const Home = () => {
  const navigate = useNavigate();
  const { isAuthenticated } = useAuth();
  
  // Auto-redirect to dashboard removed to allow returning to homepage

  return (
    <HeroSection>
      <ContentContainer>
        <Title>EnlightenQalb</Title>
        <Subtitle>
          Explore the wisdom of Imam Al-Ghazali through modern semantic search technology.
          Discover relevant passages from "The Alchemy of Happiness" for your spiritual queries.
        </Subtitle>
        <CTAButton 
          variant="contained" 
          color="primary" 
          size="large"
          onClick={() => navigate(isAuthenticated ? '/dashboard' : '/login')}
        >
          Begin Your Journey
        </CTAButton>
      </ContentContainer>
    </HeroSection>
  );
};

export default Home;