import Link from "next/link";

export default function Newsletter() {
  return (
    <section>
      <div className="skew skew-top mr-for-radius">
        <svg
          className="h-8 md:h-12 lg:h-20 w-full text-gray-900"
          viewBox="0 0 10 10"
          preserveAspectRatio="none"
        >
          <polygon fill="currentColor" points="0 0 10 10 0 10" />
        </svg>
      </div>
      <div className="skew skew-top ml-for-radius">
        <svg
          className="h-8 md:h-12 lg:h-20 w-full text-gray-900"
          viewBox="0 0 10 10"
          preserveAspectRatio="none"
        >
          <polygon fill="currentColor" points="0 10 10 0 10 10" />
        </svg>
      </div>
      <div className="py-20 bg-gray-900 radius-for-skewed">
        <div className="container mx-auto px-4">
          <div className="flex flex-wrap items-center">
            {/* <div className='mb-4 w-full lg:w-auto lg:mr-8 text-center'>
            <div className='flex justify-center items-center p-5 mx-auto w-16 h-16 bg-gray-800 rounded'>
              <img
                className='h-12'
                src='atis-assets/logo/atis/atis-color-sign.svg'
                alt=''
              />
            </div>
          </div> */}
            <div className="mb-6 w-full lg:w-auto max-w-lg mx-auto lg:ml-0 mr-auto text-center lg:text-left">
              <h2 className="text-white text-4xl font-bold font-heading">
                Inscris-toi à notre lettre d&apos;information
              </h2>
              <p className="text-gray-500">
                Pour retrouver l&apos;essentiel de l&apos;actualité de P4Pillon.
              </p>
            </div>
            <div className="w-full lg:w-2/5">
              <form
                method="post"
                action="https://infolettre.p4pillon.org/subscription/form"
              >
                <input type="hidden" name="nonce" />
                <input
                  type="checkbox"
                  name="l"
                  checked
                  readOnly
                  value="200ba3b3-60cd-4201-afcf-dee65ab57d6b"
                  className="hidden"
                />
                <div className="max-w-md lg:max-w-sm mx-auto flex flex-wrap items-center">
                  <input
                    className="flex-grow py-3 px-4 mr-4 text-xs rounded leading-loose"
                    type="email"
                    name="email"
                    placeholder="bonjour@p4pillon.org"
                  />
                  <button className="flex-none py-2 px-6 rounded-t-xl rounded-l-xl bg-pink-600 hover:bg-pink-700 text-white font-bold leading-loose transition duration-200">
                    S&apos;abonner
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div className="skew skew-bottom mr-for-radius">
        <svg
          className="h-8 md:h-12 lg:h-20 w-full text-gray-900"
          viewBox="0 0 10 10"
          preserveAspectRatio="none"
        >
          <polygon fill="currentColor" points="0 0 10 0 0 10" />
        </svg>
      </div>
      <div className="skew skew-bottom ml-for-radius">
        <svg
          className="h-8 md:h-12 lg:h-20 w-full text-gray-900"
          viewBox="0 0 10 10"
          preserveAspectRatio="none"
        >
          <polygon fill="currentColor" points="0 0 10 0 10 10" />
        </svg>
      </div>
    </section>
  );
}