> ## Documentation Index
> Fetch the complete documentation index at: https://koreai.mintlify.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Kore.ai Product Documentation

> Build and deploy AI agents at enterprise scale — quickly, securely, and flexibly.

import { useEffect, useRef } from 'react'

export const KoreStyles = () => (
  <style>{`
    :root {
      --kore-card-title: 15px;
      --kore-card-desc: 13.5px;
      --kore-section-title: clamp(1.4rem, 2.2vw, 1.85rem);
      --kore-body-lh: 1.6;
      --kore-eyebrow-ls: 0.1em;
      --kore-card-pad: 22px;
      --kore-grid-gap: 16px;
      --kore-section-pad: 80px;
      --kore-ease: cubic-bezier(0.22, 0.6, 0.36, 1);
      --kore-duration: 0.2s;
      --kore-hover-y: -3px;
      --kore-hover-shadow: 0 8px 24px rgba(47,143,255,0.1);
      --kore-hover-border: #2F8FFF;
      --kore-accent: #2F8FFF;
      --kore-bg: #F8FAFF;
      --kore-surface: #ffffff;
      --kore-border: #E2EAF4;
      --kore-text: #0F172A;
      --kore-muted: #64748B;
      --kore-faint: #94A3B8;
    }
    .dark {
      --kore-bg: #0B1120;
      --kore-surface: #1E293B;
      --kore-border: #1E3A5F;
      --kore-text: #F1F5F9;
      --kore-muted: #94A3B8;
      --kore-faint: #475569;
      --kore-accent: #60A5FA;
      --kore-hover-shadow: 0 8px 24px rgba(47,143,255,0.15);
    }

    @keyframes koreUp {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .ka1 { animation: koreUp 0.6s cubic-bezier(0.22,0.6,0.36,1) 0.05s both; }
    .ka2 { animation: koreUp 0.6s cubic-bezier(0.22,0.6,0.36,1) 0.15s both; }
    .ka3 { animation: koreUp 0.6s cubic-bezier(0.22,0.6,0.36,1) 0.25s both; }
    .ka4 { animation: koreUp 0.6s cubic-bezier(0.22,0.6,0.36,1) 0.35s both; }
    .ka5 { animation: koreUp 0.6s cubic-bezier(0.22,0.6,0.36,1) 0.45s both; }

    /* Page wrapper — pull up to cancel Mintlify's content-area top padding */
    .kore-page      { background: #F8FAFF !important; min-height: 100vh; margin-top: -3rem !important; }
    .kore-container { max-width: 1376px !important; margin-left: auto !important; margin-right: auto !important; margin-top: -140px !important; padding: 56px 24px 24px !important; box-sizing: border-box !important; }

    /* Hero — theme-aware, full-bleed, dot texture */
    .kore-hero {
      width: 100vw !important; position: relative !important;
      left: 50% !important; transform: translateX(-50%) !important;
      background-color: #ffffff !important;
      background-image: radial-gradient(circle, rgba(47,143,255,0.28) 1.5px, transparent 1.5px) !important;
      background-size: 22px 22px !important;
    }
    .dark .kore-hero {
      background-color: #080D1A !important;
      background-image: radial-gradient(circle, rgba(47,143,255,0.2) 1.5px, transparent 1.5px) !important;
    }

    /* Hero headline — theme-aware gradient (use background-image to preserve background-clip) */
    .kore-hero-title {
      background-image: linear-gradient(135deg, #0F172A 0%, #1B3A6B 55%, #2F8FFF 100%) !important;
      background-color: transparent !important;
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      background-clip: text !important;
    }
    .dark .kore-hero-title {
      background-image: linear-gradient(135deg, #ffffff 0%, #C7DEFF 60%, #93C5FD 100%) !important;
    }

    /* Hero text — dark mode overrides */
    .dark .kore-hero .kore-h1      { color: #ffffff !important; }
    .dark .kore-hero .kore-subtext { color: rgba(255,255,255,0.62) !important; }

    /* Hero badge — theme-aware */
    .kore-hero-badge {
      color: #2F8FFF; background: rgba(47,143,255,0.07); border-color: rgba(47,143,255,0.2);
    }
    .dark .kore-hero-badge { color: #93C5FD; background: rgba(47,143,255,0.15); border-color: rgba(47,143,255,0.32); }


    /* Icon chip */
    .kore-icon-chip {
      width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
      background: linear-gradient(135deg, rgba(47,143,255,0.18) 0%, rgba(6,200,240,0.14) 100%);
      display: flex; align-items: center; justify-content: center;
      color: #2F8FFF;
    }

    /* Lazy load — scroll reveal */
    .kore-lazy { opacity: 0; transform: translateY(22px); transition: opacity 0.5s cubic-bezier(0.22,0.6,0.36,1), transform 0.5s cubic-bezier(0.22,0.6,0.36,1); }
    .kore-lazy.kore-in { opacity: 1 !important; transform: none !important; }

    /* Section headers */
    .kore-section-eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--kore-eyebrow-ls); color: var(--kore-accent); margin-bottom: 10px; }
    .kore-section-title { font-size: var(--kore-section-title); font-weight: 700; color: var(--kore-text); line-height: 1.25; margin: 0 0 8px; }
    .kore-section-sub { font-size: var(--kore-card-desc); color: var(--kore-muted); line-height: var(--kore-body-lh); max-width: 420px; margin: 0; }
    .dark .kore-section-title { color: var(--kore-text); }
    .dark .kore-section-eyebrow { color: #60A5FA; }

    /* Product card accents — same color for all */
    .kore-card-work, .kore-card-service, .kore-card-process, .kore-ap-card, .kore-sol-card { border-top: 2.5px solid #2F8FFF !important; }

    /* Agent Platform full-bleed band */
    .kore-ap-bleed {
      width: 100vw !important; position: relative !important;
      left: 50% !important; transform: translateX(-50%) !important;
      background: transparent;
      padding: 0 0 var(--kore-section-pad);
    }
    .kore-ap-inner { max-width: 1376px; margin: 0 auto; padding: 0 24px; }
    .kore-ap-header { display: flex; align-items: center; justify-content: space-between; text-decoration: none; margin-bottom: 6px; color: inherit; }
    .kore-ap-title { font-size: var(--kore-card-title); font-weight: 600; color: var(--kore-text); }
    .kore-ap-eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--kore-eyebrow-ls); color: #2F8FFF; margin-bottom: 10px; }
    .kore-ap-desc { font-size: var(--kore-card-desc); color: var(--kore-muted); line-height: var(--kore-body-lh); margin: 0 0 28px; max-width: 560px; }
    .kore-ap-divider { display: none; }
    .dark .kore-ap-bleed { background: transparent; }
    .dark .kore-ap-title { color: var(--kore-text); }
    .dark .kore-ap-eyebrow { color: #60A5FA; }
    .dark .kore-ap-divider { display: none; }

    /* Agent Platform card wrapper */
    .kore-ap-card {
      background: var(--kore-surface); border: 1px solid var(--kore-border); border-radius: 12px;
      padding: var(--kore-card-pad); text-decoration: none; display: flex; flex-direction: column; gap: 12px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.04);
      transition: transform var(--kore-duration) var(--kore-ease), box-shadow var(--kore-duration) var(--kore-ease), border-color var(--kore-duration) var(--kore-ease);
    }
    .kore-ap-card:hover { transform: translateY(var(--kore-hover-y)); box-shadow: var(--kore-hover-shadow); border-color: var(--kore-hover-border); }
    .kore-ap-card:hover .kore-ap-card-arrow { opacity: 1 !important; transform: translateX(3px) !important; }
    .dark .kore-ap-card { box-shadow: 0 1px 4px rgba(0,0,0,0.2); }

    /* Capability tiles — 4×2 grid, gray bg, compact */
    .kore-cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .kore-cap-tile {
      display: flex; flex-direction: column; gap: 8px;
      padding: 14px 16px; border-radius: 12px;
      background: #ffffff; border: 1px solid var(--kore-border);
      box-shadow: 0 1px 4px rgba(0,0,0,0.04);
      text-decoration: none;
      transition: transform var(--kore-duration) var(--kore-ease), box-shadow var(--kore-duration) var(--kore-ease), border-color var(--kore-duration) var(--kore-ease);
      position: relative;
    }
    .kore-cap-tile:hover { transform: translateY(var(--kore-hover-y)); box-shadow: var(--kore-hover-shadow); border-color: var(--kore-hover-border); }
    .kore-cap-tile:hover .kore-cap-tile-arrow { opacity: 1 !important; transform: translateX(3px) !important; }
    .kore-cap-tile-header { display: flex; align-items: center; gap: 10px; }
    .kore-cap-tile .kore-icon-chip { width: 28px; height: 28px; border-radius: 7px; }
    .kore-cap-tile .kore-icon-chip svg { width: 14px; height: 14px; }
    .kore-cap-tile-title { font-size: 13.5px; font-weight: 600; color: var(--kore-text); flex: 1; }
    .kore-cap-tile-arrow { opacity: 0; color: var(--kore-accent); transition: opacity var(--kore-duration) var(--kore-ease), transform var(--kore-duration) var(--kore-ease); flex-shrink: 0; }
    .kore-cap-tile-desc { font-size: 12.5px; color: var(--kore-muted); line-height: 1.5; margin: 0; }
    .dark .kore-cap-tile { background: linear-gradient(135deg, #1A2436 0%, #16202E 100%); border-color: #253247; }
    .dark .kore-cap-tile:hover { background: linear-gradient(135deg, #1E2A3E 0%, #1A2538 100%); border-color: #2E4058; }

    /* Solutions — 3×2 card grid with gradient top-border */
    .kore-sol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .kore-sol-card {
      display: flex; flex-direction: column; gap: 12px;
      padding: var(--kore-card-pad); border-radius: 12px;
      background: var(--kore-surface); border: 1px solid var(--kore-border);
      text-decoration: none;
      transition: transform var(--kore-duration) var(--kore-ease), box-shadow var(--kore-duration) var(--kore-ease), border-color var(--kore-duration) var(--kore-ease);
      position: relative; overflow: hidden;
    }
    .kore-sol-card::after {
      content: ''; position: absolute; inset: 0; opacity: 0;
      background: radial-gradient(circle at 50% 0%, rgba(47,143,255,0.06), transparent 70%);
      transition: opacity var(--kore-duration) var(--kore-ease);
    }
    .kore-sol-card:hover { transform: translateY(var(--kore-hover-y)); box-shadow: var(--kore-hover-shadow); border-color: var(--kore-hover-border); }
    .kore-sol-card:hover .kore-sol-card-arrow { opacity: 1 !important; transform: translateX(3px) !important; }
    .kore-sol-card:hover::after { opacity: 1; }
    .kore-sol-card .kore-icon-chip { width: 40px; height: 40px; }
    .kore-sol-card-title { font-size: var(--kore-card-title); font-weight: 600; color: var(--kore-text); }
    .kore-sol-card-desc { font-size: var(--kore-card-desc); color: var(--kore-muted); line-height: var(--kore-body-lh); margin: 0; }
    .kore-sol-group-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--kore-eyebrow-ls); color: var(--kore-faint); margin-bottom: 12px; }
    .dark .kore-sol-card { background: var(--kore-surface); border-color: var(--kore-border); }
    .dark .kore-sol-card:hover { box-shadow: var(--kore-hover-shadow); }

    /* Resources full-bleed dark block */
    .kore-resources-bleed {
      width: 100vw !important; position: relative !important;
      left: 50% !important; transform: translateX(-50%) !important;
      background: #0D1829; padding: var(--kore-section-pad) 0;
    }
    .kore-resources-inner { max-width: 1376px; margin: 0 auto; padding: 0 24px; }
    .kore-resources-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
    .kore-resource-item { display: flex; flex-direction: column; gap: 12px; padding: 24px 36px 24px 0; text-decoration: none; border-right: 1px solid rgba(255,255,255,0.08); }
    .kore-resource-item:last-child { border-right: none; padding: 24px 0 24px 36px; }
    .kore-resource-item:nth-child(2) { padding: 24px 36px; }
    .kore-resource-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(47,143,255,0.15); display: flex; align-items: center; justify-content: center; color: #60A5FA; flex-shrink: 0; }
    .kore-resource-title { font-size: var(--kore-card-title); font-weight: 600; color: #F1F5F9; }
    .kore-resource-desc { font-size: var(--kore-card-desc); color: rgba(255,255,255,0.45); line-height: var(--kore-body-lh); margin: 0; }
    .kore-resource-link { font-size: 13px; font-weight: 500; color: #60A5FA; display: inline-flex; align-items: center; gap: 5px; margin-top: auto; transition: gap var(--kore-duration) var(--kore-ease); }
    .kore-resource-item:hover .kore-resource-link { gap: 10px; }
    .dark .kore-resources-bleed { background: #070D1A; }

    /* Footer full-bleed white */
    .kore-footer-bleed {
      width: 100vw !important; position: relative !important;
      left: 50% !important; transform: translateX(-50%) !important;
      background: #ffffff; border-top: 1px solid #E2EAF4;
    }
    .kore-footer-inner { max-width: 1376px; margin: 0 auto; padding: 0 24px; padding-bottom: 40px; }
    .kore-footer-bleed .kore-footer { margin-top: 0 !important; border-top: none !important; }
    .dark .kore-footer-bleed { background: #0B1120; border-color: #1E293B; }

    /* Cards */
    .kore-card {
      background: #ffffff !important;
      transition: transform var(--kore-duration) var(--kore-ease),
                  box-shadow var(--kore-duration) var(--kore-ease),
                  border-color var(--kore-duration) var(--kore-ease) !important;
    }
    .kore-card:hover {
      transform: translateY(var(--kore-hover-y)) !important;
      box-shadow: var(--kore-hover-shadow) !important;
      border-color: var(--kore-hover-border) !important;
    }
    .kore-card:hover .kore-card-arrow { opacity: 1 !important; transform: translateX(3px) !important; }


    /* Grids */
    .kore-grid   { display: grid !important; gap: var(--kore-grid-gap) !important; }
    .kore-grid-4 { grid-template-columns: repeat(4, 1fr) !important; }
    .kore-grid-3 { grid-template-columns: repeat(3, 1fr) !important; }


    /* Dark mode */
    .dark .kore-page             { background: #0B1120 !important; }
    /* Hero overlay */
    .kore-hero-overlay {
      /* Light: solid white center, late fade — no band artifact */
      background: radial-gradient(ellipse 60% 70% at 50% 42%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.85) 35%, rgba(255,255,255,0.4) 60%, transparent 80%);
    }
    .dark .kore-hero-overlay {
      background: radial-gradient(ellipse 70% 70% at 50% 45%, rgba(47,143,255,0.16) 0%, rgba(6,100,220,0.05) 55%, transparent 78%);
    }

    /* Bottom fade */
    .kore-hero-bottom-fade { background: linear-gradient(to bottom, transparent, #ffffff); }
    .dark .kore-hero-bottom-fade { background: linear-gradient(to bottom, transparent, #0B1120) !important; }
    .dark .kore-card             { background: #1E293B !important; border-color: #1E3A5F !important; box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important; }
    .dark .kore-card:hover       { border-color: var(--kore-hover-border) !important; box-shadow: var(--kore-hover-shadow) !important; }
    .dark .kore-icon-chip        { background: linear-gradient(135deg, rgba(47,143,255,0.15) 0%, rgba(6,241,248,0.1) 100%); color: #60A5FA; }
    .dark .kore-section-divider  { background: #1E293B !important; }
    .dark .kore-h1               { color: #F1F5F9 !important; }
    .dark .kore-subtext          { color: #94A3B8 !important; }
    .dark .kore-label            { color: #475569 !important; }
    .dark .kore-card-title       { color: #F1F5F9 !important; }
    .dark .kore-card-desc        { color: #94A3B8 !important; }
    .dark .kore-footer           { border-color: #1E293B !important; color: #475569 !important; }
    .dark .kore-footer a         { color: #475569 !important; }

    /* Responsive */
    @media (max-width: 1024px) {
      .kore-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
      .kore-cap-grid { grid-template-columns: repeat(2, 1fr) !important; }
      .kore-sol-grid { grid-template-columns: repeat(2, 1fr) !important; }
    }
    @media (max-width: 768px) {
      .kore-container { padding: 24px 16px 48px !important; max-width: 100% !important; }
      .kore-grid-4    { grid-template-columns: repeat(2, 1fr) !important; }
      .kore-grid-3    { grid-template-columns: 1fr !important; }
      .kore-solutions-outer { grid-template-columns: 1fr !important; gap: 28px !important; }
      .kore-cap-list  { grid-template-columns: 1fr !important; }
      .kore-cap-item:nth-child(odd) { border-right: none !important; }
      .kore-cap-grid { grid-template-columns: 1fr !important; }
      .kore-sol-grid { grid-template-columns: 1fr !important; }
      .kore-resources-grid { grid-template-columns: 1fr !important; }
      .kore-resource-item, .kore-resource-item:last-child, .kore-resource-item:nth-child(2) { padding: 20px 0 !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
      .kore-resource-item:last-child { border-bottom: none !important; }
    }
    @media (max-width: 480px) {
      .kore-grid-4 { grid-template-columns: 1fr !important; }
    }
  `}</style>
)

