import {Telescope} from "lucide-react";
import {Button} from "@/components/ui/button";
import Link from "next/link";
import ContactUsForm from "@/components/contact-us-form";
import {REGISTER_AS_CLIENT_URL} from "@/lib/constants";

function AboutUs() {
    return (
        <>
            {/* about us introduction */}
            <section className={"container-auto bg-gradient-to-b from-green-50 flex flex-col items-center text-center"}>
                <h1 className={"section-title pt-16"}>About LulamaChat</h1>

                <p className="text-normal md:text-lg mt-4 max-w-5xl">
                    LulamaChat is an innovative mobile platform that connects you with professional
                    counselors,
                    therapists, and mental health experts, providing accessible and convenient mental health
                    services.
                </p>

            </section>


            {/* thera-chat mission statement */}
            <section className={"container-auto section-mt"}>
                <div
                    className="p-8 rounded-lg border border-2 border-green-100 bg-green-50 w-full flex flex-col gap-y-2 md:gap-y-4 items-center text-center">
                    <div className={"bg-green-200 border rounded-full p-3"}>
                        <Telescope className={"text-primary"} size={56}/>
                    </div>
                    <p className={"section-title"}>Mission & Vision</p>
                    <p className={"max-w-5xl section-text"}>
                        Our mission is to mitigate the increasing prevalence rate of depression post COVID 19
                        especially
                        amongst the youth, create a bridge between mental health services and technology, reduce the
                        stigma related to mental health issues, off er mental health services at affordable prices
                        and
                        allow people from different society classes to receive mental health services.
                    </p>
                </div>
            </section>


            <section className={"container-auto flex flex-col items-center text-center"}>
                <h1 className={"section-title-sm pt-16"}>Our Therapists</h1>
                <p className={"text-normal md:text-lg mt-4 mb-4 max-w-5xl"}>
                    LulamaChat provides a network of certified professionals including Practitioner Psychologists and
                    Counsellors, all of whom are thoroughly trained and hold recognized qualifications in their
                    respective fields.
                </p>

                <Link href={REGISTER_AS_CLIENT_URL}>
                    <Button variant={"outline"} size={"lg"}
                            className={"border-2 border-primary text-green-950 rounded-full hover:bg-primary/30"}>
                        Join Us as a Therapist
                    </Button>
                </Link>
            </section>


            {/* contact us form */}
            <section className={"container-auto section-mt"}>
                <ContactUsForm/>
            </section>


        </>
    )
}


export default AboutUs;