import svgPaths from "./svg-d9xnvztfng";

function Icon() {
  return (
    <div className="relative shrink-0 size-6" data-name="Icon">
      <svg
        className="block size-full"
        fill="none"
        preserveAspectRatio="none"
        viewBox="0 0 24 24"
      >
        <g id="Icon">
          <path d={svgPaths.pc423380} fill="var(--fill-0, #49454F)" id="icon" />
        </g>
      </svg>
    </div>
  );
}

function StateLayer() {
  return (
    <div
      className="box-border content-stretch flex flex-row h-10 items-center justify-center p-0 relative shrink-0 w-full"
      data-name="State-layer"
    >
      <Icon />
    </div>
  );
}

function Content() {
  return (
    <div
      className="box-border content-stretch flex flex-col items-center justify-center overflow-clip p-0 relative rounded-[100px] shrink-0 w-10"
      data-name="Content"
    >
      <StateLayer />
    </div>
  );
}

function Component1stTrailingIcon() {
  return (
    <div
      className="box-border content-stretch flex flex-row items-center justify-center p-0 relative shrink-0 size-12"
      data-name="1st trailing-icon"
    >
      <Content />
    </div>
  );
}

function TrailingElements() {
  return (
    <div
      className="box-border content-stretch flex flex-row items-center justify-end mr-[-16px] p-0 relative shrink-0"
      data-name="Trailing-Elements"
    >
      <Component1stTrailingIcon />
    </div>
  );
}

function Content1() {
  return (
    <div
      className="basis-0 grow h-full min-h-px min-w-px mr-[-16px] relative shrink-0"
      data-name="Content"
    >
      <div className="flex flex-row items-center relative size-full">
        <div className="box-border content-stretch flex flex-row gap-2.5 items-center justify-start px-5 py-0 relative size-full">
          <div
            className="flex flex-col font-['Roboto:Regular',_sans-serif] font-normal justify-center leading-[0] relative shrink-0 text-[#49454f] text-[16px] text-left text-nowrap tracking-[0.5px]"
            style={{ fontVariationSettings: "'wdth' 100" }}
          >
            <p className="adjustLetterSpacing block leading-[24px] whitespace-pre">
              Search cities
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

function StateLayer1() {
  return (
    <div
      className="basis-0 grow h-full min-h-px min-w-px relative shrink-0"
      data-name="state-layer"
    >
      <div className="flex flex-row items-center relative size-full">
        <div className="box-border content-stretch flex flex-row items-center justify-start pl-1 pr-5 py-1 relative size-full">
          <TrailingElements />
          <Content1 />
        </div>
      </div>
    </div>
  );
}

function SearchBar() {
  return (
    <div
      className="bg-[rgba(151,91,249,0.12)] box-border content-stretch flex flex-row gap-1 h-12 items-center justify-start max-w-[720px] overflow-clip p-0 relative rounded-[28px] shrink-0 w-[248px]"
      data-name="Search bar"
    >
      <StateLayer1 />
    </div>
  );
}

function LogoAndSearchBar() {
  return (
    <div
      className="absolute box-border content-stretch flex flex-row gap-5 items-center justify-start left-3 p-0 top-3"
      data-name="logo and search bar"
    >
      <div className="font-['Gaveto:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[#000000] text-[24px] text-left text-nowrap tracking-[1.68px]">
        <p className="adjustLetterSpacing block leading-[normal] whitespace-pre">
          CityCards
        </p>
      </div>
      <SearchBar />
    </div>
  );
}

function Button() {
  return (
    <div
      className="bg-[#ffffff] box-border content-stretch flex flex-row gap-2.5 h-12 items-center justify-center px-3 py-0 relative rounded-[28px] shrink-0"
      data-name="button"
    >
      <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[#000000] text-[14px] text-left text-nowrap tracking-[0.98px]">
        <p className="adjustLetterSpacing block leading-[normal] whitespace-pre">
          Cities
        </p>
      </div>
    </div>
  );
}

function Button1() {
  return (
    <div
      className="bg-[#ffffff] box-border content-stretch flex flex-row gap-2.5 h-12 items-center justify-center px-3 py-0 relative rounded-[28px] shrink-0"
      data-name="button"
    >
      <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[#000000] text-[14px] text-left text-nowrap tracking-[0.98px]">
        <p className="adjustLetterSpacing block leading-[normal] whitespace-pre">
          Passes
        </p>
      </div>
    </div>
  );
}

function Button2() {
  return (
    <div
      className="bg-[#ffffff] box-border content-stretch flex flex-row gap-2.5 h-12 items-center justify-center px-3 py-0 relative rounded-[28px] shrink-0"
      data-name="button"
    >
      <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[#000000] text-[14px] text-left text-nowrap tracking-[0.98px]">
        <p className="adjustLetterSpacing block leading-[normal] whitespace-pre">
          How it Works
        </p>
      </div>
    </div>
  );
}

function Button3() {
  return (
    <div
      className="bg-[#ffffff] box-border content-stretch flex flex-row gap-2.5 h-12 items-center justify-center px-3 py-0 relative rounded-[28px] shrink-0"
      data-name="button"
    >
      <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[#000000] text-[14px] text-left text-nowrap tracking-[0.98px]">
        <p className="adjustLetterSpacing block leading-[normal] whitespace-pre">
          Support
        </p>
      </div>
    </div>
  );
}

function MenuItems() {
  return (
    <div
      className="absolute box-border content-stretch flex flex-row gap-5 items-center justify-start left-1/2 p-0 top-3 translate-x-[-50%]"
      data-name="menu items"
    >
      <Button />
      <Button1 />
      <Button2 />
      <Button3 />
    </div>
  );
}

function OutlineButton() {
  return (
    <div
      className="relative rounded-[28px] shrink-0"
      data-name="outline button"
    >
      <div className="box-border content-stretch flex flex-row gap-2.5 items-center justify-center overflow-clip px-6 py-3 relative">
        <div className="flex flex-col font-['Poppins:Regular',_sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[#000000] text-[16px] text-left text-nowrap tracking-[0.5px]">
          <p className="adjustLetterSpacing block leading-[24px] whitespace-pre">
            Sign in
          </p>
        </div>
      </div>
      <div className="absolute border border-[rgba(0,0,0,0.12)] border-solid inset-0 pointer-events-none rounded-[28px]" />
    </div>
  );
}

function FilledButton() {
  return (
    <div
      className="bg-[#975bf9] box-border content-stretch flex flex-row gap-2.5 items-center justify-center overflow-clip px-6 py-3 relative rounded-[28px] shrink-0"
      data-name="filled button"
    >
      <div className="flex flex-col font-['Poppins:SemiBold',_sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[#ffffff] text-[16px] text-left text-nowrap tracking-[0.5px]">
        <p className="adjustLetterSpacing block leading-[24px] whitespace-pre">
          Get Started
        </p>
      </div>
    </div>
  );
}

function Cta() {
  return (
    <div
      className="absolute box-border content-stretch flex flex-row gap-[3px] items-center justify-start left-[1248px] p-0 top-3"
      data-name="cta"
    >
      <OutlineButton />
      <FilledButton />
    </div>
  );
}

export default function Navbar() {
  return (
    <div className="relative size-full" data-name="navbar">
      <LogoAndSearchBar />
      <MenuItems />
      <Cta />
    </div>
  );
}