import { Link } from 'react-router'

import { Button } from '~/components/ui/button'
import { APP } from '~/data/meta'

export const FooterNewsletter = () => {
  return (
    <>
      <div className="col-span-2 hidden gap-y-6 sm:grid">
        <div className="h-[75px] bg-white p-3">
          <Link
            to="/news"
            className="h-full"
          >
            <img
              src={APP.logo}
              alt={APP.title}
              className="h-full w-auto"
            />
          </Link>
        </div>

        <h2 className="text-4xl font-bold">Join Our Newsletter</h2>
        <p className="text-lg">
          Tidak ingin ketinggalan Berita Hukum terhangat? ingin mendapat
          informasi kajian dan networking terbaru? ikuti Newsletter kami and
          Stay up to Speed!
        </p>
        <form className="grid gap-5">
          <input
            placeholder="Daftarkan Email Disini"
            className="h-[50px] flex-1 bg-white text-center text-lg font-light text-black placeholder:text-[#777777] focus:ring-0 focus:outline-none"
            size={1}
          />
          <Button
            type="submit"
            variant="newsPrimaryOutline"
            size="block"
          >
            Subscribe
          </Button>
        </form>
      </div>
      <div className="block sm:hidden">
        <div className="h-[60px] bg-white p-3">
          <Link
            to="/news"
            className="h-full"
          >
            <img
              src={APP.logo}
              alt={APP.title}
              className="h-full w-auto"
            />
          </Link>
        </div>
      </div>
    </>
  )
}