https://afrogrids.com/assets/BookPage-toa1tZqw.js

1import{j as e,D as ee,a as ge,b as we,c as Z,r as l,d as J,C as o,E as d,e as v,h as U,i as ye,k as X}from"./index-2dJPdpvl.js";import{D as ve}from"./DocumentPreviewModal-DTJs-tpv.js";import{S as je,c as y,t as ke,o as Ne}from"./analyticsResources-DgNP7y6o.js";import{u as Te}from"./useControlledSectionScroll-3RLWKYwp.js";import{S as Se}from"./SectionNav-DSJetUqZ.js";const Re=({item:s,index:a,isActive:i,buttonRef:j,onHover:b,onSelect:_,disabled:A=!1})=>{const c=s?.name||`Character ${a+1}`,k=s?.summary||"An archetype in the Bones of the Sea story.",I=c.length>18?`${c.slice(0,16)}...`:c;return e.jsxs("button",{ref:j,type:"button",onMouseEnter:b,onFocus:b,onClick:_,disabled:A,"aria-pressed":i,"aria-label":`${c}: ${k}`,className:`relative max-w-[calc(100vw-42px)] shrink-0 snap-center overflow-visible border-[5px] border-white shadow-[0_8px_24px_rgba(9,44,51,0.12)] transition-[transform,box-shadow,background-color] duration-300 ease-out will-change-transform focus:outline-none focus:ring-2 focus:ring-[#ffd5aa] disabled:cursor-wait disabled:opacity-70 lg:transition-[width,transform,box-shadow,background-color] lg:duration-[520ms] lg:ease-[cubic-bezier(0.22,1,0.36,1)] ${a===0?"":"-ml-[28px] sm:-ml-[38px] lg:-ml-[50px]"} ${i?"z-30 h-[124px] w-[278px] rounded-full bg-transparent pr-4 text-left shadow-[0_12px_28px_rgba(9,44,51,0.14)] sm:h-[144px] sm:w-[380px] lg:h-[156px] xl:w-[600px]":"z-10 h-[96px] w-[96px] rounded-full bg-[#7bd0d2] hover:z-20 hover:-translate-y-0.5 hover:shadow-[0_10px_24px_rgba(9,44,51,0.14)] sm:h-[122px] sm:w-[122px] lg:h-[152px] lg:w-[152px]"}`,children:[e.jsx("span",{"aria-hidden":"true",className:`absolute inset-0 z-0 origin-left rounded-full bg-white transition-[opacity,transform] duration-300 ease-out will-change-transform lg:duration-[560ms] lg:ease-[cubic-bezier(0.22,1,0.36,1)] ${i?"scale-x-100 opacity-100":"scale-x-[0.38] opacity-0"}`}),e.jsx("span",{className:`absolute top-1/2 z-[1] flex -translate-y-1/2 items-center justify-center overflow-hidden rounded-full bg-[#70cbd0] transition-[transform,box-shadow] duration-300 ease-out will-change-transform lg:transition-[width,height,left,transform,box-shadow] lg:duration-[520ms] lg:ease-[cubic-bezier(0.22,1,0.36,1)] ${i?"left-[-2px] h-[124px] w-[124px] border-[5px] border-white sm:h-[144px] sm:w-[144px] lg:h-[156px] lg:w-[156px]":"inset-0 h-full w-full"}`,children:e.jsx(ee,{src:s?.image,alt:"",className:"h-full w-full object-contain p-1",eager:a<4,fetchPriority:a<4?"high":"auto"})}),e.jsxs("span",{className:`relative z-[2] flex h-full min-w-0 flex-col justify-center transition-[opacity,transform] duration-300 ease-out lg:duration-[320ms] ${i?"ml-[132px] translate-x-0 opacity-100 delay-150 sm:ml-[162px] lg:ml-[176px] lg:delay-[240ms]":"pointer-events-none ml-0 translate-x-2 opacity-0 delay-0"}`,children:[e.jsx("span",{className:"block text-[0.7rem] font-[700] leading-tight text-[#404040] [overflow-wrap:anywhere] sm:text-[1.08rem]",children:c}),e.jsx("span",{className:"mt-1 block max-h-[64px] overflow-hidden text-[0.6rem] leading-[1.16] text-[#666] sm:max-h-[80px] sm:text-[0.92rem] lg:max-h-[92px] lg:text-[1rem]",children:k})]}),e.jsx("span",{className:`absolute bottom-[-15px] left-1/2 z-40 flex min-h-[42px] min-w-[56px] max-w-[94px] -translate-x-1/2 items-center justify-center rounded-full bg-white px-2 text-center text-[0.48rem] font-[700] leading-[0.58rem] text-[#404040] shadow-[0_5px_14px_rgba(9,44,51,0.12)] transition-[opacity,transform] duration-200 ease-out sm:bottom-[-17px] sm:min-h-[50px] sm:min-w-[68px] sm:text-[0.55rem] sm:leading-[0.66rem] ${i?"translate-y-1 opacity-0":"translate-y-0 opacity-100 delay-75"}`,title:c,children:e.jsx("span",{className:"block truncate",children:I})})]})}

