"use client";
import {useState} from "react";
import Image from "next/image";
import GetStartedModal from "@/components/getstartedmodal";

export default function CTA() {
  const [showModal, setShowModal] = useState(false);

  return (
    <section className="mb-10 w-full overflow-x-hidden">
      <div className="mx-auto max-w-screen-2xl px-5 lg:px-10">
        <div className="flex flex-col items-center justify-center rounded-xl bg-slate-200 px-5 md:flex-row md:gap-20 lg:px-10">
          {/* Text Section */}
          <div className="flex max-w-[800px] flex-col py-10">
            <p className="text-lg font-medium text-slate-500">Verola for Business</p>
            <p className="mb-2 text-3xl font-semibold text-bluegray">Talk to Our Expert About Your Office Needs</p>
            <p className="mb-6">Verola® offers exclusive pricing and expert guidance for businesses looking to enhance their offices. Let us help you create a comfortable and productive work environment.</p>
            <button onClick={() => setShowModal(true)} className="group flex h-9 w-fit shrink-0 items-center gap-2 rounded-lg bg-green-500 px-3 font-medium text-white transition duration-150 ease-in-out lg:h-12 lg:px-6">
              <span>Get Started</span>
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" className="size-6 transition duration-300 ease-in-out group-hover:translate-x-1">
                <path strokeLinecap="round" strokeLinejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3" />
              </svg>
            </button>
          </div>

          {/* Image Section */}
          <div className="shrink-0 pt-4 md:order-first md:pt-10">
            <Image src="/assets/img/img-cta.webp" alt="Verola Office Solutions" width={400} height={300} className="h-[260px] object-contain object-bottom md:h-[300px]" />
          </div>
        </div>
      </div>
      <GetStartedModal isOpen={showModal} onClose={() => setShowModal(false)} />
    </section>
  );
}
