interface Reason {
    title: string;
    description: string;
}

const reasons: Reason[] = [
    {
        title: "Convenience",
        description: "Access mental health services from the comfort of your home or on the go, at any time."
    },
    {
        title: "Affordable",
        description: "Our subscription plans are designed to make mental health care accessible to everyone."
    },
    {
        title: "No Stigma",
        description: "By seeking help in a discreet and private setting, you can overcome barriers and address your mental health concerns without judgment."
    }
]

function WhyChooseUs() {
    return (
        <div className={"mt-4 md:mt-8 grid grid-cols-1 md:grid-cols-3 gap-2 md:gap-4 space-2 md:space-4"}>
            {
                reasons.map((reason, index) => {
                    return (
                        <div key={index} className={"flex flex-col gap-2 md:gap-3 border border-gray-300 p-2 md:p-4 rounded-xl"}>
                            <p className={"text-lg lg:text-xl font-bold text-green-950"}>
                                {reason.title}
                            </p>
                            <p className={"text-sm md:text-base lg:text-lg text-gray-600 dark:text-gray-300"}>
                                {reason.description}
                            </p>
                        </div>
                    )
                })
            }
        </div>
    )
}


export default WhyChooseUs;