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

# Home

export const McpPromo = () => {
  const AIIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#FCC705" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z" />
      <circle cx="9" cy="14" r="1" fill="#FCC705" stroke="none" />
      <circle cx="15" cy="14" r="1" fill="#FCC705" stroke="none" />
    </svg>;
  return <section className="py-6 px-6 md:px-12 lg:px-20 bg-[#6352E0]">
      <div className="max-w-[1400px] mx-auto flex flex-col lg:flex-row items-center justify-between gap-4">
        <div className="flex items-center gap-4 flex-1">
          <div className="flex-shrink-0">
            <AIIcon />
          </div>
          <div>
            <h2 className="text-lg font-bold text-white mb-1 flex items-center gap-2">
              Build with AI on Nayax
              <span className="text-xs font-semibold bg-[#FCC705] text-gray-900 px-2 py-0.5 rounded-full">New</span>
            </h2>
            <p className="text-purple-200 text-sm">
              Connect your AI assistant to Nayax documentation with our MCP server, or install agent skills that guide it through Nayax API integrations.
            </p>
          </div>
        </div>
        <a href="/docs/get-started/build-with-ai" className="flex-shrink-0 bg-[#FCC705] hover:bg-yellow-300 text-gray-900 font-semibold py-2 px-6 rounded-lg transition-all no-underline whitespace-nowrap text-sm">
          Set Up Your AI Assistant
        </a>
      </div>
    </section>;
};

