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

export default function CareersSection() {
  return (
    <section className="section pd-top-0 overflow-hidden">
      <div className="w-layout-blockcontainer container-default w-container">
        <div
          data-w-id="57c6d91a-ff5b-0c4b-0e98-f6574583d612"
          style={{ opacity: "0", filter: "blur(8px)" }}
          className="inner-container _650px center"
        >
          <div className="text-center">
            <div className="subtitle">Who We Build For</div>
            <div className="mg-top-4x-extra-small">
              <h2>DAL Code 目前最优先服务的四类用户</h2>
            </div>
            <div className="mg-top-4x-extra-small">
              <div className="inner-container _566px center">
                <p>我们不想做一个谁都能说得通、但谁都不真正依赖的 AI IDE，所以官网也直接把核心目标用户讲清楚。</p>
              </div>
            </div>
          </div>
        </div>
        <div className="mg-top-regular">
          <div
            data-w-id="97dc1372-f411-c523-0bef-128c83baf08b"
            style={{ opacity: "0", filter: "blur(8px)" }}
            className="corner-gradient-container"
          >
            <div className="border-wrapper">
              <div className="w-layout-grid values-grid">
                {TARGET_PERSONAS.map((persona) => (
                  <div key={persona.title} className="value-item">
                    <div className="display-4 medium text-titles">{persona.title}</div>
                    <div className="mg-top-3x-extra-small">
                      <p>{persona.description}</p>
                    </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>
      </div>
    </section>
  )
}