"use client"

import { useState } from "react"
import { Navbar } from "@/components/navbar"
import { Footer } from "@/components/footer"
import { Calendar, Clock, User, Share2, Facebook, Twitter, Linkedin, Link as LinkIcon, ArrowLeft, Tag } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { useParams } from "next/navigation"

export const runtime = 'edge';

export default function BlogPostPage() {
  const params = useParams()
  const [copied, setCopied] = useState(false)

  const copyLink = () => {
    navigator.clipboard.writeText(window.location.href)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  // Mapeamento de posts com suas respectivas imagens
  const postsData: Record<string, any> = {
    "como-se-destacar-entrevistas-ti": {
      title: "Como se destacar em entrevistas de emprego na área de TI",
      author: "Carolina Santos",
      date: "15 Jan 2026",
      readTime: "8 min",
      category: "Entrevistas",
      image: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=1200&q=80",
      tags: ["Entrevistas", "Tecnologia", "Carreira", "Dicas"]
    },
    "linguagens-programacao-2026": {
      title: "As 10 linguagens de programação mais procuradas em 2026",
      author: "Roberto Silva",
      date: "12 Jan 2026",
      readTime: "10 min",
      category: "Tecnologia",
      image: "https://images.unsplash.com/photo-1542831371-29b0f74f9713?w=1200&q=80",
      tags: ["Programação", "Tecnologia", "Mercado", "Linguagens"]
    },
    "salarios-desenvolvedores-brasil": {
      title: "Guia completo de salários para desenvolvedores no Brasil",
      author: "Mariana Costa",
      date: "10 Jan 2026",
      readTime: "12 min",
      category: "Mercado de Trabalho",
      image: "https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?w=1200&q=80",
      tags: ["Salários", "Desenvolvedores", "Brasil", "Carreira"]
    },
    "transicao-carreira-tech": {
      title: "Transição de carreira para TI: Por onde começar?",
      author: "Lucas Oliveira",
      date: "8 Jan 2026",
      readTime: "7 min",
      category: "Carreira",
      image: "https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1200&q=80",
      tags: ["Transição", "Carreira", "TI", "Iniciantes"]
    },
    "trabalho-remoto-produtividade": {
      title: "Como manter a produtividade trabalhando remotamente",
      author: "Ana Paula Mendes",
      date: "5 Jan 2026",
      readTime: "6 min",
      category: "Dicas",
      image: "https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=1200&q=80",
      tags: ["Home Office", "Produtividade", "Trabalho Remoto", "Dicas"]
    },
    "soft-skills-desenvolvedor": {
      title: "Soft skills essenciais para desenvolvedores de sucesso",
      author: "Felipe Rodrigues",
      date: "2 Jan 2026",
      readTime: "9 min",
      category: "Desenvolvimento",
      image: "https://images.unsplash.com/photo-1531482615713-2afd69097998?w=1200&q=80",
      tags: ["Soft Skills", "Desenvolvimento", "Carreira", "Competências"]
    },
    "portfolio-desenvolvedor-destaque": {
      title: "Como criar um portfólio que impressiona recrutadores",
      author: "Juliana Ferreira",
      date: "28 Dez 2025",
      readTime: "11 min",
      category: "Carreira",
      image: "https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?w=1200&q=80",
      tags: ["Portfólio", "GitHub", "Projetos", "Carreira"]
    },
    "inteligencia-artificial-empregos": {
      title: "IA e o futuro dos empregos em tecnologia",
      author: "Pedro Almeida",
      date: "25 Dez 2025",
      readTime: "8 min",
      category: "Tecnologia",
      image: "https://images.unsplash.com/photo-1677442136019-21780ecad995?w=1200&q=80",
      tags: ["IA", "Inteligência Artificial", "Futuro", "Tecnologia"]
    },
    "negociar-salario-tech": {
      title: "Guia definitivo para negociar salário na área de TI",
      author: "Rodrigo Martins",
      date: "22 Dez 2025",
      readTime: "10 min",
      category: "Carreira",
      image: "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=1200&q=80",
      tags: ["Salário", "Negociação", "Carreira", "TI"]
    }
  }

  const slug = params.slug as string
  const postInfo = postsData[slug] || postsData["como-se-destacar-entrevistas-ti"]

  // Post de exemplo baseado em conteúdo real de sites de emprego
  const post = {
    ...postInfo,
    content: `
      <p class="text-lg font-semibold text-gray-900 mb-6">
        O mercado de tecnologia está cada vez mais competitivo. Saber se destacar em uma entrevista pode ser o diferencial entre conseguir a vaga dos sonhos ou ficar para trás.
      </p>

      <p class="mb-4">
        Em 2026, a maioria dos conflitos entre freelancers e clientes não são sobre a qualidade técnica do trabalho, mas sim sobre comunicação. Mal-entendidos, mudanças de escopo e expectativas pouco claras continuam sendo as principais causas de projetos frustrados.
      </p>

      <p class="mb-6">
        Aprender a melhorar a comunicação com o cliente como freelancer em 2026 não só reduz o atrito, como também permite trabalhar com mais clareza, cobrar preços melhores e construir relacionamentos de longo prazo dentro do ecossistema freelancer.
      </p>

      <h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">1. Prepare-se profundamente sobre a empresa</h2>
      
      <p class="mb-4">
        Antes de qualquer entrevista, dedique tempo para pesquisar a fundo sobre a empresa. Visite o site oficial, leia sobre a cultura organizacional, entenda os produtos e serviços oferecidos e acompanhe as notícias recentes.
      </p>

      <p class="mb-4">
        Demonstrar conhecimento sobre a empresa não apenas impressiona os entrevistadores, mas também mostra seu genuíno interesse pela vaga e pela organização.
      </p>

      <div class="bg-orange-50 border-l-4 border-[#f0932b] p-6 my-8">
        <p class="text-gray-800 italic">
          💡 <strong>Dica profissional:</strong> Prepare perguntas inteligentes sobre a empresa. Isso demonstra proatividade e interesse real pela posição.
        </p>
      </div>

      <h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">2. Domine as competências técnicas exigidas</h2>

      <p class="mb-4">
        Na área de TI, as habilidades técnicas são fundamentais. Certifique-se de que você domina as tecnologias e ferramentas mencionadas na descrição da vaga.
      </p>

      <ul class="list-disc pl-6 mb-6 space-y-2">
        <li>Revise conceitos fundamentais da sua área de atuação</li>
        <li>Pratique exercícios de código e desafios técnicos</li>
        <li>Prepare-se para demonstrar projetos anteriores</li>
        <li>Esteja atualizado sobre as últimas tendências tecnológicas</li>
      </ul>

      <h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">3. Desenvolva suas soft skills</h2>

      <p class="mb-4">
        Além das habilidades técnicas, as empresas valorizam cada vez mais as soft skills. Capacidades como comunicação, trabalho em equipe, resolução de problemas e adaptabilidade são essenciais.
      </p>

      <p class="mb-4">
        Durante a entrevista, busque exemplos concretos de situações onde você demonstrou essas competências. Use a técnica STAR (Situação, Tarefa, Ação, Resultado) para estruturar suas respostas.
      </p>

      <h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">4. Cuide da sua apresentação pessoal</h2>

      <p class="mb-4">
        A primeira impressão conta muito. Vista-se de forma apropriada para a cultura da empresa - mesmo em entrevistas remotas, apresente-se de forma profissional.
      </p>

      <p class="mb-4">
        Em entrevistas presenciais, chegue com 10-15 minutos de antecedência. Em entrevistas online, teste sua conexão, câmera e microfone antecipadamente.
      </p>

      <h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">5. Prepare respostas para perguntas comuns</h2>

      <p class="mb-4">
        Algumas perguntas são frequentes em entrevistas de TI. Prepare respostas autênticas e bem estruturadas para questões como:
      </p>

      <ul class="list-disc pl-6 mb-6 space-y-2">
        <li>"Conte-me sobre você e sua trajetória profissional"</li>
        <li>"Quais são seus pontos fortes e fracos?"</li>
        <li>"Por que você quer trabalhar nesta empresa?"</li>
        <li>"Onde você se vê daqui a 5 anos?"</li>
        <li>"Descreva um desafio técnico que você superou"</li>
      </ul>

      <div class="bg-gray-100 p-6 rounded-lg my-8">
        <h3 class="text-xl font-bold text-gray-900 mb-3">Checklist para entrevistas de TI:</h3>
        <ul class="space-y-2">
          <li class="flex items-start gap-2">
            <span class="text-[#f0932b] mt-1">✓</span>
            <span>Pesquisar a empresa e entender sua cultura</span>
          </li>
          <li class="flex items-start gap-2">
            <span class="text-[#f0932b] mt-1">✓</span>
            <span>Revisar tecnologias mencionadas na vaga</span>
          </li>
          <li class="flex items-start gap-2">
            <span class="text-[#f0932b] mt-1">✓</span>
            <span>Preparar portfólio de projetos</span>
          </li>
          <li class="flex items-start gap-2">
            <span class="text-[#f0932b] mt-1">✓</span>
            <span>Praticar perguntas comportamentais</span>
          </li>
          <li class="flex items-start gap-2">
            <span class="text-[#f0932b] mt-1">✓</span>
            <span>Testar equipamento (para entrevistas remotas)</span>
          </li>
        </ul>
      </div>

      <h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">6. Demonstre entusiasmo e motivação</h2>

      <p class="mb-4">
        Mostre que você está genuinamente interessado na oportunidade. Fale com energia sobre seus projetos, demonstre curiosidade sobre o trabalho e mantenha uma postura positiva durante toda a entrevista.
      </p>

      <p class="mb-4">
        O entusiasmo é contagiante e pode fazer toda a diferença na decisão final dos recrutadores.
      </p>

      <h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">7. Faça um follow-up após a entrevista</h2>

      <p class="mb-4">
        Dentro de 24 horas após a entrevista, envie um e-mail de agradecimento. Reitere seu interesse pela vaga e destaque brevemente por que você seria um bom fit para a posição.
      </p>

      <p class="mb-6">
        Esse pequeno gesto demonstra profissionalismo e pode deixar uma última impressão positiva nos recrutadores.
      </p>

      <h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">Conclusão</h2>

      <p class="mb-4">
        Se destacar em entrevistas de emprego na área de TI requer preparação, conhecimento técnico e desenvolvimento de habilidades interpessoais. Ao seguir essas dicas e investir tempo em sua preparação, você aumentará significativamente suas chances de sucesso.
      </p>

      <p class="mb-4">
        Lembre-se: cada entrevista é uma oportunidade de aprendizado. Mesmo que não consiga a vaga, reflita sobre a experiência e identifique pontos de melhoria para as próximas oportunidades.
      </p>

      <p class="font-semibold text-gray-900">
        Boa sorte em suas entrevistas! 🚀
      </p>
    `
  }

  const relatedPosts = [
    {
      id: 1,
      title: "10 tendências de recrutamento para 2026",
      category: "Recrutamento",
      image: "/1.png",
      slug: "tendencias-recrutamento-2026"
    },
    {
      id: 2,
      title: "Soft skills mais valorizadas pelas empresas",
      category: "Desenvolvimento",
      image: "/4.png",
      slug: "soft-skills-2026"
    },
    {
      id: 3,
      title: "Como negociar salário: estratégias que funcionam",
      category: "Carreira",
      image: "/6.png",
      slug: "negociar-salario"
    }
  ]

  return (
    <div className="min-h-screen flex flex-col bg-white">
      <Navbar />

      <main className="flex-1">
        {/* Breadcrumb */}
        <div className="bg-gray-50 border-b border-gray-200">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-4">
            <div className="flex items-center gap-2 text-sm">
              <Link href="/" className="text-gray-600 hover:text-[#f0932b]">Início</Link>
              <span className="text-gray-400">/</span>
              <Link href="/blog" className="text-gray-600 hover:text-[#f0932b]">Blog</Link>
              <span className="text-gray-400">/</span>
              <span className="text-gray-900 font-medium">{post.category}</span>
            </div>
          </div>
        </div>

        {/* Article Header */}
        <article className="py-12">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="max-w-4xl mx-auto">
              {/* Back Button */}
              <Link 
                href="/blog"
                className="inline-flex items-center gap-2 text-[#f0932b] hover:underline mb-8"
              >
                <ArrowLeft className="w-4 h-4" />
                Voltar para o blog
              </Link>

              {/* Category Badge */}
              <div className="mb-4">
                <span className="inline-block bg-[#f0932b] text-white px-4 py-1 rounded-full text-sm font-semibold">
                  {post.category}
                </span>
              </div>

              {/* Title */}
              <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6 leading-tight">
                {post.title}
              </h1>

              {/* Meta Info */}
              <div className="flex flex-wrap items-center gap-6 text-gray-600 mb-8 pb-8 border-b border-gray-200">
                <div className="flex items-center gap-2">
                  <User className="w-5 h-5" />
                  <span>{post.author}</span>
                </div>
                <div className="flex items-center gap-2">
                  <Calendar className="w-5 h-5" />
                  <span>{post.date}</span>
                </div>
                <div className="flex items-center gap-2">
                  <Clock className="w-5 h-5" />
                  <span>{post.readTime} de leitura</span>
                </div>
              </div>

              {/* Featured Image */}
              <div className="relative h-96 rounded-2xl overflow-hidden mb-12 bg-[#f0932b]">
                <Image
                  src={post.image}
                  alt={post.title}
                  fill
                  className="object-cover"
                  priority
                />
              </div>

              {/* Share Buttons */}
              <div className="flex items-center gap-4 mb-12 pb-8 border-b border-gray-200">
                <span className="text-gray-600 font-semibold">Compartilhar:</span>
                <div className="flex gap-2">
                  <button className="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700 transition-colors">
                    <Facebook className="w-5 h-5" />
                  </button>
                  <button className="w-10 h-10 rounded-full bg-sky-500 text-white flex items-center justify-center hover:bg-sky-600 transition-colors">
                    <Twitter className="w-5 h-5" />
                  </button>
                  <button className="w-10 h-10 rounded-full bg-blue-700 text-white flex items-center justify-center hover:bg-blue-800 transition-colors">
                    <Linkedin className="w-5 h-5" />
                  </button>
                  <button 
                    onClick={copyLink}
                    className="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 transition-colors relative"
                  >
                    <LinkIcon className="w-5 h-5" />
                    {copied && (
                      <span className="absolute -top-10 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap">
                        Link copiado!
                      </span>
                    )}
                  </button>
                </div>
              </div>

              {/* Article Content */}
              <div 
                className="prose prose-lg max-w-none prose-headings:text-gray-900 prose-p:text-gray-700 prose-a:text-[#f0932b] prose-strong:text-gray-900"
                dangerouslySetInnerHTML={{ __html: post.content }}
              />

              {/* Tags */}
              <div className="mt-12 pt-8 border-t border-gray-200">
                <div className="flex flex-wrap items-center gap-3">
                  <Tag className="w-5 h-5 text-gray-600" />
                  {post.tags.map((tag: string, index: number) => (
                    <span 
                      key={index}
                      className="inline-block bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm cursor-pointer transition-colors"
                    >
                      {tag}
                    </span>
                  ))}
                </div>
              </div>

              {/* Author Bio */}
              <div className="mt-12 p-8 bg-gray-50 rounded-2xl">
                <div className="flex items-start gap-4">
                  <div className="w-20 h-20 rounded-full bg-[#f0932b] flex items-center justify-center text-white text-2xl font-bold flex-shrink-0">
                    {post.author.charAt(0)}
                  </div>
                  <div>
                    <h3 className="text-xl font-bold text-gray-900 mb-2">{post.author}</h3>
                    <p className="text-gray-600">
                      Especialista em carreira e recrutamento com mais de 10 anos de experiência ajudando profissionais a alcançarem seus objetivos no mercado de tecnologia.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </article>

        {/* Related Posts */}
        <section className="py-16 bg-gray-50">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="max-w-6xl mx-auto">
              <h2 className="text-3xl font-bold text-gray-900 mb-8">Artigos Relacionados</h2>
              
              <div className="grid md:grid-cols-3 gap-8">
                {relatedPosts.map((relatedPost) => (
                  <Link 
                    key={relatedPost.id}
                    href={`/blog/${relatedPost.slug}`}
                    className="group bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300"
                  >
                    <div className="relative h-48 overflow-hidden bg-[#f0932b]">
                      <Image
                        src={relatedPost.image}
                        alt={relatedPost.title}
                        fill
                        className="object-cover group-hover:scale-110 transition-transform duration-300"
                      />
                      <div className="absolute top-4 left-4">
                        <span className="bg-white text-[#f0932b] px-3 py-1 rounded-full text-xs font-bold">
                          {relatedPost.category}
                        </span>
                      </div>
                    </div>
                    <div className="p-6">
                      <h3 className="text-xl font-bold text-gray-900 group-hover:text-[#f0932b] transition-colors line-clamp-2">
                        {relatedPost.title}
                      </h3>
                    </div>
                  </Link>
                ))}
              </div>
            </div>
          </div>
        </section>

        {/* Newsletter CTA */}
        <section className="bg-[#f0932b] py-16">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="max-w-4xl mx-auto text-center text-white">
              <h2 className="text-3xl md:text-4xl font-bold mb-4">
                Gostou deste conteúdo?
              </h2>
              <p className="text-lg mb-8 opacity-95">
                Receba mais artigos como este direto no seu e-mail
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center max-w-xl mx-auto">
                <input
                  type="email"
                  placeholder="Seu melhor e-mail"
                  className="flex-1 px-6 py-4 rounded-full text-gray-900 focus:outline-none focus:ring-2 focus:ring-white"
                />
                <button className="bg-white text-[#f0932b] hover:bg-gray-100 font-bold px-8 py-4 rounded-full transition-all shadow-lg">
                  Assinar Newsletter
                </button>
              </div>
            </div>
          </div>
        </section>
      </main>

      <Footer />
    </div>
  )
}