"use client"

import { Navbar } from "@/components/navbar"
import { Footer } from "@/components/footer"
import { Heart, Users, Rocket, Lightbulb, Target, Globe, Handshake, Smile } from "lucide-react"
import Image from "next/image"

export default function AboutPage() {
  const values = [
    {
      icon: Heart,
      title: "Paixão",
      description: "Amamos o que fazemos. Trabalhamos, compartilhamos e vivemos a missão do GoHorse Jobs e, por isso, queremos sempre fazer mais e fazer melhor."
    },
    {
      icon: Users,
      title: "Humildade",
      description: "Somos parte de um todo. Por isso, compartilhamos informações, reconhecemos nossos erros e nos conhecemos a fundo para trazer o melhor de nós."
    },
    {
      icon: Rocket,
      title: "Autonomia",
      description: "Decidimos proativamente onde empregar nosso talento, como executá-lo e nos tornamos capitães das tarefas que priorizamos."
    },
    {
      icon: Lightbulb,
      title: "Criatividade",
      description: "Fazer sempre o mesmo? Não, obrigado. Buscamos alternativas criativas que nos permitam otimizar os resultados. A aprendizagem é contínua."
    },
    {
      icon: Target,
      title: "Flexibilidade",
      description: "Não temos medo da mudança. Por isso, não entramos em crise quando a vivemos: reconhecemos os desafios e os transformamos em oportunidades."
    },
    {
      icon: Handshake,
      title: "Honestidade",
      description: "Valorizamos a sinceridade, a comunicação direta e o feedback. Há espaço para defender ideias no mesmo lugar onde os outros são ouvidos."
    },
    {
      icon: Smile,
      title: "Respeito",
      description: "Somos descontraídos, mas sempre nos dirigimos com respeito aos outros: há lugar e momento para tudo."
    },
    {
      icon: Globe,
      title: "Diversidade",
      description: "Trabalhamos de forma híbrida e itinerante, valorizando a diversidade de culturas, experiências e perspectivas que enriquecem nosso time."
    }
  ]

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

      <main className="flex-1">
        {/* Hero Section */}
        <section className="relative bg-white py-20 md:py-32 overflow-hidden">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="max-w-6xl mx-auto">
              <div className="grid lg:grid-cols-2 gap-12 items-center">
                <div>
                  <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6 leading-tight">
                    A evolução do trabalho começa pelas pessoas e sua cultura
                  </h1>
                  <p className="text-xl text-gray-600 leading-relaxed">
                    Todos os dias contribuímos para transformar a maneira como pensamos o trabalho para que seja coerente com a maneira como queremos viver.
                  </p>
                </div>
                <div className="relative">
                  <div className="relative h-96 rounded-2xl overflow-hidden shadow-2xl bg-[#F0932B]">
                    <Image
                      src="/1.png"
                      alt="GoHorse Jobs Team"
                      fill
                      className="object-contain"
                      quality={100}
                      priority
                    />
                  </div>
                  {/* Decorative elements */}
                  <div className="absolute -top-6 -right-6 w-32 h-32 bg-primary/20 rounded-full blur-3xl"></div>
                  <div className="absolute -bottom-6 -left-6 w-40 h-40 bg-orange-200/30 rounded-full blur-3xl"></div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* What We Do Section */}
        <section className="py-20 md:py-28 bg-white">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="max-w-6xl mx-auto">
              <div className="grid lg:grid-cols-2 gap-16 items-center">
                <div className="order-2 lg:order-1">
                  <div className="relative h-96 rounded-2xl overflow-hidden shadow-xl bg-[#F0932B]">
                    <Image
                      src="/2.png"
                      alt="O que fazemos"
                      fill
                      className="object-contain"
                      quality={100}
                    />
                  </div>
                </div>
                <div className="order-1 lg:order-2">
                  <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-12">
                    O que fazemos?
                  </h2>
                  <div className="space-y-4 text-lg text-gray-700 leading-relaxed">
                    <p className="font-semibold text-xl">
                      O GoHorse Jobs conecta empresas a talentos qualificados para transformar projetos em resultados reais, unindo expertise, agilidade e inovação em cada contratação.
                    </p>
                    <p>
                      Nossa plataforma facilita o encontro entre quem busca profissionais preparados e quem deseja oportunidades alinhadas ao seu perfil, objetivos e estilo de trabalho.
                    </p>
                    <p>
                      Ao mesmo tempo, ajudamos profissionais a evoluírem em suas carreiras, ganharem autonomia, ampliarem seu networking e conquistarem oportunidades que realmente fazem sentido para seu crescimento profissional.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Hybrid Work Section */}
        <section className="py-20 md:py-28 bg-white">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="max-w-6xl mx-auto text-center">
              <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
                Somos híbridos, itinerantes e diversos
              </h2>
              <p className="text-2xl text-gray-700 mb-12 max-w-3xl mx-auto">
                <span className="font-bold text-primary">70% da equipe do GoHorse Jobs</span> trabalha remotamente.{" "}
                <span className="font-bold">100% de trabalho com autonomia.</span>
              </p>
              <div className="grid md:grid-cols-2 gap-8 mt-16">
                <div className="bg-white p-8 rounded-2xl shadow-lg">
                  <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-6">
                    <Users className="w-8 h-8 text-primary" />
                  </div>
                  <h3 className="text-2xl font-bold text-gray-900 mb-4">+ Ágil</h3>
                  <p className="text-gray-600">
                    Nossa cultura de trabalho flexível nos permite responder rapidamente às necessidades do mercado e dos nossos usuários.
                  </p>
                </div>
                <div className="bg-white p-8 rounded-2xl shadow-lg">
                  <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-6">
                    <Rocket className="w-8 h-8 text-primary" />
                  </div>
                  <h3 className="text-2xl font-bold text-gray-900 mb-4">+ Produtiva</h3>
                  <p className="text-gray-600">
                    A autonomia e flexibilidade resultam em uma equipe mais motivada, engajada e produtiva em seus projetos.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Purpose Section */}
        <section className="py-20 md:py-28 bg-white">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="max-w-4xl mx-auto text-center">
              <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-8">
                O propósito que nos une
              </h2>
              <p className="text-2xl text-gray-700 leading-relaxed font-medium">
                Trabalhamos continuamente para transformar o mundo do trabalho promovendo a autonomia, o desenvolvimento de talentos e a igualdade de oportunidades para todos, de onde quer que seja.
              </p>
              <div className="mt-12 p-8 bg-white rounded-2xl shadow-xl">
                <p className="text-xl text-gray-800 italic">
                  "Somos uma organização inovadora que busca potencializar as pessoas no trabalho, impactando positivamente na vida pessoal, familiar e social."
                </p>
                <p className="text-lg text-primary font-bold mt-6">
                  Acreditamos que há uma nova forma de trabalhar.
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* Values Section */}
        <section className="py-20 md:py-28 bg-white">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="max-w-6xl mx-auto">
              <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 text-center">
                Nossos valores
              </h2>
              <p className="text-xl text-gray-600 text-center mb-16 max-w-3xl mx-auto">
                Os princípios que guiam nosso dia a dia e moldam nossa cultura organizacional
              </p>
              
              <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
                {values.map((value, index) => (
                  <div 
                    key={index}
                    className="group p-6 rounded-2xl bg-gray-50 hover:bg-primary/5 transition-all duration-300 hover:shadow-lg"
                  >
                    <div className="w-14 h-14 bg-primary/10 group-hover:bg-primary group-hover:scale-110 rounded-xl flex items-center justify-center mb-4 transition-all duration-300">
                      <value.icon className="w-7 h-7 text-primary group-hover:text-white transition-colors" />
                    </div>
                    <h3 className="text-xl font-bold text-gray-900 mb-3">
                      {value.title}
                    </h3>
                    <p className="text-gray-600 leading-relaxed text-sm">
                      {value.description}
                    </p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="relative py-20 md:py-28 bg-[#F0932B] overflow-hidden">
          <Image
            src="/4.png"
            alt="Background"
            fill
            className="object-cover"
            quality={100}
            priority
          />
          <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">
              <h2 className="text-4xl md:text-5xl font-bold mb-6">
                Faça parte da transformação do trabalho
              </h2>
              <p className="text-xl mb-10 opacity-95">
                Junte-se a milhares de empresas e profissionais que já confiam no GoHorse Jobs para construir o futuro do trabalho.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <a 
                  href="/jobs"
                  className="inline-block bg-white text-primary hover:bg-gray-100 font-bold px-8 py-4 rounded-full text-lg transition-all shadow-lg hover:shadow-xl"
                >
                  Encontrar Vagas
                </a>
                <a 
                  href="/publicar-vaga"
                  className="inline-block bg-transparent border-2 border-white text-white hover:bg-white/10 font-bold px-8 py-4 rounded-full text-lg transition-all"
                >
                  Publicar Vaga
                </a>
              </div>
            </div>
          </div>
        </section>
      </main>

      <Footer />
    </div>
  )
}