import Link from "next/link"

import { CAREERS } from "@/lib/careers-data"

const CAREERS_BY_DEPARTMENT = CAREERS.reduce<Record<string, typeof CAREERS>>((acc, career) => {
  if (!acc[career.department]) {
    acc[career.department] = []
  }

  acc[career.department].push(career)
  return acc
}, {})
const CAREER_GROUPS = Object.entries(CAREERS_BY_DEPARTMENT)

export default function ValuesSection() {
  return (
    <section id="more-positions" className="section pd-top-0 overflow-hidden">
      <div className="w-layout-blockcontainer container-default w-container">
        <div className="inner-container _1068px center">
          <div
            data-w-id="5c1fa9c3-1e74-faeb-fdc1-94202ec40445"
            style={{ opacity: "0", filter: "blur(8px)" }}
            className="title-left-content-right"
          >
            <div className="inner-container _460px">
              <h2>当前重点建设方向</h2>
              <div className="mg-top-4x-extra-small">
                <p>我们把官网里的“职位”改成能力建设清单，用更真实的方式展示 DAL Code 接下来 12 个月的投入重点。</p>
              </div>
            </div>
            <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
        data-w-id="21838807-4067-5a92-54da-582050a56a5c"
        style={{ opacity: "0", filter: "blur(8px)" }}
        className="container-large"
      >
        <div className="corner-gradient-container">
          <div className="box-wrapper">
            {CAREER_GROUPS.map(([department, roles], index) => (
              <div key={department} className="border-wrapper">
                <div className="box-grid">
                  <div className="box-heading-wrapper">
                    <h3 className="display-4">{department}</h3>
                  </div>
                  <div className="w-dyn-list">
                    <div role="list" className="careers-grid w-dyn-items">
                      {roles.map((career) => (
                        <div key={career.slug} role="listitem" className="flex-item w-dyn-item">
                          <Link href={`/careers/${career.slug}`} className="career-item w-inline-block">
                            <div>
                              <h3 className="display-4">{career.title}</h3>
                              <div className="mg-top-3x-extra-small">
                                <div className="career-item-details">
                                  <div className="item-details">{career.location}</div>
                                  <div className="item-details-divider" />
                                  <div className="item-details">{career.type}</div>
                                </div>
                              </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 className="career-item-bg" />
                          </Link>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
                {index < CAREER_GROUPS.length - 1 ? (
                  <div className="box-divider">
                    <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>
                  </div>
                ) : null}
              </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>
  )
}