import LanguagesChanger from "@/ui/LanguageChanger";
import PageSlider from "@/ui/PageSlider";
import TopMenu from "@/ui/TopMenu";
import {toPersianNumber} from "@/utils/functions";
import Image from "next/image";
import Link from "next/link";
import React from "react";

export default async function Page({
  params,
}: {
  params: Promise<{lang: "en" | "fa" | "ar"}>;
}) {
  const {lang} = await params;

  return (
    <div>
      <div className="bg-blue-primary">
        <div className="py-2 container  flex items-center justify-between w-full">
          <div className="flex items-center justify-center gap-x-2 group">
            <span className="text-[#e6e6e6] group-hover:text-white">
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM12 13L4 8V18H20V8L12 13ZM12 11L20 6H4L12 11ZM4 8V6V18V8Z"
                  fill="currentColor"
                />
              </svg>
            </span>
            <span className="text-[#e6e6e6] group-hover:text-white text-sm font-medium">
              <a href={`mailto:info@shomalhospital.com`}>
                ارتباط با ما از طریق ایمیل
              </a>
            </span>
          </div>
          <div className="lg:flex hidden items-center justify-end gap-x-4 ">
            <a href="https://instagram.com/shomalhospital">
              <svg
                width="21"
                height="21"
                viewBox="0 0 25 25"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M8.12467 2.08337H16.8747C20.208 2.08337 22.9163 4.79171 22.9163 8.12504V16.875C22.9163 18.4774 22.2798 20.0141 21.1468 21.1471C20.0137 22.2802 18.477 22.9167 16.8747 22.9167H8.12467C4.79134 22.9167 2.08301 20.2084 2.08301 16.875V8.12504C2.08301 6.52269 2.71954 4.98597 3.85257 3.85294C4.9856 2.71991 6.52232 2.08337 8.12467 2.08337ZM7.91634 4.16671C6.92178 4.16671 5.96795 4.5618 5.26469 5.26506C4.56143 5.96832 4.16634 6.92215 4.16634 7.91671V17.0834C4.16634 19.1563 5.84342 20.8334 7.91634 20.8334H17.083C18.0776 20.8334 19.0314 20.4383 19.7347 19.735C20.4379 19.0318 20.833 18.0779 20.833 17.0834V7.91671C20.833 5.84379 19.1559 4.16671 17.083 4.16671H7.91634ZM17.9684 5.72921C18.3138 5.72921 18.6449 5.86639 18.8891 6.11058C19.1333 6.35477 19.2705 6.68596 19.2705 7.03129C19.2705 7.37662 19.1333 7.70781 18.8891 7.952C18.6449 8.19619 18.3138 8.33337 17.9684 8.33337C17.6231 8.33337 17.2919 8.19619 17.0477 7.952C16.8035 7.70781 16.6663 7.37662 16.6663 7.03129C16.6663 6.68596 16.8035 6.35477 17.0477 6.11058C17.2919 5.86639 17.6231 5.72921 17.9684 5.72921ZM12.4997 7.29171C13.881 7.29171 15.2058 7.84044 16.1825 8.81719C17.1593 9.79394 17.708 11.1187 17.708 12.5C17.708 13.8814 17.1593 15.2061 16.1825 16.1829C15.2058 17.1596 13.881 17.7084 12.4997 17.7084C11.1183 17.7084 9.79358 17.1596 8.81683 16.1829C7.84007 15.2061 7.29134 13.8814 7.29134 12.5C7.29134 11.1187 7.84007 9.79394 8.81683 8.81719C9.79358 7.84044 11.1183 7.29171 12.4997 7.29171ZM12.4997 9.37504C11.6709 9.37504 10.876 9.70428 10.29 10.2903C9.70391 10.8764 9.37467 11.6712 9.37467 12.5C9.37467 13.3288 9.70391 14.1237 10.29 14.7097C10.876 15.2958 11.6709 15.625 12.4997 15.625C13.3285 15.625 14.1233 15.2958 14.7094 14.7097C15.2954 14.1237 15.6247 13.3288 15.6247 12.5C15.6247 11.6712 15.2954 10.8764 14.7094 10.2903C14.1233 9.70428 13.3285 9.37504 12.4997 9.37504Z"
                  fill="white"
                />
              </svg>
            </a>
            <span className="text-white"> | </span>

            <LanguagesChanger lang={lang} />
          </div>
        </div>
      </div>
      <TopMenu lang={lang} />
      <PageSlider lang={lang} />
      
      <section className="lg:mb-40 mb-10 lg:mt-10 mt-4 container ">
        <div className=" lg:py-16 p-2">
          <h3 className="lg:text-[2.5em] text-3xl font-black text-blue-primary text-center relative before:absolute before:w-[100px] before:block before:bg-secondary before:-bottom-5 before:h-[2px] before:left-[50%] before:translate-x-[-50%] ">
            خدمات آنلاین بیمارستان شمال
          </h3>

          <div className="grid grid-cols-3 mt-20 gap-8">
            <div className="col-span-1 bg-[#F8F9FA] rounded-4xl px-4 py-8 flex flex-col justify-start items-center gap-y-4 text-secondary group hover:outline-2 cursor-pointer hover:outline-secondary/40">
              <span className="w-[100px] h-[100px] overflow-hidden object-cover">
                <img
                  src={"/svg/online-response.png"}
                  className="object-cover"
                  alt="angio"
                />
              </span>
              <span className="text-blue-primary text-2xl font-medium">
                جوابدهی آنلاین
              </span>
              <p className="text-[#333] text-sm">
                دریافت نتیجه آزمایش به صورت آنلاین
              </p>
            </div>
            <div className="col-span-1 bg-[#F8F9FA] rounded-4xl px-4 py-8 flex flex-col justify-start items-center gap-y-4 text-secondary">
              <span className="w-[100px] h-[100px] overflow-hidden object-cover">
                <img
                  src={"/svg/clinic-calander.png"}
                  className="object-cover"
                  alt="angio"
                />
              </span>
              <span className="text-blue-primary text-2xl font-medium">
                برنامه کلینیک های تخصصی
              </span>
              <p className="text-[#333] text-sm">
                مشاهده ساعت کاری پزشکان کلینیک
              </p>
            </div>
            {/* <div className="col-span-1 bg-[#F8F9FA] rounded-4xl px-4 py-8 flex flex-col justify-start items-center gap-y-4 text-secondary">
              <svg
                stroke="currentColor"
                fill="none"
                strokeWidth="1.5"
                viewBox="0 0 24 24"
                aria-hidden="true"
                height="66px"
                width="66px"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z"
                ></path>
              </svg>
              <span className="text-blue-primary text-2xl font-medium">
                پرتال پرسنلی
              </span>
              <p className="text-[#333] text-sm">
                ورود به سیستم و استفاده از همه امکانات
              </p>
            </div> */}
            <div className="col-span-1 bg-[#F8F9FA] rounded-4xl px-4 py-8 flex flex-col justify-start items-center gap-y-4 text-secondary">
              <span className="w-[100px] h-[100px] overflow-hidden object-cover">
                <img
                  src={"/svg/online-reservation.png"}
                  className="object-cover"
                  alt="angio"
                />
              </span>
              <span className="text-blue-primary text-2xl font-medium">
                نوبت آنلاین
              </span>
              <p className="text-[#333] text-sm">دریافت نوبت به صورت آنلاین</p>
            </div>
          </div>
        </div>
      </section>

      <section className="lg:mb-40 mb-10 lg:mt-10 mt-4 container ">
        <div className="rounded-4xl lg:py-16 p-2 grid grid-cols-2 gap-x-10">
          <div className="col-span-1">
            <h3 className="text-2xl font-black mb-10">
              بیمارستان شمال : هستیم برای سلامتی شما ...
            </h3>
            <p className="leading-9 text-[#333] pl-10">
              بیمارستان تخصصی و فوق‌تخصصی شمال، در سال ۱۳۹۲ با هدف ارتقای سطح
              تندرستی و خدمات درمانی در شهرستان آمل و مناطق شمال کشور، تأسیس شد.
              این مرکز به‌عنوان یکی از نخستین بیمارستان‌های خصوصی مدرن استان
              مازندران، با بهره‌گیری از ۱۵۰ تخت بستری و زیرساخت‌های استاندارد،
              فعالیت خود را آغاز کرد. در طول یک دهه فعالیت، بیمارستان شمال با
              توسعه مداوم بخش‌های تخصصی و پاراکلینیکی، جذب تیم‌های پزشکی مجرب، و
              تجهیز به فناوری‌های نوین، توانسته است به یکی از مراکز شاخص درمانی
              منطقه تبدیل شود.
            </p>
          </div>
          <div className="col-span-1 grid grid-cols-4 grid-rows-2 gap-6">
            <div className="row-span-1 col-span-1 bg-[#F8F9FA] p-4 rounded-4xl flex flex-col justify-center  items-center gap-y-4 text-secondary">
              <span className="w-[60px] h-[60px] overflow-hidden object-cover">
                <img
                  src={"/svg/angio.svg"}
                  className="object-cover"
                  alt="angio"
                />
              </span>
              <span className="text-blue-primary font-medium text-sm">
                آنژیوگرافی
              </span>
            </div>
            <div className="row-span-1 col-span-1 bg-[#F8F9FA] p-4 rounded-4xl flex flex-col justify-center  items-center gap-y-4 text-secondary">
              <span className="w-[60px] h-[60px] overflow-hidden object-cover">
                <img
                  src={"/svg/surgery.svg"}
                  className="object-cover"
                  alt="angio"
                />
              </span>
              <span className="text-blue-primary font-medium text-sm">
                اتاق عمل جنرال
              </span>
            </div>
            <div className="row-span-1 col-span-1 bg-[#F8F9FA] p-4 rounded-4xl flex flex-col justify-center  items-center gap-y-4 text-secondary">
              <span className="w-[60px] h-[60px] overflow-hidden object-cover">
                <img
                  src={"/svg/endoscope.svg"}
                  className="object-cover"
                  alt="angio"
                />
              </span>
              <span className="text-blue-primary font-medium text-sm">
                اسکوپی
              </span>
            </div>
            <div className="row-span-1 col-span-1 bg-[#F8F9FA] p-4 rounded-4xl flex flex-col justify-center  items-center gap-y-4 text-secondary">
              <span className="w-[60px] h-[60px] overflow-hidden object-cover">
                <img
                  src={"/svg/mri.svg"}
                  className="object-cover"
                  alt="angio"
                />
              </span>
              <span className="text-blue-primary font-medium text-sm">
                مرکز تصویربرداری
              </span>
            </div>
            <div className="row-span-1 col-span-1 bg-[#F8F9FA] p-4 rounded-4xl flex flex-col justify-center  items-center gap-y-4 text-black">
              <span className="w-[60px] h-[60px] overflow-hidden object-cover">
                <img
                  src={"/svg/ambulance.svg"}
                  className="object-cover"
                  alt="angio"
                />
              </span>
              <span className="text-blue-primary font-medium text-sm">
                اورژانس
              </span>
            </div>
            <div className="row-span-1 col-span-1 bg-[#F8F9FA] p-4 rounded-4xl flex flex-col justify-center  items-center gap-y-4 text-secondary">
              <span className="w-[60px] h-[60px] overflow-hidden object-cover">
                <img
                  src={"/svg/heart-surgery-room.svg"}
                  className="object-cover"
                  alt="angio"
                />
              </span>
              <span className="text-blue-primary font-medium text-sm">
                اتاق عمل قلب
              </span>
            </div>
            <div className="row-span-1 col-span-1 bg-[#F8F9FA] p-4 rounded-4xl flex flex-col justify-center  items-center gap-y-4 text-secondary">
              <span className="w-[60px] h-[60px] overflow-hidden object-cover">
                <img
                  src={"/svg/microscope.svg"}
                  className="object-cover"
                  alt="angio"
                />
              </span>
              <span className="text-blue-primary font-medium text-sm">
                آزمایشگاه و پاتولوژی
              </span>
            </div>
            <div className="row-span-1 col-span-1 bg-[#F8F9FA] p-4 rounded-4xl flex flex-col justify-center  items-center gap-y-4 text-secondary">
              <span className="w-[60px] h-[60px] overflow-hidden object-cover">
                <img
                  src={"/svg/sonography.svg"}
                  className="object-cover"
                  alt="angio"
                />
              </span>

              <span className="text-blue-primary font-medium text-sm">
                بلوک زایمان
              </span>
            </div>
          </div>
        </div>
      </section>

      <section className="lg:mb-40 mb-10 lg:mt-10 mt-4 container ">
        <div className="bg-[#F8F9FA] rounded-4xl lg:px-40 lg:py-16 p-2">
          <h3 className="mb-20 lg:text-[2.5em] text-3xl font-black text-blue-primary text-center relative before:absolute before:w-[100px] before:block before:bg-secondary before:-bottom-5 before:h-[2px] before:left-[50%] before:translate-x-[-50%] ">
            خدمات پاراکلینیکی و تصویربرداری
          </h3>
          <div
            className={`${
              lang === "en" ? "text-left" : "text-right"
            } lg:text-[1.2rem] leading-relaxed text-[#454547]`}
          >
            ما خدمات تشخیصی و پاراکلینیکی را با استفاده از تجهیزات روز دنیا و
            تیم متخصصین مجرب با هدف خدمات دقیق، سریع و مطمئن به صورت 24 ساعته در
            فرآیند تشخیص و درمان ارائه می نمائیم. این خدمات شامل :
            <ul className="mt-10 list-disc list-inside leading-10">
              <li>سونوگرافی</li>
              <li>سی تی اسکن</li>
              <li>رادیولوژی</li>
              <li>ماموگرافی</li>
              <li>سی تی آنژیو</li>
              <li>آندوسکوپی</li>
              <li>کولونوسکوپی</li>
              <li>سنگ شکن</li>
              <li>توانبخشی</li>
              <li>OPG</li>
              <li> و ...</li>
            </ul>
          </div>
        </div>
      </section>

      <section className="lg:mb-40 mb-10 lg:mt-10 mt-4 container ">
        <div className="lg:px-40 lg:py-16 p-2">
          <h3 className="mb-20 lg:text-[2.5em] text-3xl font-black text-blue-primary text-center relative before:absolute before:w-[100px] before:block before:bg-secondary before:-bottom-5 before:h-[2px] before:left-[50%] before:translate-x-[-50%] ">
            کلینیک های تخصصی
          </h3>
          <div className="grid grid-cols-4 grid-rows-2 gap-8">
            <div className="row-span-1 col-span-1 bg-[#F8F9FA] transition-all p-4 rounded-4xl flex flex-col justify-center  items-center gap-y-4 text-secondary group hover:shadow cursor-pointer hover:shadow-secondary/40">
              <span className="w-[100px] h-[100px] overflow-hidden object-cover">
                <img
                  src={"/svg/heart-cardio.png"}
                  className="object-cover"
                  alt="angio"
                />
              </span>
              <span className="text-blue-primary font-medium text-lg group-hover:text-secondary ">
                قلب و عروق
              </span>
            </div>
            <div className="row-span-1 col-span-1 bg-[#F8F9FA] p-4 rounded-4xl flex flex-col justify-center  items-center gap-y-4 text-secondary group hover:shadow cursor-pointer hover:shadow-secondary/40">
              <span className="w-[100px] h-[100px] overflow-hidden object-cover">
                <img
                  src={"/svg/prenatal-care.png"}
                  className="object-cover"
                  alt="angio"
                />
              </span>
              <span className="text-blue-primary font-medium text-lg">
                بارداری
              </span>
            </div>
            <div className="row-span-1 col-span-1 bg-[#F8F9FA] p-4 rounded-4xl flex flex-col justify-center  items-center gap-y-4 text-secondary group hover:shadow cursor-pointer hover:shadow-secondary/40">
              <span className="w-[100px] h-[100px] overflow-hidden object-cover">
                <img
                  src={"/svg/dental-clinic.png"}
                  className="object-cover"
                  alt="angio"
                />
              </span>
              <span className="text-blue-primary font-medium text-lg">
                دندانپزشکی
              </span>
            </div>
            <div className="row-span-1 col-span-1 bg-[#F8F9FA] p-4 rounded-4xl flex flex-col justify-center  items-center gap-y-4 text-secondary group hover:shadow cursor-pointer hover:shadow-secondary/40">
              <span className="w-[100px] h-[100px] overflow-hidden object-cover">
                <img
                  src={"/svg/ortopedi.png"}
                  className="object-cover"
                  alt="angio"
                />
              </span>
              <span className="text-blue-primary font-medium text-lg">
                ارتوپدی
              </span>
            </div>
            <div className="row-span-1 col-span-1 bg-[#F8F9FA] p-4 rounded-4xl flex flex-col justify-center  items-center gap-y-4 text-secondary group hover:shadow cursor-pointer hover:shadow-secondary/40">
              <span className="w-[100px] h-[100px] overflow-hidden object-cover">
                <img
                  src={"/svg/digestion.png"}
                  className="object-cover"
                  alt="angio"
                />
              </span>
              <span className="text-blue-primary font-medium text-lg">
                گوارش
              </span>
            </div>
            <div className="row-span-1 col-span-1 bg-[#F8F9FA] p-4 rounded-4xl flex flex-col justify-center  items-center gap-y-4 text-secondary group hover:shadow cursor-pointer hover:shadow-secondary/40">
              <span className="w-[100px] h-[100px] overflow-hidden object-cover">
                <img
                  src={"/svg/beauty.png"}
                  className="object-cover"
                  alt="angio"
                />
              </span>
              <span className="text-blue-primary font-medium text-lg">
                زیبایی و جراحی پلاستیک
              </span>
            </div>
            <div className="row-span-1 col-span-1 bg-[#F8F9FA] p-4 rounded-4xl flex flex-col justify-center  items-center gap-y-4 text-secondary group hover:shadow cursor-pointer hover:shadow-secondary/40">
              <span className="w-[100px] h-[100px] overflow-hidden object-cover">
                <img
                  src={"/svg/ent.png"}
                  className="object-cover"
                  alt="angio"
                />
              </span>
              <span className="text-blue-primary font-medium text-lg">
                گوش و حلق و بینی
              </span>
            </div>
            <div className="row-span-1 col-span-1 bg-[#F8F9FA] p-4 rounded-4xl flex flex-col justify-center  items-center gap-y-4 text-secondary group hover:shadow cursor-pointer hover:shadow-secondary/40">
              <span className="w-[100px] h-[100px] overflow-hidden object-cover">
                <img
                  src={"/svg/general.png"}
                  className="object-cover"
                  alt="angio"
                />
              </span>
              <span className="text-blue-primary font-medium text-lg">
                داخلی
              </span>
            </div>
            <div className="row-span-1 col-span-4 flex flex-col justify-center  items-center gap-y-4 text-secondary">
              <div className="flex items-center justify-center mt-10">
                <Link
                  href="/reservation"
                  className="!bg-secondary !text-white lg:!w-[250px] !w-full !h-[57px] !rounded-[15px] !text-[20px] !font-medium flex items-center justify-center"
                >
                  مشاهده همه کلینیک ها
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="lg:mb-40 mb-10 lg:mt-10 mt-4 container ">
        <div className="bg-[#F8F9FA] rounded-4xl lg:px-40 lg:py-16 p-2">
          <h3 className="lg:text-[2.5em] text-3xl font-black text-blue-primary text-center relative before:absolute before:w-[100px] before:block before:bg-secondary before:-bottom-5 before:h-[2px] before:left-[50%] before:translate-x-[-50%] ">
            بیمه های طرف قرارداد
          </h3>
          <div className="grid grid-cols-7 mt-20 gap-x-7">
            <div className="col-span-1 bg-white p-4 rounded-4xl flex items-center justify-center">
              <div className="w-[100px] h-[100px] relative">
                <Image src={"/bimeh-pasargad.png"} fill alt="بیمه پاسارگارد" />
              </div>
            </div>
            <div className="col-span-1 bg-white p-4 rounded-4xl flex items-center justify-center">
              <div className="w-[100px] h-[100px] relative">
                <Image src={"/bank-melat.png"} fill alt="بیمه پاسارگارد" />
              </div>
            </div>
            <div className="col-span-1 bg-white p-4 rounded-4xl flex items-center justify-center">
              <div className="w-[100px] h-[100px] relative">
                <Image src={"/bimeh-novin.png"} fill alt="بیمه پاسارگارد" />
              </div>
            </div>
            <div className="col-span-1 bg-white p-4 rounded-4xl flex items-center justify-center">
              <div className="w-[80px] h-[100px] relative">
                <Image src={"/bimeh-ma.png"} fill alt="بیمه پاسارگارد" />
              </div>
            </div>
            <div className="col-span-1 bg-white p-4 rounded-4xl flex items-center justify-center">
              <div className="w-[80px] h-[100px] relative">
                <Image src={"/bimeh-moallem.png"} fill alt="بیمه پاسارگارد" />
              </div>
            </div>
            <div className="col-span-1 bg-white p-4 rounded-4xl flex items-center justify-center">
              <div className="w-[80px] h-[100px] relative">
                <Image src={"/bimeh-saman.png"} fill alt="بیمه پاسارگارد" />
              </div>
            </div>
            <div className="col-span-1 bg-white p-4 rounded-4xl flex items-center justify-center">
              <div className="w-[80px] h-[100px] relative">
                <Image
                  src={"/bimeh-tejarat-no.png"}
                  fill
                  alt="بیمه پاسارگارد"
                />
              </div>
            </div>
          </div>

          <div className="mt-20 flex items-center justify-center">
            <Link
              href="/reservation"
              className="!bg-secondary !text-white lg:!w-[250px] !w-full !h-[57px] !rounded-[15px] !text-[20px] !font-medium flex items-center justify-center"
            >
              مشاهده همه بیمه ها
            </Link>
          </div>
        </div>
      </section>

      <section className="lg:mb-40 mb-10 lg:mt-10 mt-4 container ">
        <div className="lg:py-16 p-2">
          <h3 className="mb-20 lg:text-[2.5em] text-3xl font-black text-blue-primary text-center relative before:absolute before:w-[100px] before:block before:bg-secondary before:-bottom-5 before:h-[2px] before:left-[50%] before:translate-x-[-50%] ">
            اخبار بیمارستان
          </h3>

          <div className="grid grid-cols-4 h-[350px] gap-x-10">
            <div className="col-span-1 bg-[#f8f9fa] rounded-4xl overflow-hidden">
              <div className="relative h-[200px]">
                <Image
                  src={"/1daad534bbd4cd30c325dde4746d01bcc3752e98.jpg"}
                  alt=""
                  fill
                  objectFit="cover"
                />
              </div>
              <div className="p-5 font-bold text-lg">
                مسابقه آشپزی سالم به مناسبت “هفته جهانی دیابت” در بیمارستان شمال
              </div>
            </div>
            <div className="col-span-1 bg-[#f8f9fa] rounded-4xl overflow-hidden">
              <div className="relative h-[200px]">
                <Image
                  src={"/1daad534bbd4cd30c325dde4746d01bcc3752e98.jpg"}
                  alt=""
                  fill
                  objectFit="cover"
                />
              </div>
              <div className="p-5 font-bold text-lg">
                مسابقه آشپزی سالم به مناسبت “هفته جهانی دیابت” در بیمارستان شمال
              </div>
            </div>
            <div className="col-span-1 bg-[#f8f9fa] rounded-4xl overflow-hidden">
              <div className="relative h-[200px]">
                <Image
                  src={"/1daad534bbd4cd30c325dde4746d01bcc3752e98.jpg"}
                  alt=""
                  fill
                  objectFit="cover"
                />
              </div>
              <div className="p-5 font-bold text-lg">
                مسابقه آشپزی سالم به مناسبت “هفته جهانی دیابت” در بیمارستان شمال
              </div>
            </div>
            <div className="col-span-1 bg-[#f8f9fa] rounded-4xl overflow-hidden">
              <div className="relative h-[200px]">
                <Image
                  src={"/1daad534bbd4cd30c325dde4746d01bcc3752e98.jpg"}
                  alt=""
                  fill
                  objectFit="cover"
                />
              </div>
              <div className="p-5 font-bold text-lg">
                مسابقه آشپزی سالم به مناسبت “هفته جهانی دیابت” در بیمارستان شمال
              </div>
            </div>
          </div>
          <div className="mt-20 flex items-center justify-center">
            <Link
              href="/reservation"
              className="!bg-secondary !text-white lg:!w-[250px] !w-full !h-[57px] !rounded-[15px] !text-[20px] !font-medium flex items-center justify-center"
            >
              مشاهده همه اخبار
            </Link>
          </div>
        </div>
      </section>

      <section className="lg:mb-40 mb-10 lg:mt-10 mt-4 container ">
        <div className="grid grid-cols-12 h-[400px] gap-x-10">
          <div className="col-span-7 rounded-4xl bg-[#f8f9fa] lg:px-10 lg:py-16 p-2 h-full flex flex-col items-start justify-start gap-y-10">
            <h3 className="text-3xl font-bold">بیمارستان شمال آمل</h3>
            <p className="text-xl text-[#666]">
              مازندران ، آمل ، بلوار مدرس ، خیابان آفتاب 47 ، بیمارستان شمال آمل
            </p>
            <div className="flex items-center justify-start gap-x-6 text-[#333]">
              <svg
                stroke="currentColor"
                fill="currentColor"
                strokeWidth="0"
                viewBox="0 0 256 256"
                height="40px"
                width="40px"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M144.27,45.93a8,8,0,0,1,9.8-5.66,86.22,86.22,0,0,1,61.66,61.66,8,8,0,0,1-5.66,9.8A8.23,8.23,0,0,1,208,112a8,8,0,0,1-7.73-5.94,70.35,70.35,0,0,0-50.33-50.33A8,8,0,0,1,144.27,45.93Zm-2.33,41.8c13.79,3.68,22.65,12.54,26.33,26.33A8,8,0,0,0,176,120a8.23,8.23,0,0,0,2.07-.27,8,8,0,0,0,5.66-9.8c-5.12-19.16-18.5-32.54-37.66-37.66a8,8,0,1,0-4.13,15.46Zm81.94,95.35A56.26,56.26,0,0,1,168,232C88.6,232,24,167.4,24,88A56.26,56.26,0,0,1,72.92,32.12a16,16,0,0,1,16.62,9.52l21.12,47.15,0,.12A16,16,0,0,1,109.39,104c-.18.27-.37.52-.57.77L88,129.45c7.49,15.22,23.41,31,38.83,38.51l24.34-20.71a8.12,8.12,0,0,1,.75-.56,16,16,0,0,1,15.17-1.4l.13.06,47.11,21.11A16,16,0,0,1,223.88,183.08Zm-15.88-2s-.07,0-.11,0h0l-47-21.05-24.35,20.71a8.44,8.44,0,0,1-.74.56,16,16,0,0,1-15.75,1.14c-18.73-9.05-37.4-27.58-46.46-46.11a16,16,0,0,1,1-15.7,6.13,6.13,0,0,1,.57-.77L96,95.15l-21-47a.61.61,0,0,1,0-.12A40.2,40.2,0,0,0,40,88,128.14,128.14,0,0,0,168,216,40.21,40.21,0,0,0,208,181.07Z"></path>
              </svg>
              <span dir="ltr" className="text-2xl">
                {toPersianNumber("011-4492")}
              </span>
            </div>
            <p className="text-xl text-[#666]">
              روزها و ساعات پذیرش: همه روزه از ساعت 08:00 الی 24:00
            </p>
          </div>
          <div className="col-span-5">
            <div className="relative w-full pb-[56.25%] rounded-4xl overflow-hidden h-full">
              <iframe
                src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d6419.524849772638!2d52.347594!3d36.439127!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3f8fbd6849bf386b%3A0x26cbc9441b00f373!2sShomal%20Hospital!5e0!3m2!1sen!2sus!4v1762836982418!5m2!1sen!2sus"
                // width="100%"
                style={{border: "0"}}
                allowFullScreen={false}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                className="absolute top-0 left-0 w-full h-full border-0"
              ></iframe>
            </div>
          </div>
        </div>
      </section>

      <footer className="lg:mt-10 mt-4 container bg-blue-primary ">
        <div className="lg:py-16 p-2"></div>
      </footer>
    </div>
  );
}
