import { buttonVariants } from "@/components/ui/button";
import { page_routes } from "@/lib/routes-config";
import { ArrowRightIcon, BookOpenCheck, Headset, Youtube } from "lucide-react";
import Link from "next/link";
import { cn } from "@/lib/utils";
import AnimatedShinyText from "@/components/ui/animated-shiny-text";
import { getMetadata } from "@/app/layout";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export const metadata = getMetadata({
  title: "Home",
});

export default function Home() {
  return (
    <div className="flex flex-col min-h:[100vh] items-center justify-center text-center px-4 sm:py-40 py-12">
      <Link
        href="https://tutoraddons.com/products/"
        className="mb-5 sm:text-lg flex items-center gap-2 underline underline-offset-4 sm:-mt-12"
      >
        <div className="z-10 flex min-h-10 items-center justify-center max-[800px]:mt-10">
          <div
            className={cn(
              "group rounded-full border border-black/5 bg-black/5 text-base text-white transition-all ease-in hover:cursor-pointer hover:bg-accent dark:border-white/5 dark:bg-transparent dark:hover:bg-accent",
            )}
          >
            <AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-100 hover:duration-300 hover:dark:text-neutral-200">
              <span>🚀 Buy This Plugin</span>
              <ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
            </AnimatedShinyText>
          </div>
        </div>
      </Link>
      <h1 className="text-2xl font-bold mb-6 sm:text-6xl">TutorAddons - Knowledge Base</h1>
      <p className="mb-10 sm:text-xl max-w-[800px] text-muted-foreground">
      Tutorials with video, image and written content as well as explanations on how to use the plugin starting from how to install, configure and use it.
      </p>
      <div className="flex flex-row items-center gap-6 mb-10">
        <Link
          href={`/docs${page_routes[0].href}`}
          className={buttonVariants({
            className: "px-6 bg-accent text-white hover:bg-primary dark:bg-accent dark:hover:bg-primary",
            size: "lg",
          })}
        >
          Get Started
        </Link>
        <Link
          href="https://www.youtube.com/channel/UC5H-2U68EuVAH9Ehz5eYHNg?sub_confirmation=1"
          target="_blank"
          className={buttonVariants({
            variant: "secondary",
            className: "px-6 bg-gray-200 text-gray-900 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700",
            size: "lg",
          })}
        >
          Subscribe Now
        </Link>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 py-12">
        <Card className="px-2 py-6">
          <CardHeader className="flex flex-row justify-center items-center gap-3">
            <Youtube className="size-6 text-primary" />
            <CardTitle className="text-xl">Youtube</CardTitle>
          </CardHeader>
          <CardContent>
            <p>Watch video tutorials via youtube playlist.</p>
          </CardContent>
        </Card>
        <Card className="px-2 py-6">
          <CardHeader className="flex flex-row justify-center items-center gap-3">
            <BookOpenCheck className="size-6 text-primary" />
            <CardTitle className="text-xl">Documentations</CardTitle>
          </CardHeader>
          <CardContent>
            <p>Interactive documentation that is easy to understand and follow.</p>
          </CardContent>
        </Card>
        <Card className="px-2 py-6">
          <CardHeader className="flex flex-row justify-center items-center gap-3">
            <Headset className="size-6 text-primary" />
            <CardTitle className="text-xl">Support</CardTitle>
          </CardHeader>
          <CardContent>
            <p>Support from developers with tickets and community.</p>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}