import Link from "next/link";
import { buttonVariants, Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";

export const dynamic = "force-dynamic";

export default async function Index() {
  return (
    <div className="flex flex-col w-screen justify-center items-center">
      {/* Hero */}
      <div className="w-full h-screen flex flex-col items-center">
        {/* Navbar */}
        <nav className="w-full h-16 flex justify-center">
          {/* Contain Navbar */}
          <div className="w-full flex justify-between items-center p-4 md:w-4/5 lg:w-3/5">
            {/* Logo */}
            <div className="flex flex-row justify-center items-center space-x-2">
              <svg
                fill="#7C3AED"
                width="32px"
                height="32px"
                viewBox="0 0 15 15"
                version="1.1"
                id="circle"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M14,7.5c0,3.5899-2.9101,6.5-6.5,6.5S1,11.0899,1,7.5S3.9101,1,7.5,1S14,3.9101,14,7.5z" />
              </svg>
              <h1 className="text-lg font-extrabold text-secondary-foreground">
                SKALARA
              </h1>
            </div>
            {/* Links */}
            <div className="flex flex-row justify-center items-center space-x-4">
              <Link
                href="/dashboard"
                className={cn(
                  buttonVariants({ variant: "default" }),
                  "bg-gradient-to-r from-[hsl(262.1,83.3%,57.8%)] to-[hsl(262.1,83.3%,67.8%)]"
                )}
              >
                Dashboard
              </Link>
              <Link
                href="/login"
                className={cn(
                  buttonVariants({ variant: "default" }),
                  "bg-gradient-to-r from-[hsl(262.1,83.3%,57.8%)] to-[hsl(262.1,83.3%,67.8%)]"
                )}
              >
                Login
              </Link>
            </div>
          </div>
        </nav>
        {/* Hero Content */}
        <div className="w-full h-full flex flex-col justify-center items-center bg-[url('grid-gradient.svg')] bg-cover">
          <div className="flex flex-col justify-center items-center space-y-6 text-center p-2">
            <h1 className="text-4xl font-bold sm:text-5xl lg:text-6xl xl:text-7xl">
              Simple. Intelligent. Automated.
            </h1>
            <p className="text-lg tracking-wide sm:text-xl lg:text-2xl">
              AI-powered project management for tech teams and indie developers.
            </p>
          </div>
          <div className="flex flex-col space-y-4 w-full p-4 sm:flex-row sm:space-y-0 sm:space-x-4 sm:w-5/6 md:w-3/5 lg:w-1/2 xl:w-[720px]">
            <Input
              className="bg-secondary shadow-inner sm:w-2/3"
              placeholder="example@company.com"
            />
            <Button
              variant="default"
              className="bg-gradient-to-r from-[hsl(262.1,83.3%,57.8%)] to-[hsl(262.1,83.3%,67.8%)] shadow-lg shadow-primary/30 sm:w-1/3"
            >
              Join Waitlist
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}