export const AcceptPayments = () => {
  const DynamicQRIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="48" height="54" viewBox="0 0 48 54" fill="none">
      <circle cx="24" cy="30.5" r="23" />
      <g clip-path="url(#clip0_362_679)">
        <path d="M19.5 9.5H10.5C9.67157 9.5 9 10.1716 9 11V20C9 20.8284 9.67157 21.5 10.5 21.5H19.5C20.3284 21.5 21 20.8284 21 20V11C21 10.1716 20.3284 9.5 19.5 9.5Z" stroke="#9BF8C9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M19.5 27.5H10.5C9.67157 27.5 9 28.1716 9 29V38C9 38.8284 9.67157 39.5 10.5 39.5H19.5C20.3284 39.5 21 38.8284 21 38V29C21 28.1716 20.3284 27.5 19.5 27.5Z" stroke="#9BF8C9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M37.5 9.5H28.5C27.6716 9.5 27 10.1716 27 11V20C27 20.8284 27.6716 21.5 28.5 21.5H37.5C38.3284 21.5 39 20.8284 39 20V11C39 10.1716 38.3284 9.5 37.5 9.5Z" stroke="#9BF8C9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M27 27.5V33.5" stroke="#9BF8C9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M27 39.5H33V27.5" stroke="#9BF8C9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M33 30.5H39" stroke="#9BF8C9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M39 36.5V39.5" stroke="#9BF8C9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
      </g>
      <defs><clipPath id="clip0_362_679"><rect width="48" height="48" fill="white" transform="translate(0 0.5)" /></clipPath></defs>
    </svg>;
  const StaticQRIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="48" height="54" viewBox="0 0 48 54" fill="none">
      <circle cx="24" cy="30.5" r="23" />
      <g clip-path="url(#clip0_362_666)">
        <path d="M34.5 9.5H42V17" stroke="#9BF8C9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M13.5 39.5H6V32" stroke="#9BF8C9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M42 32V39.5H34.5" stroke="#9BF8C9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M6 17V9.5H13.5" stroke="#9BF8C9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M15 17V32" stroke="#9BF8C9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M33 17V32" stroke="#9BF8C9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M27 17V32" stroke="#9BF8C9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M21 17V32" stroke="#9BF8C9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
      </g>
      <defs><clipPath id="clip0_362_666"><rect width="48" height="48" fill="white" transform="translate(0 0.5)" /></clipPath></defs>
    </svg>;
  const EMVIntegrationIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="48" height="54" viewBox="0 0 48 54" fill="none">
      <circle cx="24" cy="30.5" r="23" />
      <g clip-path="url(#clip0_362_657)">
        <path d="M42 11H6C5.17157 11 4.5 11.6716 4.5 12.5V36.5C4.5 37.3284 5.17157 38 6 38H42C42.8284 38 43.5 37.3284 43.5 36.5V12.5C43.5 11.6716 42.8284 11 42 11Z" stroke="#9BF8C9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M31.5 32H37.5" stroke="#9BF8C9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M22.5 32H25.5" stroke="#9BF8C9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M4.5 18.5H43.5" stroke="#9BF8C9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
      </g>
      <defs><clipPath id="clip0_362_657"><rect width="48" height="48" fill="white" transform="translate(0 0.5)" /></clipPath></defs>
    </svg>;
  const ExternalPrepaidIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="48" height="54" viewBox="0 0 48 54" fill="none">
      <circle cx="24" cy="30.5" r="23" />
      <g clip-path="url(#clip0_362_650)">
        <path d="M7.5 11V35C7.5 35.7956 7.81607 36.5587 8.37868 37.1213C8.94129 37.6839 9.70435 38 10.5 38H40.5C40.8978 38 41.2794 37.842 41.5607 37.5607C41.842 37.2794 42 36.8978 42 36.5V15.5C42 15.1022 41.842 14.7206 41.5607 14.4393C41.2794 14.158 40.8978 14 40.5 14H10.5C9.70435 14 8.94129 13.6839 8.37868 13.1213C7.81607 12.5587 7.5 11.7956 7.5 11ZM7.5 11C7.5 10.2044 7.81607 9.44129 8.37868 8.87868C8.94129 8.31607 9.70435 8 10.5 8H36" stroke="#9BF8C9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M33.75 27.5C34.9926 27.5 36 26.4926 36 25.25C36 24.0074 34.9926 23 33.75 23C32.5074 23 31.5 24.0074 31.5 25.25C31.5 26.4926 32.5074 27.5 33.75 27.5Z" fill="#9BF8C9" />
      </g>
      <defs><clipPath id="clip0_362_650"><rect width="48" height="48" fill="white" transform="translate(0 0.5)" /></clipPath></defs>
    </svg>;
  const cards = [{
    icon: <ExternalPrepaidIcon />,
    title: "External Prepaid Card",
    description: "Accept closed-loop cards on Nayax devices via server-to-server authorization.",
    link: "/docs/cortina/prepaid-card/copy-of-prepaid-card-authorization"
  }, {
    icon: <StaticQRIcon />,
    title: "Static QR",
    description: "Accept digital wallets or loyalty apps using simple static QR code integration.",
    link: "/docs/cortina/staticqr/static-qr-start"
  }, {
    icon: <DynamicQRIcon />,
    title: "Dynamic QR",
    description: "Implement secure, dynamic QR scans for high-volume digital wallet payments.",
    link: "/docs/cortina/dynamicqr/dynamicqr-decline-reasons"
  }, {
    icon: <EMVIntegrationIcon />,
    title: "EMV Integration",
    description: "Directly integrate EMV card payments through your preferred acquirer or gateway.",
    link: "/docs/cortina/credit-card/credit-card-decline-reasons"
  }];
  return <section className="py-16 px-6 md:px-12 lg:px-20 bg-white dark:bg-[#1B1B1B]">
      <div className="max-w-[1400px] mx-auto">
        <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white mb-4">
          In-Person Payments
        </h2>
        <p className="text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-5xl">
          Accept customer apps, loyalty cards, or closed-loop methods on any Nayax POS via a Cortina integration.{" "}
          <a href="/docs/cortina/cortina-integration-process" className="text-blue-600 dark:text-blue-400 hover:underline">
            Learn More →
          </a>
        </p>

        {}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
          {cards.map((card, index) => <a key={index} href={card.link} className="group border border-gray-200 dark:border-gray-700 rounded-lg p-6 bg-white dark:bg-[#262626] hover:border-green-400 dark:hover:border-green-400 transition-all no-underline flex flex-col">
              <div className="relative w-14 h-14 flex items-center justify-center mb-4">
                <div className="absolute inset-0 bg-teal-400/20 dark:bg-green-400/10 rounded-full group-hover:bg-green-400/20 transition-colors"></div>
                <div className="relative z-10">{card.icon}</div>
              </div>

              <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-2 group-hover:text-green-500 transition-colors">
                {card.title}
              </h3>

              <p className="text-sm text-gray-600 dark:text-gray-400 mb-0">
                {card.description}
              </p>
            </a>)}
        </div>
      </div>
    </section>;
};

