"use client";

import { motion } from "framer-motion";
import { useInView } from "react-intersection-observer";
import { TextReveal } from "@/components/advanced-typography";

export function About() {
  const [ref, inView] = useInView({
    triggerOnce: false,
    threshold: 0.2,
    rootMargin: "-100px 0px",
  });

  return (
    <section
      id="about"
      ref={ref}
      className="relative w-full bg-black min-h-screen lg:h-screen flex items-center overflow-visible py-16 lg:py-0"
    >
      <div className="max-w-[1400px] mx-auto px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20 py-12 sm:py-16 md:py-20">
        <div className="grid lg:grid-cols-2 gap-12 sm:gap-16 lg:gap-24">
          
          {/* Sol - Başlık */}
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            animate={inView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
            className="space-y-8"
          >
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={inView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
            >
              <p className="text-xs sm:text-sm text-gray-600 uppercase tracking-widest mb-3 sm:mb-4">
                Hakkımda
              </p>
              <h2 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-tight">
                Hayatım,<br />
                Hikayem
              </h2>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={inView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.6, delay: 0.1, ease: [0.16, 1, 0.3, 1] }}
              className="space-y-4 sm:space-y-6 pt-6 sm:pt-8 border-t border-gray-800"
            >
              <motion.div
                initial={{ opacity: 0, x: -20 }}
                animate={inView ? { opacity: 1, x: 0 } : {}}
                transition={{ duration: 0.5, delay: 0.2 }}
              >
                <p className="text-xs sm:text-sm text-gray-600 uppercase tracking-wider mb-1 sm:mb-2">
                  Doğum
                </p>
                <p className="text-base sm:text-lg text-white">14 Ağustos 1992</p>
              </motion.div>
              <motion.div
                initial={{ opacity: 0, x: -20 }}
                animate={inView ? { opacity: 1, x: 0 } : {}}
                transition={{ duration: 0.5, delay: 0.3 }}
              >
                <p className="text-xs sm:text-sm text-gray-600 uppercase tracking-wider mb-1 sm:mb-2">
                  Konum
                </p>
                <p className="text-base sm:text-lg text-white">İstanbul, Türkiye</p>
              </motion.div>
            </motion.div>
          </motion.div>

          {/* Sağ - Hikaye */}
          <motion.div
            initial={{ opacity: 0, x: 50 }}
            animate={inView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}
            className="space-y-5 sm:space-y-6 lg:space-y-8 text-gray-400 leading-relaxed text-sm sm:text-base lg:text-lg"
          >
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={inView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.6, delay: 0.3 }}
              className="text-lg sm:text-xl text-gray-300"
            >
              <TextReveal>
                Hayat bana erken yaşta sorumluluk almayı öğretti. 
                Genç yaşlarda yaşadığım deneyimler, bugün aldığım kararların temelini oluşturdu.
              </TextReveal>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={inView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.6, delay: 0.4 }}
            >
              <TextReveal>
                Zorlu süreçlerden geçtim, yönümü kaybettiğim anlar oldu. 
                Ancak her seferinde yeniden odaklanmayı, disiplinli ilerlemeyi ve sistem kurmayı öğrendim.
              </TextReveal>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={inView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.6, delay: 0.5 }}
            >
              <TextReveal>
                Aile desteğiyle başladığım yolculuk, zamanla kendi ayaklarım üzerinde durduğum 
                bağımsız projelere dönüştü.
              </TextReveal>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={inView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.6, delay: 0.6 }}
              className="text-lg sm:text-xl text-white font-light"
            >
              <TextReveal>
                Bugün; yazılım, e-ticaret ve dijital ürünler alanında sürdürülebilir yapılar inşa ediyorum. 
                Kısa vadeli kazançlar yerine, uzun vadeli değer üretmeye odaklanıyorum.
              </TextReveal>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={inView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.6, delay: 0.7 }}
              className="text-base sm:text-lg text-gray-500 italic pt-6 sm:pt-8 border-t border-gray-800"
            >
              <TextReveal>
                Hayat kusursuz değil, ben de değilim. 
                Ama her gün daha bilinçli, daha sağlam ve daha net ilerliyorum.
              </TextReveal>
            </motion.div>
          </motion.div>
        </div>
      </div>

    </section>
  );
}
