---
import { Image } from "astro:assets";
import decorForm from "../../assets/pics/contact-network.svg";
---

<div
  class="flex relative justify-start items-center p-[60px] bg-[#F3F3F3] rounded-[45px] overflow-hidden"
>
  <form class="bg-gray sm:p-6 h-full w-full lg:max-w-lg">
    <div class="flex flex-col sm:flex-row gap-[35px] sm:items-center mb-10">
      <div class="flex items-center gap-[14px]">
        <input
          type="checkbox"
          id="checkbox1"
          name="checkbox1"
          class="form-checkbox text-black"
        />
        <label for="checkbox1" class="text-black">Tengo una idea</label>
      </div>
      <div class="flex items-center gap-[14px]">
        <input
          type="checkbox"
          id="checkbox2"
          name="checkbox2"
          class="form-checkbox text-black"
        />
        <label for="checkbox2" class="flex items-center text-black"
          >Quiero evaluar un proceso</label
        >
      </div>
    </div>

    <div class="mb-4">
      <label for="name" class="block text-black mb-2">Nombre*</label>
      <input
        type="text"
        id="name"
        name="name"
        placeholder="Tu nombre"
        class="w-full px-[30px] py-[18px] border border-black rounded-[14px] text-black outline-none"
      />
    </div>

    <div class="mb-4">
      <label for="email" class="block text-black mb-2">Correo*</label>
      <input
        type="email"
        id="email"
        name="email"
        placeholder="tu@empresa.com"
        class="w-full px-[30px] py-[18px] border border-black rounded-[14px] text-black outline-none"
      />
    </div>

    <div class="mb-4">
      <label for="message" class="block text-black mb-2">¿Qué quieres mejorar?*</label>
      <textarea
        id="message"
        name="message"
        placeholder="Describe brevemente el proceso y dónde está la mayor fricción."
        class="w-full px-[30px] py-[18px] border border-black rounded-[14px] text-black outline-none"
      ></textarea>
    </div>

    <button type="submit" name="submit" class="btn-primary w-full">Solicitar evaluación</button>
  </form>
  <picture class="absolute right-[2%] top-[12%] bottom-[12%] hidden w-[44%] items-center justify-center lg:flex">
    <Image
      src={decorForm}
      alt="Conexiones y comunicación entre sistemas"
      class="h-full w-full object-contain"
    />
  </picture>
</div>
<style>
  .form-checkbox {
    appearance: none;
    width: 28px;
    height: 28px;
    border: 1px solid #000;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    position: relative;
  }

  .form-checkbox:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--green);
    transform: scale(0);
    transition: transform 0.1s ease-in-out;
  }

  .form-checkbox:checked:before {
    transform: scale(0.6);
  }
</style>
<script>
  function formSetup() {
    var cb1 = document.getElementById("checkbox1") as HTMLInputElement;
    var cb2 = document.getElementById("checkbox2") as HTMLInputElement;
    var message = document.getElementById("message") as HTMLInputElement;

    if (cb1 && cb2) {
      cb1.checked = true;

      cb2.addEventListener("change", function () {
        if (cb2.checked) {
          cb1.checked = false;
          message.value =
            "Quiero evaluar un proceso de mi negocio: ";
        } else {
          message.value = "";
          cb1.checked = true;
        }
      });
      cb1.addEventListener("change", function () {
        if (cb1.checked) {
          cb2.checked = false;
          message.value = "";
        } else {
          cb2.checked = true;
          message.value =
            "Quiero evaluar un proceso de mi negocio: ";
        }
      });
    }
  }

  formSetup();
  document.addEventListener("astro:after-swap", formSetup);
</script>