import Link from "next/link"
import { TrendingUp } from "lucide-react"
import { Button } from "@/components/ui/button"
import fs from "fs"
import path from "path"

let cachedProjectData: any = null;

function getProjectData() {
  if (!cachedProjectData) {
    const projectDataPath = path.join(process.cwd(), "public", "public_project.json");
    cachedProjectData = JSON.parse(fs.readFileSync(projectDataPath, "utf-8"));
  }
  return cachedProjectData;
}
import TrendingList from "@/components/trending/trending-list"

interface Example {
  id: string
  title: string
  description: string
  category: string
  views: string
}

export default function TrendingPage() {
  // Process the large data on the server to avoid sending it to the client
  const allExamples: Example[] = (getProjectData() as any[]).map((project: any, index: number) => ({
    id: project.projectId || project._id,
    title: project.projectName || "Unknown Project",
    description: project.projectDescription || "",
    category: ["Research Papers", "Analyzed Videos", "Books"][index % 3],
    views: `${(index + 1) * 123}K`
  }))

  return (
    <main className="min-h-screen bg-background">
      {/* Unified Header Section */}
      <section className="relative pt-0 pb-4 overflow-hidden border-b border-border">
        {/* Background Decorative Element */}
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-10 opacity-30">
          <div className="absolute top-0 left-1/4 w-96 h-96 bg-primary/20 rounded-full blur-[100px]" />
          <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-accent/20 rounded-full blur-[100px]" />
        </div>

        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center mb-4 mt-4">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-xs font-bold uppercase tracking-wider mb-2 border border-primary/20">
              <TrendingUp className="h-3 w-3" />
              Community Insights
            </div>
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-foreground mb-3">
              Trending <span className="text-primary">Examples</span>
            </h1>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed mb-2">
              Explore the most popular AI-driven research, analyzed videos, and books currently trending in our global community.
            </p>
          </div>
        </div>
      </section>

      {/* Examples Grid */}
      <section className="py-4">
        <div className="container mx-auto px-4">
          <TrendingList initialExamples={allExamples} />
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-10 bg-gradient-to-r from-primary to-accent">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold text-white mb-4">
            Create Your Own Mind Maps
          </h2>
          <p className="text-white/80 mb-8 max-w-2xl mx-auto">
            Transform your documents, research papers, and videos into visual knowledge maps with CodeframeAI.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" variant="secondary" asChild>
              <Link href="/plans">Get Started Free</Link>
            </Button>
            <Button size="lg" variant="outline" className="bg-transparent text-white border-white hover:bg-white/10" asChild>
              <Link href="/register-demo">Request Demo</Link>
            </Button>
          </div>
        </div>
      </section>
    </main>
  )
}