import {
  Box,
  Container,
  Flex,
  Heading,
  Text,
  Image,
  VStack,
  HStack,
  SimpleGrid,
  Center,
} from '@chakra-ui/react'

import Header from './components/header'
import Hero1 from './components/hero1'
import Hero2 from './components/hero2'
import Compare from './components/compare'
import Qa from './components/qa'
import Oil_info from './components/oil_info'
import Bestoil from './components/bestoil'

function App() {
  return (
    <>
      <Container maxW="100vw" p={0} m={0}>
        <Header />
        {/* Hero Section */}
        <Box position="relative">
          <Hero1 />
          <Box mt={{ base: "-5vw", sm: "-5vw", md: "-5vw", lg: "-5vw", xl: "-5vw" }}>
            <Hero2 />
          </Box>
          <Compare />
          {/* Q&A Section */}
          <Box mt={{ base: "-15vw", sm: "-15vw", md: "0vw", lg: "0vw", xl: "0vw" }}>
            <Qa />
          </Box>
          <Box>
            <Oil_info />
          </Box>
          <Box>
            <Bestoil />
          </Box>
        </Box>
        {/* Info Section */}


        {/* Footer */}
        <Box bg="#7BC142" color="white" py={6} w="full">
          <Box maxW="100%" px={0} mx={0} textAlign="center">
            <Text mb={2}>服務專線：29437810</Text>
            <Box w="150px" h="40px" bg="gray.300" borderRadius="md" mx="auto" />
          </Box>
        </Box>
      </Container>
    </>
  )
}

export default App