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

export default function EcosystemSection() {
  return (
    <section className="section bg-neutral overflow-hidden">
      <div className="w-layout-blockcontainer container-default w-container">
        <div
          data-w-id="eco-title"
          style={{ opacity: "0", filter: "blur(8px)" }}
          className="text-center"
        >
          <div className="subtitle">Platform</div>
          <div className="mg-top-4x-extra-small">
            <h2>DeepAILab — 开发者的 AI 基础设施</h2>
          </div>
          <div className="mg-top-4x-extra-small">
            <p>
              账户统一、路由统一、治理统一。四条产品线共享同一个平台底座，能力互通，数据不割裂。
            </p>
          </div>
        </div>
        <div className="mg-top-large">
          <div
            data-w-id="eco-cards"
            style={{ opacity: "0", filter: "blur(8px)" }}
            className="corner-gradient-container"
          >
            <div className="border-wrapper">
              <div className="w-layout-grid principles-grid">
                {PLATFORM_ADVANTAGES.map((adv) => (
                  <div key={adv.title} className="card principles-card">
                    <div>
                      <h3 className="display-4">{adv.title}</h3>
                      <div className="mg-top-5x-extra-small">
                        <p>{adv.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 className="mg-top-regular">
          <div
            data-w-id="eco-cta"
            style={{ opacity: "0", filter: "blur(8px)" }}
            className="buttons-row"
          >
            <a
              href="https://deepailab.com"
              target="_blank"
              rel="noopener noreferrer"
              className="secondary-button w-inline-block"
            >
              <div className="button-content">
                <div>了解 DeepAILab 平台</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>
            </a>
          </div>
        </div>
      </div>
    </section>
  )
}