"use client"

import { useState } from "react"
import { Navbar } from "@/components/navbar"
import { Footer } from "@/components/footer"
import { Search, MapPin, Users, Briefcase, Star, TrendingUp, Building2, Globe, Heart, Filter } from "lucide-react"
import Image from "next/image"
import Link from "next/link"

interface Company {
  id: number
  name: string
  logo: string
  industry: string
  location: string
  employees: string
  openJobs: number
  description: string
  rating: number
  featured: boolean
  benefits: string[]
}

export default function CompaniesPage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedIndustry, setSelectedIndustry] = useState("Todas")
  const [selectedSize, setSelectedSize] = useState("Todos")

  const industries = [
    "Todas",
    "Tecnologia",
    "Fintech",
    "E-commerce",
    "Saúde",
    "Educação",
    "Consultoria",
    "Agronegócio"
  ]

  const companySizes = [
    "Todos",
    "1-10 funcionários",
    "11-50 funcionários",
    "51-200 funcionários",
    "201-500 funcionários",
    "500+ funcionários"
  ]

  const companies: Company[] = [
    {
      id: 1,
      name: "TechCorp Brasil",
      logo: "/logohorse.png",
      industry: "Tecnologia",
      location: "São Paulo, SP",
      employees: "201-500 funcionários",
      openJobs: 15,
      description: "Líder em soluções de software e transformação digital, ajudando empresas a inovarem através da tecnologia.",
      rating: 4.8,
      featured: true,
      benefits: ["Home Office", "Vale Refeição", "Plano de Saúde", "Gympass"]
    },
    {
      id: 2,
      name: "FinanceHub",
      logo: "/logohorse.png",
      industry: "Fintech",
      location: "Rio de Janeiro, RJ",
      employees: "51-200 funcionários",
      openJobs: 8,
      description: "Revolucionando o mercado financeiro com soluções inovadoras de pagamentos e investimentos.",
      rating: 4.6,
      featured: true,
      benefits: ["PLR", "Stock Options", "Auxílio Educação", "Day Off Aniversário"]
    },
    {
      id: 3,
      name: "EduTech Solutions",
      logo: "/logohorse.png",
      industry: "Educação",
      location: "Belo Horizonte, MG",
      employees: "11-50 funcionários",
      openJobs: 6,
      description: "Plataforma de educação online que conecta alunos e professores através da tecnologia.",
      rating: 4.7,
      featured: false,
      benefits: ["Horário Flexível", "Cursos Gratuitos", "Home Office", "Vale Transporte"]
    },
    {
      id: 4,
      name: "HealthTech Plus",
      logo: "/logohorse.png",
      industry: "Saúde",
      location: "Porto Alegre, RS",
      employees: "201-500 funcionários",
      openJobs: 12,
      description: "Inovação em saúde digital, oferecendo telemedicina e gestão de prontuários eletrônicos.",
      rating: 4.9,
      featured: true,
      benefits: ["Plano Odontológico", "Seguro de Vida", "Assistência Psicológica", "Convênio Farmácia"]
    },
    {
      id: 5,
      name: "AgriSmart",
      logo: "/logohorse.png",
      industry: "Agronegócio",
      location: "Cuiabá, MT",
      employees: "51-200 funcionários",
      openJobs: 5,
      description: "Tecnologia aplicada ao agronegócio, otimizando processos e aumentando produtividade.",
      rating: 4.5,
      featured: false,
      benefits: ["Participação nos Lucros", "Carro da Empresa", "Notebook", "Seguro de Vida"]
    },
    {
      id: 6,
      name: "ShopNext",
      logo: "/logohorse.png",
      industry: "E-commerce",
      location: "São Paulo, SP",
      employees: "500+ funcionários",
      openJobs: 23,
      description: "Marketplace líder em vendas online com logística integrada e experiência omnichannel.",
      rating: 4.4,
      featured: false,
      benefits: ["Desconto em Produtos", "Vale Alimentação", "Plano de Carreira", "Previdência Privada"]
    },
    {
      id: 7,
      name: "ConsultPro",
      logo: "/logohorse.png",
      industry: "Consultoria",
      location: "Brasília, DF",
      employees: "11-50 funcionários",
      openJobs: 4,
      description: "Consultoria estratégica focada em transformação digital e otimização de processos.",
      rating: 4.6,
      featured: false,
      benefits: ["Bônus por Projeto", "Trabalho Remoto", "Equipamentos Top", "Capacitação"]
    },
    {
      id: 8,
      name: "DataLabs",
      logo: "/logohorse.png",
      industry: "Tecnologia",
      location: "Florianópolis, SC",
      employees: "51-200 funcionários",
      openJobs: 11,
      description: "Especialistas em Big Data e Inteligência Artificial, transformando dados em insights.",
      rating: 4.8,
      featured: true,
      benefits: ["Ambiente Descontraído", "Frutas e Snacks", "Games Room", "Pet Friendly"]
    }
  ]

  const filteredCompanies = companies.filter(company => {
    const matchesSearch = company.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
                         company.description.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesIndustry = selectedIndustry === "Todas" || company.industry === selectedIndustry
    const matchesSize = selectedSize === "Todos" || company.employees === selectedSize
    
    return matchesSearch && matchesIndustry && matchesSize
  })

  const featuredCompanies = companies.filter(c => c.featured)

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

      <main className="flex-1">
        {/* Hero Section */}
        <section className="relative py-20 md:py-28 overflow-hidden">
          {/* Imagem de fundo empresas.jpg sem overlay laranja */}
          <div className="absolute inset-0 z-0">
            <Image
              src="/empresas.jpg"
              alt="Empresas"
              fill
              className="object-cover object-center"
              quality={100}
              priority
            />
          </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-10">
            <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)]">
                Descubra as Melhores Empresas
              </h1>
              <p className="text-xl md:text-2xl mb-8 opacity-95 drop-shadow-[0_2px_8px_rgba(0,0,0,0.9)]">
                Conheça empresas incríveis que estão contratando agora
              </p>
              
              {/* Search Bar */}
              <div className="max-w-3xl mx-auto bg-white rounded-full p-2 shadow-lg">
                <div className="relative">
                  <Search className="absolute left-6 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
                  <input
                    type="text"
                    placeholder="Buscar empresas por nome ou setor..."
                    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"
                  />

                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Filters */}
        <section className="bg-white py-8 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 flex-wrap gap-4 items-center">
              <div className="flex items-center gap-2 text-gray-700">
                <Filter className="w-5 h-5" />
                <span className="font-semibold">Filtros:</span>
              </div>
              
              <select
                value={selectedIndustry}
                onChange={(e) => setSelectedIndustry(e.target.value)}
                className="px-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#F0932B] bg-white"
              >
                {industries.map(industry => (
                  <option key={industry} value={industry}>{industry}</option>
                ))}
              </select>

              <select
                value={selectedSize}
                onChange={(e) => setSelectedSize(e.target.value)}
                className="px-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#F0932B] bg-white"
              >
                {companySizes.map(size => (
                  <option key={size} value={size}>{size}</option>
                ))}
              </select>

              <div className="ml-auto text-sm text-gray-600">
                <span className="font-semibold text-[#F0932B]">{filteredCompanies.length}</span> empresas encontradas
              </div>
            </div>
          </div>
        </section>

        {/* Featured Companies */}
        {featuredCompanies.length > 0 && (
          <section className="py-16 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">
                <Star className="w-6 h-6 text-[#F0932B]" />
                <h2 className="text-3xl font-bold text-gray-900">Empresas em Destaque</h2>
              </div>

              <div className="grid md:grid-cols-2 gap-6">
                {featuredCompanies.map((company) => (
                  <div
                    key={company.id}
                    className="bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border-2 border-[#F0932B]/20"
                  >
                    <div className="flex items-start gap-4 mb-4">
                      <div className="w-16 h-16 rounded-xl bg-[#F0932B]/10 flex items-center justify-center flex-shrink-0">
                        <Building2 className="w-8 h-8 text-[#F0932B]" />
                      </div>
                      <div className="flex-1">
                        <div className="flex items-start justify-between mb-2">
                          <h3 className="text-xl font-bold text-gray-900">{company.name}</h3>
                          <div className="flex items-center gap-1 bg-yellow-100 px-2 py-1 rounded-full">
                            <Star className="w-4 h-4 text-yellow-600 fill-yellow-600" />
                            <span className="text-sm font-semibold text-yellow-700">{company.rating}</span>
                          </div>
                        </div>
                        <div className="flex items-center gap-4 text-sm text-gray-600 mb-2">
                          <span className="flex items-center gap-1">
                            <MapPin className="w-4 h-4" />
                            {company.location}
                          </span>
                          <span className="flex items-center gap-1">
                            <Users className="w-4 h-4" />
                            {company.employees}
                          </span>
                        </div>
                        <span className="inline-block bg-[#F0932B]/10 text-[#F0932B] px-3 py-1 rounded-full text-xs font-semibold">
                          {company.industry}
                        </span>
                      </div>
                    </div>

                    <p className="text-gray-700 mb-4 line-clamp-2">{company.description}</p>

                    <div className="flex flex-wrap gap-2 mb-4">
                      {company.benefits.slice(0, 3).map((benefit, index) => (
                        <span key={index} className="text-xs bg-gray-100 text-gray-700 px-3 py-1 rounded-full">
                          {benefit}
                        </span>
                      ))}
                    </div>

                    <div className="flex items-center justify-between pt-4 border-t border-gray-100">
                      <div className="flex items-center gap-2 text-[#F0932B] font-semibold">
                        <Briefcase className="w-5 h-5" />
                        <span>{company.openJobs} vagas abertas</span>
                      </div>
                      <Link
                        href={`/companies/${company.id}`}
                        className="text-[#F0932B] hover:underline font-semibold"
                      >
                        Ver perfil →
                      </Link>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </section>
        )}

        {/* All Companies Grid */}
        <section className="py-16 bg-white">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <h2 className="text-3xl font-bold text-gray-900 mb-8">Todas as Empresas</h2>

            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
              {filteredCompanies.map((company) => (
                <div
                  key={company.id}
                  className="bg-white rounded-2xl p-6 shadow-md hover:shadow-xl transition-all duration-300 border border-gray-200 hover:border-[#F0932B]"
                >
                  <div className="flex items-start justify-between mb-4">
                    <div className="w-14 h-14 rounded-lg bg-gray-100 flex items-center justify-center">
                      <Building2 className="w-7 h-7 text-[#F0932B]" />
                    </div>
                    {company.featured && (
                      <span className="bg-yellow-100 text-yellow-700 text-xs font-semibold px-2 py-1 rounded-full">
                        Destaque
                      </span>
                    )}
                  </div>

                  <h3 className="text-xl font-bold text-gray-900 mb-2">{company.name}</h3>
                  
                  <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">
                      {company.industry}
                    </span>
                    <div className="flex items-center gap-1">
                      <Star className="w-4 h-4 text-yellow-500 fill-yellow-500" />
                      <span className="text-sm font-semibold text-gray-700">{company.rating}</span>
                    </div>
                  </div>

                  <p className="text-gray-600 text-sm mb-4 line-clamp-2">{company.description}</p>

                  <div className="space-y-2 text-sm text-gray-600 mb-4">
                    <div className="flex items-center gap-2">
                      <MapPin className="w-4 h-4" />
                      <span>{company.location}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <Users className="w-4 h-4" />
                      <span>{company.employees}</span>
                    </div>
                  </div>

                  <div className="pt-4 border-t border-gray-100 flex items-center justify-between">
                    <span className="text-[#F0932B] font-semibold text-sm">
                      {company.openJobs} vagas
                    </span>
                    <Link
                      href={`/companies/${company.id}`}
                      className="text-gray-600 hover:text-[#F0932B] font-semibold text-sm transition-colors"
                    >
                      Ver mais →
                    </Link>
                  </div>
                </div>
              ))}
            </div>

            {filteredCompanies.length === 0 && (
              <div className="text-center py-16">
                <Building2 className="w-16 h-16 text-gray-300 mx-auto mb-4" />
                <h3 className="text-xl font-semibold text-gray-900 mb-2">Nenhuma empresa encontrada</h3>
                <p className="text-gray-600">Tente ajustar seus filtros de busca</p>
              </div>
            )}
          </div>
        </section>
      </main>

      <Footer />
    </div>
  )
}