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

export default function FeatureGrid() {
  return (
    <section className="section overflow-hidden">
      <div className="w-layout-blockcontainer container-default w-container">
        <div
          data-w-id="feature-title"
          style={{ opacity: "0", filter: "blur(8px)" }}
          className="text-center"
        >
          <div className="subtitle">Core Capabilities</div>
          <div className="mg-top-4x-extra-small">
            <h2>不是更多的 prompt 技巧，是更对的工程架构</h2>
          </div>
          <div className="mg-top-4x-extra-small">
            <p>
              意图理解、模型选择、质量保障——这些能力应该内建在平台里，而不是靠用户自己摸索。
            </p>
          </div>
        </div>
        <div className="mg-top-large">
          <div
            data-w-id="feature-grid"
            style={{ opacity: "0", filter: "blur(8px)" }}
          >
            <div className="w-layout-grid values-grid" style={{ gridTemplateColumns: "1fr 1fr 1fr" }}>
              {FEATURE_ITEMS.map((item) => (
                <div key={item.title} className="value-item">
                  <div>
                    <h3 className="display-4">{item.title}</h3>
                    <div className="mg-top-5x-extra-small">
                      <p style={{ fontSize: "0.875rem" }}>{item.description}</p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}