// Shared shell: Nav, Footer, Placeholder, SectionHeader, helpers const { useState, useEffect, useRef, useMemo } = React; // expose hooks globally so separately-compiled babel scripts can use them window.useState = React.useState; window.useEffect = React.useEffect; window.useRef = React.useRef; window.useMemo = React.useMemo; window.useLayoutEffect = React.useLayoutEffect; const useLayoutEffect = React.useLayoutEffect; // ---------- helpers ---------- // Reveal uses a pure CSS entrance animation (.reveal in index.html) that always // ends visible — no scroll / IntersectionObserver dependency, so content can never // stay blank in any rendering context. function useReveal() { return useRef(null); } function Reveal({ children, delay = 0, as: Tag = 'div', className = '', style = {}, ...rest }) { return ( {children} ); } // ---------- placeholder visuals ---------- // Subtly-striped SVG placeholders, no AI-illustrated content function Placeholder({ label = 'editorial visual', tone = 'light', ratio = 1.25, style = {}, dense = false }) { // tone: light | dark | mid const palette = tone === 'dark' ? { bg: '#1A1A1A', stripe: 'rgba(255,255,255,0.045)', text: '#9A9CA0' } : tone === 'mid' ? { bg: '#2A2A2A', stripe: 'rgba(255,255,255,0.05)', text: '#B0B2B6' } : { bg: '#EFEEEA', stripe: 'rgba(0,0,0,0.04)', text: '#5E646B' }; const lineGap = dense ? 8 : 14; const lines = []; for (let i = 0; i < 60; i++) { lines.push(); } return (
{lines} {/* corner brackets */} {/* caption */}
↳ {label}
IMG / 01
); } function Bracket({ pos, color }) { const size = 14; const offset = 14; const styles = { tl: { top: offset, left: offset, borderTop: `1px solid ${color}`, borderLeft: `1px solid ${color}` }, tr: { top: offset, right: offset, borderTop: `1px solid ${color}`, borderRight: `1px solid ${color}` }, bl: { bottom: offset, left: offset, borderBottom: `1px solid ${color}`, borderLeft: `1px solid ${color}` }, br: { bottom: offset, right: offset, borderBottom: `1px solid ${color}`, borderRight: `1px solid ${color}` }, }; return
; } // editorial gridline visual — pure geometric, no graphics function GridArt({ tone = 'dark', label = 'visual structure', code = 'FIG. 01' }) { const isDark = tone === 'dark'; const bg = isDark ? '#1A1A1A' : '#EFEEEA'; const line = isDark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.10)'; const ink = isDark ? '#9A9CA0' : '#5E646B'; return (
{/* horizontal rules */} {[80, 200, 360, 540, 700].map(y => ( ))} {/* vertical column rules */} {[40, 160, 300, 440, 560].map(x => ( ))} {/* a single emphasized box */} {/* a thin diagonal accent */} {/* tiny circle marker */}
{code}
↳ {label}
N · 28°36′ E · 77°12′
); } // ---------- Logo ---------- function Logo({ size = 18, tone = 'ink' }) { const color = tone === 'ink' ? 'var(--ink)' : 'var(--ivory)'; return (
TD T D & Co.
); } // ---------- Nav ---------- function Nav({ route, navigate }) { const [open, setOpen] = useState(false); const [scrolled, setScrolled] = useState(false); const [expandedExpertise, setExpandedExpertise] = useState(false); const [expandedIndustries, setExpandedIndustries] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); const items = [ { id: 'home', label: 'Home' }, { id: 'about', label: 'About' }, { id: 'expertise', label: 'Expertise', hasMega: 'expertise' }, { id: 'industries', label: 'Industries', hasMega: 'industries' }, { id: 'insights', label: 'Insights' }, { id: 'contact', label: 'Contact' }, ]; return ( <>
navigate({ name: 'home' })} style={{ cursor: 'pointer' }}>
tdc.business
{/* Mega menu */} {(expandedExpertise || expandedIndustries) && (
{ setExpandedExpertise(false); setExpandedIndustries(false); }} style={{ position: 'absolute', top: 72, left: 0, right: 0, background: 'var(--ivory)', borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)', animation: 'pageEnter .25s ease both', }} >
{expandedExpertise ? '001' : '002'}
{expandedExpertise ? 'Expertise' : 'Industries'}

{expandedExpertise ? 'Specialised practice areas across cross-border tax, regulatory and advisory matters.' : 'Sector-specific advisory for globally connected businesses and capital.'}

)}
{/* Mobile drawer */} {open && (
{items.map((it, i) => ( { navigate({ name: it.id }); setOpen(false); }} style={{ display: 'flex', alignItems: 'baseline', gap: 12, padding: '20px 0', borderTop: '1px solid var(--hairline)' }}> {String(i + 1).padStart(2, '0')} {it.label} ))}
)} ); } // ---------- Footer ---------- function Footer({ navigate }) { return ( ); } // ---------- Section primitives ---------- function SectionHead({ num, kicker, title, lede, align = 'left' }) { return (
{num}
{kicker}

{title}

{lede && (

{lede}

)}
); } // page hero shared between expertise/industry detail pages function DetailHero({ kicker, num, title, lede, meta }) { return (
{num} / {kicker}

{title}

{lede && (

{lede}

)} {meta && (
{meta.map(([k, v]) => (
{k}
{v}
))}
)}
); } // ---------- Expose ---------- Object.assign(window, { useReveal, Reveal, Placeholder, GridArt, Bracket, Logo, Nav, Footer, SectionHead, DetailHero, });