import Image from "next/image";
import Title from "../tools/title";
import Text from "../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 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 items-end text-left justify-end gap-5 text-gray-500 max-w-[500px] w-full min-w-[600px] ">
          <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>
          <button className="group relative text-white hover:text-primary">
            <Text txt="contact-us" />
          </button>
        </div>

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