<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200" role="img" aria-label="AI chatbot conversation and booking flow over WhatsApp">
  <defs>
    <linearGradient id="cbBg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#e8f6f4"/><stop offset="1" stop-color="#f6fefd"/></linearGradient>
    <linearGradient id="cbAna" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#1a6ef5"/><stop offset="1" stop-color="#00b4d8"/></linearGradient>
    <linearGradient id="cbYesil" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#25d366"/><stop offset="1" stop-color="#12a150"/></linearGradient>
    <style>
      .cb-b { font: 700 10px system-ui,"Segoe UI",Roboto,Arial,sans-serif; fill:#0f2057 }
      .cb-m { font: 400 7.5px system-ui,"Segoe UI",Roboto,Arial,sans-serif; fill:#5f7183 }
      .cb-w { font: 400 7.5px system-ui,"Segoe UI",Roboto,Arial,sans-serif; fill:#ffffff }
      .cb-t { font: 600 8px system-ui,"Segoe UI",Roboto,Arial,sans-serif; fill:#2b6f63 }
      .cb-s { font: 400 7.5px system-ui,"Segoe UI",Roboto,Arial,sans-serif; fill:#7ba79d }
    </style>
  </defs>
  <rect width="400" height="200" fill="url(#cbBg)"/>
  <g opacity=".3" fill="#bfe6df"><circle cx="30" cy="34" r="3"/><circle cx="372" cy="170" r="3"/><circle cx="366" cy="30" r="2.5"/></g>

  <rect x="24" y="16" width="132" height="168" rx="16" fill="#0f2057"/>
  <rect x="32" y="30" width="116" height="142" rx="10" fill="#ffffff"/>
  <rect x="72" y="22" width="36" height="5" rx="2.5" fill="#26365f"/>
  <circle cx="45" cy="43" r="6" fill="url(#cbYesil)"/>
  <text class="cb-t" x="56" y="46">WhatsApp</text>

  <path d="M40 56h84a7 7 0 0 1 7 7v18a7 7 0 0 1-7 7H50l-7 6v-6h-3a7 7 0 0 1-7-7V63a7 7 0 0 1 7-7z" fill="#eef3fb"/>
  <text class="cb-m" x="46" y="70">Could I get</text>
  <text class="cb-m" x="46" y="82">a price?</text>

  <path d="M46 98h84a7 7 0 0 1 7 7v28a7 7 0 0 1-7 7H46a7 7 0 0 1-7-7v-28a7 7 0 0 1 7-7z" fill="url(#cbAna)"/>
  <text class="cb-w" x="52" y="112">Sure — see it in the</text>
  <text class="cb-w" x="52" y="124">calculator, or book</text>
  <text class="cb-w" x="52" y="136">an appointment now.</text>

  <rect x="39" y="150" width="72" height="16" rx="8" fill="#f1f5fb"/>
  <text class="cb-m" x="46" y="161">Book now</text>
  <circle cx="124" cy="158" r="9" fill="url(#cbYesil)"/>
  <path d="M120 158l3 3 5-6" fill="none" stroke="#ffffff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>

  <rect x="176" y="40" width="196" height="120" rx="14" fill="#ffffff" stroke="#cfeae4"/>
  <circle cx="204" cy="68" r="15" fill="url(#cbAna)"/>
  <path d="M197 63h14M197 68h14M197 73h9" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round"/>
  <text class="cb-b" x="228" y="65">AI Assistant</text>
  <text class="cb-s" x="228" y="78">answers from your own knowledge base</text>

  <rect x="192" y="96" width="164" height="18" rx="9" fill="#f2faf8"/>
  <text class="cb-t" x="202" y="108">✓  Instant answers, 24/7</text>
  <rect x="192" y="118" width="164" height="18" rx="9" fill="#f2faf8"/>
  <text class="cb-t" x="202" y="130">✓  Creates bookings and quotes</text>
  <rect x="192" y="140" width="120" height="14" rx="7" fill="#eaf8f5"/>
  <text class="cb-s" x="202" y="150">hands over to a human when unsure</text>
  <circle cx="358" cy="58" r="6" fill="#ff8a3d" opacity=".8"/>
</svg>
