import { withBasePath } from "@/utils/comman/Comman";
import React from "react";
import Image from "next/image";

const AboutSubHeader = () => {
  return (
    <div className="pt-[78px]">
      <div className="bg-[#F8E9E6] py-10">
        <div className="max-w-7xl px-6 lg:px-8 mx-auto flex items-center *:md:w-1/2 *:w-full max-md:flex-wrap ">
          <div className="order-2 md:order-1">
            <div className="lg:text-4xl md:text-3xl sm:text-2xl text-xl font-medium">
              Skip the travel! <br />
              Take Online Doctor Consultation
            </div>
            <div className="mt-2 md:text-xl text-xs max-md:font-semibold  font-normal text-[#757171]">
              Private consultation + Audio call · Starts at just ₹199
            </div>
            <div className="mt-4 flex items-center">
              <div>
                <section className="">
                  <div className=" sm:container">
                    <div className="flex items-end ">
                      <div className="md:size-10 size-7 rounded-full border-2 border-white dark:border-dark-3">
                        <Image
                          width={50}
                          height={50}
                          src={withBasePath("/assets/img/user.jpg")}
                          alt="avatar"
                          title="avatar"
                          className="h-full w-full rounded-full object-cover object-center"
                        />
                      </div>
                      <div className="-ml-4 md:size-10 size-7 rounded-full border-2 border-white dark:border-dark-3">
                        <Image
                          width={50}
                          height={50}
                          src={withBasePath("/assets/img/user-2.jpg")}
                          alt="avatar"
                          title="avatar"
                          className="h-full w-full rounded-full object-cover object-center"
                        />
                      </div>
                      <div className="-ml-4 md:size-10 size-7 rounded-full border-2 border-white dark:border-dark-3">
                        <Image
                          width={50}
                          height={50}
                          src={withBasePath("/assets/img/recommended-img.png")}
                          alt="avatar"
                          title="avatar"
                          className="h-full w-full rounded-full object-cover object-center"
                        />
                      </div>
                    </div>
                  </div>
                </section>
              </div>
              <div className="px-4 text-[#757171] md:text-lg text-sm flex items-center">
                +170 Doctors are online
                <span className="size-4 rounded-full relative mt-5 ps-2">
                  <div className="absolute  -mr-1 -mt-1 size-2 rounded-full bg-lime-400 animate-ping"></div>
                  <div className="absolute  -mr-1 -mt-1 size-2 rounded-full bg-lime-400"></div>
                </span>
              </div>
            </div>
            <a
              href="#"
              className="text-sm py-2 px-10 rounded-lg bg-secondary block w-max text-white mt-4"
            >
              Book Now
            </a>
          </div>
          <div className="*:md:ms-auto *:mx-auto order-1 md:order-2">
            <div className="md:w-[334px] w-[270px] aspect-[334/316] *:size-full relative">
              <Image
                src={withBasePath("/assets/img/recommended-img.png")}
                width={334}
                height={316}
                alt="hero-img"
                title="hero-img"
              />
              <div className="absolute -bottom-2 py-5  bg-[#F8E9E6] blur-sm !h-10 "></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AboutSubHeader;