"use client";

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

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

  return (
    <section
      id="achievements"
      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 ve Giriş */}
          <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">
                Projeler
              </p>
              <h2 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-tight">
                Başarılarım,<br />
                Firmalarım
              </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="pt-6 sm:pt-8 border-t border-gray-800"
            >
              <p className="text-base sm:text-lg text-gray-400 leading-relaxed">
                Bugün iki farklı sektörde, ölçeklenebilir ve sürdürülebilir projeler geliştiriyorum. 
                Her iki alanda da odak noktam; sistem kurmak, büyütmek ve uzun vadeli değer üretmek.
              </p>
            </motion.div>
          </motion.div>

          {/* Sağ - Firmalar */}
          <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-8"
          >
            {/* Dijital Website */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={inView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.6, delay: 0.3 }}
              className="p-6 border border-gray-800 rounded-xl hover:border-gray-700 transition-colors"
            >
              <div className="flex items-center justify-between mb-4">
                <a href="https://dijitalwebsite.com" target="_blank" rel="noopener noreferrer" className="text-xl sm:text-2xl font-semibold text-white hover:text-gray-300 transition-colors">
                  Dijital Website
                </a>
                <span className="text-xs text-gray-500 uppercase tracking-wider">Founder & Lead</span>
              </div>
              <p className="text-gray-500 text-sm mb-4">
                Web tasarım ve yazılım alanında faaliyet gösteren bir dijital ajans.
              </p>
              <div className="space-y-2 text-gray-400 text-sm">
                <p>• Bugüne kadar 500&apos;den fazla projeyi hayata geçirdim.</p>
                <p>• Kurumsal web siteleri, e-ticaret altyapıları ve özel yazılım çözümleri geliştiriyorum.</p>
                <p>• Projelerde performans, güvenlik ve sürdürülebilirlik önceliğimdir.</p>
              </div>
            </motion.div>

            {/* CocukMont */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={inView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.6, delay: 0.4 }}
              className="p-6 border border-gray-800 rounded-xl hover:border-gray-700 transition-colors"
            >
              <div className="flex items-center justify-between mb-4">
                <a href="https://www.cocukmont.com.tr" target="_blank" rel="noopener noreferrer" className="text-xl sm:text-2xl font-semibold text-white hover:text-gray-300 transition-colors">
                  CocukMont.com.tr
                </a>
                <span className="text-xs text-gray-500 uppercase tracking-wider">Founder & Operator</span>
              </div>
              <p className="text-gray-500 text-sm mb-4">
                Türkiye genelinde toptan çocuk giyim satışı yapan bir e-ticaret platformu.
              </p>
              <div className="space-y-2 text-gray-400 text-sm">
                <p>• Mont, bot, atkı, bere, eldiven ve sezonluk ürün gruplarında Türkiye geneline toptan satış gerçekleştiriyorum.</p>
                <p>• Tedarik, operasyon ve satış süreçlerini bizzat yönetiyorum.</p>
              </div>
            </motion.div>

            {/* Alt Not */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={inView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.6, delay: 0.5 }}
              className="pt-6 border-t border-gray-800"
            >
              <p className="text-gray-500 text-sm italic leading-relaxed">
                Farklı sektörlerde edindiğim deneyim, risk yönetimi, operasyonel disiplin ve 
                sistem kurma konularında güçlü bir bakış açısı kazandırdı.
              </p>
            </motion.div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}
