import React from "react";
import { Facebook, Twitter, Linkedin, Instagram, Youtube } from "lucide-react";
const socialLinks = [
  { id: "FB", icon: Facebook },
  { id: "TW", icon: Twitter },
  { id: "LI", icon: Linkedin },
  { id: "IG", icon: Instagram },
  { id: "YT", icon: Youtube },
];
const Footer17: React.FC = () => {
  return (
    <footer className="bg-white text-gray-900 py-32 px-8 overflow-hidden relative">
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-7xl h-full opacity-20 pointer-events-none">
        <div className="absolute top-[20%] left-[10%] w-[60%] h-[40%] bg-purple-500 rounded-full blur-[120px] animate-pulse"></div>
        <div className="absolute bottom-[20%] right-[10%] w-[50%] h-[40%] bg-blue-500 rounded-full blur-[120px] delay-1000 animate-pulse"></div>
      </div>

      <div className="max-w-7xl mx-auto relative z-10">
        <div className="flex flex-col items-center text-center mb-32">
          <div className="inline-block px-4 py-1.5 bg-blue-50 text-blue-600 rounded-full text-[10px] font-black uppercase tracking-widest mb-8 border border-blue-100">
            Ready to scale?
          </div>
          <h2 className="text-6xl md:text-8xl font-black tracking-tighter leading-[0.9] max-w-3xl mb-12">
            Start building with UI-Layouts today.
          </h2>
          <div className="flex flex-col sm:flex-row gap-4">
            <button className="cursor-pointer bg-black text-white px-10 py-5 rounded-2xl font-bold text-lg hover:bg-gray-800 transition-all shadow-xl shadow-gray-800">
              Get Started Free
            </button>
            <button className="cursor-pointer bg-white border border-gray-200 text-black px-10 py-5 rounded-2xl font-bold text-lg hover:bg-gray-50 transition-all">
              Talk to Sales
            </button>
          </div>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-12 bg-white p-5 border-t border-gray-100 rounded-t-2xl">
          <div className="col-span-2 lg:col-span-2 space-y-8">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 grid place-items-center bg-black rounded-xl">
                <svg
                  width="287"
                  height="320"
                  viewBox="0 0 287 320"
                  fill="none"
                  className="w-6 h-6"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M32.8394 0.12012C34.2921 0.114411 35.7449 0.107445 37.1977 0.0993221C41.1297 0.0814249 45.0615 0.082553 48.9935 0.0882645C52.2835 0.0913623 55.5735 0.0852571 58.8635 0.0792258C66.6304 0.0651925 74.3972 0.0667309 82.1641 0.0781277C90.1581 0.0895991 98.1519 0.0755471 106.146 0.0487312C113.025 0.0265247 119.904 0.0199482 126.784 0.0258076C130.885 0.0291677 134.987 0.0268264 139.088 0.0095566C142.949 -0.00598896 146.808 -0.00187361 150.669 0.0168617C152.079 0.0205272 153.489 0.0174994 154.899 0.00697595C167.131 -0.0772891 175.701 1.98269 184.678 10.5007C189.935 16.2577 190.635 22.1093 190.701 29.5984C190.725 31.0027 190.749 32.407 190.774 33.8113C190.809 36.0053 190.838 38.1988 190.852 40.3931C190.937 52.0666 192.253 60.8495 200.479 69.6726C210.265 78.5252 222.255 81.6207 235.162 81.7C236.642 81.7232 238.122 81.7473 239.602 81.7722C241.901 81.8071 244.2 81.8366 246.499 81.8501C258.829 81.9364 269.498 82.7549 278.869 91.7234C284.615 97.9702 285.675 103.071 285.673 111.43C285.676 112.232 285.68 113.035 285.684 113.861C285.695 116.553 285.699 119.244 285.703 121.935C285.709 123.864 285.716 125.792 285.723 127.721C285.744 134.056 285.754 140.392 285.764 146.727C285.768 148.909 285.772 151.09 285.776 153.272C285.795 163.52 285.81 173.769 285.818 184.017C285.828 195.846 285.854 207.674 285.894 219.502C285.925 228.646 285.939 237.791 285.943 246.935C285.945 252.396 285.954 257.856 285.979 263.317C286.002 268.455 286.007 273.593 285.996 278.731C285.996 280.615 286.002 282.498 286.016 284.381C286.034 286.958 286.027 289.534 286.013 292.11C286.03 293.221 286.03 293.221 286.047 294.354C285.968 300.766 283.808 305.865 279.631 310.731C278.998 311.261 278.365 311.791 277.713 312.337C277.088 312.879 276.463 313.422 275.819 313.981C268.193 319.112 261.28 318.96 252.304 318.928C250.861 318.934 249.418 318.941 247.975 318.949C244.07 318.967 240.165 318.966 236.26 318.96C232.992 318.957 229.724 318.963 226.457 318.969C218.743 318.983 211.029 318.982 203.314 318.97C195.375 318.959 187.436 318.973 179.496 319C172.664 319.022 165.831 319.028 158.999 319.023C154.925 319.019 150.852 319.022 146.778 319.039C142.944 319.054 139.11 319.05 135.276 319.031C133.876 319.028 132.475 319.031 131.075 319.041C120.224 319.117 111.299 317.802 103.088 310.212C102.285 309.494 101.482 308.776 100.655 308.036C96.2284 302.814 95.1578 297.918 95.1194 291.192C95.1086 290.515 95.0977 289.839 95.0866 289.142C95.0526 286.998 95.0368 284.855 95.0257 282.712C94.9576 269.703 94.5635 257.782 85.5257 247.524C79.3031 242 72.4452 238.877 64.5257 236.524C63.6981 236.261 63.6981 236.261 62.8538 235.992C59.5252 235.323 56.2121 235.348 52.8303 235.313C51.2939 235.285 49.7574 235.256 48.221 235.227C45.8186 235.186 43.4165 235.149 41.0139 235.123C28.2719 234.97 17.3779 234.587 7.52565 225.524C1.94067 219.769 0.225657 215.505 0.258224 207.535C0.253693 206.724 0.249164 205.913 0.244495 205.078C0.231822 202.356 0.233472 199.635 0.235123 196.914C0.229139 194.964 0.222334 193.014 0.214767 191.064C0.197081 185.765 0.19241 180.465 0.191135 175.165C0.189237 170.742 0.181882 166.318 0.174793 161.895C0.158501 151.458 0.153623 141.022 0.155045 130.585C0.156246 119.818 0.135147 109.052 0.103558 98.2854C0.0774061 89.0428 0.0666764 79.8003 0.067955 70.5577C0.068465 65.037 0.0627613 59.5166 0.0415993 53.996C0.0222361 48.8028 0.0220794 43.6099 0.0366325 38.4166C0.0387242 36.5119 0.0339987 34.6072 0.0219116 32.7025C0.006463 30.0992 0.0157644 27.4971 0.0311737 24.8938C0.0208866 24.1427 0.0105989 23.3915 0 22.6175C0.0818172 16.3492 2.06882 12.296 6.20143 7.63355C6.74155 7.18495 7.28167 6.73636 7.83815 6.27417C8.37053 5.81527 8.90292 5.35636 9.45143 4.88355C17.0378 -0.088304 23.9735 0.0886664 32.8394 0.12012ZM97.5257 85.5242C96.4187 88.755 96.3976 91.8231 96.3919 95.2173C96.3877 96.3782 96.3834 97.539 96.379 98.7351C96.3795 100.005 96.3799 101.275 96.3804 102.583C96.3774 103.936 96.374 105.29 96.3702 106.644C96.3614 110.317 96.359 113.991 96.3584 117.664C96.3574 120.731 96.3538 123.798 96.3502 126.864C96.3421 134.098 96.3396 141.332 96.3403 148.566C96.341 156.03 96.3304 163.494 96.3146 170.958C96.3015 177.367 96.2962 183.775 96.2968 190.184C96.2971 194.011 96.2942 197.839 96.2836 201.666C96.2739 205.265 96.2739 208.863 96.2811 212.462C96.2827 214.412 96.2743 216.363 96.2657 218.313C96.2699 219.474 96.2741 220.635 96.2784 221.831C96.2779 222.84 96.2773 223.849 96.2768 224.888C96.5346 227.619 97.0384 229.235 98.5257 231.524C102.589 233.866 106.697 233.809 111.266 233.783C112.029 233.786 112.792 233.79 113.579 233.794C116.092 233.802 118.606 233.797 121.119 233.79C122.871 233.791 124.624 233.793 126.376 233.796C130.044 233.799 133.712 233.794 137.381 233.785C142.078 233.774 146.776 233.78 151.473 233.792C155.09 233.799 158.707 233.797 162.324 233.792C164.055 233.79 165.787 233.792 167.519 233.797C169.941 233.802 172.363 233.794 174.785 233.783C175.498 233.787 176.211 233.791 176.946 233.795C181.09 233.76 185.426 233.624 188.526 230.524C188.633 228.686 188.67 226.843 188.68 225.002C188.688 223.803 188.697 222.604 188.706 221.369C188.71 220.029 188.714 218.688 188.719 217.347C188.726 215.945 188.735 214.542 188.743 213.14C188.77 208.522 188.785 203.904 188.799 199.286C188.804 197.698 188.81 196.111 188.815 194.523C188.837 187.92 188.856 181.317 188.867 174.715C188.883 165.242 188.916 155.769 188.973 146.296C189.012 139.641 189.031 132.986 189.037 126.332C189.04 122.354 189.053 118.377 189.085 114.4C189.115 110.657 189.121 106.916 189.109 103.174C189.109 101.8 189.118 100.426 189.135 99.0522C189.158 97.1774 189.147 95.3022 189.134 93.4273C189.137 92.3777 189.14 91.3282 189.144 90.2468C188.731 87.3214 188.731 87.3214 186.218 85.1861C182.652 82.9852 179.558 82.9768 175.494 83.0383C174.7 83.0345 173.906 83.0307 173.088 83.0268C170.472 83.0194 167.857 83.0408 165.24 83.0632C163.419 83.0656 161.597 83.0665 159.775 83.066C155.961 83.0691 152.148 83.0857 148.334 83.1125C143.446 83.1466 138.558 83.1542 133.67 83.1527C129.909 83.1532 126.149 83.1642 122.389 83.1787C120.587 83.185 118.784 83.189 116.982 83.1904C114.464 83.1948 111.946 83.2123 109.428 83.2336C108.311 83.2323 108.311 83.2323 107.172 83.2309C101.999 83.2486 101.999 83.2486 97.5257 85.5242Z"
                    fill="white"
                  />
                </svg>
              </div>
              <span className="text-2xl font-black tracking-tighter italic">
                Layouts.
              </span>
            </div>
            <p className="text-gray-500 text-lg font-medium max-w-xs">
              The infrastructure for the modern internet economy.
            </p>
            <div className="flex gap-4">
              {socialLinks.map((s) => (
                <div
                  key={s.id}
                  className="w-10 h-10 rounded-full bg-gray-50 border border-gray-100 flex items-center justify-center hover:bg-white hover:shadow-lg transition-all cursor-pointer"
                >
                  <s.icon size={18} strokeWidth={2.5} />
                </div>
              ))}
            </div>
          </div>

          <div className="space-y-6">
            <h4 className="text-[10px] font-black uppercase tracking-widest text-gray-400">
              Product
            </h4>
            <ul className="space-y-4 text-sm font-bold">
              <li className="hover:text-blue-600 cursor-pointer transition-colors">
                Infrastructure
              </li>
              <li className="hover:text-blue-600 cursor-pointer transition-colors">
                Payments
              </li>
              <li className="hover:text-blue-600 cursor-pointer transition-colors">
                Authentication
              </li>
              <li className="hover:text-blue-600 cursor-pointer transition-colors">
                Global Network
              </li>
            </ul>
          </div>

          <div className="space-y-6">
            <h4 className="text-[10px] font-black uppercase tracking-widest text-gray-400">
              Developers
            </h4>
            <ul className="space-y-4 text-sm font-bold">
              <li className="hover:text-blue-600 cursor-pointer transition-colors">
                Documentation
              </li>
              <li className="hover:text-blue-600 cursor-pointer transition-colors">
                API Reference
              </li>
              <li className="hover:text-blue-600 cursor-pointer transition-colors">
                Open Source
              </li>
              <li className="hover:text-blue-600 cursor-pointer transition-colors">
                Community
              </li>
            </ul>
          </div>

          <div className="space-y-6">
            <h4 className="text-[10px] font-black uppercase tracking-widest text-gray-400">
              Resources
            </h4>
            <ul className="space-y-4 text-sm font-bold">
              <li className="hover:text-blue-600 cursor-pointer transition-colors">
                Help Center
              </li>
              <li className="hover:text-blue-600 cursor-pointer transition-colors">
                Changelog
              </li>
              <li className="hover:text-blue-600 cursor-pointer transition-colors">
                Contact
              </li>
              <li className="hover:text-blue-600 cursor-pointer transition-colors">
                Partners
              </li>
            </ul>
          </div>

          <div className="space-y-6">
            <h4 className="text-[10px] font-black uppercase tracking-widest text-gray-400">
              Company
            </h4>
            <ul className="space-y-4 text-sm font-bold">
              <li className="hover:text-blue-600 cursor-pointer transition-colors">
                About Us
              </li>
              <li className="hover:text-blue-600 cursor-pointer transition-colors">
                Careers
              </li>
              <li className="hover:text-blue-600 cursor-pointer transition-colors">
                Privacy
              </li>
              <li className="hover:text-blue-600 cursor-pointer transition-colors">
                Terms
              </li>
            </ul>
          </div>
        </div>

        <div className="mt-32 pt-12 border-t border-gray-100 flex flex-col md:flex-row justify-between items-center gap-6 text-[10px] font-black uppercase tracking-widest text-gray-400">
          <p>© 2025 Layouts Networks, Inc. All rights reserved.</p>
          <div className="flex gap-12">
            <div className="flex items-center gap-2">
              <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
              All Systems Operational
            </div>
            <div className="flex items-center gap-2">
              <span className="opacity-50">United States — EN</span>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer17;