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

const imgImage1 = "https://www.figma.com/api/mcp/asset/d7462c8b-c33e-4426-addc-6aa7121245be";
const imgCaretDown = "https://www.figma.com/api/mcp/asset/22507870-d317-4bee-bc66-02b7e215ec0d";
const imgList = "https://www.figma.com/api/mcp/asset/bf6515df-4385-405a-8211-f508bacdd20a";
const imgLogo = "https://www.figma.com/api/mcp/asset/5d5683fa-8bea-4a2b-9dae-faffa5b81b1b";
const imgVector = "https://www.figma.com/api/mcp/asset/54b76a10-8f4c-4661-8579-bbcd00e7976e";
const imgCaretDown2 = "https://www.figma.com/api/mcp/asset/623eeea2-80e1-4a81-acde-9d8df8732678";
const imgCheck = "https://www.figma.com/api/mcp/asset/b452ba20-ab69-4d6d-a006-1763b04e4ca1";
const imgCalendarBlank = "https://www.figma.com/api/mcp/asset/3d81b9b9-8c42-47e9-812f-7568c688cdb3";
const imgMapPin = "https://www.figma.com/api/mcp/asset/19dfc075-5ce6-4084-9a95-1f1904c56643";
const imgVector1 = "https://www.figma.com/api/mcp/asset/c5011a40-85ba-420b-a94c-f3a3ba5dbe89";
const imgVector2 = "https://www.figma.com/api/mcp/asset/f5f57fd8-7758-4c5e-a232-478f70ec4924";
const imgX = "https://www.figma.com/api/mcp/asset/81fbb5d4-04d5-4b57-bbed-f0249d23800a";