1,te=[{id:"archetypes",label:"Archetypes"},{id:"story",label:"Story"},{id:"reports",label:"Reports"}],Ce=te.map(({id:s})=>s),P=(s,a)=>s===o.DATA&&!a?o.EMPTY:s,Pe=()=>e.jsxs(e.Fragment,{children:[e.jsx(v,{className:"mx-auto h-[2.3rem] w-[min(86%,700px)] rounded-full sm:h-[3rem] lg:h-[3.2rem]"}),e.jsx(U,{className:"mx-auto mt-[24px] max-w-[900px]",lines:5,lineClassName:"h-[1rem] rounded-full sm:h-[1.05rem]",widths:["w-full","w-[96%]","w-[88%]","w-[92%]","w-[70%]"]})]}),_e=()=>e.jsxs(e.Fragment,{children:[e.jsx(v,{className:"mx-auto h-[2.3rem] w-[min(70%,520px)] rounded-full sm:h-[2.8rem]"}),e.jsx(v,{className:"mx-auto mt-[28px] aspect-video w-full max-w-[940px] rounded-[7px] shadow-[0_12px_32px_rgba(11,49,57,0.12)]"}),e.jsx(U,{className:"mt-[22px] max-w-[900px]",lines:3,lineClassName:"h-[1rem] rounded-full sm:h-[1.05rem]",widths:["w-full","w-[92%]","w-[68%]"]}),e.jsx(v,{className:"mx-auto mt-[24px] h-[46px] w-full max-w-[560px] rounded-full"})]}),Ae=()=>e.jsx("div",{className:"mt-[42px] grid grid-cols-1 gap-x-[42px] gap-y-[34px] sm:grid-cols-2 lg:grid-cols-3",children:Array.from({length:3}).map((s,a)=>e.jsxs("span",{className:"flex h-full min-w-0 flex-col items-center",children:[e.jsx(v,{className:"aspect-[1/1.414] w-full max-w-[210px] rounded-[7px] shadow-[0_8px_22px_rgba(11,49,57,0.08)]"}),e.jsx(U,{className:"mt-[10px] w-full max-w-[210px]",lines:3,lineClassName:"h-[1rem] rounded-full",widths:["w-full","w-[86%]","w-[58%]"]})]},a))}),Ie=({fill:s,className:a=""})=>e.jsx("svg",{"aria-hidden":"true",className:`pointer-events-none absolute left-0 w-full ${a}`,preserveAspectRatio:"none",viewBox:"0 0 1440 319",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M0,160L48,181.3C96,203,192,245,288,234.7C384,224,480,160,576,117.3C672,75,768,53,864,85.3C960,117,1056,203,1152,224C1248,245,1344,203,1392,181.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z",fill:s,fillOpacity:"1"})}),h=s=>{if(!s)return"";const a=String(s);if(typeof window<"u"&&window.document){const i=window.document.createElement("div");return i.innerHTML=a,(i.textContent||i.innerText||"").replace(/\s+/g," ").trim()}return a.replace(/<[^>]*>/g," ").replace(/&nbsp;/g," ").replace(/\s+/g," ").trim()},Le=s=>{try{const a=new URL(s,"https://afrogrids.local");return decodeURIComponent(a.pathname).split("/").filter(Boolean).pop()||"bones-of-the-sea-trailer.mp4"}catch{return"bones-of-the-sea-trailer.mp4"}},Oe=(s="")=>/\.pdf($|[?#])/i.test(s),De=s=>s?.fileUrl||s?.pdfUrl||(Oe(s?.url)?s.url:"")||"",Ee=()=>{const s=ge({page:"book"}),{data:a,contentState:i,retry:j}=we(ye.BOOK),{data:b=[],contentState:_,retry:A}=Z(X.BOOK_CHARACTERS),{data:c=[],contentState:k,retry:I}=Z(X.BOOK_PUBLICATIONS),[g,L]=l.useState(null),[re,se]=l.useState(!0),[u,B]=l.useState(null),$=l.useRef(null),M=l.useRef(null),f=l.useRef(!1),O=l.useRef(!1),[ae,z]=l.useState("16 / 9"),F=l.useRef(null),G=l.useRef([]),{activeSection:oe,scrollToSection:le}=Te(Ce,{enabled:!u}),K=h(a?.synopsisTitle),Y=h(a?.synopsisText),p=h(a?.trailerTitle),x=String(a?.trailerVideoUrl||"").trim(),D=h(a?.ebookTitle),w=x,ne=Le(w),N=l.useMemo(()=>b.filter(r=>r.active!==!1).map(r=>({id:r?.id,name:h(r?.title),summary:h(r?.summary),image:J(r?.imageUrl||r?.image)})).filter(r=>r.id&&r.name&&r.summary&&r.image),[b]),V=l.useMemo(()=>c.filter(t=>t.active!==!1).map(t=>{const r=De(t);return{...t,image:J(t.imageUrl||t.image),fileUrl:r,url:r,type:"pdf",canFrame:!0}}).filter(t=>t.id&&t.title&&t.image&&t.fileUrl),[c]),T=P(i,!!(K&&Y)),S=P(i,!!(p&&x)),R=P(_,N.length>0),C=P(k,V.length>0);l.useEffect(()=>{g!==null&&g>=N.length&&L(null)},[g,N.length]),l.useEffect(()=>{const t=document.querySelector("footer");if(!t)return;const r=new IntersectionObserver(([n])=>{se(!n.isIntersecting)},{threshold:.08});return r.observe(t),()=>r.disconnect()},[]),l.useEffect(()=>{O.current=!1,f.current=!1},[x]),l.useEffect(()=>{const t=$.current,r=M.current;if(!t||!r||typeof IntersectionObserver>"u")return;const n=new IntersectionObserver(([H])=>{if(H.isIntersecting){r.muted=!0,f.current=!0,r.play()?.catch?.(()=>{f.current=!1});return}f.current=!1,r.pause()},{threshold:.45});return n.observe(t),()=>{n.disconnect(),r.pause()}},[x]);const W=(t,r=!1)=>{const n=g===t;if(n||L(t),!r||n||!(typeof window<"u"&&window.matchMedia("(max-width: 1023px)").matches))return;const E=()=>{const m=F.current,q=G.current[t];if(!m||!q||!(m.scrollWidth>m.clientWidth+2))return;const fe=m.getBoundingClientRect(),Q=q.getBoundingClientRect(),he=Q.left-fe.left+m.scrollLeft+Q.width/2,be=Math.max(0,he-m.clientWidth/2);m.scrollTo({left:be,behavior:"smooth"})};typeof window<"u"&&window.setTimeout(()=>{E(),window.setTimeout(E,260)},80)},ie=(t,r)=>{const n=y({page:"book",section:"archetypes",resourceType:"character",resourceId:t.id,title:t.name});s.trackAction({eventType:"click",resource:n,triggerKey:`book-character-click:${n.resourceId}`,action:()=>W(r,!0)})},ce=t=>{const r=y({page:"book",section:"reports",resourceType:"publication",resourceId:t.id,title:t.title,url:t.fileUrl});s.trackAction({eventType:"view",resource:r,triggerKey:`book-publication-view:${r.resourceId}`,action:()=>B(t)})},pe=()=>{B(null)},de=t=>{const r=y({page:"book",section:"reports",resourceType:"publication",resourceId:t.id,title:t.title,url:t.fileUrl||t.url});return s.trackAction({eventType:"open",resource:r,triggerKey:`book-publication-open:${r.resourceId}`,action:()=>Ne(t.fileUrl||t.url)})},xe=t=>{if(t.preventDefault(),!w||s.isTriggerLoading("book-trailer-download"))return;ke(w,ne);const r=y({page:"book",section:"story",resourceType:"trailer",resourceId:"book-trailer",title:D||p,url:w});s.trackAction({eventType:"download",resource:r,triggerKey:"book-trailer-download"})},me=t=>{if(f.current){f.current=!1;return}if(O.current)return;O.current=!0;const r=y({page:"book",section:"story",resourceType:"trailer",resourceId:"book-trailer",title:p,url:t.currentTarget.currentSrc||x});s.trackAction({eventType:"play",resource:r,triggerKey:"book-trailer-play",action:void 0})},ue=t=>{const{videoWidth:r,videoHeight:n}=t.currentTarget;if(!r||!n){z("16 / 9");return}z(`${r} / ${n}`)};return e.jsxs("main",{className:"relative mt-[-2px] overflow-hidden bg-[#47a3b3] font-phil text-[#102f36] lg:pb-0",children:[e.jsx(Se,{links:te,activeSection:oe,mobileVisible:re,onSelect:le,ariaLabel:"Book page sections"}),e.jsxs("section",{id:"archetypes","data-controlled-section":"archetypes",className:"relative flex min-h-[100svh] flex-col justify-center scroll-mt-[1px] overflow-hidden bg-[#47a3b3] bg-home bg-cover bg-center bg-no-repeat px-5 pb-[78px] pt-[118px] sm:px-8 sm:pb-[96px] sm:pt-[150px] lg:px-[150px] lg:pb-[108px] lg:pt-[160px] xl:px-[170px]","aria-busy":T===o.LOADING||R===o.LOADING,children:[e.jsx("div",{className:"absolute inset-0 bg-gradient-to-b from-[#4db2bd]/90 via-[#49adb8]/88 to-[#47a3b3]/94"}),e.jsxs("div",{className:"relative z-[1] mx-auto w-full max-w-[950px] pt-10 sm:pt-12",children:[T===o.LOADING?e.jsx(Pe,{}):T===o.ERROR?e.jsx(d,{error:!0,title:"Unable to load the book introduction",message:"The book introduction could not be loaded. Please try again.",onRetry:j}):T===o.EMPTY?e.jsx(d,{title:"No book introduction available",message:"The book introduction has not been published yet."}):e.jsxs(e.Fragment,{children:[e.jsx("h1",{className:"mx-auto max-w-full text-center text-[2rem] italic leading-[1.08] [overflow-wrap:anywhere] sm:text-[2.85rem] sm:leading-none lg:text-[3.1rem]",children:K}),e.jsx("p",{className:"mx-auto mt-[24px] max-w-[900px] text-justify text-[0.95rem] leading-[1.45] [overflow-wrap:anywhere] sm:text-[1.05rem] sm:leading-[1.55]",children:Y})]}),e.jsx("div",{ref:F,className:"mx-auto mt-[30px] flex w-full max-w-[980px] snap-x snap-mandatory scroll-px-5 items-center overflow-x-auto overscroll-x-contain pl-0 pr-[calc(50vw-129px)] pb-9 pt-6 no-scrollbar sm:mt-[34px] sm:scroll-px-8 sm:pr-[calc(50vw-190px)] lg:max-w-[1180px] lg:snap-none lg:justify-center lg:overflow-visible lg:px-4",onMouseLeave:()=>L(null),children:R===o.LOADING?Array.from({length:7}).map((t,r)=>e.jsx("span",{className:`relative z-10 h-[96px] w-[96px] shrink-0 snap-center rounded-full border-[5px] border-white bg-[#70cbd0] shadow-[0_8px_24px_rgba(9,44,51,0.12)] sm:h-[122px] sm:w-[122px] lg:h-[152px] lg:w-[152px] ${r===0?"":"-ml-[28px] sm:-ml-[38px] lg:-ml-[50px]"}`,"aria-hidden":"true"},`character-skeleton-${r}`)):R===o.ERROR?e.jsx(d,{error:!0,compact:!0,title:"Unable to load archetypes",message:"The character archetypes could not be loaded. Please try again.",onRetry:A,className:"w-full"}):R===o.EMPTY?e.jsx(d,{compact:!0,title:"No archetypes available",message:"Character archetypes have not been published yet.",className:"w-full"}):N.map((t,r)=>e.jsx(Re,{buttonRef:n=>{G.current[r]=n},item:t,index:r,isActive:g===r,onHover:()=>W(r,!0),onSelect:()=>ie(t,r),disabled:s.isTriggerLoading(`book-character-click:${t.id}`)},t.id))})]})]}),e.jsxs("section",{id:"story","data-controlled-section":"story",ref:$,className:"relative flex min-h-[100svh] flex-col justify-center scroll-mt-[80px] overflow-hidden bg-[#47a3b3] bg-home bg-cover bg-center bg-no-repeat px-5 pb-[190px] pt-[76px] sm:px-8 sm:pb-[225px] sm:pt-[90px] lg:px-[150px] lg:pb-[245px] xl:px-[170px]","aria-busy":S===o.LOADING,children:[e.jsx("div",{className:"absolute inset-0 bg-gradient-to-b from-[#47a3b3]/94 via-[#47a3b3]/92 to-[#49adb8]/94"}),e.jsx("div",{className:"relative z-[1] mx-auto w-full max-w-[940px]",children:S===o.LOADING?e.jsx(_e,{}):S===o.ERROR?e.jsx(d,{error:!0,title:"Unable to load the book story",message:"The book story could not be loaded. Please try again.",onRetry:j}):S===o.EMPTY?e.jsx(d,{title:"No book story available",message:"The book story has not been published yet."}):e.jsxs(e.Fragment,{children:[e.jsx("h2",{className:"text-center text-[2rem] italic leading-none sm:text-[2.75rem]",children:p}),e.jsx("div",{className:"mx-auto mt-[28px] w-full max-w-[940px] overflow-hidden rounded-[7px] bg-black shadow-[0_12px_32px_rgba(11,49,57,0.12)]",style:{aspectRatio:ae},children:e.jsx("video",{ref:M,src:x,title:p,"aria-label":p||"Book trailer",controls:!0,muted:!0,playsInl

1ine:!0,preload:"metadata",onLoadedMetadata:ue,onPlay:me,className:"h-full w-full bg-black object-contain"},x)}),a?.trailerDescription&&e.jsx("p",{className:"mt-[22px] max-w-[900px] text-[0.96rem] leading-[1.25] sm:text-[1.05rem]",children:a.trailerDescription}),e.jsx("div",{className:"mx-auto mt-[24px] flex w-full justify-center",children:w?e.jsxs("button",{type:"button","aria-disabled":s.isTriggerLoading("book-trailer-download"),onClick:xe,className:"w-full max-w-[560px] rounded-full bg-[#ffd5aa] px-5 py-[11px] text-center text-[0.98rem] text-[#102f36] shadow-[0_8px_18px_rgba(15,48,55,0.08)] transition duration-300 hover:scale-[1.015] focus:outline-none focus:ring-2 focus:ring-[#102f36]/40 sm:text-[1.08rem]",children:["Download ",D||p]}):e.jsxs("span",{className:"w-full max-w-[560px] rounded-full bg-[#ffd5aa]/70 px-5 py-[11px] text-center text-[0.98rem] text-[#102f36]/70 sm:text-[1.08rem]",children:["Download ",D||p]})})]})}),e.jsx(Ie,{fill:"#486f73",className:"bottom-[-1px] z-[1] h-[125px] sm:h-[180px] lg:h-[220px]"})]}),e.jsx("section",{id:"reports","data-controlled-section":"reports",className:"flex min-h-[100svh] items-center scroll-mt-[80px] bg-[#486f73] px-5 py-[86px] text-white sm:px-8 sm:py-[110px] lg:px-[150px] xl:px-[170px]","aria-busy":C===o.LOADING,children:e.jsxs("div",{className:"mx-auto w-full max-w-[930px]",children:[e.jsx("h2",{className:"text-center text-[2rem] italic leading-none text-white/90 sm:text-[2.75rem]",children:"Publications"}),C===o.LOADING?e.jsx(Ae,{}):C===o.ERROR?e.jsx(d,{error:!0,title:"Unable to load publications",message:"The publications could not be loaded. Please try again.",onRetry:I,className:"mt-[42px]"}):C===o.EMPTY?e.jsx(d,{title:"No publications available",message:"Publications have not been published yet.",className:"mt-[42px]"}):e.jsx("div",{className:"mt-[42px] grid grid-cols-1 gap-x-[42px] gap-y-[34px] sm:grid-cols-2 lg:grid-cols-3",children:V.map((t,r)=>e.jsxs("button",{type:"button",disabled:s.isTriggerLoading(`book-publication-view:${t.id}`),onClick:()=>ce(t),className:"group flex h-full min-w-0 flex-col items-center disabled:cursor-wait disabled:opacity-70",children:[e.jsx("span",{className:"block aspect-[1/1.414] w-full max-w-[210px] overflow-hidden rounded-[7px] shadow-[0_8px_22px_rgba(11,49,57,0.08)] transition duration-300 group-hover:scale-[1.015] group-hover:shadow-[0_12px_30px_rgba(11,49,57,0.16)]",children:e.jsx(ee,{src:t.image,alt:"",delayMs:r*80,className:"h-full w-full object-cover object-center"})}),e.jsx("span",{className:"mt-[10px] block w-full max-w-[210px] text-left text-[1rem] leading-[1.15] text-white underline underline-offset-2 [overflow-wrap:anywhere] sm:text-[1.08rem]",children:t.title}),e.jsxs("span",{className:"mt-[3px] block w-full max-w-[210px] text-left text-[0.96rem] text-white/90 sm:text-[1.03rem]",children:["By ",t.author]})]},t.id))})]})}),e.jsx(ve,{document:u&&{...u,url:u.fileUrl,type:"pdf",subtitle:u.author?`By ${u.author}`:""},onClose:pe,onOpenSource:de,openSourceLabel:"Open PDF in new tab",blockedMessage:"This publication PDF may block embedded previews. The modal stays open here, and the PDF can be opened in a new tab.",blockedActionLabel:"Open PDF",closeLabel:"Close publication"}),e.jsx(je,{})]})},Ge=()=>e.jsx(Ee,{});export{Ge as default};