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

export const metadata: Metadata = {
  title: "DAL CLI — 终端不退出，AI 已就位",
  description:
    "同样的意图引导和多模型路由，跑在你最顺手的 shell 里。带上自己的 Key，离线也能用。",
}

const FEATURES = [
  {
    title: "Shell 原生集成",
    description: "不用打开新窗口。在你的终端里直接启动 DAL，上下文自动继承。",
  },
  {
    title: "Task 管道",
    description: "把复杂任务拆成管道式的步骤，每步结果可以 pipe 到下一步。",
  },
  {
    title: "BYOK 直连",
    description: "你的 API Key 直连供应商，CLI 不做中间人，数据不绕路。",
  },
  {
    title: "离线可用",
    description: "本地模型支持，网络断了也能继续工作。",
  },
]

export default function CliPage() {
  return (
    <main>
      <section className="section hero-v1">
        <div className="w-layout-blockcontainer container-default w-container">
          <div
            data-w-id="cli-hero"
            style={{ opacity: "0", filter: "blur(8px)" }}
            className="inner-container _480px _100-tablet"
          >
            <div className="subtitle">DAL CLI</div>
            <h1>终端不退出，AI 已就位</h1>
            <div className="mg-top-4x-extra-small">
              <p>
                同样的意图引导和多模型路由，跑在你最顺手的 shell 里。带上自己的 Key，离线也能用。
              </p>
            </div>
            <div className="mg-top-2x-extra-small">
              <div
                style={{
                  display: "inline-flex",
                  alignItems: "center",
                  gap: "8px",
                  padding: "8px 16px",
                  border: "1px solid var(--core--colors--neutral--400)",
                  borderRadius: "8px",
                  fontFamily: "monospace",
                  fontSize: "0.875rem",
                  color: "var(--font--colors--paragraph)",
                }}
              >
                <span style={{ color: "var(--font--colors--title)" }}>$</span>
                <span>npx dalcode</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section overflow-hidden">
        <div className="w-layout-blockcontainer container-default w-container">
          <div
            data-w-id="cli-features-title"
            style={{ opacity: "0", filter: "blur(8px)" }}
            className="text-center"
          >
            <div className="subtitle">Features</div>
            <div className="mg-top-4x-extra-small">
              <h2>为终端用户设计，不是 IDE 的简化版</h2>
            </div>
          </div>
          <div className="mg-top-large">
            <div
              data-w-id="cli-features-grid"
              style={{ opacity: "0", filter: "blur(8px)" }}
              className="corner-gradient-container"
            >
              <div className="border-wrapper">
                <div
                  className="w-layout-grid"
                  style={{ gridTemplateColumns: "1fr 1fr" }}
                >
                  {FEATURES.map((feat) => (
                    <div key={feat.title} className="card principles-card">
                      <div>
                        <h3 className="display-4">{feat.title}</h3>
                        <div className="mg-top-5x-extra-small">
                          <p>{feat.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>

      <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">Get Started</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">
                一条命令启动，用你自己的 Key，不需要注册。
              </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>
  )
}