import Image from "next/image"
import Link from "next/link"

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

export default function MissionSection() {
  return (
    <section className="section-small bg-neutral overflow-hidden">
      <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="384ef9a0-4895-c961-61d5-c03fea5bc587"
              style={{ opacity: "0", filter: "blur(8px)" }}
              className="title-left-content-right"
            >
              <div className="inner-container _460px">
                <div className="subtitle">Operating Principles</div>
                <div className="mg-top-4x-extra-small">
                  <h2>DAL Code 背后的八个产品原则</h2>
                </div>
                <div className="mg-top-4x-extra-small">
                  <p>
                    从中文表达、权限审批到开源边界，我们更关心产品是否能被真实团队长期采用，而不是只在 Demo
                    里显得聪明。
                  </p>
                </div>
              </div>
              <Link href="/contact" className="tertiary-button w-inline-block">
                <div className="button-content">
                  <div>联系我们</div>
                  <div className="button-icon-wrapper secondary">
                    <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 bg-neutral-800" />
                    <div className="button-icon-bg-inside bg-neutral-600" />
                  </div>
                </div>
              </Link>
            </div>
          </div>
        </div>
      </div>
      <div
        data-w-id="ff387e65-d5fd-6c3f-9251-5bd1999b387a"
        style={{ opacity: "0", filter: "blur(8px)" }}
        className="container-large"
      >
        <div className="corner-gradient-container">
          <div className="border-wrapper">
            <div className="w-layout-grid values-grid">
              {ABOUT_VALUES.map((value) => (
                <div key={value.title} className="value-item">
                  <Image
                    src={value.icon}
                    width={64}
                    height={64}
                    alt={value.title}
                    data-wf--icon-square--variant="small"
                    className="icon-square w-variant-9e5d53ad-bad6-e5fc-88e0-62e38939214f"
                  />
                  <div className="display-4 medium text-titles">{value.title}</div>
                </div>
              ))}
            </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>
  )
}