"use client";
import React, { useState } from 'react';
import {Image} from "next/dist/client/image-component";
import choose1 from "@/public/home/choose1.jpg";
import {BsPaintBucket} from "react-icons/bs";
import {LuSprayCan} from "react-icons/lu";
import AppointmentModal from "@/components/modals/AppointmentModal";
interface Props {
    submit: (formData: FormData) => Promise<any>;
}
function WhyChoose({ submit }: Props) {
    const [isModalOpen, setIsModalOpen] = useState(false);

    return (
        <div>
            {/* Why Choose Us Section */}
            <section className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12 lg:py-16 bg-gray-50 rounded-2xl sm:rounded-3xl lg:rounded-4xl">
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8 lg:gap-10">
                    <div>
                        <Image src={choose1} alt={'choose1'} className="rounded-2xl sm:rounded-3xl lg:rounded-4xl w-full h-auto"/>
                    </div>
                    <div>
                        <p className="text-red-500 font-medium mb-1 text-sm sm:text-base lg:text-lg tracking-wide">WHY CHOOSE US</p>
                        <p className="tracking-wide text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6">Your Trusted Painting Experts</p>
                        <p className="mb-3 sm:mb-4 text-sm sm:text-base lg:text-lg">At Painting Services, we pride ourselves on delivering top-notch painting
                            solutions that transform your spaces. Our team of skilled professionals is dedicated to
                            providing exceptional craftsmanship, attention to detail, and outstanding customer
                            service.</p>
                        <p className="mb-3 sm:mb-4 text-sm sm:text-base lg:text-lg">We use only high-quality materials and the latest techniques to ensure a
                            flawless finish that lasts. Whether its residential or commercial painting, interior or
                            exterior, we tailor our services to meet your unique needs and preferences.</p>
                        <p className="mb-3 sm:mb-4 text-sm sm:text-base lg:text-lg">Choose Painting Services for reliable, efficient, and affordable painting
                            solutions that exceed your expectations.</p>
                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 sm:gap-6 lg:gap-6 mt-6 sm:mt-8">
                            <div className="text-center sm:text-left">
                                <div className="text-5xl sm:text-6xl lg:text-7xl xl:text-8xl text-red-500 mb-2 sm:mb-1 flex justify-center sm:justify-start">
                                    <BsPaintBucket/>
                                </div>
                                <p className="text-2xl sm:text-3xl lg:text-4xl font-bold mb-2 sm:mb-3">Experts with a polished edge</p>
                                <p className="text-sm sm:text-base lg:text-lg">The Painting Services team is made up of experienced professionals who are passionate
                                    about their craft. We stay up-to-date with the latest industry trends and techniques
                                    to ensure that we deliver the best results for our clients.</p>
                            </div>
                            <div className="text-center sm:text-left">
                                <div className="text-5xl sm:text-6xl lg:text-7xl xl:text-8xl text-red-500 mb-2 sm:mb-1 flex justify-center sm:justify-start">
                                    <LuSprayCan/>
                                </div>
                                <p className="text-2xl sm:text-3xl lg:text-4xl font-bold mb-2 sm:mb-3">Premium materials for a lasting finish</p>
                                <p className="text-sm sm:text-base lg:text-lg">We believe that quality materials are essential for achieving a beautiful and durable
                                    finish. That why we use only the best paints, primers, and tools available in the
                                    market.</p>
                            </div>
                        </div>
                        <div className="text-center sm:text-left">
                            <button
                                onClick={() => setIsModalOpen(true)}
                                className="mt-6 sm:mt-8 bg-red-500 hover:bg-red-600 text-white font-semibold px-6 sm:px-8 py-3 sm:py-4 rounded-lg text-base sm:text-lg transition-all duration-300 shadow-lg cursor-pointer">
                                Get a Free Quote
                            </button>
                        </div>
                    </div>
                </div>
            </section>

            {/* Appointment Modal */}
            <AppointmentModal
                submit={submit}
                isOpen={isModalOpen}
                onClose={() => setIsModalOpen(false)}
                title="Get Your Free Quote"
                subtitle="Fill in your details and we'll get back to you soon"
                headerBgColor="bg-red-500"
            />
        </div>
    );
}

export default WhyChoose;