https://www.cfaomobility.co.za/_next/static/chunks/3816-845b9d99dab7135f.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3816],{7379:(e,t,r)=>{r.d(t,{d:()=>n,default:()=>o});var l=r(95155),a=r(12115);let s=(0,a.createContext)(null),n=()=>{let e=(0,a.useContext)(s);if(!e)throw Error("useSectionTabs must be used inside SectionTabsProvider");return e},o=({tabs:e,scrollOffset:t=150,children:r})=>{let[n,o]=(0,a.useState)(e[0]?.value??""),i=(0,a.useRef)(new Map),c=(0,a.useRef)(new Map),u=(0,a.useRef)(null),d=(0,a.useRef)(!1),f=(0,a.useRef)(null),x=(0,a.useRef)(null),h=(0,a.useRef)(!1),p=(0,a.useCallback)(()=>{d.current=!1,f.current&&(clearTimeout(f.current),f.current=null),x.current&&(window.removeEventListener("wheel",x.current),window.removeEventListener("touchmove",x.current),x.current=null)},[]),m=(0,a.useCallback)((e,t)=>{if(t)i.current.set(e,t),u.current?.observe(t);else{let t=i.current.get(e);t&&u.current?.unobserve(t),i.current.delete(e)}},[]),g=(0,a.useCallback)((e,t)=>{t?c.current.set(e,t):c.current.delete(e)},[]),b=(0,a.useCallback)(e=>{let r=c.current.get(e);if(!r)return;h.current=!0,p(),d.current=!0;let l=()=>p();x.current=l,window.addEventListener("wheel",l,{passive:!0}),window.addEventListener("touchmove",l,{passive:!0}),f.current=setTimeout(p,800);let a=r.getBoundingClientRect().top+window.scrollY-t+2;window.scrollTo({top:a,behavior:"smooth"}),history.replaceState(null,"",`#${e}`),o(e)},[t,p]);return(0,a.useEffect)(()=>{let t=window.location.hash.replace("#","");if(!t||!e.some(e=>e.value===t))return;o(t),d.current=!0;let r=()=>{let e=c.current.get(t);e&&e.scrollIntoView({behavior:"instant",block:"start"}),f.current=setTimeout(()=>{d.current=!1},300)};if("complete"!==document.readyState)return window.addEventListener("load",r,{once:!0}),()=>window.removeEventListener("load",r);{let e=requestAnimationFrame(r);return()=>cancelAnimationFrame(e)}},[]),(0,a.useEffect)(()=>{let r=e.map(e=>e.value),l=new Set,a=()=>{let e=Math.max(0,window.innerHeight-t-1),a=new IntersectionObserver(e=>{let t;if((e.forEach(e=>{let t=e.target.getAttribute("data-section-id")??e.target.id;e.isIntersecting?l.add(t):l.delete(t)}),!d.current)&&0!==l.size){for(let e of r)l.has(e)&&(t=e);t&&(o(t),(h.current||window.scrollY>0)&&history.replaceState(null,"",`#${t}`))}},{threshold:0,rootMargin:`-${t}px 0px -${e}px 0px`});return i.current.forEach(e=>a.observe(e)),a};u.current=a();let s=()=>{u.current?.disconnect(),u.current=a()};return window.addEventListener("resize",s),()=>{u.current?.disconnect(),u.current=null,window.removeEventListener("resize",s),p()}},[e,t,p]),(0,l.jsx)(s.Provider,{value:{tabs:e,activeTab:n,scrollOffset:t,scrollToSection:b,registerSection:m,registerScrollTarget:g},children:r})}},29987:(e,t,r)=>{r.d(t,{FN:()=>c,Wk:()=>u,A7:()=>d,Oj:()=>m,Q8:()=>h});var l=r(95155),a=r(12115),s=r(43459),n=r(40980);let o=a.createContext(null);function i(){let e=a.useContext(o);if(!e)throw Error("useCarousel must be used within a <Carousel />");return e}let c=a.forwardRef(({orientation:e="horizontal",opts:t,setApi:r,plugins:i,className:c,children:u,...d},f)=>{let[x,h]=(0,s.A)({...t,axis:"horizontal"===e?"x":"y"},i),[p,m]=a.useState(!1),[g,b]=a.useState(!1),v=a.useCallback(e=>{e&&(m(e.canScrollPrev()),b(e.canScrollNext()))},[]),w=a.useCallback(()=>{h?.scrollPrev()},[h]),y=a.useCallback(()=>{h?.scrollNext()},[h]),j=a.useCallback(e=>{"ArrowLeft"===e.key?(e.preventDefault(),w()):"ArrowRight"===e.key&&(e.preventDefault(),y())},[w,y]);return a.useEffect(()=>{h&&r&&r(h)},[h,r]),a.useEffect(()=>{if(h)return v(h),h.on("reInit",v),h.on("select",v),()=>{h?.off("select",v)}},[h,v]),(0,l.jsx)(o.Provider,{value:{carouselRef:x,api:h,opts:t,orientation:e||(t?.axis==="y"?"vertical":"horizontal"),scrollPrev:w,scrollNext:y,canScrollPrev:p,canScrollNext:g},children:(0,l.jsx)("div",{ref:f,onKeyDownCapture:j,className:(0,n.cn)("relative",c),role:"region","aria-roledescription":"carousel",...d,children:u})})});c.displayName="Carousel";let u=a.forwardRef(({className:e,allowShadowOverflow:t=!1,...r},a)=>{let{carouselRef:s,orientation:o}=i();return(0,l.jsx)("div",{ref:s,className:(0,n.cn)("overflow-hidden w-full",t&&"py-3 -my-3 px-[2px]"),children:(0,l.jsx)("div",{ref:a,className:(0,n.cn)("flex w-full","horizontal"===o?"m-0":"m-0 flex-col",e),...r})})});

