import BR from "@/components/Layout/LineBreak";
import { Button } from "@/ui/Button";
import QuestionFormModal from "@/components/modals/QuestionFormModal";
import { useModalStore } from "@/stores/useModalStore";

export default function RequestForDemo() {
  const { setModal } = useModalStore();
  return (
    <div
      className="
        flex max-md:flex-col flex-row lg:gap-[0.833vw] md:gap-[2.865vw] gap-[11.111vw]
        lg:-mx-[1.389vw] lg:w-[calc(100%+2.778vw)] lg:pl-[1.389vw] lg:pr-0
        md:-mx-[{...handlers}] md:w-[calc(100%+4.167vw)] md:pr-[2.083vw]
        "
    >
      <div className="flex flex-col lg:max-w-[31.944vw] min-h-full">
        <h2 className="line2 max-md:mb-[6.667vw]">
          Запись <BR lg md /> на удаленную
          <BR /> демонстрацию
        </h2>

        <div className="flex flex-col lg:gap-[2.222vw] md:gap-[4.167vw] mt-auto">
          <p className="lg:headline1 headline2 text-[#7A7A7A]">
            Запись на демонстрацию может быть оформлена в виде блока на сайте
            застройщика или жилого комплекса.
          </p>
          <Button
            onClick={() => {
              setModal(
                <QuestionFormModal products={["Удаленная демонстрация"]} />
              );
            }}
            className="max-md:hidden btnl bg-gradient-saturated lg:py-[1.389vw] lg:px-[2.222vw] md:py-[2.604vw] md:px-[4.167vw] md:rounded-[2.083vw] lg:rounded-[1.111vw]"
          >
            Оставить заявку
          </Button>
        </div>
      </div>

      <video
        poster="/img/showreel.png"
        src="/videos/composition_c.mp4"
        loop
        autoPlay
        muted
        playsInline
        className="lg:h-[44.444vw] md:h-[57.292vw] h-[122.222vw] lg:rounded-[1.111vw_0_0_1.111vw] md:rounded-[2.083vw_0_0_2.083vw] max-md:rounded-[4.444vw] object-cover overflow-hidden"
      />
    </div>
  );
}