export const IconCPU = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/>
    <path d="M15 2v2M15 20v2M9 2v2M9 20v2M2 15h2M2 9h2M20 15h2M20 9h2"/>
  </svg>
)

export const IconBriefcase = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <rect width="20" height="14" x="2" y="7" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
  </svg>
)

export const IconHeadphones = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3"/>
  </svg>
)

export const IconWorkflow = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <rect x="3" y="3" width="6" height="6" rx="1"/><rect x="15" y="15" width="6" height="6" rx="1"/><rect x="15" y="3" width="6" height="6" rx="1"/>
    <path d="M6 9v3a3 3 0 0 0 3 3h6M18 9v3"/>
  </svg>
)

export const IconUsers = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
    <path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
  </svg>
)

export const IconUserPlus = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
    <line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/>
  </svg>
)

export const IconMonitor = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/>
  </svg>
)

export const IconActivity = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
  </svg>
)

export const IconShoppingBag = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/>
  </svg>
)

export const IconLandmark = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <line x1="3" y1="22" x2="21" y2="22"/><line x1="6" y1="18" x2="6" y2="11"/>
    <line x1="10" y1="18" x2="10" y2="11"/><line x1="14" y1="18" x2="14" y2="11"/>
    <line x1="18" y1="18" x2="18" y2="11"/><polygon points="12 2 20 7 4 7"/>
  </svg>
)

