/**
 * SVG illustrations for EmptyState components.
 * Each uses the brand orange palette (#3b82f6 / #60a5fa) at low opacity.
 * ViewBox: 80x60, simple line art style.
 */

export function FlowIllustration() {
  return (
    <svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg">
      {/* Root node */}
      <circle cx="40" cy="10" r="6" fill="rgba(96,165,250,0.15)" stroke="#3b82f6" strokeWidth="1.5" />
      {/* Branches */}
      <line x1="40" y1="16" x2="20" y2="34" stroke="#3b82f6" strokeWidth="1.5" />
      <line x1="40" y1="16" x2="60" y2="34" stroke="#3b82f6" strokeWidth="1.5" />
      {/* Left child */}
      <circle cx="20" cy="38" r="5" fill="rgba(96,165,250,0.15)" stroke="#60a5fa" strokeWidth="1.5" />
      {/* Right child */}
      <circle cx="60" cy="38" r="5" fill="rgba(96,165,250,0.15)" stroke="#60a5fa" strokeWidth="1.5" />
      {/* Leaf branches */}
      <line x1="20" y1="43" x2="12" y2="52" stroke="#60a5fa" strokeWidth="1" />
      <line x1="20" y1="43" x2="28" y2="52" stroke="#60a5fa" strokeWidth="1" />
      <circle cx="12" cy="54" r="3" fill="rgba(96,165,250,0.15)" stroke="#60a5fa" strokeWidth="1" />
      <circle cx="28" cy="54" r="3" fill="rgba(96,165,250,0.15)" stroke="#60a5fa" strokeWidth="1" />
    </svg>
  )
}

export function AnalyticsIllustration() {
  return (
    <svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg">
      {/* Bars */}
      <rect x="12" y="38" width="10" height="16" rx="2" fill="rgba(96,165,250,0.15)" stroke="#3b82f6" strokeWidth="1.5" />
      <rect x="26" y="28" width="10" height="26" rx="2" fill="rgba(96,165,250,0.15)" stroke="#60a5fa" strokeWidth="1.5" />
      <rect x="40" y="20" width="10" height="34" rx="2" fill="rgba(96,165,250,0.15)" stroke="#3b82f6" strokeWidth="1.5" />
      <rect x="54" y="10" width="10" height="44" rx="2" fill="rgba(96,165,250,0.15)" stroke="#60a5fa" strokeWidth="1.5" />
      {/* Baseline */}
      <line x1="8" y1="56" x2="72" y2="56" stroke="#3b82f6" strokeWidth="1" opacity="0.5" />
    </svg>
  )
}

export function SessionIllustration() {
  return (
    <svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg">
      {/* Card 1 */}
      <rect x="12" y="8" width="56" height="12" rx="3" fill="rgba(96,165,250,0.15)" stroke="#3b82f6" strokeWidth="1.5" />
      <circle cx="22" cy="14" r="2" fill="#3b82f6" />
      <line x1="28" y1="14" x2="56" y2="14" stroke="#3b82f6" strokeWidth="1" opacity="0.5" />
      {/* Card 2 */}
      <rect x="12" y="24" width="56" height="12" rx="3" fill="rgba(96,165,250,0.15)" stroke="#60a5fa" strokeWidth="1.5" />
      <circle cx="22" cy="30" r="2" fill="#60a5fa" />
      <line x1="28" y1="30" x2="52" y2="30" stroke="#60a5fa" strokeWidth="1" opacity="0.5" />
      {/* Card 3 */}
      <rect x="12" y="40" width="56" height="12" rx="3" fill="rgba(96,165,250,0.15)" stroke="#3b82f6" strokeWidth="1.5" />
      <circle cx="22" cy="46" r="2" fill="#3b82f6" />
      <line x1="28" y1="46" x2="48" y2="46" stroke="#3b82f6" strokeWidth="1" opacity="0.5" />
    </svg>
  )
}

