import Field from "@/app/component/Field"
import { Button } from "@mui/material"
import ArrowLeftC from "../icons/ArrowLeftC"

function Connect() {
    return (
        <div
            className="lg:min-w-[calc(50%_+_70px)] w-full lg:translate-x-[140px] bg-[#FFF] lg:p-[32px]
                shadow-[0px_0px_28.6px_0px_rgba(147,_147,_147,_0.25)] mt-8 p-[16px] sm:p-[21px] md:p-[27px]"
        >
            <div data-aos="zoom-in">
                <div className="flex flex-col justify-center items-center gap-[10px]">
                    <p className="text-[#3B3B3B] text-[16px] font-bold">با ما در ارتباط باشید</p>
                    <p className="text-[#525252] text-[14px] font-normal">نظرات و پیشنهادات خود را با ما در میان بگذارید.</p>
                </div>
                <div className="mt-[40px] flex flex-col gap-[20px]">
                    <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
                        <Field title='نام و نام خانوادگی' type='text' />
                        <Field title='شماره موبایل' type='text' />
                    </div>
                    <div>
                        <Field title='پیام شما...' type='text' multiline={true} />
                    </div>
                </div>
                <Button
                    variant="contained"
                    className="!mt-[40px] !py-[8px] !px-[34px] !flex !items-center !gap-[4px] !mr-auto"
                >
                    ارسال پیام
                    <ArrowLeftC />
                </Button>
            </div>
        </div>
    )
}

export default Connect