"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";
import { LetterGlitch } from "@/components/letter-glitch";
import { SevenSegmentDigit } from "@/components/seven-segment-digit";

const ROADMAPS = [
  "Optimize inference pipelines to reduce latency and enhance memory efficiency. Introduce dynamic model selection for improved performance. Develop stateful agents capable of maintaining context across interactions.",
  "Enable multi-agent collaboration for task delegation and workflow automation. Integrate knowledge graphs to enhance reasoning and decision-making. Develop an interactive agent dashboard for better visualization and control.",
  "Strengthen data security with access controls and compliance measures. Expand deployment flexibility with on-premises and cloud options. Enhance API capabilities for seamless third-party integration.",
  "Launch a plugin marketplace for custom agent extensions. Develop low-code/no-code tools for easy deployment. Explore AI-driven automation in robotics and IoT applications.",
];

export function Roadmap() {
  return (
    <section className="">
      <div className="layout relative">
        <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">
                  <SevenSegmentDigit digit={`${idx + 1}`} />
                  <p className="text-lg font-semibold">Q{idx + 1} 2025</p>
                </div>
                <h2 className="text-2xl font-semibold">Phase 0{idx + 1}</h2>
                <p className="text-[#222222]">{roadmap}</p>
              </li>
            </BlurFade>
          ))}
        </ul>
        <LetterGlitch
          glitchSpeed={50}
          centerVignette={false}
          outerVignette={false}
          smooth={true}
          glitchColors={["#222222", "#BEBDBD"]}
          className="absolute top-0 left-0 right-0 bottom-0 bg-transparent opacity-10"
        />
      </div>
    </section>
  );
}
