import type { Metadata } from "next"
import Link from "next/link"

export const metadata: Metadata = {
  title: "DAL Code — 写代码之前，先把事情想清楚",
  description:
    "AI 先采访需求、再拆解任务、最后交付代码+测试+文档——不是更快的补全，是更完整的工程闭环。",
}

const CAPABILITIES = [
  {
    title: "Intent Capture",
    description:
      "你说方向，AI 来追问细节。结构化问题把模糊想法收敛成可执行的工程规格。",
  },
  {
    title: "Mission Mode",
    description:
      "一个目标拆成十步计划，逐步推进，关键节点等你确认再继续。",
  },
  {
    title: "Smart Routing",
    description:
      "架构设计用强模型，格式化用快模型。每个子任务自动选对模型。",
  },
  {
    title: "Diff 审批",
    description:
      "代码变更、文件操作、命令执行——敏感操作必须经过你的确认。",
  },
  {
    title: "Skills 引擎",
    description:
      "把团队最佳实践封装成可复用工作流，新人上手即用，经验不再只在某个人脑子里。",
  },
  {
    title: "上下文压缩",
    description:
      "五层压缩策略，对话再长也不丢关键信息。token 花在刀刃上。",
  },
]

export default function CodePage() {
  return (
    <main>
      <section className="section hero-v1">
        <div className="w-layout-blockcontainer container-default w-container">
          <div
            data-w-id="code-hero"
            style={{ opacity: "0", filter: "blur(8px)" }}
            className="inner-container _480px _100-tablet"
          >
            <div className="subtitle">DAL Code</div>
            <h1>写代码之前，先把事情想清楚</h1>
            <div className="mg-top-4x-extra-small">
              <p>
                AI 先采访需求、再拆解任务、最后交付代码+测试+文档——不是更快的补全，是更完整的工程闭环。
              </p>
            </div>
            <div className="mg-top-2x-extra-small">
              <div className="buttons-row left">
                <Link href="/contact" className="primary-button w-inline-block">
                  <div className="button-content">
                    <div>联系我们</div>
                    <div className="button-icon-wrapper primary">
                      <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" />
                      <div className="button-icon-bg-inside" />
                    </div>
                  </div>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section overflow-hidden">
        <div className="w-layout-blockcontainer container-default w-container">
          <div
            data-w-id="code-caps-title"
            style={{ opacity: "0", filter: "blur(8px)" }}
            className="text-center"
          >
            <div className="subtitle">Capabilities</div>
            <div className="mg-top-4x-extra-small">
              <h2>不是更多的功能，是更对的架构</h2>
            </div>
          </div>
          <div className="mg-top-large">
            <div
              data-w-id="code-caps-grid"
              style={{ opacity: "0", filter: "blur(8px)" }}
            >
              <div
                className="w-layout-grid values-grid"
                style={{ gridTemplateColumns: "1fr 1fr 1fr" }}
              >
                {CAPABILITIES.map((cap) => (
                  <div key={cap.title} className="value-item">
                    <div>
                      <h3 className="display-4">{cap.title}</h3>
                      <div className="mg-top-5x-extra-small">
                        <p style={{ fontSize: "0.875rem" }}>{cap.description}</p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="cta-section v1">
        <div className="w-layout-blockcontainer container-default position-relative---z-index-1 w-container">
          <div className="inner-container _430px">
            <div className="subtitle">Next Step</div>
            <div className="mg-top-3x-extra-small">
              <h2 className="text-titles-dm">聊聊你的开发场景</h2>
            </div>
            <div className="mg-top-4x-extra-small">
              <p className="text-paragraph-dm">
                无论是独立项目还是团队协作，DAL Code 都从同一个起点开始——一次结构化的需求对话。
              </p>
            </div>
            <div className="mg-top-2x-extra-small">
              <div className="buttons-row left">
                <Link href="/contact" className="secondary-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>
    </main>
  )
}