import { cn } from "@/lib/utils";
import { Marquee } from "@/lib/marquee";
import { ArrowRight, Flame } from "lucide-react";

const reviews = [
    {
        name: "Marmik",
        alias: "Web Developer",
        body: "Kinesis completely changed how I look at things. This is next-level innovation. Truly revolutionary!",
        img: "https://api.dicebear.com/9.x/glass/svg?backgroundColor=4762eb",
    },
    {
        name: "Jill",
        alias: "Design Engineer",
        body: "Such a refreshing experience! I'm genuinely impressed.",
        img: "https://api.dicebear.com/9.x/glass/svg?backgroundColor=47ebd0",
    },
    {
        name: "John",
        alias: "Founder, X",
        body: "Everything feels so smooth and intuitive. Great job!",
        img: "https://api.dicebear.com/9.x/glass/svg?backgroundColor=6247eb",
    },
    {
        name: "Jane",
        alias: "Business Consultant",
        body: "I didn’t expect to be blown away, but here I am — amazed!",
        img: "https://api.dicebear.com/9.x/glass/svg?backgroundColor=ebd047",
    },
    {
        name: "Jenny",
        alias: "Project Manager",
        body: "It's polished, thoughtful, and simply beautiful. Kinesis completely changed how I look at things. Love every bit of it.",
        img: "https://api.dicebear.com/9.x/glass/svg?backgroundColor=eb4762",
    },
    {
        name: "James",
        alias: "Design Engineer",
        body: "This is next-level innovation. Hats off to the creators!",
        img: "https://api.dicebear.com/9.x/glass/svg?backgroundColor=b447eb",
    },
];


const firstRow = reviews.slice(0, reviews.length / 2);
const secondRow = reviews.slice(reviews.length / 2);

function ReviewCard({
    img,
    name,
    alias,
    body,
    className
}: {
    img: string;
    name: string;
    alias: string;
    body: string;
    className?: string;
}) {

    return (
        <figure
            className={cn(
                'w-56 cursor-pointer overflow-hidden rounded-xl border p-4 m-1',
                "border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]",
                'dark:border-neutral-50/10 dark:bg-neutral-50/8 dark:hover:bg-neutral-50/10',
                className
            )}
        >
            <div className='flex items-center justify-start gap-3 mb-3'>
                <img className='rounded-full' width='32' height='32' alt='' src={img} />
                <div className='flex flex-col'>
                    <figcaption className='text-sm font-medium dark:text-white'>
                        {name}
                    </figcaption>
                    <p className='text-xs font-medium dark:text-white/40'>{alias}</p>
                </div>
            </div>
            <blockquote className='mt-2 text-sm'>{body}</blockquote>
        </figure>
    )
}


export default function CtaOne() {
    return (
        <div className="relative flex h-96 sm:h-[450px] lg:h-[500px] w-full max-w-5xl items-center justify-center border rounded-4xl overflow-hidden m-4 sm:m-6 lg:m-8 ">

            <div className="absolute h-full w-full max-w-[1500px] flex items-center justify-center overflow-hidden -z-2">

                <Marquee className="[--duration:10s] min-w-fit" vertical={true}>
                    {firstRow.map((review) => (
                        <ReviewCard key={review.alias} {...review} className="w-40 xs:w-40 sm:w-40 md:w-56" />
                    ))}
                </Marquee>
                <Marquee reverse className="[--duration:9s] min-w-fit" vertical={true}>
                    {secondRow.map((review) => (
                        <ReviewCard key={review.alias} {...review} className="w-40 xs:w-40 sm:w-40 md:w-56" />
                    ))}
                </Marquee>
                <Marquee className="[--duration:9s] min-w-fit" vertical={true}>
                    {firstRow.map((review) => (
                        <ReviewCard key={review.alias} {...review} className="w-40 xs:w-40 sm:w-40 md:w-56" />
                    ))}
                </Marquee>
                <Marquee reverse className="[--duration:9s] min-w-fit" vertical={true}>
                    {secondRow.map((review) => (
                        <ReviewCard key={review.alias} {...review} className="w-40 xs:w-40 sm:w-40 md:w-56" />
                    ))}
                </Marquee>
            </div>

            <div className="relative z-10 flex flex-col items-center justify-center gap-3 sm:gap-4 lg:gap-5 px-4 text-center">
                <div className="h-16 w-16 sm:h-20 sm:w-20 lg:h-24 lg:w-24 bg-white/10 p-2 sm:p-3 backdrop-blur-md dark:bg-black/10 border rounded-lg">
                    <Flame className="h-full w-full" />
                </div>
                <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold">Ship products faster then ever.</h1>
                <p className="text-sm sm:text-base">Spend less time building, more time shipping. Join the waitlist.</p>
                <a
                    className="group flex items-center justify-center rounded-2xl sm:rounded-3xl py-2 px-4 sm:py-3 sm:px-6 border bg-background text-foreground shadow-sm hover:bg-accent hover:text-accent-foreground text-sm sm:text-base
                        "
                    href="https://kinesisui.com"
                >
                    <span>Get Started</span>
                    <ArrowRight className="ml-2 h-3 w-3 sm:h-4 sm:w-4 transition-transform group-hover:translate-x-1" />
                </a>
            </div>
            <div className="pointer-events-none absolute inset-x-0 top-0 h-1/4 bg-gradient-to-b from-background rounded-3xl"></div>
            <div className="absolute inset-x-0 bottom-0 h-full bg-gradient-to-b from-transparent to-white to-80% dark:to-black rounded-3xl"></div>
            <div className="pointer-events-none absolute inset-x-0 bottom-0 h-full bg-gradient-to-t from-background rounded-3xl"></div>
        </div>
    );
}
Call to action sections

CTA 1

Install CTA 1

CTA 2

Install CTA 2

CTA 3

Install CTA 3

CTA 4

Install CTA 4

CTA 5

Install CTA 5
