import Link from "next/link"

import { SOCIAL_LINKS } from "@/lib/site-content"

export default function SocialLinksSection() {
  return (
    <section
      data-wf--social-links-section--variant="padding-top-none"
      className="section social-links-section w-variant-daeb6173-296b-8c16-4f2d-1c7fb3f823cc"
    >
      <div className="w-layout-blockcontainer container-default w-container">
        <div className="inner-container _1068px center">
          <div className="position-relative---z-index-1">
            <div data-w-id="f2339eb0-437b-d416-3f53-159199e8df84" className="title-left-content-right">
              <div className="inner-container _460px">
                <div className="subtitle">Stay Connected</div>
                <div className="mg-top-4x-extra-small">
                  <h2>继续跟进 DAL Code 的建设进展</h2>
                </div>
              </div>
              <Link id="w-node-_99805214-dd54-e7f3-2549-05c0df1040fb-df1040fb" href="/contact" className="primary-button w-inline-block">
                <div className="button-content">
                  <div>联系团队</div>
                  <div className="button-icon-wrapper primary">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="100%"
                      viewBox="0 0 17 17"
                      fill="none"
                      className="squared-icon"
                    >
                      <path
                        d="M6.25391 3.45312L10.7458 8.01563L6.25391 12.5781"
                        stroke="currentColor"
                        strokeWidth="1.5"
                        strokeLinecap="square"
                      />
                    </svg>
                    <div className="button-icon-bg" />
                    <div className="button-icon-bg-inside" />
                  </div>
                </div>
              </Link>
            </div>
          </div>
        </div>
      </div>
      <div data-w-id="f2339eb0-437b-d416-3f53-159199e8df8e" className="container-large">
        <div className="corner-gradient-container">
          <div className="border-wrapper">
            <div className="w-layout-grid social-media-grid">
              {SOCIAL_LINKS.map((link) => (
                <a
                  key={link.label}
                  href={link.href}
                  target={link.href.startsWith("http") ? "_blank" : undefined}
                  rel={link.href.startsWith("http") ? "noopener noreferrer" : undefined}
                  className="social-media-link w-inline-block"
                >
                  <div>{link.label}</div>
                </a>
              ))}
            </div>
          </div>
          <div data-wf--corner-gradient-outline--variant="small" className="corner-gradient-wrapper">
            <div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 top-left" />
            <div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 bottom-left" />
            <div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 top-right" />
            <div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 bottom-right" />
            <div className="corner-gradient-vertical w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 bottom-left" />
            <div className="corner-gradient-vertical w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 bottom-right" />
            <div className="corner-gradient-vertical w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 top-left" />
            <div className="corner-gradient-vertical w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 top-right" />
          </div>
        </div>
      </div>
    </section>
  )
}