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

import { TEAM_MEMBERS } from "@/lib/team-data"

export default function TeamSection() {
  return (
    <section className="section overflow-hidden">
      <div className="w-layout-blockcontainer container-default w-container">
        <div
          data-w-id="a61686b5-826c-1f8d-dc8d-43cbbec7dcb0"
          style={{ opacity: "0", filter: "blur(8px)" }}
          className="inner-container _650px center"
        >
          <div className="text-center">
            <div className="subtitle">Build Areas</div>
            <div className="mg-top-4x-extra-small">
              <h2>我们正在建设的四个核心能力面</h2>
            </div>
            <div className="mg-top-5x-extra-small">
              <p>
                这里不是虚构团队介绍，而是 DAL Code 当前最重要的产品与工程能力切面。每一层都在决定这是不是一个能长期交付结果的 AI IDE。
              </p>
            </div>
          </div>
        </div>
        <div
          data-w-id="b285eee5-c66b-a051-c7d9-48089305f267"
          style={{ opacity: "0", filter: "blur(8px)" }}
          className="team-members-container"
        >
          <div className="corner-gradient-container">
            <div className="border-wrapper">
              <div className="collection-list-wrapper w-dyn-list">
                <div role="list" className="team-members-grid w-dyn-items">
                  {TEAM_MEMBERS.map((member) => (
                    <div key={member.slug} role="listitem" className="flex-item w-dyn-item">
                      <div className="w-layout-grid team-member-item">
                        <Link href={`/team-members/${member.slug}`} className="avatar-link w-inline-block">
                          <Image
                            src={member.image}
                            alt={member.name}
                            sizes="(max-width: 767px) 100vw, (max-width: 991px) 727px, 940px"
                            className="avatar-image fit-cover"
                            fill
                            style={{ objectFit: "cover" }}
                          />
                        </Link>
                        <div className="team-member-item-content">
                          <div className="team-member-heading">
                            <Link href={`/team-members/${member.slug}`} className="heading-link w-inline-block">
                              <h3 className="display-5">{member.name}</h3>
                            </Link>
                            <div className="team-member-job-title">
                              <div className="subtitle">{member.role}</div>
                            </div>
                          </div>
                          <div className="mg-top-5x-extra-small">
                            <p>{member.bio}</p>
                          </div>
                        </div>
                        <div className="team-member-buttons-wrapper">
                          <Link
                            href={`/team-members/${member.slug}`}
                            className="secondary-button small w-inline-block"
                          >
                            <div className="button-content">
                              <div>查看详情</div>
                            </div>
                          </Link>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
            <div className="mg-top-40px text-center">
              <Link href="/careers" 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>
    </section>
  )
}