import React from 'react';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
import Image from 'next/image';
import { Pricing } from '@/components/pricing/Pricing';

const CTA: React.FC = () => {
    return (
        <section className="relative bg-gradient-to-bl from-blue-100 via-transparent dark:from-blue-950 dark:via-transparent">
            <div className="container">
                <div className="mb-16 max-w-7xl lg:px-2 mx-auto">
                    <div className="mt-auto w-full py-1 px-2 sm:px-6 lg:px-8 mx-2">
                        <div className="grid grid-cols-1 max-md:grid-cols-1 lg:grid-cols-2 gap-6 mt-12">
                            <div className="col-span-full lg:col-span-1 max-md:text-center">
                                <a className="flex-none font-extrabold text-2xl text-gray-900 focus:outline-none focus:opacity-80 dark:text-white" href="#" aria-label="Brand">Ready to get started?</a>
                                <p className="py-4 pb-6 leading-normal font-semibold text-gray-700 dark:text-neutral-400 lg:mr-36">
                                    Learning that works for you!
                                </p>
                                <a href="/register">
                                    <Button size="default" variant={"indigo"} className="cursor-pointer">
                                        Start learning Today {">"}
                                    </Button>
                                </a>
                                <a href="/contact" className="ml-4">
                                    <Button size="default" variant={"indigoLink"} className="cursor-pointer">
                                        Contact us {">"}
                                    </Button>
                                </a>
                            </div>

                            <div className="lg:flex lg:justify-between">
                                <div className="grid grid-cols-2 max-md:grid-cols-2 lg:grid-cols-2 gap-16 mb-10">
                                    <div><svg width="30" height="30" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">

                                        <path d="M12.5001 1C11.1194 1 10.0001 2.11929 10.0001 3.5V36.3314C10.0001 37.4628 9.24028 38.4532 8.14746 38.7462L36.1472 31.24C37.2401 30.9472 38.0001 29.9567 38.0001 28.8252V3.5C38.0001 2.11929 36.8808 1 35.5001 1H12.5001Z" fill="#00D924"></path><path d="M1.25338 24.5476C0.0575759 25.238 -0.352092 26.7668 0.338338 27.9626L5.81522 37.449C6.38097 38.4289 7.53438 38.9067 8.62734 38.6138L34.7744 31.6076L24.5869 13.9626C23.8969 12.7668 22.3676 12.3571 21.1718 13.0476L1.25338 24.5476Z" fill="url(#product-icon-invoicing--a)"></path><path d="M8.40173 38.6633C8.4771 38.6504 8.55237 38.6339 8.62737 38.6138L34.7744 31.6076L24.5869 13.9626C23.897 12.7668 22.3677 12.3571 21.1719 13.0476L10.0002 19.4976V36.3314C10.0002 37.3728 9.35638 38.2947 8.40173 38.6633Z" fill="url(#product-icon-invoicing--b)"></path><defs><linearGradient id="product-icon-invoicing--a" x1="17.3897" y1="20.25" x2="17.3893" y2="38" gradientUnits="userSpaceOnUse"><stop stopColor="#FFD748"></stop><stop offset="1" stopColor="#FFC148"></stop></linearGradient><linearGradient id="product-icon-invoicing--b" x1="21.5889" y1="12.7122" x2="21.5881" y2="38.6633" gradientUnits="userSpaceOnUse"><stop stopColor="#00A600"></stop><stop offset="1" stopColor="#00D924"></stop></linearGradient></defs>
                                    </svg>
                                        <h4 className="text-sm font-bold mt-2 text-gray-800 dark:text-white">Make the best of your time</h4>
                                        <div className="mt-3 grid space-y-3 text-sm font-semibold">
                                            <h4 className="inline-flex gap-x-2 text-gray-700 dark:text-white">Your time is valuable. That&apos;s why we built Prejee.</h4>
                                            <Link href="/register">
                                                <Button size="default" variant="indigoLink" className="text-blue-600 dark:text-blue-400 h-0 w-4 justify-start px-0 pt-4">Get started {">"}</Button>
                                            </Link>
                                        </div>
                                    </div>
                                    <div>
                                        <svg width="30" height="30" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">

                                            <path d="M12.47.01a13.01 13.01 0 0 0 .5 25.99h10.55c1.37 0 2.48-1.1 2.48-2.48V13.01a12.99 12.99 0 0 0-13.53-13z" fill="url(#product-icon-connect-ConnectSection-a)"></path><path d="M27.53 39.99a13.01 13.01 0 0 0-.5-25.99H16.48A2.48 2.48 0 0 0 14 16.48v10.51a12.99 12.99 0 0 0 13.53 13z" fill="#0073E6"></path><path d="M26 14v9.52A2.48 2.48 0 0 1 23.52 26H14v-9.52A2.48 2.48 0 0 1 16.32 14l.16-.01H26z" fill="url(#product-icon-connect-ConnectSection-b)"></path><defs><linearGradient id="product-icon-connect-ConnectSection-a" x1="13" y1="1.71" x2="13" y2="15.25" gradientUnits="userSpaceOnUse"><stop stopColor="#11EFE3"></stop><stop offset=".33" stopColor="#15E8E2"></stop><stop offset=".74" stopColor="#1FD3E0"></stop><stop offset="1" stopColor="#21CFE0"></stop></linearGradient><linearGradient id="product-icon-connect-ConnectSection-b" x1="20" y1="15.72" x2="20" y2="27.24" gradientUnits="userSpaceOnUse"><stop stopColor="#00299C"></stop><stop offset="1" stopColor="#0073E6"></stop></linearGradient></defs>
                                        </svg>
                                        <h4 className="text-sm mt-2 font-bold text-gray-800 dark:text-white">Mark your journey</h4>
                                        <div className="mt-3 grid space-y-3 text-sm font-semibold">
                                            <h4 className="inline-flex gap-x-2 text-gray-700 dark:text-white">Join us and start practicing & testing your learning.</h4>
                                            <Link href="/register">
                                                <Button size="default" variant="indigoLink" className="text-blue-600 dark:text-blue-400 h-0 w-4 justify-start px-0 pt-4">Register now {">"}</Button>
                                            </Link>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div className="mt-6 md:mt-12 py-3 flex items-center text-sm text-gray-800 gap-x-1.5 after:flex-1 after:border-t after:border-gray-200 after:ms-6 dark:text-white dark:after:border-neutral-700">
                            <span className="font-semibold bg-clip-text bg-gradient-to-l from-blue-600 to-violet-500 text-transparent dark:from-blue-400 dark:to-violet-400">10,000+</span>
                            students and institutions trust Prejee AI
                        </div>


                        <div className="flex flex-wrap gap-x-4 sm:gap-x-8 lg:gap-x-12">

                            <Image
                                src="https://cdn.prejee.com/prejee/beta/columbia-university.svg"
                                alt="Columbia University"
                                width={80}
                                height={20}
                                className="py-3 lg:py-5 text-gray-500 dark:text-neutral-500 object-contain"
                            />

                            <Image
                                src="https://cdn.prejee.com/prejee/beta/iit.png"
                                alt="IIT Madras"
                                width={72}
                                height={20}
                                className="py-3 lg:py-5 text-gray-500 dark:text-neutral-500 object-contain"
                            />

                            <Image
                                src="https://cdn.prejee.com/prejee/beta/nit-trichy.svg"
                                alt="NIT Trichy"
                                width={72}
                                height={20}
                                className="py-3 lg:py-5 text-gray-500 dark:text-neutral-500 object-contain"
                            />

                            <Image
                                src="https://cdn.prejee.com/prejee/beta/IIIT_Hyderabad_Logo.jpg"
                                alt="IIIT Hyderabad"
                                width={170}
                                height={20}
                                className="py-3 lg:py-5 text-gray-500 dark:text-neutral-500 object-contain"
                            />

                            <Image
                                src="https://cdn.prejee.com/prejee/beta/aiims-delhi.svg"
                                alt="AIIMS Delhi"
                                width={72}
                                height={20}
                                className="py-3 lg:py-5 text-gray-500 dark:text-neutral-500 object-contain"
                            />

                            <Image
                                src="https://cdn.prejee.com/prejee/beta/bits.svg"
                                alt="BITS Pilani"
                                width={72}
                                height={20}
                                className="py-3 lg:py-5 text-gray-500 dark:text-neutral-500 object-contain"
                            />

                            <Image
                                src="https://cdn.prejee.com/prejee/beta/NUS.png"
                                alt="National University of Singapore"
                                width={170}
                                height={20}
                                className="py-3 lg:py-5 text-gray-500 dark:text-neutral-500 object-contain bg-transparent"
                            />

                        </div>

                    </div>
                </div>
            </div>
            {/* <FloatingCards /> */}
            <Pricing />
        </section >
    );
};

export default CTA;