export default function Community() {
  return (
    <>
      {/* Community section */}
      <section className="border-b border-border bg-white py-8">
        <div className="container mx-auto flex flex-col pt-4 pb-12 md:flex-row">
          <div className="w-full px-6 md:w-1/2">
            <h2 className="mb-4 text-3xl font-bold text-gray-800">
              Join our community
            </h2>
          </div>
          <div className="w-full px-6 text-xl text-gray-800 md:w-1/2">
            <p className="mb-4 leading-relaxed">
              We&apos;ve open-sourced cadCAD for the community and we want it to
              become a community-driven project. Regardless of your skillset, we
              invite you to join the conversation through any of our channels:
            </p>
            <div className="flex flex-wrap gap-3">
              <a
                href="https://t.me/joinchat/BehTglN4UOLe83MpgBelzw"
                target="_blank"
                rel="noopener noreferrer"
                className="rounded bg-cadcad-lightblue px-4 py-2 text-base font-bold text-white transition-colors hover:bg-cadcad-lightblue-hover"
              >
                Telegram
              </a>
              <a
                href="https://discord.gg/FP2FGJb4tJ"
                target="_blank"
                rel="noopener noreferrer"
                className="rounded bg-cadcad-lightblue px-4 py-2 text-base font-bold text-white transition-colors hover:bg-cadcad-lightblue-hover"
              >
                Discord
              </a>
              <a
                href="https://community.cadcad.org/"
                target="_blank"
                rel="noopener noreferrer"
                className="rounded bg-cadcad-lightblue px-4 py-2 text-base font-bold text-white transition-colors hover:bg-cadcad-lightblue-hover"
              >
                Discourse
              </a>
              <a
                href="https://twitter.com/cadcad_org"
                target="_blank"
                rel="noopener noreferrer"
                className="rounded bg-cadcad-lightblue px-4 py-2 text-base font-bold text-white transition-colors hover:bg-cadcad-lightblue-hover"
              >
                Twitter
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Donation section */}
      <section className="border-b border-border bg-white py-8">
        <div className="container mx-auto flex flex-col pt-4 pb-12 md:flex-row">
          <div className="w-full px-6 md:w-1/2">
            <h2 className="mb-4 text-3xl font-bold text-gray-800">
              Support us with a donation
            </h2>
          </div>
          <div className="w-full px-6 text-xl text-gray-800 md:w-1/2">
            <p className="mb-4 leading-relaxed">
              You can support our product on OpenCollective:{" "}
              <a
                href="https://opencollective.com/cadcad1"
                target="_blank"
                rel="noopener noreferrer"
                className="text-cadcad-blue hover:text-cadcad-lightblue transition-colors"
              >
                https://opencollective.com/cadcad1
              </a>
            </p>
            <p className="leading-relaxed">
              You can also send crypto donations to our multisig at:{" "}
              <a
                href="https://etherscan.io/address/0xbcd768c566143714309afe87feb901da7543f470"
                target="_blank"
                rel="noopener noreferrer"
                className="text-cadcad-blue hover:text-cadcad-lightblue transition-colors break-all text-base"
              >
                0xbcd768c566143714309afe87feb901da7543f470
              </a>
            </p>
          </div>
        </div>
      </section>
    </>
  );
}