---
---

---
---

<section class="pt-52 pb-32 md:pb-48 px-8 md:px-16 bg-[#080a09] relative overflow-hidden -mt-20 z-10" id="chat-demo-section">
  <!-- Subtle Ambient Background (No Video) -->
  <div class="absolute inset-0 pointer-events-none">
    <div class="absolute top-1/2 left-1/4 w-[500px] h-[500px] bg-accent/5 rounded-full blur-[120px] -translate-y-1/2 animate-pulse-slow"></div>
    <div class="absolute bottom-0 right-0 w-[800px] h-[800px] bg-purple-500/5 rounded-full blur-[150px] translate-y-1/3"></div>
    <div class="absolute inset-0 bg-[url('/grid-pattern.svg')] opacity-[0.03]"></div>
  </div>

  <div class="max-w-7xl mx-auto relative z-10">
    <div class="grid lg:grid-cols-2 gap-16 lg:gap-24 items-center">
      <!-- Left Content -->
      <div class="lg:sticky lg:top-32 lg:self-start">
        <p class="text-mono tracking-ultra text-white/40 mb-6 font-bold uppercase">004 / See It In Action</p>
        
        <h2 class="heading-serif text-5xl md:text-7xl text-white mb-8 leading-[0.95] tracking-tight">
          Just <span class="text-accent">ask</span>.
        </h2>
        
        <p class="text-white/60 text-lg md:text-xl leading-relaxed max-w-md mb-12 font-light">
          No dashboards to navigate. No filters to configure. Just ask questions like you would to a colleague. TitanFlow understands the context of your business.
        </p>
        
        <a href="#waitlist" class="group inline-flex items-center gap-3 px-8 py-4 bg-white/5 border border-white/10 rounded-full hover:bg-white/10 transition-all duration-300 w-fit">
          <span class="font-mono text-xs uppercase tracking-widest text-white group-hover:text-accent transition-colors">Try the demo</span>
          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-white/40 group-hover:translate-x-1 transition-transform group-hover:text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" /></svg>
        </a>
      </div>
      
      <!-- Right - Chat Demo -->
      <div class="relative group">
        <!-- Glow Effect behind container -->
        <div class="absolute inset-0 bg-accent/5 blur-3xl rounded-[3rem] -z-10 group-hover:bg-accent/10 transition-colors duration-700"></div>
        
        <div class="w-full bg-[#0c0e0d]/80 backdrop-blur-xl rounded-[2rem] border border-white/10 shadow-2xl overflow-hidden relative transform transition-transform duration-700 hover:scale-[1.02]">
          <!-- Window Controls -->
          <div class="flex items-center justify-between px-8 py-6 border-b border-white/5 bg-white/[0.02]">
            <div class="flex gap-2">
              <div class="w-3 h-3 rounded-full bg-[#FF5F57] shadow-sm"></div>
              <div class="w-3 h-3 rounded-full bg-[#FFBD2E] shadow-sm"></div>
              <div class="w-3 h-3 rounded-full bg-[#28CA41] shadow-sm"></div>
            </div>
            <div class="flex items-center gap-2">
              <div class="w-2 h-2 bg-accent rounded-full animate-pulse"></div>
              <span class="font-mono text-[10px] uppercase tracking-widest text-white/30">TitanFlow AI</span>
            </div>
          </div>
          
          <!-- Chat Area -->
          <div class="p-8 space-y-6 min-h-[500px] max-h-[500px] overflow-y-auto flex flex-col justify-end relative" id="chat-messages">
             <!-- Typing Indicator (Hidden by default) -->
             <div id="typing-indicator" class="hidden self-start">
               <div class="bg-white/5 px-4 py-3 rounded-2xl rounded-tl-sm inline-flex gap-1.5 items-center border border-white/5">
                 <div class="w-1.5 h-1.5 bg-white/40 rounded-full animate-bounce" style="animation-delay: 0s"></div>
                 <div class="w-1.5 h-1.5 bg-white/40 rounded-full animate-bounce" style="animation-delay: 0.15s"></div>
                 <div class="w-1.5 h-1.5 bg-white/40 rounded-full animate-bounce" style="animation-delay: 0.3s"></div>
               </div>
             </div>
          </div>

          <!-- Input Area Simulation -->
          <div class="p-4 border-t border-white/5 bg-white/[0.01]">
            <div class="w-full bg-white/5 rounded-full h-12 flex items-center px-6">
              <span class="text-white/20 text-sm font-light">Ask a question...</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
  import { gsap } from 'gsap';
  import { ScrollTrigger } from 'gsap/ScrollTrigger';
  
  // We wait for DOMContentLoaded to ensure elements exist
  document.addEventListener('DOMContentLoaded', () => {
    gsap.registerPlugin(ScrollTrigger);
    
    const container = document.getElementById('chat-messages');
    const typingIndicator = document.getElementById('typing-indicator');
    if (!container || !typingIndicator) return;

    const conversation = [
      { type: 'user', text: 'Which jobs are unscheduled this week?' },
      { type: 'ai', text: 'I found <span class="text-accent">8 unscheduled jobs</span> totaling <span class="text-white font-medium">$12.4K</span> in potential revenue.' },
      { type: 'user', text: 'Who has availability?' },
      { type: 'ai', text: 'Tech Mike has a 4-hour gap Thursday. Want me to auto-schedule the <span class="text-white font-medium">Johnson Install</span>?' }
    ];
    
    let isTyping = false;

    // Helper to add message
    const addMessage = (msg: { type: string, text: string }) => {
      const div = document.createElement('div');
      div.className = `flex ${msg.type === 'user' ? 'justify-end' : 'justify-start'} w-full mb-6`;
      
      const bubble = document.createElement('div');
      bubble.className = `max-w-[85%] px-6 py-4 rounded-2xl text-base font-light shadow-lg backdrop-blur-sm ${
        msg.type === 'user' 
          ? 'bg-accent text-[#080a09] font-medium rounded-tr-sm' 
          : 'bg-white/10 text-white/90 border border-white/10 rounded-tl-sm'
      }`;
      bubble.innerHTML = msg.text;
      
      div.appendChild(bubble);
      
      // Insert before typing indicator
      container.insertBefore(div, typingIndicator);
      
      // Animate in
      gsap.from(div, {
        opacity: 0,
        y: 20,
        scale: 0.95,
        duration: 0.4,
        ease: 'back.out(1.2)'
      });
      
      // Scroll to bottom
      container.scrollTop = container.scrollHeight;
    };

    // Helper to show/hide typing
    const toggleTyping = (show: boolean) => {
      if (show) {
        typingIndicator.classList.remove('hidden');
        typingIndicator.classList.add('flex');
        gsap.fromTo(typingIndicator, { opacity: 0, y: 10 }, { opacity: 1, y: 0, duration: 0.3 });
      } else {
        typingIndicator.classList.add('hidden');
        typingIndicator.classList.remove('flex');
      }
      container.scrollTop = container.scrollHeight;
    };

    // Sequence logic
    const playSequence = async () => {
      if (container.children.length > 1) return; // Prevent replay if already populated (1 because typing indicator exists)

      for (const msg of conversation) {
        if (msg.type === 'user') {
          await new Promise(r => setTimeout(r, 1000));
          addMessage(msg);
        } else {
          await new Promise(r => setTimeout(r, 600));
          toggleTyping(true);
          await new Promise(r => setTimeout(r, 1500)); // Fake think time
          toggleTyping(false);
          addMessage(msg);
        }
      }
    };

    ScrollTrigger.create({
      trigger: '#chat-demo-section',
      start: 'top 60%',
      onEnter: playSequence
    });
  });
</script>