export function DarkFooterWithNewsletter() {
  return (
    <section className="bg-gray-900 pt-16 pb-7">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col items-center justify-between gap-8 border-b border-gray-500 pb-14 sm:flex-row">
          <a href="https://pagedone.io/"></a>
          <div className="flex items-center gap-4">
            <a
              href="javascript:;"
              className="group rounded-full bg-white p-3 text-gray-700 transition-all duration-500 focus-within:bg-amber-500 focus-within:text-white focus-within:outline-0 hover:bg-amber-500 hover:text-white"
            >
              {/* SVG removed */}
            </a>
            <a
              href="javascript:;"
              className="group rounded-full bg-white p-3 text-gray-900 transition-all duration-500 focus-within:bg-amber-500 focus-within:text-white focus-within:outline-0 hover:bg-amber-500 hover:text-white"
            >
              {/* SVG removed */}
            </a>
            <a
              href="javascript:;"
              className="group rounded-full bg-white p-3 text-gray-700 transition-all duration-500 focus-within:bg-amber-500 focus-within:text-white focus-within:outline-0 hover:bg-amber-500 hover:text-white"
            >
              {/* SVG removed */}
            </a>
            <a
              href="javascript:;"
              className="group rounded-full bg-white p-3 text-gray-700 transition-all duration-500 focus-within:bg-amber-500 focus-within:text-white focus-within:outline-0 hover:bg-amber-500 hover:text-white"
            >
              {/* SVG removed */}
            </a>
          </div>
        </div>
        <div className="flex flex-col justify-between gap-8 border-b border-gray-500 py-14 lg:flex-row">
          <div className="flex w-full flex-col gap-6 max-lg:mx-auto max-lg:items-center max-lg:justify-between sm:flex-row md:gap-12 lg:gap-24">
            <div>
              <h6 className="mb-7 text-lg font-medium text-white max-lg:text-center">
                Pagedone
              </h6>
              <ul className="flex flex-col gap-6 max-lg:items-center">
                <li>
                  <a
                    href="javascript:;"
                    className="text-base font-normal whitespace-nowrap text-gray-400 transition-all duration-300 focus-within:text-amber-400 focus-within:outline-0 hover:text-amber-400 max-lg:text-center"
                  >
                    Home
                  </a>
                </li>
                <li>
                  <a
                    href="javascript:;"
                    className="text-base font-normal whitespace-nowrap text-gray-400 transition-all duration-300 focus-within:text-amber-400 focus-within:outline-0 hover:text-amber-400 max-lg:text-center"
                  >
                    About
                  </a>
                </li>
                <li>
                  <a
                    href="javascript:;"
                    className="text-base font-normal whitespace-nowrap text-gray-400 transition-all duration-300 focus-within:text-amber-400 focus-within:outline-0 hover:text-amber-400 max-lg:text-center"
                  >
                    Pricing
                  </a>
                </li>
                <li>
                  <a
                    href="javascript:;"
                    className="text-base font-normal whitespace-nowrap text-gray-400 transition-all duration-300 focus-within:text-amber-400 focus-within:outline-0 hover:text-amber-400 max-lg:text-center"
                  >
                    Pro Version
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h6 className="mb-7 text-lg font-medium text-white max-lg:text-center">
                Products
              </h6>
              <ul className="flex flex-col gap-6 max-lg:items-center">
                <li>
                  <a
                    href="javascript:;"
                    className="text-base font-normal whitespace-nowrap text-gray-400 transition-all duration-300 focus-within:text-amber-400 focus-within:outline-0 hover:text-amber-400"
                  >
                    Figma UI System
                  </a>
                </li>
                <li>
                  <a
                    href="javascript:;"
                    className="text-base font-normal whitespace-nowrap text-gray-400 transition-all duration-300 focus-within:text-amber-400 focus-within:outline-0 hover:text-amber-400"
                  >
                    Icons Assets
                  </a>
                </li>
                <li>
                  <a
                    href="javascript:;"
                    className="text-base font-normal whitespace-nowrap text-gray-400 transition-all duration-300 focus-within:text-amber-400 focus-within:outline-0 hover:text-amber-400"
                  >
                    Responsive Blocks
                  </a>
                </li>
                <li>
                  <a
                    href="javascript:;"
                    className="text-base font-normal whitespace-nowrap text-gray-400 transition-all duration-300 focus-within:text-amber-400 focus-within:outline-0 hover:text-amber-400"
                  >
                    Components Library
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h6 className="mb-7 text-lg font-medium text-white max-lg:text-center">
                Resources
              </h6>
              <ul className="flex flex-col gap-6 max-lg:items-center">
                <li>
                  <a
                    href="javascript:;"
                    className="text-base font-normal whitespace-nowrap text-gray-400 transition-all duration-300 focus-within:text-amber-400 focus-within:outline-0 hover:text-amber-400"
                  >
                    FAQs
                  </a>
                </li>
                <li>
                  <a
                    href="javascript:;"
                    className="text-base font-normal whitespace-nowrap text-gray-400 transition-all duration-300 focus-within:text-amber-400 focus-within:outline-0 hover:text-amber-400"
                  >
                    Quick Start
                  </a>
                </li>
                <li>
                  <a
                    href="javascript:;"
                    className="text-base font-normal whitespace-nowrap text-gray-400 transition-all duration-300 focus-within:text-amber-400 focus-within:outline-0 hover:text-amber-400"
                  >
                    Documentation
                  </a>
                </li>
                <li>
                  <a
                    href="javascript:;"
                    className="text-base font-normal whitespace-nowrap text-gray-400 transition-all duration-300 focus-within:text-amber-400 focus-within:outline-0 hover:text-amber-400"
                  >
                    User Guide
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div className="w-full max-lg:mx-auto lg:max-w-md">
            <h6 className="mb-7 text-lg font-medium text-white">Newsletter</h6>
            <div className="rounded-3xl bg-gray-800 p-5">
              <form action="#" className="flex flex-col gap-5">
                <div className="relative">
                  <label className="mb-2 flex items-center text-base font-medium text-gray-400">
                    Email
                  </label>
                  <input
                    type="text"
                    id="default-search"
                    className="block w-full rounded-full border border-gray-400 bg-transparent px-5 py-3 text-lg leading-relaxed font-normal text-white placeholder-gray-400 shadow-xs focus-within:border-gray-300 focus:outline-none"
                    placeholder="harsh@pagedone.com"
                    required
                  />
                </div>
                <div className="flex flex-col items-center justify-between gap-3 min-[540px]:flex-row">
                  <div className="black flex items-start">
                    <input
                      id="checked-checkbox"
                      type="checkbox"
                      className="mr-2 aspect-square h-5 w-5 cursor-pointer appearance-none rounded-md border border-gray-600 bg-transparent checked:border-gray-400 checked:bg-gray-800 checked:bg-center checked:bg-no-repeat hover:border-gray-400 hover:bg-gray-900"
                      defaultChecked
                    />
                    <label
                      htmlFor="checked-checkbox"
                      className="cursor-pointer text-sm font-normal text-gray-400"
                    >
                      I agree with{" "}
                      <a href="javascript:;" className="text-amber-500">
                        Privacy Policy
                      </a>{" "}
                      and{" "}
                      <a href="javascript:;" className="text-amber-500">
                        Terms of Condition
                      </a>
                    </label>
                  </div>
                  <input
                    type="submit"
                    defaultValue="Send"
                    className="cursor-pointer rounded-full bg-amber-500 px-7 py-3 text-base font-semibold text-white transition-all duration-500 hover:bg-white hover:text-gray-900"
                  />
                </div>
              </form>
            </div>
          </div>
        </div>
        <div className="flex flex-col-reverse items-center justify-between gap-5 pt-7 sm:flex-row">
          <span className="text-sm font-normal text-gray-400">
            <a href="https://pagedone.io/">©pagedone</a> 2023, All rights
            reserved.
          </span>
          <div className="relative text-gray-500 focus-within:text-gray-900">
            <div className="pointer-events-none absolute inset-y-0 right-6 flex items-center pl-3">
              {/* SVG removed */}
            </div>
            <button
              id="default-search"
              className="block w-full rounded-full border border-gray-700 bg-transparent py-3 pr-12 pl-6 text-base leading-relaxed font-normal text-gray-50 placeholder-gray-400 shadow-xs transition-all duration-500 focus:outline-none lg:min-w-[448px]"
            >
              Have a question? talk to us
            </button>
          </div>
        </div>
      </div>
    </section>
  )
}