export const ManageData = () => {
  const SalesAlertsIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="48" height="54" viewBox="0 0 48 54" fill="none">
      <circle cx="24" cy="30.5" r="23" />
      <g clip-path="url(#clip0_281_570)">
        <path d="M6 18.5V38C6 38.3978 6.15804 38.7794 6.43934 39.0607C6.72064 39.342 7.10218 39.5 7.5 39.5H40.5C40.8978 39.5 41.2794 39.342 41.5607 39.0607C41.842 38.7794 42 38.3978 42 38V18.5L24 6.5L6 18.5Z" stroke="#6352E0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M20.7279 29L6.46289 39.0763" stroke="#6352E0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M41.5365 39.0763L27.2715 29" stroke="#6352E0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M42 18.5L27.2738 29H20.7281L6 18.5" stroke="#6352E0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
      </g>
      <defs><clipPath id="clip0_281_570"><rect width="48" height="48" fill="white" transform="translate(0 0.5)" /></clipPath></defs>
    </svg>;
  const OperationsAPIIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="51" height="54" viewBox="0 0 51 54" fill="none">
      <circle cx="23" cy="30.332" r="23" fill-opacity="0.8" />
      <g clip-path="url(#clip0_281_467)">
        <path d="M29.1463 12.7955L31.2088 10.733C32.0205 9.92104 32.9842 9.27694 34.0449 8.8375C35.1056 8.39806 36.2425 8.17187 37.3906 8.17188C38.5388 8.17187 39.6756 8.39806 40.7363 8.8375C41.797 9.27694 42.7608 9.92104 43.5725 10.733C44.3845 11.5447 45.0286 12.5085 45.468 13.5692C45.9075 14.6299 46.1336 15.7668 46.1336 16.9149C46.1336 18.063 45.9075 19.1999 45.468 20.2606C45.0286 21.3213 44.3845 22.285 43.5725 23.0968L39.0013 27.668L37.0625 29.6068C36.2498 30.4196 35.2849 31.0642 34.2228 31.5037C33.1607 31.9432 32.0225 32.1689 30.8731 32.1681C29.7237 32.1672 28.5857 31.9397 27.5243 31.4986C26.463 31.0575 25.499 30.4114 24.6875 29.5974C23.8476 28.7578 23.1881 27.7554 22.7496 26.6517C22.3111 25.548 22.1028 24.3663 22.1375 23.1793" stroke="#6352E0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M24.1292 36.5406L22.0667 38.6031C21.254 39.4159 20.289 40.0605 19.2269 40.5C18.1649 40.9395 17.0266 41.1653 15.8772 41.1644C14.7278 41.1635 13.5899 40.936 12.5285 40.4949C11.4671 40.0538 10.5031 39.4078 9.69165 38.5937C8.05663 36.953 7.1395 34.7305 7.14161 32.4142C7.14371 30.0979 8.06489 27.8771 9.7029 26.2393L16.2129 19.7293C17.0246 18.9174 17.9884 18.2733 19.0491 17.8338C20.1098 17.3944 21.2467 17.1682 22.3948 17.1682C23.5429 17.1682 24.6798 17.3944 25.7405 17.8338C26.8012 18.2733 27.7649 18.9174 28.5767 19.7293C29.42 20.5689 30.0824 21.5724 30.5229 22.6778C30.9635 23.7833 31.1727 24.9673 31.1379 26.1568" stroke="#6352E0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
      </g>
      <defs><clipPath id="clip0_281_467"><rect width="48" height="48" fill="white" transform="translate(2.6377 0.667969)" /></clipPath></defs>
    </svg>;
  const cards = [{
    icon: <SalesAlertsIcon />,
    title: "Real-Time Sales & Alerts",
    subtitle: "Transaction Reporting",
    description: "Receive transaction reports in real-time via Amazon SQS, or periodically via SFTP or Email.",
    link: "/docs/manage-data-operations/amazon-sqs/overview"
  }, {
    icon: <OperationsAPIIcon />,
    title: "Operations & Management",
    subtitle: "Lynx API",
    description: "Integrate the Nayax Core platform into your environment to manage inventory and devices.",
    link: "docs/manage-data-operations/lynx-api/lynx-overview"
  }];
  return <section className="py-16 px-6 md:px-12 lg:px-20 bg-white dark:bg-[#1B1B1B]">
      <div className="max-w-[1400px] mx-auto">
        <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white mb-4">
          Platform Management
        </h2>
        <p className="text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-5xl">
          Monitor transactions and manage operations directly from your business applications.
        </p>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8">
          {cards.map((card, index) => <a key={index} href={card.link} className="group border border-gray-200 dark:border-gray-700 rounded-lg p-6 bg-white dark:bg-[#262626] hover:border-purple-400 dark:hover:border-purple-400 transition-all no-underline flex flex-col">
              <div className="relative w-16 h-16 flex items-center justify-center mb-4">
                <div className="absolute inset-0 bg-purple-400/20 dark:bg-purple-400/10 rounded-full group-hover:bg-purple-400/20 transition-colors"></div>
                <div className="relative z-10">{card.icon}</div>
              </div>

              <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-2 group-hover:text-purple-500 transition-colors">
                {card.title} <span className="text-gray-400 font-normal">| {card.subtitle}</span>
              </h3>

              <p className="text-sm text-gray-600 dark:text-gray-400 mb-0">
                {card.description}
              </p>
            </a>)}
        </div>
      </div>
    </section>;
};

