"use client";

import Image from "next/image";
import Link from "next/link";
import { getCloudinaryUrl } from "@/src/lib/cloudinary";
import { motion } from "framer-motion";

interface SplitSectionProps {
  title: string;
  subtitle: string;
  description: string;
  mainImage: string;
  secondImage: string;
  href: string;
  reverse?: boolean;
}

export default function SplitSection({
  title,
  subtitle,
  description,
  mainImage,
  secondImage,
  href,
  reverse = false
}: SplitSectionProps) {
  return (
    <section className={`flex flex-col ${reverse ? 'md:flex-row-reverse' : 'md:flex-row'} min-h-screen w-full bg-[#FAF9F6] overflow-hidden`}>
      
      {/* Text Side */}
      <motion.div 
        initial={{ opacity: 0, y: 50 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, margin: "-100px" }}
        transition={{ duration: 0.8, ease: "easeOut" }}
        className="w-full md:w-1/2 flex flex-col justify-center px-10 md:px-24 py-20"
      >
        <span className="text-gold text-xs tracking-[0.4em] font-bold uppercase mb-6 block">
          {subtitle}
        </span>
        <h2 className="text-5xl md:text-7xl font-serif text-gray-900 leading-tight mb-8">
          {title}
        </h2>
        <p className="text-gray-500 text-lg leading-relaxed max-w-md mb-12 font-light">
          {description}
        </p>
        <div>
          <Link 
            href={href}
            className="group relative inline-block overflow-hidden bg-[#C59D5F] text-white px-10 py-4 rounded-md text-[10px] font-bold tracking-widest transition-all hover:bg-gold uppercase active:scale-95"
          >
            <span className="relative z-10">KEŞFET</span>
            <motion.div 
              className="absolute inset-0 bg-white/20 -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-in-out"
            />
          </Link>
        </div>
      </motion.div>

      {/* Image Side */}
      <div className="w-full md:w-1/2 relative min-h-[500px] md:min-h-screen">
        <motion.div 
          initial={{ scale: 1.1, opacity: 0 }}
          whileInView={{ scale: 1, opacity: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 1.5, ease: "easeOut" }}
          className="relative w-full h-full"
        >
          <Image
            src={getCloudinaryUrl(mainImage, { width: 1200, height: 1600, crop: "fill" })}
            alt={title}
            fill
            className="object-cover"
          />
        </motion.div>
        
        {/* Floating Secondary Image with Parallax-ish Scroll Effect */}
        <motion.div 
          initial={{ opacity: 0, x: reverse ? -100 : 100, y: 50 }}
          whileInView={{ opacity: 1, x: reverse ? "-40px" : "40px", y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 1, delay: 0.4, ease: "easeOut" }}
          className={`absolute bottom-20 ${reverse ? 'left-0' : 'right-0'} z-10 w-48 md:w-80 aspect-[3/4] shadow-2xl hidden md:block`}
        >
          <Image
            src={getCloudinaryUrl(secondImage, { width: 600, height: 800, crop: "fill" })}
            alt={`${title} detail`}
            fill
            className="object-cover border-[10px] border-white"
          />
        </motion.div>
      </div>
    </section>
  );
}