import Link from "next/link";

export default function Hero() {
  return (
    <>
      <section>
        <div className="bg-gray-900 pt-12 lg:pt-20 pb-12 md:pb-24">
          <div className="container mx-auto px-4">
            <div className="flex flex-wrap -mx-4">
              <div className="w-full lg:w-1/2 px-4 mb-12 md:mb-20 lg:mb-0 flex items-center">
                <div className="w-full text-center lg:text-left">
                  <div className="max-w-md mx-auto lg:mx-0">
                    <h2 className="mb-3 text-4xl lg:text-5xl text-white font-bold">
                      <span> Composer une santé en </span>
                      <span className="text-purple-600">commun</span>
                    </h2>
                  </div>
                  <div className="max-w-sm mx-auto lg:mx-0">
                    <p className="mb-6 text-gray-400 leading-loose">
                      P4Pillon est une initiative de recherche et développement
                      en soins de premier recours ayant pour objectif de changer
                      le paradigme du système de santé.
                    </p>
                    <div>
                      <a
                        className="inline-block mb-3 lg:mb-0 lg:mr-3 w-full lg:w-auto py-2 px-6 leading-loose bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-l-xl rounded-t-xl transition duration-200"
                        href="#"
                      >
                        Devenir partenaire
                      </a>
                      {/* <a
                      className='inline-block w-full lg:w-auto py-2 px-6 leading-loose text-white font-semibold bg-gray-900 border-2 border-gray-700 hover:border-gray-600 rounded-l-xl rounded-t-xl transition duration-200'
                      href='#'
                    >
                      How it works
                    </a> */}
                    </div>
                  </div>
                </div>
              </div>
              <div className="w-full lg:w-1/2 px-4 flex items-center justify-center">
                <div className="relative" style={{ zIndex: 0 }}>
                  <img
                    className="h-128 w-full max-w-lg object-cover rounded-3xl md:rounded-br-none"
                    src="/sante.webp"
                    alt=""
                  />
                  <img
                    className="hidden md:block absolute"
                    style={{ top: "-2rem", right: "3rem", zIndex: -1 }}
                    src="atis-assets/elements/blue-up.svg"
                    alt=""
                  />
                  <img
                    className="hidden md:block absolute"
                    style={{ bottom: "-2rem", right: "-2rem", zIndex: -1 }}
                    src="atis-assets/elements/wing-purple-down.svg"
                    alt=""
                  />
                  <img
                    className="hidden md:block absolute"
                    style={{ top: "3rem", right: "-3rem", zIndex: -1 }}
                    src="atis-assets/elements/bullets-pink-left.svg"
                    alt=""
                  />
                  <img
                    className="hidden md:block absolute"
                    style={{ bottom: "2.5rem", left: "-4.5rem", zIndex: -1 }}
                    src="atis-assets/elements/bullets-yellow-left.svg"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="hidden navbar-menu fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
          <div className="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25" />
          <nav className="relative flex flex-col py-6 px-6 h-full w-full bg-white border-r overflow-y-auto">
            <div className="flex items-center mb-8">
              <a className="mr-auto text-3xl font-bold leading-none" href="#">
                <img
                  className="h-10"
                  src="atis-assets/logo/atis/atis-color-black.svg"
                  alt=""
                  width="auto"
                />
              </a>
              <button className="navbar-close">
                <svg
                  className="h-6 w-6 text-gray-400 cursor-pointer hover:text-gray-500"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M6 18L18 6M6 6l12 12"
                  />
                </svg>
              </button>
            </div>
            <div>
              <ul>
                <li className="mb-1">
                  <a
                    className="block p-4 text-sm font-semibold text-gray-400 hover:bg-purple-50 hover:text-purple-600 rounded"
                    href="#"
                  >
                    Concepts
                  </a>
                </li>
                <li className="mb-1">
                  <a
                    className="block p-4 text-sm font-semibold text-gray-400 hover:bg-purple-50 hover:text-purple-600 rounded"
                    href="#"
                  >
                    Projets
                  </a>
                </li>
                <li className="mb-1">
                  <a
                    className="block p-4 text-sm font-semibold text-gray-400 hover:bg-purple-50 hover:text-purple-600 rounded"
                    href="#"
                  >
                    La SCIC
                  </a>
                </li>
                <li className="mb-1">
                  <a
                    className="block p-4 text-sm font-semibold text-gray-400 hover:bg-purple-50 hover:text-purple-600 rounded"
                    href="#"
                  >
                    Blog
                  </a>
                </li>
                {/* <li className="mb-1">
                  <a
                    className="block p-4 text-sm font-semibold text-gray-400 hover:bg-purple-50 hover:text-purple-600 rounded"
                    href="#"
                  >
                    Annuaire
                  </a>
                </li> */}
              </ul>
            </div>
            <div className="mt-auto">
              <div className="pt-6">
                <a
                  className="block px-4 py-3 mb-3 leading-loose text-xs text-center font-semibold leading-none bg-gray-50 hover:bg-gray-100 rounded-l-xl rounded-t-xl"
                  href="#"
                >
                  Sign In
                </a>
                <a
                  className="block px-4 py-3 mb-2 leading-loose text-xs text-center text-white font-semibold bg-pink-600 hover:bg-pink-700 rounded-l-xl rounded-t-xl"
                  href="#"
                >
                  Sign Up
                </a>
              </div>
              <p className="my-4 text-xs text-center text-gray-400">
                <span>© 2020 All rights reserved.</span>
              </p>
              <div className="text-center">
                <a className="inline-block px-1" href="#">
                  <img src="atis-assets/social/facebook-purple.svg" alt="" />
                </a>
                <a className="inline-block px-1" href="#">
                  <img src="atis-assets/social/twitter-purple.svg" alt="" />
                </a>
                <a className="inline-block px-1" href="#">
                  <img src="atis-assets/social/instagram-purple.svg" alt="" />
                </a>
              </div>
            </div>
          </nav>
        </div>
      </section>
    </>
  );
}