export const IntegratePOS = () => {
  const AttendedDeviceIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="46" height="48" viewBox="0 0 46 48" fill="none">
      <g clipPath="url(#clip0_371_481)">
        <path d="M16.9056 5.80518H12.853C11.6525 5.80518 10.6777 6.77998 10.6777 7.98043V45.6186C10.6777 47.0899 11.8692 48.2813 13.3404 48.2813H32.8545C34.3257 48.2813 35.5171 47.0899 35.5171 45.6186V7.98043C35.5171 6.77998 34.5423 5.80518 33.3419 5.80518" stroke="#FFCD00" strokeWidth="1.5" strokeLinejoin="round" />
        <path d="M29.9743 10.3365V1.62646L27.6727 2.94425L25.3801 1.62646L23.0965 2.94425L20.8039 1.62646L18.5113 2.94425L16.2188 1.62646V10.3365" stroke="#FFCD00" strokeWidth="1.5" strokeLinejoin="round" />
        <path d="M15.5 10.3364H30.6941" stroke="#FFCD00" strokeWidth="1.5" strokeLinejoin="round" />
        <path d="M32.647 13.7932H13.5391V44.0572H32.647V13.7932Z" stroke="#FFCD00" strokeWidth="1.5" strokeLinejoin="round" />
        <path d="M33.5766 5.80518H30.1377" stroke="#FFCD00" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <defs><clipPath id="clip0_371_481"><rect width="26.1843" height="48.555" fill="white" transform="translate(10 0.316406)" /></clipPath></defs>
    </svg>;
  const FuelPumpIcon = () => <svg width="46" height="48" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M34.5 13.5V33.5C34.5 35.1569 33.1569 36.5 31.5 36.5H12.5C10.8431 36.5 9.5 35.1569 9.5 33.5V10.5C9.5 8.84315 10.8431 7.5 12.5 7.5H27.5M34.5 13.5L38.5 17.5V26.5C38.5 28.7091 40.2909 30.5 42.5 30.5V30.5M34.5 13.5H31.5C29.2909 13.5 27.5 11.7091 27.5 9.5V7.5M27.5 7.5V16.5H9.5M20.5 22.5H16.5M31.5 40.5H12.5" stroke="#FFCD00" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
    </svg>;
  const UnattendedDeviceIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="46" height="54" viewBox="0 0 46 54" fill="none">
    <circle cx="23" cy="30.1836" r="23" fill-opacity="0.8" />
    <g clip-path="url(#clip0_371_464)">
      <path d="M36.2071 41.8164H8.62353C7.72916 41.8164 7.00195 41.0511 7.00195 40.1175V2.51528C7.00195 1.58174 7.72916 0.816406 8.62353 0.816406H36.2071C37.1015 0.816406 37.8287 1.58174 37.8287 2.51528V40.1175C37.8287 41.0511 37.1015 41.8164 36.2071 41.8164ZM8.62353 1.86769C8.3059 1.86769 8.04679 2.16205 8.04679 2.51528V40.1175C8.04679 40.4708 8.3059 40.7651 8.62353 40.7651H36.2071C36.5247 40.7651 36.7839 40.4708 36.7839 40.1175V2.51528C36.7839 2.16205 36.5247 1.86769 36.2071 1.86769H8.62353Z" fill="#FFCD00" stroke="#FFCD00" stroke-width="0.5" />
      <path d="M39.4753 40.4623C39.1827 40.4623 38.957 40.2268 38.957 39.9409V2.69185C38.957 2.39749 39.1911 2.17041 39.4753 2.17041C39.7595 2.17041 39.9935 2.4059 39.9935 2.69185V39.9325C39.9935 40.2268 39.7595 40.4539 39.4753 40.4539V40.4623Z" fill="#FFCD00" stroke="#FFCD00" stroke-width="0.5" />
      <path d="M34.1757 37.2326L33.9249 37.199L33.0055 36.9719L30.0465 36.0973L26.4857 35.3908L22.2897 35.0796L18.6871 35.2394L15.118 35.8029L12.1757 36.543L11.4234 36.7701L11.1058 36.7533L10.6628 36.5009L10.4204 36.1141L10.8968 35.8954L10.3702 35.9627L10.3535 35.8197L10.387 4.73541L10.5541 4.35695L10.7882 4.12987L11.1225 4.54197L10.8801 4.071L11.0891 3.9869L11.2479 3.96167L19.1886 3.81869L20.1833 3.40659L20.852 3.01972L21.412 2.85992L22.0222 2.81787L22.7828 2.93561L23.5351 3.28885L24.488 3.75141L25.5161 3.95326H25.6917L32.3452 3.97849L32.9135 4.34013L33.064 4.60926L32.5876 4.82792L33.1142 4.75223L33.1392 4.90361L33.3649 9.5629L33.599 11.0347L33.9751 12.6915L34.1924 13.4232L35.2623 15.2566V15.551L35.0784 36.5935L34.8695 36.9383L34.4599 36.6019L34.7608 37.0392L34.5518 37.1654L34.2008 37.2326H34.1757ZM34.3345 36.3159L34.602 36.3496L34.4348 36.2739H34.2844L34.3429 36.3243L34.3345 36.3159ZM22.3064 34.0283L25.3907 34.2049L28.4667 34.6591L32.1028 35.5674L33.298 35.9543L34.1005 36.1477L34.2259 15.5342L34.1924 15.4417L33.181 13.7764L32.738 12.1028L32.3117 9.68064L32.1362 7.66218L32.0777 5.00454L24.6803 4.88679L23.2175 4.32331L22.3733 3.90279L21.9804 3.85233L21.1278 4.03736L19.7403 4.73541L18.4781 4.98772H18.1856H11.3983V35.6767L16.1294 34.5329L19.2137 34.1461L22.3064 34.0367V34.0283ZM34.5936 15.4164L34.4181 15.4921L34.719 15.4164H34.5936Z" fill="#FFCD00" stroke="#FFCD00" stroke-width="0.5" />
      <path d="M29.2268 32.0185C29.0345 32.0185 28.8339 31.9933 28.6333 31.9596L28.5163 31.9428C28.1819 31.9008 27.7975 31.8419 27.3712 31.7746C25.8415 31.5475 23.7351 31.228 21.9297 31.228C19.5809 31.228 16.7891 31.556 15.3347 31.7494L15.2093 31.7662C14.7329 31.8335 14.2313 31.9008 13.8636 31.5728C13.5125 31.2616 13.4707 30.757 13.4707 30.4038V10.3958H30.3803V30.5972C30.3803 30.9504 30.3385 31.455 29.9874 31.7578C29.7701 31.9512 29.5026 32.0101 29.2268 32.0101V32.0185ZM21.9297 30.1851C23.8187 30.1851 25.9585 30.5047 27.53 30.7402C27.9479 30.8074 28.3324 30.8579 28.6584 30.9084L28.7838 30.9252C28.976 30.9504 29.2268 30.9841 29.3187 30.9672C29.3187 30.9504 29.3438 30.8579 29.3438 30.6056V11.447H14.5155V30.4122C14.5155 30.7149 14.5657 30.799 14.5657 30.799C14.6075 30.799 14.875 30.757 15.0756 30.7318L15.2009 30.7149C16.6804 30.5131 19.5224 30.1851 21.9297 30.1851Z" fill="#FFCD00" stroke="#FFCD00" stroke-width="0.5" />
      <path d="M17.6412 7.98204C17.6412 7.88952 17.566 7.80542 17.4824 7.80542H15.8776C15.7856 7.80542 15.7188 7.88111 15.7188 7.98204V8.20911C15.7188 8.30162 15.794 8.38573 15.8776 8.38573H17.4824C17.5744 8.38573 17.6412 8.31003 17.6412 8.20911V7.98204Z" fill="#FFCD00" stroke="#FFCD00" stroke-width="0.5" />
      <path d="M21.2018 7.98204C21.2018 7.88952 21.1266 7.80542 21.043 7.80542H19.4381C19.3462 7.80542 19.2793 7.88111 19.2793 7.98204V8.20911C19.2793 8.30162 19.3545 8.38573 19.4381 8.38573H21.043C21.1349 8.38573 21.2018 8.31003 21.2018 8.20911V7.98204Z" fill="#FFCD00" stroke="#FFCD00" stroke-width="0.5" />
      <path d="M24.7623 7.98204C24.7623 7.88952 24.6871 7.80542 24.6035 7.80542H22.9987C22.9067 7.80542 22.8398 7.88111 22.8398 7.98204V8.20911C22.8398 8.30162 22.9151 8.38573 22.9987 8.38573H24.6035C24.6955 8.38573 24.7623 8.31003 24.7623 8.20911V7.98204Z" fill="#FFCD00" stroke="#FFCD00" stroke-width="0.5" />
      <path d="M28.3248 7.98204C28.3248 7.88952 28.2496 7.80542 28.166 7.80542H26.5612C26.4692 7.80542 26.4023 7.88111 26.4023 7.98204V8.20911C26.4023 8.30162 26.4776 8.38573 26.5612 8.38573H28.166C28.258 8.38573 28.3248 8.31003 28.3248 8.20911V7.98204Z" fill="#FFCD00" stroke="#FFCD00" stroke-width="0.5" />
      <path d="M21.9966 4.39087C21.6455 4.39087 21.3613 4.70205 21.3613 5.08051C21.3613 5.45897 21.6455 5.77015 21.9966 5.77015C22.3477 5.77015 22.6318 5.45897 22.6318 5.08051C22.6318 4.70205 22.3477 4.39087 21.9966 4.39087Z" fill="#FFCD00" stroke="#FFCD00" stroke-width="0.5" />
      <path d="M17.5335 39.5539C17.5335 39.5539 17.3412 38.9063 17.7675 38.654C18.1186 38.4438 21.788 36.2908 21.788 36.2908C21.788 36.2908 22.2561 36.0216 22.8329 36.2908C23.4096 36.5599 26.4104 38.5952 26.4104 38.5952C26.4104 38.5952 26.9955 38.9736 26.7865 39.5455H17.5418L17.5335 39.5539Z" fill="#FFCD00" stroke="#FFCD00" stroke-width="0.5" />
      <path d="M29.8628 21.0347H13.998V22.086H29.8628V21.0347Z" fill="#FFCD00" stroke="#FFCD00" stroke-width="0.5" />
    </g>
    <defs>
      <clipPath id="clip0_371_464">
        <rect width="33" height="41" fill="white" transform="translate(7 0.816406)" />
      </clipPath>
    </defs>
  </svg>;
  const EmbeddedDeviceIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="48" height="54" viewBox="0 0 48 54" fill="none">
      <circle cx="24" cy="30.5" r="23" />
      <g clip-path="url(#clip0_281_543)">
        <path d="M42 11H6C5.17157 11 4.5 11.6716 4.5 12.5V36.5C4.5 37.3284 5.17157 38 6 38H42C42.8284 38 43.5 37.3284 43.5 36.5V12.5C43.5 11.6716 42.8284 11 42 11Z" stroke="#FFCD00" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M31.5 32H37.5" stroke="#FFCD00" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M22.5 32H25.5" stroke="#FFCD00" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M4.5 18.5H43.5" stroke="#FFCD00" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
      </g>
      <defs><clipPath id="clip0_281_543"><rect width="48" height="48" fill="white" transform="translate(0 0.5)" /></clipPath></defs>
    </svg>;
  const RemoteDeviceIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="48" height="54" viewBox="0 0 48 54" fill="none">
      <circle cx="24.499" cy="30.5" r="23" fill-opacity="0.8" />
      <g clip-path="url(#clip0_371_504)">
        <path d="M39 27.5H9C8.17157 27.5 7.5 28.1716 7.5 29V38C7.5 38.8284 8.17157 39.5 9 39.5H39C39.8284 39.5 40.5 38.8284 40.5 38V29C40.5 28.1716 39.8284 27.5 39 27.5Z" stroke="#FFCD00" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M39 9.5H9C8.17157 9.5 7.5 10.1716 7.5 11V20C7.5 20.8284 8.17157 21.5 9 21.5H39C39.8284 21.5 40.5 20.8284 40.5 20V11C40.5 10.1716 39.8284 9.5 39 9.5Z" stroke="#FFCD00" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M33.75 17.75C34.9926 17.75 36 16.7426 36 15.5C36 14.2574 34.9926 13.25 33.75 13.25C32.5074 13.25 31.5 14.2574 31.5 15.5C31.5 16.7426 32.5074 17.75 33.75 17.75Z" fill="#FFCD00" />
        <path d="M33.75 35.75C34.9926 35.75 36 34.7426 36 33.5C36 32.2574 34.9926 31.25 33.75 31.25C32.5074 31.25 31.5 32.2574 31.5 33.5C31.5 34.7426 32.5074 35.75 33.75 35.75Z" fill="#FFCD00" />
      </g>
      <defs><clipPath id="clip0_371_504"><rect width="48" height="48" fill="white" transform="translate(0 0.5)" /></clipPath></defs>
    </svg>;
  const EVChargerIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="48" height="54" viewBox="0 0 48 54" fill="none">
      <circle cx="24" cy="30.5" r="23" />
      <g clip-path="url(#clip0_281_561)">
        <path d="M21 32L24 24.5H18L21 17" stroke="#FFCD00" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M10.5 41V11C10.5 10.2044 10.8161 9.44129 11.3787 8.87868C11.9413 8.31607 12.7044 8 13.5 8H28.5C29.2956 8 30.0587 8.31607 30.6213 8.87868C31.1839 9.44129 31.5 10.2044 31.5 11V41" stroke="#FFCD00" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M6 41H36" stroke="#FFCD00" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M31.5 21.5H36C36.7956 21.5 37.5587 21.8161 38.1213 22.3787C38.6839 22.9413 39 23.7044 39 24.5V32C39 32.7956 39.3161 33.5587 39.8787 34.1213C40.4413 34.6839 41.2044 35 42 35C42.7956 35 43.5587 34.6839 44.1213 34.1213C44.6839 33.5587 45 32.7956 45 32V16.7431C45.0001 16.3489 44.9224 15.9586 44.7715 15.5944C44.6207 15.2302 44.3995 14.8993 44.1206 14.6206L40.5 11" stroke="#FFCD00" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
      </g>
      <defs><clipPath id="clip0_281_561"><rect width="48" height="48" fill="white" transform="translate(0 0.5)" /></clipPath></defs>
    </svg>;
  const cards = [{
    icon: <UnattendedDeviceIcon />,
    title: "Unattended Devices",
    subtitle: "Marshall",
    description: "Connect unattended machines using VPOS Touch or Onyx via physical connectivity.",
    link: "/docs/integrate-pos-device/marshall/get-started/marshall-integration-process"
  }, {
    icon: <FuelPumpIcon />,
    title: "Fuel & Forecourt",
    subtitle: "Marshall Pro",
    description: "Specialized integration for fuel dispensers featuring a certified step-by-step process.",
    link: "/docs/integrate-pos-device/marshall-pro/getting-started/index"
  }, {
    icon: <AttendedDeviceIcon />,
    title: "Attended Retail",
    subtitle: "TweezerComm",
    description: "Integrate attended payment devices (Nova line) directly with your Point of Sale.",
    link: "/docs/integrate-pos-device/tweezercomm/overview-tweezer"
  }, {
    icon: <EmbeddedDeviceIcon />,
    title: "Embedded Devices",
    subtitle: "EMV Core",
    description: "Connect unattended machines using embedded Nayax payment devices (Uno line).",
    link: "/docs/integrate-pos-device/emv-core/get-started/emv-core-integration-process"
  }, {
    icon: <RemoteDeviceIcon />,
    title: "Remote Integration",
    subtitle: "Spark",
    description: "Remotely integrate your platform with Nayax devices via server-to-server connection.",
    link: "/docs/integrate-pos-device/spark/spark-integration-process"
  }, {
    icon: <EVChargerIcon />,
    title: "EV Charger",
    subtitle: "OCPI",
    description: "Integrate your EV platform using the Open Charge Point Interface (OCPI) protocol.",
    link: "#ocpi",
    comingSoon: true
  }];
  return <section className="py-16 px-6 md:px-12 lg:px-20 bg-white dark:bg-[#1B1B1B]">
      <div className="max-w-[1400px] mx-auto">
        <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white mb-4">
          Terminal SDKs
        </h2>
        <p className="text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-4xl">
          Connect Nayax POS with your machines, kiosks, EV chargers, or any physical application.
        </p>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
          {cards.map((card, index) => {
    const Content = <>
                <div className="relative w-14 h-14 flex items-center justify-center mb-4">
                  <div className="absolute inset-0 bg-yellow-400/20 dark:bg-yellow-400/10 rounded-full group-hover:bg-yellow-400/20 transition-colors"></div>
                  <div className="relative z-10">{card.icon}</div>
                </div>

                <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-2 group-hover:text-yellow-500 transition-colors">
                  {card.title} <span className="text-gray-400 font-normal">| {card.subtitle}</span>
                </h3>

                <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
                  {card.description}
                </p>

                {card.comingSoon && <span className="mt-auto inline-block bg-yellow-400/20 text-yellow-700 dark:text-yellow-400 border border-yellow-400/50 font-bold text-[10px] uppercase tracking-wider px-2 py-1 rounded">
                    Coming Soon
                  </span>}
              </>;
    return card.comingSoon ? <div key={index} className="border border-gray-200 dark:border-gray-700 rounded-lg p-6 bg-white dark:bg-[#262626] opacity-80 flex flex-col cursor-not-allowed">
                {Content}
              </div> : <a key={index} href={card.link} className="group border border-gray-200 dark:border-gray-700 rounded-lg p-6 bg-white dark:bg-[#262626] hover:border-yellow-400 dark:hover:border-yellow-400 transition-all no-underline flex flex-col">
                {Content}
              </a>;
  })}
        </div>
      </div>
    </section>;
};

