import LottiePlayer from "@/components/LottiePlayer"
import { COMPANY_STATS } from "@/lib/site-content"

export default function HeroSection() {
  return (
    <section className="section top overflow-hidden">
      <div className="w-layout-blockcontainer container-default w-container">
        <div
          data-w-id="28893d6d-b366-6951-6d91-f80940d4e59d"
          style={{ opacity: "0", filter: "blur(8px)" }}
          className="title-left-content-right"
        >
          <div>
            <div className="subtitle">Product Positioning</div>
            <div className="mg-top-4x-extra-small">
              <h1>DAL Code 不是另一个 AI Chat，而是一个 Intent-to-Code 平台</h1>
            </div>
          </div>
          <div className="inner-container _355px">
            <p>
              我们在做的是一个会先澄清需求、再规划任务、再驱动工具和模型去完成交付的 AI
              Engineering Workspace，而不是把更多模型名堆在界面上。
            </p>
          </div>
        </div>
        <div
          data-w-id="c9aa8bb0-8524-45b8-1337-b4d2c55b6f23"
          style={{ opacity: "0", filter: "blur(8px)" }}
          className="mg-top-regular overflow-hidden"
        >
          <LottiePlayer
            src="/assets/cdn-prod-website-files-com/68a342b7066c56fa60eb3af1/68d28b101cd56458bf646202_about-hero-animation-wave-quantum-webflow-template.json"
            className="about-hero-lottie"
            loop
            autoplay
          />
        </div>
        <div className="mg-top-regular">
          <div className="w-layout-grid about-hero-stats-wrapper">
            {COMPANY_STATS.map((stat) => (
              <div key={stat.label}>
                <div className="stat-wrapper center-mbl">
                  <div className="stat-text">{stat.value}</div>
                  <div className="stat-arrow-wrapper">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="100%"
                      viewBox="0 0 15 14"
                      fill="none"
                      className="stat-arrow"
                    >
                      <path d="M7.40431 13.0625L7.4043 2" stroke="currentColor" strokeWidth="1.5" />
                      <path
                        d="M13.8141 8.40703L7.40703 2L1 8.40703"
                        stroke="currentColor"
                        strokeWidth="1.5"
                      />
                    </svg>
                  </div>
                </div>
                <div className="display-2">{stat.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}