import type { Metadata } from 'next'
import Link from 'next/link'
import { getAllArticles } from '@/lib/articles'

export const metadata: Metadata = {
  title: 'Publications — Finance Quantitative',
  description: "Présentations de métiers, guides de formation et analyses du monde de la finance quantitative. Rédigés par l'équipe QuantCareers.",
}

const categoryColor: Record<string, string> = {
  Métier:    'score-aaa',
  Formation: 'score-aa',
  Marché:    'score-a',
}

function formatDate(iso: string) {
  return new Date(iso).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })
}

export default function BlogPage() {
  const articles = getAllArticles()

  return (
    <main>
      <section className="section-blog-listing">
        <div className="section-wrap">
          <div className="section-head">
            <div className="eyebrow">Publications</div>
            <h1 className="section-title">
              Finance quantitative —<br /><em>comprendre le secteur</em>
            </h1>
            <p className="section-desc">
              Présentations de métiers, guides de masters et analyses du marché du recrutement quant.
              Tous les articles sont gratuits et en accès libre.
            </p>
          </div>

          <div className="blog-grid">
            {articles.map((article) => (
              <Link key={article.slug} href={`/blog/${article.slug}/`} className="blog-card">
                <div className="blog-card-top">
                  <span className={`score-pill ${categoryColor[article.category] ?? 'score-a'}`}
                    style={{ fontSize: '0.6rem', padding: '0.15rem 0.5rem' }}>
                    {article.category}
                  </span>
                  <span className="blog-card-read">{article.readTime} de lecture</span>
                </div>
                <h2 className="blog-card-title">{article.title}</h2>
                <p className="blog-card-excerpt">{article.excerpt}</p>
                <div className="blog-card-footer">
                  <span className="blog-card-author">{article.author}</span>
                  <span className="blog-card-date">{formatDate(article.date)}</span>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>
    </main>
  )
}