export function IntegrationIllustration() {
  return (
    <svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg">
      {/* Left box */}
      <rect x="6" y="18" width="22" height="24" rx="4" fill="rgba(96,165,250,0.15)" stroke="#3b82f6" strokeWidth="1.5" />
      <line x1="12" y1="26" x2="22" y2="26" stroke="#3b82f6" strokeWidth="1" opacity="0.6" />
      <line x1="12" y1="30" x2="20" y2="30" stroke="#3b82f6" strokeWidth="1" opacity="0.4" />
      {/* Right box */}
      <rect x="52" y="18" width="22" height="24" rx="4" fill="rgba(96,165,250,0.15)" stroke="#60a5fa" strokeWidth="1.5" />
      <line x1="58" y1="26" x2="68" y2="26" stroke="#60a5fa" strokeWidth="1" opacity="0.6" />
      <line x1="58" y1="30" x2="66" y2="30" stroke="#60a5fa" strokeWidth="1" opacity="0.4" />
      {/* Dashed arrows */}
      <line x1="30" y1="26" x2="50" y2="26" stroke="#3b82f6" strokeWidth="1.5" strokeDasharray="3 2" />
      <line x1="50" y1="34" x2="30" y2="34" stroke="#60a5fa" strokeWidth="1.5" strokeDasharray="3 2" />
      {/* Arrow tips */}
      <path d="M48 23 L52 26 L48 29" stroke="#3b82f6" strokeWidth="1.5" fill="none" />
      <path d="M32 31 L28 34 L32 37" stroke="#60a5fa" strokeWidth="1.5" fill="none" />
    </svg>
  )
}

export function StepLibraryIllustration() {
  return (
    <svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg">
      {/* List items */}
      <circle cx="18" cy="14" r="3" fill="rgba(96,165,250,0.15)" stroke="#3b82f6" strokeWidth="1.5" />
      <line x1="26" y1="14" x2="62" y2="14" stroke="#3b82f6" strokeWidth="1.5" opacity="0.5" />
      <circle cx="18" cy="27" r="3" fill="rgba(96,165,250,0.15)" stroke="#60a5fa" strokeWidth="1.5" />
      <line x1="26" y1="27" x2="58" y2="27" stroke="#60a5fa" strokeWidth="1.5" opacity="0.5" />
      <circle cx="18" cy="40" r="3" fill="rgba(96,165,250,0.15)" stroke="#3b82f6" strokeWidth="1.5" />
      <line x1="26" y1="40" x2="54" y2="40" stroke="#3b82f6" strokeWidth="1.5" opacity="0.5" />
      <circle cx="18" cy="53" r="3" fill="rgba(96,165,250,0.15)" stroke="#60a5fa" strokeWidth="1.5" />
      <line x1="26" y1="53" x2="50" y2="53" stroke="#60a5fa" strokeWidth="1.5" opacity="0.5" />
    </svg>
  )
}

export function ScriptIllustration() {
  return (
    <svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg">
      {/* Terminal window */}
      <rect x="8" y="4" width="64" height="52" rx="4" fill="rgba(96,165,250,0.15)" stroke="#3b82f6" strokeWidth="1.5" />
      {/* Title bar */}
      <line x1="8" y1="14" x2="72" y2="14" stroke="#3b82f6" strokeWidth="1" opacity="0.3" />
      <circle cx="16" cy="9" r="2" fill="#3b82f6" opacity="0.4" />
      <circle cx="23" cy="9" r="2" fill="#60a5fa" opacity="0.4" />
      {/* Code lines */}
      <line x1="16" y1="22" x2="40" y2="22" stroke="#3b82f6" strokeWidth="1.5" opacity="0.6" />
      <line x1="20" y1="30" x2="52" y2="30" stroke="#60a5fa" strokeWidth="1.5" opacity="0.5" />
      <line x1="20" y1="38" x2="46" y2="38" stroke="#3b82f6" strokeWidth="1.5" opacity="0.4" />
      <line x1="16" y1="46" x2="36" y2="46" stroke="#60a5fa" strokeWidth="1.5" opacity="0.5" />
    </svg>
  )
}

export function ShareIllustration() {
  return (
    <svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg">
      {/* Center node */}
      <circle cx="28" cy="30" r="8" fill="rgba(96,165,250,0.15)" stroke="#3b82f6" strokeWidth="1.5" />
      {/* Top-right node */}
      <circle cx="58" cy="14" r="6" fill="rgba(96,165,250,0.15)" stroke="#60a5fa" strokeWidth="1.5" />
      {/* Bottom-right node */}
      <circle cx="58" cy="46" r="6" fill="rgba(96,165,250,0.15)" stroke="#60a5fa" strokeWidth="1.5" />
      {/* Connecting lines */}
      <line x1="35" y1="25" x2="52" y2="17" stroke="#3b82f6" strokeWidth="1.5" />
      <line x1="35" y1="35" x2="52" y2="43" stroke="#3b82f6" strokeWidth="1.5" />
    </svg>
  )
}
