// EngagementPage — Smart Engagement product detail page. // Composes: Nav → Hero → Problem → 5 Tools (with mini visuals) → Pipeline → CaseStudy → FAQ → FooterCTA → Footer const { useState: useES, useEffect: useEE } = React; // --------------------------------------------------------------------------- // HERO // --------------------------------------------------------------------------- function EngagementHero({ t }) { return (
{/* LEFT */}
{t.hero.eyebrow}

{t.hero.h1Pre} {t.hero.h1Accent}

{t.hero.sub}

{t.hero.cta}
{/* stats row */}
{t.hero.stats.map((s, i) => (
{s.value}
{s.label}
))}
{/* RIGHT — WhatsApp conversation visual */}
); } function EngagementHeroVisual() { return (
); } function Bubble({ kicker, kickerColor, text, incoming }) { return (
{kicker && (
{kicker}
)}
{text}
); } function BubbleOut({ text, time }) { return (
{text}
{time && (
{time}
)}
); } // --------------------------------------------------------------------------- // PROBLEM // --------------------------------------------------------------------------- function EngagementProblem({ t }) { const p = t.problem; return (
{p.eyebrow}

{p.h2Pre} {p.h2Accent}

{p.body}

{p.stats.map((s, i) => (
{s.value}
{s.label}
))}
); } // --------------------------------------------------------------------------- // TOOLS — 5 deep panels // --------------------------------------------------------------------------- function EngagementTools({ t }) { const tt = t.tools; return (
{tt.eyebrow}

{tt.h2Pre} {tt.h2Accent}

{tt.sub}

{tt.items.map((it, i) => ( ))}
); } function ToolPanel({ tool, index }) { const reverse = index % 2 === 1; return (
{/* color glow */}
{/* COPY */}
{tool.kicker}
{tool.title}

{tool.body}

    {tool.features.map((f, i) => (
  • {f}
    • ))}
{/* VISUAL */}
); } // per-tool mini visual function ToolVisual({ id, color }) { if (id === "reminders") return ; if (id === "reviews") return ; if (id === "recovery") return ; if (id === "waitlist") return ; if (id === "recall") return ; return null; } function VisualShell({ children, height = 280 }) { return (
{children}
); } function RemindersVisual({ color }) { return (
REMINDER TIMELINE · SARA C.
{[ { t: "T-24h", channel: "WhatsApp", status: "delivered" }, { t: "T-12h", channel: "—", status: "skipped (confirmed)" }, { t: "T-2h", channel: "WhatsApp", status: "delivered" } ].map((step, i) => (
{step.t} {step.channel} {step.status}
))}
Confirmed at T-24h + 12s
); } function ReviewsVisual({ color }) { return (
GOOGLE REVIEWS · LAST 30 DAYS
4.9 ★★★★★ +31 new
{/* mini distribution bars */} {[5, 4, 3, 2, 1].map((s, i) => { const pct = [82, 12, 4, 1, 1][i]; return (
{s}★
{pct}%
); })} ); } function RecoveryVisual({ color }) { return (
CANCELLATION → RECOVERY · LIVE
CANCELLED 10:00 · Marco R. · Checkup
−€120 in jeopardy
↓ 12 PRIORITY PATIENTS MATCHED IN 8s
10:00 · Paola N. · Checkup
RECOVERED · 4 min 12s · +€120
 ); } function WaitlistVisual({ color }) { const rows = [ { name: "Paola N.", since: "3d", service: "Checkup", match: 96 }, { name: "Giulia M.", since: "2d", service: "Hygiene", match: 88 }, { name: "Andrea L.", since: "5d", service: "Checkup", match: 82 }, { name: "Sofia R.", since: "1d", service: "Hygiene", match: 74 } ]; return (
ACTIVE WAITLIST · 47 PATIENTS RANKED BY MATCH
{rows.map((r, i) => (
{r.name}
{r.service} · waiting {r.since}
{r.match}%
))}
); } function RecallVisual({ color }) { return (
DORMANT PATIENT SCAN · THIS WEEK
{[ { name: "Elisa F.", last: "6 mo ago", service: "Checkup", status: "Re-booked" }, { name: "Marco T.", last: "4 mo ago", service: "Hygiene", status: "Reached" } ].map((r, i) => (
{r.name.split(" ").map(n => n[0]).join("")}
{r.name} · {r.service}
last visit {r.last}
{r.status.toUpperCase()}
))}
); } function Mini({ value, label, color }) { return (
{value}
{label.toUpperCase()}
); } // --------------------------------------------------------------------------- // PAGE ROOT // --------------------------------------------------------------------------- function EngagementPage() { const lang = (typeof window !== "undefined" && window.__sonaroLang) || "en"; const dict = (window.CONTENT && window.CONTENT[lang]) || window.CONTENT.en; const t = dict.engagementPage; return (
); } Object.assign(window, { EngagementPage });