"use client";
import NavbarTransparent from "@comp/Navbar/NavbarTransparent";
import Image from "next/image";
import React, { useEffect, useState } from "react";
import PersianNumber from "@plug/PersianNumber";
import kam from "@img/kam.png";
import nad from "@img/nad.PNG";
import som from "@img/som.PNG";
import shim from "@img/sam.png";
import nasr from "@img/nasr.PNG";
import sogh from "@img/sogh.PNG";
import logo from "@img/logo.png";
import Footer from "@comp/Footer/page";
import Link from "next/link";

const LawyerPage = ({ data }) => {
  const [lawyerImg, setlawyerImg] = useState("");
  const selectLawyerImg = (id) => {
    switch (id) {
      case "477fed8d-5acd-4279-8bf7-9b1e83c6b4db":
        setlawyerImg("kam");
        break;

      case "ef6ab0ce-d815-4b19-934e-b22dbe0cd169":
        setlawyerImg("nad");
        break;

      case "2026e6ee-f414-4e0f-b25f-29664b13dd59":
        setlawyerImg("som");
        break;

      case "8ae19218-2d9d-42a6-b7b4-8db08ff86ce9":
        setlawyerImg("shim");
        break;

      case "0ae064c7-4f54-4656-b30e-7ef0b799c023":
        setlawyerImg("nasr");
        break;
      case "f8db20f6-0741-49dd-9eb2-22599bb4eb72":
        setlawyerImg("sogh");
        break;

      default:
        break;
    }
  };
  useEffect(() => {
    selectLawyerImg(data.id);
  }, []);
  //   console.log("ssssssssssssssssssssssssssalam", data.expertise.length);
  return (
    <div>
      {" "}
      <div className="bg-contact-us pb-10 ">
        <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 className="xs:mt-[60px] lg:mt-[100px] xs:p-0  lg:px-20  lg:flex rtl lg:justify-center ">
            <div className="xs:flex lg:block xs:justify-center ">
              <div className="lg:w-[150px] xs:w-[200px] lg:h-[150px] xs:h-200px] bg-gray-200 rounded-2xl overflow-hidden ">
                <div>
                  <Image
                    src={
                      lawyerImg == "kam"
                        ? kam
                        : lawyerImg == "nad"
                        ? nad
                        : lawyerImg == "shim"
                        ? shim
                        : lawyerImg == "som"
                        ? som
                        : lawyerImg == "sogh"
                        ? sogh
                        : lawyerImg == "nasr"
                        ? nasr
                        : logo
                    }
                    alt="بهترین وکیل پایه یک دادگستری تهران"
                    className="object-cover lg:w-[150px] xs:w-[200px] lg:h-[150px] xs:h-[200px]  "
                  />
                </div>
              </div>
            </div>
            <div className="px-5 lg:w-7/12 xs:mt-5 lg:mt-0 ">
              <h1 className="text-white font-bold text-right xs:text-[20px] lg:text-[40px]">
                {data.name}
              </h1>
              <p className="mb-0 text-right text-white">{data.description}</p>
            </div>
          </div>
        </div>
      </div>
      <div className="flex justify-center  z-10 sticky top-10">
        <div className="w-fit flex bg-white shadow-xl rounded-2xl absolute xs:p-1 lg:p-3 xs:top-[-28px] lg:top-[-40px] rtl">
          <div className="bg-secondary-900 lg:p-4 xs:p-3 rounded-2xl ">
            <p className="mb-0 font-medium xs:text-[12px] lg:text-base">
              تخصص ها
            </p>
          </div>
          <div className=" lg:p-4 xs:p-3 rounded-2xl ">
            <p className="mb-0 text-gray-500 xs:text-[12px] lg:text-base">
              خدمات وکیل
            </p>
          </div>
          <div className=" lg:p-4 xs:p-3 rounded-2xl ">
            <p className="mb-0 text-gray-500 xs:text-[12px] lg:text-base">
              رزرو مشاوره
            </p>
          </div>
          <div className=" lg:p-4 xs:p-3 rounded-2xl ">
            <p className="mb-0 text-gray-500 xs:text-[12px] lg:text-base">
              اطلاعات بیشتر
            </p>
          </div>
        </div>
      </div>
      <div className="xs:px-3 md:px-10 md:container md:mx-auto mb-10">
        {data?.expertise.length > 0 && (
          <div className="grid xs:grid-cold-1 md:grid-cols-1 gap-4 rtl xs:mt-10 lg:mt-20">
            <div className=" p-2 flex">
              <div className="flex flex-col justify-center items-center mt-5 absolute  ">
                <div className="w-5 h-20 rounded-full bg-secondary-900" />
              </div>

              <div className="mx-4 ">
                <div className="p-4 mt-2">
                  <p className="mb-0 text-gray-900  font-extralight text-sm ">
                    چرا حامیان عدالت
                  </p>
                  <h2 className="font-extrabold xs:text-xl lg:text-3xl text-gray-900   mt-2">
                    تخصص های {data.name}
                  </h2>
                </div>
              </div>
            </div>
            <div className="lg:pr-5  overflow-x-auto flex whitespace-nowrap hide-scrollBa">
              {data?.expertise.map((e, index) => (
                <h3
                  className="bg-gray-200 p-2 mx-2 rounded-2xl xs:text-sm lg:text-base"
                  key={index}
                >
                  {" "}
                  {e}{" "}
                </h3>
              ))}
            </div>
          </div>
        )}

        {data?.services_rendered.length > 0 && (
          <div className="grid xs:grid-cold-1 md:grid-cols-1 gap-4 rtl xs:mt-10 lg:mt-20">
            <div className=" p-2 flex">
              <div className="flex flex-col justify-center items-center mt-5 absolute  ">
                <div className="w-5 h-20 rounded-full bg-secondary-900" />
              </div>

              <div className="mx-4 ">
                <div className="p-4 mt-2">
                  <p className="mb-0 text-gray-900  font-extralight text-sm ">
                    چرا حامیان عدالت
                  </p>
                  <h2 className="font-extrabold xs:text-xl lg:text-3xl text-gray-900   mt-2">
                    خدمات ارائه شده وکیل{" "}
                  </h2>
                </div>
              </div>
            </div>

            {data.services_rendered.map((e, index) => (
              <div className="pr-5 flex" key={index}>
                <h3 className="font-medium mt-2 text-lg text-gray-600   ">
                  {e}
                </h3>
              </div>
            ))}
          </div>
        )}

        <div className="grid xs:grid-cold-1 md:grid-cols-1 gap-4 rtl xs:mt-10 lg:mt-20">
          <div className=" p-2 flex">
            <div className="flex flex-col justify-center items-center mt-5 absolute  ">
              <div className="w-5 h-20 rounded-full bg-secondary-900" />
            </div>

            <div className="mx-4 ">
              <div className="p-4 mt-2">
                <p className="mb-0 text-gray-900  font-extralight text-sm ">
                  چرا حامیان عدالت
                </p>
                <h2 className="font-extrabold xs:text-xl lg:text-3xl text-gray-900   mt-2">
                  رزرو زمان مشاوره{" "}
                </h2>
              </div>
            </div>
          </div>

          <div className="overflow-x-auto flex whitespace-nowrap hide-scrollBa ">
            <div className="bg-white rounded-2xl p-5 ">
              <h4 className=" text-right font-medium">
                رزرو نوبت مشاوره غیر حضوری
              </h4>

              <p className="mb-0 text-sm mt-5 text-center">
                نیم ساعت : تماس بگیرید
              </p>

              <p className="mb-0 text-sm mt-5 text-center">
                یک ساعت : تماس بگیرید
              </p>

              <div>
                <Link href={`tel:${process.env.NEXT_PUBLIC_PHONE_NUMBER}`}>
                  <button className="btn btn-outline-primary w-full mt-5 rounded-full py-2 text-sm">
                    {" "}
                    رزرو مشاوره
                  </button>
                </Link>
              </div>
            </div>

            <div className="bg-white rounded-2xl p-5 w-fit mx-4">
              <h4 className=" text-right font-medium">
                رزرو نوبت مشاوره حضوری
              </h4>

              <p className="mb-0 text-sm mt-5 text-center">
                نیم ساعت : تماس بگیرید
              </p>

              <p className="mb-0 text-sm mt-5 text-center">
                یک ساعت : تماس بگیرید
              </p>

              <div>
                <Link href={`tel:${process.env.NEXT_PUBLIC_PHONE_NUMBER}`}>
                  <button className="btn btn-outline-primary w-full mt-5 rounded-full py-2 text-sm">
                    {" "}
                    رزرو مشاوره
                  </button>
                </Link>
              </div>
            </div>
          </div>
        </div>

        <div className="grid xs:grid-cold-1 md:grid-cols-1 gap-4 rtl xs:mt-10 lg:mt-20">
          <div className=" p-2 flex">
            <div className="flex flex-col justify-center items-center mt-5 absolute  ">
              <div className="w-5 h-20 rounded-full bg-secondary-900" />
            </div>

            <div className="mx-4 ">
              <div className="p-4 mt-2">
                <p className="mb-0 text-gray-900  font-extralight text-sm ">
                  چرا حامیان عدالت
                </p>
                <h2 className="font-extrabold xs:text-xl lg:text-3xl text-gray-900   mt-2">
                  سایر اطلاعات{" "}
                </h2>
              </div>
            </div>
          </div>

          <div className="p-2 overflow-x-auto flex whitespace-nowrap hide-scrollBa ">
            {data?.other_info.map((e, index) => (
              <div className="flex mx-2" key={index}>
                <div>
                  <div className="bg-secondary-900  h-4 w-1 rounded-full mt-2"></div>
                </div>
                <p className="mb-0 text-right p-2 ">{e} </p>
              </div>
            ))}
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
};

export default LawyerPage;