// Services — LPA banner (always visible, his most requested service) plus a // category explorer: pick a category on the left, the panel cross-fades to show // that category's services. Keeps the section short while every service stays // one click away. window.__openService(catId) lets tiles/nav open a category. // Card hrefs point at this site's service pages (styled placeholders for now). const { useState: useStateSv, useRef: useRefSv } = React; const SERVICE_CATS = [ { id: 'wills', label: 'Wills', icon: 'fileText', hint: 'Make or update your Will', blurb: 'Most people start here. However you make your Will, the same careful, plain-English advice runs through it.', items: [ { icon: 'monitor', tone: 'blue', title: 'Online Wills', body: 'Expert one-to-one advice over a video call. Ideal for busy schedules or anyone further afield.', href: 'online-wills.html' }, { icon: 'home', tone: 'coral', title: 'Home Visit Wills', body: 'We come to you. A relaxed, face-to-face conversation in the comfort of your own home.', href: 'home-visit-wills.html' }, { icon: 'briefcase', tone: 'blue', title: 'Wills for Business Owners', body: 'Specialist Will advice that protects your company, your family and the legacy you have built.', href: 'wills-for-business-owners.html' }, ], }, { id: 'lpa', label: 'Power of Attorney', icon: 'heartHandshake', hint: 'Choose who can act for you', blurb: 'Give the people you trust the legal power to act for you, or for your business, if you ever cannot act yourself.', items: [ { icon: 'heartHandshake', tone: 'blue', title: 'Lasting Power of Attorney', body: 'Full advice and support, in person or online. We handle the paperwork from start to finish.', href: 'lasting-power-of-attorney.html' }, { icon: 'clock', tone: 'gold', title: 'Fast Track LPA', body: 'A short online appointment and your documents within 48 hours. Reduced price for straightforward cases.', href: 'fast-track-lpa.html' }, { icon: 'briefcase', tone: 'coral', title: 'Business LPA', body: 'Keep your business running if you lose capacity. Appoint someone you trust to act for the business.', href: 'business-lasting-power-of-attorney.html' }, ], }, { id: 'trusts', label: 'Trusts & Tax', icon: 'shieldCheck', hint: 'Protect your home and assets', blurb: 'More control over how your home and savings pass on, during your lifetime and after it, with less lost to tax along the way.', items: [ { icon: 'shieldCheck', tone: 'gold', title: 'Family & Property Trusts', body: 'Protect your home and assets and add flexibility, so loved ones inherit exactly as you intend.', href: 'family-property-trusts.html' }, { icon: 'home', tone: 'coral', title: 'Property Protection Trusts', body: 'Make sure your home stays in the family, even if life takes an unexpected turn.', href: 'property-protection-trusts.html' }, { icon: 'landmark', tone: 'blue', title: 'Lifetime Trusts', body: 'A flexible way to protect your home for future generations and avoid the delays of probate.', href: 'lifetime-trusts.html' }, { icon: 'pound', tone: 'gold', title: 'Inheritance Tax Planning', body: 'Practical, honest advice to help keep more of your estate in the family.', href: 'inheritance-tax-planning.html' }, ], }, { id: 'after', label: 'Probate & Storage', icon: 'lock', hint: 'Help for executors and families', blurb: 'Support for the practical side, and safe keeping for the documents that matter most.', items: [ { icon: 'scale', tone: 'blue', title: 'Worry-free Probate', body: 'Fixed-price probate support agreed upfront, from the Grant application to full estate administration.', href: 'probate.html' }, { icon: 'lock', tone: 'gold', title: 'Will Storage & Updates', body: 'Secure storage and easy updates, so your Will is always safe, current and exactly where it should be.', href: 'will-storage-and-updates.html' }, ], }, ]; const TONES = { blue: { bg: '#EAF1FA', bgHover: '#D8E6F8', fg: '#4A6FA4' }, coral: { bg: 'rgba(244,104,95,0.13)', bgHover: 'rgba(244,104,95,0.22)', fg: '#E0564D' }, gold: { bg: 'rgba(255,204,87,0.22)', bgHover: 'rgba(255,204,87,0.36)', fg: '#C9912A' }, }; function ServiceCard({ s }) { const reduced = usePrefersReducedMotion(); const t = TONES[s.tone]; return ( { if (!reduced) { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 32px 70px -34px rgba(26,48,102,0.5)'; } const b = e.currentTarget.querySelector('[data-badge]'); if (b) b.style.background = t.bgHover; const a = e.currentTarget.querySelector('[data-arrow]'); if (a && !reduced) a.style.transform = 'translateX(4px)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 22px 56px -34px rgba(26,48,102,0.45)'; const b = e.currentTarget.querySelector('[data-badge]'); if (b) b.style.background = t.bg; const a = e.currentTarget.querySelector('[data-arrow]'); if (a) a.style.transform = 'translateX(0)'; }} >

{s.title}

{s.body}

