"use client"

import { Navbar } from "@/components/navbar"
import { Footer } from "@/components/footer"
import { Search, Calendar, Clock, ArrowRight, TrendingUp, Code, Briefcase, Users, Target, Lightbulb } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { useState } from "react"
import { useTranslation } from "@/lib/i18n"

interface BlogPost {
  id: string
  slug: string
  title: string
  excerpt: string
  category: string
  date: string
  readTime: string
  image: string
  author: {
    name: string
    avatar: string
  }
  featured?: boolean
}

export default function BlogPage() {
  const { t } = useTranslation()
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("Todas")

  const categories = [
    "Todas",
    "Carreira",
    "Tecnologia",
    "Entrevistas",
    "Dicas",
    "Mercado de Trabalho",
    "Desenvolvimento"
  ]

  const blogPosts: BlogPost[] = [
    {
      id: "1",
      slug: "como-se-destacar-entrevistas-ti",
      title: "Como se destacar em entrevistas de emprego na área de TI",
      excerpt: "Dicas essenciais para profissionais de tecnologia que querem impressionar recrutadores e conquistar a vaga dos sonhos.",
      category: "Entrevistas",
      date: "15 de Janeiro, 2026",
      readTime: "8 min",
      image: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=800&q=80",
      author: {
        name: "Carolina Santos",
        avatar: "/logohorse.png"
      },
      featured: true
    },
    {
      id: "2",
      slug: "linguagens-programacao-2026",
      title: "As 10 linguagens de programação mais procuradas em 2026",
      excerpt: "Descubra quais são as tecnologias mais valorizadas pelo mercado e como se preparar para as oportunidades futuras.",
      category: "Tecnologia",
      date: "12 de Janeiro, 2026",
      readTime: "10 min",
      image: "https://images.unsplash.com/photo-1542831371-29b0f74f9713?w=800&q=80",
      author: {
        name: "Roberto Silva",
        avatar: "/logohorse.png"
      },
      featured: true
    },
    {
      id: "3",
      slug: "salarios-desenvolvedores-brasil",
      title: "Guia completo de salários para desenvolvedores no Brasil",
      excerpt: "Análise detalhada sobre faixas salariais, benefícios e tendências do mercado de tecnologia brasileiro.",
      category: "Mercado de Trabalho",
      date: "10 de Janeiro, 2026",
      readTime: "12 min",
      image: "https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?w=800&q=80",
      author: {
        name: "Mariana Costa",
        avatar: "/logohorse.png"
      },
      featured: true
    },
    {
      id: "4",
      slug: "transicao-carreira-tech",
      title: "Transição de carreira para TI: Por onde começar?",
      excerpt: "Um guia prático para profissionais que desejam migrar para a área de tecnologia, com dicas de cursos e certificações.",
      category: "Carreira",
      date: "8 de Janeiro, 2026",
      readTime: "7 min",
      image: "https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&q=80",
      author: {
        name: "Lucas Oliveira",
        avatar: "/logohorse.png"
      }
    },
    {
      id: "5",
      slug: "trabalho-remoto-produtividade",
      title: "Como manter a produtividade trabalhando remotamente",
      excerpt: "Estratégias comprovadas para equilibrar vida profissional e pessoal no modelo home office.",
      category: "Dicas",
      date: "5 de Janeiro, 2026",
      readTime: "6 min",
      image: "https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800&q=80",
      author: {
        name: "Ana Paula Mendes",
        avatar: "/logohorse.png"
      }
    },
    {
      id: "6",
      slug: "soft-skills-desenvolvedor",
      title: "Soft skills essenciais para desenvolvedores de sucesso",
      excerpt: "Além do código: as habilidades comportamentais que fazem a diferença na carreira tech.",
      category: "Desenvolvimento",
      date: "2 de Janeiro, 2026",
      readTime: "9 min",
      image: "https://images.unsplash.com/photo-1531482615713-2afd69097998?w=800&q=80",
      author: {
        name: "Felipe Rodrigues",
        avatar: "/logohorse.png"
      }
    },
    {
      id: "7",
      slug: "portfolio-desenvolvedor-destaque",
      title: "Como criar um portfólio que impressiona recrutadores",
      excerpt: "Aprenda a estruturar seus projetos de forma profissional e aumentar suas chances de contratação.",
      category: "Carreira",
      date: "28 de Dezembro, 2025",
      readTime: "11 min",
      image: "https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?w=800&q=80",
      author: {
        name: "Juliana Ferreira",
        avatar: "/logohorse.png"
      }
    },
    {
      id: "8",
      slug: "inteligencia-artificial-empregos",
      title: "IA e o futuro dos empregos em tecnologia",
      excerpt: "Como a inteligência artificial está transformando o mercado de trabalho e criando novas oportunidades.",
      category: "Tecnologia",
      date: "25 de Dezembro, 2025",
      readTime: "8 min",
      image: "https://images.unsplash.com/photo-1677442136019-21780ecad995?w=800&q=80",
      author: {
        name: "Pedro Almeida",
        avatar: "/logohorse.png"
      }
    },
    {
      id: "9",
      slug: "negociar-salario-tech",
      title: "Guia definitivo para negociar salário na área de TI",
      excerpt: "Técnicas e estratégias para conseguir a melhor proposta salarial possível em sua próxima oportunidade.",
      category: "Carreira",
      date: "22 de Dezembro, 2025",
      readTime: "10 min",
      image: "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=800&q=80",
      author: {
        name: "Rodrigo Martins",
        avatar: "/logohorse.png"
      }
    }
  ]

  const filteredPosts = blogPosts.filter(post => {
    const matchesSearch = post.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      post.excerpt.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesCategory = selectedCategory === "Todas" || post.category === selectedCategory

    return matchesSearch && matchesCategory
  })

  const featuredPosts = blogPosts.filter(p => p.featured)
  const regularPosts = filteredPosts.filter(p => !p.featured)

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

      <main className="flex-1">
        {/* Hero Section */}
        <section className="relative py-24 md:py-36 overflow-hidden">
          {/* Imagem de fundo Blog.jpg */}
          <div className="absolute inset-0 z-0">
            <img
              src="/Blog.jpg"
              alt="Blog"
              className="object-cover w-full h-full"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
              draggable={false}
            />
          </div>
          {/* Overlay preto com opacidade 20% */}
          <div className="absolute inset-0 z-10 bg-black opacity-20"></div>
          <div className="absolute inset-0 opacity-10 z-20">
            <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_30%_50%,rgba(255,255,255,0.2)_0%,transparent_50%)]"></div>
          </div>

          <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-30">
            <div className="max-w-4xl mx-auto text-center text-white">
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 drop-shadow-[0_2px_8px_rgba(0,0,0,0.9)]">
                {t('blog.title')}
              </h1>
              <p className="text-xl md:text-2xl mb-8 opacity-95 drop-shadow-[0_2px_8px_rgba(0,0,0,0.9)]">
                {t('blog.subtitle')}
              </p>

              {/* Search Bar */}
              <div className="max-w-2xl mx-auto bg-white/80 rounded-full p-2 shadow-lg">
                <div className="relative">
                  <Search className="absolute left-6 top-1/2 transform -translate-y-1/2 text-gray-700 w-5 h-5" />
                  <input
                    type="text"
                    placeholder={t('blog.searchPlaceholder')}
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="w-full pl-14 pr-4 py-3 rounded-full text-gray-900 focus:outline-none focus:ring-2 focus:ring-[#F0932B] text-lg bg-white/0"
                  />
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Categories Filter */}
        <section className="bg-white py-6 border-b border-gray-200 sticky top-16 z-20 shadow-sm">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex items-center gap-3 overflow-x-auto pb-2 scrollbar-hide">
              {categories.map(category => (
                <button
                  key={category}
                  onClick={() => setSelectedCategory(category)}
                  className={`px-5 py-2 rounded-full font-medium whitespace-nowrap transition-all ${selectedCategory === category
                      ? 'bg-[#F0932B] text-white shadow-md'
                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                    }`}
                >
                  {category}
                </button>
              ))}
            </div>
          </div>
        </section>

        {/* Featured Posts */}
        {selectedCategory === "Todas" && (
          <section className="py-12 bg-gradient-to-b from-orange-50 to-white">
            <div className="container mx-auto px-4 sm:px-6 lg:px-8">
              <div className="flex items-center gap-3 mb-8">
                <TrendingUp className="w-7 h-7 text-[#F0932B]" />
                <h2 className="text-3xl font-bold text-gray-900">Artigos em Destaque</h2>
              </div>

              <div className="grid md:grid-cols-3 gap-8">
                {featuredPosts.map((post) => (
                  <Link
                    key={post.id}
                    href={`/blog/${post.slug}`}
                    className="group bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 border-2 border-[#F0932B]/20"
                  >
                    <div className="relative h-56 overflow-hidden">
                      <Image
                        src={post.image}
                        alt={post.title}
                        fill
                        className="object-cover group-hover:scale-110 transition-transform duration-300"
                      />
                      <div className="absolute top-4 left-4">
                        <span className="bg-[#F0932B] text-white px-3 py-1 rounded-full text-xs font-semibold">
                          Destaque
                        </span>
                      </div>
                    </div>
                    <div className="p-6">
                      <div className="flex items-center gap-2 mb-3">
                        <span className="bg-[#F0932B]/10 text-[#F0932B] px-3 py-1 rounded-full text-xs font-semibold">
                          {post.category}
                        </span>
                      </div>
                      <h3 className="text-xl font-bold text-gray-900 mb-3 group-hover:text-[#F0932B] transition-colors line-clamp-2">
                        {post.title}
                      </h3>
                      <p className="text-gray-600 mb-4 line-clamp-2">
                        {post.excerpt}
                      </p>
                      <div className="flex items-center justify-between pt-4 border-t border-gray-100">
                        <div className="flex items-center gap-3 text-sm text-gray-500">
                          <div className="flex items-center gap-1">
                            <Calendar className="w-4 h-4" />
                            <span>{post.date}</span>
                          </div>
                          <div className="flex items-center gap-1">
                            <Clock className="w-4 h-4" />
                            <span>{post.readTime}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </Link>
                ))}
              </div>
            </div>
          </section>
        )}

        {/* All Posts */}
        <section className="py-16 bg-white">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex items-center justify-between mb-8">
              <h2 className="text-3xl font-bold text-gray-900">
                {selectedCategory === "Todas" ? "Todos os Artigos" : `Categoria: ${selectedCategory}`}
              </h2>
              <p className="text-gray-600">
                <span className="font-semibold text-[#F0932B]">{filteredPosts.length}</span> artigos encontrados
              </p>
            </div>

            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
              {(selectedCategory === "Todas" ? regularPosts : filteredPosts).map((post) => (
                <Link
                  key={post.id}
                  href={`/blog/${post.slug}`}
                  className="group bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 border border-gray-200 hover:border-[#F0932B]"
                >
                  <div className="relative h-48 overflow-hidden">
                    <Image
                      src={post.image}
                      alt={post.title}
                      fill
                      className="object-cover group-hover:scale-105 transition-transform duration-300"
                    />
                  </div>
                  <div className="p-6">
                    <div className="flex items-center gap-2 mb-3">
                      <span className="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-xs font-semibold">
                        {post.category}
                      </span>
                    </div>
                    <h3 className="text-lg font-bold text-gray-900 mb-2 group-hover:text-[#F0932B] transition-colors line-clamp-2">
                      {post.title}
                    </h3>
                    <p className="text-gray-600 text-sm mb-4 line-clamp-3">
                      {post.excerpt}
                    </p>
                    <div className="flex items-center justify-between pt-4 border-t border-gray-100">
                      <div className="flex items-center gap-2 text-xs text-gray-500">
                        <Clock className="w-3 h-3" />
                        <span>{post.readTime}</span>
                      </div>
                      <div className="flex items-center gap-1 text-[#F0932B] font-semibold text-sm">
                        <span>Ler mais</span>
                        <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                      </div>
                    </div>
                  </div>
                </Link>
              ))}
            </div>

            {filteredPosts.length === 0 && (
              <div className="text-center py-16">
                <Search className="w-16 h-16 text-gray-300 mx-auto mb-4" />
                <h3 className="text-xl font-semibold text-gray-900 mb-2">Nenhum artigo encontrado</h3>
                <p className="text-gray-600">Tente ajustar sua busca ou filtros</p>
              </div>
            )}
          </div>
        </section>

        {/* Newsletter CTA */}
        <section className="bg-gradient-to-br from-[#F0932B] to-[#d97d1a] py-16">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="max-w-3xl mx-auto text-center text-white">
              <Lightbulb className="w-16 h-16 mx-auto mb-6" />
              <h2 className="text-3xl md:text-4xl font-bold mb-4">
                Fique por dentro das novidades
              </h2>
              <p className="text-lg mb-8 opacity-95">
                Receba insights exclusivos sobre carreira, tecnologia e mercado de trabalho diretamente no seu e-mail
              </p>
              <div className="flex flex-col sm:flex-row gap-3 max-w-xl mx-auto">
                <input
                  type="email"
                  placeholder="Seu melhor e-mail"
                  className="flex-1 px-6 py-4 rounded-full bg-white text-gray-900 placeholder:text-gray-400 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-colors whitespace-nowrap">
                  Assinar Newsletter
                </button>
              </div>
              <p className="text-sm mt-4 opacity-75">
                Sem spam. Cancele a qualquer momento.
              </p>
            </div>
          </div>
        </section>
      </main>

      <Footer />
    </div>
  )
}