import Link from "next/link";
import { BoxIcon, DoorOpenIcon, GaugeIcon, ShieldIcon, SparklesIcon, UsersIcon } from "lucide-react";
import { Download } from "@/components/download";
import { buttonVariants } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { hubURL } from "@/lib/links";
import { latestRelease } from "@/lib/releases";

const features = [
  {
    icon: GaugeIcon,
    title: "A Modern Renderer",
    text: "Smooth frame rates up to 360 FPS or uncapped, with animations and the camera drawn between frames.",
  },
  {
    icon: BoxIcon,
    title: "Community Products",
    text: "Clothing and furniture made by the community, from catalogs on the hub, in the shop and your inventory.",
  },
  {
    icon: DoorOpenIcon,
    title: "T5DE Rooms",
    text: "Rooms hosted by T5DE's hub: public or private, with moderators, invites, favorites and ratings.",
  },
  {
    icon: UsersIcon,
    title: "One Account",
    text: "Link all your avatars to one hub account, see who's online, and show the T5 badge if you like.",
  },
  {
    icon: ShieldIcon,
    title: "No Tracking",
    text: "IMVU's analytics, crash reports, log uploads and device fingerprinting are blocked.",
  },
  {
    icon: SparklesIcon,
    title: "Small Fixes",
    text: "No ads, Creator Mode, more room filters, product IDs in the shop, and faster downloads.",
  },
];

const steps = [
  { title: "Install IMVU Classic", text: "From imvu.com, as usual. T5DE leaves it untouched." },
  { title: "Run T5DE's Setup", text: "It finds IMVU Classic and installs a patched copy. Pick the patches you want." },
  { title: "Sign In", text: "With your IMVU account. T5DE keeps itself up to date." },
];

export default async function Home() {
  const release = await latestRelease();
  return (
    <div className="space-y-20">
      <section className="max-w-2xl space-y-5 pt-4">
        <p className="text-sm font-medium text-muted-foreground">T5DE</p>
        <h1 className="text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
          IMVU Classic, kept alive and made better.
        </h1>
        <p className="text-lg text-pretty text-muted-foreground">
          An unofficial patch for the IMVU Classic client: a modern renderer, community products, hosted rooms, and no
          tracking.
        </p>
        <div className="pt-2">
          <Download release={release}>
            <a href={hubURL} className={buttonVariants({ size: "lg", variant: "outline", className: "px-4" })}>
              Open the Hub
            </a>
          </Download>
        </div>
      </section>

      <section className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {features.map(({ icon: Icon, title, text }) => (
          <Card key={title}>
            <CardHeader>
              <Icon className="size-5 text-muted-foreground" />
              <CardTitle>{title}</CardTitle>
            </CardHeader>
            <CardContent className="text-sm text-muted-foreground">{text}</CardContent>
          </Card>
        ))}
      </section>

      <section className="space-y-6">
        <h2 className="text-2xl font-semibold tracking-tight">Getting Started</h2>
        <ol className="grid gap-6 sm:grid-cols-3">
          {steps.map((step, i) => (
            <li key={step.title} className="space-y-1.5">
              <span className="flex size-7 items-center justify-center rounded-full bg-muted text-sm font-medium tabular-nums">
                {i + 1}
              </span>
              <p className="font-medium">{step.title}</p>
              <p className="text-sm text-muted-foreground">{step.text}</p>
            </li>
          ))}
        </ol>
        <p className="text-sm text-muted-foreground">
          Windows only.{" "}
          <Link href="/faq" className="text-foreground underline underline-offset-4">
            Questions?
          </Link>
        </p>
      </section>
    </div>
  );
}