import { useParams, Link } from 'react-router-dom';
import { ArrowLeft, Clock } from 'lucide-react';
import { posts } from '../data/posts';
import { useEffect } from 'react';

export function BlogPost() {
  const { id } = useParams();
  const post = posts.find(p => p.id === id);

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [id]);

  if (!post) {
    return (
      <div className="pt-40 pb-24 px-6 text-center text-4xl font-serif">Artigo não encontrado.</div>
    );
  }

  return (
    <article className="pt-32 pb-24">
      {/* Header */}
      <header className="px-6 max-w-4xl mx-auto flex flex-col items-center text-center gap-6 mb-12">
        <Link to="/blog" className="inline-flex items-center gap-2 text-stone-400 hover:text-primary-800 transition-colors text-sm font-medium uppercase tracking-widest self-start mb-4">
          <ArrowLeft size={16} /> Voltar para o Blog
        </Link>
        <span className="text-primary-600 font-medium tracking-widest uppercase text-sm border border-primary-200 bg-primary-50 px-4 py-1.5 rounded-full">{post.category}</span>
        <h1 className="text-4xl md:text-6xl font-serif text-stone-900 leading-tight">
          {post.title}
        </h1>
        <div className="flex items-center gap-4 text-stone-500 text-sm font-mono mt-4">
          <span>{post.date}</span>
          <span className="w-1 h-1 rounded-full bg-stone-300" />
          <span>Por {post.author}</span>
          <span className="w-1 h-1 rounded-full bg-stone-300" />
          <span className="flex items-center gap-1.5"><Clock size={14} /> {post.timeToRead}</span>
        </div>
      </header>

      {/* Hero Image */}
      <div className="px-6 max-w-6xl mx-auto mb-16">
        <div className="aspect-[21/9] rounded-[40px] overflow-hidden bg-stone-100">
          <img src={post.img} alt={post.title} className="w-full h-full object-cover" />
        </div>
      </div>

      {/* Content */}
      <div className="px-6 max-w-3xl mx-auto">
        <div dangerouslySetInnerHTML={{ __html: post.content }} />

        {/* Footer Author Bio */}
        <div className="mt-20 pt-10 border-t border-stone-200 flex flex-col sm:flex-row items-center sm:items-start gap-6 bg-sand-100 p-8 rounded-[32px]">
          <div className="w-20 h-20 rounded-full overflow-hidden shrink-0 bg-stone-200">
            <img src={`https://i.pravatar.cc/150?u=${post.author}`} alt={post.author} className="w-full h-full object-cover" />
          </div>
          <div className="flex flex-col text-center sm:text-left">
            <span className="text-xs uppercase tracking-widest text-primary-600 font-bold mb-1">Escrito por</span>
            <span className="font-serif text-2xl text-stone-900 mb-2">{post.author}</span>
            <p className="text-stone-600 font-light text-sm leading-relaxed">
              Especialista da clínica Health Premium, dedicada a integrar as mais recentes tecnologias globais em protocolos de excelência que valorizam a beleza natural e o bem-estar sistêmico.
            </p>
          </div>
        </div>
      </div>
    </article>
  );
}