import ArrowLeftSvg from "@/ui/components/icons/ArrowLeftSvg";
import TopMenu from "@/ui/components/top-menu/TopMenu";
import HeaderSlider from "@/ui/header-slider/HeaderSlider";
import Link from "next/link";
import {getDictionary} from "./dictionaries";
import InsurancesSlider from "@/ui/components/InsurancesSlider";
import ChevronLeftSvg from "@/ui/components/icons/ChevronLeftSvg";
import Image from "next/image";
import data from "@/data/doctors.json";
import faq from "@/data/faq.json";
export default async function Home({
  params,
}: {
  params: Promise<{lang: "en" | "fa"}>;
}) {
  const {lang} = await params;
  const dict = await getDictionary(lang); // en
  return (
    <div>
      <TopMenu />
      <div className=" w-full relative">
        <HeaderSlider />
      </div>
      <section className="mt-16 container">
        <div className="space-y-4 flex flex-col justify-center items-center">
          <h3 className="font-extrabold !text-2xl text-blue-primary">
            خدمات الکترونیکی بیمارستان شمال
          </h3>
          <p className="text-sm text-text-subtext">
            بروز و سریع در ارائه همه خدمات ممکن به شما بیماران عزیز
          </p>
        </div>
        <div className="flex items-center justify-between gap-x-10 my-10">
          <Link
            href={"/reservation"}
            className="rounded-xl flex flex-col items-center justify-center  border-[1px] border-neutral-200 p-5 flex-1 gap-y-5"
          >
            <span>
              <img
                src={"/select-doctor-reservation.png"}
                width={55}
                height={55}
              />
            </span>
            <div className="flex flex-col justify-center items-center gap-y-5">
              <span className="font-bold text-xl">جوابدهی آنلاین</span>
              <span className="text-sm text-text-subtext">
                دریافت نتیجه آزمایش بصورت آنلاین
              </span>
              <div className="w-full flex justify-center items-center">
                <div className="rounded-2xl  flex items-center justify-center gap-x-4 py-2 px-4">
                  <span className="text-blue-primary">
                    <ArrowLeftSvg size="24" />
                  </span>
                </div>
              </div>
            </div>
          </Link>
          <Link
            href={"/reservation"}
            className="rounded-xl flex flex-col items-center justify-center  border-[1px] border-neutral-200 p-5 flex-1 gap-y-5"
          >
            <span>
              <img
                src={"/select-doctor-reservation.png"}
                width={55}
                height={55}
              />
            </span>
            <div className="flex flex-col justify-center items-center gap-y-5">
              <span className="font-bold text-xl">برنامه کلینیک های تخصصی</span>
              <span className="text-sm text-text-subtext">
                مشاهده برنامه های کلینیک های ما
              </span>
              <div className="w-full flex justify-center items-center">
                <div className="rounded-2xl  flex items-center justify-center gap-x-4 py-2 px-4">
                  <span className="text-blue-primary">
                    <ArrowLeftSvg size="24" />
                  </span>
                </div>
              </div>
            </div>
          </Link>
          <Link
            href={"/reservation"}
            className="rounded-xl flex flex-col items-center justify-center  border-[1px] border-neutral-200 p-5 flex-1 gap-y-5"
          >
            <span>
              <img
                src={"/select-doctor-reservation.png"}
                width={55}
                height={55}
              />
            </span>
            <div className="flex flex-col justify-center items-center gap-y-5">
              <span className="font-bold text-xl">پورتال پرسنلی</span>
              <span className="text-sm text-text-subtext">
                ورود به سیستم پرسنلی و استفاده از همه امکانات
              </span>
              <div className="w-full flex justify-center items-center">
                <div className="rounded-2xl  flex items-center justify-center gap-x-4 py-2 px-4">
                  <span className="text-blue-primary">
                    <ArrowLeftSvg size="24" />
                  </span>
                </div>
              </div>
            </div>
          </Link>
          <Link
            href={"/reservation"}
            className="rounded-xl flex flex-col items-center justify-center  border-[1px] border-neutral-200 p-5 flex-1 gap-y-5"
          >
            <span>
              <img
                src={"/select-doctor-reservation.png"}
                width={55}
                height={55}
              />
            </span>
            <div className="flex flex-col justify-center items-center gap-y-5">
              <span className="font-bold text-xl">نوبت گیری آنلاین</span>
              <span className="text-sm text-text-subtext">
                دریافت نوبت آنلاین
              </span>
              <div className="w-full flex justify-center items-center">
                <div className="rounded-2xl  flex items-center justify-center gap-x-4 py-2 px-4">
                  <span className="text-blue-primary">
                    <ArrowLeftSvg size="24" />
                  </span>
                </div>
              </div>
            </div>
          </Link>
        </div>
        {/* <div className="w-full flex justify-center items-center">
          <Link
            href="/reservation"
            className="rounded-2xl bg-blue-primary flex items-center justify-center gap-x-4 py-2 px-4"
          >
            <span className="font-medium text-white">دریافت نوبت آنلاین</span>
            <span className="text-white">
              <ArrowLeftSvg size="14" />
            </span>
          </Link>
        </div> */}
      </section>
      <section className="container mt-24">
        <div className="bg-blue-primary py-10 px-2 rounded-xl">
          <div className="flex items-center justify-center w-full relative">
            <h3 className="font-extrabold !text-2xl text-white text-center self-center">
              بیمه های طرف قرارداد
            </h3>
            <div className="flex items-center justify-center absolute left-4">
              <Link
                href={"/"}
                className=" text-white py-4 w-fit flex items-center gap-x-4"
              >
                <span className="text-sm font-semibold">مشاهده همه</span>
                <span>
                  <ChevronLeftSvg size="14" />
                </span>
              </Link>
            </div>
          </div>
          <div className="mt-10">
            <InsurancesSlider />
          </div>
        </div>
      </section>
      {/* <section className="mt-16 container">
        <div className="space-y-4 flex flex-col justify-center items-center">
          <h3 className="font-bold text-2xl text-blue-primary">
            نوبت گیری در سه مرحله!
          </h3>
          <p>
            در سریعترین حالت ممکن و در سه مرحله نوبت خود را بصورت آنلاین دریافت
            کنید.
          </p>
        </div>
        <div className="flex items-center justify-between gap-x-10 my-10">
          <div className="rounded-xl flex items-center justify-start gap-x-4 custom-shadow p-6 flex-1">
            <span>
              <img
                src={"/select-doctor-reservation.png"}
                width={55}
                height={55}
              />
            </span>
            <div className="flex flex-col justify-start items-start gap-y-3">
              <span className="font-extrabold">انتخاب پزشک و تخصص</span>
              <span className="text-sm text-text-subtext">
                انتخاب تخصص، پزشک و مرکز درمانی مورد نظر.
              </span>
            </div>
          </div>
          <div className="rounded-xl flex items-center justify-start gap-x-4 custom-shadow p-6 flex-1">
            <span>
              <img
                src={"/select-doctor-reservation.png"}
                width={55}
                height={55}
              />
            </span>
            <div className="flex flex-col justify-start items-start gap-y-3">
              <span className="font-extrabold">انتخاب پزشک و تخصص</span>
              <span className="text-sm text-text-subtext">
                انتخاب تخصص، پزشک و مرکز درمانی مورد نظر.
              </span>
            </div>
          </div>
          <div className="rounded-xl flex items-center justify-start gap-x-4 custom-shadow p-6 flex-1">
            <span>
              <img
                src={"/select-doctor-reservation.png"}
                width={55}
                height={55}
                alt=""
              />
            </span>
            <div className="flex flex-col justify-start items-start gap-y-3">
              <span className="font-extrabold">انتخاب پزشک و تخصص</span>
              <span className="text-sm text-text-subtext">
                انتخاب تخصص، پزشک و مرکز درمانی مورد نظر.
              </span>
            </div>
          </div>
        </div>
        <div className="w-full flex justify-center items-center">
          <Link
            href="/reservation"
            className="rounded-2xl bg-blue-primary flex items-center justify-center gap-x-4 py-2 px-4"
          >
            <span className="font-medium text-white">دریافت نوبت آنلاین</span>
            <span className="text-white">
              <ArrowLeftSvg size="14" />
            </span>
          </Link>
        </div>
      </section> */}
      {/* <span className="inline-block h-full min-h-[1px] w-[200px] bg-blue-primary mx-auto"></span> */}

      <section className="mt-24 container">
        <div className="flex items-center justify-center w-full relative">
          <h3 className="font-extrabold !text-2xl text-blue-primary text-center self-center">
            پزشکان پرطرفدار
          </h3>
          <div className="flex items-center justify-center absolute left-4">
            <Link
              href={"/"}
              className=" text-blue-primary  w-fit  rounded-xl flex items-center gap-x-4"
            >
              <span className="text-sm font-semibold">مشاهده همه</span>
              <span>
                <ChevronLeftSvg size="14" />
              </span>
            </Link>
          </div>
        </div>
        <div className="flex  items-stretch h-[250px] lg:gap-y-5 gap-x-5 mt-10">
          {data.map((item) => (
            <div key={item.id} className="h-full rounded-xl overflow-hidden">
              <Link
                href={"/"}
                className="relative group  shadow-lg transition-transform duration-300 hover:scale-[1.02]"
              >
                <div className="absolute top-0 w-full h-full z-10 text-white px-4 py-6 bg-black/40 flex items-end">
                  <div className="space-y-1 flex flex-col">
                    <span className="text-lg font-normal">دکتر</span>

                    <span className="text-lg font-extrabold">
                      {item.fullname}
                    </span>
                    <span className="font-medium">{item.expertise}</span>
                  </div>
                </div>
                <Image
                  loading="lazy"
                  src={"/doctor.png"}
                  width={187}
                  height={250}
                  className="object-cover w-full h-[250px]"
                  alt=""
                />
              </Link>
            </div>
          ))}
        </div>
      </section>
      <section className="mt-24 container space-y-10">
        <div className="flex items-center justify-center w-full relative">
          <h3 className="font-extrabold !text-2xl text-blue-primary text-center self-center">
            اخبار و مقالات
          </h3>
          <div className="flex items-center justify-center absolute left-4">
            <Link
              href={"/"}
              className=" text-blue-primary py-4 w-fit flex items-center gap-x-4"
            >
              <span className="text-sm font-semibold">مشاهده همه</span>
              <span>
                <ChevronLeftSvg size="14" />
              </span>
            </Link>
          </div>
        </div>
        <div className="flex items-stretch justify-center gap-x-5">
          <Link
            href={""}
            className="bg-blue-primary text-white min-w-[100px] font-semibold text-center px-10 py-4 rounded-full"
          >
            بلاگ
          </Link>
          <Link
            href={"/"}
            className="border-[1px] border-neutral-200 text-neutral-600 min-w-[100px] text-center px-10 py-4 rounded-full"
          >
            اخبار
          </Link>
          <Link
            href={"/"}
            className="border-[1px] border-neutral-200 text-neutral-600 min-w-[100px] text-center px-10 py-4 rounded-full"
          >
            رویداد
          </Link>
          <Link
            href={"/"}
            className="border-[1px] border-neutral-200 text-neutral-600 min-w-[100px] text-center px-10 py-4 rounded-full"
          >
            آموزش
          </Link>
          <Link
            href={"/"}
            className="border-[1px] border-neutral-200 text-neutral-600 min-w-[100px] text-center px-10 py-4 rounded-full"
          >
            عکس و ویدئو
          </Link>
        </div>
        <div className="grid lg:grid-cols-4 sm:grid-cols-2 grid-cols-1 gap-x-4 ">
          <div className="col-span-1 h-full border-[1px] border-neutral-200 rounded-b-lg">
            <div className="relative rounded-t-lg overflow-hidden h-[200px]">
              <Image
                loading="lazy"
                src={"/1daad534bbd4cd30c325dde4746d01bcc3752e98.jpg"}
                fill
                alt=""
              />
            </div>
            <div className="flex flex-col w-full ">
              <h3 className="font-medium text-sm py-4 px-2">
                کشف همزاد کرونا در چین !
              </h3>
            </div>
          </div>
          <div className="col-span-1 h-full border-[1px] border-neutral-200 rounded-b-lg">
            <div className="relative rounded-t-lg overflow-hidden h-[200px]">
              <Image
                loading="lazy"
                src={"/1daad534bbd4cd30c325dde4746d01bcc3752e98.jpg"}
                fill
                alt=""
              />
            </div>
            <div className="flex flex-col w-full ">
              <h3 className="font-medium text-sm py-4 px-2">
                کشف همزاد کرونا در چین !
              </h3>
            </div>
          </div>
          <div className="col-span-1 h-full border-[1px] border-neutral-200 rounded-b-lg">
            <div className="relative rounded-t-lg overflow-hidden h-[200px]">
              <Image
                loading="lazy"
                src={"/1daad534bbd4cd30c325dde4746d01bcc3752e98.jpg"}
                fill
                alt=""
              />
            </div>
            <div className="flex flex-col w-full">
              <h3 className="font-medium text-sm py-4 px-2">
                کشف همزاد کرونا در چین !
              </h3>
            </div>
          </div>
          <div className="col-span-1 h-full border-[1px] border-neutral-200 rounded-b-lg">
            <div className="relative rounded-t-lg overflow-hidden h-[200px]">
              <Image
                loading="lazy"
                src={"/1daad534bbd4cd30c325dde4746d01bcc3752e98.jpg"}
                fill
                alt=""
                className="object-cover"
              />
            </div>
            <div className="flex flex-col w-full ">
              <h3 className="font-medium text-sm py-4 px-2">
                کشف همزاد کرونا در چین !
              </h3>
            </div>
          </div>
        </div>
      </section>
      <section className="container mt-24 mb-40">
        <div className="flex items-center justify-center w-full relative">
          <h3 className="font-extrabold !text-2xl text-blue-primary text-center ">
            سوالات متداول
          </h3>
        </div>
        <div className="grid grid-cols-2 gap-4 mt-16">
          {faq.map((item) => (
            <div
              key={item.id}
              className="col-span-1 bg-white rounded-lg p-4 border-[1px] border-neutral-200 flex items-center justify-between"
            >
              <div className="flex items-center justify-start gap-x-3">
                <span>
                  <svg
                    width="11"
                    height="19"
                    viewBox="0 0 11 19"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M4.05 13C4.05 11.65 4.17083 10.6792 4.4125 10.0875C4.65417 9.49583 5.16667 8.85 5.95 8.15C6.63333 7.55 7.15417 7.02917 7.5125 6.5875C7.87083 6.14583 8.05 5.64167 8.05 5.075C8.05 4.39167 7.82083 3.825 7.3625 3.375C6.90417 2.925 6.26667 2.7 5.45 2.7C4.6 2.7 3.95417 2.95833 3.5125 3.475C3.07083 3.99167 2.75833 4.51667 2.575 5.05L0 3.95C0.35 2.88333 0.991667 1.95833 1.925 1.175C2.85833 0.391667 4.03333 0 5.45 0C7.2 0 8.54583 0.4875 9.4875 1.4625C10.4292 2.4375 10.9 3.60833 10.9 4.975C10.9 5.80833 10.7208 6.52083 10.3625 7.1125C10.0042 7.70417 9.44167 8.375 8.675 9.125C7.85833 9.90833 7.3625 10.5042 7.1875 10.9125C7.0125 11.3208 6.925 12.0167 6.925 13H4.05ZM5.45 19C4.9 19 4.42917 18.8042 4.0375 18.4125C3.64583 18.0208 3.45 17.55 3.45 17C3.45 16.45 3.64583 15.9792 4.0375 15.5875C4.42917 15.1958 4.9 15 5.45 15C6 15 6.47083 15.1958 6.8625 15.5875C7.25417 15.9792 7.45 16.45 7.45 17C7.45 17.55 7.25417 18.0208 6.8625 18.4125C6.47083 18.8042 6 19 5.45 19Z"
                      fill="#043D82"
                    />
                  </svg>
                </span>
                <span className="font-medium text-blue-primary">
                  {item.question}
                </span>
              </div>
              <span className="-rotate-90 group-hover:rotate-90 transition-all duration-300 text-blue-primary">
                <ChevronLeftSvg size="10" />
              </span>
            </div>
          ))}
        </div>
      </section>
      <footer className="bg-blue-primary rounded-t-lg p-20 container ">
        <div className="grid lg:grid-cols-12 sm:grid-cols-2 grid-cols-1 w-full container gap-x-10">
          <div className="col-span-5 flex items-center justify-start gap-x-3">
            <div className="relative h-[140px] w-[140px]">
              <Image
                loading="lazy"
                src="/main-logo.png"
                fill
                alt="shomal hospital"
                style={{
                  color: "transparent",
                  fill: "red",
                  objectFit: "contain",
                }}
              />
            </div>
            <div className="space-y-5">
              <div className="flex items-center justify-start gap-x-1">
                <span>
                  <svg
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M11.9999 13.4304C13.723 13.4304 15.1199 12.0336 15.1199 10.3104C15.1199 8.5873 13.723 7.19043 11.9999 7.19043C10.2768 7.19043 8.87988 8.5873 8.87988 10.3104C8.87988 12.0336 10.2768 13.4304 11.9999 13.4304Z"
                      stroke="white"
                      strokeWidth="1.5"
                    />
                    <path
                      d="M3.6202 8.49C5.5902 -0.169998 18.4202 -0.159997 20.3802 8.5C21.5302 13.58 18.3702 17.88 15.6002 20.54C13.5902 22.48 10.4102 22.48 8.3902 20.54C5.6302 17.88 2.4702 13.57 3.6202 8.49Z"
                      stroke="white"
                      strokeWidth="1.5"
                    />
                  </svg>
                </span>
                <span className="text-white text-sm">
                  آدرس : آمل بلوار مدرس آفتاب 47 بیمارستان شمال
                </span>
              </div>
              <div className="flex items-center justify-start gap-x-1">
                <span>
                  <svg
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M21.97 18.33C21.97 18.69 21.89 19.06 21.72 19.42C21.55 19.78 21.33 20.12 21.04 20.44C20.55 20.98 20.01 21.37 19.4 21.62C18.8 21.87 18.15 22 17.45 22C16.43 22 15.34 21.76 14.19 21.27C13.04 20.78 11.89 20.12 10.75 19.29C9.6 18.45 8.51 17.52 7.47 16.49C6.44 15.45 5.51 14.36 4.68 13.22C3.86 12.08 3.2 10.94 2.72 9.81C2.24 8.67 2 7.58 2 6.54C2 5.86 2.12 5.21 2.36 4.61C2.6 4 2.98 3.44 3.51 2.94C4.15 2.31 4.85 2 5.59 2C5.87 2 6.15 2.06 6.4 2.18C6.66 2.3 6.89 2.48 7.07 2.74L9.39 6.01C9.57 6.26 9.7 6.49 9.79 6.71C9.88 6.92 9.93 7.13 9.93 7.32C9.93 7.56 9.86 7.8 9.72 8.03C9.59 8.26 9.4 8.5 9.16 8.74L8.4 9.53C8.29 9.64 8.24 9.77 8.24 9.93C8.24 10.01 8.25 10.08 8.27 10.16C8.3 10.24 8.33 10.3 8.35 10.36C8.53 10.69 8.84 11.12 9.28 11.64C9.73 12.16 10.21 12.69 10.73 13.22C11.27 13.75 11.79 14.24 12.32 14.69C12.84 15.13 13.27 15.43 13.61 15.61C13.66 15.63 13.72 15.66 13.79 15.69C13.87 15.72 13.95 15.73 14.04 15.73C14.21 15.73 14.34 15.67 14.45 15.56L15.21 14.81C15.46 14.56 15.7 14.37 15.93 14.25C16.16 14.11 16.39 14.04 16.64 14.04C16.83 14.04 17.03 14.08 17.25 14.17C17.47 14.26 17.7 14.39 17.95 14.56L21.26 16.91C21.52 17.09 21.7 17.3 21.81 17.55C21.91 17.8 21.97 18.05 21.97 18.33Z"
                      stroke="white"
                      strokeWidth="1.5"
                      strokeMiterlimit="10"
                    />
                  </svg>
                </span>
                <span className="text-white text-sm">تلفن پشتیبانی : 4492-0011 </span>
              </div>
              <div className="flex items-center justify-start gap-x-1">
                <span>
                  <svg
                    width="20"
                    height="16"
                    viewBox="0 0 20 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M2 16C1.45 16 0.979167 15.8042 0.5875 15.4125C0.195833 15.0208 0 14.55 0 14V2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0H18C18.55 0 19.0208 0.195833 19.4125 0.5875C19.8042 0.979167 20 1.45 20 2V14C20 14.55 19.8042 15.0208 19.4125 15.4125C19.0208 15.8042 18.55 16 18 16H2ZM10 9L2 4V14H18V4L10 9ZM10 7L18 2H2L10 7ZM2 4V2V14V4Z"
                      fill="#E8EAED"
                    />
                  </svg>
                </span>
                <a href="mailto:info@shomalhospital.com" className="text-white text-sm">
                  info@shomalhospital.com
                </a>
              </div>
            </div>
          </div>
          <div className="col-span-4 grid grid-cols-12">
            <div className="col-span-6 gap-y-4">
              <h4 className="text-white">لینک های مفید</h4>
              <ul className="space-y-4 text-neutral-300 transition-colors duration-300">
                <li className="mt-5">
                  <Link href="/" className="hover:text-white text-sm">
                    پزشکان
                  </Link>
                </li>
                <li>
                  <Link href="/" className="hover:text-white text-sm">
                    پزشکان
                  </Link>
                </li>
                <li>
                  <Link href="/" className="hover:text-white text-sm">
                    پزشکان
                  </Link>
                </li>
                <li>
                  <Link href="/" className="hover:text-white text-sm">
                    پزشکان
                  </Link>
                </li>
              </ul>
            </div>
            <div className="col-span-6 gap-y-4">
              <h4 className="text-white">لینک های مفید</h4>
              <ul className="space-y-4 text-neutral-300 transition-colors duration-300">
                <li className="mt-5">
                  <Link href="/" className="hover:text-white text-sm">
                    پزشکان
                  </Link>
                </li>
                <li>
                  <Link href="/" className="hover:text-white text-sm">
                    پزشکان
                  </Link>
                </li>
                <li>
                  <Link href="/" className="hover:text-white text-sm">
                    پزشکان
                  </Link>
                </li>
                <li>
                  <Link href="/" className="hover:text-white text-sm">
                    پزشکان
                  </Link>
                </li>
              </ul>
            </div>
          </div>
          <div className="col-span-3">
            <form>
              <div className="mb-4 text-white">
                <label htmlFor="">عضویت در خبرنامه</label>
              </div>
              <div className=" flex items-center gap-x-1">
                <input
                  type="text"
                  className="border-[1px] border-white rounded-lg p-3 min-w-xs text-sm font-normal text-white outline-0"
                  placeholder="آدرس ایمیل خود را وارد کنید"
                />
                <button className="bg-white rounded-lg text-sm h-[42px] px-4">
                  ارسال
                </button>
              </div>
            </form>
          </div>
        </div>
      </footer>
    </div>
  );
}
