"use client";
/* eslint-disable @next/next/no-img-element */

import gsap from "gsap";
import { useGSAP } from "@gsap/react";
import { useLayoutEffect, useRef, useState } from "react";

const GetInTouch = () => {
  const [firstChildWidth, setFirstChildWidth] = useState(0);
  const [secondChildWidth, setSecondChildWidth] = useState(0);

  const firstGridChildRef = useRef<HTMLDivElement>(null);
  const secondGridChildRef = useRef<HTMLDivElement>(null);

  useLayoutEffect(() => {
    const firstGridChildWidth = firstGridChildRef.current?.offsetWidth || 0;
    setFirstChildWidth(firstGridChildWidth);

    const secondGridChildWidth = secondGridChildRef.current?.offsetWidth || 0;
    setSecondChildWidth(secondGridChildWidth);
  }, []);

  useGSAP(() => {
    if (!firstChildWidth || !secondChildWidth) return;

    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: ".contact-wrapper",
        start: "top center",
        end: "top top",
      },
    });

    tl.fromTo(
      ".conatct-bg-image",
      { scale: 1 },
      { scale: 1.3, delay: 0.9, duration: 1.5, ease: "sine" }
    )
      .fromTo(
        ".contact-title-card",
        { x: `-${firstChildWidth}px` },
        { x: 0, duration: 1.3, ease: "sine.inOut" },
        ">"
      )
      .fromTo(
        ".contact-address-card",
        { x: `${secondChildWidth}px` },
        { x: 0, duration: 1.3, ease: "sine.inOut" },
        "<" // "<" makes it start **at the same time** as the previous animation
      )
      .to(
        ".conatct-bg-image",
        { scale: 1, delay: 0.8, duration: 1.7, ease: "sine.out" },
        ">" // ">" makes it start **immediately after** the previous animation
      );
  }, [firstChildWidth, secondChildWidth]);

  return (
    <section className="relative w-full overflow-hidden contact-wrapper lg:h-[105dvh] md:mb-48">
      {/* Background image */}
      <img
        src="/images/designo/contact/interior.jpg"
        alt="Background"
        className="absolute inset-0 w-full h-full object-cover object-center -z-10 conatct-bg-image"
      />

      {/* Content container */}
      <div className="relative grid grid-cols-1 md:grid-cols-12 gap-0 text-white">
        {/* Title card */}
        <div
          ref={firstGridChildRef}
          className="md:col-span-5 bg-black flex items-center justify-center h-80 lg:h-[105dvh] p-8 lg:p-12 contact-title-card"
          style={{ transform: `translateX(-${firstChildWidth}px)` }}
        >
          <div className="space-y-2">
            <h2 className="font-creato text-4xl lg:text-5xl font-thin leading-[1.2] ">
              Let&apos;s
            </h2>
            <h2 className="font-creato text-4xl lg:text-5xl font-normal text-center md:text-left pl-10 leading-[1.2]">
              Get In Touch
            </h2>
          </div>
        </div>

        {/* Address section */}
        <div
          ref={secondGridChildRef}
          className="md:col-span-7 bg-transparent flex justify-center items-center h-80 lg:h-[105dvh] p-8 md:p-12 relative contact-address-card"
          style={{ transform: `translateX(${secondChildWidth}px)` }}
        >
          {/* Black overlay */}
          <div className="absolute inset-0 bg-black/60 md:bg-black/75 -z-10"></div>
          <div className="space-y-4 md:space-y-6">
            <p className="md:tracking-wider leading-relaxed lg:leading-[1.2] font-thin text-[clamp(15px,3.5vw,17px)] md:text-[clamp(17px,2.6vw,19px)] lg:text-[clamp(18px,2.2vw,20px)] xl:text-[clamp(19px,2vw,21px)] 2xl:text-[clamp(20px,1.8vw,22px)]">
              <span className="md:tracking-wider font-thin text-[clamp(15px,3.5vw,17px)] md:text-[clamp(17px,2.6vw,19px)] lg:text-[clamp(18px,2.2vw,20px)] xl:text-[clamp(19px,2vw,21px)] 2xl:text-[clamp(20px,1.8vw,22px)]">
                Hotline:
              </span>{" "}
              01329-710 976
            </p>
            <p className="md:tracking-wider leading-relaxed lg:leading-[1.2] font-thin text-[clamp(15px,3.5vw,17px)] md:text-[clamp(17px,2.6vw,19px)] lg:text-[clamp(18px,2.2vw,20px)] xl:text-[clamp(19px,2vw,21px)] 2xl:text-[clamp(20px,1.8vw,22px)]">
              <span className="md:tracking-wider font-thin text-[clamp(15px,3.5vw,17px)] md:text-[clamp(17px,2.6vw,19px)] lg:text-[clamp(18px,2.2vw,20px)] xl:text-[clamp(19px,2vw,21px)] 2xl:text-[clamp(20px,1.8vw,22px)]">
                Email:
              </span>{" "}
              designo@navana-realestate.com
            </p>
            <p className="md:tracking-wider leading-relaxed lg:leading-[1.2] font-thin text-[clamp(15px,3.5vw,17px)] md:text-[clamp(17px,2.6vw,19px)] lg:text-[clamp(18px,2.2vw,20px)] xl:text-[clamp(19px,2vw,21px)] 2xl:text-[clamp(20px,1.8vw,22px)]">
              <span className="md:tracking-wider font-thin text-[clamp(15px,3.5vw,17px)] md:text-[clamp(17px,2.6vw,19px)] lg:text-[clamp(18px,2.2vw,20px)] xl:text-[clamp(19px,2vw,21px)] 2xl:text-[clamp(20px,1.8vw,22px)]">
                Address:
              </span>{" "}
              House #10/A, Road #90, Gulshan-02, Dhaka-1212
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

export default GetInTouch;