import React from "react";
import { Users, Award, Clock, Globe2 } from "lucide-react";
import { useLanguage } from "../context/LanguageContext";

const About: React.FC = () => {
  const { t } = useLanguage();

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Hero Section */}
      <div className="relative bg-blue-900 text-white py-12">
        <div
          className="absolute inset-0 opacity-20"
          style={{
            backgroundImage:
              'url("https://images.pexels.com/photos/3183183/pexels-photo-3183183.jpeg?auto=compress&cs=tinysrgb&w=1920")',
            backgroundSize: "cover",
            backgroundPosition: "center",
          }}
        ></div>
        <div className="container mx-auto pt-16 px-4 relative">
          <h1 className="text-5xl font-bold mb-6">{t("about.title")}</h1>
          <p className="text-xl max-w-3xl">{t("about.subtitle")}</p>
        </div>
      </div>

      {/* Stats Section */}
      <div className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div className="text-center">
              <Users className="w-12 h-12 text-blue-600 mx-auto mb-4" />
              <div className="text-4xl font-bold text-gray-900 mb-2">300+</div>
              <div className="text-gray-600">{t("about.stats.clients")}</div>
            </div>
            <div className="text-center">
              <Award className="w-12 h-12 text-blue-600 mx-auto mb-4" />
              <div className="text-4xl font-bold text-gray-900 mb-2">20+</div>
              <div className="text-gray-600">{t("about.stats.experience")}</div>
            </div>
            <div className="text-center">
              <Clock className="w-12 h-12 text-blue-600 mx-auto mb-4" />
              <div className="text-4xl font-bold text-gray-900 mb-2">7/24</div>
              <div className="text-gray-600">{t("about.stats.support")}</div>
            </div>
            <div className="text-center">
              <Globe2 className="w-12 h-12 text-blue-600 mx-auto mb-4" />
              <div className="text-4xl font-bold text-gray-900 mb-2">3</div>
              <div className="text-gray-600">{t("about.stats.countries")}</div>
            </div>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="py-6">
        <div className="container mx-auto px-4">
          <div className="mb-6">
            <div className="space-y-6 mx-auto mx-auto text-gray-800 text-lg leading-relaxed">
              <p className="bg-white p-5 shadow-md border-l-4 border-blue-600">
                {t("about.description.part1")}
              </p>
              <p className="italic text-center text-blue-700 font-semibold">
                {t("about.description.motto")}
              </p>
              <p className="bg-white p-5 shadow-md border-l-4 border-blue-600">
                {t("about.description.part2")}
              </p>
              <p className="text-center text-blue-700 font-medium">
                {t("about.description.closing")}
              </p>
            </div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <div className="bg-white p-8 rounded-xl shadow-lg">
              <h3 className="text-2xl font-bold text-gray-900 mb-4">
                {t("about.mission")}
              </h3>
              <p className="text-gray-700">{t("about.mission.desc")}</p>
            </div>
            <div className="bg-white p-8 rounded-xl shadow-lg">
              <h3 className="text-2xl font-bold text-gray-900 mb-4">
                {t("about.vision")}
              </h3>
              <p className="text-gray-700">{t("about.vision.desc")}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default About;