import { email, phone, customer } from "./asset";
import { motion } from "framer-motion";
import { useInView } from "react-intersection-observer";

const CustomerService = () => {
    const { ref: leftRef, inView: leftInView } = useInView({ triggerOnce: false, threshold: 0.2 });
    const { ref: rightRef, inView: rightInView } = useInView({ triggerOnce: false, threshold: 0.2 });

    const fadeInLeft = {
        hidden: { opacity: 0, x: -100 },
        visible: { opacity: 1, x: 0, transition: { duration: 0.8 } },
    };

    const fadeInRight = {
        hidden: { opacity: 0, x: 100 },
        visible: { opacity: 1, x: 0, transition: { duration: 0.8 } },
    };

    return (
        <section className="main-container mt-[180px] mb-16 md:mt-20 flex flex-col md:flex-row items-center px-5 py-10 max-w-7xl mx-auto md:mb-[100px] md:gap-12 xl:gap-20 2xl:px-20">
            {/* LEFT SECTION - Informasi */}
            <motion.div
                ref={leftRef}
                className="w-full md:w-[55%] h-auto text-left"
                initial="hidden"
                animate={leftInView ? "visible" : "hidden"}
                variants={fadeInLeft}
                key="left-content"
            >
                <div className="mb-5">
                    <h2 className="text-[#212121] text-[28px] md:text-[32px] font-[550] leading-[36px] md:leading-[48px]">
                        Kami Siap Membantu Bisnis Anda <br />
                        Lebih Maju!
                    </h2>
                </div>
                <p className="text-[#212121] leading-relaxed mb-6 text-[16px] md:text-[18px]">
                    Butuh informasi lebih lanjut tentang produk atau solusi kami? Tim Rekan AI siap menjawab pertanyaan Anda dengan cepat dan profesional.
                </p>
                <div className="flex flex-col gap-6">
                    <div className="flex items-start gap-6">
                        <img
                            src={email}
                            alt="Email Icon"
                            className="w-10 h-10 object-contain"
                        />
                        <div className="text-left">
                            <p className="text-sm text-[#212121] md:text-[18px]">
                                Kirim pertanyaan Anda ke{" "}
                                <strong className="text-[#5B59E8]">
                                    support@rekanai.com
                                </strong>{" "}
                                dan tim kami akan segera merespons.
                            </p>
                        </div>
                    </div>
                    <div className="flex items-start gap-6">
                        <img
                            src={phone}
                            alt="Phone Icon"
                            className="w-10 h-10 object-contain"
                        />
                        <div className="text-left text-[16px] md:text-[18px]">
                            <p className=" text-[#212121]">
                                Hubungi kami di{" "}
                                <strong className="text-[#5B59E8]">
                                    (+62) 123-4567-890
                                </strong>
                            </p>
                            <p className=" text-[#212121]">
                                (Senin - Jumat, 08:00 - 17:00 WIB).
                            </p>
                        </div>
                    </div>
                </div>
            </motion.div>

            {/* RIGHT SECTION - Gambar */}
            <motion.div
                ref={rightRef}
                className="w-full md:w-[45%] flex justify-center items-center"
                initial="hidden"
                animate={rightInView ? "visible" : "hidden"}
                variants={fadeInRight}
                key="right-content"
            >
                <img
                    src={customer}
                    alt="Customer Service"
                    className="w-[80%] md:w-full max-w-[450px] h-auto"
                />
            </motion.div>
        </section>
    );
};

export default CustomerService;
