import { AgentSkillsExplainer } from "@/components/AgentSkillsExplainer";
import { DomainRadar } from "@/components/DomainRadar";
import { HomeBackground } from "@/components/HomeBackground";
import { Leaderboard } from "@/components/Leaderboard";
import { HowItWorks } from "@/components/HowItWorks";
import { ReleasePerformance } from "@/components/ReleasePerformance";
import { TaskCards } from "@/components/TaskCards";
import { TimePerformance } from "@/components/TimePerformance";
import { WhosCiting } from "@/components/WhosCiting";
import { Button } from "@/components/ui/button";
import { getTasks } from "@/utils/tasks";
import { ArrowRight } from "lucide-react";
import type { Metadata } from "next";
import Link from "next/link";

export const metadata: Metadata = {
  title: "SkillsBench — Benchmarking How Well Agent Skills Work",
  description:
    "The first evaluation framework measuring how AI agent skills improve performance. SkillsBench v1.1 ships 87 native BenchFlow task.md packages for BenchFlow.",
  alternates: { canonical: "https://skillsbench.ai" },
};

export default async function Home() {
  const tasks = await getTasks();
  const recentTasks = tasks.slice(0, 20);

  return (
    <div className="flex flex-col min-h-screen relative text-foreground overflow-x-hidden">
      <main className="flex-1">
        {/* Custom Hero Section */}
        <div className="flex flex-col items-center justify-center min-h-[75vh] text-center space-y-8 relative z-10 px-4 pt-20 overflow-hidden">
          <HomeBackground />
          {/* Soft Glow Background for better text visibility */}
          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-3xl h-full max-h-128 bg-background/60 blur-hero -z-10 rounded-full pointer-events-none mix-blend-normal" />
          <div className="space-y-6">
            <Link
              href="/blogs/skillsbench-1-1"
              className="inline-flex items-center rounded-full border border-chart-2/50 px-4 py-1.5 text-xs font-medium bg-chart-2/10 text-foreground backdrop-blur-md hover:bg-chart-2/20 hover:border-chart-2 transition-[background-color,border-color] duration-300 cursor-pointer group"
            >
              <span className="w-2 h-2 rounded-full bg-chart-2 mr-2 animate-pulse group-hover:scale-110 transition-transform shadow-glow"></span>
              New release · SkillsBench v1.1
              <ArrowRight className="ml-1.5 h-3 w-3 transition-transform group-hover:translate-x-0.5" />
            </Link>

            <h1 className="text-3xl sm:text-4xl lg:text-5xl font-medium tracking-tight text-foreground leading-tight drop-shadow-2xl max-w-3xl mx-auto">
              <AgentSkillsExplainer />
              Bench: Benchmarking How Well Skills Work Across Diverse Tasks
            </h1>

            <p className="max-w-xl mx-auto text-lg text-foreground/80 font-normal drop-shadow-md">
              The first evaluation framework that measures how skills work, and
              the first dataset that measures how powerful models are at using
              skills on expert-curated tasks across high-GDP-value, diverse domains.
            </p>
          </div>

          {/* Buttons wrapped in 'dark' class to ensure they look correct against the dark background regardless of system theme */}
          <div className="flex flex-col sm:flex-row items-center gap-6 pt-4">
            <Button asChild>
              <a href="https://arxiv.org/abs/2602.12670" target="_blank" rel="noopener noreferrer">
                Read the Paper
              </a>
            </Button>
            <Button
              asChild
              variant="secondary"
              className="border border-border hover:bg-accent transition-colors"
            >
              <Link href="/leaderboard">
                See Leaderboard
              </Link>
            </Button>
            <Button
              asChild
              variant="secondary"
              className="border border-border hover:bg-accent transition-colors"
            >
              <Link href="/docs">
                Documentation
              </Link>
            </Button>
          </div>
        </div>

        <div className="max-w-6xl mx-auto px-4 md:px-8 py-12 space-y-32">
          <TimePerformance />

          {/* How SkillsBench Works (main column) + Cited By (right rail) */}
          <section className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-10 items-start">
            <div className="lg:col-span-7">
              <HowItWorks />
            </div>
            <aside className="lg:col-span-5 lg:border-l lg:border-border/60 lg:pl-10">
              <WhosCiting />
            </aside>
          </section>

          <Leaderboard />
          <ReleasePerformance />
          <DomainRadar />
          <TaskCards tasks={recentTasks} />
        </div>
      </main>
    </div>
  );
}