"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"
import { useTranslation } from "@/lib/i18n"

export default function AboutPage() {
  const { t } = useTranslation()

  const values = [
    {
      icon: Heart,
      title: t('about.values.passion.title'),
      description: t('about.values.passion.description')
    },
    {
      icon: Users,
      title: t('about.values.humility.title'),
      description: t('about.values.humility.description')
    },
    {
      icon: Rocket,
      title: t('about.values.autonomy.title'),
      description: t('about.values.autonomy.description')
    },
    {
      icon: Lightbulb,
      title: t('about.values.creativity.title'),
      description: t('about.values.creativity.description')
    },
    {
      icon: Target,
      title: t('about.values.flexibility.title'),
      description: t('about.values.flexibility.description')
    },
    {
      icon: Handshake,
      title: t('about.values.honesty.title'),
      description: t('about.values.honesty.description')
    },
    {
      icon: Smile,
      title: t('about.values.respect.title'),
      description: t('about.values.respect.description')
    },
    {
      icon: Globe,
      title: t('about.values.diversity.title'),
      description: t('about.values.diversity.description')
    }
  ]

  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">
                    {t('about.hero.title')}
                  </h1>
                  <p className="text-xl text-gray-600 leading-relaxed">
                    {t('about.hero.subtitle')}
                  </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">
                    {t('about.whatWeDo.title')}
                  </h2>
                  <div className="space-y-4 text-lg text-gray-700 leading-relaxed">
                    <p className="font-semibold text-xl">
                      {t('about.whatWeDo.paragraph1')}
                    </p>
                    <p>
                      {t('about.whatWeDo.paragraph2')}
                    </p>
                    <p>
                      {t('about.whatWeDo.paragraph3')}
                    </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">
                {t('about.hybrid.title')}
              </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">{t('about.hybrid.agile.title')}</h3>
                  <p className="text-gray-600">
                    {t('about.hybrid.agile.description')}
                  </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">{t('about.hybrid.productive.title')}</h3>
                  <p className="text-gray-600">
                    {t('about.hybrid.productive.description')}
                  </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">
                {t('about.purpose.title')}
              </h2>
              <p className="text-2xl text-gray-700 leading-relaxed font-medium">
                {t('about.purpose.description')}
              </p>
              <div className="mt-12 p-8 bg-white rounded-2xl shadow-xl">
                <p className="text-xl text-gray-800 italic">
                  "{t('about.purpose.quote')}"
                </p>
                <p className="text-lg text-primary font-bold mt-6">
                  {t('about.purpose.belief')}
                </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">
                {t('about.values.title')}
              </h2>
              <p className="text-xl text-gray-600 text-center mb-16 max-w-3xl mx-auto">
                {t('about.values.subtitle')}
              </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">
                {t('about.cta.title')}
              </h2>
              <p className="text-xl mb-10 opacity-95">
                {t('about.cta.subtitle')}
              </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"
                >
                  {t('about.cta.findJobs')}
                </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"
                >
                  {t('about.cta.postJob')}
                </a>
              </div>
            </div>
          </div>
        </section>
      </main>

      <Footer />
    </div>
  )
}