export default function MobileFormularz() {
  return (
    <div className="bg-white relative size-full" data-name="Mobile Formularz" data-node-id="1:171">
      <div className="-translate-x-1/2 absolute bg-[rgba(0,0,0,0.2)] h-[1479px] left-1/2 top-[-2px] w-[390px]" data-name="bg" data-node-id="2:1158" />
      <div className="absolute bg-[#ededf3] content-stretch flex flex-col gap-[24px] h-[1257px] items-start justify-center left-0 overflow-clip px-[24px] py-[32px] rounded-tl-[16px] rounded-tr-[16px] top-[181px] w-[390px]" data-node-id="2:1160">
        <p className="font-['Albert_Sans:Bold',sans-serif] font-bold leading-[0] min-w-full relative shrink-0 text-[#2f2482] text-[20px] w-[min-content]" data-node-id="2:1175">
          <span className="leading-[32px]">Wypełnij formularz rezerwacji</span>
          <span className="leading-[32px] text-[red]">.</span>
        </p>
        <div className="grid-cols-[max-content] grid-rows-[max-content] inline-grid leading-[0] place-items-start relative shrink-0" data-name="Dane wynajmu" data-node-id="10:751">
          <div className="bg-white col-1 h-[48px] ml-0 mt-0 relative rounded-[8px] row-1 w-[342px]" data-name="Input" data-node-id="4:76">
            <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="2:1165">
              <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="4:78">
              <img alt="" className="absolute block max-w-none size-full" src={imgCaretDown2} />
            </div>
          </div>
          <div className="bg-white col-1 h-[48px] leading-[24px] ml-0 mt-[64px] relative rounded-[8px] row-1 w-[167px] whitespace-nowrap" data-name="Input" data-node-id="4:351">
            <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="4:352">
              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="4:353">
              Od kiedy?
            </p>
          </div>
          <div className="bg-white col-1 h-[48px] ml-[175px] mt-[64px] relative rounded-[8px] row-1 w-[167px]" data-name="Input" data-node-id="4:343">
            <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="4:344">
              Do kiedy?
            </p>
            <div className="absolute left-[12px] size-[16px] top-[16px]" data-name="CalendarBlank" data-node-id="4:345">
              <img alt="" className="absolute block max-w-none size-full" src={imgCalendarBlank} />
            </div>
          </div>
          <p className="col-1 font-['Albert_Sans:SemiBold',sans-serif] font-semibold ml-[120px] mt-[120px] relative row-1 text-[#2f2482] text-[0px] text-center whitespace-nowrap" data-node-id="2:1222">
            <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 className="bg-white col-1 h-[48px] ml-0 mt-[156px] relative rounded-[8px] row-1 w-[342px]" data-name="Input" data-node-id="24:2246">
            <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:2247">
              Miejsce odbioru
            </p>
            <div className="absolute left-[12px] size-[16px] top-[16px]" data-name="MapPin" data-node-id="24:2248">
              <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-0 mt-[220px] relative row-1" data-node-id="4:154">
            <div className="bg-[#2f2482] overflow-clip relative rounded-[8px] shrink-0 size-[24px]" data-node-id="4:110">
              <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="4:111">
                <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="4:109">
              Zwrot w tej samej lokalizacji
            </p>
          </div>
        </div>
        <div className="content-stretch flex flex-col gap-[16px] items-start relative shrink-0 w-full" data-name="Opcje dodatkowe" data-node-id="10:749">
          <div className="content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full" data-name="Opcje" data-node-id="10:748">
            <div className="bg-white h-[118px] overflow-clip relative rounded-[8px] shrink-0 w-full" data-name="Opcja dodatkowa" data-node-id="10:734">
              <div className="absolute border border-[#d0d0d0] border-solid left-[16px] rounded-[8px] size-[24px] top-[16px]" data-node-id="10:735" />
              <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="10:736">
                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="10:737">
                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="10:738">
                300 zł
              </p>
            </div>
            <div className="bg-white h-[104px] overflow-clip relative rounded-[8px] shrink-0 w-full" data-name="Opcja dodatkowa" data-node-id="10:740">
              <div className="absolute border border-[#d0d0d0] border-solid left-[16px] rounded-[8px] size-[24px] top-[16px]" data-node-id="10:741" />
              <p className="absolute font-['Albert_Sans:SemiBold',sans-serif] font-semibold leading-[20px] left-[56px] text-[#2f2482] text-[15px] top-[calc(50%-36px)] w-[262px]" data-node-id="10:742">
                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="10:743">
                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-[64px] whitespace-nowrap" data-node-id="10:744">
                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="10:750">
          <div className="bg-white h-[48px] leading-[24px] relative rounded-[8px] shrink-0 w-full whitespace-nowrap" data-name="Input" data-node-id="4:115">
            <p className="absolute font-['Albert_Sans:SemiBold',sans-serif] font-semibold left-[16px] text-[#2f2482] text-[15px] top-[calc(50%-5px)]" data-node-id="4:116">
              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="4:117">
              Imię
            </p>
          </div>
          <div className="bg-white h-[48px] leading-[24px] relative rounded-[8px] shrink-0 w-full whitespace-nowrap" data-name="Input" data-node-id="24:2222">
            <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:2223">
              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:2224">
              Nazwisko
            </p>
          </div>
          <div className="bg-white h-[48px] relative rounded-[8px] shrink-0 w-full" data-name="Input" data-node-id="4:124">
            <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="4:125">
              Adres e-mail
            </p>
          </div>
          <div className="bg-white h-[48px] relative rounded-[8px] shrink-0 w-full" data-name="Input" data-node-id="4:127">
            <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="4:128">
              +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="4:129">
              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="4:131">
              ___ ___ ___
            </p>
          </div>
          <div className="bg-white h-[143px] relative rounded-[8px] shrink-0 w-full" data-name="Input" data-node-id="4:151">
            <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="4:152">
              Twoja wiadomość dotycząca rezerwacji
            </p>
          </div>
        </div>
        <div className="content-stretch flex gap-[12px] items-center relative shrink-0" data-node-id="4:155">
          <div className="bg-[#2f2482] overflow-clip relative rounded-[8px] shrink-0 size-[24px]" data-node-id="4:156">
            <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="4:157">
              <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="4:160">
            <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-full" data-name="Button A Black" data-node-id="2:1264">
          <div className="h-[11.998px] relative shrink-0 w-[12px]" data-name="Vector" data-node-id="2:1265">
            <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="2:1266">
            <p className="leading-[14px]">Wyślij</p>
          </div>
        </div>
        <p className="font-['Albert_Sans:Medium',sans-serif] font-medium leading-[0] min-w-full relative shrink-0 text-[#505050] text-[14px] text-center w-[min-content] whitespace-pre-wrap" data-node-id="4:165">
          <span className="leading-[16px]">{`Infolinia 24h:  `}</span>
          <span className="[text-decoration-skip-ink:none] decoration-solid leading-[16px] underline">+48 572 663 614</span>
        </p>
        <div className="absolute right-[24px] size-[24px] top-[19px]" data-name="X" data-node-id="32:175">
          <img alt="" className="absolute block max-w-none size-full" src={imgX} />
        </div>
      </div>
    </div>
  );
}