/* ============================================================ Digital Odyssey, reusable section blocks ServiceCard · CaseCard · FaqAccordion · Testimonials ProcessSteps · IndustriesGrid · LogoStrip ============================================================ */ /* ---------- Service card ---------- */ function ServiceCard({ s, index, showPoints = false, href = 'services.html' }) { const [h, setH] = React.useState(false); return ( setH(true)} onMouseLeave={() => setH(false)} style={{ padding: 32, display: 'flex', flexDirection: 'column', transitionDelay: `${index % 3 * 70}ms`, position: 'relative', overflow: 'hidden' }}>
{s.tag}

{s.name}

{s.short}

{showPoints && }
Learn more
); } /* ---------- Case study cover (designed, no stock photo) ---------- */ function CaseCover({ c, height = 200 }) { const base = `hsl(${c.hue} 70% 52%)`,deep = `hsl(${c.hue + 18} 78% 34%)`; return (
{c.client[0]}
{c.thumb ? c.thumb[0] : c.metrics[0][0]} {(c.thumb ? c.thumb[1] : null) && {c.thumb[1]}}
{c.services.map((s) => {s} )}
); } /* ---------- Case card ---------- */ function CaseCard({ c, index = 0, onOpen }) { const handle = onOpen ? (e) => {e.preventDefault();onOpen(c);} : undefined; return (
{c.industry}

{c.client}

{c.summary}.

{c.metrics.slice(0, 2).map(([v, l]) =>
{v}
{l}
)}
); } /* ---------- FAQ accordion ---------- */ function FaqAccordion({ items, defaultOpen = 0 }) { const [open, setOpen] = React.useState(defaultOpen); return (
{items.map(([q, a], i) => { const isOpen = open === i; return (

{a}

); })}
); } /* ---------- Testimonials (auto-rotating + manual) ---------- */ function TestimonialCard({ t }) { return (
{Array.from({ length: t.stars }).map((_, i) => )}

"{t.quote}"

{t.name.split(' ').map((n) => n[0]).slice(0, 2).join('')}
{t.name}
{t.role}
); } function TestimonialCarousel({ items }) { const [i, setI] = React.useState(0); const [paused, setPaused] = React.useState(false); React.useEffect(() => { if (paused) return; const t = setInterval(() => setI((p) => (p + 1) % items.length), 5500); return () => clearInterval(t); }, [paused, items.length]); return (
setPaused(true)} onMouseLeave={() => setPaused(false)}>
{items.map((t, idx) =>
)}
{items.map((_, idx) => )}
); } const navBtnStyle = { width: 44, height: 44, borderRadius: 9999, border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }; /* ---------- Process steps ---------- */ function ProcessSteps({ steps }) { return (
{steps.map((p, i) =>
{p.n}

{p.title}

{p.body}

)}
); } /* ---------- Industries grid ---------- */ function IndustriesGrid({ items }) { return (
{items.map((it, i) =>

{it.name}

{it.body}

)}
); } /* ---------- Client logo strip (wordmark placeholders) ---------- */ const CLIENT_LOGOS = ['Evansdale Medical Clinic', 'Feurmann', 'Accelus Robotics', 'Dunluce Medical Clinic', 'Allendale Medical Clinic', 'Tamarack Medical Clinic', 'Griesbach Medical Clinic', 'Aster Medical Clinic']; function LogoStrip({ dark = false }) { const row = [...CLIENT_LOGOS, ...CLIENT_LOGOS, ...CLIENT_LOGOS]; const color = dark ? 'rgba(255,255,255,.55)' : 'var(--text-3)'; const edge = dark ? 'var(--navy-deep)' : 'var(--page-bg)'; return (
{row.map((n, i) => = CLIENT_LOGOS.length} style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 21, letterSpacing: '-0.5px', color, opacity: .85, whiteSpace: 'nowrap', display: 'inline-flex', alignItems: 'center', gap: 52 }}> {n} )}
); } /* ---------- Inner-page hero (compact dark header) ---------- */ function PageHero({ eyebrow, title, body, children, align = 'left', aside = null }) { const center = align === 'center'; const hasAside = aside && !center; return (
{eyebrow &&
{eyebrow}
}

{title}

{body &&

{body}

} {children &&
{children}
}
{hasAside &&
{aside}
}
); } /* ---------- Orbiting service-icon cluster (services hero visual) ---------- */ function ServiceOrbit() { const icons = ['target', 'play', 'sparkles', 'layers', 'megaphone', 'pen-tool', 'search', 'bar-chart']; const ring1 = icons.slice(0, 5),ring2 = icons.slice(5); const node = (name, i, total, radius, dur, dir) => { const angle = i / total * 360; return (
); }; return (
{/* rings */}
{/* glow */}
{/* center mark */}
{/* orbiting nodes */} {ring1.map((n, i) => node(n, i, ring1.length, 150, 36, 'cw'))} {ring2.map((n, i) => node(n, i, ring2.length, 78, 26, 'ccw'))}
); } /* ---------- Minimal service-icon tile grid with a travelling highlight ---------- */ function ServiceTiles() { const tiles = [ ['target', 'Performance'], ['play', 'AI Video'], ['sparkles', 'AI Dashboards'], ['layers', 'Web'], ['megaphone', 'Social'], ['pen-tool', 'Content'], ['image', 'Design'], ['film', 'Video'], ['search', 'SEO'], ]; const [active, setActive] = React.useState(0); React.useEffect(() => { const t = setInterval(() => setActive((a) => (a + 1) % tiles.length), 1100); return () => clearInterval(t); }, []); return (
{tiles.map(([icon, label], i) => { const on = i === active; return (
{label}
); })}
); } Object.assign(window, { ServiceCard, CaseCover, CaseCard, FaqAccordion, TestimonialCard, TestimonialCarousel, ProcessSteps, IndustriesGrid, LogoStrip, PageHero, ServiceOrbit, ServiceTiles });