/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import { motion } from 'motion/react';
import { 
  X, 
  Check, 
  Clapperboard, 
  Calendar, 
  DollarSign, 
  Heart,
  ExternalLink,
  Play,
  Sparkles,
  Flame,
  ArrowRight,
  Rocket,
  Trophy,
  Medal,
  Award,
  Zap,
  TrendingUp,
  User,
  Video,
  Smartphone,
  Mail,
  Users,
  ChevronRight,
  Layers,
  ShieldCheck,
  Globe,
  XCircle,
  Clock,
  Music,
  Youtube,
  Instagram,
  Facebook,
  CheckCircle2,
  FileText,
  AlertCircle,
  BarChart3
} from 'lucide-react';

function Section6() {
  return (
    <section id="Section6" className="relative -mx-4 px-4 py-24 md:py-32 rounded-[3rem] md:rounded-[5rem] bg-gradient-to-b from-white via-blue-50/50 to-white overflow-hidden scroll-mt-20">
      {/* Floating Decorative Elements */}
      <div className="absolute inset-0 pointer-events-none overflow-hidden">
        <motion.div 
          animate={{ y: [0, -20, 0], rotate: [-12, -8, -12] }}
          transition={{ duration: 5, repeat: Infinity, ease: "easeInOut" }}
          className="absolute top-20 left-[10%] hidden lg:block"
        >
          <div className="bg-white p-4 rounded-2xl shadow-xl border border-blue-100">
            <Clapperboard className="text-blue-600" size={32} />
          </div>
        </motion.div>
        <motion.div 
          animate={{ y: [0, 20, 0], rotate: [12, 16, 12] }}
          transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }}
          className="absolute top-40 right-[10%] hidden lg:block"
        >
          <div className="bg-white p-4 rounded-2xl shadow-xl border border-indigo-100">
            <Sparkles className="text-indigo-600" size={32} />
          </div>
        </motion.div>
        <motion.div 
          animate={{ scale: [1, 1.1, 1] }}
          transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
          className="absolute bottom-40 left-[15%] hidden lg:block opacity-20"
        >
          <div className="w-64 h-64 bg-blue-400 rounded-full blur-[100px]"></div>
        </motion.div>
      </div>

      <div className="relative space-y-24">
        {/* Part 1: Intro & Headline */}
        <div className="max-w-4xl mx-auto text-center space-y-12">
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="space-y-4"
          >
            <div className="inline-block">
              <span className="bg-yellow-300 px-6 py-2 text-xl md:text-3xl font-black tracking-tight shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]">
                What if video creation was as easy as typing what you want?
              </span>
            </div>
            <br />
            <div className="inline-block">
              <span className="bg-yellow-300 px-6 py-2 text-xl md:text-3xl font-black tracking-tight shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]">
                Because that’s exactly what we’ve built to do.
              </span>
            </div>
          </motion.div>

          <motion.div 
            initial={{ opacity: 0, scale: 0.9 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            className="space-y-4"
          >
            <p className="text-sm font-black uppercase tracking-[0.4em] text-blue-600">Introducing...</p>
            <h2 className="text-5xl md:text-8xl font-black tracking-tighter flex items-center justify-center gap-4 drop-shadow-sm">
              <span className="text-6xl md:text-8xl">🎬</span> 
              <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-600">StudioCut</span>
            </h2>
          </motion.div>

          <div className="space-y-10">
            <h3 className="text-2xl md:text-4xl font-black leading-tight tracking-tight max-w-3xl mx-auto text-gray-800">
              Your Personal AI-Powered Video Production Team That Turns Your Idea, Script, Product Info, Blog, Or Prompt Into a Fully Edited, Ready-To-Post Cinematic Video 
              <span className="block mt-6 text-blue-600 underline decoration-blue-200 decoration-8 underline-offset-8">— All Under 60 Seconds!</span>
            </h3>

            <div className="bg-white/60 backdrop-blur-sm border border-blue-100 p-8 rounded-[2.5rem] shadow-xl shadow-blue-900/5">
              <p className="text-xl font-black italic text-gray-500 mb-8 tracking-tight">StudioCut gives you a complete video with:</p>
              <div className="flex flex-wrap justify-center gap-x-8 gap-y-4 text-lg font-bold text-gray-700">
                {["Text overlays", "Transitions", "Animations", "Captions", "Sound", "Voiceover", "Scene-by-scene structure"].map((item, i) => (
                  <div key={i} className="flex items-center gap-3 group">
                    <div className="bg-blue-600 p-1 rounded-full group-hover:scale-110 transition-transform">
                      <Check className="text-white" size={16} strokeWidth={4} />
                    </div>
                    {item}
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="grid md:grid-cols-2 gap-8 pt-8">
            <div className="bg-red-50 border-2 border-red-100 p-8 rounded-[2.5rem] space-y-6">
              <h4 className="text-2xl font-black flex items-center justify-center gap-3 text-red-900">
                <span className="text-3xl">🚫</span> You Don’t Need To:
              </h4>
              <div className="grid gap-4 text-left max-w-xs mx-auto">
                {[
                  { text: "Record yourself", icon: <X className="text-red-600" size={20} strokeWidth={4} /> },
                  { text: "Learn editing tools", icon: <X className="text-red-600" size={20} strokeWidth={4} /> },
                  { text: "Hire freelancers", icon: <X className="text-red-600" size={20} strokeWidth={4} /> },
                  { text: "Spend hours tweaking videos", icon: <X className="text-red-600" size={20} strokeWidth={4} /> }
                ].map((item, i) => (
                  <div key={i} className="flex items-center gap-3 font-bold text-gray-700">
                    <div className="bg-white p-1 rounded-lg shadow-sm">{item.icon}</div>
                    {item.text}
                  </div>
                ))}
              </div>
            </div>

            <div className="bg-green-50 border-2 border-green-300 p-8 rounded-[2.5rem] space-y-6 flex flex-col justify-center">
              <h4 className="text-2xl md:text-3xl font-black flex items-center justify-center gap-3 text-green-900">
                <div className="bg-green-500 p-1.5 rounded-xl shadow-lg shadow-green-500/20">
                  <Check className="text-white" size={24} strokeWidth={4} />
                </div>
                <span>Just Type…Click…Done!</span>
              </h4>
              <div className="space-y-4">
                <p className="text-lg md:text-xl font-black text-gray-800 leading-tight">
                  From Idea → Script → Scenes → Visuals → Voice → Final Edited Video
                </p>
                <p className="text-base font-bold italic text-gray-500">
                  Everything is handled automatically… like a real director running your production
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Product Mockup Image */}
        <div className="max-w-5xl mx-auto px-4">
          <motion.div 
            whileHover={{ scale: 1.01 }}
            className="relative aspect-video  group"
          >
            <img 
              src="https://harshaljadhav.com/wp-content/uploads/2026/04/StudioCut-Mockup-Box.webp" 
              alt="StudioCut Product Mockup" 
              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
              referrerPolicy="no-referrer"
            />
            
          </motion.div>
        </div>

        {/* Part 2: In Simple Terms */}
        <div className="max-w-6xl mx-auto px-4 grid md:grid-cols-2 gap-16 items-center">
          <div className="space-y-10">
            <div className="inline-block bg-blue-600 text-white px-6 py-2 rounded-full text-sm font-black uppercase tracking-widest">The Workflow</div>
            <h3 className="text-4xl md:text-5xl font-black tracking-tight text-gray-900">In Simple Terms…</h3>
            <div className="space-y-8">
              <p className="text-xl font-bold text-gray-600">You type what kind of video you want…</p>
              <div className="grid gap-4">
                {[
                  "A promo video",
                  "A social media ad",
                  "A product showcase",
                  "A storytelling video"
                ].map((item, i) => (
                  <motion.div 
                    key={i} 
                    whileHover={{ x: 10 }}
                    className="flex items-center gap-4 p-4 bg-white border border-gray-100 rounded-2xl shadow-sm hover:shadow-md transition-all"
                  >
                    <span className="text-2xl">👉</span>
                    <span className="text-xl font-black text-gray-800">{item}</span>
                  </motion.div>
                ))}
              </div>
              <p className="text-xl font-bold text-gray-600">
                And <span className="font-black text-blue-600 underline decoration-blue-200 decoration-4 underline-offset-4">StudioCut</span> does everything for you — automatically.
              </p>
            </div>
          </div>
          <div className=" bg-white rounded-[3rem] shadow-2xl border-8 border-gray-50 flex items-center justify-center overflow-hidden relative group">
            
              <img 
                src="https://harshaljadhav.com/wp-content/uploads/2026/04/studiocut_section_6_1.webp" 
                alt="Fighting the Process" 
                className="w-full h-full object-cover"
                referrerPolicy="no-referrer"
              />
            

          </div>
        </div>

        {/* Part 3: Behind The Scenes */}
        <div className="max-w-6xl mx-auto px-4 grid md:grid-cols-2 gap-16 items-center">
          <div className="bg-white rounded-[3rem] shadow-2xl border-8 border-gray-50 flex items-center justify-center overflow-hidden order-2 md:order-1 relative group">
            <img 
                src="https://harshaljadhav.com/wp-content/uploads/2026/04/studiocut_section_6_2.webp" 
                alt="Fighting the Process" 
                className="w-full h-full object-cover"
                referrerPolicy="no-referrer"
              />
          </div>
          <div className="space-y-10 order-1 md:order-2">
            <div className="inline-block bg-indigo-600 text-white px-6 py-2 rounded-full text-sm font-black uppercase tracking-widest">Automation</div>
            <h3 className="text-4xl md:text-5xl font-black tracking-tight flex items-center gap-4 text-gray-900">
              <span className="text-5xl">🎥</span> Behind The Scenes
            </h3>
            <div className="space-y-8">
              <p className="text-xl font-bold text-gray-600">Instead of giving you raw clips like other tools…</p>
              <div className="bg-gray-900 p-8 rounded-[2.5rem] shadow-2xl">
                <p className="text-lg font-black text-blue-400 mb-6 uppercase tracking-widest">StudioCut:</p>
                <ul className="space-y-4">
                  {[
                    "Plans your video like a real director",
                    "Builds a complete storyboard",
                    "Creates each scene with precision",
                    "Generates all visuals and assets",
                    "Adds text, transitions, animations, captions & sound",
                    "Edits everything together into one seamless video",
                    "And delivers a fully finished video — not something you need to fix later"
                  ].map((item, i) => (
                    <li key={i} className="flex items-start gap-4 text-base font-bold text-gray-300">
                      <div className="mt-1.5 w-2 h-2 bg-blue-500 rounded-full shrink-0"></div>
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>

        {/* Part 4: What Makes It Different */}
        <div className="max-w-6xl mx-auto px-4 grid md:grid-cols-2 gap-16 items-center">
          <div className="space-y-10">
            <div className="inline-block bg-orange-600 text-white px-6 py-2 rounded-full text-sm font-black uppercase tracking-widest">The Edge</div>
            <h3 className="text-4xl md:text-5xl font-black tracking-tight flex items-center gap-4 text-gray-900">
              <span className="text-5xl">🎯</span> What Makes It Different
            </h3>
            <div className="space-y-8">
              <p className="text-xl font-bold text-gray-600">Most tools stop at video generation…</p>
              <div className="space-y-6">
                <div className="p-8 bg-white border-2 border-gray-100 rounded-[2.5rem] shadow-xl hover:border-blue-200 transition-colors">
                  <div className="flex items-center gap-4 text-xl font-black text-gray-900 mb-3">
                    <span className="text-2xl">👉</span> Scene-level customization
                  </div>
                  <p className="text-lg font-bold text-gray-500 ml-10">Adjust messaging, visuals, and flow for each scene with zero effort.</p>
                </div>
                <div className="p-8 bg-white border-2 border-gray-100 rounded-[2.5rem] shadow-xl hover:border-blue-200 transition-colors">
                  <div className="flex items-center gap-4 text-xl font-black text-gray-900">
                    <span className="text-2xl">👉</span> Zero editing software required
                  </div>
                </div>
              </div>
              <div className="pt-6 space-y-2">
                <p className="text-lg font-black text-gray-400 italic">That means:</p>
                <p className="text-3xl md:text-4xl font-black text-gray-900 leading-tight">
                  You get control like a pro… <br />
                  <span className="text-blue-600">without the complexity.</span>
                </p>
              </div>
            </div>
          </div>
          <div className=" bg-white rounded-[3rem] shadow-2xl border-8 border-gray-50 flex items-center justify-center overflow-hidden relative group">
            <img 
                src="https://harshaljadhav.com/wp-content/uploads/2026/04/studiocut_section_6_3.webp" 
                alt="Fighting the Process" 
                className="w-full h-full object-cover"
                referrerPolicy="no-referrer"
              />
          </div>
        </div>

        {/* Part 5: Why Does This Matter */}
        <div className="max-w-5xl mx-auto px-4 pt-12">
          <motion.div 
            initial={{ opacity: 0, y: 40 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center space-y-12"
          >
            <h3 className="text-3xl md:text-5xl font-black tracking-tight text-gray-900">Why Does This Matter For Your Audience?</h3>
            <div className="relative p-12 md:p-20 border-4 border-dashed border-red-500 bg-white rounded-[3rem] shadow-2xl overflow-hidden group">
              <div className="absolute top-0 right-0 w-64 h-64 bg-red-50 rounded-full blur-3xl -mr-32 -mt-32 opacity-50"></div>
              <div className="absolute bottom-0 left-0 w-64 h-64 bg-blue-50 rounded-full blur-3xl -ml-32 -mb-32 opacity-50"></div>
              
              <div className="relative space-y-8">
                <p className="text-2xl md:text-3xl font-black text-gray-800 leading-tight">People don’t want tools that create more work…</p>
                <div className="inline-block bg-gray-900 text-white px-8 py-4 rounded-2xl transform -rotate-1">
                  <p className="text-2xl md:text-4xl font-black">They want results.</p>
                </div>
                <div className="space-y-4 pt-8">
                  <p className="text-xl md:text-2xl font-bold italic text-gray-500">StudioCut gives them exactly that —</p>
                  <p className="text-3xl md:text-5xl font-black tracking-tighter text-blue-600">
                    A done-for-you video creation experience they can use instantly.
                  </p>
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}

function Section7() {
  return (
    <section id="Section7" className="relative -mx-4 px-6 py-24 md:py-32 bg-gradient-to-br from-blue-700 via-indigo-900 to-slate-900 text-white rounded-[3rem] md:rounded-[5rem] overflow-hidden shadow-3xl scroll-mt-20">
      {/* Decorative background elements */}
      <div className="absolute top-0 left-0 w-full h-full opacity-20 pointer-events-none">
        <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-blue-500 rounded-full blur-[120px]"></div>
        <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-indigo-500 rounded-full blur-[120px]"></div>
      </div>

      <div className="relative max-w-6xl mx-auto space-y-20">
        <div className="text-center space-y-6">
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md border border-white/20 px-4 py-2 rounded-full text-xs font-black uppercase tracking-widest text-blue-300"
          >
            <span className="w-2 h-2 bg-blue-400 rounded-full animate-pulse"></span>
            The Comparison
          </motion.div>
          <h2 className="text-4xl md:text-6xl font-black tracking-tight leading-[1.1]">
            StudioCut Is A <span className="text-blue-400">Clear Winner</span> <br className="hidden md:block" /> Compared To Other Video Tools
          </h2>
        </div>

        <div className="space-y-8">
          {/* Header Row */}
          <div className="bg-white/5 backdrop-blur-md border border-white/10 rounded-3xl p-6 md:p-10">
            <div className="grid grid-cols-[1fr_auto_1fr] items-center text-center gap-4 md:gap-8">
              <div className="space-y-2">
                <div className="text-sm font-black uppercase tracking-widest text-white/40">The Old Way</div>
                <div className="text-xl md:text-3xl font-black text-red-400">Other Video Tools</div>
              </div>
              <div className="flex flex-col items-center gap-2">
                <div className="w-12 h-12 rounded-full bg-white/10 border border-white/20 flex items-center justify-center italic font-black text-xl text-white/60">Vs</div>
              </div>
              <div className="space-y-2">
                <div className="text-sm font-black uppercase tracking-widest text-blue-300">The New Way</div>
                <div className="text-xl md:text-3xl font-black text-blue-400">StudioCut</div>
              </div>
            </div>
          </div>

          {/* Comparison Rows */}
          <div className="grid gap-4">
            {[
              {
                left: "No Scene Level Customization Possible - Zero Control On The Output Video Quality",
                right: "Scene Level Customization Possible – With Complete Control On The Output Video Quality",
                iconLeft: <XCircle className="text-red-500/50" size={24} />,
                iconRight: <Check className="text-green-400" size={24} strokeWidth={4} />
              },
              {
                left: "From Idea → Prompt → Video",
                right: "From Idea → Script → Scenes → Visuals → Voice → Final Edited Video",
                iconLeft: <XCircle className="text-red-500/50" size={24} />,
                iconRight: <Check className="text-green-400" size={24} strokeWidth={4} />
              }
            ].map((row, i) => (
              <motion.div 
                key={i}
                initial={{ opacity: 0, x: i % 2 === 0 ? -20 : 20 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                className="grid grid-cols-[1fr_auto_1fr] items-center bg-white/5 border border-white/10 rounded-2xl overflow-hidden group hover:bg-white/10 transition-all"
              >
                <div className="p-6 md:p-8 text-center flex flex-col items-center gap-3">
                  <div className="opacity-50 group-hover:opacity-100 transition-opacity">{row.iconLeft}</div>
                  <div className="text-sm md:text-lg font-bold text-gray-400 leading-tight">{row.left}</div>
                </div>
                <div className="w-px h-full bg-white/10"></div>
                <div className="p-6 md:p-8 text-center flex flex-col items-center gap-3 bg-blue-500/5">
                  <div className="bg-green-400/20 p-1 rounded-full">{row.iconRight}</div>
                  <div className="text-sm md:text-lg font-black text-white leading-tight">{row.right}</div>
                </div>
              </motion.div>
            ))}
          </div>

          {/* Video Samples Row */}
          <div className="pt-12">
            <div className="grid md:grid-cols-2 gap-8 md:gap-12">
              {/* Other Tools Sample */}
              <div className="space-y-4">
                <div className="text-center text-sm font-black uppercase tracking-widest text-red-400/60">Other Tools - Video Sample</div>
                <div className="aspect-[3/4] bg-gray-900 rounded-[2.5rem] border-4 border-white/10 overflow-hidden relative group">
                  <img 
                    src="https://picsum.photos/seed/badvideo/600/800?grayscale" 
                    alt="Other Tools Sample" 
                    className="w-full h-full object-cover opacity-40 group-hover:opacity-60 transition-opacity"
                    referrerPolicy="no-referrer"
                  />
                  <div className="absolute inset-0 flex items-center justify-center">
                    <div className="text-center space-y-2">
                      <XCircle className="text-red-500 mx-auto" size={48} />
                      <div className="text-xs font-black text-red-500 uppercase tracking-widest bg-white/10 backdrop-blur-md px-4 py-2 rounded-full">Low Quality / Generic</div>
                    </div>
                  </div>
                </div>
              </div>

              {/* AI Video Director Sample */}
              <div className="space-y-4">
                <div className="text-center text-sm font-black uppercase tracking-widest text-blue-400">StudioCut - Video Sample</div>
                <div className="aspect-[3/4] bg-gray-900 rounded-[2.5rem] border-4 border-blue-500/50 overflow-hidden relative group shadow-2xl shadow-blue-500/20">
                  <img 
                    src="https://picsum.photos/seed/goodvideo/600/800" 
                    alt="AI Video Director Sample" 
                    className="w-full h-full object-cover opacity-60 group-hover:opacity-80 transition-opacity"
                    referrerPolicy="no-referrer"
                  />
                  <div className="absolute inset-0 flex items-center justify-center">
                    <div className="text-center space-y-4">
                      <motion.div 
                        animate={{ scale: [1, 1.1, 1] }}
                        transition={{ duration: 2, repeat: Infinity }}
                        className="w-20 h-20 bg-blue-600 rounded-full flex items-center justify-center shadow-2xl shadow-blue-500/50 mx-auto"
                      >
                        <Play className="text-white fill-white ml-1" size={32} />
                      </motion.div>
                      <div className="text-xs font-black text-white uppercase tracking-widest bg-blue-600 px-4 py-2 rounded-full shadow-lg">Cinematic / High Quality</div>
                    </div>
                  </div>
                  <div className="absolute top-6 right-6">
                    <Sparkles className="text-blue-400 animate-pulse" size={24} />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}


function Section8() {
  return (
    <section id="Section8" className="relative -mx-4 px-4 py-16 md:py-24 rounded-[3rem] md:rounded-[5rem] bg-gradient-to-b from-blue-50 via-white to-white overflow-hidden scroll-mt-20">
      <div className="relative max-w-7xl mx-auto space-y-16">
        <div className="text-center max-w-4xl mx-auto">
          <h2 className="text-3xl md:text-5xl font-black tracking-tight leading-tight text-gray-900">
            Take A Look At These Studio-Quaity Videos Generated <br className="hidden md:block" /> Using StudioCut – In Under 60 Seconds!
          </h2>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-12">
          {[...Array(8)].map((_, i) => (
            <div key={i} className="space-y-3 group">
              <div className="text-center">
                <p className="text-sm font-black text-gray-400 uppercase tracking-widest">Title</p>
              </div>
              <div className="aspect-[9/16] bg-gray-100 rounded-[2.5rem] overflow-hidden border-4 border-white shadow-lg group-hover:shadow-2xl transition-all relative">
                <img 
                  src={`https://picsum.photos/seed/sample-vid-${i}/450/800`} 
                  alt="Video Preview" 
                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                  referrerPolicy="no-referrer"
                />
                <div className="absolute inset-0 bg-black/10 group-hover:bg-black/0 transition-colors"></div>
                <div className="absolute inset-0 flex items-center justify-center">
                  <motion.div 
                    whileHover={{ scale: 1.1 }}
                    className="w-16 h-16 bg-white/20 backdrop-blur-md rounded-full flex items-center justify-center border border-white/40 shadow-xl"
                  >
                    <Play className="text-white fill-white ml-1" size={28} />
                  </motion.div>
                </div>
                <div className="absolute bottom-6 left-0 right-0 text-center">
                  <div className="inline-block bg-blue-600/90 backdrop-blur-sm text-white text-[10px] font-black uppercase tracking-widest px-4 py-1.5 rounded-full shadow-lg opacity-0 group-hover:opacity-100 transition-opacity">
                    Watch Sample
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Section9() {
  return (
    <section id="Section9" className="relative -mx-4 px-4 py-24 md:py-32 rounded-[3rem] md:rounded-[5rem] bg-slate-950 text-white overflow-hidden scroll-mt-20">
      {/* Background Glows */}
      <div className="absolute top-0 left-0 w-full h-full opacity-30 pointer-events-none">
        <div className="absolute top-[-20%] left-[-10%] w-[60%] h-[60%] bg-blue-600 rounded-full blur-[150px]"></div>
        <div className="absolute bottom-[-20%] right-[-10%] w-[60%] h-[60%] bg-indigo-600 rounded-full blur-[150px]"></div>
      </div>

      <div className="relative max-w-6xl mx-auto space-y-16">
        <div className="text-center space-y-6">
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="inline-flex items-center gap-2 bg-blue-500/20 backdrop-blur-md border border-blue-500/30 px-4 py-2 rounded-full text-xs font-black uppercase tracking-widest text-blue-400"
          >
            <Play size={14} className="fill-blue-400" />
            Product Demo
          </motion.div>
          <h2 className="text-4xl md:text-6xl font-black tracking-tight leading-tight">
            Watch StudioCut In Action <br className="hidden md:block" /> 
            <span className="text-blue-500">⇒ Watch Demo Video</span>
          </h2>
        </div>

        <div className="max-w-5xl mx-auto">
          <motion.div 
            initial={{ opacity: 0, scale: 0.95 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            className="relative aspect-video bg-black rounded-[2.5rem] md:rounded-[4rem] shadow-[0_0_50px_rgba(59,130,246,0.3)] border-8 border-white/5 overflow-hidden group"
          >
            <div className="absolute inset-0 bg-gradient-to-br from-blue-600/10 to-indigo-600/10"></div>
            <div className="absolute inset-0 flex items-center justify-center">
              <div className="text-center space-y-4">
                <motion.div 
                  whileHover={{ scale: 1.1 }}
                  whileTap={{ scale: 0.95 }}
                  className="w-24 h-24 md:w-32 md:h-32 bg-blue-600 rounded-full flex items-center justify-center shadow-2xl shadow-blue-500/50 cursor-pointer group-hover:bg-blue-500 transition-colors"
                >
                  <Play className="text-white fill-white ml-2" size={48} />
                </motion.div>
                <p className="text-2xl md:text-4xl font-black uppercase tracking-tighter text-white/40 select-none">
                  DEMO VIDEO
                </p>
              </div>
            </div>
            
            {/* Corner Accents */}
            <div className="absolute top-8 left-8 w-12 h-12 border-t-4 border-l-4 border-blue-500/30 rounded-tl-2xl"></div>
            <div className="absolute bottom-8 right-8 w-12 h-12 border-b-4 border-r-4 border-blue-500/30 rounded-br-2xl"></div>
          </motion.div>
        </div>

        <div className="text-center">
          <p className="text-gray-400 font-bold text-lg italic">
            See how easy it is to turn a simple idea into a cinematic masterpiece...
          </p>
        </div>
      </div>
    </section>
  );
}

function Section3Steps() {
  const steps = [
    {
      step: "Step 1",
      description: "Log in & give text AI prompt, describe your idea, share video script, add blog post, drop product URL or upload your media assets.",
      image: "https://picsum.photos/seed/step1/800/600",
      gradient: "from-gray-200 to-gray-300"
    },
    {
      step: "Step 2",
      description: "StudioCut AIEdit tech plans the storyboard, builds each scene, adds text, animations, transitions, voiceover, & background music.",
      image: "https://picsum.photos/seed/step2/800/600",
      gradient: "from-gray-400 to-green-400"
    },
    {
      step: "Step 3",
      description: "StudioCut creates ready-to-post cinematic video. You can customize every scene exactly how you want or download instantly or share it in 1-click.",
      image: "https://picsum.photos/seed/step3/800/600",
      gradient: "from-green-500 to-green-700"
    }
  ];

  return (
    <section id="Section3Steps" className="py-24 bg-white scroll-mt-20">
      <div className="max-w-6xl mx-auto px-4 space-y-20">
        <div className="text-center space-y-4">
          <motion.h3 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-2xl font-black text-gray-900"
          >
            The Best Part…
          </motion.h3>
          <motion.h2 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.1 }}
            className="text-4xl md:text-6xl font-black leading-tight tracking-tight"
          >
            All These Videos Were Created In Just 3 Simple Steps!
          </motion.h2>
        </div>

        <div className="grid md:grid-cols-3 gap-12">
          {steps.map((s, i) => (
            <motion.div 
              key={i}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.1 }}
              className="space-y-8 text-center"
            >
              <h3 className="text-3xl font-black text-gray-900">{s.step}</h3>
              <div className={`aspect-[4/3] rounded-[3rem] p-[12px] bg-gradient-to-br ${s.gradient} shadow-xl transition-all duration-500 group`}>
                <div className="w-full h-full rounded-[2.2rem] overflow-hidden bg-white">
                  <img 
                    src={s.image} 
                    alt={s.step} 
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                    referrerPolicy="no-referrer"
                  />
                </div>
              </div>
              <p className="text-lg font-bold text-gray-600 leading-relaxed px-4">
                {s.description}
              </p>
            </motion.div>
          ))}
        </div>

        <motion.div 
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="text-center space-y-8 pt-12"
        >
          <h2 className="text-5xl md:text-7xl font-black tracking-tighter">That’s It!</h2>
          <p className="text-xl md:text-2xl font-bold text-gray-600 max-w-4xl mx-auto leading-relaxed">
            Go from idea to a fully edited video in minutes — with complete scene-level control, without editing skills, camera, or complicated tools.
          </p>
        </motion.div>
      </div>
    </section>
  );
}

function VideoCarouselSection() {
  const carousel1 = [
    { title: "🎓 Educational Videos", desc: "Turn complex data into engaging videos that educate and build authority." },
    { title: "🎭 Storytelling Videos", desc: "Create compelling stories that connect emotionally and keep viewers hooked." },
    { title: "🛍️ Product Demo Videos", desc: "Showcase products clearly to boost trust, engagement, and conversions." },
    { title: "🛍️ Affiliate Product Review Videos", desc: "AI delivers fully-edited affiliate product review videos that boost trust, engagement, and sales." },
    { title: "🧑🏫 Tutorial & How-To Videos", desc: "Create step-by-step videos that teach and deliver real value instantly." },
    { title: "💡 Explainer Videos", desc: "Simplify complex ideas into easy-to-understand, high-impact videos." },
    { title: "🔢 Listicle Videos", desc: "Create “Top 5 / Top 10” style videos that drive clicks and retention." },
  ];

  const carousel2 = [
    { title: "📰 News Videos", desc: "Turn trending topics into quick videos to stay relevant and visible." },
    { title: "⚖️ Comparison Videos", desc: "Help viewers make decisions by comparing options visually." },
    { title: "📣 Promotional Ad Videos", desc: "Create high-converting ads to drive traffic, leads, and sales." },
    { title: "💪 Motivational Videos", desc: "Create content that inspires action and builds strong audience connection." },
    { title: "🎥 Mini Documentary Videos", desc: "Tell deeper, cinematic-style stories that engage and inform." },
    { title: "🎬 Behind The Scene Videos", desc: "Give audiences an inside look to build authenticity and trust." },
    { title: "⚡ Short-Form Social Media Videos", desc: "Create viral-ready videos for Reels, Shorts, and TikTok." },
  ];

  const videoUrl = "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm";

  return (
    <section id="VideoCarousel" className="py-24 bg-slate-50 overflow-hidden scroll-mt-20">
      <div className="max-w-7xl mx-auto px-4 mb-16 text-center">
        <motion.h2 
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="text-3xl md:text-5xl font-black leading-tight tracking-tight max-w-5xl mx-auto"
        >
          With StudioCut In Your Arsenal, Users Can Create <span className="text-blue-600">Any Type Of Videos</span> For Any Goals… In Minutes!
        </motion.h2>
      </div>

      <div className="space-y-12">
        {/* Carousel 1: Rotating Right */}
        <div className="relative flex overflow-hidden">
          <motion.div 
            animate={{ x: [0, -1750] }}
            transition={{ 
              duration: 40, 
              repeat: Infinity, 
              ease: "linear" 
            }}
            className="flex gap-6 whitespace-nowrap py-10"
          >
            {[...carousel1, ...carousel1].map((item, i) => (
              <div key={i} className="w-[300px] flex-shrink-0 space-y-4 bg-white p-6 rounded-[2.5rem] shadow-xl border border-gray-100">
                <div className="aspect-[9/16] bg-black rounded-2xl overflow-hidden relative">
                  <video 
                    src={videoUrl} 
                    autoPlay 
                    loop 
                    muted 
                    playsInline 
                    className="w-full h-full object-cover"
                  />
                </div>
                <div className="space-y-2 text-left whitespace-normal">
                  <h3 className="text-lg font-black text-gray-900">{item.title}</h3>
                  <p className="text-sm font-bold text-gray-500 leading-relaxed">{item.desc}</p>
                </div>
              </div>
            ))}
          </motion.div>
        </div>

        {/* Carousel 2: Rotating Left */}
        <div className="relative flex overflow-hidden">
          <motion.div 
            animate={{ x: [-1750, 0] }}
            transition={{ 
              duration: 40, 
              repeat: Infinity, 
              ease: "linear" 
            }}
            className="flex gap-6 whitespace-nowrap py-10"
          >
            {[...carousel2, ...carousel2].map((item, i) => (
              <div key={i} className="w-[300px] flex-shrink-0 space-y-4 bg-white p-6 rounded-[2.5rem] shadow-xl border border-gray-100">
                <div className="aspect-[9/16] bg-black rounded-2xl overflow-hidden relative">
                  <video 
                    src={videoUrl} 
                    autoPlay 
                    loop 
                    muted 
                    playsInline 
                    className="w-full h-full object-cover"
                  />
                </div>
                <div className="space-y-2 text-left whitespace-normal">
                  <h3 className="text-lg font-black text-gray-900">{item.title}</h3>
                  <p className="text-sm font-bold text-gray-500 leading-relaxed">{item.desc}</p>
                </div>
              </div>
            ))}
          </motion.div>
        </div>
      </div>
    </section>
  );
}

function BestPartSection() {
  return (
    <section id="BestPart" className="py-24 bg-white scroll-mt-20">
      <div className="max-w-6xl mx-auto px-4 space-y-24">
        {/* Header */}
        <div className="text-center space-y-8">
          <motion.h3 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-2xl font-black text-gray-900"
          >
            The Best Part…
          </motion.h3>
          <motion.h2 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.1 }}
            className="text-3xl md:text-5xl font-black leading-tight tracking-tight max-w-5xl mx-auto"
          >
            With StudioCut Commercial License – Users Can <span className="text-blue-600">Create & Sell These Videos</span>, Offer Video Creation Services & Charge Up To <span className="text-green-600">$2000 Per Video/ Customer!</span>
          </motion.h2>
          <motion.p 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.2 }}
            className="text-xl md:text-2xl font-bold text-gray-600 italic"
          >
            The Video Creation Services Market Is MASSIVE & Still Growing Fast!
          </motion.p>
        </div>

        {/* Content Blocks */}
        <div className="space-y-32">
          {/* Block 1 */}
          <div className="grid md:grid-cols-2 gap-16 items-center">
            <motion.div 
              initial={{ opacity: 0, x: -30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              className="space-y-8"
            >
              <h3 className="text-3xl font-black tracking-tight flex items-center gap-3">
                💰 A Multi-Billion Dollar Industry
              </h3>
              <ul className="space-y-4">
                {[
                  "The global video production services market is already worth $38 Billion+ today",
                  "It’s projected to grow to $100+ Billion by 2035",
                  "Growing steadily at 9% CAGR year after year"
                ].map((item, i) => (
                  <li key={i} className="flex items-start gap-3 text-lg font-bold text-gray-600">
                    <span className="text-blue-600 mt-1.5">•</span>
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </motion.div>
            <motion.div 
              initial={{ opacity: 0, x: 30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              className="rounded-[3rem] overflow-hidden shadow-2xl border-4 border-gray-100 aspect-video"
            >
              <img 
                src="https://picsum.photos/seed/market1/800/600" 
                alt="Market Growth" 
                className="w-full h-full object-cover"
                referrerPolicy="no-referrer"
              />
            </motion.div>
          </div>

          {/* Block 2 */}
          <div className="grid md:grid-cols-2 gap-16 items-center">
            <motion.div 
              initial={{ opacity: 0, x: -30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              className="rounded-[3rem] overflow-hidden shadow-2xl border-4 border-gray-100 aspect-video md:order-1"
            >
              <img 
                src="https://picsum.photos/seed/market2/800/600" 
                alt="Why Market is Growing" 
                className="w-full h-full object-cover"
                referrerPolicy="no-referrer"
              />
            </motion.div>
            <motion.div 
              initial={{ opacity: 0, x: 30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              className="space-y-8 md:order-2"
            >
              <h3 className="text-3xl font-black tracking-tight flex items-center gap-3">
                📊 Why Market Is Growing So Fast?
              </h3>
              <div className="space-y-6">
                <p className="text-xl font-bold text-gray-900">Because businesses are spending heavily on:</p>
                <ul className="grid grid-cols-1 gap-4">
                  {[
                    "Product videos",
                    "Ads & promotional content",
                    "Social media videos",
                    "Training & explainer videos",
                    "Brand storytelling"
                  ].map((item, i) => (
                    <li key={i} className="flex items-center gap-3 text-lg font-bold text-gray-600">
                      <span className="w-2 h-2 bg-blue-600 rounded-full"></span>
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
                <p className="text-lg font-black text-blue-600">And this demand is coming from every industry</p>
              </div>
            </motion.div>
          </div>

          {/* Block 3 */}
          <div className="grid md:grid-cols-2 gap-16 items-center">
            <motion.div 
              initial={{ opacity: 0, x: -30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              className="space-y-8"
            >
              <h3 className="text-3xl font-black tracking-tight flex items-center gap-3">
                ⚠️ Here’s The Real Opportunity
              </h3>
              <div className="space-y-6">
                <div className="space-y-2">
                  <p className="text-xl font-bold text-gray-900">Businesses don’t just want video…</p>
                  <p className="text-2xl font-black text-blue-600 italic">They NEED it — consistently</p>
                </div>
                <p className="text-xl font-bold text-gray-900">But most:</p>
                <ul className="space-y-4">
                  {[
                    "Don’t have in-house teams",
                    "Don’t want to hire expensive agencies",
                    "Don’t want long turnaround times"
                  ].map((item, i) => (
                    <li key={i} className="flex items-center gap-3 text-lg font-bold text-gray-600">
                      <span className="w-2 h-2 bg-red-500 rounded-full"></span>
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </motion.div>
            <motion.div 
              initial={{ opacity: 0, x: 30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              className="rounded-[3rem] overflow-hidden shadow-2xl border-4 border-gray-100 aspect-video"
            >
              <img 
                src="https://picsum.photos/seed/market3/800/600" 
                alt="Real Opportunity" 
                className="w-full h-full object-cover"
                referrerPolicy="no-referrer"
              />
            </motion.div>
          </div>
        </div>

        {/* Footer Summary */}
        <motion.div 
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="bg-blue-50 rounded-[3rem] p-12 text-center space-y-8 border-2 border-blue-100"
        >
          <h3 className="text-4xl font-black tracking-tight">Which Means…</h3>
          <ul className="space-y-4 max-w-3xl mx-auto">
            {[
              "There is a high demand for video services",
              "Limited supply of fast, affordable video creators",
              "Anyone who can create videos…",
              "Has access to a massive, $100+ Bn market"
            ].map((item, i) => (
              <li key={i} className="text-xl md:text-2xl font-black text-gray-900 flex items-center justify-center gap-3">
                <span className="text-blue-600">-</span>
                <span>{item}</span>
              </li>
            ))}
          </ul>
        </motion.div>
      </div>
    </section>
  );
}

function FreelancersSection() {
  return (
    <section id="Freelancers" className="relative -mx-4 px-4 py-24 md:py-32 rounded-[3rem] md:rounded-[5rem] bg-gradient-to-br from-blue-600 via-blue-700 to-indigo-800 text-white overflow-hidden scroll-mt-20">
      {/* Background Decorative Elements */}
      <div className="absolute inset-0 pointer-events-none overflow-hidden opacity-20">
        <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-white rounded-full blur-[120px]"></div>
        <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-blue-400 rounded-full blur-[120px]"></div>
      </div>

      <div className="relative max-w-6xl mx-auto space-y-16">
        <div className="text-center space-y-6">
          <motion.h3 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-2xl font-black text-blue-200"
          >
            Don’t Take Our Word For It…
          </motion.h3>
          <motion.h2 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.1 }}
            className="text-3xl md:text-5xl font-black leading-tight tracking-tight max-w-5xl mx-auto"
          >
            Freelancers Are Already Making 5-Figure Income By Creating Videos For Clients!
          </motion.h2>
        </div>

        <motion.div 
          initial={{ opacity: 0, scale: 0.95 }}
          whileInView={{ opacity: 1, scale: 1 }}
          viewport={{ once: true }}
          transition={{ delay: 0.2 }}
          className="max-w-5xl mx-auto"
        >
          <div className=" aspect-[9/16]">
            <img 
              src="https://harshaljadhav.com/wp-content/uploads/2026/04/StudioCut-Freelancers.webp" 
              alt="Freelancers Income Proof" 
              className="w-full h-full object-cover"
              referrerPolicy="no-referrer"
            />
          </div>
        </motion.div>
      </div>
    </section>
  );
}

function Testimonial2() {
  const testimonials = [
    {
      title: "“I Started Offering Video Services Without Hiring Anyone…”",
      quote: "“I run a small agency, and video was always something clients asked for, but I didn’t have a team for it. With StudioCut, I started offering video services almost immediately. I didn’t need to hire editors or learn anything complicated — and now it’s become an additional revenue stream for my business.”",
      author: "Daniel Carter",
      role: "Digital Marketing Consultant",
      image: "https://picsum.photos/seed/daniel/200/200"
    },
    {
      title: "“This Turned Into A New Monthly Income Stream…”",
      quote: "“I originally got StudioCut just to create content for myself, but then I realized I could use it for clients too. I’ve started charging for simple promo and social videos, and it’s now bringing in consistent monthly income without adding extra workload.”",
      author: "Michael Reynolds",
      role: "Freelance Marketer",
      image: "https://picsum.photos/seed/michael/200/200"
    },
    {
      title: "“Clients Think I Have A Full Video Team…”",
      quote: "“What’s interesting is how clients perceive the output. The videos look polished enough that they assume I have a full team behind me. In reality, I’m just using StudioCut. It’s helped me deliver faster and take on more projects without stress.”",
      author: "Christopher Hayes",
      role: "Agency Owner",
      image: "https://picsum.photos/seed/chris/200/200"
    },
    {
      title: "“I Was Finally Able To Sell Video As A Service…”",
      quote: "“I always wanted to offer video services, but editing was a big barrier for me. StudioCut removed that completely. Now I can create and deliver videos quickly, and clients are happy with the results. It’s opened up a service I couldn’t offer before.”",
      author: "Jonathan Miller",
      role: "Business Consultant",
      image: "https://picsum.photos/seed/jonathan/200/200"
    }
  ];

  return (
    <section id="Testimonial2" className="py-24 md:py-32 bg-white scroll-mt-20">
      <div className="max-w-6xl mx-auto px-4 space-y-20">
        <div className="text-center space-y-4">
          <motion.h2 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-3xl md:text-5xl font-black leading-tight tracking-tight text-gray-900 max-w-4xl mx-auto"
          >
            Early Beta Users Are Already Getting Results With StudioCut & They Are Loving It!
          </motion.h2>
        </div>

        <div className="grid md:grid-cols-2 gap-8">
          {testimonials.map((t, i) => (
            <motion.div 
              key={i}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.1 }}
              className="bg-slate-50 border border-slate-200 p-10 rounded-[3rem] hover:shadow-xl transition-all duration-500 hover:-translate-y-2 flex flex-col justify-between"
            >
              <div className="space-y-6">
                <h3 className="text-2xl font-black tracking-tight text-blue-600 italic">
                  {t.title}
                </h3>
                <p className="text-lg text-gray-600 leading-relaxed font-medium">
                  {t.quote}
                </p>
              </div>
              
              <div className="mt-10 flex items-center gap-6">
                <div className="w-16 h-16 rounded-full border-4 border-blue-100 overflow-hidden shadow-lg">
                  <img 
                    src={t.image} 
                    alt={t.author} 
                    className="w-full h-full object-cover"
                    referrerPolicy="no-referrer"
                  />
                </div>
                <div>
                  <p className="font-black text-gray-900 text-lg">{t.author}</p>
                  <p className="text-blue-600 font-bold">{t.role}</p>
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}

function MarketCTA() {
  return (
    <section className="py-24 bg-white">
      <div className="max-w-5xl mx-auto px-4">
        <motion.div 
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="bg-gradient-to-br from-blue-600 to-indigo-700 rounded-[3rem] md:rounded-[4rem] p-12 md:p-20 text-center space-y-10 shadow-3xl relative overflow-hidden"
        >
          {/* Decorative Glow */}
          <div className="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full blur-3xl -mr-32 -mt-32"></div>
          
          <div className="relative space-y-6">
            <h2 className="text-3xl md:text-5xl font-black text-white leading-tight tracking-tight">
              Help Your Followers Tap Into This <span className="text-blue-200">$100 Billion</span> Video Services Market With StudioCut
            </h2>
          </div>

          <motion.div
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            className="relative inline-block"
          >
            <a 
              href="#affiliate-link" 
              className="inline-flex items-center gap-4 bg-white text-blue-600 px-10 py-6 rounded-full text-xl md:text-2xl font-black shadow-2xl hover:bg-blue-50 transition-colors group"
            >
              Grab Your StudioCut Affiliate Link Now
              <ArrowRight className="group-hover:translate-x-2 transition-transform" size={28} />
            </a>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
}

function Section10() {
  const features = [
    {
      title: "World’s First AIEdit™ Technology",
      description: "Doesn’t just generate clips — it delivers a fully finished video with text, transitions, animations, sound, and voiceover, so users can publish instantly.",
      image: "https://harshaljadhav.com/wp-content/uploads/2026/04/Worlds-First-AIEdit™-Technology.webp"
    },
    {
      title: "5-Phase AI Production Pipeline",
      description: "Handles planning, asset creation, scene design, rendering, and publishing prep, so users get an end-to-end video workflow in one place.",
      image: "https://harshaljadhav.com/wp-content/uploads/2026/04/5-Phase-AI-Production-Pipeline.webp"
    },
    {
      title: "AI Video Planning Engine",
      description: "Builds story arcs, scene breakdowns, scripts, and visual direction automatically, so users never start with a blank screen.",
      image: "https://harshaljadhav.com/wp-content/uploads/2026/04/AI-Video-Planning-Engine.webp"
    },
    {
      title: "Scene-Level Editing Controls",
      description: "Lets users tweak scripts, visuals, timing, and animations scene by scene, so they keep full control without editing complexity.",
      image: "https://harshaljadhav.com/wp-content/uploads/2026/04/Scene-Level-Editing-Controls.webp"
    },
    {
      title: "Automated Asset Generation",
      description: "Creates visuals, voiceovers, music, and video clips for every scene, so users don’t need extra tools or creative resources.",
      image: "https://harshaljadhav.com/wp-content/uploads/2026/04/Automated-Asset-Generation.webp"
    },
    {
      title: "Scene-Based Visual Composer",
      description: "Assembles every scene with overlays, transitions, and styled layouts, so the final video looks polished instead of pieced together.",
      image: "https://harshaljadhav.com/wp-content/uploads/2026/04/Scene-Based-Visual-Composer.webp"
    },
    {
      title: "One-Click Video Rendering",
      description: "Turns all scenes into a complete synced video automatically, so users save hours on manual post-production.",
      image: "https://harshaljadhav.com/wp-content/uploads/2026/04/One-Click-Video-Rendering.webp"
    },
    {
      title: "Multi-Input Video Creation",
      description: "Works with prompts, blogs, scripts, bullet points, product info, URLs, tutorials, and media uploads, so users can create from almost anything.",
      image: "https://harshaljadhav.com/wp-content/uploads/2026/04/Multi-Input-Video-Creation.webp"
    },
    {
      title: "Media Upload + AI Enhancement",
      description: "Supports images, videos, and audio uploads with AI enhancement, so users can improve quality and personalize output quickly.",
      image: "https://harshaljadhav.com/wp-content/uploads/2026/04/Media-Upload-AI-Enhancement.webp"
    }
  ];

  return (
    <section id="Section10" className="py-24 space-y-24 scroll-mt-20">
      <div className="text-center space-y-4 max-w-4xl mx-auto px-4">
        <h2 className="text-3xl md:text-6xl font-black tracking-tight leading-tight text-gray-900">
          Sneak Peek of Powerful Features Inside StudioCut
        </h2>
        <p className="text-xl md:text-2xl font-bold text-blue-600">
          Here’s Why Affiliates Know This Offer Will Turn Heads…
        </p>
      </div>

      <div className="max-w-7xl mx-auto px-4 space-y-32">
        {features.map((feature, index) => (
          <div 
            key={index} 
            className={`flex flex-col ${index % 2 === 0 ? 'md:flex-row' : 'md:flex-row-reverse'} items-center gap-12 md:gap-24`}
          >
            {/* Text Content */}
            <div className="flex-1 space-y-6">
              <div className="flex items-stretch gap-6">
                <div className="w-1.5 bg-gradient-to-b from-orange-500 via-red-500 to-purple-600 rounded-full"></div>
                <div className="space-y-4">
                  <h3 className="text-3xl md:text-5xl font-black tracking-tight text-gray-900">
                    {feature.title}
                  </h3>
                  <p className="text-lg md:text-xl font-bold text-gray-600 leading-relaxed">
                    {feature.description}
                  </p>
                </div>
              </div>
            </div>

            {/* Visual Content */}
            <div className="flex-1 w-full">
              <motion.div 
                initial={{ opacity: 0, x: index % 2 === 0 ? 50 : -50 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                className="relative group"
              >
                {/* Blue Gradient Glow */}
                <div className="absolute -inset-4 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-[2.5rem] blur opacity-20 group-hover:opacity-40 transition duration-1000"></div>
                
                <div className="relative bg-gray-900 rounded-[2.5rem] border-[8px] border-blue-600 shadow-2xl overflow-hidden">
                   <div className="aspect-video overflow-hidden">
                      <img 
                        src={feature.image} 
                        alt={feature.title}
                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                        referrerPolicy="no-referrer"
                      />
                   </div>
                   
                   {/* Floating icons/stars like in screenshot */}
                   <div className="absolute top-8 right-8">
                      <Sparkles className="text-blue-400 animate-pulse" size={24} />
                   </div>
                   <div className="absolute top-12 right-12">
                      <div className="text-blue-200 opacity-50">
                        <Sparkles size={16} />
                      </div>
                   </div>
                </div>
              </motion.div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Section11() {
  const features = [
    {
      title: "AI Voice Engine",
      description: "Offers customizable voices with pitch, speed, and emotion controls, so videos feel more natural and brand-appropriate.",
      color: "bg-purple-50",
      

      visual: (
        <div className="mt-8 relative aspect-video rounded-[2rem] overflow-hidden border-4 border-white shadow-2xl group-hover:scale-105 transition-transform duration-500">
          <img 
            src="https://harshaljadhav.com/wp-content/uploads/2026/04/AI-Voice-Engine.webp" 
            alt="AI Voice Engine" 
            className="w-full h-full object-cover"
            referrerPolicy="no-referrer"
          />
        </div>
      )
    },
    {
      title: "Multilingual Video Creation",
      description: "Supports multiple languages with translation and localization, so users can reach wider audiences without extra effort.",
      color: "bg-blue-50",
      visual: (
        <div className="mt-8 relative aspect-video rounded-[2rem] overflow-hidden border-4 border-white shadow-2xl group-hover:scale-105 transition-transform duration-500">
          <img 
            src="https://harshaljadhav.com/wp-content/uploads/2026/04/Multilingual-Video-Creation.webp" 
            alt="Multilingual Video Creation" 
            className="w-full h-full object-cover"
            referrerPolicy="no-referrer"
          />
        </div>
      )
    },
    {
      title: "Creative Style + Tone Selection",
      description: "Includes multiple styles and tone options, so users can match videos to their brand and audience.",
      color: "bg-green-50",
      visual: (
        <div className="mt-8 relative aspect-video rounded-[2rem] overflow-hidden border-4 border-white shadow-2xl group-hover:scale-105 transition-transform duration-500">
          <img 
            src="https://harshaljadhav.com/wp-content/uploads/2026/04/Creative-Style-Tone-Selection.webp" 
            alt="Creative Style + Tone Selection" 
            className="w-full h-full object-cover"
            referrerPolicy="no-referrer"
          />
        </div>
      )
    },
    {
      title: "Brand Kit Integration",
      description: "Applies logos, colors, music, and branding automatically, so every video looks consistent and professional.",
      color: "bg-red-50",
      visual: (
        <div className="mt-8 relative aspect-video rounded-[2rem] overflow-hidden border-4 border-white shadow-2xl group-hover:scale-105 transition-transform duration-500">
          <img 
            src="https://harshaljadhav.com/wp-content/uploads/2026/04/Brand-Kit-Integration.webp" 
            alt="Brand Kit Integration" 
            className="w-full h-full object-cover"
            referrerPolicy="no-referrer"
          />
        </div>
      )
    },
    {
      title: "Multi-Format + Multi-Platform Output",
      description: "Creates videos for YouTube, Shorts, Reels, TikTok, and more, so users can repurpose content across platforms easily.",
      color: "bg-indigo-50",
      visual: (
        <div className="mt-8 relative aspect-video rounded-[2rem] overflow-hidden border-4 border-white shadow-2xl group-hover:scale-105 transition-transform duration-500">
          <img 
            src="https://harshaljadhav.com/wp-content/uploads/2026/04/Multi-Format-Multi-Platform-Output.webp" 
            alt="Multi-Format + Multi-Platform Output" 
            className="w-full h-full object-cover"
            referrerPolicy="no-referrer"
          />
        </div>
      )
    },
    {
      title: "Platform-Specific Optimization",
      description: "Adapts layout, timing, and safe zones for each platform, so videos perform better where they’re posted.",
      color: "bg-cyan-50",
      visual: (
        <div className="mt-8 relative aspect-video rounded-[2rem] overflow-hidden border-4 border-white shadow-2xl group-hover:scale-105 transition-transform duration-500">
          <img 
            src="https://harshaljadhav.com/wp-content/uploads/2026/04/Platform-Specific-Optimization.webp" 
            alt="Platform-Specific Optimization" 
            className="w-full h-full object-cover"
            referrerPolicy="no-referrer"
          />
        </div>
      )
    },
    {
      title: "Publishing Metadata Generator",
      description: "Creates titles, descriptions, tags, and thumbnails automatically, so users save time and improve discoverability.",
      color: "bg-emerald-50",
      visual: (
        <div className="mt-8 relative aspect-video rounded-[2rem] overflow-hidden border-4 border-white shadow-2xl group-hover:scale-105 transition-transform duration-500">
          <img 
            src="https://harshaljadhav.com/wp-content/uploads/2026/04/Publishing-Metadata-Generator.webp" 
            alt="Publishing Metadata Generator" 
            className="w-full h-full object-cover"
            referrerPolicy="no-referrer"
          />
        </div>
      )
    },
    {
      title: "Content Repurposing Engine",
      description: "Turns blogs, documents, and existing content into videos, so users can multiply output without extra work.",
      color: "bg-rose-50",
      visual: (
        <div className="mt-8 relative aspect-video rounded-[2rem] overflow-hidden border-4 border-white shadow-2xl group-hover:scale-105 transition-transform duration-500">
          <img 
            src="https://harshaljadhav.com/wp-content/uploads/2026/04/Content-Repurposing-Engine.webp" 
            alt="Content Repurposing Engine" 
            className="w-full h-full object-cover"
            referrerPolicy="no-referrer"
          />
        </div>
      )
    }
  ];

  return (
    <section id="Section11" className="py-24 scroll-mt-20">
      <div className="max-w-7xl mx-auto px-4 grid md:grid-cols-2 gap-8">
        {features.map((feature, index) => (
          <motion.div 
            key={index}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: (index % 2) * 0.1 }}
            className={`${feature.color} rounded-[2.5rem] p-10 md:p-12 flex flex-col justify-between overflow-hidden relative group`}
          >
            <div className="space-y-6">
              <h3 className="text-3xl md:text-4xl font-black tracking-tight text-gray-900">
                {feature.title}
              </h3>
              <p className="text-lg font-bold text-gray-600/80 leading-relaxed max-w-md">
                {feature.description}
              </p>
            </div>
            {feature.visual}
          </motion.div>
        ))}
      </div>
    </section>
  );
}

function Section12() {
  const features = [
    {
      title: "Product Video Automation",
      description: "Converts product details into demo and explainer videos, so sellers can create conversion-focused content at scale.",
      gradient: "from-purple-600 via-indigo-700 to-blue-800",
      visual: (
        <div className="relative w-full h-full flex items-center justify-center">
          <div className="w-4/5 aspect-video bg-black rounded-2xl border-4 border-white/10 shadow-2xl overflow-hidden relative group">
            <img src="https://picsum.photos/seed/product1/800/450" alt="Product" className="w-full h-full object-cover opacity-80" referrerPolicy="no-referrer" />
            <div className="absolute inset-0 flex items-center justify-center">
              <div className="w-16 h-16 bg-white/20 backdrop-blur-md rounded-full flex items-center justify-center border border-white/40">
                <Play className="text-white fill-white ml-1" size={24} />
              </div>
            </div>
            <div className="absolute bottom-4 left-4 right-4 h-8 bg-white/10 backdrop-blur-md rounded-lg flex items-center px-3 gap-2">
              <div className="w-2 h-2 bg-red-500 rounded-full animate-pulse" />
              <div className="text-[10px] font-black text-white/60 uppercase tracking-widest">Generating Product Demo...</div>
            </div>
          </div>
          <div className="absolute -right-4 top-1/4 w-32 h-40 bg-gray-900 rounded-xl border border-white/10 shadow-2xl p-4 space-y-3 transform rotate-6">
            <div className="text-[8px] font-black text-purple-400 uppercase">Specs</div>
            <div className="space-y-1">
              <div className="h-1 bg-white/20 rounded-full" />
              <div className="h-1 bg-white/10 rounded-full w-3/4" />
              <div className="h-1 bg-white/10 rounded-full w-1/2" />
            </div>
            <div className="pt-2">
              <div className="h-12 bg-purple-600/20 rounded-lg border border-purple-500/30" />
            </div>
          </div>
        </div>
      )
    },
    {
      title: "Tutorial Video Builder",
      description: "Transforms instructions into step-by-step videos, so users can create training content easily.",
      gradient: "from-blue-500 via-blue-600 to-indigo-800",
      visual: (
        <div className="relative w-full h-full flex flex-col items-center justify-center gap-4">
          <div className="w-full grid grid-cols-2 gap-4">
            {[1, 2].map(i => (
              <div key={i} className="aspect-video bg-white/5 rounded-xl border border-white/10 overflow-hidden relative">
                <img src={`https://picsum.photos/seed/step${i}/400/225`} alt="Step" className="w-full h-full object-cover opacity-40" referrerPolicy="no-referrer" />
                <div className="absolute top-2 left-2 bg-blue-600 text-[8px] font-black px-2 py-0.5 rounded-full">STEP {i}</div>
              </div>
            ))}
          </div>
          <div className="w-full h-12 bg-white/5 rounded-xl border border-white/10 flex items-center px-4 gap-4">
            <div className="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
              <ChevronRight size={14} className="text-white" />
            </div>
            <div className="flex-1 h-1.5 bg-white/10 rounded-full">
              <div className="w-3/4 h-full bg-blue-500 rounded-full" />
            </div>
          </div>
        </div>
      )
    },
    {
      title: "Background Music Automation",
      description: "Adds and balances music automatically, so videos feel more cinematic without manual editing.",
      gradient: "from-indigo-600 via-purple-700 to-pink-800",
      visual: (
        <div className="relative w-full h-full flex items-center justify-center">
          <div className="w-full space-y-4">
            <div className="flex items-center gap-4">
              <div className="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center">
                <Music className="text-pink-400" size={24} />
              </div>
              <div className="flex-1 space-y-2">
                <div className="h-2 bg-white/20 rounded-full w-full" />
                <div className="h-2 bg-white/10 rounded-full w-2/3" />
              </div>
            </div>
            <div className="h-24 bg-white/5 rounded-2xl border border-white/10 p-4 flex items-end gap-1">
              {[...Array(20)].map((_, i) => (
                <motion.div 
                  key={i}
                  animate={{ height: [20, Math.random() * 60 + 20, 20] }}
                  transition={{ duration: 1, repeat: Infinity, delay: i * 0.05 }}
                  className="flex-1 bg-pink-500/40 rounded-full"
                />
              ))}
            </div>
          </div>
        </div>
      )
    },
    {
      title: "Real-Time Production Dashboard",
      description: "Tracks progress and performance visually, so users stay in control of their workflow.",
      gradient: "from-emerald-600 via-teal-700 to-cyan-800",
      visual: (
        <div className="relative w-full h-full grid grid-cols-2 gap-4 p-4">
          <div className="bg-white/5 rounded-2xl border border-white/10 p-4 space-y-3">
            <div className="text-[8px] font-black text-emerald-400 uppercase">Active Tasks</div>
            <div className="text-2xl font-black">24</div>
            <div className="h-1 bg-emerald-500/20 rounded-full">
              <div className="w-3/4 h-full bg-emerald-500 rounded-full" />
            </div>
          </div>
          <div className="bg-white/5 rounded-2xl border border-white/10 p-4 space-y-3">
            <div className="text-[8px] font-black text-cyan-400 uppercase">Completed</div>
            <div className="text-2xl font-black">142</div>
            <div className="flex gap-1">
              {[1, 2, 3, 4].map(i => <div key={i} className="h-4 flex-1 bg-cyan-500/20 rounded-sm" />)}
            </div>
          </div>
          <div className="col-span-2 bg-white/5 rounded-2xl border border-white/10 p-4 flex items-center gap-4">
            <div className="w-10 h-10 bg-emerald-500/20 rounded-full flex items-center justify-center">
              <TrendingUp className="text-emerald-400" size={20} />
            </div>
            <div className="flex-1 space-y-2">
              <div className="h-1.5 bg-white/10 rounded-full" />
              <div className="h-1.5 bg-white/5 rounded-full w-1/2" />
            </div>
          </div>
        </div>
      )
    },
    {
      title: "Production Monitoring Timeline",
      description: "Shows each stage of the process clearly, so users can review and manage videos easily.",
      gradient: "from-blue-600 via-indigo-700 to-purple-800",
      visual: (
        <div className="relative w-full h-full flex items-center justify-center px-8">
          <div className="w-full space-y-8">
            <div className="relative h-1 bg-white/10 rounded-full">
              <div className="absolute top-0 left-0 w-2/3 h-full bg-blue-500 rounded-full" />
              <div className="absolute top-1/2 left-0 -translate-y-1/2 flex justify-between w-full">
                {[1, 2, 3, 4].map(i => (
                  <div key={i} className={`w-4 h-4 rounded-full border-2 border-gray-900 ${i <= 3 ? 'bg-blue-500' : 'bg-gray-700'}`} />
                ))}
              </div>
            </div>
            <div className="grid grid-cols-4 gap-2">
              {['Script', 'Assets', 'Render', 'Final'].map((step, i) => (
                <div key={i} className="text-center">
                  <div className={`text-[8px] font-black uppercase tracking-widest ${i <= 2 ? 'text-blue-400' : 'text-gray-500'}`}>{step}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )
    },
    {
      title: "Auto-Approve Mode",
      description: "Lets the system run end-to-end automatically, so users can create videos faster with less effort.",
      gradient: "from-orange-500 via-red-600 to-rose-800",
      visual: (
        <div className="relative w-full h-full flex items-center justify-center">
          <div className="w-48 h-48 bg-white/5 rounded-full border-4 border-white/10 flex items-center justify-center relative">
            <motion.div 
              animate={{ rotate: 360 }}
              transition={{ duration: 10, repeat: Infinity, ease: "linear" }}
              className="absolute inset-2 border-2 border-dashed border-orange-500/30 rounded-full"
            />
            <div className="text-center space-y-2">
              <div className="w-12 h-12 bg-orange-600 rounded-2xl mx-auto flex items-center justify-center shadow-lg shadow-orange-500/20">
                <Zap className="text-white fill-white" size={24} />
              </div>
              <div className="text-[10px] font-black text-white uppercase tracking-widest">AUTO MODE</div>
              <div className="text-[8px] font-bold text-orange-400">ACTIVE</div>
            </div>
          </div>
        </div>
      )
    },
    {
      title: "Error Detection & Auto-Recovery",
      description: "Automatically detects and fixes issues, so users don’t need to babysit the process.",
      gradient: "from-red-600 via-rose-700 to-purple-800",
      visual: (
        <div className="relative w-full h-full flex items-center justify-center">
          <div className="w-full max-w-[280px] space-y-4">
            <div className="bg-red-500/10 border border-red-500/30 p-4 rounded-2xl flex items-center gap-4">
              <XCircle className="text-red-500" size={20} />
              <div className="flex-1 h-1.5 bg-red-500/20 rounded-full overflow-hidden">
                <motion.div 
                  animate={{ x: ["-100%", "100%"] }}
                  transition={{ duration: 1.5, repeat: Infinity }}
                  className="w-1/3 h-full bg-red-500"
                />
              </div>
            </div>
            <div className="flex justify-center">
              <ArrowRight className="text-gray-600 rotate-90" />
            </div>
            <div className="bg-emerald-500/10 border border-emerald-500/30 p-4 rounded-2xl flex items-center gap-4">
              <CheckCircle2 className="text-emerald-500" size={20} />
              <div className="text-[10px] font-black text-emerald-400 uppercase tracking-widest">Issue Resolved</div>
            </div>
          </div>
        </div>
      )
    },
    {
      title: "SEO Optimization Engine",
      description: "Optimizes video metadata for better visibility, so users can get more reach organically.",
      gradient: "from-cyan-500 via-blue-600 to-indigo-800",
      visual: (
        <div className="relative w-full h-full flex items-center justify-center">
          <div className="w-full max-w-[300px] bg-white/5 rounded-3xl border border-white/10 p-6 space-y-6">
            <div className="flex items-center justify-between">
              <div className="text-[10px] font-black text-cyan-400 uppercase tracking-widest">SEO Score</div>
              <div className="text-xl font-black text-emerald-400">98/100</div>
            </div>
            <div className="space-y-3">
              {[
                { label: 'Keywords', val: '95%' },
                { label: 'Tags', val: '100%' },
                { label: 'Description', val: '92%' }
              ].map((item, i) => (
                <div key={i} className="flex items-center gap-4">
                  <div className="text-[8px] font-bold text-gray-400 w-16 uppercase">{item.label}</div>
                  <div className="flex-1 h-1.5 bg-white/10 rounded-full">
                    <div className="h-full bg-cyan-500 rounded-full" style={{ width: item.val }} />
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )
    },
    {
      title: "Direct Publishing Integration",
      description: "Enables faster publishing workflow, so users can go from creation to posting seamlessly.",
      gradient: "from-blue-600 via-indigo-700 to-purple-900",
      visual: (
        <div className="relative w-full h-full flex items-center justify-center">
          <div className="grid grid-cols-3 gap-4">
            {[
              { icon: <Youtube />, color: 'text-red-500' },
              { icon: <Instagram />, color: 'text-pink-500' },
              { icon: <Facebook />, color: 'text-blue-500' }
            ].map((item, i) => (
              <motion.div 
                key={i}
                whileHover={{ y: -5 }}
                className="w-16 h-16 bg-white/5 rounded-2xl border border-white/10 flex items-center justify-center shadow-xl"
              >
                <div className={item.color}>{item.icon}</div>
              </motion.div>
            ))}
          </div>
          <div className="absolute -bottom-4 bg-blue-600 px-6 py-2 rounded-full text-xs font-black uppercase tracking-widest shadow-xl shadow-blue-500/30">
            Publish Now
          </div>
        </div>
      )
    }
  ];

  return (
    <section id="Section12" className="py-24 scroll-mt-20">
      <div className="max-w-7xl mx-auto space-y-24">
        <div className="text-center space-y-4">
          <h2 className="text-3xl md:text-6xl font-black tracking-tight leading-tight text-gray-900">
            There Are Even More Features...
          </h2>
        </div>

        <div className="space-y-12">
          {features.map((feature, index) => (
            <motion.div 
              key={index}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              className={`relative bg-gradient-to-r ${feature.gradient} rounded-[3rem] md:rounded-[4rem] p-8 md:p-16 flex flex-col ${index % 2 === 0 ? 'md:flex-row' : 'md:flex-row-reverse'} items-center gap-12 md:gap-24 overflow-hidden group shadow-2xl`}
            >
              {/* Decorative Glow */}
              <div className="absolute inset-0 bg-white/5 opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
              
              <div className="flex-1 space-y-6 text-white relative z-10">
                <h3 className="text-3xl md:text-5xl font-black tracking-tight leading-tight">
                  {feature.title}
                </h3>
                <p className="text-lg md:text-xl font-bold text-white/80 leading-relaxed">
                  {feature.description}
                </p>
              </div>

              <div className="flex-1 w-full aspect-video md:aspect-auto md:h-[300px] relative z-10">
                {feature.visual}
              </div>
            </motion.div>
          ))}
        </div>

        <motion.div 
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="pt-24 max-w-4xl mx-auto text-center space-y-8"
        >
          <div className="inline-block px-6 py-2 bg-blue-600 text-white font-black rounded-full text-sm uppercase tracking-widest">
            Bottom Line
          </div>
          <h3 className="text-3xl md:text-5xl font-black tracking-tight leading-tight text-gray-900">
            StudioCut isn’t just another AI video tool…
          </h3>
          <p className="text-xl md:text-2xl font-bold text-gray-600 leading-relaxed">
            It combines <span className="text-blue-600">AIEdit™</span>, full editing automation, scene-level control, and platform-ready output into one powerful system — making it easier for affiliates to promote and easier for customers to say <span className="text-blue-600 italic">“YES”</span>.
          </p>
        </motion.div>
      </div>
    </section>
  );
}


function Section13() {
  const terms = [
    {
      title: "Prize Eligibility Requirement",
      content: "To qualify for any leaderboard cash prize, your total earned commissions must be equal to or higher than the prize amount. If not, the payout will adjust to the highest qualifying tier."
    },
    {
      title: "No Negative or Misleading Advertising",
      content: "Strictly prohibited: Negative PPC such as “Product Name Scam”, Brand defamation tactics, iframe cloaking, or anything that misleads users or damages product reputation. Violation will result in immediate removal and forfeiture of commissions."
    },
    {
      title: "Affiliate Link Usage",
      content: "We highly recommend using a redirect link from your website or email campaigns rather than the raw JVZoo affiliate link. This typically boosts conversions — but the choice remains yours."
    },
    {
      title: "No Self-Purchasing for Commissions",
      content: "Self-purchases to trigger commissions are not allowed. Any commissions earned from your own purchase(s) will be voided automatically."
    },
    {
      title: "Commission Payout Policy",
      content: "Affiliates with fewer than 50 sales may be placed on delayed payouts for fraud and refund protection. Instant commissions may be granted once performance history meets our approval criteria."
    },
    {
      title: "FTC-Compliant Marketing Required",
      content: "We are committed to ethical and FTC-compliant marketing. You must not use: False claims, Misleading promises, Fake earnings screenshots or testimonials, or any misrepresentation of product features."
    }
  ];

  return (
    <section id="Section13" className="py-24 space-y-32 scroll-mt-20">
      {/* Reciprocation Section */}
      <div className="max-w-5xl mx-auto px-4 text-center space-y-16">
        <div className="space-y-6">
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            className="inline-block px-4 py-1 bg-blue-100 text-blue-600 text-xs font-black rounded-full uppercase tracking-widest mb-4"
          >
            Partnership & Trust
          </motion.div>
          <motion.h2 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-4xl md:text-7xl font-black tracking-tight leading-tight"
          >
            Do We Reciprocate? <br />
            <span className="text-blue-600">Absolutely YES!</span>
          </motion.h2>
          <motion.p 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.1 }}
            className="text-xl md:text-2xl font-bold text-gray-600 leading-relaxed max-w-3xl mx-auto"
          >
            We’ve been in this SaaS launch industry for almost 10 years. We’ve always supported launches of JV partners and friends. We always do our best and deliver solid affiliate sales.
          </motion.p>
          <motion.p 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.2 }}
            className="text-lg font-bold text-gray-400 italic"
          >
            Don’t just go by our words. Take a look at these leaderboard standings.
          </motion.p>
        </div>

        {/* Leaderboard Image Placeholder */}
        <motion.div 
          initial={{ opacity: 0, scale: 0.95 }}
          whileInView={{ opacity: 1, scale: 1 }}
          viewport={{ once: true }}
          transition={{ delay: 0.3 }}
          className="relative rounded-[3rem] md:rounded-[4rem] overflow-hidden shadow-3xl border-8 border-white bg-gray-100 aspect-[16/9] flex items-center justify-center group"
        >
          <img 
            src="https://picsum.photos/seed/leaderboard-v2/1200/675" 
            alt="Leaderboard Standings" 
            className="w-full h-full object-cover opacity-90 group-hover:scale-105 transition-transform duration-700"
            referrerPolicy="no-referrer"
          />
          <div className="absolute inset-0 flex items-center justify-center bg-black/10 group-hover:bg-black/20 transition-colors">
             <div className="bg-white/90 backdrop-blur-md px-10 py-5 rounded-3xl shadow-2xl border border-white/50 flex items-center gap-4">
                <div className="w-12 h-12 bg-blue-600 rounded-2xl flex items-center justify-center shadow-lg shadow-blue-200">
                  <Trophy className="text-white" size={24} />
                </div>
                <span className="text-2xl md:text-3xl font-black text-gray-900 uppercase tracking-widest">Leaderboard Proof</span>
             </div>
          </div>
          <div className="absolute top-8 right-8 bg-emerald-500 text-white px-6 py-2 rounded-full text-xs font-black uppercase tracking-widest shadow-xl flex items-center gap-2">
            <CheckCircle2 size={16} /> Verified Result
          </div>
        </motion.div>

        {/* Partner Logos Placeholder */}
        <div className="pt-12 flex flex-wrap justify-center gap-8 md:gap-16 opacity-30 grayscale hover:grayscale-0 transition-all duration-500">
          {[1, 2, 3, 4, 5].map(i => (
            <div key={i} className="text-2xl font-black tracking-tighter text-gray-400">PARTNER {i}</div>
          ))}
        </div>
      </div>

      <hr className="max-w-5xl mx-auto border-gray-100" />

      {/* Support Section */}
      <div className="max-w-6xl mx-auto px-4 text-center space-y-20">
        <div className="space-y-8">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="inline-flex items-center gap-2 bg-orange-100 text-orange-600 px-4 py-2 rounded-full text-xs font-black uppercase tracking-widest"
          >
            <Zap size={14} /> 24/7 Support
          </motion.div>
          <motion.h2 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-4xl md:text-6xl font-black tracking-tight leading-tight"
          >
            Need Anything To Promote <br />
            <span className="text-blue-600 underline decoration-blue-200 underline-offset-[12px] decoration-8">StudioCut?</span>
          </motion.h2>
          <motion.p 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.1 }}
            className="text-xl md:text-2xl font-bold text-gray-600 leading-relaxed max-w-3xl mx-auto"
          >
            We’re here to help you get more affiliate sales, earn massive affiliate commissions and win $6,000 in cash prizes. Just reach out to any one of us and tell us what you need.
          </motion.p>
          
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            className="bg-blue-600 text-white px-10 py-5 rounded-3xl text-lg font-black uppercase tracking-widest shadow-2xl shadow-blue-200 hover:bg-blue-700 transition-all"
          >
            Contact Us Now
          </motion.button>
        </div>

        <div className="grid md:grid-cols-2 gap-12 max-w-4xl mx-auto">
          {[
            { name: "Harshal Jadhav", role: "JV Partner", image: "https://blog.jvzoo.com/wp-content/uploads/2020/11/Blog-29.png" },
            { name: "Vishal Kangane", role: "JV Partner", image: "https://blog.jvzoo.com/wp-content/uploads/2020/11/Blog-27.png" }
          ].map((person, i) => (
            <motion.div 
              key={i}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.1 }}
              className="bg-white p-10 rounded-[3rem] shadow-2xl border border-gray-100 space-y-8 group hover:shadow-3xl transition-all duration-500 relative overflow-hidden"
            >
              <div className="absolute top-0 right-0 w-32 h-32 bg-blue-50 rounded-full blur-3xl -mr-16 -mt-16 group-hover:bg-blue-100 transition-colors"></div>
              
              <div className="w-40 h-70 mx-auto rounded-[2.5rem] overflow-hidden shadow-2xl group-hover:scale-105 transition-transform duration-500 relative z-10 border-4 border-white">
                <img src={person.image} alt={person.name} className="w-full h-full object-cover" referrerPolicy="no-referrer" />
              </div>
              
              <div className="space-y-3 relative z-10">
                <div className="text-3xl font-black text-gray-900">{person.name}</div>
                <div className="text-sm font-bold text-blue-600 uppercase tracking-widest bg-blue-50 inline-block px-4 py-1 rounded-full">{person.role}</div>
              </div>
              
              <div className="flex justify-center gap-4 relative z-10">
                 
                 <button className="flex-1 flex items-center justify-center gap-2 py-4 bg-gray-50 rounded-2xl text-gray-600 font-bold hover:text-blue-600 hover:bg-blue-50 transition-all border border-transparent hover:border-blue-100">
                    <Users size={20} /> Teams
                 </button>
              </div>
            </motion.div>
          ))}
        </div>
      </div>

      <hr className="max-w-5xl mx-auto border-gray-100" />

      {/* Terms & Conditions Section */}
      <div className="max-w-5xl mx-auto px-4 space-y-16">
        <div className="text-center space-y-6">
          <div className="inline-flex items-center gap-2 bg-gray-100 text-gray-500 px-4 py-2 rounded-full text-xs font-black uppercase tracking-widest">
            <ShieldCheck size={14} /> Official Guidelines
          </div>
          <h2 className="text-4xl md:text-6xl font-black tracking-tight leading-tight">
            Affiliate Program – <br />
            <span className="text-gray-400">Terms & Conditions</span>
          </h2>
          <p className="text-xl font-bold text-gray-500 leading-relaxed max-w-3xl mx-auto">
            By applying to promote StudioCut, you agree to the guidelines below. These policies ensure a fair, compliant, and high-performance promotion environment for all JV partners.
          </p>
        </div>

        <div className="bg-white rounded-[4rem] p-8 md:p-20 space-y-16 shadow-3xl border border-gray-100 relative overflow-hidden">
          <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600"></div>
          
          <div className="flex items-center gap-4 text-2xl font-black text-gray-900 border-b border-gray-100 pb-8">
             <div className="w-12 h-12 bg-blue-50 rounded-2xl flex items-center justify-center text-blue-600">
                <FileText size={28} />
             </div>
             <span>Please read carefully:</span>
          </div>

          <div className="grid md:grid-cols-2 gap-x-16 gap-y-12">
            {terms.map((term, i) => (
              <motion.div 
                key={i}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.05 }}
                className="space-y-4 group"
              >
                <div className="flex items-center gap-4">
                  <div className="flex-shrink-0 w-10 h-10 bg-gray-50 rounded-xl flex items-center justify-center text-lg font-black text-blue-600 group-hover:bg-blue-600 group-hover:text-white transition-colors">
                    {i + 1}
                  </div>
                  <h4 className="text-xl font-black text-gray-900 group-hover:text-blue-600 transition-colors">{term.title}</h4>
                </div>
                <p className="text-gray-600 font-medium leading-relaxed pl-14">{term.content}</p>
              </motion.div>
            ))}
          </div>

          <div className="pt-12 border-t border-gray-100">
             <motion.div 
               whileHover={{ scale: 1.02 }}
               className="bg-red-50 p-8 rounded-3xl flex items-start gap-6 border border-red-100 shadow-lg shadow-red-500/5"
             >
                <div className="w-12 h-12 bg-red-600 rounded-2xl flex items-center justify-center text-white shrink-0 shadow-lg shadow-red-200">
                  <AlertCircle size={28} />
                </div>
                <div className="space-y-2">
                  <div className="text-red-600 font-black uppercase tracking-widest text-sm">Strict Enforcement</div>
                  <p className="text-red-900 text-lg font-bold leading-relaxed">
                    If discovered, affiliate privileges and all pending commissions will be revoked immediately.
                  </p>
                </div>
             </motion.div>
          </div>
        </div>
      </div>
    </section>
  );
}

function AffiliateContest() {
  const prizes = [
    {
      rank: "2nd Prize",
      amount: "$500",
      icon: <Medal size={64} className="text-slate-400 drop-shadow-[0_0_15px_rgba(148,163,184,0.5)]" />,
      delay: 0.1
    },
    {
      rank: "1st Prize",
      amount: "$1500",
      icon: <Trophy size={96} className="text-yellow-600 drop-shadow-[0_0_25px_rgba(202,138,4,0.6)]" />,
      delay: 0,
      isMain: true
    },
    {
      rank: "3rd Prize",
      amount: "$250",
      icon: <Award size={64} className="text-amber-700 drop-shadow-[0_0_15px_rgba(180,83,9,0.5)]" />,
      delay: 0.2
    }
  ];

  return (
    <section id="AffiliateContest" className="relative -mx-4 px-6 py-24 md:py-32 bg-gradient-to-br from-[#BF953F] via-[#FCF6BA] to-[#B38728] text-slate-900 rounded-[3rem] md:rounded-[5rem] overflow-hidden shadow-3xl scroll-mt-20">
      {/* Decorative background elements */}
      <div className="absolute top-0 left-0 w-full h-full opacity-30 pointer-events-none">
        <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-white/40 rounded-full blur-[120px]"></div>
        <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-amber-200/40 rounded-full blur-[120px]"></div>
      </div>

      <div className="relative max-w-4xl mx-auto px-4 text-center space-y-12">
        <div className="space-y-6">
          <motion.h3 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-2xl md:text-3xl font-bold text-amber-900 italic"
          >
            Here Comes The Juicest Part…
          </motion.h3>
          <motion.h2 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.1 }}
            className="text-4xl md:text-7xl font-black tracking-tight leading-tight"
          >
            Win <span className="text-amber-800">$6,000</span> in Affiliate Contest
          </motion.h2>
        </div>

        <motion.p 
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ delay: 0.2 }}
          className="text-xl md:text-2xl font-medium text-amber-900/80 max-w-2xl mx-auto leading-relaxed"
        >
          Promote StudioCut between 1st May to 6th May and earn <span className="text-slate-900 font-black">$6,000</span> in cash prizes.
        </motion.p>

        <motion.div 
          initial={{ opacity: 0, scale: 0.9 }}
          whileInView={{ opacity: 1, scale: 1 }}
          viewport={{ once: true }}
          transition={{ delay: 0.3 }}
          className="inline-block bg-slate-900/10 backdrop-blur-md border border-slate-900/20 px-8 py-3 rounded-full text-lg md:text-xl font-black uppercase tracking-widest text-amber-900"
        >
          - Opening Contest -
        </motion.div>

        <div className="grid grid-cols-3 gap-4 md:gap-12 items-end pt-12">
          {prizes.map((prize, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: prize.delay + 0.4 }}
              className="space-y-6"
            >
              <div className="flex justify-center">
                <div className={`relative ${prize.isMain ? 'scale-125 md:scale-150 mb-8' : 'scale-100 md:scale-110'}`}>
                  <div className="p-4 bg-white/20 backdrop-blur-sm rounded-2xl border border-white/30 shadow-xl">
                    {prize.icon}
                  </div>
                  {prize.isMain && (
                    <motion.div
                      animate={{ opacity: [0, 1, 0], scale: [1, 1.2, 1] }}
                      transition={{ duration: 3, repeat: Infinity }}
                      className="absolute inset-0 bg-amber-400/30 blur-3xl rounded-full -z-10"
                    />
                  )}
                </div>
              </div>
              <div className="space-y-2">
                <div className={`text-sm md:text-lg font-black uppercase tracking-widest ${prize.isMain ? 'text-amber-900' : 'text-amber-900/60'}`}>
                  {prize.rank}
                </div>
                <div className={`font-black tracking-tight ${prize.isMain ? 'text-4xl md:text-6xl text-slate-900' : 'text-2xl md:text-4xl text-slate-900/90'}`}>
                  {prize.amount}
                </div>
              </div>
            </motion.div>
          ))}
        </div>

        <div className="pt-24 text-left space-y-8 max-w-3xl mx-auto bg-slate-900/5 backdrop-blur-sm border border-slate-900/10 p-8 md:p-12 rounded-[2.5rem]">
          <div className="flex items-center gap-3 font-black text-xl text-amber-900">
            <ShieldCheck size={24} /> *T&C:
          </div>
          <ul className="space-y-6 text-base md:text-lg font-medium text-amber-900/70">
            {[
              "To qualify for any cash prize, your total referral commissions must be equal to or greater than the prize amount.",
              "If the minimum commission threshold isn’t met, the affiliate commission payout will be adjusted on a pro-rata basis based on your leaderboard position and sales.",
              "Cash rewards are issued only when the required commission level is met.",
              "Cash prizes will be paid within 30 days after the launch has ended."
            ].map((text, i) => (
              <li key={i} className="flex gap-4">
                <span className="flex-shrink-0 w-6 h-6 rounded-full bg-amber-900/10 flex items-center justify-center text-xs font-black text-amber-900">
                  {i + 1}
                </span>
                {text}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

function Funnel() {
  return (
    <section id="Funnel" className="py-16 space-y-12 scroll-mt-20">
      <div className="text-center space-y-4 max-w-3xl mx-auto">
        <h2 className="text-3xl md:text-5xl font-black tracking-tight leading-tight">
          The StudioCut Funnel – <span className="text-blue-600">Built To Maximize Your EPCs!</span>
        </h2>
        <p className="text-lg md:text-xl font-bold text-gray-600 leading-relaxed">
          We’ve spent months perfecting this funnel to ensure you get the highest possible Earnings Per Click. Every step is designed to provide massive value to the customer while putting more commissions in your pocket.
        </p>
      </div>

      <div className="grid gap-6 max-w-5xl mx-auto">
        {/* Front End */}
        <div className="relative group">
          <div className="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-[2rem] blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
          <div className="relative bg-white border border-blue-100 p-8 rounded-[2rem] flex flex-col md:flex-row items-center justify-between gap-8 shadow-xl">
            <div className="flex items-center gap-6">
              <div className="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center text-white shadow-lg shadow-blue-200">
                <Rocket size={32} />
              </div>
              <div>
                <div className="text-xs font-black uppercase tracking-widest text-blue-600 mb-1">Entry Point</div>
                <h3 className="text-2xl font-black tracking-tight">Front End: StudioCut</h3>
              </div>
            </div>
            <div className="flex items-center gap-8 text-center md:text-right">
              <div>
                <div className="text-xs font-bold text-gray-400 uppercase tracking-widest mb-1">Price</div>
                <div className="text-2xl font-black text-gray-900">$37 - $47</div>
              </div>
              <div className="w-px h-10 bg-gray-100"></div>
              <div>
                <div className="text-xs font-bold text-blue-400 uppercase tracking-widest mb-1">Commission</div>
                <div className="text-2xl font-black text-blue-600">50%</div>
              </div>
            </div>
          </div>
        </div>

        {/* OTOs Grid */}
        <div className="grid md:grid-cols-2 gap-6">
          {[
            { title: "OTO 1: StudioCut Unlimited", price: "$67", icon: <Zap />, color: "bg-orange-500" },
            { title: "OTO 2: StudioCut Enterprise", price: "$97", icon: <ShieldCheck />, color: "bg-indigo-500" },
            { title: "OTO 3: StudioCut Reseller", price: "$197", icon: <Users />, color: "bg-green-500" },
            { title: "OTO 4: StudioCut Whitelabel", price: "$497", icon: <Globe />, color: "bg-purple-500" }
          ].map((oto, i) => (
            <div key={i} className="bg-gray-50 border border-gray-100 p-8 rounded-[2rem] hover:bg-white hover:shadow-xl transition-all duration-300 group">
              <div className="flex items-center justify-between mb-6">
                <div className={`w-12 h-12 ${oto.color} rounded-xl flex items-center justify-center text-white shadow-lg shadow-gray-200 group-hover:scale-110 transition-transform`}>
                  {oto.icon}
                </div>
                <div className="text-right">
                  <div className="text-xs font-bold text-gray-400 uppercase tracking-widest mb-1">Price</div>
                  <div className="text-xl font-black text-gray-900">{oto.price}</div>
                </div>
              </div>
              <h4 className="text-lg font-black tracking-tight mb-4">{oto.title}</h4>
              <div className="flex items-center justify-between pt-4 border-t border-gray-100">
                <span className="text-xs font-bold text-gray-400 uppercase tracking-widest">Commission</span>
                <span className="text-lg font-black text-blue-600">50%</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}


function ProblemSolution() {
  return (
    <section id="ProblemSolution" className="py-20 space-y-20 scroll-mt-20">
      <div className="max-w-6xl mx-auto">
        <div className="bg-white border-4 border-gray-900 rounded-[3rem] shadow-[16px_16px_0px_0px_rgba(0,0,0,0.05)] overflow-hidden">
          <div className="grid md:grid-cols-[1fr_auto_1fr] items-stretch">
            {/* Left Side: The Real Problem */}
            <div className="p-8 md:p-12 space-y-8 border-b md:border-b-0 md:border-r-2 border-gray-100">
              <div className="aspect-video bg-gray-50 rounded-2xl overflow-hidden border-2 border-gray-100">
                <img 
                  src="https://harshaljadhav.com/wp-content/uploads/2026/04/Problem.webp" 
                  alt="The Problem" 
                  className="w-full h-full object-cover hover:grayscale transition-all duration-500"
                  referrerPolicy="no-referrer"
                />
              </div>
              <div className="space-y-6">
                <h3 className="text-2xl md:text-3xl font-black tracking-tight flex items-center gap-3 text-gray-900">
                  <span className="text-4xl">😢</span> The Real Problem – That No One Talks About
                </h3>
                <p className="text-lg md:text-xl font-bold text-gray-600 leading-relaxed">
                  It’s not about <span className="italic text-gray-900">creating</span> videos… It’s about <span className="text-gray-900 underline decoration-blue-500 decoration-4 underline-offset-4">finishing them properly</span>
                </p>
                <div className="space-y-4 bg-blue-50/50 p-6 rounded-2xl border border-blue-100">
                  <p className="font-black text-blue-900 uppercase tracking-widest text-xs">Because unless the video is:</p>
                  <ul className="space-y-3">
                    {["Clean", "Structured", "Edited", "Ready to publish"].map((item, i) => (
                      <li key={i} className="flex items-center gap-3 font-extrabold text-gray-800">
                        <div className="bg-green-500 p-1 rounded-full"><Check className="text-white" size={14} /></div>
                        {item}
                      </li>
                    ))}
                  </ul>
                </div>
                <p className="text-2xl font-black text-red-600 italic tracking-tighter">It’s useless.</p>
              </div>
            </div>

            {/* Middle: Arrow */}
            <div className="hidden md:flex items-center justify-center px-6 bg-gray-50">
              <div className="bg-white w-16 h-16 rounded-full shadow-xl border-4 border-gray-900 flex items-center justify-center z-10">
                <ArrowRight size={32} className="text-gray-900" />
              </div>
            </div>

            {/* Right Side: Consequences */}
            <div className="p-8 md:p-12 space-y-8 bg-gray-50/30">
              <div className="aspect-video bg-gray-50 rounded-2xl overflow-hidden border-2 border-gray-100">
                <img 
                  src="https://harshaljadhav.com/wp-content/uploads/2026/04/Consequences.webp" 
                  alt="The Consequence" 
                  className="w-full h-full object-cover hover:grayscale transition-all duration-500"
                  referrerPolicy="no-referrer"
                />
              </div>
              <div className="space-y-6">
                <h3 className="text-2xl md:text-3xl font-black tracking-tight flex items-center gap-3 text-gray-900">
                  <span className="text-4xl">😢</span> And That’s Why Most People…
                </h3>
                <ul className="space-y-4">
                  {[
                    "Struggle to stay consistent",
                    "Delay posting content",
                    "Miss trends and opportunities",
                    "Fails to get new followers",
                    "Lose traffic, leads, and sales"
                  ].map((item, i) => (
                    <li key={i} className="flex items-center gap-3 font-bold text-gray-700">
                      <div className="w-2 h-2 bg-red-400 rounded-full"></div>
                      {item}
                    </li>
                  ))}
                </ul>
                <div className="space-y-4 pt-4 border-t border-gray-200">
                  <p className="text-xl font-black text-gray-400 italic">Or worse…</p>
                  <p className="text-3xl font-black text-red-600 tracking-tight">They never even start.</p>
                  <p className="text-lg font-bold text-gray-500">Leading to missed opportunities.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom Line Section */}
      <div className="max-w-4xl mx-auto space-y-12">
        <div className="bg-gradient-to-br from-gray-900 to-slate-800 text-white p-10 md:p-16 rounded-[3rem] text-center space-y-8 shadow-2xl relative overflow-hidden">
          <div className="absolute top-0 right-0 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl -mr-32 -mt-32"></div>
          <div className="absolute bottom-0 left-0 w-64 h-64 bg-indigo-500/10 rounded-full blur-3xl -ml-32 -mb-32"></div>
          
          <h2 className="text-3xl md:text-5xl font-black tracking-tight text-blue-400">Bottom Line:</h2>
          <div className="space-y-6 relative">
            <p className="text-xl md:text-2xl font-bold text-gray-300">
              People <span className="italic text-white underline decoration-red-500 decoration-2 underline-offset-4">don’t need another tool</span> that creates <span className="italic text-white underline decoration-red-500 decoration-2 underline-offset-4">more work</span>
            </p>
            <p className="text-xl md:text-2xl font-bold text-gray-300">
              They need something that takes them from:
            </p>
            <div className="inline-block bg-white/10 backdrop-blur-md border border-white/20 px-8 py-6 rounded-2xl">
              <p className="text-xl md:text-2xl font-black italic text-yellow">
                Idea To Fully Finished, Ready-To-Post Video
              </p>
            </div>
          </div>
        </div>

        <div className="flex flex-wrap justify-center gap-x-10 gap-y-6 text-sm md:text-base font-black text-gray-900 bg-gray-50 p-8 rounded-[2rem] border border-gray-200">
          {[
            "Without Video Skills",
            "Without Shooting Or Recording",
            "Without Editing Software",
            "Without Hiring Freelancers Or Agencies",
            "Or Wasting Hours Trying to \"Fix\" Things"
          ].map((item, i) => (
            <div key={i} className="flex items-center gap-3 group">
              <div className="bg-red-100 p-1.5 rounded-lg group-hover:bg-red-500 transition-colors">
                <X className="text-red-600 group-hover:text-white" size={18} />
              </div>
              <span className="tracking-tight">{item}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

export default function App() {
  return (
    <div className="min-h-screen bg-white font-sans text-gray-900 selection:bg-blue-100">
      {/* Header */}
      <header className="border-b border-gray-200 sticky top-0 bg-white/80 backdrop-blur-md z-50">
        <div className="max-w-5xl mx-auto px-4 h-16 flex items-center justify-between">
          <div className="font-black text-2xl tracking-tighter text-blue-600">
            LOGO
          </div>
          <nav className="hidden md:flex items-center gap-8">
            <a href="#" className="text-xs font-bold uppercase tracking-widest hover:text-blue-600 transition-colors">JV DOC</a>
            <a href="#Funnel" className="text-xs font-bold uppercase tracking-widest hover:text-blue-600 transition-colors">FUNNEL</a>
            <a href="#AffiliateContest" className="text-xs font-bold uppercase tracking-widest hover:text-blue-600 transition-colors">PRIZES</a>
            <a href="#" className="text-xs font-bold uppercase tracking-widest hover:text-blue-600 transition-colors">SWIPES</a>
            <a href="#" className="bg-blue-600 text-white px-5 py-2 rounded-full text-xs font-bold uppercase tracking-widest hover:bg-blue-700 transition-all shadow-lg shadow-blue-200 active:scale-95">
              GET YOUR AFFILIATE LINK
            </a>
          </nav>
          <button className="md:hidden text-gray-500">
            <ExternalLink size={20} />
          </button>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-4 py-12 md:py-20 space-y-16 overflow-hidden">
        {/* Section 1: Hero & Features with Gradient Background */}
        <section className="relative -mx-4 px-4 py-16 md:py-24 rounded-[3rem] md:rounded-[5rem] bg-gradient-to-b from-blue-50 via-white to-white overflow-hidden">
          {/* Floating Elements */}
          <div className="absolute inset-0 pointer-events-none overflow-hidden">
            <div className="absolute top-20 left-[5%] animate-bounce duration-[3000ms]">
              <div className="bg-white p-4 rounded-2xl shadow-xl border border-blue-100 transform -rotate-12">
                <Clapperboard className="text-blue-600" size={32} />
              </div>
            </div>
            <div className="absolute top-40 right-[5%] animate-pulse">
              <div className="bg-white p-4 rounded-2xl shadow-xl border border-indigo-100 transform rotate-12">
                <Sparkles className="text-indigo-600" size={32} />
              </div>
            </div>
            <div className="absolute bottom-40 left-[5%] animate-bounce duration-[4000ms]">
              <div className="bg-white p-4 rounded-2xl shadow-xl border border-red-100 transform rotate-6">
                <Play className="text-red-600 fill-red-600" size={32} />
              </div>
            </div>
            <div className="absolute bottom-20 right-[5%] animate-pulse duration-[5000ms]">
              <div className="bg-white p-4 rounded-2xl shadow-xl border border-green-100 transform -rotate-6">
                <DollarSign className="text-green-600" size={32} />
              </div>
            </div>
            
            {/* Subtle Orbs */}
            <div className="absolute top-[-10%] right-[-5%] w-[30%] h-[30%] bg-blue-200/30 rounded-full blur-[100px]"></div>
            <div className="absolute bottom-[-10%] left-[-5%] w-[30%] h-[30%] bg-indigo-200/30 rounded-full blur-[100px]"></div>
          </div>

          <div className="relative max-w-4xl mx-auto space-y-16">
            {/* Hero Section */}
            <div className="text-center space-y-6">
              <h1 className="text-2xl md:text-5xl font-black leading-tight tracking-tight">
                Affiliates Get Ready to Promote <span className="italic text-blue-600">‘StudioCut’</span> – The Biggest AI Cinematic Video Launch of 2026!
              </h1>
              <p className="text-xl md:text-2xl font-bold italic underline decoration-blue-500/30 underline-offset-8 text-gray-600">
                Easily Make 5-Figure Affiliate Commissions & Win $10,000 in JV Prizes.
              </p>
            </div>

            <hr className="border-gray-100" />

            {/* Attention Section */}
            <div className="text-center space-y-8">
              <div className="space-y-6">
                <motion.div 
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  className="bg-gradient-to-r from-red-50 via-white to-red-50 p-6 md:p-10 rounded-[2.5rem] border border-red-100 shadow-xl shadow-red-500/5 max-w-4xl mx-auto relative overflow-hidden"
                >
                  <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-red-500 to-orange-500"></div>
                  <p className="text-red-600 font-black text-lg md:text-2xl leading-tight">
                    Attention: Every Other AI Video Tool Gives Users Raw Clips… <br />
                    <span className="text-gray-900">This One Delivers Finished - Edited - Cinematic Videos That Sell.</span>
                  </p>
                </motion.div>
                <p className="text-gray-500 italic flex items-center justify-center gap-2 text-lg">
                  Your subscribers are going to <Heart className="text-red-500 fill-red-500 animate-pulse" size={20} /> you for recommending this!
                </p>
              </div>

              <div className="space-y-6">
                <h2 className="text-2xl md:text-4xl font-black leading-tight tracking-tight">
                  The World's First Video AIEdit™ Technology That Doesn't Just Generate Videos – It Delivers Them Completely Finished...
                </h2>
                <p className="text-xl md:text-3xl font-black italic underline decoration-blue-500 underline-offset-8">
                  ...With Text, Transitions, Animations, Sound, & Voiceover
                </p>
                <p className="text-gray-500 font-bold text-lg md:text-xl max-w-2xl mx-auto">
                  All Done In Under 60 Seconds – Without Any Video Editing Skills, Or Facing Camera, Or Expensive Tools!
                </p>
              </div>
            </div>

            {/* Video Placeholder */}
            <div className="relative group">
              <div className="aspect-video bg-gray-900 rounded-3xl shadow-2xl flex items-center justify-center overflow-hidden border-8 border-white">
                <div className="text-white/20 font-black text-6xl md:text-9xl uppercase tracking-widest select-none">
                  VIDEO
                </div>
                <button className="absolute inset-0 flex items-center justify-center group-hover:scale-110 transition-transform">
                  <div className="w-20 h-20 bg-blue-600 rounded-full flex items-center justify-center shadow-2xl shadow-blue-500/50">
                    <Play className="text-white fill-white ml-1" size={32} />
                  </div>
                </button>
              </div>
            </div>

            {/* Feature Details */}
            <div className="space-y-12 text-center">
              <p className="text-lg md:text-xl font-bold leading-relaxed max-w-3xl mx-auto text-gray-700">
                StudioCut Plans The Storyboard, Directs The Entire Production, Generates All Assets, Adds Text – Transitions – Animations, & Delivers a Completely Finished Cinematic Video... All Under 60 Seconds!
              </p>

              <div className="flex items-center justify-center flex-wrap md:flex-nowrap gap-3 md:gap-6 text-xs md:text-sm font-bold text-red-700 bg-red-50/50 border border-red-100 py-3 px-6 rounded-2xl max-w-4xl mx-auto">
                <div className="flex items-center gap-1.5 whitespace-nowrap">
                  <X size={16} className="text-red-500" /> No Video Skills
                </div>
                <div className="hidden md:block w-1 h-1 bg-red-200 rounded-full"></div>
                <div className="flex items-center gap-1.5 whitespace-nowrap">
                  <X size={16} className="text-red-500" /> No Shooting Or Recording
                </div>
                <div className="hidden md:block w-1 h-1 bg-red-200 rounded-full"></div>
                <div className="flex items-center gap-1.5 whitespace-nowrap">
                  <X size={16} className="text-red-500" /> No Editing Software
                </div>
                <div className="hidden md:block w-1 h-1 bg-red-200 rounded-full"></div>
                <div className="flex items-center gap-1.5 whitespace-nowrap">
                  <X size={16} className="text-red-500" /> No Hiring Freelancers
                </div>
              </div>

              <div className="space-y-6 pt-8">
                <div className="inline-flex items-center gap-4 bg-green-50 border border-green-100 px-6 py-4 rounded-2xl shadow-sm">
                  <div className="bg-green-500 p-2 rounded-lg">
                    <Check className="text-white" size={24} />
                  </div>
                  <h3 className="text-xl md:text-3xl font-black tracking-tight">
                    Just Type Your Idea… Hit Generate… And Say “Action”
                  </h3>
                </div>
                <p className="text-lg md:text-xl font-bold italic text-gray-600">
                  StudioCut Takes Over & Delivers A Fully Edited, High-Converting Video In Minutes
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* Section 2: Affiliate Steps - Modern Web Format */}
        <section className="relative -mx-4 px-6 py-24 md:py-32 bg-gradient-to-br from-blue-700 via-indigo-900 to-slate-900 text-white rounded-[3rem] md:rounded-[5rem] overflow-hidden shadow-3xl">
          {/* Decorative background elements */}
          <div className="absolute top-0 left-0 w-full h-full opacity-20 pointer-events-none">
            <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-blue-500 rounded-full blur-[120px]"></div>
            <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-indigo-500 rounded-full blur-[120px]"></div>
          </div>

          <div className="relative max-w-6xl mx-auto grid lg:grid-cols-2 gap-16 lg:gap-24 items-center">
            {/* Left Column: Content */}
            <div className="space-y-8">
              <div className="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md border border-white/20 px-4 py-2 rounded-full text-xs font-black uppercase tracking-widest text-blue-300">
                <span className="w-2 h-2 bg-blue-400 rounded-full animate-pulse"></span>
                Affiliate Success Kit
              </div>
              <h2 className="text-4xl md:text-6xl font-black leading-[1.1] tracking-tight">
                Grab Your StudioCut Affiliate Link & <span className="text-blue-400">Launch Your Campaign</span> Instantly
              </h2>
              <p className="text-xl md:text-2xl font-medium text-blue-100/80 leading-relaxed">
                Start making 5-figure affiliate commissions without any guesswork using our high-converting DFY marketing kit.
              </p>
              
              <div className="flex flex-col sm:flex-row items-start sm:items-center gap-6 pt-4">
                <div className="flex -space-x-4">
                  {[1, 2, 3, 4].map((i) => (
                    <div key={i} className="w-14 h-14 rounded-full border-4 border-indigo-900 bg-gray-800 overflow-hidden shadow-xl">
                      <img 
                        src={`https://picsum.photos/seed/affiliate${i}/100/100`} 
                        alt="Top Affiliate" 
                        className="w-full h-full object-cover"
                        referrerPolicy="no-referrer"
                      />
                    </div>
                  ))}
                  <div className="w-14 h-14 rounded-full border-4 border-indigo-900 bg-blue-600 flex items-center justify-center text-xs font-black shadow-xl">
                    +1.2k
                  </div>
                </div>
                <div className="space-y-1">
                  <div className="text-sm font-black uppercase tracking-widest text-blue-300">Active Promoters</div>
                  <div className="text-xs font-bold text-blue-100/60">Joined by top-tier marketers worldwide</div>
                </div>
              </div>
            </div>

            {/* Right Column: Steps Cards */}
            <div className="grid gap-6">
              {/* Step 1 */}
              <div className="group bg-white/5 backdrop-blur-xl border border-white/10 p-8 rounded-[2rem] hover:bg-white/10 transition-all duration-500 hover:translate-x-2">
                <div className="flex items-start gap-6">
                  <div className="w-14 h-14 bg-blue-600 rounded-2xl flex items-center justify-center font-black text-2xl shrink-0 shadow-lg shadow-blue-600/20 group-hover:scale-110 transition-transform">1</div>
                  <div className="space-y-4 w-full">
                    <h3 className="text-xl font-black tracking-tight">Signup For Launch Updates</h3>
                    <div className="flex flex-col sm:flex-row gap-2">
                      <input 
                        type="email" 
                        placeholder="Enter your email" 
                        className="flex-1 bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm outline-none focus:border-blue-400 transition-colors placeholder:text-white/30" 
                      />
                      <button className="bg-blue-600 hover:bg-blue-500 px-6 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all active:scale-95">
                        JOIN
                      </button>
                    </div>
                  </div>
                </div>
              </div>

              {/* Step 2 */}
              <div className="group bg-white/5 backdrop-blur-xl border border-white/10 p-8 rounded-[2rem] hover:bg-white/10 transition-all duration-500 hover:translate-x-2">
                <div className="flex items-start gap-6">
                  <div className="w-14 h-14 bg-orange-500 rounded-2xl flex items-center justify-center font-black text-2xl shrink-0 shadow-lg shadow-orange-500/20 group-hover:scale-110 transition-transform">2</div>
                  <div className="space-y-4">
                    <h3 className="text-xl font-black tracking-tight">Grab Your JVZoo Link</h3>
                    <button className="bg-orange-500 hover:bg-orange-600 px-8 py-4 rounded-xl text-sm font-black uppercase tracking-widest transition-all flex items-center gap-3 shadow-xl shadow-orange-500/20 active:scale-95">
                      <ExternalLink size={18} /> GET LINK NOW
                    </button>
                  </div>
                </div>
              </div>

              {/* Step 3 */}
              <div className="group bg-white/5 backdrop-blur-xl border border-white/10 p-8 rounded-[2rem] hover:bg-white/10 transition-all duration-500 hover:translate-x-2">
                <div className="flex items-start gap-6">
                  <div className="w-14 h-14 bg-indigo-500 rounded-2xl flex items-center justify-center font-black text-2xl shrink-0 shadow-lg shadow-indigo-500/20 group-hover:scale-110 transition-transform">3</div>
                  <div className="space-y-4">
                    <h3 className="text-xl font-black tracking-tight">Access DFY Marketing Kit</h3>
                    <button className="bg-white text-indigo-900 hover:bg-blue-50 px-8 py-4 rounded-xl text-sm font-black uppercase tracking-widest transition-all flex items-center gap-3 shadow-xl active:scale-95">
                      <Play size={18} className="fill-indigo-900" /> DOWNLOAD KIT
                    </button>
                  </div>
                </div>
              </div>

              {/* Step 4 */}
              <div className="group bg-white/5 backdrop-blur-xl border border-white/10 p-8 rounded-[2rem] hover:bg-white/10 transition-all duration-500 hover:translate-x-2">
                <div className="flex items-start gap-6">
                  <div className="w-14 h-14 bg-green-500 rounded-2xl flex items-center justify-center font-black text-2xl shrink-0 shadow-lg shadow-green-500/20 group-hover:scale-110 transition-transform">4</div>
                  <div className="space-y-4">
                    <h3 className="text-xl font-black tracking-tight">Start Making Commissions</h3>
                    <div className="inline-flex items-center gap-4 bg-green-500/10 border border-green-500/20 px-6 py-3 rounded-2xl">
                      <div className="text-2xl font-black text-green-400">+$453.00</div>
                      <div className="text-[10px] font-black uppercase tracking-[0.2em] text-green-400/60">Per Sale</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* How It Works Section */}
        <section className="py-24 bg-white">
          <div className="max-w-6xl mx-auto px-4">
            <motion.div 
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              className="text-center mb-20"
            >
              <h2 className="text-3xl md:text-5xl font-black leading-tight tracking-tight max-w-4xl mx-auto italic">
                Here’s How You & Your Followers Can Create <span className="text-blue-600">Ready-To-Post Cinematic Videos</span> In Just 3 Easy Steps:
              </h2>
            </motion.div>

            <div className="space-y-32">
              {/* Step 1 */}
              <div className="grid md:grid-cols-2 gap-12 items-center">
                <motion.div 
                  initial={{ opacity: 0, x: -30 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  className="space-y-6"
                >
                  <div className="flex items-center gap-4">
                    <span className="text-4xl">🟢</span>
                    <h3 className="text-3xl font-black tracking-tight">Step 1: Add Your Idea Or Content</h3>
                  </div>
                  <div className="space-y-4 text-xl text-gray-700 font-medium">
                    <p>Start with anything you have…</p>
                    <ul className="space-y-3">
                      <li className="flex items-start gap-3">
                        <span className="shrink-0">👉</span>
                        <span>URL, blog, script, product details, notes, or just an idea</span>
                      </li>
                      <li className="flex items-start gap-3">
                        <span className="shrink-0">👉</span>
                        <span>You can also upload images, videos, or assets</span>
                      </li>
                    </ul>
                    <p className="font-bold text-gray-900">No need to create anything from scratch.</p>
                  </div>
                </motion.div>
                <motion.div 
                  initial={{ opacity: 0, x: 30 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  className="relative aspect-square bg-gray-50 rounded-[3rem] border-2 border-gray-100 overflow-hidden shadow-2xl group"
                >
                  <img 
                    src="https://harshaljadhav.com/wp-content/uploads/2026/04/studiocut_how_it_works_1.webp" 
                    alt="Step 1: Add Content" 
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                    referrerPolicy="no-referrer"
                  />
                </motion.div>
              </div>

              {/* Step 2 */}
              <div className="grid md:grid-cols-2 gap-12 items-center">
                <motion.div 
                  initial={{ opacity: 0, x: -30 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  className="relative aspect-square bg-gray-50 rounded-[3rem] border-2 border-gray-100 overflow-hidden shadow-2xl group md:order-1 order-2"
                >
                  <img 
                    src="https://harshaljadhav.com/wp-content/uploads/2026/04/studiocut_how_it_works_2.webp" 
                    alt="Step 2: AI Creation" 
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                    referrerPolicy="no-referrer"
                  />
                </motion.div>
                <motion.div 
                  initial={{ opacity: 0, x: 30 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  className="space-y-6 md:order-2 order-1"
                >
                  <div className="flex items-center gap-4">
                    <span className="text-4xl">🟢</span>
                    <h3 className="text-3xl font-black tracking-tight">Step 2: AI Creates & Edits The Entire Video</h3>
                  </div>
                  <div className="space-y-4 text-xl text-gray-700 font-medium">
                    <p>StudioCut takes over…</p>
                    <ul className="space-y-3">
                      <li className="flex items-start gap-3">
                        <span className="shrink-0">👉</span>
                        <span>Plans the storyboard</span>
                      </li>
                      <li className="flex items-start gap-3">
                        <span className="shrink-0">👉</span>
                        <span>Builds each scene</span>
                      </li>
                      <li className="flex items-start gap-3">
                        <span className="shrink-0">👉</span>
                        <span>Generates visuals & voice</span>
                      </li>
                      <li className="flex items-start gap-3">
                        <span className="shrink-0">👉</span>
                        <span>Adds text, animations, transitions & captions</span>
                      </li>
                      <li className="flex items-start gap-3">
                        <span className="shrink-0">👉</span>
                        <span>And delivers a fully edited, ready-to-post video</span>
                      </li>
                    </ul>
                  </div>
                </motion.div>
              </div>

              {/* Step 3 */}
              <div className="grid md:grid-cols-2 gap-12 items-center">
                <motion.div 
                  initial={{ opacity: 0, x: -30 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  className="space-y-6"
                >
                  <div className="flex items-center gap-4">
                    <span className="text-4xl">🟢</span>
                    <h3 className="text-3xl font-black tracking-tight">Step 3: Hit Publish In 1-Click!</h3>
                  </div>
                  <div className="space-y-4 text-xl text-gray-700 font-medium">
                    <p>Want changes? You’re in control.</p>
                    <ul className="space-y-3">
                      <li className="flex items-start gap-3">
                        <span className="shrink-0">👉</span>
                        <span>Edit scenes individually (scene-level customization)</span>
                      </li>
                      <li className="flex items-start gap-3">
                        <span className="shrink-0">👉</span>
                        <span>Or skip editing and download instantly</span>
                      </li>
                    </ul>
                  </div>
                </motion.div>
                <motion.div 
                  initial={{ opacity: 0, x: 30 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  className="relative aspect-square bg-gray-50 rounded-[3rem] border-2 border-gray-100 overflow-hidden shadow-2xl group"
                >
                  <img 
                    src="https://harshaljadhav.com/wp-content/uploads/2026/04/studiocut_how_it_works_3.webp" 
                    alt="Step 3: Publish" 
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                    referrerPolicy="no-referrer"
                  />
                </motion.div>
              </div>
            </div>

            {/* That's It Footer */}
            <motion.div 
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              className="mt-32 text-center space-y-8"
            >
              <h2 className="text-5xl md:text-7xl font-black tracking-tighter">That’s It!</h2>
              <div className="max-w-4xl mx-auto space-y-6">
                <p className="text-xl md:text-2xl font-bold text-gray-600 leading-relaxed">
                  StudioCut helps users go from content to fully edited video without video editing skills, without being on camera, and without using expensive, complicated tools.
                </p>
                <p className="text-xl md:text-3xl font-black leading-tight tracking-tight italic">
                  StudioCut gives users the power to customize every scene and element of the video — something no other AI video tool offers at this level — without needing any editing skills.
                </p>
              </div>
            </motion.div>
          </div>
        </section>

        {/* Testimonials Section */}
        <section className="relative -mx-4 px-6 py-24 md:py-32 bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-950 text-white rounded-[3rem] md:rounded-[5rem] overflow-hidden shadow-3xl">
          {/* Subtle Grid Pattern */}
          <div className="absolute inset-0 opacity-10 pointer-events-none" style={{ backgroundImage: 'radial-gradient(#fff 1px, transparent 1px)', backgroundSize: '32px 32px' }}></div>
          
          <div className="relative max-w-6xl mx-auto space-y-20">
            <div className="text-center space-y-4">
              <motion.p 
                initial={{ opacity: 0, y: 10 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                className="text-blue-400 font-black uppercase tracking-[0.3em] text-sm"
              >
                No Wonder…
              </motion.p>
              <motion.h2 
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: 0.1 }}
                className="text-4xl md:text-6xl font-black leading-tight tracking-tight"
              >
                StudioCut Is Trusted By <span className="text-blue-400">1200+ Early Beta Users!</span>
              </motion.h2>
            </div>

            <div className="grid md:grid-cols-2 gap-8">
              {[
                {
                  title: "“I Finally Got Videos I Could Post Instantly…”",
                  quote: "“I’ve tried a bunch of AI video tools, but most of them still required editing afterward. With StudioCut, I actually got a finished video I could post right away. That alone saved me hours.”",
                  author: "Mark Davidson",
                  role: "Digital Marketer",
                  image: "https://picsum.photos/seed/mark/200/200"
                },
                {
                  title: "“The Scene-Level Control Is What Sold Me…”",
                  quote: "“What surprised me the most was the scene-level control. I could tweak each part of the video without using any editing software. It feels simple but still gives you real control.”",
                  author: "Sarah Thompson",
                  role: "Content Creator",
                  image: "https://picsum.photos/seed/sarah/200/200"
                },
                {
                  title: "“My Product Videos Took Minutes Instead Of Days…”",
                  quote: "“I used StudioCut to create product videos for my store, and honestly, it cut my production time from days to minutes. I’ve already started seeing better engagement on my ads.”",
                  author: "Jason Mitchell",
                  role: "E-commerce Seller",
                  image: "https://picsum.photos/seed/jason/200/200"
                },
                {
                  title: "“I Can Finally Stay Consistent With Video…”",
                  quote: "“I’m not a video editor at all, so I usually avoid video content. But with StudioCut, I just typed my idea and got something that looked clean and professional. It made consistency much easier.”",
                  author: "Emily Roberts",
                  role: "Coach & Course Creator",
                  image: "https://picsum.photos/seed/emily/200/200"
                }
              ].map((t, i) => (
                <motion.div 
                  key={i}
                  initial={{ opacity: 0, scale: 0.95 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  viewport={{ once: true }}
                  transition={{ delay: i * 0.1 }}
                  className="group bg-white/5 backdrop-blur-xl border border-white/10 p-10 rounded-[3rem] hover:bg-white/10 transition-all duration-500 hover:-translate-y-2 flex flex-col justify-between"
                >
                  <div className="space-y-6">
                    <h3 className="text-2xl font-black tracking-tight text-blue-300 italic">
                      {t.title}
                    </h3>
                    <p className="text-lg text-blue-100/70 leading-relaxed font-medium">
                      {t.quote}
                    </p>
                  </div>
                  
                  <div className="mt-10 flex items-center gap-6">
                    <div className="w-20 h-20 rounded-full border-4 border-blue-500/30 overflow-hidden shadow-2xl group-hover:scale-110 transition-transform duration-500">
                      <img 
                        src={t.image} 
                        alt={t.author} 
                        className="w-full h-full object-cover"
                        referrerPolicy="no-referrer"
                      />
                    </div>
                    <div>
                      <div className="text-xl font-black tracking-tight">{t.author}</div>
                      <div className="text-sm font-bold text-blue-400 uppercase tracking-widest">{t.role}</div>
                    </div>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </section>

        {/* Track Record Section */}
        <section className="py-24 bg-white">
          <div className="max-w-6xl mx-auto px-4 space-y-20">
            {/* Header */}
            <div className="text-center space-y-6">
              <motion.h2 
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                className="text-3xl md:text-5xl font-black leading-tight tracking-tight"
              >
                🏆 Why Affiliates <span className="text-blue-600">TRUST & Promote</span> Our Launches
              </motion.h2>
              <div className="space-y-2">
                <p className="text-xl md:text-2xl font-bold text-gray-900">You’re Not Promoting With A Newbie Vendor…</p>
                <p className="text-xl md:text-2xl font-black text-blue-600 italic">You’re Partnering With A Proven Team That Delivers Results</p>
              </div>
            </div>

            {/* Image Grid */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {[1, 2, 3].map((i) => (
                <motion.div 
                  key={i}
                  initial={{ opacity: 0, scale: 0.9 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  viewport={{ once: true }}
                  transition={{ delay: i * 0.1 }}
                  className="aspect-[4/3] bg-gray-50 rounded-[2.5rem] border-2 border-gray-100 overflow-hidden shadow-xl group"
                >
                  <img 
                    src={`https://picsum.photos/seed/track${i}/800/600`} 
                    alt={`Track Record ${i}`} 
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                    referrerPolicy="no-referrer"
                  />
                </motion.div>
              ))}
            </div>

            {/* Features Grid */}
            <div className="grid md:grid-cols-3 gap-12">
              {/* Column 1 */}
              <motion.div 
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                className="space-y-8"
              >
                <h3 className="text-2xl font-black tracking-tight flex items-center gap-3">
                  <span className="text-3xl">💰</span> Proven Track Record That Speaks For Itself
                </h3>
                <div className="space-y-6">
                  <div className="space-y-2">
                    <div className="font-black text-gray-900 flex items-center gap-2">🏆 JVZoo Top Performance Award Winners</div>
                    <p className="text-gray-600 font-medium">Recognized for delivering high-performing launches.</p>
                  </div>
                  <div className="space-y-2">
                    <div className="font-black text-gray-900 flex items-center gap-2">🏆 JVZoo POTD Award Winners</div>
                    <p className="text-gray-600 font-medium">Our past launch have always won JVZoo POTD</p>
                  </div>
                  <div className="space-y-2">
                    <div className="font-black text-gray-900 flex items-center gap-2">💸 $570,000+ In Revenue Generated From Past Launches</div>
                    <p className="text-gray-600 font-medium">Real products. Real buyers. Real results.</p>
                  </div>
                  <div className="space-y-2">
                    <div className="font-black text-gray-900 flex items-center gap-2">🤝 $250,000+ Paid Out To Affiliates</div>
                    <p className="text-gray-600 font-medium">We make sure our partners get rewarded — generously.</p>
                  </div>
                </div>
              </motion.div>

              {/* Column 2 */}
              <motion.div 
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: 0.1 }}
                className="space-y-8"
              >
                <h3 className="text-2xl font-black tracking-tight flex items-center gap-3">
                  <span className="text-3xl">📈</span> Built For Affiliate Success (Not Just Another Launch)
                </h3>
                <div className="space-y-6">
                  <div className="space-y-2">
                    <div className="font-black text-gray-900 flex items-center gap-2">🚀 Top Affiliates Consistently Hit 4 to 5-Figure Commissions</div>
                    <p className="text-gray-600 font-medium">Our launches are structured to help affiliates win — not just participate.</p>
                  </div>
                  <div className="space-y-2">
                    <div className="font-black text-gray-900 flex items-center gap-2">🔥 7-Figure Funnel Designer & Copywriter Involved</div>
                    <p className="text-gray-600 font-medium">Every word, every step, every design optimized for maximum conversions.</p>
                  </div>
                  <div className="space-y-2">
                    <div className="font-black text-gray-900 flex items-center gap-2">🏆 We Always Support Our Top JV Partners</div>
                    <p className="text-gray-600 font-medium">Help us make this a 6-figure launch and we’ll be there for your launch, as always.</p>
                  </div>
                </div>
              </motion.div>

              {/* Column 3 */}
              <motion.div 
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: 0.2 }}
                className="space-y-8"
              >
                <h3 className="text-2xl font-black tracking-tight flex items-center gap-3">
                  <span className="text-3xl">🎯</span> Experience + Execution = Results
                </h3>
                <div className="space-y-6">
                  <div className="space-y-2">
                    <div className="font-black text-gray-900 flex items-center gap-2">🧠 15+ Years Of Experience In SaaS & Digital Marketing</div>
                    <p className="text-gray-600 font-medium">We’ve over 15 years experience in JVZoo space & understand what sells.</p>
                  </div>
                  <div className="space-y-2">
                    <div className="font-black text-gray-900 flex items-center gap-2">📊 Launches Built With Strategy, Not Guesswork</div>
                    <p className="text-gray-600 font-medium">From positioning to funnel — everything is engineered for performance.</p>
                  </div>
                  <div className="space-y-2">
                    <div className="font-black text-gray-900 flex items-center gap-2">💡 Product & Funnel is Designed Fulfil Real Market Demand</div>
                    <p className="text-gray-600 font-medium">Our product solves real problems many creators are facing. So it’ll sell like a hot cake.</p>
                  </div>
                </div>
              </motion.div>
            </div>

            {/* Bottom Line */}
            <motion.div 
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              className="bg-blue-50 rounded-[3rem] p-12 text-center space-y-8 border-2 border-blue-100"
            >
              <h3 className="text-4xl font-black tracking-tight">Bottom Line</h3>
              <div className="space-y-4 max-w-3xl mx-auto">
                <p className="text-xl font-bold text-gray-600">When you promote StudioCut…</p>
                <p className="text-2xl font-black text-gray-900">You’re not taking a risk.</p>
                <p className="text-2xl font-black text-blue-600">You’re partnering with a team that knows how to launch, convert, and pay affiliates.</p>
                <p className="text-xl font-bold text-gray-600 italic">Which means more confidence… more sales… and more commissions for you</p>
              </div>
            </motion.div>
          </div>
        </section>

        {/* Section 3: Deep Dive & Why Promote */}
        <section className="space-y-24 py-12">
          <div className="text-center space-y-6 max-w-4xl mx-auto">
            <h2 className="text-3xl md:text-5xl font-black leading-tight tracking-tight">
              Tired Of Promoting So Called <span className="text-red-600">“Cool”</span> AI Tools That Don’t Convert?
            </h2>
            <p className="text-xl md:text-2xl font-bold text-gray-600">
              Promote <span className="text-blue-600">StudioCut</span> That Delivers Fully-Edited, Studio-Quality Cinematic Videos Your Audience Will Pay For Instantly
            </p>
            <div className="inline-flex items-center gap-2 bg-blue-50 text-blue-700 px-6 py-2 rounded-full text-sm font-black uppercase tracking-widest border border-blue-100">
              <Zap size={16} className="fill-blue-700" /> This Isn’t Another AI Video Tool…
            </div>
            <p className="text-2xl md:text-3xl font-black italic">
              It’s A Video Production House Packed Inside ONE Powerful SaaS
            </p>
          </div>

          {/* Feature Block 1 */}
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div className="space-y-6 order-2 md:order-1">
              <div className="flex items-center gap-3 text-blue-600 font-black uppercase tracking-widest text-sm">
                <Flame size={20} /> Why Affiliates Are Getting Behind It Fast
              </div>
              <h3 className="text-3xl md:text-4xl font-black leading-tight">
                Let’s be real… Most AI video tools look exciting at first —
              </h3>
              <p className="text-lg text-gray-600 leading-relaxed">
                But once users try them, they hit the same wall:
              </p>
              <ul className="space-y-4">
                {[
                  "Raw clips that need manual assembly",
                  "Half-done videos without context",
                  "Endless editing required to make it usable"
                ].map((item, i) => (
                  <li key={i} className="flex items-center gap-3 font-bold text-gray-700">
                    <div className="bg-red-100 p-1 rounded-full"><X size={14} className="text-red-600" /></div>
                    {item}
                  </li>
                ))}
              </ul>
              <p className="text-xl font-black text-red-600 italic">
                And that’s where conversions drop.
              </p>
            </div>
            <div className="rounded-[2rem] overflow-hidden shadow-2xl order-1 md:order-2 group">
              <img 
                src="https://harshaljadhav.com/wp-content/uploads/2026/04/section3-1.webp" 
                alt="AI Video Director vs Others" 
                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                referrerPolicy="no-referrer"
              />
            </div>
          </div>

          {/* Feature Block 2 */}
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div className="rounded-[2rem] overflow-hidden shadow-2xl group">
              <img 
                src="https://harshaljadhav.com/wp-content/uploads/2026/04/section3-2-1.webp" 
                alt="AI Video Director Game Changer" 
                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                referrerPolicy="no-referrer"
              />
            </div>
            <div className="space-y-6">
              <div className="flex items-center gap-3 text-green-600 font-black uppercase tracking-widest text-sm">
                <Rocket size={20} /> StudioCut Changes The Game
              </div>
              <h3 className="text-3xl md:text-4xl font-black leading-tight">
                Instead of giving users pieces of a video…
              </h3>
              <ul className="space-y-4">
                {[
                  "It delivers a fully edited, cinematic video",
                  "Complete with text, transitions, animations, captions & sound",
                  "Ready to publish in under 60 seconds"
                ].map((item, i) => (
                  <li key={i} className="flex items-center gap-3 font-bold text-gray-700">
                    <div className="bg-green-100 p-1 rounded-full"><Check size={14} className="text-green-600" /></div>
                    {item}
                  </li>
                ))}
              </ul>
              <p className="text-xl font-black text-blue-600 italic">
                Your audience gets a finished product, not a project.
              </p>
            </div>
          </div>

          {/* Feature Block 3 */}
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div className="space-y-6 order-2 md:order-1">
              <div className="flex items-center gap-3 text-indigo-600 font-black uppercase tracking-widest text-sm">
                <Zap size={20} /> Scene-Level Customization
              </div>
              <h3 className="text-3xl md:text-4xl font-black leading-tight">
                Automation Meets Total Control
              </h3>
              <p className="text-lg text-gray-600 leading-relaxed">
                While the AI does the heavy lifting, users can still fine-tune every scene. Change messaging, swap visuals, or adjust the storytelling flow with a single click.
              </p>
              <div className="p-6 bg-indigo-50 rounded-2xl border border-indigo-100">
                <p className="font-bold text-indigo-900 italic">
                  "It's like having a world-class director who actually listens to your feedback."
                </p>
              </div>
            </div>
            <div className="rounded-[2rem] overflow-hidden shadow-2xl order-1 md:order-2 group">
              <img 
                src="https://harshaljadhav.com/wp-content/uploads/2026/04/section3-3-1.webp" 
                alt="Scene Customization" 
                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                referrerPolicy="no-referrer"
              />
            </div>
          </div>

          {/* Feature Block 4: Commissions */}
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div className="rounded-[2rem] overflow-hidden shadow-2xl group">
              <img 
                src="https://harshaljadhav.com/wp-content/uploads/2026/04/section3-4-1.webp" 
                alt="Affiliate Earnings" 
                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                referrerPolicy="no-referrer"
              />
            </div>
            <div className="space-y-6">
              <div className="flex items-center gap-3 text-orange-600 font-black uppercase tracking-widest text-sm">
                <Trophy size={20} /> Built To Make More Per Sale
              </div>
              <h3 className="text-3xl md:text-4xl font-black leading-tight">
                High-Value Funnel & Instant Payouts
              </h3>
              <ul className="space-y-4">
                {[
                  "50% Commissions across the entire funnel",
                  "High-converting OTOs designed for maximum EPCs",
                  "$10,000 JV Prize Pool for top performers",
                  "Instant payments via JVZooPay"
                ].map((item, i) => (
                  <li key={i} className="flex items-center gap-3 font-bold text-gray-700">
                    <div className="bg-orange-100 p-1 rounded-full"><DollarSign size={14} className="text-orange-600" /></div>
                    {item}
                  </li>
                ))}
              </ul>
            </div>
          </div>

          {/* Bottom Line Summary */}
          <div className="bg-slate-900 text-white p-12 md:p-20 rounded-[3rem] text-center space-y-10 relative overflow-hidden">
            <div className="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none">
              <div className="absolute top-[-20%] left-[-10%] w-[50%] h-[50%] bg-blue-500 rounded-full blur-[150px]"></div>
              <div className="absolute bottom-[-20%] right-[-10%] w-[50%] h-[50%] bg-indigo-500 rounded-full blur-[150px]"></div>
            </div>
            
            <div className="relative space-y-6">
              <h2 className="text-3xl md:text-5xl font-black tracking-tight">The Bottom Line?</h2>
              <p className="text-xl md:text-2xl text-blue-100/80 max-w-3xl mx-auto leading-relaxed">
                You’re promoting a tool that delivers <span className="text-blue-400 font-black">finished results instantly</span>, offers control without complexity, and solves a deep pain point for every marketer.
              </p>
              <div className="flex flex-wrap justify-center gap-4 pt-6">
                <div className="bg-white/10 backdrop-blur-md border border-white/20 px-6 py-3 rounded-2xl flex items-center gap-3">
                  <TrendingUp className="text-blue-400" />
                  <span className="font-bold">Higher Conversions</span>
                </div>
                <div className="bg-white/10 backdrop-blur-md border border-white/20 px-6 py-3 rounded-2xl flex items-center gap-3">
                  <Users className="text-indigo-400" />
                  <span className="font-bold">Happy Subscribers</span>
                </div>
                <div className="bg-white/10 backdrop-blur-md border border-white/20 px-6 py-3 rounded-2xl flex items-center gap-3">
                  <Zap className="text-orange-400" />
                  <span className="font-bold">Massive Commissions</span>
                </div>
              </div>
              <button className="mt-8 bg-blue-600 hover:bg-blue-500 text-white px-10 py-5 rounded-full text-lg font-black uppercase tracking-widest transition-all shadow-2xl shadow-blue-600/30 active:scale-95 flex items-center gap-3 mx-auto">
                GET YOUR LINK NOW <ArrowRight size={24} />
              </button>
            </div>
          </div>
        </section>

        {/* Section 4: The Harsh Truth */}
        <section className="py-20 space-y-24 border-t border-gray-100">
          <div className="text-center space-y-6 max-w-4xl mx-auto">
            <h2 className="text-red-600 font-black text-xl md:text-2xl uppercase tracking-[0.2em]">
              The Harsh Truth About Video Creation That No One Talks About!
            </h2>
            <div className="flex items-center justify-center gap-4 text-3xl md:text-5xl font-black tracking-tight">
              <Clapperboard className="text-gray-900" size={48} />
              <span>Creating Videos Should Be Easy…</span>
            </div>
            <p className="text-xl md:text-2xl font-bold italic text-gray-700">
              But For Most People, It’s Still A <span className="text-red-600 underline decoration-red-200 underline-offset-8">Frustrating, Time-Draining & Expensive Mess</span>
            </p>
          </div>

          {/* Block 1: Let's be real */}
          <div className="space-y-16 max-w-6xl mx-auto px-4">
            <div className="text-center space-y-4">
              <p className="text-xl font-bold text-gray-600">Let’s be real for a second…</p>
              <p className="text-2xl md:text-3xl font-black leading-tight">
                You <span className="italic">know</span> video is the fastest way to get attention today.
              </p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
              <div className="text-center space-y-6 flex flex-col items-center p-10 rounded-[3rem] bg-gradient-to-br from-blue-50/80 to-white/40 backdrop-blur-md border border-white shadow-xl hover:shadow-2xl transition-all hover:-translate-y-1">
                <BarChart3 className="text-blue-600" size={64} />
                <p className="text-xl md:text-2xl font-medium text-gray-900 leading-tight">
                  <span className="font-black">91% of businesses</span> are already <br /> using video
                </p>
              </div>
              <div className="text-center space-y-6 flex flex-col items-center p-10 rounded-[3rem] bg-gradient-to-br from-red-50/80 to-white/40 backdrop-blur-md border border-white shadow-xl hover:shadow-2xl transition-all hover:-translate-y-1">
                <TrendingUp className="text-red-500" size={64} />
                <p className="text-xl md:text-2xl font-medium text-gray-900 leading-tight">
                  Video can <span className="font-black">boost conversions</span> <br /> <span className="font-black">by 20% to 80%</span>
                </p>
              </div>
              <div className="text-center space-y-6 flex flex-col items-center p-10 rounded-[3rem] bg-gradient-to-br from-orange-50/80 to-white/40 backdrop-blur-md border border-white shadow-xl hover:shadow-2xl transition-all hover:-translate-y-1">
                <Rocket className="text-orange-500" size={64} />
                <p className="text-xl md:text-2xl font-medium text-gray-900 leading-tight">
                  <span className="font-black">Short-form videos are</span> <br /> <span className="font-black">dominating</span> every platform
                </p>
              </div>
            </div>
          </div>

          <div className="text-center space-y-4">
            <p className="text-2xl font-black text-gray-400 italic">And yet…</p>
            <h3 className="text-2xl md:text-4xl font-black tracking-tight">
              Most people still struggle to create even a few videos consistently.
            </h3>
          </div>

          {/* Block 2: Harder than it should be */}
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div className="space-y-8">
              <h3 className="text-2xl md:text-3xl font-black leading-tight flex items-start gap-3">
                <XCircle className="text-red-600 shrink-0 mt-1" size={32} />
                <span>Because Turning An Idea Into A Finished Video Is Way Harder Than It Should Be</span>
              </h3>
              <div className="space-y-4 text-lg font-bold text-gray-600">
                <p>You sit down with a simple idea…</p>
                <p className="italic text-gray-400">“Let me just create a quick video for this…”</p>
                <p>But what actually happens?</p>
              </div>
              <ul className="space-y-4">
                {[
                  "You open one tool… then another… then another",
                  "You generate a few clips… but they don’t match",
                  "The flow feels off… scenes don’t connect",
                  "The video looks incomplete… unpolished… amateur"
                ].map((item, i) => (
                  <li key={i} className="flex items-center gap-3 font-bold text-gray-700">
                    <div className="text-orange-500"><ChevronRight size={20} /></div>
                    {item}
                  </li>
                ))}
              </ul>
              <div className="pt-4 space-y-2">
                <p className="text-xl font-black text-gray-400 italic">And suddenly…</p>
                <div className="flex items-center gap-3 text-2xl font-black text-red-600">
                  <Clock size={28} />
                  What should’ve taken minutes turns into hours of work
                </div>
              </div>
            </div>
            <div className="rounded-[2rem] overflow-hidden shadow-2xl border-4 border-white">
              <img 
                src="https://harshaljadhav.com/wp-content/uploads/2026/04/section4-1.webp" 
                alt="Frustrating Process" 
                className="w-full h-full object-cover"
                referrerPolicy="no-referrer"
              />
            </div>
          </div>

          {/* Block 3: Fighting the process */}
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div className="rounded-[2rem] overflow-hidden shadow-2xl border-4 border-white order-2 md:order-1">
              <img 
                src="https://harshaljadhav.com/wp-content/uploads/2026/04/section4-2.webp" 
                alt="Fighting the Process" 
                className="w-full h-full object-cover"
                referrerPolicy="no-referrer"
              />
            </div>
            <div className="space-y-8 order-1 md:order-2">
              <h3 className="text-2xl md:text-3xl font-black leading-tight flex items-start gap-3">
                <XCircle className="text-red-600 shrink-0 mt-1" size={32} />
                <span>You’re Not Creating Videos… You’re Fighting The Process</span>
              </h3>
              <p className="text-lg font-bold text-gray-600">Most people don’t even realize this at first.</p>
              <div className="space-y-4">
                <p className="font-black text-gray-400 uppercase tracking-widest text-sm">They think:</p>
                <ul className="space-y-3">
                  {[
                    "“Maybe I need better prompts…”",
                    "“Maybe I need better tools…”",
                    "“Maybe I need to learn editing…”"
                  ].map((item, i) => (
                    <li key={i} className="flex items-center gap-3 font-bold text-gray-700 italic">
                      <div className="text-orange-500"><ChevronRight size={18} /></div>
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
              <div className="space-y-4">
                <p className="text-xl font-black text-red-600">But the truth is… The entire process is broken.</p>
                <p className="font-bold text-gray-600">Because right now, creating a video means:</p>
                <ul className="space-y-3">
                  {[
                    "Switching between 3–5 different tools",
                    "Trying to “piece together” random outputs",
                    "Fixing text, timing, captions, transitions manually",
                    "Constantly tweaking things that don’t look right"
                  ].map((item, i) => (
                    <li key={i} className="flex items-center gap-3 font-bold text-gray-700">
                      <div className="w-1.5 h-1.5 bg-gray-400 rounded-full"></div>
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>

          {/* Block 4: Where people get stuck */}
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div className="space-y-8">
              <h3 className="text-2xl md:text-3xl font-black leading-tight flex items-start gap-3">
                <XCircle className="text-red-600 shrink-0 mt-1" size={32} />
                <span>And This Is Where Most People Get Stuck</span>
              </h3>
              <p className="text-lg font-bold text-gray-600">You either:</p>
              <ul className="space-y-4">
                <li className="flex items-center gap-3 font-bold text-gray-700">
                  <div className="text-orange-500"><ChevronRight size={20} /></div>
                  Spend hours editing something that still doesn’t feel right
                </li>
                <li className="flex items-center gap-3 font-bold text-gray-700">
                  <div className="text-orange-500"><ChevronRight size={20} /></div>
                  Or give up halfway because it’s too frustrating
                </li>
              </ul>
              <p className="text-xl font-black text-gray-400 italic">
                And this happens again… and again… and again.
              </p>
            </div>
            <div className="rounded-[2rem] overflow-hidden shadow-2xl border-4 border-white">
              <img 
                src="https://harshaljadhav.com/wp-content/uploads/2026/04/section4-3-1.webp" 
                alt="Getting Stuck" 
                className="w-full h-full object-cover"
                referrerPolicy="no-referrer"
              />
            </div>
          </div>

          {/* Block 5: Other options */}
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div className="rounded-[2rem] overflow-hidden shadow-2xl border-4 border-white order-2 md:order-1">
              <img 
                src="https://harshaljadhav.com/wp-content/uploads/2026/04/section4-4.webp" 
                alt="Outsourcing Issues" 
                className="w-full h-full object-cover"
                referrerPolicy="no-referrer"
              />
            </div>
            <div className="space-y-8 order-1 md:order-2">
              <h3 className="text-2xl md:text-3xl font-black leading-tight flex items-start gap-3">
                <XCircle className="text-red-600 shrink-0 mt-1" size={32} />
                <span>The “Other Options” Aren’t Any Better Either</span>
              </h3>
              <div className="space-y-4">
                <p className="text-lg font-bold text-gray-600">So you think…</p>
                <p className="italic text-gray-400 font-bold">“Let me just outsource this…”</p>
                <p className="font-bold text-gray-600">But then:</p>
                <ul className="space-y-3">
                  {[
                    "Freelancers charge $200–$800 per video",
                    "Agencies charge $1,000–$5,000+/month",
                    "Turnaround takes days or weeks",
                    "Revisions become another headache"
                  ].map((item, i) => (
                    <li key={i} className="flex items-center gap-3 font-bold text-red-600">
                      <X size={20} />
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
              <div className="space-y-4">
                <p className="text-lg font-bold text-gray-600">Or worse… You try to learn editing yourself</p>
                <p className="font-bold text-gray-600">And end up stuck in:</p>
                <ul className="space-y-3">
                  {[
                    "Complicated timelines",
                    "Keyframes, layers, effects",
                    "Hours of tutorials just to make one decent video"
                  ].map((item, i) => (
                    <li key={i} className="flex items-center gap-3 font-bold text-red-600">
                      <X size={20} />
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>

          {/* Block 6: Frustrating Part */}
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div className="space-y-8">
              <h3 className="text-2xl md:text-3xl font-black leading-tight flex items-start gap-3">
                <XCircle className="text-red-600 shrink-0 mt-1" size={32} />
                <span>And Here’s The Most Frustrating Part…</span>
              </h3>
              <p className="text-lg font-bold text-gray-600 leading-relaxed">
                Even the so-called “AI video tools” don’t actually fix this.
              </p>
              <div className="space-y-4">
                <p className="font-bold text-gray-600">They promise simplicity…</p>
                <p className="font-bold text-gray-600">But what do they really give you?</p>
                <ul className="space-y-3">
                  {[
                    "Random clips",
                    "Half-done videos",
                    "Outputs that still need editing"
                  ].map((item, i) => (
                    <li key={i} className="flex items-center gap-3 font-bold text-gray-700">
                      <div className="text-orange-500"><ChevronRight size={20} /></div>
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
              <div className="space-y-2">
                <p className="text-xl font-black text-gray-400 italic">Which means…</p>
                <p className="text-2xl font-black text-red-600">
                  You’re still doing the hardest part yourself
                </p>
              </div>
            </div>
            <div className="rounded-[2rem] overflow-hidden shadow-2xl border-4 border-white">
              <img 
                src="https://harshaljadhav.com/wp-content/uploads/2026/04/section4-5.webp" 
                alt="Still Hard Work" 
                className="w-full h-full object-cover"
                referrerPolicy="no-referrer"
              />
            </div>
          </div>
        </section>

        <ProblemSolution />

        <Section6 />

        <Section7 />

        <Section8 />

        <Section3Steps />

        <Section9 />

        <VideoCarouselSection />

        <BestPartSection />

        <FreelancersSection />

        <Testimonial2 />

        <MarketCTA />

        <Section10 />

        <Section11 />

        <Section12 />

        <Funnel />

        <AffiliateContest />

        <Section13 />

        {/* Launch Details */}
        <section className="pt-12 border-t border-gray-100 text-center space-y-10">
          <div className="space-y-8">
            <div className="flex items-center justify-center gap-3 text-2xl md:text-4xl font-black tracking-tight">
              <Calendar className="text-blue-600" size={40} />
              <span>Mark Your Calendar: <span className="text-blue-600">May 1st, 2026.</span></span>
            </div>

            <div className="flex flex-wrap justify-center gap-8 md:gap-12">
              <div className="flex items-center gap-3 font-bold text-lg text-gray-700">
                <div className="bg-green-100 p-2 rounded-full">
                  <DollarSign className="text-green-600" size={20} />
                </div>
                Make 50% Commissions.
              </div>
              <div className="flex items-center gap-3 font-bold text-lg text-gray-700">
                <div className="bg-orange-100 p-2 rounded-full">
                  <DollarSign className="text-orange-600" size={20} />
                </div>
                Earn up to $453/Sale.
              </div>
              <div className="flex items-center gap-3 font-bold text-lg text-gray-700">
                <div className="bg-blue-100 p-2 rounded-full">
                  <DollarSign className="text-blue-600" size={20} />
                </div>
                Win $10,000 in JV Prizes.
              </div>
            </div>
          </div>
        </section>
      </main>

      <footer className="bg-gray-50 py-12 mt-20 border-t border-gray-200">
        <div className="max-w-5xl mx-auto px-4 text-center space-y-4">
          <div className="font-black text-xl tracking-tighter text-gray-400">
            LOGO
          </div>
          <p className="text-gray-400 text-sm font-medium">
            © 2026 StudioCut Launch. All Rights Reserved.
          </p>
        </div>
      </footer>
    </div>
  );
}
