import LottiePlayer from "@/components/LottiePlayer"
import Link from "next/link"
import { HOME_PRINCIPLES } from "@/lib/site-content"

export default function PrinciplesSection() {
  return (
    <section className="section overflow-hidden">
      <div className="w-layout-blockcontainer container-default w-container">
        <div data-w-id="372e7f28-67fd-5f5e-6061-256f8b7997a5" style={{"opacity": "0", "filter": "blur(8px)"}} className="text-center">
          <div className="subtitle">Core Principles</div>
          <div className="mg-top-4x-extra-small">
            <h2>DAL Code 最值得被记住的三件事</h2>
          </div>
          <div className="mg-top-4x-extra-small">
            <p>如果这三件事讲不清楚，DAL Code 就会被误解成另一个模板化 AI IDE。</p>
          </div>
        </div>
        <div className="mg-top-large">
          <div data-w-id="3f196c4e-8732-f3ef-e6a2-04398a5349e2" style={{"opacity": "0", "filter": "blur(8px)"}} className="corner-gradient-container">
            <div className="border-wrapper">
              <div className="w-layout-grid principles-grid">
                {HOME_PRINCIPLES.map((item) => (
                  <div key={item.title} className="card principles-card">
                    <LottiePlayer src={item.animation} className="max-width-280px-mbl" loop autoplay />
                    <div>
                      <h3 className="display-4">{item.title}</h3>
                      <div className="mg-top-5x-extra-small">
                        <p>{item.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>
              <div className="corner-gradient-horizontal bottom-left">
              </div>
              <div className="corner-gradient-horizontal top-right">
              </div>
              <div className="corner-gradient-horizontal bottom-right">
              </div>
              <div className="corner-gradient-vertical bottom-left">
              </div>
              <div className="corner-gradient-vertical bottom-right">
              </div>
              <div className="corner-gradient-vertical top-left">
              </div>
              <div className="corner-gradient-vertical top-right">
              </div>
            </div>
          </div>
        </div>
        <div className="mg-top-regular">
          <div data-w-id="bffe9e02-73d6-d2d3-239d-bbcb4bd7d83d" style={{"opacity": "0", "filter": "blur(8px)"}} className="buttons-row">
            <Link id="w-node-_99805214-dd54-e7f3-2549-05c0df1040fb-df1040fb" href="/about" 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">
                    </path>
                  </svg>
                  <div className="button-icon-bg">
                  </div>
                  <div className="button-icon-bg-inside">
                  </div>
                </div>
              </div>
            </Link>
          </div>
        </div>
      </div>
    </section>
  )
}