import Head from 'next/head'
import Link from "next/link";
import CONFIG from "../config.json";
function Testimonials({ posts }) {
    const needToParse = JSON.stringify(posts.data);
    const viewData = JSON.parse(JSON.parse(needToParse));
    const scrollPage = () => {
        window.scrollTo({ top: 900, behavior: 'smooth' })
      };
  return (
    <>
    <main className="site-main">
  <section className="site-hero overlay justify-content-center align-items-center" data-stellar-background-ratio="0.5">
        <div className="bg-section">
            <img src="/images/client-speak.jpg" alt="" title=""/>
            <h1 className="bg-text heading-employee">Customer Success</h1>
        </div>
        <div className="container">
            <div className="row site-hero-inner justify-content-center align-items-center">
                <div className="mouse-down" onClick={() => scrollPage()}>
                    <div className="chevron"></div>
                    <div className="chevron"></div>
                    <div className="chevron"></div>
                </div>
            </div>
        </div>
    </section>

    <section className="home-section-alt">
        <div className="container">
        {viewData && viewData.length > 0 &&
            <div className="row">
            {
            viewData.map(testimonial =>(
                <div className="col-md-6 mb-6 col-md-offset-2 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500" key={testimonial.id.toString()}>
                <i className="fas fa-quote-left"></i>
                    <div className="testimonial-bg">
                        <div  id="testimonial-slider">
                            <div className="testimonial">
                                <p className="description">
                                {//testimonial.testimonials.substring(0, 250)
                                testimonial.testimonials.slice(0, 250) + (testimonial.testimonials.length > 250 ? "..." : "")
                                }
                                </p>
                                <h3 className="title">{testimonial.name},&nbsp;</h3>
                                <span className="post"> {testimonial.location}</span>
                            </div>
                        </div>
                    </div>
                    <i className="fas fa-quote-right"></i>
                </div>
                ))}
            </div>
          } 
        </div>
        </section>
    
    <section className="home-section-alt1">
            <div className="container">
                <div className="home-section-content">
                    <div className="row bod-block">
                        <div className="col-md-12 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                            <div className="abt-org-col">
                                <div className="abt-org-col-text">
                                    <p className="businessNeed">Not sure which solution fits your business needs?</p>
                                        <button className="btn btn-primary contact"><Link href="/contact-us">Connect us</Link></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="vl"></div>
        </section>
        </main>
   </>
     
  )
}

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

  export default Testimonials;