import { Navbar } from "@/components/navbar"
import { Footer } from "@/components/footer"
import { Card, CardContent } from "@/components/ui/card"
import { Target, Users, Zap, Shield } from "lucide-react"

export default function SobrePage() {
  const values = [
    {
      icon: Target,
      title: "Missão",
      description:
        "Conectar talentos excepcionais com oportunidades transformadoras, facilitando o crescimento profissional e empresarial.",
    },
    {
      icon: Users,
      title: "Comunidade",
      description:
        "Construir uma comunidade inclusiva onde candidatos e empresas encontram o match perfeito para suas necessidades.",
    },
    {
      icon: Zap,
      title: "Eficiência",
      description:
        "Simplificar o processo de recrutamento com tecnologia intuitiva e processos otimizados para economizar tempo.",
    },
    {
      icon: Shield,
      title: "Confiança",
      description:
        "Garantir transparência e segurança em todas as interações, protegendo dados e promovendo relações éticas.",
    },
  ]

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

      <main className="flex-1">
        {/* Hero Section */}
        <section className="bg-muted/30 py-16 md:py-24">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="max-w-3xl mx-auto text-center">
              <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-6 text-balance">
                Sobre o Portal de Empregos
              </h1>
              <p className="text-lg text-muted-foreground leading-relaxed text-pretty">
                Somos uma plataforma dedicada a transformar a forma como pessoas encontram oportunidades profissionais e
                como empresas descobrem talentos excepcionais.
              </p>
            </div>
          </div>
        </section>

        {/* Story Section */}
        <section className="py-16 md:py-24">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="max-w-3xl mx-auto">
              <h2 className="text-3xl font-bold text-foreground mb-6">Nossa História</h2>
              <div className="space-y-4 text-muted-foreground leading-relaxed">
                <p>
                  Fundado em 2025, o Portal de Empregos nasceu da necessidade de simplificar o processo de recrutamento,
                  tornando-o mais transparente, eficiente e acessível para todos.
                </p>
                <p>
                  Acreditamos que encontrar o emprego ideal não deveria ser complicado. Por isso, criamos uma plataforma
                  minimalista e intuitiva que coloca candidatos e empresas em primeiro lugar.
                </p>
                <p>
                  Hoje, conectamos milhares de profissionais com empresas inovadoras, ajudando a construir carreiras de
                  sucesso e equipes extraordinárias.
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* Values Section */}
        <section className="py-16 md:py-24 bg-muted/30">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="max-w-5xl mx-auto">
              <h2 className="text-3xl font-bold text-foreground mb-12 text-center">Nossos Valores</h2>
              <div className="grid md:grid-cols-2 gap-6">
                {values.map((value, index) => (
                  <Card key={index}>
                    <CardContent className="pt-6">
                      <div className="flex items-start gap-4">
                        <div className="p-3 rounded-lg bg-primary/10">
                          <value.icon className="h-6 w-6 text-primary" />
                        </div>
                        <div className="flex-1">
                          <h3 className="text-xl font-semibold mb-2">{value.title}</h3>
                          <p className="text-muted-foreground leading-relaxed">{value.description}</p>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>
          </div>
        </section>
      </main>

      <Footer />
    </div>
  )
}
