import Image from "next/image";
import HeroImage from "../../../public/images/hero-image.jpg"
import HeroImage1 from "../../../public/images/hero1.jpg"
import Sponsor1 from "../../../public/images/sponsors-01.png"
import Sponsor2 from "../../../public/images/sponsors-02.png"
import Sponsor3 from "../../../public/images/sponsors-03.png"
import Sponsor4 from "../../../public/images/sponsors-04.png"
import CallToActionImage from "../../../public/images/cta.png"
import {Button} from "@/components/ui/button";
import SponsorImage from "@/components/sponsor-image";
import {Telescope} from "lucide-react";
import ServicesOffers from "@/components/services-offers";
import SlideUpTransition from "@/components/Transitions/slide-up";
import WhyChooseUs from "@/components/why-choose-us";
import Link from "next/link";
import {ABOUT_US_URL, CONTACT_US_URL, REGISTER_URL} from "@/lib/constants";

export default function Home() {
    return (
        <>
            {/* hero section */}
            <section
                className={"container-auto flex flex-col lg:flex-row lg:gap-4 bg-gradient-to-b from-green-50 to-transparent"}>

                <div className="flex items-center w-full lg:w-2/3">
                    <div className="max-w-3xl my-12">
                        <p className={"pb-2 md:pb-4 text-sm fond-bold uppercase tracking-tight text-green-900"}>
                            Get Help Conveniently
                        </p>
                        <h1 className="pb-2 md:pb-4 text-3xl font-bold tracking-tight text-gray-800 lg:text-4xl lg:leading-tight xl:text-5xl xl:leading-tight dark:text-white">
                            Welcome to LulamaChat, Your Gateway to Mental Wellness in Eswatini
                        </h1>

                        <p className="pb-2 text-sm text-gray-500 lg:text-lg dark:text-gray-300">
                            Are you feeling down, losing hope or interest in your daily activities and having
                            sleepless nights?
                        </p>

                        <p className={"pb-4 text-sm text-gray-500 lg:text-lg dark:text-gray-300"}>
                            The help is right here! Now you can assess your mental services right in the comfort of
                            your home, right in your hands!
                        </p>

                        <div
                            className="flex items-start space-x-4 sm:space-y-0 items-center">
                            <Link href={REGISTER_URL}>
                                <Button size={"lg"}>Register Now</Button>
                            </Link>
                            <Link href={CONTACT_US_URL}>
                                <Button
                                    size={"lg"}
                                    variant={"outline"}
                                    className={"border-gray-600 border-2 hover:bg-gray-600 hover:text-white"}>
                                    Contact Us
                                </Button>
                            </Link>
                        </div>
                    </div>
                </div>

                <div className="hidden md:flex items-center justify-center w-full lg:w-1/3">
                    <div>
                        <Image
                            src={HeroImage}
                            className={"object-cover h-[400px] rounded-[20px]"}
                            alt="Hero TeraChat Image"
                            loading="eager"
                            placeholder="blur"
                        />
                    </div>
                </div>

            </section>

            {/* about us introduction */}
            <section className="container-auto section-mt">

                <div className="md:relative">

                    <Image
                        width={100}
                        height={100}
                        className={"object-cover h-[300px] w-full md:w-[500px] rounded-lg"}
                        src={HeroImage1}
                        alt={"about-thera-chat-intro-image"}/>

                    <div
                        className={"relative md:absolute md:top-14 md:left-52 -mt-32 mx-3 md:mx-0 md:mt-0 p-4 bg-green-50 rounded-xl flex flex-col gap-y-2"}>
                        <p className="text-sm text-bold text-primary uppercase">About LulamaChat</p>
                        <p className={"text-normal md:text-lg text-gray-600 dark:text-gray-300"}>
                            LulamaChat is an Eswatini based platform that was initiated in 2024 to address mental
                            health related issues.
                        </p>
                        <p className="text-normal md:text-lg text-gray-600 dark:text-gray-300">
                            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>
                        <Link href={ABOUT_US_URL}>
                            <Button>Learn More</Button>
                        </Link>
                    </div>

                </div>

            </section>

            {/* thera-chat mission statement */}
            <section className={"container-auto section-mt"}>
                <div
                    className="p-2 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-4xl 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>

            {/* features */}
            <section className={"bg-gradient-to-b from-green-50 container-auto section-mt"}>
                <div className={"pt-16 flex flex-col"}>
                    <p className={"section-title"}>Our Services & Features</p>
                    <ServicesOffers/>
                </div>
            </section>

            {/* why choose us */}
            <section className={"container-auto section-mt"}>
                <div className={"pt-4 md:pt-8 flex flex-col"}>
                    <p className={"section-title"}>Why Choose Us?</p>
                    <WhyChooseUs/>
                </div>
            </section>


            {/* call to action / download / register... */}
            <SlideUpTransition>
                <section className={"container-auto section-mt"}>
                    <div className={"p-2 p-8 rounded-lg border border-2 border-green-100 bg-green-50 w-full flex"}>
                        <div
                            className="md:w-2/3 flex flex-col gap-y-4">
                            <p className={"uppercase text-sm text-primary"}>Call to Action</p>
                            <p className={"section-title"}>Get Started Today!</p>
                            <p className={"max-w-4xl section-text"}>
                                Register for LulamaChat now and start taking control of your mental well-being.
                                Together, we can make mental health a priority and create a better, healthier future for
                                everyone.
                            </p>
                            <div
                                className="flex items-start space-x-4 sm:space-y-0 items-center">
                                <Link href={REGISTER_URL}>
                                    <Button size={"lg"}>Register Now</Button>
                                </Link>
                            </div>
                        </div>

                        <div className={"hidden md:block w-1/3"}>
                            <Image src={CallToActionImage} className={"h-64 w-full object-contain"}
                                   alt={"call to action image"}/>
                        </div>

                    </div>
                </section>
            </SlideUpTransition>


            {/* collaborators / sponsors */}
            <section className={"container-auto section-mt"}>
                <p className={"text-center section-title pb-2 md:pb-4"}>Our Collaborators</p>
                <div className="grid grid-cols-2 md:grid-cols-4 text-center">
                    <SponsorImage image={Sponsor1}/>
                    <SponsorImage image={Sponsor2}/>
                    <SponsorImage image={Sponsor3}/>
                    <SponsorImage image={Sponsor4}/>
                </div>
            </section>

        </>
    );
}