export const IconMessageCircle = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
  </svg>
)

export const IconBookOpen = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
  </svg>
)

export const IconLifeBuoy = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="4"/>
    <line x1="4.93" y1="4.93" x2="9.17" y2="9.17"/><line x1="14.83" y1="14.83" x2="19.07" y2="19.07"/>
    <line x1="14.83" y1="9.17" x2="19.07" y2="4.93"/><line x1="4.93" y1="19.07" x2="9.17" y2="14.83"/>
  </svg>
)

export const IconAgents = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/>
    <path d="M2 14h2M20 14h2M15 13v2M9 13v2"/>
  </svg>
)

export const IconTools = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
  </svg>
)

export const IconSearchData = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
  </svg>
)

export const IconModelHub = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14a9 3 0 0 0 18 0V5"/>
    <path d="M3 12a9 3 0 0 0 18 0"/>
  </svg>
)

export const IconPromptStudio = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
    <path d="M8 10h8M8 14h5"/>
  </svg>
)

export const IconEvaluation = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/>
  </svg>
)

export const IconShield = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
  </svg>
)

export const IconObservability = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/>
  </svg>
)

export const HeroSection = () => {
  const canvasRef = useRef(null)

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return
    const ctx = canvas.getContext('2d')
    const hero = canvas.parentElement

    const NODE_COUNT = 90
    const CONNECT_DIST = 160
    const MOUSE_RADIUS = 140
    const MOUSE_FORCE = 1.2
    const MAX_SPEED = 4
    let nodes = []
    let raf = null
    let paused = false
    const mouse = { x: -9999, y: -9999, over: false }

    function resize() {
      canvas.width = hero.offsetWidth
      canvas.height = hero.offsetHeight
    }

    function initNodes() {
      nodes = Array.from({ length: NODE_COUNT }, () => {
        const x = Math.random() * canvas.width
        const y = Math.random() * canvas.height
        return { x, y, ox: x, oy: y, vx: (Math.random() - 0.5) * 0.5, vy: (Math.random() - 0.5) * 0.5 }
      })
    }

    function isDark() {
      return document.documentElement.classList.contains('dark')
    }

    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      const dark = isDark()
      const nodeRgb = dark ? '100,180,255' : '47,143,255'
      const lineRgb = '47,143,255'
      const nodeAlpha = dark ? 0.85 : 0.75
      const lineMaxAlpha = dark ? 0.5 : 0.45

      for (const n of nodes) {
        if (mouse.over) {
          const dx = n.x - mouse.x
          const dy = n.y - mouse.y
          const dist = Math.sqrt(dx * dx + dy * dy)
          if (dist < MOUSE_RADIUS && dist > 0) {
            const force = (MOUSE_RADIUS - dist) / MOUSE_RADIUS * MOUSE_FORCE
            n.vx += (dx / dist) * force
            n.vy += (dy / dist) * force
          }
        } else {
          n.vx += (n.ox - n.x) * 0.012
          n.vy += (n.oy - n.y) * 0.012
        }
        n.vx *= 0.92
        n.vy *= 0.92
        const speed = Math.sqrt(n.vx * n.vx + n.vy * n.vy)
        if (speed > MAX_SPEED) { n.vx = n.vx / speed * MAX_SPEED; n.vy = n.vy / speed * MAX_SPEED }
        n.x += n.vx
        n.y += n.vy
        if (n.x < 0 || n.x > canvas.width)  n.vx *= -1
        if (n.y < 0 || n.y > canvas.height) n.vy *= -1
      }

      for (let i = 0; i < nodes.length; i++) {
        for (let j = i + 1; j < nodes.length; j++) {
          const dx = nodes[i].x - nodes[j].x
          const dy = nodes[i].y - nodes[j].y
          const dist = Math.sqrt(dx * dx + dy * dy)
          if (dist < CONNECT_DIST) {
            const alpha = lineMaxAlpha * (1 - dist / CONNECT_DIST)
            ctx.strokeStyle = `rgba(${lineRgb},${alpha})`
            ctx.lineWidth = 0.8
            ctx.beginPath()
            ctx.moveTo(nodes[i].x, nodes[i].y)
            ctx.lineTo(nodes[j].x, nodes[j].y)
            ctx.stroke()
          }
        }
      }

      for (const n of nodes) {
        ctx.fillStyle = `rgba(${nodeRgb},${nodeAlpha})`
        ctx.beginPath()
        ctx.arc(n.x, n.y, 2.5, 0, Math.PI * 2)
        ctx.fill()
      }
    }

    function loop() {
      if (!paused) draw()
      raf = requestAnimationFrame(loop)
    }

    function onMouseMove(e) {
      const rect = hero.getBoundingClientRect()
      mouse.x = e.clientX - rect.left
      mouse.y = e.clientY - rect.top
    }
    function onMouseEnter() { mouse.over = true }
    function onMouseLeave() { mouse.over = false; mouse.x = -9999; mouse.y = -9999 }
    function onVisibility() { paused = document.hidden }
    function onResize() { resize(); initNodes() }

    resize()
    initNodes()
    loop()

    hero.addEventListener('mousemove', onMouseMove)
    hero.addEventListener('mouseenter', onMouseEnter)
    hero.addEventListener('mouseleave', onMouseLeave)
    window.addEventListener('resize', onResize)
    document.addEventListener('visibilitychange', onVisibility)

    return () => {
      cancelAnimationFrame(raf)
      hero.removeEventListener('mousemove', onMouseMove)
      hero.removeEventListener('mouseenter', onMouseEnter)
      hero.removeEventListener('mouseleave', onMouseLeave)
      window.removeEventListener('resize', onResize)
      document.removeEventListener('visibilitychange', onVisibility)
    }
  }, [])

  return (
    <div className="kore-hero ka1" style={{ position: 'relative', overflow: 'hidden', padding: '100px 48px 90px', textAlign: 'center' }}>
      <canvas ref={canvasRef} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', zIndex: 0 }} />
      <div className="kore-hero-overlay" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 1 }} />
      <div className="kore-hero-bottom-fade" style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: '120px', pointerEvents: 'none', zIndex: 1 }} />

      <div style={{ position: 'relative', zIndex: 2 }}>

        <div className="ka1 kore-hero-badge" style={{
          display: 'inline-flex', alignItems: 'center',
          border: '1px solid', borderRadius: '100px', padding: '4px 14px', marginBottom: '24px',
          fontSize: '11px', fontWeight: 600, letterSpacing: '0.1em',
        }}>
          ✦ Enterprise AI Platform
        </div>

        <div className="ka2">
          <h1 className="kore-h1 kore-hero-title" style={{
            fontSize: 'clamp(1.512rem, 2.835vw, 2.268rem)', fontWeight: 700,
            lineHeight: 1.08, margin: '0 0 20px', textWrap: 'balance',
          }}>
            Kore.ai Product Documentation
          </h1>
        </div>

        <div className="ka3">
          <p className="kore-subtext" style={{
            fontSize: '1.05rem',
            maxWidth: '480px', margin: '0 auto 0', lineHeight: 1.6,
          }}>
            Build and deploy AI agents at enterprise scale — quickly, securely, and flexibly.
          </p>
        </div>

      </div>
    </div>
  )
}

