<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 900 1000" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto;">
  <defs>
    <!-- Arrow markers -->
    <marker id="arrow" markerWidth="12" markerHeight="12" refX="11" refY="6" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,12 L12,6 z" fill="#2563EB"/>
    </marker>

    <!-- Gradient definitions -->
    <linearGradient id="blueGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#3B82F6;stop-opacity:0.1" />
      <stop offset="100%" style="stop-color:#2563EB;stop-opacity:0.05" />
    </linearGradient>

    <linearGradient id="greenGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#10B981;stop-opacity:0.1" />
      <stop offset="100%" style="stop-color:#059669;stop-opacity:0.05" />
    </linearGradient>

    <linearGradient id="purpleGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#8B5CF6;stop-opacity:0.1" />
      <stop offset="100%" style="stop-color:#7C3AED;stop-opacity:0.05" />
    </linearGradient>

    <linearGradient id="orangeGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#F97316;stop-opacity:0.1" />
      <stop offset="100%" style="stop-color:#EA580C;stop-opacity:0.05" />
    </linearGradient>

    <linearGradient id="tealGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#06B6D4;stop-opacity:0.1" />
      <stop offset="100%" style="stop-color:#0891B2;stop-opacity:0.05" />
    </linearGradient>

    <!-- Drop shadow -->
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
      <feOffset dx="2" dy="2" result="offsetblur"/>
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.15"/>
      </feComponentTransfer>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <!-- Background -->
  <rect x="0" y="0" width="900" height="1000" fill="#FAFAFA"/>

  <!-- Title -->
  <text x="450" y="40" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="24" font-weight="700" fill="#1F2937">Tool Execution Flow</text>
  <text x="450" y="65" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" fill="#6B7280">How the bot understands and executes user commands</text>

  <!-- Step 1: User Input -->
  <rect x="200" y="100" width="500" height="80" fill="url(#blueGradient)" stroke="#2563EB" stroke-width="2" rx="8" filter="url(#shadow)"/>
  <text x="450" y="130" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="18" font-weight="600" fill="#2563EB">1. User Input</text>
  <text x="450" y="155" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" fill="#1F2937">"I want to enroll in Computer Science"</text>

  <!-- Arrow -->
  <line x1="450" y1="180" x2="450" y2="220" stroke="#2563EB" stroke-width="3" marker-end="url(#arrow)"/>

  <!-- Step 2: LLM Analysis -->
  <rect x="200" y="220" width="500" height="100" fill="url(#purpleGradient)" stroke="#7C3AED" stroke-width="2" rx="8" filter="url(#shadow)"/>
  <text x="450" y="250" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="18" font-weight="600" fill="#7C3AED">2. LLM Analyzes Intent</text>
  <text x="450" y="275" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" fill="#1F2937">Detects: "enrollment request"</text>
  <text x="450" y="300" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#6B7280">Natural language understanding</text>

  <!-- Time indicator -->
  <rect x="720" y="255" width="80" height="30" fill="#F3F4F6" rx="15"/>
  <text x="760" y="275" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#6B7280">~100ms</text>

  <!-- Arrow -->
  <line x1="450" y1="320" x2="450" y2="360" stroke="#7C3AED" stroke-width="3" marker-end="url(#arrow)"/>

  <!-- Step 3: Scan Available Tools -->
  <rect x="150" y="360" width="600" height="120" fill="url(#orangeGradient)" stroke="#EA580C" stroke-width="2" rx="8" filter="url(#shadow)"/>
  <text x="450" y="390" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="18" font-weight="600" fill="#EA580C">3. Scan Available Tools</text>

  <g transform="translate(250, 415)">
    <rect x="0" y="0" width="180" height="40" fill="#059669" fill-opacity="0.1" stroke="#059669" stroke-width="2" rx="6"/>
    <text x="90" y="26" text-anchor="middle" font-family="monospace" font-size="16" font-weight="600" fill="#059669">✓ enrollment.bas</text>
  </g>

  <g transform="translate(470, 415)">
    <rect x="0" y="0" width="180" height="40" fill="#6B7280" fill-opacity="0.1" stroke="#6B7280" stroke-width="1" rx="6" stroke-dasharray="4,2"/>
    <text x="90" y="26" text-anchor="middle" font-family="monospace" font-size="16" fill="#6B7280">other-tools.bas</text>
  </g>

  <!-- Time indicator -->
  <rect x="720" y="395" width="80" height="30" fill="#F3F4F6" rx="15"/>
  <text x="760" y="415" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#6B7280">~50ms</text>

  <!-- Arrow -->
  <line x1="450" y1="480" x2="450" y2="520" stroke="#EA580C" stroke-width="3" marker-end="url(#arrow)"/>

  <!-- Step 4: Collect Parameters -->
  <rect x="150" y="520" width="600" height="140" fill="url(#tealGradient)" stroke="#0891B2" stroke-width="2" rx="8" filter="url(#shadow)"/>
  <text x="450" y="550" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="18" font-weight="600" fill="#0891B2">4. Collect Parameters</text>

  <g transform="translate(200, 570)">
    <rect x="0" y="0" width="500" height="70" fill="white" stroke="#E5E7EB" stroke-width="1" rx="6"/>
    <text x="20" y="30" font-family="system-ui, -apple-system, sans-serif" font-size="16" fill="#1F2937">• Name: </text>
    <text x="100" y="30" font-family="system-ui, -apple-system, sans-serif" font-size="16" fill="#6B7280">(ask user)</text>
    <text x="20" y="50" font-family="system-ui, -apple-system, sans-serif" font-size="16" fill="#1F2937">• Email: </text>
    <text x="100" y="50" font-family="system-ui, -apple-system, sans-serif" font-size="16" fill="#6B7280">(ask user)</text>
    <text x="250" y="30" font-family="system-ui, -apple-system, sans-serif" font-size="16" fill="#1F2937">• Course: </text>
    <text x="340" y="30" font-family="system-ui, -apple-system, sans-serif" font-size="16" fill="#059669">"Computer Science"</text>
  </g>

  <!-- Time indicator -->
  <rect x="720" y="575" width="100" height="30" fill="#F3F4F6" rx="15"/>
  <text x="770" y="595" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#6B7280">Interactive</text>

  <!-- Arrow -->
  <line x1="450" y1="660" x2="450" y2="700" stroke="#0891B2" stroke-width="3" marker-end="url(#arrow)"/>

  <!-- Step 5: Execute Script -->
  <rect x="150" y="700" width="600" height="120" fill="url(#greenGradient)" stroke="#059669" stroke-width="2" rx="8" filter="url(#shadow)"/>
  <text x="450" y="730" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="18" font-weight="600" fill="#059669">5. Execute enrollment.bas</text>

  <g transform="translate(250, 750)">
    <circle cx="15" cy="15" r="8" fill="#059669"/>
    <path d="M10,15 L13,18 L20,11" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
    <text x="35" y="20" font-family="system-ui, -apple-system, sans-serif" font-size="16" fill="#1F2937">Save to enrollments.csv</text>
  </g>

  <g transform="translate(250, 780)">
    <circle cx="15" cy="15" r="8" fill="#059669"/>
    <path d="M10,15 L13,18 L20,11" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
    <text x="35" y="20" font-family="system-ui, -apple-system, sans-serif" font-size="16" fill="#1F2937">Generate confirmation</text>
  </g>

  <!-- Time indicator -->
  <rect x="720" y="745" width="80" height="30" fill="#F3F4F6" rx="15"/>
  <text x="760" y="765" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#6B7280">~200ms</text>

  <!-- Arrow -->
  <line x1="450" y1="820" x2="450" y2="860" stroke="#059669" stroke-width="3" marker-end="url(#arrow)"/>

  <!-- Step 6: Bot Response -->
  <rect x="200" y="860" width="500" height="80" fill="#059669" fill-opacity="0.1" stroke="#059669" stroke-width="2" rx="8" filter="url(#shadow)"/>
  <text x="450" y="890" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="18" font-weight="600" fill="#059669">6. Bot Response</text>
  <text x="450" y="915" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" fill="#1F2937">"Welcome to Computer Science, John!"</text>

  <!-- Time indicator -->
  <rect x="720" y="885" width="80" height="30" fill="#F3F4F6" rx="15"/>
  <text x="760" y="905" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#6B7280">Instant</text>
</svg>
