import { Link } from 'react-router'

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

export const FooterNewsletter = () => {
  return (
    <div className="col-span-2 grid gap-y-6">
      <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>
  )
}