import React from 'react';
import Logo from '@/components/Logo';

const DevStudio: React.FC = () => {
  return (
    <p className="inset-x-0 mt-20 bg-gradient-to-b from-black via-neutral-950 to-neutral-900 bg-clip-text text-center text-5xl font-bold text-transparent md:text-9xl lg:text-[12rem] xl:text-[13rem]">
      WEBklar
    </p>
  );
};

const Footer: React.FC = () => {
  return (
    <div className="relative w-full overflow-hidden border-t border-white/[0.1] bg-black px-8 py-20 dark:border-white/[0.1] dark:bg-black">
      <div className="mx-auto flex max-w-7xl flex-col items-start justify-between text-sm text-neutral-500 sm:flex-row md:px-8">
        <div>
          <div className="mr-0 mb-4 md:mr-4 md:flex">
            <a className="relative z-20 mr-4 flex items-center space-x-2 px-2 py-1 text-sm font-normal text-white" href="/">
              <Logo width={30} height={30} />
              <span className="font-medium text-white">WEBklar</span>
            </a>
          </div>
          <div className="mt-2 ml-2">© copyright WEBklar 2024. All rights reserved.</div>
        </div>
        <div className="mt-10 grid grid-cols-2 items-start gap-10 sm:mt-0 md:mt-0 lg:grid-cols-4">
          <div className="flex w-full flex-col justify-center space-y-4">
            <p className="hover:text-neutral-300 font-bold text-neutral-600 transition-colors dark:text-neutral-300">Pages</p>
            <ul className="hover:text-neutral-300 list-none space-y-4 text-neutral-600 transition-colors dark:text-neutral-300">
              <li className="list-none">
                <a className="hover:text-neutral-300 transition-colors" href="/products">All Products</a>
              </li>
              <li className="list-none">
                <a className="hover:text-neutral-300 transition-colors" href="/products">Studio</a>
              </li>
              <li className="list-none">
                <a className="hover:text-neutral-300 transition-colors" href="/products">Clients</a>
              </li>
              <li className="list-none">
                <a className="hover:text-neutral-300 transition-colors" href="/products">Pricing</a>
              </li>
              <li className="list-none">
                <a className="hover:text-neutral-300 transition-colors" href="/products">Blog</a>
              </li>
            </ul>
          </div>
          <div className="flex flex-col justify-center space-y-4">
            <p className="hover:text-neutral-300 font-bold text-neutral-600 transition-colors dark:text-neutral-300">Socials</p>
            <ul className="hover:text-neutral-300 list-none space-y-4 text-neutral-600 transition-colors dark:text-neutral-300">
              <li className="list-none">
                <a className="hover:text-neutral-300 transition-colors" href="/products">Facebook</a>
              </li>
              <li className="list-none">
                <a className="hover:text-neutral-300 transition-colors" href="/products">Instagram</a>
              </li>
              <li className="list-none">
                <a className="hover:text-neutral-300 transition-colors" href="/products">Twitter</a>
              </li>
              <li className="list-none">
                <a className="hover:text-neutral-300 transition-colors" href="/products">LinkedIn</a>
              </li>
            </ul>
          </div>
          <div className="flex flex-col justify-center space-y-4">
            <p className="hover:text-neutral-300 font-bold text-neutral-600 transition-colors dark:text-neutral-300">Legal</p>
            <ul className="hover:text-neutral-300 list-none space-y-4 text-neutral-600 transition-colors dark:text-neutral-300">
              <li className="list-none">
                <a className="hover:text-neutral-300 transition-colors" href="/agb">AGBs</a>
              </li>
              <li className="list-none">
                <a className="hover:text-neutral-300 transition-colors" href="/impressum">Impressum</a>
              </li>
            </ul>
          </div>
          <div className="flex flex-col justify-center space-y-4">
            <p className="hover:text-neutral-300 font-bold text-neutral-600 transition-colors dark:text-neutral-300">Register</p>
            <ul className="hover:text-neutral-300 list-none space-y-4 text-neutral-600 transition-colors dark:text-neutral-300">
              <li className="list-none">
                <a className="hover:text-neutral-300 transition-colors" href="/products">Sign Up</a>
              </li>
              <li className="list-none">
                <a className="hover:text-neutral-300 transition-colors" href="/products">Login</a>
              </li>
              <li className="list-none">
                <a className="hover:text-neutral-300 transition-colors" href="/products">Forgot Password</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <p className="inset-x-0 mt-20 bg-gradient-to-b from-black via-neutral-950 to-neutral-900 bg-clip-text text-center text-5xl font-bold text-transparent md:text-9xl lg:text-[12rem] xl:text-[13rem]">
        WEBklar
      </p>
    </div>
  );
};

export { DevStudio, Footer };
export default Footer;