"use client";

import React, { useEffect, useRef } from "react";

const ContactSection = () => {
    const sectionRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const observer = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        const elements = entry.target.querySelectorAll(".wow");
                        elements.forEach((el) => {
                            const htmlEl = el as HTMLElement;
                            const delay = htmlEl.dataset.wowDelay || "0ms";
                            setTimeout(() => {
                                htmlEl.classList.add("animated");

                                if (htmlEl.classList.contains("fadeInLeft")) {
                                    htmlEl.classList.add("fadeInLeft");
                                } else if (htmlEl.classList.contains("fadeInRight")) {
                                    htmlEl.classList.add("fadeInRight");
                                } else {
                                    htmlEl.classList.add("fadeInUp");
                                }

                                htmlEl.style.visibility = "visible";
                            }, parseInt(delay));
                        });
                        observer.unobserve(entry.target);
                    }
                });
            },
            { threshold: 0.1 }
        );

        if (sectionRef.current) {
            observer.observe(sectionRef.current);
        }

        return () => observer.disconnect();
    }, []);

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        // Handle form submission logic here
    };

    return (
        <section ref={sectionRef} className="contact-one">
            <div className="container">
                <div className="row">
                    <div className="col-lg-8">
                        <div className="contact-one__info wow fadeInLeft" data-wow-delay="100ms" style={{ visibility: "hidden" }}>
                            <div className="contact-one__info__icon">
                                <span className="fa-solid fa-headset"></span>
                            </div>
                            <h3 className="contact-one__info__title">
                                Let&apos;s call together just <span>contact</span> line
                            </h3>
                            <p className="contact-one__info__text">
                                <a href="tel:255225551">++255225551</a>, <a href="tel:6544144444">+6544144444</a>
                            </p>
                        </div>
                    </div>
                    <div className="col-lg-4">
                        <div className="contact-one__image wow fadeInRight" data-wow-delay="200ms" style={{ visibility: "hidden" }}>
                            <img src="https://tolaklaravel.bracketweb.com/assets/images/resources/contact-1-1.png" alt="Contact Support" />
                        </div>
                    </div>
                </div>
            </div>

            <div className="container contact-one__container wow fadeInUp" data-wow-delay="100ms" style={{ visibility: "hidden", marginTop: "-113px" }}>
                <div
                    className="contact-one__wrapper"
                    style={{ backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/shapes/contact-1-shape-1.png)" }}
                >
                    <div className="row">
                        <div className="col-lg-6">
                            <div className="contact-one__image-two">
                                <img src="https://tolaklaravel.bracketweb.com/assets/images/resources/contact-1-2.jpg" alt="Business Growth" />
                            </div>
                        </div>
                        <div className="col-lg-6">
                            <div className="contact-one__content">
                                <div className="sec-title text-left">
                                    <h6 className="sec-title__tagline">
                                        <span className="sec-title__tagline__left"></span>
                                        Get In Contact
                                        <span className="sec-title__tagline__right"></span>
                                    </h6>
                                    <h3 className="sec-title__title" style={{ color: "#fff" }}>
                                        Get free Business touch Customers me.
                                    </h3>
                                </div>
                                <p className="contact-one__content__text">
                                    Business tailored it design, management &amp; support services <br />business agency elit, sed do eiusmod tempor.
                                </p>
                                <form className="contact-one__form form-one" onSubmit={handleSubmit}>
                                    <div className="form-one__group">
                                        <div className="form-one__control">
                                            <input type="text" name="name" placeholder="Your Name" required />
                                        </div>
                                        <div className="form-one__control">
                                            <input type="email" name="email" placeholder="Email address" required />
                                        </div>
                                        <div className="form-one__control form-one__control--full">
                                            <textarea name="message" placeholder="Message" rows={6} required></textarea>
                                        </div>
                                        <div className="form-one__control form-one__control--full">
                                            <button type="submit" className="tolak-btn">
                                                <b>Send Request</b>
                                                <span></span>
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default ContactSection;