import NavbarTransparent from "@comp/Navbar/NavbarTransparent";
import Image from "next/image";
import React, { useEffect, useState } from "react";
import family from "@img/family.png";
import hand from "@img/hand.png";
import home from "@img/home.png";
import estate from "@img/estate.png";
import money from "@img/money.png";
import vec2 from "@img/vector2.png";
import Link from "next/link";

const Header = () => {
  const [displayText, setDisplayText] = useState("");

  const text = "هر پرونده یک معمای حقوقی است که حل آن نیاز به تخصص دارد.";

  useEffect(() => {
    let index = 0;

    const interval = setInterval(() => {
      if (index <= text.length) {
        setDisplayText(text.substring(0, index));
        index++;
      } else {
        clearInterval(interval);
      }
    }, 50); // Show each character every 3 seconds

    return () => clearInterval(interval);
  }, [text]);

  return (
    <div className="bg-contact-us  pb-20">
      <div className=" pb-20">
        <NavbarTransparent />

        <div className="relative">
          <svg
            class="absolute hidden lg:block ltr:right-80 ltr:left-auto left-80 top-20 ltr:mr-6 ltr:ml-0 ml-6 z-10  opacity-10 mt-[110px]"
            width="38"
            height="51"
            viewBox="0 0 38 50"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M36.7412 1.94352L17.4742 6.5023L22.033 25.7693L2.76602 30.3281L7.3248 49.5951"
              stroke="white"
              stroke-width="5"
            ></path>
          </svg>
        </div>

        {/* 
          <div>
            <div className="flex justify-center xs:hidden lg:block">
              <div className="absolute mr-[-1100px] mt-[-200px]">
                <p className="mb-0 text-[300px] opacity-10 font-extrabold text-white ">
                  {", "}
                </p>
              </div>
            </div>
          </div> */}

        <div className="xs:mt-[70px] lg:mt-[100px] ">
          <div className="px-5">
            <h1 className="text-white font-bold text-center xs:text-[30px] lg:text-[40px]">
              گروه وکلای حامیان عدالت{" "}
            </h1>

            <p className="mb-0 text-base text-center text-gray-100 xs:text-[12px] lg:text-base rtl">
              {displayText}{" "}
            </p>
          </div>

          <div className="xs:w-11/12 lg:w-7/12 mx-auto xs:mt-[70px] lg:mt-20">
            <div className="grid xs:grid-cols-2 lg:grid-cols-5 gap-5">
              <div className="bg-white rounded-[35px] p-5 shadow-2xl group  tr03 cursor-pointer ">
                <div className="relative ">
                  <svg
                    class="absolute w-20 h-8 top-[-28px]  inset-x-0 mx-auto hidden  group-hover:block "
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 740 155.61"
                  >
                    <path
                      fill="#008ad5"
                      d="M532.54 85.81c69.58,-54.09 138.74,-82.63 207.46,-85.62l-740 0c73.71,3.21 147.93,35.81 222.63,97.82 28.75,23.85 45.98,38.3 83.91,49.54 20.26,6.01 41.42,8.74 63.46,8.18 28.55,0.73 55.61,-4.06 81.17,-14.35 36.28,-14.61 51.98,-32.73 81.37,-55.57z"
                    ></path>
                  </svg>
                  <span class="absolute w-[20px] h-[20px] rounded-full bg-orange block bg-white -top-[0px] inset-x-0 mx-auto  group-hover:transition-transform  group-hover:duration-500  group-hover:ease-in-out group-hover:transform-gpu  group-hover:-translate-y-8"></span>{" "}
                </div>
                <Link href={`/family-lawsuits`}>
                  <div className="relative ">
                    <div className="absolute mr-[-16px] mt-[-21px]">
                      <Image
                        src={vec2}
                        className="w-[300px] h-[300px] mx-auto opacity-70"
                        alt=""
                      />
                    </div>
                  </div>
                  <div className="mt-5 relative z-10">
                    <div>
                      <Image
                        src={family}
                        className="w-[80px] h-[80px] mx-auto"
                        alt="دعاوی خانوادگی آیکون"
                      />
                    </div>
                  </div>

                  <div className="mb-4 mt-8">
                    <h2 className="text-gray-500 text-center mb-0">
                      قبول دعاوی خانواده{" "}
                    </h2>
                  </div>
                </Link>
              </div>
              <div className="bg-white rounded-[35px] p-5 shadow-2xl group  tr03 cursor-pointer ">
                <div className="relative ">
                  <svg
                    class="absolute w-20 h-8 top-[-28px]  inset-x-0 mx-auto hidden  group-hover:block "
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 740 155.61"
                  >
                    <path
                      fill="#008ad5"
                      d="M532.54 85.81c69.58,-54.09 138.74,-82.63 207.46,-85.62l-740 0c73.71,3.21 147.93,35.81 222.63,97.82 28.75,23.85 45.98,38.3 83.91,49.54 20.26,6.01 41.42,8.74 63.46,8.18 28.55,0.73 55.61,-4.06 81.17,-14.35 36.28,-14.61 51.98,-32.73 81.37,-55.57z"
                    ></path>
                  </svg>
                  <span class="absolute w-[20px] h-[20px] rounded-full bg-orange block bg-white -top-[0px] inset-x-0 mx-auto  group-hover:transition-transform  group-hover:duration-500  group-hover:ease-in-out group-hover:transform-gpu  group-hover:-translate-y-8"></span>{" "}
                </div>

                <Link href={`/criminal-lawsuits`}>
                  <div className="relative ">
                    <div className="absolute mr-[-16px] mt-[-21px]">
                      <Image
                        src={vec2}
                        className="w-[300px] h-[300px] mx-auto opacity-70"
                        alt=""
                      />
                    </div>
                  </div>
                  <div className="mt-5 relative z-10">
                    <div>
                      <Image
                        src={hand}
                        alt="دعاوی کیفری آیکون"
                        className="w-[80px] h-[80px] mx-auto"
                      />
                    </div>
                  </div>

                  <div className="mb-4 mt-8">
                    <h2 className="text-gray-500 text-center mb-0">
                      قبول دعاوی کیفری{" "}
                    </h2>
                  </div>
                </Link>
              </div>
              <div className="bg-white rounded-[35px] p-5 shadow-2xl group  tr03 cursor-pointer ">
                <div className="relative ">
                  <svg
                    class="absolute w-20 h-8 top-[-28px]  inset-x-0 mx-auto hidden  group-hover:block "
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 740 155.61"
                  >
                    <path
                      fill="#008ad5"
                      d="M532.54 85.81c69.58,-54.09 138.74,-82.63 207.46,-85.62l-740 0c73.71,3.21 147.93,35.81 222.63,97.82 28.75,23.85 45.98,38.3 83.91,49.54 20.26,6.01 41.42,8.74 63.46,8.18 28.55,0.73 55.61,-4.06 81.17,-14.35 36.28,-14.61 51.98,-32.73 81.37,-55.57z"
                    ></path>
                  </svg>
                  <span class="absolute w-[20px] h-[20px] rounded-full bg-orange block bg-white -top-[0px] inset-x-0 mx-auto  group-hover:transition-transform  group-hover:duration-500  group-hover:ease-in-out group-hover:transform-gpu  group-hover:-translate-y-8"></span>{" "}
                </div>
                <Link href={`/property-claims`}>
                  <div className="relative ">
                    <div className="absolute mr-[-16px] mt-[-21px]">
                      <Image
                        src={vec2}
                        className="w-[300px] h-[300px] mx-auto opacity-70"
                        alt=""
                      />
                    </div>
                  </div>
                  <div className="mt-5 relative z-10">
                    <div>
                      <Image
                        src={home}
                        alt="دعاوی ملکی آیکون"
                        className="w-[80px] h-[80px] mx-auto"
                      />
                    </div>
                  </div>

                  <div className="mb-4 mt-8">
                    <h2 className="text-gray-500 text-center mb-0">
                      قبول دعاوی ملکی{" "}
                    </h2>
                  </div>
                </Link>
              </div>
              <div className="bg-white rounded-[35px] p-5 shadow-2xl group  tr03 cursor-pointer ">
                <div className="relative ">
                  <svg
                    class="absolute w-20 h-8 top-[-28px]  inset-x-0 mx-auto hidden  group-hover:block "
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 740 155.61"
                  >
                    <path
                      fill="#008ad5"
                      d="M532.54 85.81c69.58,-54.09 138.74,-82.63 207.46,-85.62l-740 0c73.71,3.21 147.93,35.81 222.63,97.82 28.75,23.85 45.98,38.3 83.91,49.54 20.26,6.01 41.42,8.74 63.46,8.18 28.55,0.73 55.61,-4.06 81.17,-14.35 36.28,-14.61 51.98,-32.73 81.37,-55.57z"
                    ></path>
                  </svg>
                  <span class="absolute w-[20px] h-[20px] rounded-full bg-orange block bg-white -top-[0px] inset-x-0 mx-auto  group-hover:transition-transform  group-hover:duration-500  group-hover:ease-in-out group-hover:transform-gpu  group-hover:-translate-y-8"></span>{" "}
                </div>

                <Link href={`/commercial-litigation`}>
                  <div className="relative ">
                    <div className="absolute mr-[-16px] mt-[-21px]">
                      <Image
                        src={vec2}
                        className="w-[300px] h-[300px] mx-auto opacity-70"
                        alt=""
                      />
                    </div>
                  </div>
                  <div className="mt-5 relative z-10">
                    <div>
                      <Image
                        src={estate}
                        className="w-[80px] h-[80px] mx-auto"
                        alt="دعاوی تجاری آیکون"
                      />
                    </div>
                  </div>

                  <div className="mb-4 mt-8">
                    <h2 className="text-gray-500 text-center mb-0">
                      قبول دعاوی تجاری
                    </h2>
                  </div>
                </Link>
              </div>
              <div className="bg-white rounded-[35px] p-5 shadow-2xl group  tr03 cursor-pointer xs:col-span-2 md:col-span-1 ">
                <div className="relative ">
                  <svg
                    class="absolute w-20 h-8 top-[-28px]  inset-x-0 mx-auto hidden  group-hover:block "
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 740 155.61"
                  >
                    <path
                      fill="#008ad5"
                      d="M532.54 85.81c69.58,-54.09 138.74,-82.63 207.46,-85.62l-740 0c73.71,3.21 147.93,35.81 222.63,97.82 28.75,23.85 45.98,38.3 83.91,49.54 20.26,6.01 41.42,8.74 63.46,8.18 28.55,0.73 55.61,-4.06 81.17,-14.35 36.28,-14.61 51.98,-32.73 81.37,-55.57z"
                    ></path>
                  </svg>
                  <span class="absolute w-[20px] h-[20px] rounded-full bg-orange block bg-white -top-[0px] inset-x-0 mx-auto  group-hover:transition-transform  group-hover:duration-500  group-hover:ease-in-out group-hover:transform-gpu  group-hover:-translate-y-8"></span>{" "}
                </div>
                <Link href={`/financial-claims`}>
                  <div className="relative ">
                    <div className="absolute mr-[-16px] mt-[-21px]">
                      <Image
                        src={vec2}
                        className="w-[300px] h-[300px] mx-auto opacity-70"
                        alt=""
                      />
                    </div>
                  </div>
                  <div className="mt-5 relative z-10">
                    <div>
                      <Image
                        src={money}
                        className="w-[80px] h-[80px] mx-auto"
                        alt="دعاوی مالی آیکون"
                      />
                    </div>
                  </div>

                  <div className="mb-4 mt-8">
                    <h2 className="text-gray-500 text-center mb-0">
                      قبول دعاوی مالی{" "}
                    </h2>
                  </div>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Header;
