/**
 * Desktop Formularz Rezerwacji - Figma Reference Code
 * Node ID: 24:1639 | Size: 1440x1024
 * Figma: https://www.figma.com/design/Q3i1CT4DL91dl638a43RBg/Carei?node-id=24:1639
 *
 * UWAGA: To jest kod referencyjny z Figmy (React + Tailwind).
 * Nalezy go zaadaptowac do stosu technologicznego projektu (WordPress/PHP).
 */

const imgImage = "https://www.figma.com/api/mcp/asset/7d62e9d5-67da-4e89-adb3-68cb959aa552";
const imgImage1 = "https://www.figma.com/api/mcp/asset/7c4ee95b-a6ca-4664-b3ae-abed558c8c95";
const imgWhiteWagonSpeedsHighwayDaylightEditorialCar1 = "https://www.figma.com/api/mcp/asset/b19f198e-4b71-4e84-afa7-ea4fbef0b1e3";
const imgImage4 = "https://www.figma.com/api/mcp/asset/5b1a5a01-782c-4e31-9806-93321460eb13";
const imgImage2 = "https://www.figma.com/api/mcp/asset/0d24a24c-d505-4962-85c4-7c5e1a24a8b6";
const imgImage3 = "https://www.figma.com/api/mcp/asset/a0471dca-16f4-4142-b0ba-a2d04c7a3d6a";
const imgCaretDown = "https://www.figma.com/api/mcp/asset/c71c6991-beac-4fa3-a535-18cf0cf4dea3";
const imgLogo = "https://www.figma.com/api/mcp/asset/b679a1c6-68f7-48ea-b3d3-71be81d22dc9";
const imgLayer1 = "https://www.figma.com/api/mcp/asset/683370a1-4956-4401-bb45-27619bcb0044";
const imgVector = "https://www.figma.com/api/mcp/asset/fdf1c7d3-63c1-4027-ae64-881f582cd8de";
const imgRectangle22 = "https://www.figma.com/api/mcp/asset/9ca45d86-0986-4cec-ac47-b0c44074f7dc";
const imgLayer2 = "https://www.figma.com/api/mcp/asset/f83a9925-2305-4c3d-93ac-812bc9ad6611";
const imgVector1 = "https://www.figma.com/api/mcp/asset/cb4a1e0b-f6ad-47e9-8ed8-b7791c8d5e51";
const imgVector2 = "https://www.figma.com/api/mcp/asset/e42ecd5d-274c-44d0-bd30-ab0549312ea6";
const imgCaretDown1 = "https://www.figma.com/api/mcp/asset/8e4251ef-1a15-4f22-be18-8f47ad361a22";
const imgMapPin = "https://www.figma.com/api/mcp/asset/a20f5eb0-4d70-4fdb-b230-f019fcca8891";
const imgCheck = "https://www.figma.com/api/mcp/asset/43d06708-0af0-4d32-be36-f6d6bdcdc6f8";
const imgCalendarBlank = "https://www.figma.com/api/mcp/asset/e6e03b59-391e-4785-ad2a-6ede64b251f1";
const imgVector3 = "https://www.figma.com/api/mcp/asset/f4e47efe-d2db-408a-bbc2-96e9a092b594";
const imgVector4 = "https://www.figma.com/api/mcp/asset/1bc3c7f1-121c-4ff5-8196-cb74bec1d63f";
const imgX = "https://www.figma.com/api/mcp/asset/1a74632a-93e6-4953-a509-cdcecd5181f6";

