"use client";

import { Target, Eye, Sparkles, Shield, TrendingUp, Heart } from "lucide-react";
import Navbar from "@/components/layout/Navbar";
import Footer from "@/components/layout/Footer";
import Container from "@/components/shared/Container";
import AnimateOnScroll from "@/components/shared/AnimateOnScroll";
import { content } from "@/lib/content";
import { staggerContainer, staggerItem } from "@/lib/animations";
import { motion } from "framer-motion";

const about = content.ar.about;

const valueIcons = [Sparkles, Shield, Heart, TrendingUp];

export default function AboutPage() {
  return (
    <>
      <Navbar />
      <main className="min-h-screen">
        {/* Hero */}
        <section className="pt-24 pb-16 bg-gradient-to-b from-sky-50/50 to-white">
          <Container className="text-center">
            <AnimateOnScroll>
              <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-navy-800">
                {about.title}
              </h1>
            </AnimateOnScroll>
          </Container>
        </section>

        {/* Mission */}
        <section className="py-16">
          <Container className="max-w-4xl">
            <AnimateOnScroll>
              <div className="flex flex-col items-center text-center">
                <div className="flex items-center justify-center w-14 h-14 rounded-full bg-sky-100 mb-6">
                  <Target className="h-7 w-7 text-sky-600" />
                </div>
                <h2 className="text-2xl sm:text-3xl font-bold text-navy-800 mb-4">
                  {about.mission.title}
                </h2>
                <p className="text-lg sm:text-xl text-slate-600 leading-relaxed max-w-3xl">
                  {about.mission.text}
                </p>
              </div>
            </AnimateOnScroll>
          </Container>
        </section>

        {/* Vision */}
        <section className="py-16 bg-slate-50">
          <Container className="max-w-4xl">
            <AnimateOnScroll>
              <div className="flex flex-col items-center text-center">
                <div className="flex items-center justify-center w-14 h-14 rounded-full bg-amber-100 mb-6">
                  <Eye className="h-7 w-7 text-amber-600" />
                </div>
                <h2 className="text-2xl sm:text-3xl font-bold text-navy-800 mb-4">
                  {about.vision.title}
                </h2>
                <p className="text-lg sm:text-xl text-slate-600 leading-relaxed max-w-3xl">
                  {about.vision.text}
                </p>
              </div>
            </AnimateOnScroll>
          </Container>
        </section>

        {/* Values */}
        <section className="py-16">
          <Container>
            <AnimateOnScroll>
              <h2 className="text-2xl sm:text-3xl font-bold text-navy-800 text-center mb-12">
                قيمنا
              </h2>
            </AnimateOnScroll>

            <motion.div
              variants={staggerContainer}
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true, amount: 0.2 }}
              className="grid grid-cols-1 sm:grid-cols-2 gap-6 lg:gap-8 max-w-4xl mx-auto"
            >
              {about.values.map((value, index) => {
                const Icon = valueIcons[index];
                return (
                  <motion.div
                    key={value.title}
                    variants={staggerItem}
                    className="rounded-xl border border-slate-200 bg-white p-6 lg:p-8 hover:shadow-md transition-shadow"
                  >
                    <div className="flex items-center justify-center w-11 h-11 rounded-lg bg-sky-50 mb-4">
                      <Icon className="h-5 w-5 text-sky-600" />
                    </div>
                    <h3 className="text-lg font-bold text-navy-800 mb-2">
                      {value.title}
                    </h3>
                    <p className="text-sm text-slate-600 leading-relaxed">
                      {value.description}
                    </p>
                  </motion.div>
                );
              })}
            </motion.div>
          </Container>
        </section>
      </main>
      <Footer />
    </>
  );
}
