import React from 'react';
import { motion, Variants } from 'framer-motion';
import { COMPARISON_DATA } from '../../data/mockData';
import { ComparisonItem } from '../../types';

const ProblemSolution: React.FC = () => {
    
    // Jitter animation for "Problem" items
    const jitter: Variants = {
        animate: {
            x: [0, -2, 2, -1, 1, 0],
            y: [0, 1, -1, 0, 1, 0],
            opacity: [0.6, 0.8, 0.5, 0.7],
            transition: {
                duration: 2, // Slower, persistent unease
                repeat: Infinity,
                repeatType: "mirror",
                ease: "linear"
            }
        }
    };

    // Smooth entry for "Solution" items
    const smoothEntry: Variants = {
        hidden: { opacity: 0, x: 20 },
        visible: (i: number) => ({
            opacity: 1,
            x: 0,
            transition: {
                delay: i * 0.1,
                duration: 0.8,
                ease: [0.22, 1, 0.36, 1] as [number, number, number, number]
            }
        })
    };

    return (
        <section className="relative w-full min-h-[80vh] flex flex-col md:flex-row">
            
            {/* LEFT SIDE: The Problem (Chaos) */}
            <div className="w-full md:w-1/2 bg-[#0a0202] relative overflow-hidden flex flex-col justify-center px-8 py-16 md:px-16 lg:px-24">
                {/* Heavy Noise Overlay */}
                <div 
                    className="absolute inset-0 opacity-20 pointer-events-none mix-blend-overlay z-10"
                    style={{
                        backgroundImage: 'url("data:image/svg+xml,%3Csvg viewBox=\'0 0 200 200\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cfilter id=\'noiseFilter\'%3E%3CfeTurbulence type=\'fractalNoise\' baseFrequency=\'0.9\' numOctaves=\'3\' stitchTiles=\'stitch\'/%3E%3C/filter%3E%3Crect width=\'100%25\' height=\'100%25\' filter=\'url(%23noiseFilter)\'/%3E%3C/svg%3E")'
                    }}
                />
                
                <motion.div 
                    initial={{ opacity: 0 }}
                    whileInView={{ opacity: 1 }}
                    className="relative z-20"
                >
                    <h3 className="font-serif text-3xl md:text-4xl text-white/40 mb-12 tracking-wide">
                        The Uncertainty
                    </h3>

                    <div className="space-y-8">
                        {COMPARISON_DATA.map((item: ComparisonItem) => (
                            <motion.div 
                                key={`prob-${item.id}`}
                                className="flex items-center gap-4"
                                variants={jitter}
                                animate="animate"
                            >
                                <div className="w-1.5 h-1.5 bg-red-900/50 rounded-full" />
                                <p className="font-sans text-xl md:text-2xl text-red-100/30 line-through decoration-red-900/50 decoration-2">
                                    {item.problem}
                                </p>
                            </motion.div>
                        ))}
                    </div>
                </motion.div>
            </div>

            {/* RIGHT SIDE: The Solution (Control) */}
            <div className="w-full md:w-1/2 relative bg-gradient-to-br from-[#2a0505] to-[#110101] flex flex-col justify-center px-8 py-16 md:px-16 lg:px-24 border-l border-white/5">
                <motion.div
                    initial="hidden"
                    whileInView="visible"
                    viewport={{ once: true, margin: "-20%" }}
                    className="relative z-20"
                >
                    <h3 className="font-serif text-3xl md:text-4xl text-brand-gold mb-12 tracking-wide">
                        The Standard
                    </h3>

                    <div className="space-y-8">
                         {COMPARISON_DATA.map((item: ComparisonItem, index: number) => (
                            <motion.div 
                                key={`sol-${item.id}`}
                                custom={index}
                                variants={smoothEntry}
                                className="flex items-center gap-6"
                            >
                                <div className="w-8 h-[1px] bg-brand-red" />
                                <p className="font-sans text-xl md:text-2xl text-white font-medium tracking-tight">
                                    {item.solution}
                                </p>
                            </motion.div>
                        ))}
                    </div>
                </motion.div>

                {/* Subtle sheen effect on right side */}
                <div className="absolute top-0 right-0 w-full h-full bg-gradient-to-b from-white/5 to-transparent pointer-events-none" />
            </div>

        </section>
    );
};

export default ProblemSolution;