export const LazyLoader = () => {
  useEffect(() => {
    const targets = document.querySelectorAll(
      '.kore-container .kore-card, .kore-cap-tile, .kore-sol-card, .kore-container .kore-section, .kore-resources-bleed .kore-resource-item'
    )
    targets.forEach(el => {
      el.classList.add('kore-lazy')
      const siblings = Array.from(el.parentElement.children).filter(c =>
        c.classList.contains('kore-card') || c.classList.contains('kore-cap-item') || c.classList.contains('kore-sol-item')
      )
      const idx = siblings.indexOf(el)
      if (idx >= 0) el.style.transitionDelay = `${idx * 55}ms`
    })
    const observer = new IntersectionObserver(
      entries => entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('kore-in'); observer.unobserve(e.target) } }),
      { threshold: 0.08, rootMargin: '0px 0px -32px 0px' }
    )
    targets.forEach(el => observer.observe(el))
    return () => observer.disconnect()
  }, [])
  return null
}

export const CapabilityTile = ({ href, icon, title, description }) => (
  <a href={href} className="kore-cap-tile">
    <div className="kore-cap-tile-header">
      <div className="kore-icon-chip">{icon}</div>
      <div className="kore-cap-tile-title">{title}</div>
      <svg className="kore-cap-tile-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
    </div>
    <p className="kore-cap-tile-desc">{description}</p>
  </a>
)

