"use client";
import React, { useState } from 'react';
import ContactPopup from '@/components/common/ContactPopup/ContactPopup';

const CTA = () => {
    const [isContactOpen, setIsContactOpen] = useState(false);
    return (
        <div className="cta1-section-area sp1">
            <div className="container">
                <div className="row">
                    <div className="col-lg-5">
                        <div className="cta-header heading1">
                            <h2 data-aos="fade-left" data-aos-duration="700">Ready to Build a Website That Generates Leads & Sales?</h2>
                            <div className="space16"></div>
                            <p data-aos="fade-left" data-aos-duration="800">Stop losing customers to outdated websites. Let’s create a powerful online presence for your business today.</p>
                            <div className="space24"></div>
                            {/* <form data-aos="fade-left" data-aos-duration="900" onSubmit={(e) => e.preventDefault()}>
                                <input type="text" placeholder="Email Address" />
                                <button type="submit" className="vl-btn1">Subscribe <i className="fa-solid fa-arrow-right"></i></button>
                            </form> */}
                        </div>
                    </div>
                    <div className="col-lg-3"></div>
                    <div className="col-lg-4">
                        <div className="cta-images">
                            <img src="/assets/img/home/section10/bg-element.webp" alt="" className="elements7 keyframe5" />
                            <div className="img1">
                                <img src="/assets/img/home/section10/right-image.webp" alt="" />
                            </div>
                            <ul className="aniamtion-key-1">
                                <li>
                                    <a href="#" onClick={(e) => { e.preventDefault(); setIsContactOpen(true); }}>
                                        <img src="/assets/img/icons/check5.svg" alt="" />Get Free Consultation
                                    </a>
                                </li>
                                <li>
                                    <a href="#" onClick={(e) => { e.preventDefault(); setIsContactOpen(true); }}>
                                        <img src="/assets/img/icons/check5.svg" alt="" /> Request Pricing
                                    </a>
                                </li>
                                <li>
                                    <a href="#" onClick={(e) => { e.preventDefault(); setIsContactOpen(true); }}>
                                        <img src="/assets/img/icons/check5.svg" alt="" />Talk to an Expert
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <ContactPopup isOpen={isContactOpen} onClose={() => setIsContactOpen(false)} />
        </div>
    );
};

export default CTA;
