import Link from "next/link";
import { pillarMeta } from "@/lib/pillar-data";
import { getPublishedPosts } from "@/lib/content";

export const metadata = {
    title: "Learn QR Code Mastery | QR Master Hub",
    description: "Guides, use cases, tracking deep-dives, and security best practices for dynamic QR codes.",
    alternates: {
        canonical: "https://www.qrmaster.net/learn",
    },
    openGraph: {
        url: "https://www.qrmaster.net/learn",
    },
};

export default function LearnHubPage() {
    const posts = getPublishedPosts();
    // Sort by date descending
    const topLatest = [...posts].sort((a, b) => {
        const dateA = a.datePublished ? new Date(a.datePublished) : new Date(a.date);
        const dateB = b.datePublished ? new Date(b.datePublished) : new Date(b.date);
        return dateB.getTime() - dateA.getTime();
    }).slice(0, 6);

    return (
        <main className="container mx-auto max-w-5xl py-12 px-4 space-y-12">
            <header className="space-y-4 max-w-3xl">
                <h1 className="text-4xl md:text-5xl font-extrabold text-gray-900 tracking-tight">QR Code Knowledge Hub</h1>
                <p className="text-xl text-gray-600">
                    Master the art of QR codes. Explore our expert guides on generation, tracking, security, and marketing strategies.
                </p>
            </header>

            <section>
                <h2 className="text-2xl font-bold text-gray-900 mb-6">Topic Pillars</h2>
                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {pillarMeta.sort((a, b) => a.order - b.order).map(p => (
                        <Link key={p.key} href={`/learn/${p.key}`} className="group block h-full rounded-2xl border border-gray-200 bg-white p-6 shadow-sm hover:shadow-md hover:border-blue-200 transition-all">
                            <div className="text-sm font-semibold text-blue-600 uppercase tracking-wide mb-2 opacity-80 group-hover:opacity-100">Pillar</div>
                            <div className="text-2xl font-bold text-gray-900 mb-2 group-hover:text-blue-700">{p.title}</div>
                            <div className="text-gray-600">{p.description}</div>
                        </Link>
                    ))}
                </div>
            </section>

            <section>
                <h2 className="text-2xl font-bold text-gray-900 mb-6">Latest Guides</h2>
                <div className="grid md:grid-cols-2 gap-6">
                    {topLatest.map(p => (
                        <Link key={p.slug} href={`/blog/${p.slug}`} className="group block rounded-2xl border border-gray-200 bg-white p-6 shadow-sm hover:shadow-md hover:border-blue-200 transition-all">
                            <div className="flex justify-between items-center mb-3">
                                <div className="text-xs font-semibold px-2 py-1 rounded bg-gray-100 text-gray-600">{p.pillar?.toUpperCase() || 'GUIDE'}</div>
                                <div className="text-xs text-gray-400">{p.date}</div>
                            </div>
                            <div className="text-xl font-bold text-gray-900 mb-2 group-hover:text-blue-700 line-clamp-2">{p.title}</div>
                            <div className="text-gray-600 line-clamp-2">{p.description}</div>
                        </Link>
                    ))}
                </div>
            </section>
        </main>
    );
}