export const SolutionCard = ({ href, icon, title, description }) => (
  <a href={href} className="kore-sol-card">
    <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
      <div className="kore-icon-chip" style={{ width: '36px', height: '36px' }}>{icon}</div>
      <div className="kore-sol-card-title" style={{ flex: 1 }}>{title}</div>
      <svg className="kore-sol-card-arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--kore-accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: 0, flexShrink: 0, transition: 'opacity 0.2s cubic-bezier(0.22,0.6,0.36,1), transform 0.2s cubic-bezier(0.22,0.6,0.36,1)' }}><path d="M5 12h14M12 5l7 7-7 7"/></svg>
    </div>
    <p className="kore-sol-card-desc">{description}</p>
  </a>
)

export const ResourceItem = ({ href, icon, title, description, cta }) => (
  <a href={href} className="kore-resource-item">
    <div className="kore-resource-icon">{icon}</div>
    <div className="kore-resource-title">{title}</div>
    <p className="kore-resource-desc">{description}</p>
    <span className="kore-resource-link">
      {cta}
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
    </span>
  </a>
)

export const SectionLabel = ({ children }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: '14px', marginBottom: '24px' }}>
    <span className="kore-label" style={{ fontSize: '11px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em', color: '#94A3B8', whiteSpace: 'nowrap' }}>
      {children}
    </span>
    <div className="kore-section-divider" style={{ flex: 1, height: '1px', background: '#E2EAF4' }} />
  </div>
)

