"use client"

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

export default function AboutPage() {
  const { t } = useTranslation()
  const values = [
    {
      icon: Target,
      title: t("about.values.items.mission.title"),
      description: t("about.values.items.mission.description"),
    },
    {
      icon: Users,
      title: t("about.values.items.community.title"),
      description: t("about.values.items.community.description"),
    },
    {
      icon: Zap,
      title: t("about.values.items.efficiency.title"),
      description: t("about.values.items.efficiency.description"),
    },
    {
      icon: Shield,
      title: t("about.values.items.trust.title"),
      description: t("about.values.items.trust.description"),
    },
  ]

  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">
                {t("about.hero.title")}
              </h1>
              <p className="text-lg text-muted-foreground leading-relaxed text-pretty">
                {t("about.hero.subtitle")}
              </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">{t("about.story.title")}</h2>
              <div className="space-y-4 text-muted-foreground leading-relaxed">
                <p>{t("about.story.paragraphs.first")}</p>
                <p>{t("about.story.paragraphs.second")}</p>
                <p>{t("about.story.paragraphs.third")}</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">
                {t("about.values.title")}
              </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>
  )
}
