import AppContainer from './appContainer'
import Slider from './components/slider'
import News from './News'
import axios from 'axios'
import {
  MDBBtn,
  MDBCard,
  MDBCardBody,
  MDBContainer,
  MDBIcon,
} from 'mdb-react-ui-kit'
import Link from 'next/link'
import Paralax from './components/Paralax'
import Service from './components/service'
import { AppUrl } from '../lib/api'
import Accessgrid from './components/accessgrid'
import React from 'react'
import { SimpleGrid } from '@chakra-ui/react'
import SalesTeam from './components/SalesTeam'
import FadeIn from 'react-fade-in'
import Brands from './components/Brands'
import Sales from './page/sales'

export default function Home({ data_NEWS }) {
  return (
    <div>
      <style jsx>
        {`
          .fix-col {
            flex-direction: row;
          }
          @media screen and (max-width: 639px) {
            .fix-col {
              flex-direction: column;
            }
          }
        `}
      </style>
      <AppContainer>
        <Slider />
        <br />
        <div className='lg:mx-20 sm:mx-5'>
          <SimpleGrid spacing={15} columns={[1, 2, 3]}>
              <Link href={'/page/contact-us'}>
                <MDBCard className={'bg-neutral-100 fst-box hover:bg-neutral-200  cursor-pointer hover:shadow-2xl'}>
                  <MDBCardBody className={'flex justify-content-center'}>ارتباط با ما</MDBCardBody>
                </MDBCard>
              </Link>
            {/* <Link href={'/page/sales'}>
              <MDBCard className={'bg-neutral-100 fst-box hover:bg-neutral-200  cursor-pointer hover:shadow-2xl'}>
                <MDBCardBody className={'flex justify-content-center'}> مشاوره سرمایه گذاری </MDBCardBody>
              </MDBCard>
            </Link> */}
            <Link href={'/questions'}>
              <MDBCard className={'bg-neutral-100 fst-box hover:bg-neutral-200  cursor-pointer hover:shadow-2xl'}>
                <MDBCardBody className={'flex justify-content-center'}>سوالات متداول</MDBCardBody>
              </MDBCard>
            </Link>
            <Link href={'/stock-unit'}>
              <MDBCard className={'bg-neutral-100 fst-box hover:bg-neutral-200  cursor-pointer hover:shadow-2xl'}>
                <MDBCardBody className={'flex justify-content-center'}> واحد امور سهام</MDBCardBody>
              </MDBCard>
            </Link>
          </SimpleGrid>
          {/* <div className={'mt-5'}>
            <OnlineSales />
          </div> */}
        </div>

        <Accessgrid />

        <SalesTeam />
        <News data={data_NEWS}>
          <div style={{ cursor: 'pointer' }} className=' mt-3 d-flex  align-items-center justify-content-center'>
            <Link
              style={{ cursor: 'pointer' }}
              className={'text-white'}
              href={{ pathname: '/News', query: { list: 'list' } }}
            >
              <MDBBtn style={{ cursor: 'pointer' }} className='mx-2 RTL bg-dark shadow-1-strong' color=''>
                <MDBIcon className='ms-1 ' icon='plus' size='sm' />
                <span style={{ cursor: 'pointer !important' }} className={'text-white '}>
                  {' '}
                  بیشتر
                </span>
              </MDBBtn>
            </Link>
          </div>
        </News>

        <Service />
        {/*<Doctors>*/}
        {/*    <div  style={{cursor: 'pointer'}} className=" mt-3 d-flex align-items-center justify-content-center">*/}
        {/*        <Link style={{cursor: 'pointer'}} className={'text-white'} href={{ pathname: '/News', query: { list: 'list' } }}>*/}
        {/*            <MDBBtn style={{cursor: 'pointer'}} className='mx-2 RTL bg-dark shadow-1-strong' color=''>*/}
        {/*                <MDBIcon  className='ms-1 ' icon='plus' size='sm' />*/}
        {/*                <span style={{cursor: 'pointer !important'}} className={'text-white '}>  بیشتر ..</span>*/}
        {/*            </MDBBtn>*/}

        {/*        </Link>*/}
        {/*    </div>*/}
        {/*</Doctors>*/}
        <Paralax />
        <Brands />
        {/* <Connect /> */}
        <Sales />
        {/*phoneCall item */}

        {/*end phoneCall item */}
        <br />
      </AppContainer>
    </div>
  )
}

export const getServerSideProps = async context => {
  const allPostsData = await axios.get(AppUrl('news'))
  const data_NEWS = await allPostsData.data.slice(0, 6)

  return {
    props: { data_NEWS, fallback: false } // will be passed to the page component as props
  }
}