import React, { useEffect } from "react";
import { Element } from "react-scroll";
import { useTranslation } from "react-i18next";
import AOS from "aos";
import "aos/dist/aos.css";

const About = () => {
  const { t } = useTranslation();
const home10 = "https://i.imgur.com/MW2Sk0y.jpg"; 



  
  useEffect(() => {
    AOS.init({ duration: 1000, once: false });

    const handleScroll = () => {
      AOS.refresh();
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <Element name="about">
      <section
        className="w-full h-screen px-4 sm:px-6 lg:px-16 py-12 sm:py-16 text-black font-sans relative overflow-hidden"
        style={{ direction: "rtl", backgroundColor: "#111827" }}
      >
        {/* صورة الخلفية */}
        <div
          className="relative w-full sm:w-3/4 mx-auto z-0"
          data-aos="fade-right"
          style={{
            borderRadius: "12px",
            border: "1px solid #EB8323",
            boxShadow:
              "0 0 15px 5px rgba(235, 131, 35, 0.4), 0 0 8px 2px rgba(235, 131, 35, 0.3)",
          }}
        >
          <img
            src={home10}
            alt="شخص"
            className="w-full h-[450px] sm:h-[500px] md:h-[600px] object-cover rounded-lg transition-all duration-300"
            loading="eager"
            fetchPriority="high"
          />
        </div>

        {/* مربع النص المتراكب */}
        <div
          className="z-10 max-w-full px-4 sm:px-0 -mt-20 sm:mt-0 sm:absolute sm:bottom-10 sm:right-10
                     bg-white/20 backdrop-blur-md text-black p-6 sm:p-12 rounded-xl shadow-2xl
                     flex flex-col sm:max-w-md"
          data-aos="fade-left"
        >
          <h1 className="mb-4 sm:mb-6 text-3xl sm:text-5xl font-extrabold md:text-6xl lg:text-7xl text-center self-center mt-0">
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#10375C] to-[#F3C623]">
              {t('about.title')}
            </span>
          </h1>
          <p className="text-lg sm:text-2xl leading-relaxed flex-grow text-center">
            {t('about.description')}
          </p>
        </div>
      </section>
    </Element>
  );
};

export default About;