https://forestdental.org/assets/CaseModal-B1c2kGSh.js

1import{r as e,t}from"./jsx-runtime-DGeXAQPT.js";import{t as n}from"./react-vt4WmSOl.js";import{n as r}from"./createServerFn-Bups_lUA.js";import{a as i,i as a,o}from"./Footer-B97zMXdo.js";import{g as s,n as c,r as l,t as u}from"./typography-DkJ_DhvR.js";import{t as d}from"./arrow-up-right-DAbOQygR.js";import{t as f}from"./x-zQCzbbSx.js";import{r as p}from"./cases-K9LYWaxH.js";var m=o(`chevron-down`,[[`path`,{d:`m6 9 6 6 6-6`,key:`qrunsl`}]]),h=o(`zoom-in`,[[`circle`,{cx:`11`,cy:`11`,r:`8`,key:`4ej97u`}],[`line`,{x1:`21`,x2:`16.65`,y1:`21`,y2:`16.65`,key:`13gj7c`}],[`line`,{x1:`11`,x2:`11`,y1:`8`,y2:`14`,key:`1vmskp`}],[`line`,{x1:`8`,x2:`14`,y1:`11`,y2:`11`,key:`durymu`}]]),g=e(n(),1),_=t(),v=`https://flexdentalgroup.portal.dental/practices/Forestdental`,y=`tel:01443807845`;function b({caseData:e,onClose:t}){let[n,o]=(0,g.useState)(null),h=(0,g.useRef)(null),[b,S]=(0,g.useState)(!1);(0,g.useEffect)(()=>{S(!1),h.current&&(h.current.scrollTop=0)},[e]);let C=e=>{e.currentTarget.scrollTop>40&&S(!0)},w=()=>{h.current?.scrollBy({top:h.current.clientHeight*.7,behavior:`smooth`})};if((0,g.useEffect)(()=>{if(!e)return;let r=document.body.style.overflow;document.body.style.overflow=`hidden`;let i=e=>{e.key===`Escape`&&(n?o(null):t())};return window.addEventListener(`keydown`,i),()=>{document.body.style.overflow=r,window.removeEventListener(`keydown`,i)}},[e,n,t]),!e)return null;let T=e;return(0,_.jsxs)(`div`,{className:`fixed inset-0 z-[100] flex items-stretch justify-center overflow-hidden bg-anchor/70 backdrop-blur-sm sm:items-start sm:overflow-y-auto`,children:[(0,_.jsx)(`button`,{type:`button`,"aria-label":`Close`,onClick:t,className:`absolute inset-0 h-full w-full cursor-default`}),(0,_.jsxs)(`div`,{role:`dialog`,"aria-modal":`true`,"aria-label":T.title,className:`relative flex h-[100dvh] w-full flex-col overflow-hidden bg-paper shadow-2xl sm:my-10 sm:h-auto sm:max-h-[90vh] sm:max-w-5xl sm:rounded-3xl`,children:[(0,_.jsxs)(`div`,{className:`sticky top-0 z-20 flex items-center gap-3 border-b border-anchor/10 bg-paper/95 px-4 py-3 backdrop-blur-md sm:hidden`,children:[(0,_.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,_.jsx)(`div`,{className:`text-[10px] font-medium uppercase tracking-[0.2em] text-forest`,children:T.duration}),(0,_.jsx)(`div`,{className:`truncate font-display text-[15px] leading-tight text-anchor`,children:T.title})]}),(0,_.jsx)(`button`,{type:`button`,onClick:t,"aria-label":`Close case`,className:`flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-anchor/5 text-anchor transition hover:bg-anchor hover:text-paper`,children:(0,_.jsx)(f,{className:`h-4 w-4`})})]}),(0,_.jsx)(`button`,{type:`button`,onClick:t,"aria-label":`Close case`,className:`absolute right-4 top-4 z-20 hidden h-10 w-10 items-center justify-center rounded-full bg-paper/95 text-anchor shadow-md ring-1 ring-anchor/10 transition hover:bg-anchor hover:text-paper sm:flex`,children:(0,_.jsx)(f,{className:`h-5 w-5`})}),(0,_.jsx)(`div`,{ref:h,onScroll:C,className:`min-h-0 flex-1 overflow-y-auto scroll-smooth overscroll-contain`,children:(0,_.jsxs)(`div`,{className:`px-5 pb-8 pt-5 sm:px-10 sm:pt-10`,children:[(0,_.jsxs)(`div`,{className:`hidden sm:block`,children:[(0,_.jsx)(l,{className:`text-forest`,children:T.duration}),(0,_.jsx)(`h2`,{className:`mt-3 pr-12 font-display text-[28px] leading-tight tracking-tight text-anchor sm:text-[38px]`,children:T.title})]}),(0,_.jsx)(`div`,{className:`flex flex-wrap gap-1.5 sm:mt-4`,children:T.treatments.map(e=>(0,_.jsx)(r,{to:`/services/$slug`,params:{slug:e},onClick:t,className:`rounded-full border border-anchor/15 bg-anchor/[0.03] px-3 py-1 text-[12px] font-medium text-anchor/70 hover:border-anchor/40 hover:text-anchor`,children:p(e)},e))}),(0,_.jsxs)(`div`,{className:`mt-5 grid grid-cols-2 gap-2 sm:mt-8 sm:gap-3`,children:[(0,_.jsx)(x,{src:T.beforeImage,label:`Before`,alt:`Before ${T.title.toLowerCase()} treatment at Forest Dental Blackwood — patient smile prior to ${T.treatments.map(p).join(`, `).toLowerCase()}`,imgStyle:T.beforeImageStyle,onOpen:()=>T.beforeImage&&o(`before`)}),(0,_.jsx)(x,{src:T.afterImage,label:`After`,alt:`After ${T.title.toLowerCase()} treatment at Forest Dental Blackwood — final result following ${T.treatments.map(p).join(`, `).toLowerCase()}`,variant:`after`,imgStyle:T.afterImageStyle,onOpen:()=>T.afterImage&&o(`after`)})]}),(0,_.jsxs)(`div`,{className:`mt-8 grid gap-8 sm:mt-10 sm:gap-10 lg:grid-cols-12 lg:gap-12`,children:[(0,_.jsxs)(`div`,{className:`space-y-6 sm:space-y-8 lg:col-span-7`,children:[T.concern&&(0,_.jsxs)(`section`,{children:[(0,_.jsx)(l,{className:`uppercase tracking-[0.18em] text-anchor/50`,children:`The concern`}),(0,_.jsx)(`p`,{className:`mt-2 font-display text-[18px] leading-[1.4] text-anchor sm:text-[22px]`,children:T.concern})]}),T.treatmentSummary&&(0,_.jsxs)(`section`,{children:[(0,_.jsx)(l,{className:`uppercase tracking-[0.18em] text-anchor/50`,children:`The treatment`}),(0,_.jsx)(u,{className:`mt-2 text-[15px] leading-[24px] text-anchor/80`,children:T.treatmentSummary})]}),(0,_.jsxs)(`section`,{children:[(0,_.jsx)(l,{className:`uppercase tracking-[0.18em] text-anchor/50`,children:`The result`}),(0,_.jsx)(u,{className:`mt-2 text-[15px] leading-[24px] text-anchor/80`,children:T.summary})]})]}),(0,_.jsx)(`aside`,{className:`lg:col-span-5`,children:(0,_.jsxs)(`div`,{className:`rounded-2xl border border-anchor/10 bg-white/70 p-5 backdrop-blur-sm sm:p-6`,children:[(0,_.jsxs)(`div`,{className:`flex items-center gap-2 text-[11px] uppercase tracking-[0.22em] text-anchor/55`,children:[(0,_.jsx)(i,{className:`h-3.5 w-3.5`}),` `,T.duration]}),(0,_.jsx)(`h3`,{className:`mt-3 font-display text-[20px] leading-tight text-anchor`,children:`What this case cost`}),T.pricing&&T.pricing.length>0?(0,_.jsx)(`dl`,{className:`mt-4 divide-y divide-anchor/10`,children:T.pricing.map(e=>(0,_.jsxs)(`div`,{className:`flex items-baseline justify-between gap-4 py-2.5`,children:[(0,_.jsx)(`dt`,{className:`text-[13px] leading-[20px] text-anchor/75`,children:e.label}),(0,_.jsx)(`dd`,{className:`whitespace-nowrap font-display text-[15px] font-medium text-anchor`,children:e.price})]},e.label))}):(0,_.jsx)(`p`,{className:`mt-3 text-[13px] text-anchor/60`,children:`Pricing available on consultation.`}),T.totalPrice&&(0,_.jsxs)(`div`,{className:`mt-3 flex items-baseline justify-between border-t border-anchor/15 pt-3`,children:[(0,_.jsx)(`span`,{className:`text-[11px] font-medium uppercase tracking-[0.2em] text-anchor/60`,children:`Total invested`}),(0,_.jsx)(`span`,{className:`font-display text-[24px] tracking-tight text-anchor`,children:T.totalPrice})]}),(0,_.jsxs)(`div`,{className:`mt-5 flex flex-col gap-2`,children:[(0,_.jsxs)(`a`,{href:v,target:`_blank`,rel:`noopener noreferrer`,className:`inline-flex items-center justify-center gap-2 rounded-full bg-anchor px-5 py-3 text-paper transition hover:bg-anchor/90`,children:[(0,_.jsx)(c,{children:`Book a consultation`}),(0,_.jsx)(d,{className:`h-4 w-4`})]}),(0,_.jsxs)(`a`,{href:y,className:`inline-flex items-center justify-center gap-2 rounded-full border border-anchor/25 bg-white/70 px-5 py-3 text-[13px] font-medium text-anchor transition hover:bg-white`,children:[(0,_.jsx)(a,{className:`h-3.5 w-3.5`}),` Call the practice`]})]}

1),(0,_.jsx)(`p`,{className:`mt-4 text-[11px] leading-[16px] text-anchor/55`,children:`Every mouth is different — your final plan and price is confirmed after an in-person consultation.`})]})})]})]})}),(0,_.jsxs)(`div`,{className:s(`pointer-events-none absolute inset-x-0 bottom-0 z-10 flex flex-col items-center transition-opacity duration-300`,b?`opacity-0`:`opacity-100`),children:[(0,_.jsx)(`div`,{className:`h-16 w-full bg-gradient-to-t from-paper via-paper/85 to-transparent sm:h-20`}),(0,_.jsxs)(`button`,{type:`button`,onClick:w,className:`pointer-events-auto -mt-3 mb-3 inline-flex items-center gap-2 rounded-full bg-anchor px-4 py-2 text-[12px] font-medium text-paper shadow-lg ring-1 ring-anchor/20 transition hover:bg-anchor/90 sm:-mt-4 sm:mb-4`,children:[`Scroll for pricing & details`,(0,_.jsx)(m,{className:`h-3.5 w-3.5 animate-bounce`})]})]})]}),n&&(0,_.jsxs)(`button`,{type:`button`,onClick:e=>{e.stopPropagation(),o(null)},className:`fixed inset-0 z-[110] flex items-center justify-center bg-anchor/95 p-4`,"aria-label":`Close image`,children:[(0,_.jsx)(`div`,{className:`relative max-h-[92vh] max-w-[96vw] overflow-hidden rounded-xl`,children:(0,_.jsx)(`img`,{src:n===`before`?T.beforeImage:T.afterImage,alt:`${n===`before`?`Before`:`After`} ${T.title.toLowerCase()} — Forest Dental Blackwood`,style:{transform:`scale(1.12)`,transformOrigin:`50% 100%`},className:`max-h-[92vh] max-w-[96vw] object-contain shadow-2xl`})}),(0,_.jsx)(`span`,{className:`absolute right-6 top-6 flex h-10 w-10 items-center justify-center rounded-full bg-paper/95 text-anchor`,children:(0,_.jsx)(f,{className:`h-5 w-5`})})]})]})}function x({src:e,label:t,alt:n,variant:r=`before`,onOpen:i,imgStyle:a}){return(0,_.jsxs)(`button`,{type:`button`,onClick:i,className:`group relative aspect-[4/5] overflow-hidden rounded-2xl bg-anchor/[0.06] ring-1 ring-black/5`,children:[e&&(0,_.jsx)(`img`,{src:e,alt:n??t,style:{transform:`scale(1.15)`,transformOrigin:`50% 100%`,...a},className:`absolute inset-0 h-full w-full object-cover object-center transition duration-500 group-hover:scale-[1.18]`}),(0,_.jsx)(`span`,{className:s(`absolute left-3 top-3 z-10 rounded-full px-3 py-1 text-[10px] font-semibold uppercase tracking-widest`,r===`after`?`bg-forest text-paper`:`bg-paper/90 text-anchor`),children:t}),e&&(0,_.jsxs)(`span`,{className:`absolute bottom-3 right-3 inline-flex items-center gap-1.5 rounded-full bg-paper/95 px-3 py-1.5 text-[11px] font-medium text-anchor shadow-sm`,children:[(0,_.jsx)(h,{className:`h-3.5 w-3.5`}),` Enlarge`]})]})}export{b as t};