"use client"

import { Link } from "@/i18n/routing"
import { aboutState } from "@/recoil"
import Image from "next/image"
import { useSetRecoilState } from "recoil"

export default function MapWirror() {
  const openAbout = useSetRecoilState(aboutState)

  return (
    <div className="hidden lg:flex px-4 md:px-8 lg:basis-1/2 lg:shrink-0 xl:basis-[55%] items-center justify-center flex-col">
      <div className="flex items-center mb-4 justify-between xl:px-4 w-full max-w-[768px]">
        <Image
          src="/wizzor2x.png"
          alt="wizzor"
          width={100}
          height={100}
        />
        <Link
          href="#"
          scroll={false}
          onClick={() => openAbout(true)}
          className="font-semibold hover:text-[#db9a1d] inline-flex bg-[var(--primary--20)] text-sm px-6 py-3 rounded-full">
          About Wizzor
        </Link>
      </div>
      <h2 className="text-3xl lg:text-4xl xl:text-5xl font-bold xl:px-4 mb-4">
        The Worldwide <span className="text-[var(--primary--70)] block">Communications Platform</span>
      </h2>
      <div>
        <Image
          src="/img/b2b.png"
          alt="login"
          width={468}
          height={178}
          className="xl:max-h-[150px]"
        />
      </div>
      <div>
        <Image
          src="/img/map.png"
          alt="login"
          width={768}
          height={345}
          className="xl:max-h-[35vh]"
        />
      </div>
      <div className="flex gap-4 items-center pt-2 justify-center py-4 relative -top-4 xl:-top-8">
        <a
          href="https://apps.apple.com/us/app/wizzor/id1565540191?uo=4"
          target="_blank">
          <Image
            src="/img/apple_icon.png"
            alt=""
            width={170}
            height={49}
          />
        </a>
        <a
          href="https://play.google.com/store/apps/details?id=com.wizzor"
          target="_blank">
          <Image
            src="/img/gplay_icon.png"
            alt=""
            width={170}
            height={49}
          />
        </a>
      </div>
    </div>
  )
}