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

export const metadata: Metadata = {
  title: "DAL Office — 文档也该有 AI 原生体验",
  description:
    "文字、表格、演示文稿——内置 AI 辅助起草、数据洞察和版式生成，非技术团队也能高效产出。",
}

const EDITORS = [
  {
    name: "文字处理",
    description: "AI 辅助起草、润色、翻译。长文档自动摘要，会议纪要一键生成。",
  },
  {
    name: "数据表格",
    description: "自然语言查询数据，公式自动生成，异常值智能标注。",
  },
  {
    name: "演示文稿",
    description: "描述主题即可生成结构化幻灯片，版式和配图自动匹配。",
  },
]

export default function OfficePage() {
  return (
    <main>
      <section className="section hero-v1">
        <div className="w-layout-blockcontainer container-default w-container">
          <div
            data-w-id="office-hero"
            style={{ opacity: "0", filter: "blur(8px)" }}
            className="inner-container _480px _100-tablet"
          >
            <div className="subtitle">DAL Office</div>
            <h1>文档也该有 AI 原生体验</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="office-editors-title"
            style={{ opacity: "0", filter: "blur(8px)" }}
            className="text-center"
          >
            <div className="subtitle">Editors</div>
            <div className="mg-top-4x-extra-small">
              <h2>三种编辑器，一套 AI 能力</h2>
            </div>
          </div>
          <div className="mg-top-large">
            <div
              data-w-id="office-editors-grid"
              style={{ opacity: "0", filter: "blur(8px)" }}
              className="corner-gradient-container"
            >
              <div className="border-wrapper">
                <div className="w-layout-grid principles-grid">
                  {EDITORS.map((editor) => (
                    <div key={editor.name} className="card principles-card">
                      <div>
                        <h3 className="display-4">{editor.name}</h3>
                        <div className="mg-top-5x-extra-small">
                          <p>{editor.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">Early Access</div>
            <div className="mg-top-3x-extra-small">
              <h2 className="text-titles-dm">DAL Office 正在打磨中</h2>
            </div>
            <div className="mg-top-4x-extra-small">
              <p className="text-paragraph-dm">
                核心编辑器已可用，AI 能力持续上线。留下联系方式，第一时间获得体验资格。
              </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>
  )
}