"use client";

import { useState, useEffect } from "react";
import Image from "next/image";
import { motion, AnimatePresence } from "framer-motion";
import { Card3D } from "@/components/3d-card";
import { TextReveal, GradientText } from "@/components/advanced-typography";
import { MagneticButton } from "@/components/magnetic-button";

const images = [
  "/ress.jpg",
  "/8e8f03d5-8737-4c5a-8bac-051d3a93b3b9.jpg",
];

export function Hero() {
  const [imageLoaded, setImageLoaded] = useState(false);
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  // Auto-change image every 4 seconds
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentImageIndex((prev) => (prev + 1) % images.length);
    }, 4000);
    return () => clearInterval(interval);
  }, []);

  return (
    <section
      id="home"
      className="relative w-full bg-black min-h-screen pt-12 sm:pt-16 lg:pt-20 pb-4 lg:pb-6"
    >
      <div className="w-full max-w-[1800px] mx-auto px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20">
        
        {/* Ana Grid - Her şey yan yana */}
        <div className="grid grid-cols-12 gap-4 lg:gap-8 items-start">
          
          {/* Sol Kolon - İsim + Açıklama + Bilgiler */}
          <div className="col-span-12 lg:col-span-7 order-2 lg:order-1 space-y-4 lg:space-y-6">
            
            {/* Büyük İsim */}
            <motion.div
              initial={{ opacity: 0, y: 50 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 1, ease: [0.16, 1, 0.3, 1] }}
            >
              <motion.h1
                initial={{ opacity: 0, scale: 0.9 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.8, delay: 0.2 }}
                className="text-[15vw] sm:text-[14vw] md:text-[12vw] lg:text-[9vw] xl:text-[8vw] font-bold leading-[0.85] tracking-tighter uppercase"
              >
                <GradientText>
                  Cihat<br/>
                  Cengiz
                </GradientText>
              </motion.h1>
            </motion.div>

            {/* Açıklama */}
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.3 }}
            >
              <div className="max-w-2xl space-y-4">
                <TextReveal className="text-lg sm:text-xl md:text-2xl lg:text-3xl text-white font-light leading-relaxed">
                  Sıfırdan başladım. Disiplinle ilerledim.
                </TextReveal>
                <TextReveal className="text-base sm:text-lg md:text-xl text-gray-400 font-light leading-relaxed mt-3">
                  Bugün, dijital ürünler ve markalar inşa ediyorum. 
                  Yazılımdan tekstile, hayallerimi gerçeğe dönüştürüyorum.
                </TextReveal>

                <div className="flex flex-wrap gap-3 pt-2">
                  <MagneticButton
                    onClick={() => {
                      const achievementsSection = document.querySelector("#achievements");
                      achievementsSection?.scrollIntoView({ behavior: "smooth" });
                    }}
                    strength={0.2}
                    className="group inline-flex items-center gap-3 px-6 py-3 bg-white text-black text-xs uppercase tracking-widest font-semibold hover:bg-gray-100 transition-colors"
                  >
                    Projeler
                    <motion.span
                      animate={{ x: [0, 4, 0] }}
                      transition={{
                        duration: 1.5,
                        repeat: Infinity,
                        ease: "easeInOut",
                      }}
                    >
                      →
                    </motion.span>
                  </MagneticButton>
                  <MagneticButton
                    onClick={() => {
                      const aboutSection = document.querySelector("#about");
                      aboutSection?.scrollIntoView({ behavior: "smooth" });
                    }}
                    strength={0.2}
                    className="group inline-flex items-center gap-3 px-6 py-3 border border-gray-600 text-white text-xs uppercase tracking-widest font-semibold hover:border-gray-400 hover:bg-white/5 transition-colors"
                  >
                    İletişim
                  </MagneticButton>
                </div>
              </div>
            </motion.div>

            {/* Alt Bilgiler */}
            <motion.div
              initial={{ opacity: 0, x: -30 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.8, delay: 0.4 }}
              className="flex items-start gap-4 border-l-2 border-white pl-4 pt-4"
            >
              <div className="space-y-1">
                <p className="text-sm lg:text-base text-white font-light">
                  İstanbul, Türkiye
                </p>
                <p className="text-xs text-gray-500">
                  Kişisel Web Sitesi — 2025
                </p>
              </div>
            </motion.div>

            <div className="grid grid-cols-2 gap-4 pt-4 border-t border-gray-800 max-w-md">
              <div>
                <p className="text-[10px] text-gray-600 uppercase tracking-widest mb-1">Firmalarım</p>
                <div className="flex flex-col gap-1 text-xs text-gray-400">
                  <a href="https://dijitalwebsite.com" target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors">dijitalwebsite.com</a>
                  <a href="https://www.cocukmont.com.tr" target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors">cocukmont.com.tr</a>
                </div>
              </div>
              <div>
                <p className="text-[10px] text-gray-600 uppercase tracking-widest mb-1">Sosyal</p>
                <div className="flex gap-2 text-xs text-gray-400">
                  <a href="https://instagram.com/cihathanofficial" target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors">@cihathanofficial</a>
                </div>
              </div>
            </div>
          </div>

          {/* Sağ Kolon - Fotoğraf */}
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 1, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
            className="col-span-12 lg:col-span-5 order-1 lg:order-2 flex items-center justify-center py-8 lg:py-0"
          >
            <div className="relative">
              {/* Floating Elements */}
              <motion.div
                animate={{ y: [0, -10, 0], rotate: [0, 5, 0] }}
                transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
                className="absolute -top-8 -right-8 w-24 h-24 border border-gray-700 rounded-full"
              />
              <motion.div
                animate={{ y: [0, 10, 0], rotate: [0, -5, 0] }}
                transition={{ duration: 5, repeat: Infinity, ease: "easeInOut", delay: 0.5 }}
                className="absolute -bottom-10 -left-10 w-36 h-36 border border-gray-800 rounded-full"
              />
              <motion.div
                animate={{ scale: [1, 1.3, 1], opacity: [0.3, 0.7, 0.3] }}
                transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
                className="absolute top-1/2 -right-14 w-3 h-3 bg-gray-500 rounded-full"
              />
              <motion.div
                animate={{ scale: [1, 1.4, 1], opacity: [0.2, 0.6, 0.2] }}
                transition={{ duration: 4, repeat: Infinity, ease: "easeInOut", delay: 1 }}
                className="absolute top-1/4 -left-8 w-4 h-4 bg-gray-600 rounded-full"
              />
              
              {/* Main Image Container - BÜYÜK */}
              <motion.div
                animate={{
                  boxShadow: [
                    "0 0 40px rgba(0,0,0,0.5)",
                    "0 0 60px rgba(0,0,0,0.7)",
                    "0 0 40px rgba(0,0,0,0.5)"
                  ]
                }}
                transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
                className="relative w-[320px] h-[427px] sm:w-[360px] sm:h-[480px] lg:w-[400px] lg:h-[533px] rounded-2xl overflow-hidden"
              >
                {/* Border Effects */}
                <div className="absolute inset-0 rounded-2xl border border-gray-700 z-30 pointer-events-none" />
                
                {/* Corner Accents */}
                <div className="absolute top-0 left-0 w-12 h-12 border-t-2 border-l-2 border-gray-500 rounded-tl-2xl z-30" />
                <div className="absolute top-0 right-0 w-12 h-12 border-t-2 border-r-2 border-gray-500 rounded-tr-2xl z-30" />
                <div className="absolute bottom-0 left-0 w-12 h-12 border-b-2 border-l-2 border-gray-500 rounded-bl-2xl z-30" />
                <div className="absolute bottom-0 right-0 w-12 h-12 border-b-2 border-r-2 border-gray-500 rounded-br-2xl z-30" />
                
                {/* Image */}
                <AnimatePresence mode="wait">
                  <motion.div
                    key={currentImageIndex}
                    initial={{ opacity: 0, scale: 1.1 }}
                    animate={{ opacity: 1, scale: 1 }}
                    exit={{ opacity: 0, scale: 0.95 }}
                    transition={{ duration: 0.7, ease: "easeInOut" }}
                    className="w-full h-full"
                  >
                    <Image
                      src={images[currentImageIndex]}
                      alt="Cihat Cengiz"
                      fill
                      className="object-cover"
                      priority
                      sizes="400px"
                      onLoad={() => setImageLoaded(true)}
                    />
                  </motion.div>
                </AnimatePresence>
                
                {/* Gradient Overlay - Sadece alt kısım */}
                <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none z-10" />
                
                {/* Image Indicators */}
                <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-40">
                  {images.map((_, index) => (
                    <button
                      key={index}
                      onClick={() => setCurrentImageIndex(index)}
                      className={`h-1.5 rounded-full transition-all duration-500 ${
                        index === currentImageIndex 
                          ? "bg-white w-8" 
                          : "bg-white/40 w-1.5 hover:bg-white/60"
                      }`}
                    />
                  ))}
                </div>
              </motion.div>
              
            </div>
          </motion.div>
        </div>
      </div>

      {/* Minimal Corner Label */}
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 1, delay: 1 }}
        className="absolute bottom-8 left-8"
      >
        <p className="text-xs text-gray-700 uppercase tracking-widest">
          Est. 2025
        </p>
      </motion.div>
    </section>
  );
}
