import { motion } from 'motion/react';
import { ArrowLeft, Clock, Calendar, ChevronRight, Cpu } from 'lucide-react';
import { Link, useParams } from 'react-router-dom';
import { articles } from '@/data/articles';
import SEO from '@/components/SEO';
import Markdown from 'react-markdown';

export default function BlogPost() {
  const { slug } = useParams();
  const article = articles.find(a => a.slug === slug) || articles[0];

  return (
    <div className="min-h-screen pt-32 pb-24 text-white bg-black">
      <SEO 
        title={`${article.title} | Agência Onyx`}
        description={article.excerpt}
        url={`https://agencia-onyx.com/blog/${article.slug}`}
        imageUrl={article.imageUrl}
        type="article"
      />

      <div className="fixed inset-0 pointer-events-none z-0">
        <div className="absolute inset-0 bg-grid-pattern opacity-30" />
      </div>
      
      <article className="container mx-auto px-6 max-w-4xl relative z-10">
        
        <Link 
          to="/blog"
          className="inline-flex items-center gap-2 text-[10px] font-mono uppercase tracking-widest text-gray-500 hover:text-white transition-colors mb-16"
        >
          <ArrowLeft className="w-4 h-4" />
          Voltar ao Blog
        </Link>

        {/* HEADER */}
        <header className="mb-16 border-b border-white/10 pb-16">
          <div className="flex flex-wrap items-center gap-4 text-[10px] font-bold uppercase tracking-widest font-mono text-gray-500 mb-8">
            <span className="text-white border border-white/20 bg-white/5 px-3 py-1">{article.category}</span>
            <span className="flex items-center gap-2 border border-white/10 px-3 py-1 bg-black"><Calendar className="w-3 h-3" /> {article.date}</span>
            <span className="flex items-center gap-2 border border-white/10 px-3 py-1 bg-black"><Clock className="w-3 h-3" /> {article.readTime}</span>
          </div>

          <motion.h1 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="text-4xl md:text-6xl font-display leading-[1.1] text-white mb-8 tracking-tighter"
          >
            {article.title}
          </motion.h1>

          <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ delay: 0.2 }}
             className="text-[10px] font-mono mt-8 text-gray-500 flex items-center gap-3 uppercase tracking-widest"
          >
             <div className="w-8 h-8 border border-white/10 bg-white/5 flex items-center justify-center text-white"><Cpu className="w-4 h-4"/></div>
             Escrito por: <span className="text-white font-bold">{article.author}</span>
          </motion.div>
        </header>

        {/* FEATURE IMAGE */}
        {article.imageUrl && (
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="w-full aspect-[21/9] bg-white/5 mb-20 overflow-hidden border border-white/10 relative grayscale"
          >
            <img 
              src={article.imageUrl} 
              alt={article.title} 
              className="absolute inset-0 w-full h-full object-cover opacity-60 mix-blend-luminosity"
            />
          </motion.div>
        )}

        {/* CONTENT */}
        <motion.div 
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          className="prose prose-lg prose-invert prose-headings:font-display prose-headings:font-medium prose-h1:text-4xl prose-h2:text-3xl prose-h3:text-2xl prose-h1:tracking-tight prose-h2:tracking-tight prose-a:text-white prose-a:underline prose-a:underline-offset-4 prose-p:text-gray-400 prose-p:leading-relaxed prose-p:font-sans prose-blockquote:border-l-2 prose-blockquote:border-white/20 prose-blockquote:bg-white/5 prose-blockquote:px-6 prose-blockquote:py-4 prose-blockquote:font-sans max-w-none"
        >
          <div className="text-xl text-gray-300 mb-12 leading-relaxed bg-white/5 p-8 border border-white/10 font-sans tracking-wide relative">
             <div className="absolute top-0 left-0 w-2 h-full bg-white/20" />
             <span className="block text-[10px] uppercase font-mono tracking-widest text-gray-500 mb-4">[RESUMO EXECUTIVO]</span>
             {article.excerpt}
          </div>
          
          <div className="markdown-body font-sans text-gray-400">
             <Markdown>{article.content}</Markdown>
          </div>
        </motion.div>
      </article>
    </div>
  );
}
