"use client";

import Image from "next/image";

const ctaData = {
  icon: "/assets/images/icon/Icon2.png",
  title: "Revolutionize Your Business with Cutting-Edge AI",
  description:
    "Harness the power of advanced AI solutions to revolutionize your business operations and unlock new growth opportunities. Our cutting-edge technology empowers.",
  placeholderText: "Email Address",
  buttonText: "Request a Demo",
  buttonIcon: "/assets/images/icon/arrow.svg",
};

export default function CallToAction() {
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // TODO: Add your form submission logic here
  };

  return (
    <section className="cta-sec space">
      <div className="carousel-container">
        <div className="cta-content">
          <div className="sec-title white">
            <Image
              src={ctaData.icon}
              alt="CTA Icon"
              width={40}
              height={40}
              style={{ width: "auto", height: "auto" }}
              data-aos="fade-up"
              data-aos-duration="900"
              data-aos-delay="300"
            />
            <h2
              className="title"
              data-aos="fade-up"
              data-aos-duration="900"
              data-aos-delay="400"
            >
              {ctaData.title}
            </h2>
            <p data-aos="fade-up" data-aos-duration="900" data-aos-delay="200">
              {ctaData.description}
            </p>
          </div>
          <form
            className="hero-form"
            data-aos="fade-up"
            data-aos-duration="900"
            data-aos-delay="300"
            onSubmit={handleSubmit}
          >
            <input
              type="email"
              name="email"
              placeholder={ctaData.placeholderText}
              aria-label="Email Address"
              required
            />
            <button type="submit" className="btn-style1">
              {ctaData.buttonText}
              <span>
                <Image
                  src={ctaData.buttonIcon}
                  alt="Arrow Icon"
                  width={14}
                  height={14}
                />
              </span>
            </button>
          </form>
        </div>
      </div>
    </section>
  );
}