"use client";

import { useContext } from 'react';
import { Badge } from '@/components/ui/badge';
import { ArrowRight } from 'lucide-react';
import ScrollReveal from './ScrollReveal';
import { LatestPostsContext } from '@/components/blocks/latestPostsContext';
import { useLocale } from '@/components/blocks/localeContext';

const defaultArticles: { title: string; category: string; image: string; href?: string }[] = [
  {
    title: "Cool Roof en grande distribution : combien E.Leclerc économise chaque été",
    category: 'Étude de cas',
    image: 'https://covalba-admin.paf-studio.dev/wp-content/uploads/2026/06/distribution-intro.jpg',
  },
  {
    title: 'Décret tertiaire : comment le cool roof réduit vos obligations',
    category: 'Réglementation',
    image: 'https://covalba-admin.paf-studio.dev/wp-content/uploads/2026/06/logistique-intro.jpg',
  },
  {
    title: 'Peinture cool roof : comment choisir sans se tromper',
    category: 'Guide',
    image: 'https://covalba-admin.paf-studio.dev/wp-content/uploads/2026/06/chantier-collectivite.jpg',
  },
];

interface BlogPreviewProps {
  badge?: string;
  titre?: string;
  articles?: { title: string; category: string; image: string; href?: string }[];
}

const BlogPreview = ({
  badge = 'Ressources',
  titre = "Le cool roof au quotidien : guides, études, retours d'expérience",
  articles = defaultArticles,
}: BlogPreviewProps = {}) => {
  // Priorité aux derniers articles WordPress injectés par la route serveur ;
  // sinon, on retombe sur les cartes fournies (bloc WP) ou les défauts.
  const locale = useLocale();
  const latest = useContext(LatestPostsContext);
  const shown = latest && latest.length ? latest : articles;

  // Pas de blog en EN/ES (contenu non traduit) → on masque la section ailleurs
  // qu'en FR pour éviter d'afficher des articles français hors home FR.
  if (locale !== 'fr') return null;

  return (
  <section id="blog" className="py-20 lg:py-28 bg-offwhite">
    <div className="container mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="flex items-end justify-between mb-14">
          <div>
            <Badge className="mb-4 bg-teal-light text-primary border-primary/20">{badge}</Badge>
            <h2 className="text-3xl lg:text-4xl font-bold text-foreground">{titre}</h2>
          </div>
          <a href="/guides" className="hidden sm:inline-flex items-center gap-1 text-sm font-semibold text-primary hover:gap-2 transition-all">
            Voir toutes les ressources <ArrowRight className="w-4 h-4" />
          </a>
        </div>
      </ScrollReveal>

      <ScrollReveal stagger>
        <div className="grid md:grid-cols-3 gap-6 lg:gap-8">
          {shown.map((a) => (
            <a key={a.title} href={a.href ?? '#'} className="group bg-card rounded-xl overflow-hidden shadow-[0_1px_3px_rgba(0,0,0,0.08)] hover:shadow-lg transition-all hover:-translate-y-1">
              <div className="aspect-[16/10] overflow-hidden">
                <img src={a.image} alt={a.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy" />
              </div>
              <div className="p-6">
                <span className="text-xs font-semibold uppercase tracking-wider text-primary">{a.category}</span>
                <h3 className="text-lg font-bold text-foreground mt-2 group-hover:text-primary transition-colors">{a.title}</h3>
              </div>
            </a>
          ))}
        </div>
      </ScrollReveal>

      <div className="sm:hidden mt-8 text-center">
        <a href="/guides" className="inline-flex items-center gap-1 text-sm font-semibold text-primary">
          Voir toutes les ressources <ArrowRight className="w-4 h-4" />
        </a>
      </div>
    </div>
  </section>
  );
};

export default BlogPreview;