import Link from "next/link";

export default function Footer() {
  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 mb-6 lg:mb-2">
            <div className="mb-6 w-full lg:w-1/5">
              <Link
                className="text-white text-3xl font-bold leading-none flex align-middle"
                href="/"
              >
                <img
                  className="h-12 inline"
                  src="/logo2.svg"
                  alt=""
                  width="auto"
                />
                <h1 className="ml-4 leading-loose">P4Pillon</h1>
              </Link>
            </div>
            <div className="mb-5 w-full lg:w-1/5">
              <p className="text-gray-400 leading-loose">
                Pour une santé en commun et des communs en santé
              </p>
            </div>
            <div className="w-full lg:w-3/5 flex flex-wrap -mx-3 justify-end">
              <div className="mb-6 w-full md:w-1/2 lg:w-1/4 lg:mr-6 px-3">
                <h5 className="mb-4 font-bold text-gray-50">Liens</h5>
                <p className="text-gray-400 leading-loose">
                  <Link href="/">La SCIC</Link>
                </p>
                {/* <p className="text-gray-400 leading-loose">
                  <a href="https://staging.p4pillon.org/annuaire/#45.55349,2.02698,10z">
                    Annuaire
                  </a>
                </p> */}
                <p className="text-gray-400 leading-loose mb-4">
                  <a href="https://apps.p4pillon.org">Outils numériques</a>
                </p>
                <p className="text-gray-400 leading-loose">
                  <Link href="/mentions-legales/">Mentions légales</Link>
                </p>
              </div>
              <div className="mb-6 w-full md:w-1/2 lg:w-1/4 px-3">
                <h5 className="mb-4 font-bold text-gray-50">Contacts</h5>
                <p className="text-gray-400">
                  <a href="mailto:bonjour@p4pillon.org">bonjour@p4pillon.org</a>
                </p>
              </div>
            </div>
          </div>
          <div className="w-full flex justify-center">
            <p className="text-sm text-gray-400">© 2024 - CC-BY-NC-SA</p>
            {/* <div className='flex space-x-2 lg:space-x-4'>
                <a href='#'>
                <img src='atis-assets/social/facebook-purple.svg' alt='' />
                </a>
                <a href='#'>
                <img src='atis-assets/social/twitter-purple.svg' alt='' />
                </a>
                <a href='#'>
                <img src='atis-assets/social/instagram-purple.svg' alt='' />
                </a>
            </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>
  );
}