export const Header = () => {
  return <header className="relative min-h-[320px] bg-gradient-to-b from-gray-100 to-white dark:from-[#262626] dark:to-[#1B1B1B] py-10 px-6 md:px-12 lg:px-20 overflow-hidden flex items-center border-b border-gray-200 dark:border-gray-800">
      <div className="relative max-w-[1400px] mx-auto w-full">
        
        {}
        <div className="mb-12">
          <div className="max-w-3xl">
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white mb-4">
              Nayax API Suite
            </h1>
            <p className="text-base md:text-lg text-gray-600 dark:text-gray-300">
              Leverage robust integrations to support your organization's business requirements.
              For more information, <a href="https://www.nayax.com/contact/" target="_blank" className="text-blue-600 dark:text-blue-400 hover:underline">contact us</a>.
            </p>
          </div>
        </div>

        {}
        <div className="max-w-3xl">
          <button onClick={() => document.querySelector('#search-bar-entry')?.click()} className="flex items-center w-full bg-white dark:bg-[#333333] border border-gray-300 dark:border-gray-600 rounded-2xl px-6 py-4 shadow-xl transition-all hover:border-yellow-400 group">
            <svg className="w-6 h-6 text-gray-400 group-hover:text-yellow-500 transition-colors mr-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
            <span className="text-gray-500 dark:text-gray-400 text-lg">
              Search for integration guides or API references...
            </span>
          </button>
        </div>

      </div>
    </header>;
};

<Header />

<McpPromo />

<IntegratePOS />

<ManageData />

<AcceptPayments />
