import CadCADLogo from "./CadCADLogo";

const productLinks = [
  { label: "Github", href: "https://github.com/cadCAD-org/cadCAD" },
  { label: "Video tutorials", href: "https://www.youtube.com/playlist?list=PLmWm8ksQq4YKtdRV-SoinhV6LbQMgX1we" },
  { label: "Inspirational videos", href: "https://www.youtube.com/playlist?list=PLmWm8ksQq4YJnNDMaslh20axb4r7fgW_a" },
  { label: "List of related resources", href: "https://community.cadcad.org/" },
  { label: "Join our community", href: "https://community.cadcad.org/" },
];

const communityLinks = [
  { label: "Discord", href: "https://discord.gg/FP2FGJb4tJ" },
  { label: "Discourse", href: "https://community.cadcad.org/" },
  { label: "Telegram", href: "https://t.me/joinchat/BehTglN4UOLe83MpgBelzw" },
  { label: "Twitter", href: "https://twitter.com/cadcad_org" },
];

export default function Footer() {
  return (
    <footer className="bg-white py-8">
      {/* BlockScience attribution */}
      <div className="container mx-auto border-b border-border pb-8">
        <div className="mx-auto flex w-full flex-col items-center p-6 text-center md:w-2/3">
          <p className="mb-4 text-lg text-gray-500">Created by BlockScience</p>
          <p className="text-gray-500">
            cadCAD was created as an internal tool at BlockScience &ndash; an
            engineering, R&amp;D and analytics firm specializing in complex
            systems design and validation
          </p>
        </div>
      </div>

      {/* Links grid */}
      <div className="container mx-auto px-8 pt-8">
        <div className="flex w-full flex-col py-6 md:flex-row">
          {/* Brand */}
          <div className="flex-1 px-4 pb-6">
            <CadCADLogo className="mb-4 h-10" />
          </div>

          {/* Product */}
          <div className="flex-1 px-4 pb-6">
            <p className="mb-4 text-sm font-bold uppercase tracking-wider text-gray-500">
              Product
            </p>
            <ul className="flex flex-col gap-2">
              {productLinks.map((link) => (
                <li key={link.label}>
                  <a
                    href={link.href}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-sm text-gray-500 transition-colors hover:text-cadcad-blue"
                  >
                    {link.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Community */}
          <div className="flex-1 px-4 pb-6">
            <p className="mb-4 text-sm font-bold uppercase tracking-wider text-gray-500">
              Community
            </p>
            <ul className="flex flex-col gap-2">
              {communityLinks.map((link) => (
                <li key={link.label}>
                  <a
                    href={link.href}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-sm text-gray-500 transition-colors hover:text-cadcad-blue"
                  >
                    {link.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Support us */}
          <div className="flex-1 px-4 pb-6">
            <p className="mb-4 text-sm font-bold uppercase tracking-wider text-gray-500">
              Support us
            </p>
            <ul className="flex flex-col gap-2">
              <li>
                <a
                  href="https://opencollective.com/cadcad1"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-sm text-gray-500 transition-colors hover:text-cadcad-blue"
                >
                  OpenCollective
                </a>
              </li>
              <li className="text-sm text-gray-500">
                <p>ETH Donation address:</p>
                <a
                  href="https://etherscan.io/address/0xbcd768c566143714309afe87feb901da7543f470"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="break-all text-gray-800 no-underline transition-colors hover:text-cadcad-blue"
                >
                  0xbcd768c566143714309afe87feb901da7543f470
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>
  );
}