import React from 'react';
import Link from 'next/link';

const Services = () => {
    let services = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod"
    return (
        <div className="services-area pb-70">
            <div className="container">
                <div className="section-title">
                    <h2>Our Consultation Services</h2>
                </div>

                <div className="row">
                    <div className="col-sm-6 col-lg-3">
                        <div className="service-item">
                            <div className="service-front">
                                <i className="icofont-doctor"></i>
                                <h3>Specialists</h3>
                                <p>{services}</p>
                            </div>
                            
                            <div className="service-end">
                                <i className="icofont-doctor"></i>
                                <h3>Specialists</h3>
                                <p>{services}</p>

                                <Link href="/service-details">
                                    <a>Read More</a>
                                </Link>
                            </div>
                        </div>
                    </div>

                    <div className="col-sm-6 col-lg-3">
                        <div className="service-item">
                            <div className="service-front">
                                <i className="icofont-prescription"></i>
                                <h3>Breast Feeding</h3>
                                <p>{services}</p>
                            </div>

                            <div className="service-end">
                                <i className="icofont-prescription"></i>
                                <h3>Breast Feeding</h3>
                                <p>{services}</p>

                                <Link href="/service-details">
                                    <a>Read More</a>
                                </Link>
                            </div>
                        </div>
                    </div>

                    <div className="col-sm-6 col-lg-3">
                        <div className="service-item">
                            <div className="service-front">
                                <i className="icofont-patient-file"></i>
                                <h3>Connect with Parents</h3>
                                <p>{services}</p>
                            </div>

                            <div className="service-end">
                                <i className="icofont-patient-file"></i>
                                <h3>Connect with Parents</h3>
                                <p>{services}</p>

                                <Link href="/service-details">
                                    <a>Read More</a>
                                </Link>
                            </div>
                        </div>
                    </div>

                    <div className="col-sm-6 col-lg-3">
                        <div className="service-item">
                            <div className="service-front">
                                <i className="icofont-tooth"></i>
                                <h3>Your Support Team</h3>
                                <p>{services}</p>
                            </div>

                            <div className="service-end">
                                <i className="icofont-tooth"></i>
                                <h3>Your Support Team</h3>
                                <p>{services}</p>

                                <Link href="/service-details">
                                    <a>Read More</a>
                                </Link>
                            </div>
                        </div>
                    </div>

                    <div className="col-sm-6 col-lg-3">
                        <div className="service-item">
                            <div className="service-front">
                                <i className="icofont-heart-beat-alt"></i>
                                <h3>Health Providers</h3>
                                <p>{services}</p>
                            </div>

                            <div className="service-end">
                                <i className="icofont-heart-beat-alt"></i>
                                <h3>Health Providers</h3>
                                <p>{services}</p>
                                
                                <Link href="/service-details">
                                    <a>Read More</a>
                                </Link>
                            </div>
                        </div>
                    </div>

                    <div className="col-sm-6 col-lg-3">
                        <div className="service-item">
                            <div className="service-front">
                                <i className="icofont-drug"></i>
                                <h3>Healthcare Plans</h3>
                                <p>{services}</p>
                            </div>

                            <div className="service-end">
                                <i className="icofont-drug"></i>
                                <h3>Healthcare Plans</h3>
                                <p>{services}</p>

                                <Link href="/service-details">
                                    <a>Read More</a>
                                </Link>
                            </div>
                        </div>
                    </div>

                    <div className="col-sm-6 col-lg-3">
                        <div className="service-item">
                            <div className="service-front">
                                <i className="icofont-dna-alt-1"></i>
                                <h3>Neurology</h3>
                                <p>{services}</p>
                            </div>

                            <div className="service-end">
                                <i className="icofont-dna-alt-1"></i>
                                <h3>Neurology</h3>
                                <p>{services}</p>

                                <Link href="/service-details">
                                    <a>Read More</a>
                                </Link>
                            </div>
                        </div>
                    </div>

                    <div className="col-sm-6 col-lg-3">
                        <div className="service-item">
                            <div className="service-front">
                                <i className="icofont-ambulance-cross"></i>
                                <h3>Brand Partnerships</h3>
                                <p>{services}</p>
                            </div>

                            <div className="service-end">
                                <i className="icofont-ambulance-cross"></i>
                                <h3>Brand Partnerships</h3>
                                <p>{services}</p>

                                <Link href="/service-details">
                                    <a>Read More</a>
                                </Link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Services;