Learn more ); } // Always-visible LPA banner: his most-requested service gets hero billing // inside the services section. function FastTrackFeature() { const reduced = usePrefersReducedMotion(); const mag = useMagnetic(3); const points = [ { icon: 'heartHandshake', text: 'Property, finance, health and welfare LPAs' }, { icon: 'fileText', text: 'Paperwork and registration handled for you' }, { icon: 'home', text: 'At your home or online, whichever suits' }, ]; return (
{ if (!reduced) { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 40px 80px -34px rgba(26,48,102,0.7)'; } }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 30px 70px -34px rgba(26,48,102,0.65)'; }} data-dark="true" > ); } function CatButton({ cat, active, flash, onSelect }) { return ( ); } function Services() { const [cat, setCat] = useStateSv('wills'); const [visible, setVisible] = useStateSv(true); const [flash, setFlash] = useStateSv(false); // Mobile rail scroll affordances: chevron + fade while more categories are // off-screen right; a plain fade once some are off-screen left. const [moreRight, setMoreRight] = useStateSv(true); const [moreLeft, setMoreLeft] = useStateSv(false); const railRef = useRefSv(null); const staticRender = useStaticRender(); const dur = staticRender ? 0 : 240; const pendingT = useRefSv(null); const flashT = useRefSv(null); const updateMoreRight = () => { const el = railRef.current; if (!el) return; setMoreRight(el.scrollWidth - el.clientWidth - el.scrollLeft > 12); setMoreLeft(el.scrollLeft > 12); }; React.useLayoutEffect(() => { updateMoreRight(); window.addEventListener('resize', updateMoreRight); // ResizeObserver catches layout/size changes resize events miss (font load, // emulated viewports, the lg breakpoint flipping the rail orientation). let ro; if ('ResizeObserver' in window && railRef.current) { ro = new ResizeObserver(updateMoreRight); ro.observe(railRef.current); } return () => { window.removeEventListener('resize', updateMoreRight); if (ro) ro.disconnect(); }; }, []); // One-time peek bounce: when the rail first scrolls into view on mobile, it // slides left ~52px and settles back, physically showing that it scrolls. // Driven frame-by-frame (no smooth-scroll API), once only, reduced-motion aware. const bounced = useRefSv(false); React.useLayoutEffect(() => { const rail = railRef.current; if (!rail || staticRender) return undefined; const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (reduce || !('IntersectionObserver' in window)) return undefined; const io = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (!entry.isIntersecting || bounced.current) return; if (rail.scrollWidth - rail.clientWidth < 40 || rail.scrollLeft > 4) { io.disconnect(); return; } bounced.current = true; io.disconnect(); const start = performance.now(); const DUR = 950; const tick = (now) => { const t = Math.min(1, (now - start) / DUR); // sine pulse out-and-back, eased rail.scrollLeft = Math.round(Math.sin(t * Math.PI) * 52); if (t < 1) requestAnimationFrame(tick); else { rail.scrollLeft = 0; updateMoreRight(); } }; requestAnimationFrame(tick); }); }, { threshold: 0.6 }); io.observe(rail); return () => io.disconnect(); }, [staticRender]); const select = (id) => { if (id === cat) return; clearTimeout(pendingT.current); setVisible(false); pendingT.current = setTimeout(() => { setCat(id); setVisible(true); }, dur); }; // Quick tiles and the header dropdown use this to open a category directly. // Scrolls to the explorer itself (not the section top) so the chosen // category's cards are the first thing in view, and pulses the active tab. React.useLayoutEffect(() => { window.__openService = (id) => { if (SERVICE_CATS.some((c) => c.id === id)) select(id); const el = document.getElementById('service-explorer'); if (el) scrollToY(el.getBoundingClientRect().top + window.pageYOffset - 96); clearTimeout(flashT.current); setFlash(true); flashT.current = setTimeout(() => setFlash(false), 1600); }; return () => { delete window.__openService; }; }); const active = SERVICE_CATS.find((c) => c.id === cat); const panelStyle = staticRender ? {} : { opacity: visible ? 1 : 0, transform: visible ? 'none' : 'translateY(8px)', transition: `opacity ${dur}ms ${EASE}, transform ${dur}ms ${EASE}`, }; return (

Our services

More than Wills: full estate planning

From a simple Will to trusts and Lasting Power of Attorney, our{' '} estate planning {' '}and{' '} legal services {' '}put the right protections in place for the people and things you care about.

{SWW_DISCLAIMER}

{/* Category explorer */}
{/* Category rail: vertical on desktop, horizontal scroll on mobile. Mobile affordance: tiles sized so the next one always peeks, plus a right-edge fade with a tappable chevron that hides at rail end. */}
{SERVICE_CATS.map((c) => (
select(c.id)} />
))}
{/* Left fade only (no button): signals scrolled-away tiles without clutter */} {/* Panel */}

{active.blurb}

{active.items.map((s) => )}
); } Object.assign(window, { Services });