import { Link } from "react-router-dom";
import { ArrowRight } from "lucide-react";
import { Helmet } from "react-helmet-async";
import { Article } from "../data/articles";
import { motion } from "motion/react";

export function InsightsPage({ marketInsights }: { marketInsights: Article[] }) {
  return (
    <>
      <Helmet>
        <title>Insights & Blog | Rafael Fontes</title>
        <meta name="description" content="Artigos e análises de mercado sobre o mercado imobiliário premium de São Paulo. Dicas de negócios e inteligência analítica." />
      </Helmet>
      <div className="pt-32 pb-24 bg-zinc-50 min-h-screen">
      <div className="max-w-7xl mx-auto px-6 lg:px-8">
        <div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
          <div>
            <span className="text-xs uppercase tracking-[0.2em] text-zinc-400 font-bold block mb-4">
              Blog Pessoal
            </span>
            <h1 className="text-4xl font-serif text-zinc-900 leading-tight">
              Artigos & Análises de Mercado
            </h1>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
          {marketInsights.map((post, index) => (
            <motion.div
                key={post.id}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: 0.1 * index }}
            >
                <Link
                to={`/artigo/${post.id}`}
                className="group block"
                >
                <div className="mb-4">
                    <span className="text-xs text-zinc-400 uppercase tracking-widest">
                    {post.date}
                    </span>
                </div>
                <h3 className="text-xl font-serif text-zinc-900 mb-4 group-hover:text-brand-gold transition-colors">
                    {post.title}
                </h3>
                <p className="text-zinc-600 font-light text-sm leading-relaxed mb-6">
                    {post.excerpt}
                </p>
                <span className="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-brand-gold">
                    Ler artigo completo{" "}
                    <ArrowRight
                    size={14}
                    className="group-hover:translate-x-1 transition-transform"
                    />
                </span>
                </Link>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
    </>
  );
}