"use client";
import { Book, ChevronLeft, ChevronRight } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import BlurFade from "@/components/blur-fade";
import { Card } from "@/components/ui/card";
import { cn } from "@/lib/utils";
import { spaceGrotesk } from "@/app/fonts";
import Link from "next/link";
import { buttonVariants } from "@/components/ui/button";
import Image from "next/image";

const ROADMAPS = [
  "Lorem ipsum dolor sit amet consectetur. Et dictum at egestas nisl. Aenean ut a augue viverra adipiscing mi nisl ullamcorper mauris. Ipsum varius ullamcorper mi suscipit. Justo eget faucibus aliquet dui pellentesque sit vitae pellentesque.",
  "Lorem ipsum dolor sit amet consectetur. Et dictum at egestas nisl. Aenean ut a augue viverra adipiscing mi nisl ullamcorper mauris. Ipsum varius ullamcorper mi suscipit. Justo eget faucibus aliquet dui pellentesque sit vitae pellentesque.",
  "Lorem ipsum dolor sit amet consectetur. Et dictum at egestas nisl. Aenean ut a augue viverra adipiscing mi nisl ullamcorper mauris. Ipsum varius ullamcorper mi suscipit. Justo eget faucibus aliquet dui pellentesque sit vitae pellentesque.",
  "Lorem ipsum dolor sit amet consectetur. Et dictum at egestas nisl. Aenean ut a augue viverra adipiscing mi nisl ullamcorper mauris. Ipsum varius ullamcorper mi suscipit. Justo eget faucibus aliquet dui pellentesque sit vitae pellentesque.",
];

export function Roadmap() {
  return (
    <section className="">
      <div
        className="layout"
        style={{
          backgroundImage: "url(/background-4.png)",
          backgroundColor: "rgba(255, 255, 255, 0.75)",
          backgroundBlendMode: "lighten",
        }}
      >
        <div className="border-x border-b">
          <BlurFade className="p-6" inView>
            <Badge className="hover:bg-primary rounded-md font-light mb-6">
              <ChevronLeft className="h-6 w-6" />
              <span className="text-lg mx-2">Roadmap</span>
              <ChevronRight className="h-6 w-6" />
            </Badge>
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
              <div className="sm:col-span-2">
                <h2
                  className={cn(
                    "text-3xl sm:text-6xl/[80px] mb-2",
                    spaceGrotesk.className
                  )}
                >
                  WE HAVE BIG PLANS FOR SOVIRO.AI IN 2025
                </h2>
                <p className="mb-4 text-muted-foreground">
                  Discover our strategic roadmap for 2025, In 2025, we&apos;ll
                  transform our SDK AI platform to be faster, smarter, and more
                  user-friendly. With key updates, new features, and seamless
                  integration, we&apos;re making it easier for developers to
                  build powerful with SOVIRO.AI
                </p>
                <Link
                  href={"https://soviro.gitbook.io/soviro"}
                  target="_blank"
                  className={buttonVariants({ variant: "default" })}
                >
                  <Book className="h-4 w-4 mr-2" />
                  Open Gitbook
                </Link>
              </div>
              <div className="h-[267px] sm:h-[367px] w-full relative">
                <Image
                  src="/background-5.png"
                  fill={true}
                  className="h-full w-full object-cover"
                  alt=""
                />
              </div>
            </div>
          </BlurFade>
        </div>
        <ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 border-x ">
          {ROADMAPS.map((roadmap, idx) => (
            <BlurFade
              key={idx}
              delay={0.2 * idx}
              inView
              className="border-r last:border-r-0 p-6 space-y-4 border-b last:border-b-0 sm:[&:nth-child(3)]:border-b-0 sm:[&:nth-child(4)]:border-b-0 lg:border-b-0"
            >
              <li>
                <div className="flex items-center gap-3">
                  <p className="text-5xl">{idx + 1}</p>
                  <p className="text-lg">Q{idx + 1} 2025</p>
                </div>
                <h2 className="text-2xl font-semibold">Phase 0{idx + 1}</h2>
                <p className="text-muted-foreground">{roadmap}</p>
              </li>
            </BlurFade>
          ))}
        </ul>
      </div>
    </section>
  );
}
