import Image from "next/image";
import Title from "../lib_components/title";
import Text from "../lib_components/text";
import { Ekskavator_offer } from "@/assets";

export default function Offer() {
  return (
    <div className="my-6 mb-30 ">
      {/* title */}
      <div className="my-20">
        <Title text="about-h2" />
      </div>

      {/* body */}
      <div className="flex max-[1200px]:flex-wrap max-[1200px]:justify-center items-start justify-end max-w-[1200px] w-full mx-auto">
        <Image
          src={Ekskavator_offer}
          alt="Ekskavator image"
          className="max-[1200px]:flex hidden w-[700px] "
        />

        <div className="flex flex-col px-4 items-end text-left justify-end gap-5 text-gray-500 max-w-[1000px] w-full ">
          <div className="text-[16px] leading-[30px]">
            <Text txt="about-p" />
          </div>
          <div className="text-primary flex flex-col text-[18px] relative pl-8">
            <div className=" absolute left-0">
              <div className="bg-primary w-[3px] h-[28px]"></div>
              <div className="bg-secondary w-[3px] h-[100px]"></div>
            </div>
            <span>"</span>
            <Text txt="about-block-quote" />
            <span className="mt-2">"</span>
          </div>
          <a href="tel:+998917412920" className="w-[200px] h-[50px] flex items-center justify-center group relative text-white hover:text-primary bg-primary text-lg font-bold py-2 px-5 hover:cursor-pointer">
            <div className="w-full h-full flex items-center justify-center z-20 absolute">
              <Text txt="contact-us" />
            </div>
            <span className="w-[15px] h-[15px] bg-secondary absolute z-10 bottom-0 right-0 group-hover:w-full group-hover:h-full "></span>
          </a>
        </div>

        <Image
          src={Ekskavator_offer}
          alt="Ekskavator image"
          className="min-[1200px]:flex hidden w-[700px] "
        />
      </div>
    </div>
  );
}