import NewsletterForm from "@/components/NewsletterForm"

export default function CtaSection() {
  return (
    <section className="cta-section v4">
      <div className="w-layout-blockcontainer container-default w-container">
        <div data-w-id="43e48b1f-85e7-b846-9296-3a85fcb30cd3" className="cta-v4-content-wrapper">
          <div className="cta-v4-content-top">
            <div className="subtitle dark-mode">Newsletter</div>
            <div className="mg-top-4x-extra-small">
              <h2 className="text-titles-dm">
                每月一封，跟进 DAL Code 的产品洞察与建设进度
              </h2>
            </div>
            <div className="mg-top-4x-extra-small">
              <p className="text-paragraph-dm">
                我们会把官网文章、关键产品判断、路线图变化和典型场景拆解整理成简洁摘要。
                中文优先，英文技术术语保留，不发泛泛行业噪音。
              </p>
            </div>
          </div>
          <div className="corner-gradient-container">
            <div className="cta-v4-content-bottom">
              <div className="cta-v4-form-wrapper">
                <NewsletterForm variant="dark" />
                <div className="corner-gradient-wrapper hidden-on-tablet">
                  <div className="corner-gradient-vertical small---dark-mode top-left">
                  </div>
                </div>
              </div>
              <div className="check-item-wrapper">
                <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 17 16" fill="none" className="squared-icon text-titles-dm">
                  <path d="M3.62891 8.00429L6.87307 11.2485L13.3711 4.75" stroke="currentColor" strokeWidth="1.5">
                  </path>
                </svg>
                <div className="text-color-neutral-500">
                  每月 1 封，只发和产品建设直接相关的内容
                </div>
              </div>
            </div>
            <div className="corner-gradient-wrapper hidden-on-tablet">
              <div className="corner-gradient-horizontal small---dark-mode bottom-left">
              </div>
              <div className="corner-gradient-horizontal small---dark-mode bottom-right">
              </div>
              <div className="corner-gradient-horizontal small---dark-mode top-left">
              </div>
              <div className="corner-gradient-horizontal small---dark-mode top-right">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}