import Link from "next/link";
import { ArrowRight, Bot, Globe2, Plane, TrendingUp } from "lucide-react";
import { ArticleCard } from "@/components/article-card";
import { BreakingTicker } from "@/components/breaking-ticker";
import { FeaturedSlider } from "@/components/featured-slider";
import { GlobalMap } from "@/components/global-map";
import { getBreakingArticles, getCategories, getFeaturedArticles, getPublishedArticles } from "@/lib/data";
import type { LucideIcon } from "lucide-react";

export const dynamic = "force-dynamic";

const pillars: Array<[string, string, LucideIcon]> = [
  ["Global newsroom", "Live affairs, diplomacy, and verified updates.", Globe2],
  ["Travel intelligence", "Country guides, visa notes, hotels, and vlogs.", Plane],
  ["AI trend radar", "Tools, agents, automation, and frontier research.", Bot],
  ["Markets signal", "Business, finance, trade, and economic context.", TrendingUp]
];

export default async function HomePage() {
  const [featured, latest, breaking, categories] = await Promise.all([
    getFeaturedArticles(),
    getPublishedArticles(9),
    getBreakingArticles(),
    getCategories()
  ]);

  return (
    <>
      <section className="relative overflow-hidden px-4 py-8 sm:px-6 lg:px-8">
        <GlobalMap />
        <div className="relative z-10 mx-auto max-w-7xl">
          <div className="mb-6 flex flex-wrap items-center justify-between gap-3">
            <p className="font-display text-xs font-bold uppercase tracking-[.28em] text-cyanx">theinfomix.com</p>
            <Link href="/dashboard/new" className="inline-flex items-center gap-2 rounded-full border border-white/12 px-4 py-2 text-sm font-semibold text-white hover:border-cyanx hover:text-cyanx">
              Submit story <ArrowRight size={16} />
            </Link>
          </div>
          <FeaturedSlider articles={featured} />
        </div>
      </section>
      <BreakingTicker items={breaking} />

      <section className="px-4 py-14 sm:px-6 lg:px-8">
        <div className="mx-auto max-w-7xl">
          <div className="grid gap-4 md:grid-cols-4">
            {pillars.map(([title, body, Icon]) => (
              <div className="glass rounded-lg p-5" key={title}>
                <Icon className="text-cyanx" size={24} />
                <h2 className="mt-4 font-display text-lg font-bold text-white">{title}</h2>
                <p className="mt-2 text-sm leading-6 text-white/58">{body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="px-4 pb-16 sm:px-6 lg:px-8">
        <div className="mx-auto max-w-7xl">
          <div className="mb-8 flex items-end justify-between gap-4">
            <div>
              <p className="font-display text-xs font-bold uppercase tracking-[.28em] text-cyanx">Latest Mix</p>
              <h2 className="mt-3 font-display text-3xl font-black text-white sm:text-4xl">News, travel, AI, markets, and culture</h2>
            </div>
            <Link href="/latest" className="hidden text-sm font-semibold text-cyanx hover:text-white sm:block">View all</Link>
          </div>
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {latest.map((article, index) => <ArticleCard key={article.id} article={article} priority={index < 3} />)}
          </div>
        </div>
      </section>

      <section className="border-y border-white/10 bg-white/[.03] px-4 py-14 sm:px-6 lg:px-8">
        <div className="mx-auto max-w-7xl">
          <div className="mb-7 flex items-end justify-between">
            <h2 className="font-display text-3xl font-black text-white">Editorial channels</h2>
            <Link href="/search" className="text-sm font-semibold text-cyanx">Advanced search</Link>
          </div>
          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
            {categories.map((category) => (
              <Link key={category.id} href={`/category/${category.slug}`} className="glass rounded-lg p-5 transition hover:-translate-y-1 hover:border-cyanx/50">
                <span className="text-xs font-bold uppercase tracking-[.2em]" style={{ color: category.color }}>{category.name}</span>
                <p className="mt-3 text-sm leading-6 text-white/58">{category.description}</p>
                <p className="mt-4 text-xs text-white/38">{category._count.articles} stories</p>
              </Link>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}