import React from 'react'
import ConsultingForm from '../ConsultingForm/ConsultingForm';
import { useRouter } from 'next/router';
import { useTranslations } from 'next-intl';
import SocialMediaButtons from '../SocialMediaButtonsIcon/SocialMediaButtonsIcon';
import { Link } from '@mui/material';
const Consultinencey = (props) => {
    const { locale } = useRouter();
    const t = useTranslations("Contact");
    return (
        <section className={`wpo-contact-section-s2 section-padding ${props.cnClass}`}>
            <div className="container">
                <div className="wpo-contact-section-wrapper">
                    <div className="row justify-content-center">
                        <div className="col col-xl-5 col-lg-6">
                            <div className="contact-info-wrap">
                                {
                                    locale === "ar" ? <>
                                        <div className="contact-info-title" style={{ position: 'relative' }}>
                                            <h3 style={{ position: 'relative' }}>
                                                {t("contact_title")}
                                                <span style={{
                                                    position: 'absolute',
                                                    right: 0,
                                                    bottom: 0,
                                                    width: '300px',
                                                    height: '2px',
                                                    background: '#cdb091',
                                                    display: 'block',
                                                    content: '""'
                                                }}></span>
                                            </h3>
                                            <p>{t("contact_desc")}</p>
                                        </div>
                                    </>
                                        :
                                        <div className="contact-info-title">
                                            <h3>{t("contact_title")}</h3>
                                            <p>{t("contact_desc")}</p>
                                        </div>
                                }
                                <div className="contact-info-item">
                                    <div className="contact-info-icon">
                                        <i className="fi flaticon-001-house"></i>
                                    </div>
                                    <div style={{ paddingRight: "1rem" }} className="contact-info-text">
                                        <h4>{t("contact_address")}</h4>
                                        <p style={{ fontSize: locale === "en" ? "14px" : "16px" }}>{t("contact_address_info1")}</p>
                                        <p style={{ fontSize: locale === "en" ? "14px" : "16px" }}>{t("contact_address_info2")}</p>
                                    </div>
                                </div>
                                <div className="contact-info-item">
                                    <div className="contact-info-icon">
                                        <i className="fi flaticon-002-open"></i>
                                    </div>
                                    <div style={{ paddingRight: "1rem" }} className="contact-info-text">
                                        <h4>{t("contact_email")}</h4>
                                        <Link href="mailto:info@dokkaneldraib.com" style={{ textDecoration: 'none' }}><p>{t("contact_email_info")}</p>
                                        </Link>
                                    </div>
                                </div>
                                <div className="contact-info-item">
                                    <div className="contact-info-icon">
                                        <i className="fi flaticon-003-headphone"></i>
                                    </div>
                                    <div style={{ paddingRight: "1rem" }} className="contact-info-text">
                                        <h4>{t("contact_phone")}</h4>
                                        <p>{t("contact_phone_num")}</p>
                                    </div>
                                </div>
                                <div className="contact-info-item">
                                    <div className="contact-info-icon">
                                        <i className="fi flaticon-004-clock"></i>
                                    </div>
                                    <div style={{ paddingRight: "1rem" }} className="contact-info-text">
                                        <h4>{t("contact_work_houres_title")}</h4>
                                        <p>{t("contact_work_houres_info")}</p>
                                    </div>
                                </div>
                                {/* <SocialMediaButtons /> */}
                            </div>
                        </div>
                        <div className="col col-xl-5 col-lg-6 col-md-12 col-12">
                            <div className="wpo-contact-form-area">
                                <div className="form-title">
                                    <span>{t("conttact_form_title")}</span>
                                    <h3>{t("conttact_form_description")}</h3>
                                </div>
                                <ConsultingForm />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    )
}

export default Consultinencey;