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

export default function WorkflowSteps() {
  return (
    <section className="section bg-neutral overflow-hidden">
      <div className="w-layout-blockcontainer container-default w-container">
        <div
          data-w-id="workflow-title"
          style={{ opacity: "0", filter: "blur(8px)" }}
          className="title-left-content-right"
        >
          <div className="inner-container _400px _100-tablet">
            <div className="subtitle">How It Works</div>
            <div className="mg-top-4x-extra-small">
              <h2>三步，从想法到可交付的工程结果</h2>
            </div>
          </div>
          <div className="inner-container _400px _100-tablet">
            <p>
              大多数 AI 编程工具从「你输入 prompt」开始。DAL Code 从「AI 采访你」开始——先搞清楚要做什么，再决定怎么做。
            </p>
          </div>
        </div>
        <div className="mg-top-large">
          <div
            data-w-id="workflow-cards"
            style={{ opacity: "0", filter: "blur(8px)" }}
            className="corner-gradient-container"
          >
            <div className="border-wrapper">
              <div className="w-layout-grid principles-grid">
                {WORKFLOW_ITEMS.map((step) => (
                  <div key={step.number} className="card principles-card">
                    <div
                      style={{
                        fontSize: "3rem",
                        fontWeight: 700,
                        lineHeight: 1,
                        color: "var(--core--colors--neutral--400)",
                      }}
                    >
                      {step.number}
                    </div>
                    <div>
                      <div className="subtitle" style={{ fontSize: "0.75rem" }}>
                        {step.name}
                      </div>
                      <h3 className="display-4">{step.title}</h3>
                      <div className="mg-top-5x-extra-small">
                        <p>{step.description}</p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div
              data-wf--corner-gradient-outline--variant="base"
              className="corner-gradient-wrapper"
            >
              <div className="corner-gradient-horizontal top-left" />
              <div className="corner-gradient-horizontal bottom-left" />
              <div className="corner-gradient-horizontal top-right" />
              <div className="corner-gradient-horizontal bottom-right" />
              <div className="corner-gradient-vertical bottom-left" />
              <div className="corner-gradient-vertical bottom-right" />
              <div className="corner-gradient-vertical top-left" />
              <div className="corner-gradient-vertical top-right" />
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}