export const ProductCard = ({ href, icon, title, description, cardClass }) => (
  <a href={href} className={`kore-card${cardClass ? ' ' + cardClass : ''}`} style={{ display: 'flex', flexDirection: 'column', gap: '12px', borderRadius: '12px', border: '1px solid var(--kore-border)', padding: 'var(--kore-card-pad)', textDecoration: 'none', boxShadow: '0 1px 4px rgba(0,0,0,0.04)' }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
      <div className="kore-icon-chip">{icon}</div>
      <div className="kore-card-title" style={{ fontWeight: 600, fontSize: 'var(--kore-card-title)', color: 'var(--kore-text)', flex: 1 }}>
        {title}
      </div>
      <svg className="kore-card-arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--kore-accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: 0, flexShrink: 0, transition: 'opacity 0.2s cubic-bezier(0.22,0.6,0.36,1), transform 0.2s cubic-bezier(0.22,0.6,0.36,1)' }}><path d="M5 12h14M12 5l7 7-7 7"/></svg>
    </div>
    <p className="kore-card-desc" style={{ fontSize: 'var(--kore-card-desc)', color: 'var(--kore-muted)', lineHeight: 'var(--kore-body-lh)', margin: 0 }}>
      {description}
    </p>
  </a>
)

export const CardGrid = ({ cols, children }) => (
  <div className={`kore-grid kore-grid-${cols}`}>{children}</div>
)

export const DocsFooter = () => (
  <div className="kore-footer" style={{ marginTop: '0', borderTop: '1px solid #E2EAF4', paddingTop: '32px', paddingBottom: '32px', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: '16px', fontSize: '13px', color: '#64748B' }}>
    <span>© 2026 Kore.ai, Inc.</span>
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px', alignItems: 'center', justifyContent: 'center' }}>
      <a href="https://kore.ai/acceptable-use-policy/" style={{ color: '#64748B', textDecoration: 'none' }}>Acceptable Use Policy</a>
      <a href="https://kore.ai/terms-of-service/"      style={{ color: '#64748B', textDecoration: 'none' }}>Terms of Service</a>
      <a href="https://kore.ai/privacy-policy/"        style={{ color: '#64748B', textDecoration: 'none' }}>Privacy Policy</a>
      <a href="https://kore.ai/cookie-policy/"         style={{ color: '#64748B', textDecoration: 'none' }}>Cookie Policy</a>
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
      <a href="https://github.com/Koredotcom" aria-label="GitHub" style={{ color: '#64748B', textDecoration: 'none' }}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>
      </a>
      <a href="https://www.linkedin.com/company/kore-ai/" aria-label="LinkedIn" style={{ color: '#64748B', textDecoration: 'none' }}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
      </a>
      <a href="https://www.facebook.com/koreinc/" aria-label="Facebook" style={{ color: '#64748B', textDecoration: 'none' }}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
      </a>
    </div>
  </div>
)

<KoreStyles />

<LazyLoader />

<div className="kore-page">
  <HeroSection />

  <div className="kore-ap-bleed">
    <div className="kore-ap-inner">
      <div className="kore-ap-card">
        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          <div className="kore-icon-chip">
            <IconCPU />
          </div>

          <div className="kore-ap-title" style={{ flex: 1 }}>Agent Platform</div>

          <a href="/agent-platform/">
            <svg className="kore-ap-card-arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--kore-accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: 0, flexShrink: 0, transition: 'opacity 0.2s cubic-bezier(0.22,0.6,0.36,1), transform 0.2s cubic-bezier(0.22,0.6,0.36,1)' }}>
              <path d="M5 12h14M12 5l7 7-7 7" />
            </svg>
          </a>
        </div>

        <p className="kore-ap-desc" style={{ marginBottom: '4px', maxWidth: 'none' }}>The foundation for all AI solutions, providing enterprise-grade multi-agent orchestration with end-to-end capabilities, no-code tools, SDKs, and robust security.</p>

        <div className="kore-cap-grid">
          <CapabilityTile href="/agent-platform/agents/agentic-apps/create-an-app" icon={<IconAgents />} title="AI Agents" description="Build intelligent AI systems that autonomously collaborate to handle complex tasks." />

          <CapabilityTile href="/agent-platform/tools" icon={<IconTools />} title="Tools" description="Framework with connectors and APIs enabling AI agents to interact with enterprise systems." />

          <CapabilityTile href="/agent-platform/knowledge" icon={<IconSearchData />} title="Search & Data AI" description="Retrieval system with connectors for agents to access and enrich organizational knowledge." />

          <CapabilityTile href="/agent-platform/models" icon={<IconModelHub />} title="Model Hub" description="Fine-tune and host AI models with enterprise data, supporting various model types." />

          <CapabilityTile href="/agent-platform/prompts" icon={<IconPromptStudio />} title="Prompt Studio" description="Collaborative environment to create and test prompts for optimal LLM performance." />

          <CapabilityTile href="/agent-platform/evaluation" icon={<IconEvaluation />} title="Evaluation Studio" description="Measure LLM and app performance using customizable metrics, AI-human evaluators." />

          <CapabilityTile href="/agent-platform/guardrails" icon={<IconShield />} title="AI Safety" description="Framework providing governance and controls to protect sensitive data, regulate AI outputs." />

          <CapabilityTile href="/agent-platform/analytics" icon={<IconObservability />} title="Observability" description="Comprehensive logging and monitoring, offering visibility into AI operations." />
        </div>
      </div>
    </div>
  </div>

  <br />

  <br />

  <div className="kore-container" style={{ position: 'relative', zIndex: 10 }}>
    <div className="kore-section ka5">
      <CardGrid cols={3}>
        <ProductCard href="/ai-for-work/" icon={<IconBriefcase />} title="AI for Work" cardClass="kore-card-work" description="Boost employee productivity through intelligent knowledge access, task automation, and cross-org collaboration." />

        <ProductCard href="/ai-for-service/" icon={<IconHeadphones />} title="AI for Service" cardClass="kore-card-service" description="Automate customer interactions across voice and digital channels with agentic contact center solutions." />

        <ProductCard href="/ai-for-process/" icon={<IconWorkflow />} title="AI for Process" cardClass="kore-card-process" description="Transform knowledge-intensive workflows into agent-driven processes with built-in compliance controls." />
      </CardGrid>
    </div>
  </div>

  <div className="kore-ap-bleed" style={{ background: 'transparent', padding: '80px 0 80px' }}>
    <div className="kore-ap-inner">
      <div style={{ marginBottom: '40px' }}>
        <div className="kore-section-eyebrow">Solutions</div>
        <h2 className="kore-section-title">Built for Your Industry</h2>
        <p className="kore-section-sub" style={{ marginTop: '12px', maxWidth: 'none' }}>Pre-built AI solutions for the workflows that matter most — across employee experience and customer engagement.</p>
      </div>

      <div className="kore-sol-group-label">Employee Experience</div>

      <div className="kore-sol-grid" style={{ marginBottom: '24px' }}>
        <SolutionCard href="https://docs.kore.ai/ai-for-hr/" icon={<IconUsers />} title="AI for HR" description="Personalized support throughout the employee lifecycle — from onboarding to offboarding." />

        <SolutionCard href="https://docs.kore.ai/recruitassist/" icon={<IconUserPlus />} title="AI for Recruit" description="Gen AI-powered hiring that improves recruitment speed, quality, and candidate experience." />

        <SolutionCard href="https://docs.kore.ai/ai-for-it/" icon={<IconMonitor />} title="AI for IT" description="Self-service and Help Desk automation for faster IT support without ticket overload." />
      </div>

      <div className="kore-sol-group-label">Customer Engagement</div>

      <div className="kore-sol-grid">
        <SolutionCard href="https://docs.kore.ai/healthassist/" icon={<IconActivity />} title="AI for Healthcare" description="Conversational support for patients, providers, and members across care touchpoints." />

        <SolutionCard href="https://docs.kore.ai/retailassist/" icon={<IconShoppingBag />} title="AI for Retail" description="Order management and customer service across digital, voice, and in-store channels." />

        <SolutionCard href="https://docs.kore.ai/ai-for-banking/" icon={<IconLandmark />} title="AI for Banking" description="Domain-specific LLM for banking — deployable across chat, voice, and web in 30 days." />
      </div>
    </div>
  </div>

  <div className="kore-resources-bleed">
    <div className="kore-resources-inner">
      <div style={{ marginBottom: '36px' }}>
        <div className="kore-section-eyebrow" style={{ color: '#60A5FA' }}>Resources</div>
        <h2 className="kore-section-title" style={{ color: '#F1F5F9' }}>Learn, Connect, Get Help</h2>
      </div>

      <div className="kore-resources-grid">
        <ResourceItem href="https://academy.kore.ai" icon={<IconBookOpen />} title="Academy" description="In-depth training courses on Kore.ai products, certifications, and feature deep-dives." cta="Browse Courses" />

        <ResourceItem href="https://community.kore.ai" icon={<IconMessageCircle />} title="Community" description="Search threads, post questions, and get answers from Kore.ai users and experts." cta="Join the Community" />

        <ResourceItem href="https://support.kore.ai" icon={<IconLifeBuoy />} title="Support" description="Open a ticket or browse the knowledge base for technical help from our team." cta="Get Support" />
      </div>
    </div>
  </div>

  <div className="kore-footer-bleed">
    <div className="kore-footer-inner">
      <DocsFooter />
    </div>
  </div>
</div>
