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

export const metadata: Metadata = {
  title: "DeepAILab API Platform — 一层路由，连通所有模型",
  description:
    "20+ 供应商、统一密钥管理、按任务自动选模型。成本和质量不再是二选一。",
}

const CAPABILITIES = [
  {
    title: "智能路由",
    description: "按任务类型、延迟要求和成本预算自动选择最优模型，策略统一管控。",
  },
  {
    title: "密钥管理",
    description: "BYOK 直连供应商 API，也支持平台托管。多团队、多项目独立配额。",
  },
  {
    title: "用量分析",
    description: "token 消耗、模型分布、成本趋势——实时仪表盘，数据驱动决策。",
  },
  {
    title: "审计日志",
    description: "每条请求可追溯：谁、什么时候、用了哪个模型、花了多少。满足企业合规需求。",
  },
]

export default function PlatformPage() {
  return (
    <main>
      <section className="section hero-v1">
        <div className="w-layout-blockcontainer container-default w-container">
          <div
            data-w-id="platform-hero"
            style={{ opacity: "0", filter: "blur(8px)" }}
            className="inner-container _480px _100-tablet"
          >
            <div className="subtitle">DeepAILab API Platform</div>
            <h1>一层路由，连通所有模型</h1>
            <div className="mg-top-4x-extra-small">
              <p>
                20+ 供应商、统一密钥管理、按任务自动选模型。成本和质量不再是二选一。
              </p>
            </div>
            <div className="mg-top-2x-extra-small">
              <div className="buttons-row left">
                <a
                  href="https://deepailab.com"
                  target="_blank"
                  rel="noopener noreferrer"
                  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>
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section overflow-hidden">
        <div className="w-layout-blockcontainer container-default w-container">
          <div
            data-w-id="platform-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 className="mg-top-4x-extra-small">
              <p>
                DeepAILab 不只转发请求。它理解任务、选择模型、管控成本、记录审计——是团队级的 AI 基础设施。
              </p>
            </div>
          </div>
          <div className="mg-top-large">
            <div
              data-w-id="platform-caps-grid"
              style={{ opacity: "0", filter: "blur(8px)" }}
              className="corner-gradient-container"
            >
              <div className="border-wrapper">
                <div
                  className="w-layout-grid"
                  style={{ gridTemplateColumns: "1fr 1fr" }}
                >
                  {CAPABILITIES.map((cap) => (
                    <div key={cap.title} className="card principles-card">
                      <div>
                        <h3 className="display-4">{cap.title}</h3>
                        <div className="mg-top-5x-extra-small">
                          <p>{cap.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">
                注册即可使用。团队版支持统一计费、成员管理和审计日志。
              </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>
  )
}