import { Link } from "@tanstack/react-router";
import { ArrowRight } from "lucide-react";
import { posts } from "@/content/posts";
import { PostCard } from "@/components/blog/PostCard";

export function BlogTeaser() {
  const latest = [...posts]
    .sort((a, b) => (a.date < b.date ? 1 : -1))
    .slice(0, 4);

  return (
    <section className="px-6 py-24">
      <div className="mx-auto max-w-7xl">
        <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
          <div>
            <span className="text-xs font-bold uppercase tracking-widest text-accent">
              Do nosso blog
            </span>
            <h2 className="mt-3 text-4xl font-bold md:text-5xl">
              Conteúdo para <span className="text-gradient-neon">vender mais</span> pelo WhatsApp
            </h2>
            <p className="mt-4 max-w-2xl text-muted-foreground">
              Guias práticos sobre Atendentes de IA, CRM e Agendamento automático — feitos por quem atende mais de mil empresas.
            </p>
          </div>
          <Link
            to="/blog"
            className="inline-flex items-center gap-2 rounded-full border border-border bg-card/50 px-5 py-3 text-sm font-semibold hover:bg-card transition"
          >
            Ver todos os artigos <ArrowRight className="h-4 w-4" />
          </Link>
        </div>

        <div className="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
          {latest.map((p) => (
            <PostCard key={p.slug} post={p} />
          ))}
        </div>
      </div>
    </section>
  );
}