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">
    Subscribe for cutting-edge AI updates                </h2>
            </div>
            <div className="mg-top-4x-extra-small">
              <p className="text-paragraph-dm">
    ipsum dolor sit amet consectetur at amet felis nulla molestie non viverra diam sed augue gravida ante risus pulvinar diam turpis ut bibendum ut velit felis at nisl lectus.                </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">
    One email per month — No spam!                  </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>
  )
}