import React, { useRef } from 'react';
import { motion, useInView } from 'framer-motion';
import { XCircle, CheckCircle2 } from 'lucide-react';

export const ProblemComparison: React.FC = () => {
  const containerRef = useRef(null);
  const oldWayRef = useRef(null);
  const newWayRef = useRef(null);
  
  // Adjusted margin to make the transition happen exactly when the "New Way" text enters the middle of the screen
  const isNewWayInView = useInView(newWayRef, { margin: "-40% 0px -40% 0px" });

  return (
    <section ref={containerRef} className="py-32 bg-background relative border-b border-white/5">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid lg:grid-cols-2 gap-16 lg:gap-24">
          
          {/* Left Column: Scrollable Text */}
          <div className="space-y-48 py-12 lg:py-24">
            {/* Block 1: Old Way */}
            <div ref={oldWayRef} className={`transition-opacity duration-500 ${isNewWayInView ? 'opacity-30' : 'opacity-100'}`}>
              <div className="inline-flex items-center gap-2 mb-6 text-red-500 bg-red-500/10 px-4 py-2 rounded-full">
                <XCircle size={16} />
                <span className="text-xs font-bold uppercase tracking-wide">The Rearview Mirror</span>
              </div>
              <h3 className="text-4xl md:text-5xl font-bold text-white mb-6 tracking-tight">
                Reactive Logging & <br/>
                <span className="text-gray-600">Gamified Shame.</span>
              </h3>
              <p className="text-xl text-gray-400 leading-relaxed mb-8">
                Traditional apps tell you what you did wrong after the fact. 
                Seeing red numbers and negative feedback loops kills motivation, 
                turning nutrition into a burden rather than a tool.
              </p>
            </div>

            {/* Block 2: New Way */}
            <div ref={newWayRef} className={`transition-opacity duration-500 ${isNewWayInView ? 'opacity-100' : 'opacity-30'}`}>
              <div className="inline-flex items-center gap-2 mb-6 text-primary-400 bg-primary-500/10 px-4 py-2 rounded-full">
                <CheckCircle2 size={16} />
                <span className="text-xs font-bold uppercase tracking-wide">The GPS</span>
              </div>
              <h3 className="text-4xl md:text-5xl font-bold text-white mb-6 tracking-tight">
                Proactive Guidance & <br/>
                <span className="text-primary-400">Actionable Intelligence.</span>
              </h3>
              <p className="text-xl text-gray-400 leading-relaxed mb-8">
                FitMate tells you what to eat *next*. We use Adherence Buffers to 
                automatically adjust your future meals if you slip up, keeping you 
                on track without the guilt trip.
              </p>
            </div>
          </div>

          {/* Right Column: Sticky Visuals */}
          <div className="hidden lg:block relative h-full">
            <div className="sticky top-[20vh] h-[60vh] w-full">
              <div className="relative w-full h-full">
                
                {/* Old Way Card */}
                <motion.div 
                  animate={{ 
                    opacity: isNewWayInView ? 0 : 1,
                    scale: isNewWayInView ? 0.9 : 1,
                    filter: isNewWayInView ? "blur(10px)" : "blur(0px)",
                    pointerEvents: isNewWayInView ? "none" : "auto"
                  }}
                  transition={{ duration: 0.5 }}
                  className="absolute inset-0 bg-[#0f0f0f] border border-white/10 rounded-3xl p-8 flex flex-col justify-center items-center text-center overflow-hidden"
                >
                   <div className="absolute inset-0 bg-red-900/5" />
                   <div className="w-24 h-24 rounded-full bg-red-500/10 flex items-center justify-center mb-8 text-red-500">
                      <XCircle size={48} />
                   </div>
                   <div className="space-y-4 w-full max-w-xs">
                      <div className="h-2 bg-red-900/20 rounded-full w-full overflow-hidden">
                        <div className="h-full bg-red-600 w-[110%]" />
                      </div>
                      <div className="flex justify-between text-sm text-red-400">
                        <span>Limit Exceeded</span>
                        <span>+240 kcal</span>
                      </div>
                   </div>
                </motion.div>

                {/* New Way Card */}
                <motion.div 
                  animate={{ 
                    opacity: isNewWayInView ? 1 : 0,
                    scale: isNewWayInView ? 1 : 0.95,
                    y: isNewWayInView ? 0 : 20,
                    filter: isNewWayInView ? "blur(0px)" : "blur(10px)"
                  }}
                  transition={{ duration: 0.5 }}
                  className="absolute inset-0 bg-surfaceHighlight border border-primary-500/20 rounded-3xl p-8 flex flex-col justify-center items-center text-center overflow-hidden shadow-[0_0_50px_rgba(6,182,212,0.15)]"
                >
                   <div className="absolute inset-0 bg-primary-900/5" />
                   <div className="w-24 h-24 rounded-full bg-primary-500/10 flex items-center justify-center mb-8 text-primary-400">
                      <CheckCircle2 size={48} />
                   </div>
                   <div className="space-y-4 w-full max-w-xs text-left">
                      <div className="bg-black/40 p-4 rounded-xl border border-white/5">
                         <div className="text-xs text-gray-500 mb-1">Recalculating path...</div>
                         <div className="text-sm text-white">Dinner target adjusted:</div>
                         <div className="text-lg font-bold text-primary-400">-15g Fat, +20g Protein</div>
                      </div>
                   </div>
                </motion.div>

              </div>
            </div>
          </div>

        </div>
      </div>
    </section>
  );
};