import React from 'react';

export default function Footer() {
  const handleScroll = () => {
    window.scroll({
      top: 0,
      left: 0,
      behavior: 'smooth',
    });
  };

  return (
    <div
      className="w-full flex flex-col items-center sm:justify-start justify-center"
      id="footer"
    >
      <div className="w-full sm:px-20 px-4 flex sm:justify-end justify-center">
        <button
          onClick={() => handleScroll()}
          className="font-avenirbook text-sm mb-4 text-gray-900 hover:text-red-400 focus:text-red-400"
        >
          &#x2191; Return to top
        </button>
      </div>

      <div className="w-full sm:px-20 px-4 flex sm:flex-row-reverse flex-col sm:justify-between justify-center sm:items-center bg-gradient-to-r from-pink-500 via-red-500 to-orange-500 sm:h-24">
        <div className="flex items-center h-full sm:w-auto w-full sm:justify-end justify-center sm:my-0 my-4">
          <a
            href="/"
            className="w-10 h-10 flex items-center justify-center ri-linkedin-fill rounded-full bg-white text-orange-500 text-xl ml-2"
          >
            {' '}
          </a>
          <a
            href="/"
            className="w-10 h-10 flex items-center justify-center ri-twitter-fill rounded-full bg-white text-orange-500 text-xl ml-2"
          >
            {' '}
          </a>
          <a
            href="/"
            className="w-10 h-10 flex items-center justify-center ri-facebook-fill rounded-full bg-white text-orange-500 text-xl ml-2"
          >
            {' '}
          </a>
        </div>

        <div className="font-avenirbook text-gray-100 text-sm sm:w-auto w-full sm:text-left text-center sm:mb-0 mb-4">
          &copy; Proximity Worldwide 2018. All Rights Reserved.{' '}
          <a
            href="/"
            className="underline hover:no-underline focus:no-underline"
          >
            Privacy Statement
          </a>
          .
        </div>
      </div>
    </div>
  );
}