export default function DesktopFormularz() {
  return (
    <div className="bg-white relative size-full" data-name="Desktop Formularz" data-node-id="24:1639">
      <div className="-translate-x-1/2 absolute bg-[rgba(0,0,0,0.2)] h-[950px] left-1/2 top-[75px] w-[1440px]" data-name="bg" data-node-id="24:2121" />
      <div className="-translate-x-1/2 -translate-y-1/2 absolute bg-[#ededf3] content-stretch flex flex-col gap-[24px] items-start justify-center left-1/2 overflow-clip px-[48px] py-[40px] rounded-[16px] top-[calc(50%+24.5px)]" data-node-id="24:2123">
        <p className="font-['Albert_Sans:Bold',sans-serif] font-bold leading-[0] min-w-full relative shrink-0 text-[#2f2482] text-[20px] text-center w-[min-content]" data-node-id="24:2124">
          <span className="leading-[32px]">Wypełnij formularz rezerwacji</span>
          <span className="leading-[32px] text-[red]">.</span>
        </p>
        <div className="grid-rows-[max-content] inline-grid leading-[0] place-items-start relative shrink-0 w-full" data-name="Dane wynajmu" data-node-id="24:2125">
          <div className="bg-white col-1 h-[48px] ml-0 mt-0 relative rounded-[8px] row-1 w-[48.83%]" data-name="Input" data-node-id="24:2126">
            <p className="absolute font-['Albert_Sans:Medium',sans-serif] font-medium leading-[0] left-[16px] text-[#2f2482] text-[0px] top-[12px] whitespace-nowrap" data-node-id="24:2127">
              <span className="font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[24px] text-[15px]">Segment B</span>
              <span className="font-['Albert_Sans:Regular',sans-serif] font-normal leading-[24px] text-[#505050] text-[15px]">{` (np. Toyta Yaris)`}</span>
            </p>
            <div className="-translate-y-1/2 absolute right-[12px] size-[16px] top-1/2" data-name="CaretDown" data-node-id="24:2128">
              <img alt="" className="absolute block max-w-none size-full" src={imgCaretDown1} />
            </div>
          </div>
          <div className="bg-white col-1 h-[48px] ml-0 mt-[80px] relative rounded-[8px] row-1 w-[48.83%]" data-name="Input" data-node-id="24:2131">
            <p className="absolute font-['Albert_Sans:Regular',sans-serif] font-normal leading-[24px] left-[36px] text-[#505050] text-[15px] top-[12px] whitespace-nowrap" data-node-id="24:2132">
              Miejsce odbioru
            </p>
            <div className="absolute left-[12px] size-[16px] top-[16px]" data-name="MapPin" data-node-id="24:2234">
              <img alt="" className="absolute block max-w-none size-full" src={imgMapPin} />
            </div>
          </div>
          <div className="col-1 content-stretch flex gap-[12px] items-center ml-[51.69%] mt-[92px] relative row-1 w-[30.930000000000003%]" data-node-id="24:2136">
            <div className="bg-[#2f2482] overflow-clip relative rounded-[8px] shrink-0 size-[24px]" data-node-id="24:2137">
              <div className="-translate-x-1/2 -translate-y-1/2 absolute left-1/2 size-[12px] top-1/2" data-name="Check" data-node-id="24:2138">
                <img alt="" className="absolute block max-w-none size-full" src={imgCheck} />
              </div>
            </div>
            <p className="font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[24px] relative shrink-0 text-[#2f2482] text-[14px] whitespace-nowrap" data-node-id="24:2141">
              Zwrot w tej samej lokalizacji
            </p>
          </div>
          <div className="bg-white col-1 h-[48px] ml-[75.97%] mt-0 relative rounded-[8px] row-1 w-[24.03%]" data-name="Input" data-node-id="24:2142">
            <p className="absolute font-['Albert_Sans:Regular',sans-serif] font-normal leading-[24px] left-[36px] text-[#505050] text-[15px] top-[calc(50%-12px)] whitespace-nowrap" data-node-id="24:2143">
              Do kiedy?
            </p>
            <div className="absolute left-[12px] size-[16px] top-[16px]" data-name="CalendarBlank" data-node-id="24:2144">
              <img alt="" className="absolute block max-w-none size-full" src={imgCalendarBlank} />
            </div>
          </div>
          <div className="bg-white col-1 h-[48px] leading-[24px] ml-[50.91%] mt-0 relative rounded-[8px] row-1 w-[24.030000000000005%] whitespace-nowrap" data-name="Input" data-node-id="24:2150">
            <p className="absolute font-['Albert_Sans:SemiBold',sans-serif] font-semibold left-[16px] text-[#2f2482] text-[15px] top-[calc(50%-5px)] tracking-[-0.3px]" data-node-id="24:2151">
              11:00, 28.02.2026
            </p>
            <p className="absolute font-['Albert_Sans:Regular',sans-serif] font-normal left-[16px] text-[#505050] text-[12px] top-[calc(50%-22px)]" data-node-id="24:2152">
              Od kiedy?
            </p>
          </div>
          <p className="col-1 font-['Albert_Sans:SemiBold',sans-serif] font-semibold ml-[85.58%] mt-[52px] relative row-1 text-[#2f2482] text-[0px] text-center w-[14.410000000000002%]" data-node-id="24:2153">
            <span className="font-['Albert_Sans:Regular',sans-serif] font-normal leading-[24px] text-[#505050] text-[15px]">Wybrano:</span>
            <span className="leading-[24px] text-[14px]">{` 3 dni`}</span>
          </p>
        </div>
        <div className="content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full" data-name="Opcje dodatkowe" data-node-id="24:2154">
          <div className="grid-cols-[max-content] grid-rows-[max-content] inline-grid leading-[0] place-items-start relative shrink-0" data-name="Separator" data-node-id="24:2155">
            <div className="col-1 h-0 ml-0 mt-[8px] relative row-1 w-[770px]" data-name="Vector" data-node-id="24:2156">
              <div className="absolute inset-[-0.5px_0]">
                <img alt="" className="block max-w-none size-full" src={imgVector3} />
              </div>
            </div>
            <div className="bg-[#ededf3] col-1 content-stretch flex items-center justify-center ml-[314.5px] mt-0 overflow-clip px-[24px] relative row-1" data-node-id="24:2157">
              <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[16px] relative shrink-0 text-[12px] text-[rgba(0,0,0,0.24)] text-center whitespace-nowrap" data-node-id="24:2158">
                Opcje dodatkowe
              </p>
            </div>
          </div>
          <div className="content-stretch flex gap-[16px] items-start relative shrink-0 w-full" data-name="Opcje" data-node-id="24:2159">
            <div className="bg-white h-[118px] overflow-clip relative rounded-[8px] shrink-0 w-[376px]" data-name="Opcja dodatkowa" data-node-id="24:2160">
              <div className="absolute border border-[#d0d0d0] border-solid left-[16px] rounded-[8px] size-[24px] top-[16px]" data-node-id="24:2161" />
              <p className="absolute font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[20px] left-[56px] text-[#2f2482] text-[15px] top-[calc(50%-43px)] whitespace-nowrap" data-node-id="24:2162">
                Rozszerzone ubezpieczenie
              </p>
              <p className="absolute font-['Roboto:Regular',sans-serif] font-normal h-[34px] leading-[16px] left-[56px] text-[#505050] text-[12px] top-[40px] w-[262px]" data-node-id="24:2163">
                Obejmuje brak odpowiedzialności najemcy za wszelki szkody poniesione na aucie.
              </p>
              <p className="absolute font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[24px] left-[56px] text-[#2f2482] text-[14px] top-[78px] whitespace-nowrap" data-node-id="24:2164">
                300 zł
              </p>
            </div>
            <div className="bg-white h-[118px] overflow-clip relative rounded-[8px] shrink-0 w-[376px]" data-name="Opcja dodatkowa" data-node-id="24:2165">
              <div className="absolute border border-[#d0d0d0] border-solid left-[16px] rounded-[8px] size-[24px] top-[16px]" data-node-id="24:2166" />
              <p className="absolute font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[20px] left-[56px] text-[#2f2482] text-[15px] top-[calc(50%-43px)] w-[262px]" data-node-id="24:2167">
                Fotelik dla dziecka
              </p>
              <p className="absolute font-['Roboto:Regular',sans-serif] font-normal leading-[16px] left-[56px] text-[#505050] text-[12px] top-[40px] w-[262px]" data-node-id="24:2168">
                Prosimy zawrzeć wiek dziecka w wiadomości.
              </p>
              <p className="absolute font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[24px] left-[56px] text-[#2f2482] text-[14px] top-[78px] whitespace-nowrap" data-node-id="24:2169">
                50 zł
              </p>
            </div>
          </div>
        </div>
        <div className="content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full" data-name="Dane najemcy" data-node-id="24:2170">
          <div className="grid-cols-[max-content] grid-rows-[max-content] inline-grid leading-[0] place-items-start relative shrink-0" data-name="Separator" data-node-id="24:2171">
            <div className="col-1 h-0 ml-0 mt-[8px] relative row-1 w-[770px]" data-name="Vector" data-node-id="24:2172">
              <div className="absolute inset-[-0.5px_0]">
                <img alt="" className="block max-w-none size-full" src={imgVector3} />
              </div>
            </div>
            <div className="bg-[#ededf3] col-1 content-stretch flex items-center justify-center ml-[323px] mt-0 overflow-clip px-[24px] relative row-1" data-node-id="24:2173">
              <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[16px] relative shrink-0 text-[12px] text-[rgba(0,0,0,0.24)] text-center whitespace-nowrap" data-node-id="24:2174">
                Dane najemcy
              </p>
            </div>
          </div>
          <div className="content-start flex flex-wrap gap-[16px] items-start relative shrink-0 w-full" data-node-id="24:2220">
            <div className="bg-white h-[48px] leading-[24px] relative rounded-[8px] shrink-0 w-[376px] whitespace-nowrap" data-name="Input" data-node-id="24:2175">
              <p className="absolute font-['Albert_Sans:SemiBold',sans-serif] font-semibold left-[16px] text-[#2f2482] text-[15px] top-[calc(50%-5px)]" data-node-id="24:2176">
                Daria
              </p>
              <p className="absolute font-['Albert_Sans:Regular',sans-serif] font-normal left-[16px] text-[#505050] text-[12px] top-[calc(50%-22px)]" data-node-id="24:2177">
                Imię
              </p>
            </div>
            <div className="bg-white h-[48px] leading-[24px] relative rounded-[8px] shrink-0 w-[376px] whitespace-nowrap" data-name="Input" data-node-id="24:2226">
              <p className="absolute font-['Albert_Sans:SemiBold',sans-serif] font-semibold left-[16px] text-[#2f2482] text-[15px] top-[calc(50%-5px)]" data-node-id="24:2227">
                Pyziak
              </p>
              <p className="absolute font-['Albert_Sans:Regular',sans-serif] font-normal left-[16px] text-[#505050] text-[12px] top-[calc(50%-22px)]" data-node-id="24:2228">
                Nazwisko
              </p>
            </div>
            <div className="bg-white h-[48px] relative rounded-[8px] shrink-0 w-[376px]" data-name="Input" data-node-id="24:2178">
              <p className="absolute font-['Albert_Sans:Regular',sans-serif] font-normal leading-[24px] left-[16px] text-[#505050] text-[15px] top-[calc(50%-12px)] whitespace-nowrap" data-node-id="24:2179">
                Adres e-mail
              </p>
            </div>
            <div className="bg-white h-[48px] relative rounded-[8px] shrink-0 w-[376px]" data-name="Input" data-node-id="24:2180">
              <p className="absolute font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[24px] left-[72px] text-[#2f2482] text-[15px] top-[calc(50%-5px)] whitespace-nowrap" data-node-id="24:2181">
                +48
              </p>
              <p className="absolute font-['Albert_Sans:Regular',sans-serif] font-normal leading-[24px] left-[72px] text-[#505050] text-[12px] top-[calc(50%-22px)] w-[62px]" data-node-id="24:2182">
                Nr telefonu
              </p>
              <p className="absolute font-['Albert_Sans:Regular',sans-serif] font-normal leading-[24px] left-[109px] text-[#c7c7c7] text-[15px] top-[calc(50%-5px)] tracking-[2.85px] whitespace-nowrap" data-node-id="24:2183">
                ___ ___ ___
              </p>
            </div>
          </div>
        </div>
        <div className="bg-white h-[143px] relative rounded-[8px] shrink-0 w-full" data-name="Input" data-node-id="24:2191">
          <p className="absolute font-['Albert_Sans:Regular',sans-serif] font-normal leading-[24px] left-[16px] text-[#505050] text-[15px] top-[calc(50%-59.5px)] whitespace-nowrap" data-node-id="24:2192">
            Twoja wiadomość dotycząca rezerwacji
          </p>
        </div>
        <div className="content-stretch flex items-center justify-between relative shrink-0 w-full" data-node-id="24:2221">
          <div className="content-stretch flex gap-[12px] items-center relative shrink-0" data-node-id="24:2193">
            <div className="bg-[#2f2482] overflow-clip relative rounded-[8px] shrink-0 size-[24px]" data-node-id="24:2194">
              <div className="-translate-x-1/2 -translate-y-1/2 absolute left-1/2 size-[12px] top-1/2" data-name="Check" data-node-id="24:2195">
                <img alt="" className="absolute block max-w-none size-full" src={imgCheck} />
              </div>
            </div>
            <p className="font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[0] relative shrink-0 text-[#2f2482] text-[14px] whitespace-nowrap" data-node-id="24:2198">
              <span className="leading-[24px]">{`Zgadzam się na `}</span>
              <span className="[text-decoration-skip-ink:none] decoration-solid leading-[24px] underline">Politykę Prywatności</span>
            </p>
          </div>
          <div className="bg-[red] content-stretch flex gap-[10px] items-center justify-center overflow-clip px-[24px] py-[16px] relative rounded-[8px] shrink-0 w-[238px]" data-name="Button A Black" data-node-id="24:2199">
            <div className="h-[11.998px] relative shrink-0 w-[12px]" data-name="Vector" data-node-id="24:2200">
              <img alt="" className="absolute block max-w-none size-full" src={imgVector} />
            </div>
            <div className="flex flex-col font-['Albert_Sans:SemiBold',sans-serif] font-semibold justify-center leading-[0] relative shrink-0 text-[14px] text-white whitespace-nowrap" data-node-id="24:2201">
              <p className="leading-[14px]">Wyślij</p>
            </div>
          </div>
        </div>
        <div className="absolute left-[24px] size-[24px] top-[24px]" data-name="X" data-node-id="32:170">
          <img alt="" className="absolute block max-w-none size-full" src={imgX} />
        </div>
      </div>
    </div>
  );
}