import Link from "next/link";
import HomeTopSlider from "../components/Home/home-top-slider";
import WhoWeAre from "../components/Home/who-we-are";
// import Services from "../components/Home/services";
import Videos from "../components/Home/videos";
import HappyCustomers from "../components/Home/happy-customers";
//import Testimonials from "../components/Home/testimonials";
import CONFIG from "../config.json";
import moment from 'moment';
function Home({ posts }) {
  const needToParse = JSON.stringify(posts.data);
  const homepage = JSON.parse(JSON.parse(needToParse));
  return (
    <>
   
    <HomeTopSlider />
    <main className="site-main">
    <WhoWeAre/>
    {/* <Services/> */}
        <section className="home-section">
            <div className="container">
                <div className="heading-section aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                    <h2 className="home-section-title">Our Solutions</h2>
                </div>
                {homepage.services && homepage.services.length > 0 &&
                <div className="home-section-content">
                    <div className="row">
                    {
                     homepage.services.map(homeService =>(
                        <div className="col-md-6 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500" key={homeService.id.toString()}>
                            <div className="abt-org-col">
                                <div className="abt-org-col-text">
                                    <div className="sbc-banner">
                                          <Link href={`services/${homeService.nickname}`}  as={`services/${homeService.nickname}`}>
                                            <img className="img-fluid img-rounded" alt={homeService.title} src={CONFIG.FILE_URL+"large/"+homeService.image}/>
                                         </Link>
                                          
                                    </div>
                                    <h3 className="h3Service">{homeService.title}
                                    </h3>
                                    <div className="p-text service">{homeService.description.slice(0, 250) + (homeService.description.length > 250 ? "..." : "")}</div>
                                    <div className="res-circle">
                                    <div className="circle-icon">
                                    <Link href={'/services/'+homeService.nickname}><a><i className="fas fa-arrow-right"></i></a></Link>
                                    <Link href={'/services/'+homeService.nickname}><a className="circle-txt"> <p>Read more</p></a></Link>
                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>
                        ))}
                        
                    </div>
                </div>
                 } 
            </div>
            <div className="vl"></div>
        </section>
   
    <Videos/>
    <HappyCustomers />
    {/* <Testimonials /> */} 
    <section className="home-section home-section-alt">
            <div className="container">
                <div className="home-section-content">
                    <div className="row">
                        <div className="col-md-6 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                            <div className="abt-org-col">
                                <div className="heading-section">
                                    <h2 className="home-section-title">Clients Speak</h2>
                                    <p className="text-left p-text">“ {homepage.testimonials.testimonials.slice(0, 300) + (homepage.testimonials.testimonials.length > 300 ? "..." : "")}”
                                    </p>
                                    <p className="text-left testimonialspadding">- {homepage.testimonials.name} - {homepage.testimonials.location ? homepage.testimonials.location :''}</p>
                                </div>
                            </div>
                            <p>
                            <Link href='/clients-speak' className="link-view-ltne link-view-ltne-news">
                            <a className="link-view-ltne link-view-ltne-news">View All »</a>
                            </Link>
                              </p>
                        </div>

                        <div className="col-md-6 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                            <div className="abt-org-col">
                                <div className="heading-section">
                                    <h2 className="home-section-title">Blog</h2>
                                    {homepage.blog &&
                                    <div className="row">
                                        <div className="col-md-5">
                                            <div className="sbc-banner">
                                            <Link href={`blog/${homepage.blog.nickname}`} as={`blog/${homepage.blog.nickname}`}>
                                             <img className="img-fluid img-rounded" alt={homepage.blog.title} src={CONFIG.FILE_URL+"medium/"+homepage.blog.image}/>
                                            </Link>
                                               
                                            </div>
                                        </div>
                                        <div className="col-md-7">
                                            <p className="text-left">{moment(homepage.blog).format('DD, MMMM, YYYY')}</p>
                                            <h3 className="text-left blog-text">{homepage.blog.title ? homepage.blog.title :''}</h3>
                                            <p className="text-left p-text">{homepage.blog.title ? homepage.blog.title :''} {homepage.blog.description.slice(0, 300) + (homepage.blog.description.length > 300 ? "..." : "")}</p>
                                        </div>
                                    </div> 
                                   }
                                </div>
                            </div>
                            <p>
                            <Link href='https://www.formulaindia.com/blog/' className="link-view-ltne link-view-ltne-news">
                            <a className="link-view-ltne link-view-ltne-news">View All »</a>
                            </Link>
                              </p>
                        </div>

                    </div>
                </div>
            </div>
            <div className="vl"></div>
        </section>
        </main>
   </>
     
  )
}

export async function getStaticProps() {
    const res = await fetch(CONFIG.SERVER_URL+'getHomeTestimonials');
    const posts = await res.json();
   return {
      props: {
        posts,
      },
      revalidate: 10
    };
  }
  
  export default Home;