Testimonial Section 4

"use client";

import React, { useState, useEffect, useCallback, useMemo } from "react";
import { ArrowLeft, ArrowRight } from "lucide-react";
import { motion, AnimatePresence } from "motion/react";
import Image from "next/image";
import { cn } from "@/lib/utils";


const NvidiaLogo = ({ className }: { className?: string }) => (
  <svg
    className={className}
    viewBox="0 0 85 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g clipPath="url(#clip0_11_36)">
      <mask
        id="mask0_11_36"
        style={{ maskType: "luminance" }}
        maskUnits="userSpaceOnUse"
        x="0"
        y="0"
        width="85"
        height="16"
      >
        <path d="M84.2105 0H0V16H84.2105V0Z" fill="white" />
      </mask>
      <g mask="url(#mask0_11_36)">
        <path
          d="M51.448 3.0305V13.5301H54.411V3.0305H51.448ZM28.1353 3.0127V13.5212H31.125V5.36177L33.4562 5.37067C34.2215 5.37067 34.7554 5.55752 35.1202 5.94904C35.5918 6.44732 35.7786 7.25704 35.7786 8.72521V13.5212H38.6794V7.71973C38.6794 3.57327 36.0367 3.0127 33.4562 3.0127H28.1353ZM56.2262 3.0305V13.5301H61.0311C63.5937 13.5301 64.4301 13.103 65.3288 12.1509C65.9695 11.4836 66.3788 10.0065 66.3788 8.39598C66.3788 6.91892 66.0318 5.60201 65.4178 4.7834C64.3323 3.31523 62.7484 3.0305 60.3815 3.0305H56.2262ZM59.1625 5.30838H60.4349C62.2857 5.30838 63.4781 6.13589 63.4781 8.2892C63.4781 10.4425 62.2857 11.2789 60.4349 11.2789H59.1625V5.30838ZM47.1769 3.0305L44.7033 11.3501L42.3364 3.0305H39.1332L42.5144 13.5301H46.7854L50.2023 3.0305H47.1769ZM67.7669 13.5301H70.7299V3.0305H67.7669V13.5301ZM76.0776 3.0305L71.94 13.5212H74.8586L75.517 11.6615H80.4109L81.0338 13.5123H84.2104L80.0372 3.0305H76.0776ZM77.9996 4.94356L79.797 9.85525H76.1488L77.9996 4.94356Z"
          fill="currentColor"
        />
        <path
          d="M9.01366 4.77448V3.333C9.15603 3.32411 9.29839 3.31521 9.44076 3.31521C13.3915 3.19064 15.9808 6.71424 15.9808 6.71424C15.9808 6.71424 13.1868 10.5938 10.1882 10.5938C9.78778 10.5938 9.39627 10.5315 9.02256 10.4069V6.02909C10.5619 6.21595 10.8733 6.8922 11.7898 8.43155L13.8453 6.70534C13.8453 6.70534 12.3415 4.73889 9.81448 4.73889C9.54754 4.72999 9.2806 4.74778 9.01366 4.77448ZM9.01366 0.00515747V2.15847L9.44076 2.13178C14.9308 1.94492 18.5167 6.63416 18.5167 6.63416C18.5167 6.63416 14.4058 11.6348 10.1259 11.6348C9.75219 11.6348 9.38737 11.5992 9.02256 11.5369V12.8716C9.32509 12.9072 9.63652 12.9339 9.93905 12.9339C13.9253 12.9339 16.8083 10.8963 19.6023 8.49384C20.065 8.86755 21.9602 9.76625 22.3517 10.1578C19.7001 12.3823 13.516 14.1707 10.0102 14.1707C9.67211 14.1707 9.35178 14.153 9.03145 14.1174V15.9948H24.1758V0.00515747H9.01366ZM9.01366 10.4069V11.5458C5.32989 10.8874 4.30662 7.05236 4.30662 7.05236C4.30662 7.05236 6.07732 5.0948 9.01366 4.77448V6.0202H9.00476C7.46541 5.83334 6.25528 7.27481 6.25528 7.27481C6.25528 7.27481 6.94043 9.70396 9.01366 10.4069ZM2.47364 6.8922C2.47364 6.8922 4.65365 3.67113 9.02256 3.333V2.15847C4.18205 2.54998 0 6.64305 0 6.64305C0 6.64305 2.36686 13.4945 9.01366 14.1174V12.8716C4.13756 12.2666 2.47364 6.8922 2.47364 6.8922Z"
          fill="currentColor"
        />
      </g>
    </g>
    <defs>
      <clipPath id="clip0_11_36">
        <rect width="85" height="16" fill="white" />
      </clipPath>
    </defs>
  </svg>
);

const ColumnLogo = ({ className }: { className?: string }) => (
  <svg
    viewBox="0 0 73 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className={className}
  >
    <g clipPath="url(#clip0_12_44)">
      <mask
        id="mask0_12_44"
        style={{ maskType: "luminance" }}
        maskUnits="userSpaceOnUse"
        x="0"
        y="0"
        width="73"
        height="16"
      >
        <path d="M72.8389 0H0V16H72.8389V0Z" fill="currentColor" />
      </mask>
      <g mask="url(#mask0_12_44)">
        <path
          d="M8.46958 12.0453C8.20458 12.4776 7.84015 12.8243 7.38648 13.0756C6.93235 13.3271 6.41831 13.4546 5.85858 13.4546C5.28463 13.4546 4.75307 13.3129 4.27855 13.0335C3.80349 12.7542 3.42826 12.3648 3.16322 11.876C2.8972 11.3862 2.7623 10.8245 2.7623 10.2065C2.7623 9.60343 2.90075 9.04553 3.17384 8.54824C3.44689 8.0514 3.82265 7.65431 4.29073 7.36789C4.75845 7.08182 5.29325 6.93674 5.88027 6.93674C6.38275 6.93674 6.85363 7.04991 7.27984 7.27321C7.7065 7.49714 8.07195 7.80943 8.36597 8.20128L8.42367 8.27809L10.4527 6.57565L10.3955 6.50604C9.85453 5.84821 9.18386 5.32577 8.40206 4.95312C7.61991 4.58029 6.76416 4.3913 5.85858 4.3913C4.79219 4.3913 3.7994 4.6507 2.90782 5.16229C2.01589 5.67416 1.30068 6.38559 0.782104 7.27695C0.263131 8.16857 0 9.15416 0 10.2065C0 11.2591 0.263176 12.2411 0.782238 13.1255C1.30072 14.0097 2.01589 14.7174 2.90782 15.229C3.7994 15.7406 4.79219 16 5.85858 16C6.83679 16 7.75544 15.7814 8.58901 15.3502C9.42147 14.9196 10.1179 14.3231 10.659 13.5773L10.7133 13.5026L8.52021 11.9627L8.46958 12.0453Z"
          fill="currentColor"
        />
        <path
          d="M20.3982 5.16212C19.4993 4.65061 18.4957 4.3913 17.4152 4.3913C16.3488 4.3913 15.356 4.6507 14.4645 5.16229C13.5725 5.67416 12.8573 6.38559 12.3387 7.27695C11.8198 8.16857 11.5566 9.15416 11.5566 10.2065C11.5566 11.2591 11.8198 12.2411 12.3389 13.1255C12.8574 14.0097 13.5725 14.7174 14.4645 15.229C15.356 15.7406 16.3488 16 17.4152 16C18.4957 16 19.4993 15.7407 20.3982 15.2292C21.297 14.7178 22.0159 14.01 22.5349 13.1255C23.054 12.2406 23.3171 11.2585 23.3171 10.2065C23.3171 9.15478 23.054 8.1691 22.5351 7.27695C22.0159 6.38532 21.297 5.6738 20.3982 5.16212ZM20.1436 11.8752C19.8712 12.3642 19.4921 12.7539 19.0169 13.0335C18.5421 13.3129 18.0032 13.4546 17.4152 13.4546C16.8413 13.4546 16.3097 13.3129 15.8352 13.0335C15.3601 12.7542 14.9849 12.3648 14.7199 11.876C14.4538 11.3862 14.3189 10.8245 14.3189 10.2065C14.3189 9.60343 14.4574 9.04553 14.7305 8.54824C15.0035 8.0514 15.3793 7.65431 15.8474 7.36789C16.3151 7.08182 16.8499 6.93674 17.4369 6.93674C18.0236 6.93674 18.5584 7.08182 19.0264 7.3678C19.4947 7.65457 19.8705 8.05176 20.1433 8.54824C20.4164 9.04553 20.5549 9.60343 20.5549 10.2065C20.5549 10.824 20.4165 11.3853 20.1436 11.8752Z"
          fill="currentColor"
        />
        <path
          d="M37.9218 10.4884C37.9218 11.1201 37.7979 11.6671 37.5535 12.1143C37.3099 12.5597 36.9862 12.8978 36.5914 13.1192C36.1953 13.3418 35.7543 13.4546 35.2808 13.4546C34.8075 13.4546 34.3925 13.353 34.0472 13.1524C33.7023 12.9527 33.4258 12.6619 33.2253 12.2883C33.0239 11.9135 32.9218 11.4684 32.9218 10.9654V4.65149H30.1812V11.5074C30.1812 12.3577 30.3673 13.131 30.7342 13.8059C31.1019 14.4829 31.6277 15.0237 32.297 15.413C32.966 15.8025 33.7437 16 34.6087 16C35.5172 16 36.3574 15.7694 37.1061 15.3146C37.4519 15.1044 37.7692 14.8491 38.0519 14.5538V15.7398H40.6624V4.65149H37.9218V10.4884Z"
          fill="currentColor"
        />
        <path
          d="M57.7883 4.94486C57.127 4.57754 56.3826 4.3913 55.576 4.3913C54.7397 4.3913 53.9657 4.5923 53.2756 4.98877C52.7464 5.2927 52.2965 5.689 51.9367 6.16788C51.6119 5.66242 51.1895 5.24835 50.6799 4.93597C50.0895 4.57452 49.4316 4.3913 48.7243 4.3913C47.9583 4.3913 47.2558 4.59692 46.6362 5.00246C46.2824 5.2343 45.9661 5.52134 45.6931 5.8579V4.6515H43.1909V15.7398H45.9532V9.25247C45.9532 8.82151 46.0482 8.4237 46.2353 8.06998C46.4219 7.71778 46.6808 7.43767 47.005 7.23756C47.3285 7.03799 47.6881 6.93674 48.0737 6.93674C48.4731 6.93674 48.8362 7.03782 49.1528 7.23712C49.4703 7.43749 49.7258 7.71769 49.9122 8.06998C50.0995 8.42361 50.1944 8.82142 50.1944 9.25247V15.7398H52.9349V9.25247C52.9349 8.82151 53.0333 8.42405 53.2274 8.07114C53.421 7.71822 53.6804 7.43758 53.9983 7.23712C54.3146 7.03782 54.6776 6.93674 55.0773 6.93674C55.477 6.93674 55.8438 7.03799 56.1677 7.23756C56.4914 7.43749 56.7465 7.71716 56.9259 8.06865C57.1063 8.42317 57.1978 8.82151 57.1978 9.25247V15.7398H59.9602V8.55864C59.9602 7.79396 59.7623 7.08493 59.372 6.45093C58.9821 5.81879 58.4494 5.31208 57.7883 4.94486Z"
          fill="currentColor"
        />
        <path
          d="M72.2858 6.60712C71.9178 5.93062 71.3884 5.38622 70.7123 4.98921C70.0363 4.59247 69.2621 4.3913 68.4112 4.3913C67.4877 4.3913 66.64 4.62563 65.8917 5.08789C65.5549 5.2959 65.245 5.54526 64.968 5.83097V4.6515H62.3359V15.7398H65.0982V9.90292C65.0982 9.28465 65.2186 8.74461 65.4561 8.29773C65.6925 7.85272 66.0162 7.51119 66.4182 7.28255C66.8213 7.05311 67.2657 6.93674 67.7391 6.93674C68.1975 6.93674 68.6088 7.0419 68.9614 7.24948C69.3136 7.4566 69.5939 7.75111 69.7946 8.12465C69.9961 8.50006 70.0982 8.93787 70.0982 9.42591V15.7398H72.8388V8.90551C72.8388 8.05629 72.6527 7.28299 72.2858 6.60712Z"
          fill="currentColor"
        />
        <path
          d="M23.7266 0V1.84061H24.1911C24.6972 1.84061 25.1075 2.25088 25.1075 2.75697V15.7398H27.8702V0H23.7266Z"
          fill="currentColor"
        />
      </g>
    </g>
    <defs>
      <clipPath id="clip0_12_44">
        <rect width="73" height="16" fill="white" />
      </clipPath>
    </defs>
  </svg>
);

const GithubLogo = ({ className }: { className?: string }) => (
  <svg
    className={className}
    width="60"
    height="16"
    viewBox="0 0 60 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g clipPath="url(#clip0_12_56)">
      <mask
        id="mask0_12_56"
        style={{ maskType: "luminance" }}
        maskUnits="userSpaceOnUse"
        x="0"
        y="0"
        width="60"
        height="16"
      >
        <path d="M59.1716 0H0V16H59.1716V0Z" fill="currentColor" />
      </mask>
      <g mask="url(#mask0_12_56)">
        <path
          d="M11.3991 6.84818H6.42744C6.36582 6.84822 6.30674 6.87271 6.26318 6.91627C6.21961 6.95984 6.19512 7.01892 6.19509 7.08053V9.5113C6.19512 9.57295 6.2196 9.63206 6.26316 9.67569C6.30671 9.71931 6.36579 9.74389 6.42744 9.74402H8.3669V12.7639C8.3669 12.7639 7.93141 12.9125 6.72742 12.9125C5.30697 12.9125 3.32267 12.3933 3.32267 8.03C3.32267 3.6658 5.3889 3.09147 7.32873 3.09147C9.00789 3.09147 9.73129 3.38726 10.1915 3.52955C10.3362 3.5739 10.47 3.43001 10.47 3.30151L11.0246 0.95304C11.0246 0.893044 11.0043 0.820605 10.9358 0.771451C10.7489 0.638153 9.60846 0 6.72742 0C3.40841 0 0.00390625 1.41219 0.00390625 8.20013C0.00390625 14.9886 3.90181 16 7.18644 16C9.9061 16 11.5559 14.8378 11.5559 14.8378C11.6239 14.8001 11.6313 14.7051 11.6313 14.6615V7.08041C11.6313 6.95229 11.5274 6.84818 11.3991 6.84818ZM37.0212 0.813337C37.0214 0.782828 37.0157 0.752569 37.0042 0.724297C36.9927 0.696026 36.9758 0.6703 36.9543 0.648595C36.9329 0.626891 36.9074 0.609637 36.8792 0.597824C36.8511 0.58601 36.8209 0.579871 36.7904 0.579759H33.9909C33.9604 0.579872 33.9301 0.586003 33.9019 0.597803C33.8737 0.609603 33.8481 0.626838 33.8266 0.648528C33.8051 0.670218 33.788 0.695937 33.7765 0.724215C33.7649 0.752492 33.759 0.782776 33.7591 0.813337L33.7598 6.22321H29.3964V0.813337C29.3966 0.782817 29.3908 0.752551 29.3793 0.724279C29.3678 0.696006 29.3508 0.670282 29.3294 0.64858C29.3079 0.626879 29.2824 0.609628 29.2542 0.597818C29.2261 0.586008 29.1959 0.579871 29.1654 0.579759H26.3661C26.3045 0.580084 26.2455 0.604871 26.2021 0.648672C26.1588 0.692474 26.1346 0.751703 26.1349 0.813337V15.4618C26.1349 15.5909 26.2387 15.696 26.3661 15.696H29.1654C29.2934 15.696 29.3964 15.5907 29.3964 15.4618V9.19604H33.7598L33.7522 15.4618C33.7522 15.5909 33.8561 15.696 33.9841 15.696H36.7902C36.9184 15.696 37.0209 15.5907 37.0212 15.4618V0.813337ZM16.6816 2.73568C16.6816 1.72757 15.8734 0.913002 14.8764 0.913002C13.8804 0.913002 13.0716 1.72757 13.0716 2.73568C13.0716 3.74255 13.8804 4.55922 14.8764 4.55922C15.8734 4.55922 16.6816 3.74255 16.6816 2.73568ZM16.4814 12.3718V5.61007C16.4816 5.54843 16.4573 5.48923 16.4139 5.44546C16.3704 5.4017 16.3114 5.37694 16.2498 5.37662H13.4593C13.3313 5.37662 13.2167 5.50868 13.2167 5.63718V15.3245C13.2167 15.6093 13.3941 15.6939 13.6238 15.6939H16.1379C16.4138 15.6939 16.4814 15.5583 16.4814 15.3201V12.3718ZM47.6598 5.39867H44.8819C44.7545 5.39867 44.6508 5.50363 44.6508 5.63286V12.8154C44.6508 12.8154 43.945 13.3318 42.9434 13.3318C41.9418 13.3318 41.6761 12.8774 41.6761 11.8966V5.63286C41.6761 5.50363 41.5725 5.39867 41.4451 5.39867H38.6257C38.4985 5.39867 38.3942 5.50363 38.3942 5.63286V12.3708C38.3942 15.2839 40.0178 15.9966 42.2514 15.9966C44.0837 15.9966 45.5609 14.9844 45.5609 14.9844C45.5609 14.9844 45.6313 15.5177 45.6631 15.581C45.695 15.6441 45.7779 15.7078 45.8675 15.7078L47.6612 15.6999C47.7883 15.6999 47.8927 15.5947 47.8927 15.4661L47.8917 5.63299C47.8917 5.50363 47.7878 5.39867 47.6598 5.39867ZM54.1565 13.323C53.193 13.2936 52.5395 12.8563 52.5395 12.8563V8.21763C52.5395 8.21763 53.1841 7.82241 53.9752 7.7517C54.9755 7.66214 55.9394 7.96434 55.9394 10.3505C55.9395 12.8669 55.5045 13.3635 54.1565 13.323ZM55.2522 5.06974C53.6745 5.06974 52.6013 5.77367 52.6013 5.77367V0.813459C52.6013 0.684104 52.498 0.579759 52.3703 0.579759H49.5631C49.5325 0.579904 49.5023 0.586065 49.4742 0.597889C49.446 0.609714 49.4205 0.626971 49.399 0.648674C49.3775 0.670377 49.3605 0.6961 49.3489 0.724374C49.3374 0.752649 49.3315 0.78292 49.3317 0.813459V15.4618C49.3317 15.5909 49.4354 15.696 49.5634 15.696H51.5113C51.5989 15.696 51.6653 15.6507 51.7143 15.5716C51.7627 15.4929 51.8326 14.8963 51.8326 14.8963C51.8326 14.8963 52.9805 15.9841 55.1535 15.9841C57.7047 15.9841 59.1677 14.6901 59.1677 10.175C59.1677 5.65972 56.8311 5.06974 55.2522 5.06974ZM24.5269 5.37539H22.4271L22.4239 2.60115C22.4239 2.49618 22.3698 2.4437 22.2484 2.4437H19.3868C19.2756 2.4437 19.2159 2.49274 19.2159 2.59955V5.46643C19.2159 5.46643 17.7819 5.81248 17.6849 5.84057C17.6365 5.85459 17.594 5.88393 17.5638 5.92419C17.5336 5.96445 17.5172 6.01345 17.5172 6.0638V7.86529C17.5172 7.99489 17.6207 8.09911 17.7487 8.09911H19.2159V12.4329C19.2159 15.652 21.4738 15.9682 22.9975 15.9682C23.6936 15.9682 24.5264 15.7447 24.6639 15.6937C24.7471 15.6632 24.7954 15.5771 24.7954 15.4837L24.7977 13.502C24.7977 13.3726 24.6886 13.2683 24.5656 13.2683C24.4433 13.2683 24.1302 13.318 23.808 13.318C22.7766 13.318 22.4271 12.8384 22.4271 12.2177L22.4269 8.09899H24.5269C24.6549 8.09899 24.7585 7.99464 24.7585 7.86516V5.60859C24.7587 5.57806 24.7528 5.5478 24.7412 5.51955C24.7297 5.49129 24.7126 5.46559 24.6911 5.44393C24.6696 5.42227 24.644 5.40506 24.6159 5.3933C24.5877 5.38154 24.5575 5.37545 24.5269 5.37539Z"
          fill="currentColor"
        />
      </g>
    </g>
    <defs>
      <clipPath id="clip0_12_56">
        <rect width="60" height="16" fill="white" />
      </clipPath>
    </defs>
  </svg>
);

const NikeLogo = ({ className }: { className?: string }) => (
  <svg
    className={className}
    viewBox="0 0 45 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g clipPath="url(#clip0_12_63)">
      <mask
        id="mask0_12_63"
        style={{ maskType: "luminance" }}
        maskUnits="userSpaceOnUse"
        x="0"
        y="0"
        width="45"
        height="16"
      >
        <path d="M44.4444 0H0V16H44.4444V0Z" fill="white" />
      </mask>
      <g mask="url(#mask0_12_63)">
        <path
          d="M5.69321 0.711516C2.80128 4.10777 0.0280227 8.31985 0.000226217 11.468C-0.0106178 12.6526 0.367757 13.6867 1.27509 14.4704C2.58028 15.5976 4.01767 15.996 5.44901 15.9978C7.54095 16.0006 9.61786 15.1566 11.2445 14.5065C13.9834 13.4109 44.2572 0.264234 44.2572 0.264234C44.5493 0.118114 44.4942 -0.0645871 44.1289 0.026695C43.9817 0.0638256 11.1708 8.95533 11.1708 8.95533C10.5375 9.13336 9.89081 9.22546 9.26104 9.22875C6.7398 9.24352 4.49604 7.84415 4.51416 4.89444C4.52109 3.74016 4.87524 2.34883 5.69321 0.711516Z"
          fill="currentColor"
        />
      </g>
    </g>
    <defs>
      <clipPath id="clip0_12_63">
        <rect width="45" height="16" fill="white" />
      </clipPath>
    </defs>
  </svg>
);

const LemonSquezyLogo = ({ className }: { className?: string }) => (
  <svg
    viewBox="0 0 122 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className={className}
  >
    <g clipPath="url(#clip0_12_70)">
      <mask
        id="mask0_12_70"
        style={{ maskType: "luminance" }}
        maskUnits="userSpaceOnUse"
        x="0"
        y="0"
        width="122"
        height="16"
      >
        <path d="M121.143 0H0V16H121.143V0Z" fill="white" />
      </mask>
      <g mask="url(#mask0_12_70)">
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M24.3337 7.91658H27.9357C27.6958 7.00149 27.0387 6.63046 26.2383 6.63046C25.3583 6.63046 24.6531 7.11012 24.3337 7.91658ZM30.049 9.48155H24.2059C24.4458 10.6602 25.4379 11.0945 26.3022 11.0945C27.3908 11.0945 27.8562 10.4432 27.8562 10.4432H29.8729C29.2642 11.993 27.8079 12.845 26.2384 12.845C24.0769 12.845 22.188 11.2485 22.188 8.83149C22.188 6.42858 24.0612 4.94058 26.1744 4.94058C28.2238 4.94058 30.3058 6.31989 30.049 9.48155Z"
          fill="currentColor"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M49.8991 8.89326C49.8991 7.68418 49.1625 6.73898 47.9461 6.73898C46.7287 6.73898 45.9125 7.68418 45.9125 8.89326C45.9125 10.1023 46.7287 11.0476 47.9461 11.0476C49.1625 11.0476 49.8991 10.1023 49.8991 8.89326ZM43.8149 8.90835C43.8149 6.42858 45.8004 4.94058 47.9461 4.94058C50.1076 4.94058 51.9965 6.44366 51.9965 8.87686C51.9965 11.3417 50.0424 12.8448 47.8811 12.8448C45.7039 12.8448 43.8149 11.3417 43.8149 8.90835Z"
          fill="currentColor"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M60.5665 8.56783V12.7679H58.4362V9.03223C58.4362 8.76852 58.6293 6.81595 57.092 6.73915C56.3386 6.69241 54.9944 7.09486 54.9944 9.12566V12.7679H52.8813V5.01758H54.8211L54.8275 6.09349C54.8275 6.09349 55.7021 4.94058 57.3333 4.94058C59.3985 4.94058 60.5665 6.42858 60.5665 8.56783Z"
          fill="currentColor"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M68.3526 6.58378C67.6801 6.58378 67.3921 6.90938 67.3921 7.23503C67.3921 7.76138 68.1126 7.91658 68.5926 8.01001C70.0189 8.30395 71.4595 8.72303 71.4595 10.3649C71.4595 11.9615 70.0983 12.845 68.4492 12.845C66.6086 12.845 65.1835 11.7608 65.0869 10.1176H67.0555C67.1041 10.582 67.4246 11.1865 68.4012 11.1865C69.2172 11.1865 69.4103 10.7689 69.4103 10.4432C69.4103 9.86898 68.8492 9.69852 68.3046 9.57481C67.3606 9.37292 65.3269 9.00195 65.3269 7.23503C65.3269 5.71555 66.8326 4.94058 68.3852 4.94058C70.1778 4.94058 71.3629 5.99446 71.4595 7.29681H69.4892C69.4258 7.03309 69.1703 6.58378 68.3526 6.58378Z"
          fill="currentColor"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M77.9322 8.89326C77.9322 7.60601 77.2111 6.84743 76.1711 6.84743C75.1945 6.84743 74.2168 7.52898 74.2168 8.89326C74.2168 10.2564 75.1945 10.9391 76.1711 10.9391C77.2111 10.9391 77.9322 10.1794 77.9322 8.89326ZM79.9334 5.01758V15.8675H77.9322V12.0081C77.4202 12.5659 76.6991 12.8448 75.8659 12.8448C73.8339 12.8448 72.1362 11.2333 72.1362 8.89326C72.1362 6.55212 73.8339 4.94058 75.8659 4.94058C77.4637 4.94058 78.0619 5.97858 78.0619 5.97858L78.0585 5.01758H79.9334Z"
          fill="currentColor"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M91.3737 7.91658H94.976C94.736 7.00149 94.0789 6.63046 93.2789 6.63046C92.3989 6.63046 91.6932 7.11012 91.3737 7.91658ZM97.0892 9.48155H91.2452C91.4863 10.6602 92.4783 11.0945 93.3423 11.0945C94.4309 11.0945 94.8966 10.4432 94.8966 10.4432H96.9132C96.3046 11.993 94.848 12.845 93.2789 12.845C91.1172 12.845 89.228 11.2485 89.228 8.83149C89.228 6.42858 91.1017 4.94058 93.2149 4.94058C95.264 4.94058 97.3463 6.31989 97.0892 9.48155Z"
          fill="currentColor"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M99.8801 7.91658H103.482C103.242 7.00149 102.585 6.63046 101.785 6.63046C100.905 6.63046 100.2 7.11012 99.8801 7.91658ZM105.596 9.48155H99.7527C99.9921 10.6602 100.984 11.0945 101.849 11.0945C102.937 11.0945 103.402 10.4432 103.402 10.4432H105.42C104.81 11.993 103.354 12.845 101.785 12.845C99.6235 12.845 97.7344 11.2485 97.7344 8.83149C97.7344 6.42858 99.6075 4.94058 101.721 4.94058C103.77 4.94058 105.852 6.31989 105.596 9.48155Z"
          fill="currentColor"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M112.724 11.0325V12.7678H105.92V11.7444L109.779 6.75417H106.08V5.01758H112.564V6.04097L108.706 11.0325H112.724Z"
          fill="currentColor"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M121.053 5.01758V11.8378V11.993C121.053 14.0855 119.948 15.9459 117.211 15.9459C114.649 15.9459 113.256 14.3177 113.256 13.0936H115.257C115.257 13.0936 115.561 14.1322 117.147 14.1322C118.492 14.1322 119.052 13.3875 119.052 12.3034V11.9778C118.699 12.3653 118.028 12.845 116.827 12.845C114.729 12.845 113.417 11.3734 113.417 9.21892L113.4 5.01758H115.481V8.75332C115.481 9.80703 115.867 11.0478 117.195 11.0478C117.883 11.0478 119.02 10.7221 119.02 8.65989V5.01758H121.053Z"
          fill="currentColor"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M20.6641 10.4413C20.6641 10.9246 20.8545 11.124 21.2078 11.124C21.4567 11.124 21.6184 11.0951 21.8543 11.0243L21.9861 12.6171C21.5453 12.7584 21.1192 12.8442 20.5755 12.8442C19.3279 12.8442 18.564 12.4467 18.564 10.7253V1.91797H20.6641V10.4413Z"
          fill="currentColor"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M42.9113 8.56783V12.7679H40.7811V9.03223C40.7811 7.96326 40.8934 6.61423 39.4201 6.73915C39.0369 6.76943 37.9796 6.93966 37.9796 9.12566V12.7679H35.8664V9.03223C35.8664 7.96326 35.9785 6.61423 34.5054 6.73915C34.1208 6.76943 33.0649 6.93966 33.0649 9.12566V12.7679H30.9517V5.01758H32.8917L32.8934 6.09349C32.8934 6.09349 33.6348 4.94057 35.0177 4.94057C36.684 4.94057 37.3381 6.19566 37.3381 6.19566C37.3381 6.19566 38.0555 4.92551 39.8855 4.92551C41.9662 4.92551 42.9113 6.41349 42.9113 8.56783Z"
          fill="currentColor"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M80.8315 9.21772V5.01758H82.9618V8.75332C82.9618 9.01697 82.7687 10.9695 84.3058 11.0464C85.0595 11.0931 86.4035 10.6906 86.4035 8.65989V5.01758H88.5167V12.7679H86.5795L86.5704 11.6921C86.5704 11.6921 85.6955 12.845 84.0647 12.845C81.9995 12.845 80.8315 11.357 80.8315 9.21772Z"
          fill="currentColor"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M3.95953 9.82034L8.25169 11.8047C8.78369 12.0508 9.15918 12.4638 9.36198 12.9375C9.87489 14.1371 9.17387 15.3639 8.07341 15.8052C6.97272 16.2462 5.79969 15.9624 5.26631 14.7149L3.39836 10.3352C3.25361 9.99571 3.61724 9.66211 3.95953 9.82034Z"
          fill="currentColor"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M4.2166 8.53576L8.64726 6.8609C10.1198 6.30427 11.7283 7.35747 11.7066 8.88776C11.7062 8.90776 11.7059 8.9277 11.7054 8.94787C11.6735 10.4381 10.1098 11.4397 8.6696 10.9125L4.2208 9.28416C3.86592 9.15433 3.8633 8.6693 4.2166 8.53576Z"
          fill="currentColor"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M3.96857 7.95566L8.32406 6.10497C9.77137 5.48992 10.1387 3.64397 9.00514 2.57739C8.99029 2.56334 8.97543 2.54946 8.9604 2.53559C7.84903 1.50404 6.01189 1.86724 5.37919 3.22594L3.4247 7.42371C3.26876 7.75846 3.6212 8.1032 3.96857 7.95566Z"
          fill="currentColor"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M2.84771 7.22434L4.43123 2.88237C4.62755 2.344 4.59119 1.79497 4.38822 1.32126C3.87425 0.12216 2.48234 -0.264902 1.38202 0.176995C0.281877 0.619063 -0.339783 1.62302 0.194641 2.87002L2.07483 7.24497C2.22063 7.584 2.72149 7.57063 2.84771 7.22434Z"
          fill="currentColor"
        />
      </g>
    </g>
    <defs>
      <clipPath id="clip0_12_70">
        <rect width="122" height="16" fill="white" />
      </clipPath>
    </defs>
  </svg>
);

const testimonials = [
  {
    id: "1",
    name: "Sarah Chen",
    role: "Enineer Coulmn",
    image: "https://assets.solaceui.com/solaceui-member-five.png",
    quote:
      "Perfect balance between flexibility and structure. Our design system went from scattered mess to cohesive asset. ROI was evident in Q1.",
    logo: (
      <ColumnLogo className="scale-80 text-white dark:text-neutral-600 opacity-60" />
    ),
  },
  {
    id: "2",
    name: "Olivia Koe",
    role: "CTO Github",
    image: "https://assets.solaceui.com/solaceui-member-six.png", // Using similar image/name for demo as per reference or variance
    quote:
      "SolaceUI transformed our design workflow. What used to take weeks now takes days, and our product consistency has never been better.",
    logo: (
      <GithubLogo className="scale-80 text-white/ dark:text-neutral-600 opacity-60" />
    ),
  },
  {
    id: "3",
    name: "Amara Okonkwo",
    role: "CTO LemonSquezy",
    image: "https://assets.solaceui.com/solaceui-member-three.png",
    quote:
      "We migrated our entire product in under three months. The performance improvements alone justified the switch. Highly recommend.",
    logo: (
      <LemonSquezyLogo className="scale-120 text-white dark:text-neutral-600 opacity-60" />
    ),
  },
  {
    id: "4",
    name: "David Kim",
    role: "Founder Nike",
    image: "https://assets.solaceui.com/solaceui-member-two.png",
    quote: "Our development velocity has doubled since adopting SolaceUI.",
    logo: (
      <NikeLogo className="scale-80 text-white dark:text-neutral-600 opacity-60" />
    ),
  },
  {
    id: "5",
    name: "James Mitchell",
    role: "Design, Nvidia",
    image: "https://assets.solaceui.com/solaceui-member-four.png",
    quote:
      "Accessibility and performance out of the box. Truly impressive work.",
    logo: (
      <NvidiaLogo className="scale-80 text-white dark:text-neutral-600 opacity-60" />
    ),
  },
];

export default function Testimonial4() {
  const [currentIndex, setCurrentIndex] = useState(1);

  const handleNext = useCallback(() => {
    setCurrentIndex((prev) => (prev + 1) % testimonials.length);
  }, []);

  const handlePrev = useCallback(() => {
    setCurrentIndex(
      (prev) => (prev - 1 + testimonials.length) % testimonials.length,
    );
  }, []);

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "ArrowLeft") handlePrev();
      if (e.key === "ArrowRight") handleNext();
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [handleNext, handlePrev]);

  const visibleItems = useMemo(() => {
    const total = testimonials.length;
    const leftIndex = (currentIndex - 1 + total) % total;
    const centerIndex = currentIndex;
    const rightIndex = (currentIndex + 1) % total;

    return [
      { item: testimonials[leftIndex], position: "left" },
      { item: testimonials[centerIndex], position: "center" },
      { item: testimonials[rightIndex], position: "right" },
    ];
  }, [currentIndex]);

  return (
    <section className="w-full py-20 bg-white dark:bg-background text-black dark:text-white overflow-hidden">
      <div className="max-w-7xl mx-auto px-4 relative">
        {/* Header & Actions */}
        <div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-8">
          <div className="space-y-4 w-full text-center">
            <h2 className="text-4xl md:text-4xl font-bold tracking-tight">
              Trusted By The <br /> Best People
            </h2>
          </div>
        </div>

        {/* Main Carousel Area */}
        <div className="relative w-full mt-16">
          {/* Navigation Buttons (Desktop) */}
          <div className="absolute -top-12 right-0 z-40 hidden md:flex items-center gap-2">
            <button
              onClick={handlePrev}
              className="bg-black dark:bg-neutral-800 text-white p-1 hover:opacity-80 transition-opacity cursor-pointer"
              aria-label="Previous"
            >
              <ArrowLeft size={16} />
            </button>
            <button
              onClick={handleNext}
              className="bg-black dark:bg-neutral-800 text-white p-1 hover:opacity-80 transition-opacity cursor-pointer"
              aria-label="Next"
            >
              <ArrowRight size={16} />
            </button>
          </div>

          {/* Shaded Strip Background */}
          <div className="absolute -inset-y-9 md:-inset-y-12 w-full z-0 pointer-events-none">
            {/* Pattern */}
            <div className="absolute inset-0 bg-[repeating-linear-gradient(315deg,currentColor_0,currentColor_1px,transparent_0,transparent_50%)] bg-[length:10px_10px] text-neutral-200 dark:text-neutral-800 opacity-70" />
          </div>

          {/* Fades */}
          <div className="absolute left-0 -inset-y-12 w-40 bg-linear-to-r from-white via-white/50 to-transparent dark:from-background dark:via-background/50 dark:to-transparent z-30 pointer-events-none hidden md:block" />
          <div className="absolute right-0 -inset-y-12 w-40 bg-linear-to-l from-white via-white/50 to-transparent dark:from-background dark:via-background/50 dark:to-transparent z-30 pointer-events-none hidden md:block" />

          {/* Cards Container */}
          <div className="relative z-10 flex flex-col md:flex-row items-center md:items-stretch justify-center gap-6 md:gap-4 lg:gap-4 min-h-0 md:min-h-[500px]">
            <AnimatePresence mode="popLayout">
              {visibleItems.map(({ item, position }) => {
                const isCenter = position === "center";

                return (
                  <motion.div
                    key={item.id}
                    layout
                    initial={{ opacity: 0, scale: 0.9 }}
                    animate={{
                      opacity: 1,
                      scale: 1,
                    }}
                    exit={{ opacity: 0, scale: 0.9 }}
                    transition={{ duration: 0.5, type: "spring" }}
                    style={{ willChange: "transform, opacity" }}
                    className={cn(
                      "flex flex-col w-full md:flex-1 lg:flex-none lg:w-[320px] xl:w-[350px] relative bg-white dark:bg-black border border-neutral-200 dark:border-neutral-800",
                      !isCenter && "hidden md:flex",
                      isCenter
                        ? "z-20 dark:shadow-[1px_1px_50px_18px_rgba(255,255,255,0.39)] ring-1 ring-neutral-900/5"
                        : "z-10 opacity-100 md:opacity-70 md:grayscale",
                    )}
                  >
                    {/* Image Region (Top Half) */}
                    <div
                      className={cn(
                        "relative w-full aspect-[4/3] overflow-hidden bg-neutral-100 dark:bg-neutral-900",
                        !isCenter ? "md:grayscale" : "",
                      )}
                    >
                      <Image
                        src={item.image}
                        alt={item.name}
                        fill
                        sizes="(max-width: 768px) 100vw, 350px"
                        className="object-cover object-top p-1 bg-neutral-900 dark:bg-white"
                        priority={isCenter}
                        unoptimized
                      />
                    </div>

                    {/* Content Region (Bottom Half) */}
                    <div className="p-6 md:p-8 flex flex-col justify-between flex-1 bg-black text-white dark:bg-white dark:text-black">
                      <p className="text-base md:text-lg font-normal leading-relaxed mb-6 opacity-90">
                        {item.quote}
                      </p>

                      <div className="flex items-end justify-between mt-auto">
                        <div className="flex flex-col">
                          <span className="font-bold text-lg text-white dark:text-black">
                            {item.name},
                          </span>
                          <span className="text-sm text-neutral-400 dark:text-neutral-600">
                            {item.role}
                          </span>
                        </div>
                        <div className="w-1/4  md:hidden flex lg:flex items-center justify-center mb-2">
                          {item.logo}
                        </div>
                      </div>
                    </div>
                  </motion.div>
                );
              })}
            </AnimatePresence>
          </div>
        </div>

        {/* Mobile Navigation (Visible only on mobile) */}
        <div className="flex md:hidden justify-center items-start gap-4 mt-10 z-10">
          <button
            onClick={handlePrev}
            className="bg-black dark:bg-neutral-800 text-white p-1 rounded-none hover:opacity-80 transition-opacity"
            aria-label="Previous"
          >
            <ArrowLeft size={20} />
          </button>
          <button
            onClick={handleNext}
            className="bg-black dark:bg-neutral-800 text-white p-1 rounded-none hover:opacity-80 transition-opacity"
            aria-label="Next"
          >
            <ArrowRight size={20} />
          </button>
        </div>
      </div>
    </section>
  );
}