---
---

<section class="relative py-32 md:py-48 px-6 md:px-12 bg-[#080a09] text-white overflow-hidden -mt-px" id="problem-solution">
  <!-- Video Background with Enhanced Parallax -->
  <div class="absolute inset-0 z-0 h-[130%] -top-[15%] pointer-events-none overflow-hidden">
    <video 
      autoplay 
      muted 
      loop 
      playsinline
      class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 min-w-[150%] min-h-[150%] object-cover -rotate-90 -scale-y-100 problem-parallax-video opacity-20 saturate-150 contrast-125 brightness-110"
    >
      <source src="/videos/chaos-to-clarity.mp4" type="video/mp4">
    </video>
    <!-- Richer, colored overlays -->
    <div class="absolute inset-0 bg-gradient-to-b from-[#080a09] via-[#080a09]/60 to-[#080a09] opacity-80"></div>
    <div class="absolute inset-0 bg-gradient-to-tr from-[#00FF88]/5 via-transparent to-purple-500/5 opacity-40"></div>
    <div class="absolute inset-0 bg-[#080a09]/50"></div>
  </div>

  <!-- Scroll Progress Bar -->
  <div class="absolute right-6 md:right-12 top-1/2 -translate-y-1/2 w-[1px] h-64 bg-white/10 z-20 hidden md:block">
    <div class="problem-progress absolute top-0 left-0 w-full bg-accent transition-all duration-75" style="height: 0%;"></div>
  </div>

  <div class="max-w-7xl mx-auto relative z-10 problem-content">
    <!-- PROBLEM HEADER -->
    <div class="flex items-center gap-4 mb-12 problem-header opacity-0 translate-y-8">
      <span class="text-mono text-accent text-xs tracking-ultra uppercase border border-accent/30 px-3 py-1 rounded-full bg-accent/10 backdrop-blur-sm">002 / The Problem</span>
    </div>

    <!-- PROBLEM BENTO GRID -->
    <div class="grid grid-cols-1 md:grid-cols-6 gap-6 mb-32">
      
      <!-- Card 1: Metric (Hero) -->
      <div class="col-span-1 md:col-span-3 row-span-1 md:row-span-2 bento-card bg-white/[0.03] backdrop-blur-xl border border-white/10 rounded-3xl p-8 md:p-12 flex flex-col justify-between hover:bg-white/[0.08] transition-all duration-700 group overflow-hidden relative shadow-2xl">
        <div class="absolute top-0 right-0 w-80 h-80 bg-accent/10 rounded-full blur-[120px] -translate-y-1/2 translate-x-1/2 group-hover:bg-accent/20 transition-colors duration-700"></div>
        <div class="absolute bottom-0 left-0 w-64 h-64 bg-purple-500/5 rounded-full blur-[100px] translate-y-1/2 -translate-x-1/2"></div>
        
        <div class="relative z-10">
          <p class="text-mono text-white/40 text-sm mb-2 font-bold tracking-widest">Avg. Monthly Loss</p>
          <div class="flex items-baseline gap-4">
            <h2 class="font-serif text-[clamp(4rem,8vw,8rem)] leading-none text-white tracking-tighter drop-shadow-[0_0_30px_rgba(0,255,136,0.3)]">
              $12.4k
            </h2>
            <div class="w-3.5 h-3.5 bg-accent rounded-full animate-pulse shadow-[0_0_25px_rgba(0,255,136,0.6)]"></div>
          </div>
        </div>

        <p class="text-white/70 mt-8 max-w-sm text-lg relative z-10 font-light leading-relaxed">
          The cost of "business as usual." Unscheduled jobs and inefficient routing silently drain your margins every single month.
        </p>
      </div>

      <!-- Card 2: Context -->
      <div class="col-span-1 md:col-span-3 bento-card bg-white/[0.03] backdrop-blur-xl border border-white/10 rounded-3xl p-8 md:p-12 flex flex-col justify-center hover:bg-white/[0.08] transition-all duration-700 group relative overflow-hidden shadow-2xl">
        <div class="absolute bottom-0 left-0 w-64 h-64 bg-purple-500/10 rounded-full blur-[100px] translate-y-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
        
        <h3 class="text-2xl md:text-4xl font-serif leading-[1.2] text-white mb-6 relative z-10 drop-shadow-sm">
          Your CRM is a goldmine, but you're treating it like a <span class="text-accent italic">junkyard</span>.
        </h3>
        <p class="text-white/60 leading-relaxed text-lg relative z-10 font-light">
          High-value work is being buried under administrative noise. Dispatchers are overwhelmed, technicians are driving blind, and revenue is slipping through the cracks.
        </p>
      </div>

      <!-- Card 3: Problem Item 1 -->
      <div class="col-span-1 md:col-span-2 bento-card bg-white/[0.03] backdrop-blur-xl border border-white/10 rounded-3xl p-8 flex flex-col justify-between hover:bg-white/[0.08] hover:border-white/20 transition-all duration-500 min-h-[280px] group shadow-xl">
        <span class="text-mono text-white/20 text-xl group-hover:text-accent transition-colors font-bold">01</span>
        <div>
          <h4 class="text-xl font-serif text-white mb-3 group-hover:translate-x-1 transition-transform">Unscheduled Jobs</h4>
          <p class="text-white/50 text-sm leading-relaxed font-light">
            Forgotten opportunities sitting in the backlog while your team fights today's fires.
          </p>
        </div>
      </div>

      <!-- Card 4: Problem Item 2 -->
      <div class="col-span-1 md:col-span-2 bento-card bg-white/[0.03] backdrop-blur-xl border border-white/10 rounded-3xl p-8 flex flex-col justify-between hover:bg-white/[0.08] hover:border-white/20 transition-all duration-500 min-h-[280px] group shadow-xl">
        <span class="text-mono text-white/20 text-xl group-hover:text-accent transition-colors font-bold">02</span>
        <div>
          <h4 class="text-xl font-serif text-white mb-3 group-hover:translate-x-1 transition-transform">Inefficient Routes</h4>
          <p class="text-white/50 text-sm leading-relaxed font-light">
            Technicians driving past high-margin jobs because dispatch lacks real-time context.
          </p>
        </div>
      </div>

      <!-- Card 5: Problem Item 3 -->
      <div class="col-span-1 md:col-span-2 bento-card bg-white/[0.03] backdrop-blur-xl border border-white/10 rounded-3xl p-8 flex flex-col justify-between hover:bg-white/[0.08] hover:border-white/20 transition-all duration-500 min-h-[280px] group shadow-xl">
        <span class="text-mono text-white/20 text-xl group-hover:text-accent transition-colors font-bold">03</span>
        <div>
          <h4 class="text-xl font-serif text-white mb-3 group-hover:translate-x-1 transition-transform">Manual Analysis</h4>
          <p class="text-white/50 text-sm leading-relaxed font-light">
            Hours wasted on spreadsheets and filters that are outdated the moment they're exported.
          </p>
        </div>
      </div>

    </div>

    <!-- AUDIENCE HEADER -->
    <div class="flex items-center justify-end gap-4 mb-12 audience-header opacity-0 translate-y-8">
      <span class="text-mono text-accent text-xs tracking-ultra uppercase border border-accent/30 px-3 py-1 rounded-full bg-accent/10 backdrop-blur-sm">003 / Target Industries</span>
    </div>

    <!-- AUDIENCE GRID -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-32 items-stretch">
      <!-- Audience 1: HVAC -->
      <div class="audience-card bg-white/[0.03] backdrop-blur-xl p-10 border border-white/10 rounded-3xl group hover:bg-white/[0.08] hover:border-white/20 transition-all duration-500 shadow-xl opacity-0 translate-y-8 flex flex-col justify-start gap-8 relative z-10">
        <span class="text-mono text-white/20 group-hover:text-accent block transition-colors font-bold text-xl">01</span>
        <div class="flex flex-col gap-4">
          <h3 class="text-3xl text-white font-serif leading-normal">HVAC</h3>
          <p class="text-white/50 text-base leading-relaxed font-light">Optimize heating and cooling operations with intelligent dispatch.</p>
        </div>
      </div>
      
      <!-- Audience 2: Plumbing -->
      <div class="audience-card bg-white/[0.03] backdrop-blur-xl p-10 border border-white/10 rounded-3xl group hover:bg-white/[0.08] hover:border-white/20 transition-all duration-500 shadow-xl opacity-0 translate-y-8 flex flex-col justify-start gap-8 relative z-10">
        <span class="text-mono text-white/20 group-hover:text-accent block transition-colors font-bold text-xl">02</span>
        <div class="flex flex-col gap-4">
          <h3 class="text-3xl text-white font-serif leading-normal">Plumbing</h3>
          <p class="text-white/50 text-base leading-relaxed font-light">Streamline emergency dispatch and maintenance scheduling.</p>
        </div>
      </div>
      
      <!-- Audience 3: Electrical -->
      <div class="audience-card bg-white/[0.03] backdrop-blur-xl p-10 border border-white/10 rounded-3xl group hover:bg-white/[0.08] hover:border-white/20 transition-all duration-500 shadow-xl opacity-0 translate-y-8 flex flex-col justify-start gap-8 relative z-10">
        <span class="text-mono text-white/20 group-hover:text-accent block transition-colors font-bold text-xl">03</span>
        <div class="flex flex-col gap-4">
          <h3 class="text-3xl text-white font-serif leading-normal">Electrical</h3>
          <p class="text-white/50 text-base leading-relaxed font-light">Track high-value jobs and technician specialized skills effortlessly.</p>
        </div>
      </div>
      
      <!-- Audience 4: Field Service -->
      <div class="audience-card bg-white/[0.03] backdrop-blur-xl p-10 border border-white/10 rounded-3xl group hover:bg-white/[0.08] hover:border-white/20 transition-all duration-500 shadow-xl opacity-0 translate-y-8 flex flex-col justify-start gap-8 relative z-10">
        <span class="text-mono text-white/20 group-hover:text-accent block transition-colors font-bold text-xl">04</span>
        <div class="flex flex-col gap-4">
          <h3 class="text-3xl text-white font-serif leading-normal">Field Service</h3>
          <p class="text-white/50 text-base leading-relaxed font-light">Works with any service business running on Service Titan.</p>
        </div>
      </div>
    </div>

    <!-- TRANSITION / BRIDGE -->
    <div class="flex flex-col items-center justify-center text-center py-24 relative overflow-hidden transition-bridge opacity-0 translate-y-8">
      <div class="absolute w-[1px] h-24 bg-gradient-to-b from-transparent to-accent top-0 left-1/2 -translate-x-1/2"></div>
      <div class="bg-white/5 backdrop-blur-xl p-5 relative z-10 border border-white/20 rounded-full mb-8 shadow-[0_0_30px_rgba(0,255,136,0.1)]">
         <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-accent animate-bounce" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" /></svg>
      </div>
      <h3 class="text-4xl md:text-7xl font-serif text-white mb-6 relative z-10 drop-shadow-2xl tracking-tight">From Chaos to Clarity</h3>
      <p class="text-white/70 max-w-lg relative z-10 text-lg font-light">Stop digging through menus. Start having a conversation with your data.</p>
    </div>

    <!-- SOLUTION / HOW IT WORKS HEADER -->
    <div class="flex items-center justify-end gap-4 mb-12 solution-header opacity-0 translate-y-8">
      <span class="text-mono text-accent text-xs tracking-ultra uppercase border border-accent/30 px-3 py-1 rounded-full bg-accent/10 backdrop-blur-sm">004 / How It Works</span>
    </div>

    <!-- SOLUTION GRID -->
    <div class="grid grid-cols-1 md:grid-cols-6 gap-6">
      
      <!-- Step 1: Connect -->
      <div class="col-span-1 md:col-span-2 solution-card bg-white/[0.03] backdrop-blur-xl border border-white/10 rounded-3xl p-10 flex flex-col hover:bg-white/[0.08] hover:border-white/20 transition-all duration-500 group relative overflow-hidden shadow-xl">
        <div class="absolute top-0 right-0 w-32 h-32 bg-blue-500/10 rounded-full blur-[60px] translate-x-1/2 -translate-y-1/2 group-hover:bg-blue-500/20 transition-colors"></div>
        <span class="text-mono text-white/20 text-sm mb-8 block font-bold">Step 01</span>
        <h4 class="text-3xl font-serif text-white mb-4">Connect</h4>
        <p class="text-white/50 leading-relaxed mb-8 flex-grow font-light">
          Securely link your Service Titan instance. Enterprise-grade, read-only access that takes less than 10 minutes to authorize.
        </p>
        <div class="w-12 h-12 rounded-full border border-white/10 flex items-center justify-center text-white/40 group-hover:text-accent group-hover:border-accent transition-all duration-300 group-hover:scale-110">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>
        </div>
      </div>

      <!-- Step 2: Ask -->
      <div class="col-span-1 md:col-span-2 solution-card bg-white/[0.03] backdrop-blur-xl border border-white/10 rounded-3xl p-10 flex flex-col hover:bg-white/[0.08] hover:border-white/20 transition-all duration-500 group relative overflow-hidden shadow-xl">
         <div class="absolute top-0 right-0 w-32 h-32 bg-accent/10 rounded-full blur-[60px] translate-x-1/2 -translate-y-1/2 group-hover:bg-accent/20 transition-colors"></div>
        <span class="text-mono text-white/20 text-sm mb-8 block font-bold">Step 02</span>
        <h4 class="text-3xl font-serif text-white mb-4">Ask</h4>
        <p class="text-white/50 leading-relaxed mb-8 flex-grow font-light">
          Query your data in plain English. "Show me all unscheduled jobs over $1k near technician Smith." No SQL required.
        </p>
        <div class="w-12 h-12 rounded-full border border-white/10 flex items-center justify-center text-white/40 group-hover:text-accent group-hover:border-accent transition-all duration-300 group-hover:scale-110">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" /></svg>
        </div>
      </div>

      <!-- Step 3: Act -->
      <div class="col-span-1 md:col-span-2 solution-card bg-white/[0.03] backdrop-blur-xl border border-white/10 rounded-3xl p-10 flex flex-col hover:bg-white/[0.08] hover:border-white/20 transition-all duration-500 group relative overflow-hidden shadow-xl">
         <div class="absolute top-0 right-0 w-32 h-32 bg-purple-500/10 rounded-full blur-[60px] translate-x-1/2 -translate-y-1/2 group-hover:bg-purple-500/20 transition-colors"></div>
        <span class="text-mono text-white/20 text-sm mb-8 block font-bold">Step 03</span>
        <h4 class="text-3xl font-serif text-white mb-4">Act</h4>
        <p class="text-white/50 leading-relaxed mb-8 flex-grow font-light">
          Get actionable insights instantly. Capture invisible revenue and dispatch the right tech to the right job, every time.
        </p>
        <div class="w-12 h-12 rounded-full border border-white/10 flex items-center justify-center text-white/40 group-hover:text-accent group-hover:border-accent transition-all duration-300 group-hover:scale-110">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
        </div>
      </div>

    </div>

  </div>