1u.displayName="CarouselContent";let d=a.forwardRef(({className:e,...t},r)=>{let{orientation:a}=i();return(0,l.jsx)("div",{ref:r,role:"group","aria-roledescription":"slide",className:(0,n.cn)("min-w-0 shrink-0 grow-0 basis-full flex items-center justify-center","p-0",e),...t})});d.displayName="CarouselItem";var f=r(80723),x=r(89239);let h=a.forwardRef(({className:e,variant:t="outline",size:r="icon",...a},s)=>{let{orientation:o,scrollPrev:c,canScrollPrev:u}=i();return(0,l.jsxs)(x.$,{ref:s,variant:t,size:r,className:(0,n.cn)("absolute h-10 w-10 rounded-full bg-white/80 hover:bg-white/70 border border-gray-200/50 shadow-md","horizontal"===o?"-left-12 top-1/2 -translate-y-1/2":"-top-12 left-1/2 -translate-x-1/2 rotate-90",e),disabled:!u,onClick:c,...a,children:[(0,l.jsx)(f.A,{className:"h-6 w-6 text-black"}),(0,l.jsx)("span",{className:"sr-only",children:"Previous slide"})]})});h.displayName="CarouselPrevious";var p=r(21628);let m=a.forwardRef(({className:e,variant:t="outline",size:r="icon",...a},s)=>{let{orientation:o,scrollNext:c,canScrollNext:u}=i();return(0,l.jsxs)(x.$,{ref:s,variant:t,size:r,className:(0,n.cn)("absolute h-10 w-10 rounded-full bg-white/50 hover:bg-white/70 border border-gray-200/50 shadow-md","horizontal"===o?"-right-12 top-1/2 -translate-y-1/2":"-bottom-12 left-1/2 -translate-x-1/2 rotate-90",e),disabled:!u,onClick:c,...a,children:[(0,l.jsx)(p.A,{className:"h-6 w-6 text-black"}),(0,l.jsx)("span",{className:"sr-only",children:"Next slide"})]})});m.displayName="CarouselNext"},30579:(e,t,r)=>{r.d(t,{default:()=>c});var l=r(95155),a=r(12115),s=r(82482),n=r(51914),o=r(40980);let i=({item:e,isOpen:t,onToggle:r,activeElementColor:i})=>{let c=(0,a.useRef)(null);return(0,l.jsxs)("div",{className:"flex flex-col gap-0",children:[(0,l.jsxs)("button",{onClick:r,className:(0,o.cn)("w-full flex items-center justify-between gap-[35px] px-5 py-[10px] min-h-[65px] rounded-[5px] text-left transition-colors duration-200",t?"text-white":"bg-white text-[#363c5a]"),style:t?{backgroundColor:i}:void 0,"aria-expanded":t,children:[(0,l.jsx)("span",{className:"font-gotham font-bold text-[16px] lg:text-xl leading-[24px] lg:leading-[27px] flex-1",children:e.question}),(0,l.jsx)("span",{className:(0,o.cn)("flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-full transition-colors duration-200",t?"bg-white":void 0),style:t?{color:i}:{backgroundColor:i},children:t?(0,l.jsx)(s.A,{className:"w-5 h-5",style:{color:i}}):(0,l.jsx)(n.A,{className:"w-5 h-5 text-white"})})]}),(0,l.jsx)("div",{className:"overflow-hidden transition-[height,opacity] duration-300 ease-in-out",style:{height:t?c.current?.scrollHeight??0:0,opacity:+!!t},children:(0,l.jsx)("div",{ref:c,className:"px-5 py-4 bg-white rounded-b-[5px]",children:(0,l.jsx)("p",{className:"font-gotham font-normal text-base leading-6 text-black",children:e.answer})})})]})},c=({headerTag:e="h2",headerContent:t,subheader:r,items:s,backgroundColor:n="#9fc3dd",activeElementColor:o="#363c5a",headerTextColor:c="#363C5A"})=>{let[u,d]=(0,a.useState)(null);return s&&0!==s.length?(0,l.jsx)("section",{className:"w-full py-[24px] lg:py-[100px]",style:{backgroundColor:n},children:(0,l.jsxs)("div",{className:"max-w-[1296px] mx-auto px-[16px] lg:px-8 flex flex-col gap-10",children:[(0,l.jsxs)("div",{className:"flex flex-col gap-[12px] lg:gap-6",children:[(0,l.jsx)(e,{className:"font-gotham font-bold text-[32px] leading-[39px]",style:{color:c},children:t}),(0,l.jsx)("p",{className:"font-gotham font-normal text-[16px] lg:text-lg leading-[24px] lg:leading-[27px] text-black max-w-[1200px]",children:r})]}),(0,l.jsx)("div",{className:"flex flex-col gap-5",children:s.map((e,t)=>(0,l.jsx)(i,{item:e,isOpen:u===t,onToggle:()=>{d(e=>e===t?null:t)},activeElementColor:o},t))})]})}):null}},33988:(e,t,r)=>{r.d(t,{default:()=>h});var l=r(95155),a=r(12115),s=r(98500),n=r.n(s),o=r(89239),i=r(20212),c=r(14693),u=r(29987),d=r(58282),f=r(40980),x=r(54174);function h({title:e="News & Insights",headingTag:t,description:r="Stay up to date with the latest automotive news, expert reviews, and buying guides from our team.",viewMoreHref:s="/blog",viewM

1oreLabel:p="View more Articles",viewMoreColor:m,posts:g,className:b,backgroundColor:v,accentColor:w,titleColor:y,descriptionColor:j,dotColor:N,cardButtonColor:C,category:k,tags:E,excludeId:A,chain:R,chainValues:S}){let L=(0,x._$)(t),{data:M}=(0,i.kd)(),z=(0,a.useMemo)(()=>(0,c.Wf)(s),[s]),$=z?.chain??[],T=(0,a.useMemo)(()=>z?(0,c.yt)(z.chainValues,M)??{}:{},[z,M]),_=(0,i.sv)({page:1,pageSize:10,chain:$,chainValues:T,tags:E,excludeId:A}),P=g??(_.data?.data||[]),[I,B]=(0,a.useState)(),[F,O]=(0,a.useState)(0),V=(0,a.useMemo)(()=>I?.scrollSnapList().length??0,[I]),W=(0,a.useCallback)(()=>{I&&O(I.selectedScrollSnap())},[I]);if((0,a.useEffect)(()=>{if(I)return I.on("select",W),I.on("reInit",W),()=>{I.off("select",W)}},[I,W]),0===P.length)return null;let D=j??y,X=m??y;return(0,l.jsx)("section",{className:(0,f.cn)("pt-[24px] pb-[50px] lg:py-[50px]",!v&&(b??"bg-graycfao-55")),style:v?{backgroundColor:v}:void 0,children:(0,l.jsxs)("div",{className:"max-w-7xl mx-auto px-[16px] lg:px-8 flex flex-col gap-10",children:[(0,l.jsxs)("div",{className:"flex flex-col gap-[15px] lg:gap-6",children:[(0,l.jsxs)("div",{className:"flex items-center justify-between",children:[(0,l.jsx)(L,{className:"text-[28px] lg:text-[32px] font-bold leading-normal lg:leading-[39px] text-graycfao-700",style:y?{color:y}:void 0,children:e}),s&&(0,l.jsx)(o.$,{asChild:!0,variant:"outline",className:(0,f.cn)("hidden lg:flex border-2 border-graycfao-700 text-graycfao-700 bg-transparent",X?"hover:bg-white/10":"hover:bg-cfao-50"),style:X?{borderColor:X,color:X}:void 0,children:(0,l.jsx)(n(),{href:s,children:p})})]}),r&&(0,l.jsx)("p",{className:"text-base leading-6 text-graycfao-900",style:D?{color:D}:void 0,children:r})]}),(0,l.jsx)(u.FN,{setApi:B,opts:{align:"start",loop:!1},className:"w-full",children:(0,l.jsx)(u.Wk,{allowShadowOverflow:!0,className:"gap-[25px] lg:gap-4",children:P.map(e=>(0,l.jsx)(u.A7,{className:"basis-[70%] sm:basis-[calc(50%-8px)] lg:basis-[calc(25%-12px)]",children:(0,l.jsx)(d.A,{post:e,accentColor:w,buttonColor:C})},e.id))})}),s&&(0,l.jsx)("div",{className:"lg:hidden flex justify-center",children:(0,l.jsx)(o.$,{asChild:!0,variant:"outline",className:(0,f.cn)("h-[40px] border-2 border-graycfao-700 text-graycfao-700 bg-transparent",X?"hover:bg-white/10":"hover:bg-cfao-50"),style:X?{borderColor:X,color:X}:void 0,children:(0,l.jsx)(n(),{href:s,children:p})})}),V>1&&(0,l.jsx)("div",{className:"hidden lg:flex justify-center gap-2 mt-6",children:Array.from({length:V}).map((e,t)=>(0,l.jsx)("button",{onClick:()=>I?.scrollTo(t),className:"flex items-center justify-center p-[7px]","aria-label":`Go to slide ${t+1}`,children:(0,l.jsx)("span",{className:`w-3 h-3 rounded-full transition-colors ${t===F?"bg-graycfao-900":"border-2 border-graycfao-300 bg-transparent"}`,style:N?t===F?{backgroundColor:N,borderColor:N}:{borderColor:N,backgroundColor:"transparent"}:void 0})},t))})]})})}},51914:(e,t,r)=>{r.d(t,{A:()=>l});let l=(0,r(78340).A)("Plus",[["path",{d:"M5 12h14",key:"1ays0h"}],["path",{d:"M12 5v14",key:"s699le"}]])},73973:(e,t,r)=>{r.d(t,{A:()=>c});var l=r(95155),a=r(12115),s=r(41641),n=r(21362),o=r(40980);function i(e){return"string"==typeof e?{label:e,value:e}:e}function c({tabs:e,activeTab:t,onChange:r,activeColor:u="#e4243b",hint:d,stretch:f=!1,itemBorder:x=!1,itemBorderColor:h,inactiveOpacity:p=!1,wrapItems:m=!1,maxVisible:g}){let b,v,w=(0,a.useRef)(null),y=(0,a.useRef)(new Map),[j,N]=(0,a.useState)(!1),[C,k]=(0,a.useState)(!1),E="number"==typeof g&&e.length>g,A=m||"number"==typeof g,R=E?(b=e.slice(0,g),(v=e.find(e=>i(e).value===t))&&!b.includes(v)?[...b,v]:b):e,S=E&&!C?R:e,L=(0,a.useRef)(null),M=(0,a.useRef)(!1),z=()=>{let e=w.current;e&&N(e.scrollWidth>e.clientWidth+1)};(0,a.useEffect)(()=>{let e=w.current;if(!e)return;z();let t=new ResizeObserver(z);return t.observe(e),e.addEventListener("scroll",z),()=>{t.disconnect(),e.removeEventListener("scroll",z)}},[e,f]);let $=e=>{w.current?.scrollBy({left:"left"===e?-200:200,behavior:"smooth"})},T=(0,a.useCallback)(e=>{let t=w.current;t&&(L.current={startX:e.pageX-t.offsetLeft,scrollLeft:t.scrollLeft},M.current=!1)},[]),_=(0,a.useCallback)(e=>{if(!L.current)return;let t=w.current;if(!t)return;let r=e.pageX-t.offsetLeft-L.current.startX;Math.abs(r)>4&&(M.current=!0),t.scrollLeft=L.current.scrollLeft-r},[]),P=(0,a.useCallback)(()=>{L.current=null},[]);(0,a.useEffect)(()=>{let e=w.current,r=y.current.get(t);e&&r&&requestAnimationFrame(()=>{let t=e.getBoundingClientRect(),l=r.getBoundingClientRect(),a=e.scrollLeft+l.left-t.left-t.width/2+l.width/2;e.scrollTo({left:a,behavior:"smooth"})})},[t]);let I=f&&(m||!j),B=null!==L.current;return(0,l.jsxs)("div",{className:"flex flex-col md:flex-row items-center p-[10px] gap-[10px] md:gap-0 bg-white border-2 border-[#afb1bd] rounded-[12px] shadow-[0px_4px_12px_0px_rgba(54,60,90,0.12)]",children:[d&&(0,l.jsx)("span",{className:"text-base font-medium text-graycfao-900 whitespace-nowrap shrink-0 md:pl-[0.25rem]",children:d}),(0,l.jsxs)("div",{className:"flex items-center w-full min-w-0",children:[j&&!A&&(0,l.jsx)("button",{onClick:()=>$("left"),className:"shrink-0 ml-0 md:ml-[1.5625rem]",children:(0,l.jsx)(s.A,{className:"w-4 h-4 text-graycfao-700"})}),(0,l.jsxs)("div",{ref:w,className:(0,o.cn)("flex flex-1 items-center select-none",A?"flex-wrap":"overflow-x-auto scrollbar-hide snap-x snap-mandatory",j&&!A?"ml-[1.875rem]":"ml-[0.9375rem]",I?"gap-[18px]":"gap-[8px]",!m&&(B?"cursor-grabbing":"cursor-grab")),onMouseDown:T,onMouseMove:_,onMouseUp:P,onMouseLeave:P,children:[S.map(e=>{let a=i(e),s=a.value===t;return(0,l.jsx)("button",{ref:e=>{e?y.current.set(a.value,e):y.current.delete(a.value)},onClick:()=>{M.current||s||r(a.value)},style:s?{backgroundColor:u}:x&&h?{borderColor:h}:void 0,className:(0,o.cn)("h-11 rounded-[8px] text-[15px] whitespace-nowrap transition-colors pointer-events-auto",m?"grow basis-[calc(50%-9px)] sm:basis-0 flex items-center justify-center":I?"flex-1 flex items-center justify-center":"shrink-0 px-4 md:px-6 snap-start",s?"text-white font-bold":(0,o.cn)("bg-white text-graycfao-700 font-medium hover:bg-cfao-50",x&&"border-2 border-graycfao-700",p&&"opacity-50")),children:a.label},a.value)}),E&&(0,l.jsx)("button",{type:"button",onClick:()=>k(e=>!e),className:"h-11 px-4 md:px-6 shrink-0 flex items-center justify-center text-[15px] font-medium text-graycfao-700 underline underline-offset-4 whitespace-nowrap hover:text-graycfao-900",children:C?"Show less":"View all"})]}),j&&!A&&(0,l.jsx)("button",{onClick:()=>$("right"),className:"shrink-0 ml-[1.875rem]",children:(0,l.jsx)(n.A,{className:"w-4 h-4 text-graycfao-700"})})]})]})}},82482:(e,t,r)=>{r.d(t,{A:()=>l});let l=(0,r(78340).A)("Minus",[["path",{d:"M5 12h14",key:"1ays0h"}]])},87952:(e,t,r)=>{r.d(t,{default:()=>o});var l=r(95155),a=r(40980),s=r(73973),n=r(7379);let o=({activeColor:e="#004ea8",stretch:t=!0,className:r,containerClassName:o})=>{let{tabs:i,activeTab:c,scrollToSection:u}=(0,n.d)(),d=(0,l.jsx)(s.A,{tabs:i,activeTab:c,onChange:u,activeColor:e,stretch:t});return(0,l.jsx)("div",{className:(0,a.cn)("sticky top-16 z-40 py-2",r),children:o?(0,l.jsx)("div",{className:o,children:d}):d})}},88998:(e,t,r)=>{r.d(t,{default:()=>n});var l=r(95155),a=r(12115),s=r(7379);let n=({id:e,children:t,...r})=>{let{registerSection:n,registerScrollTarget:o,scrollOffset:i}=(0,s.d)(),c=(0,a.useRef)(null),u=(0,a.useRef)(null);return(0,a.useEffect)(()=>{let t=c.current;if(t)return o(e,t),()=>o(e,null)},[e,o]),(0,a.useEffect)(()=>{let t=u.current;if(t)return n(e,t),()=>n(e,null)},[e,n]),(0,l.jsxs)("div",{ref:c,id:e,...r,children:[(0,l.jsx)("div",{ref:u,"data-section-id":e,"aria-hidden":!0,style:{position:"sticky",top:i,height:1,pointerEvents:"none",marginBottom:-1}}),t]})}}}]);