const ECOSYSTEM_ITEMS = [
  "DAL Code",
  "DAL CLI",
  "DAL Office",
  "API Platform",
  "Intent Capture",
  "Mission Mode",
  "Smart Routing",
  "Skills Engine",
  "Context Compression",
  "Diff Review",
  "BYOK",
  "Private Deploy",
]

const MARQUEE_ROWS = [ECOSYSTEM_ITEMS, ECOSYSTEM_ITEMS, ECOSYSTEM_ITEMS]

export default function IntegrationsSection() {
  return (
    <section className="section-small bg-neutral overflow-hidden">
      <div className="w-layout-blockcontainer container-default w-container">
        <div
          data-w-id="ee652702-222a-0ca5-2508-17b1a107582a"
          style={{ opacity: "0", filter: "blur(8px)" }}
          className="title-left-content-right"
        >
          <div className="inner-container _400px _100-tablet">
            <div className="subtitle">Ecosystem</div>
            <div className="mg-top-4x-extra-small">
              <h2>四条产品线，统一平台底座</h2>
            </div>
          </div>
          <div className="inner-container _400px _100-tablet">
            <p>
              IDE、终端、文档、API——不同入口共享同一套意图引导、模型路由和工程治理能力。
            </p>
          </div>
        </div>
        <div className="mg-top-regular">
          <div
            data-w-id="f6559b35-9557-2504-f076-3a36fa5775a3"
            style={{ opacity: "0", filter: "blur(8px)" }}
            className="integrations-marquee-wrapper marquee-hover-stop"
            {...{
              "tr-marquee-speed": "40",
              "tr-marquee-element": "component",
              "tr-marquee-scrolldirection": "true",
              "tr-marquee-scrollscrub": "false",
            }}
          >
            {MARQUEE_ROWS.map((items, rowIndex) => (
              <div key={rowIndex} className="integrations-marquee marquee-scroll-item">
                {items.map((label, i) => (
                  <div
                    key={`${rowIndex}-${i}`}
                    className="integration-marquee-item"
                    style={{
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      padding: "12px 24px",
                    }}
                  >
                    <span
                      style={{
                        fontSize: "0.875rem",
                        fontWeight: 600,
                        letterSpacing: "0.04em",
                        whiteSpace: "nowrap",
                        color: "var(--font--colors--paragraph)",
                      }}
                    >
                      {label}
                    </span>
                    <div
                      style={{ width: "0%", height: "100%" }}
                      className="integration-marquee-item-bg"
                    />
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}