</section>

<script>
  import gsap from 'gsap';
  import { ScrollTrigger } from 'gsap/ScrollTrigger';

  document.addEventListener('DOMContentLoaded', () => {
    gsap.registerPlugin(ScrollTrigger);

    const section = document.getElementById('problem-solution');
    if (!section) return;

    // Scroll Progress Bar
    gsap.to('.problem-progress', {
      height: '100%',
      ease: 'none',
      scrollTrigger: {
        trigger: section,
        start: 'top center',
        end: 'bottom center',
        scrub: true
      }
    });

    // Content Parallax
    gsap.fromTo('.problem-content',
      { y: -30 },
      {
        y: 30,
        ease: 'none',
        scrollTrigger: {
          trigger: section,
          start: 'top bottom',
          end: 'bottom top',
          scrub: true
        }
      }
    );

    // Custom Parallax for this section's video
    const video = section.querySelector('.problem-parallax-video');
    if (video) {
      gsap.fromTo(video, 
        { y: '-15%' },
        {
          y: '15%',
          ease: 'none',
          scrollTrigger: {
            trigger: section,
            start: 'top bottom',
            end: 'bottom top',
            scrub: true
          }
        }
      );
    }

    // Header Animation
    gsap.to('.problem-header', {
      scrollTrigger: {
        trigger: section,
        start: "top 75%",
      },
      y: 0,
      opacity: 1,
      duration: 0.8,
      ease: "power3.out"
    });

    // Bento Cards Animation
    const bentoCards = section.querySelectorAll('.bento-card');
    gsap.fromTo(bentoCards, 
      { 
        y: 60, 
        opacity: 0, 
        scale: 0.95 
      },
      {
        scrollTrigger: {
          trigger: section,
          start: "top 70%",
        },
        y: 0,
        opacity: 1,
        scale: 1,
        duration: 0.8,
        stagger: 0.1,
        ease: "power3.out"
      }
    );

    // Audience Header Animation
    gsap.to('.audience-header', {
      scrollTrigger: {
        trigger: '.audience-header',
        start: "top 85%",
      },
      y: 0,
      opacity: 1,
      duration: 0.8,
      ease: "power3.out"
    });

    // Audience Cards Animation
    const audienceCards = section.querySelectorAll('.audience-card');
    gsap.to(audienceCards, {
      scrollTrigger: {
        trigger: '.audience-header',
        start: "top 75%",
      },
      y: 0,
      opacity: 1,
      duration: 0.8,
      stagger: 0.1,
      ease: "power3.out"
    });

    // Transition Bridge Animation
    gsap.to('.transition-bridge', {
      scrollTrigger: {
        trigger: '.transition-bridge',
        start: "top 80%",
      },
      y: 0,
      opacity: 1,
      duration: 1,
      ease: "power3.out"
    });

    // Solution Header Animation
    gsap.to('.solution-header', {
      scrollTrigger: {
        trigger: '.solution-header',
        start: "top 85%",
      },
      y: 0,
      opacity: 1,
      duration: 0.8,
      ease: "power3.out"
    });

    // Solution Cards Animation
    const solutionCards = section.querySelectorAll('.solution-card');
    gsap.fromTo(solutionCards, 
      { 
        y: 60, 
        opacity: 0, 
      },
      {
        scrollTrigger: {
          trigger: '.solution-header',
          start: "top 70%",
        },
        y: 0,
        opacity: 1,
        duration: 0.8,
        stagger: 0.15,
        ease: "power3.out"
      }
    );
  });
</script>
