import Image from "next/image"
import { INTEGRATION_ITEMS } from "@/lib/site-content"

const MARQUEE_ROWS = Array.from({ length: 3 }, () => INTEGRATION_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">Work Surfaces</div>
            <div className="mg-top-4x-extra-small">
              <h2>一个产品里，接住从需求澄清到工程交付的整条链路</h2>
            </div>
          </div>
          <div className="inner-container _400px _100-tablet">
            <p>
              DAL Code 把 Desktop IDE、Web Workspace、Mobile Review、Mission Planner、RAG、Tools、Diff 审批和企业治理放到同一条体验链上。
            </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": "50", "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((item) => (
                  <a key={`${rowIndex}-${item.label}`} href="/about" className="integration-marquee-item w-inline-block">
                    <Image src={item.icon} width={94} height={94} alt={item.label} style={{ filter: "invert(0%)" }} className="integration-marquee-item-image" />
                    <div style={{ width: "0%", height: "100%" }} className="integration-marquee-item-bg" />
                  </a>
                ))}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}