// Page sections. const { useState: useS, useEffect: useE, useRef: useR } = React; // ========== NAV ========== function Nav({ t, lang, setLang }) { return (
Sonaro
{/* language switcher — navigates between root (EN) and /it (IT), sets a cookie so the geo-redirect middleware respects the choice. */} {t.nav.cta}
); } const navLinkStyle = { textDecoration: "none", color: "var(--fg-ink)", fontSize: 14, fontWeight: 500, letterSpacing: "-0.005em" }; // ========== HERO (dark) ========== function Hero({ t }) { const cycle = t.hero.h1Cycle || []; const [hIdx, setHIdx] = useS(0); useE(() => { if (cycle.length <= 1) return; const id = setInterval(() => setHIdx(i => (i + 1) % cycle.length), 3900); return () => clearInterval(id); }, [cycle.length]); const phrase = cycle[hIdx] || cycle[0] || { pre: "", word: "" }; return (
{/* (no asymmetric hero-wide ambient — keep only the card halo so the glow stays even on every side of the animation) */}
{/* LEFT — copy */}
{t.hero.eyebrow}

{" "} p.word)} activeIdx={hIdx} />

{t.hero.sub}

{t.hero.primaryCta}
{/* trust microstrip */}
    {t.hero.trustStrip.map((item, i) => (
  • {item}
    • ))}
{/* RIGHT — agenda card. Glow is now a tight rectangular rim around the card (via box-shadow on the card itself + a small radial that hugs the card outline) — no more big circular bloom. */}
{/* soft rectangular rim halo — hugs the card outline */}
); } // Cross-fade prefix (animates only when the prefix value actually changes). function RotatingPrefix({ pre, hIdx }) { const lastPre = useR(pre); const [animKey, setAnimKey] = useS(0); useE(() => { if (lastPre.current !== pre) { lastPre.current = pre; setAnimKey(k => k + 1); } }, [pre]); return ( {pre} ); } // Slot-machine word that scrolls vertically through the cycle. function RotatingWord({ words, activeIdx }) { const lh = 1.2; // wider line-box so glyph descenders (g, y, p, j) don't bleed past the clip return ( {words.map((w, i) => ( {w} ))} ); } // ========== PRODUCT SPLIT (light, two big router cards) ========== function ProductSplit({ t }) { return (
{t.split.eyebrow}

{t.split.h2Pre} {t.split.h2Accent}

{t.split.sub}

); } function ProductCard({ data, variant, anchor, kind, href }) { const isDark = variant === "dark"; const fg = isDark ? "var(--fg-cream)" : "var(--fg-ink)"; const muted = isDark ? "var(--muted-cream)" : "var(--muted-ink)"; const border = isDark ? "var(--border-dark)" : "var(--border-light)"; const accent = isDark ? "var(--accent-teal)" : "var(--accent-blue)"; const surface = isDark ? "rgba(255,255,255,0.04)" : "var(--bg-cream)"; const PreviewVisual = kind === "voice" ? VoiceCardMini : SESCardMini; return (
{ e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = isDark ? "0 30px 60px -25px rgba(0,0,0,0.5)" : "0 30px 60px -25px rgba(11,15,20,0.18)"; }} onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "none"; }} >
{/* header: eyebrow + name */}
{data.product}
{data.name}

{data.kicker}

{/* mini preview visual */}
{/* problem framing */}
PROBLEM {data.problem}
{/* big outcome stat */}
{data.statBig}
{data.statSmall}
{/* outcome bullets */}
{/* CTA */}
{data.cta}
); } // Mini preview visuals — lightweight, decorative variants of the hero previews function VoiceCardMini() { return (
ON CALL 00:42
); } function SESCardMini() { return (
WHATSAPP · STUDIO BIANCHI 09:14
Slot just opened tomorrow at 10:00. Confirm with one tap?
✓ Confirmed
); } // ========== WHY SONARO (light, single panel) ========== function WhySonaro({ t }) { const w = t.why; return (
{/* corner glow */}
{/* left: copy */}
{w.eyebrow}

{w.h2Pre} {w.h2Accent}

{w.body}

{w.tags.map((tag, i) => ( {tag} ))}
{/* right: stylized clinic glyph */}
); } // Stylized clinic visual: three orbiting circles with workflow icons, // echoing the Sonaro logo's overlapping-disc shape language. function WhyVisual() { return (
{/* concentric rings */}
{/* center clinic mark */}
{/* satellite pills around the ring */} {[ { angle: -90, icon: , label: "Calls", color: "var(--cat-blue)" }, { angle: -30, icon: , label: "WhatsApp", color: "var(--cat-teal)" }, { angle: 30, icon: , label: "Agenda", color: "var(--cat-purple)" }, { angle: 90, icon: , label: "Reviews", color: "var(--cat-green)" }, { angle: 150, icon: , label: "Recall", color: "var(--soft-emerald-fg)" }, { angle: 210, icon: , label: "Intake", color: "var(--accent-blue)" } ].map((sat, i) => { const r = 50; // radius % from center along the ring const x = 50 + r * Math.cos((sat.angle * Math.PI) / 180); const y = 50 + r * Math.sin((sat.angle * Math.PI) / 180); return (
{sat.icon} {sat.label}
); })}
); } // ========== INTEGRATIONS STRIP (dark, continues hero, infinite carousel) ========== function IntegrationsStrip({ t }) { // Repeat the base set enough times to overflow any reasonable viewport, // then duplicate the full track so the -50% loop is seamless. const baseRepeated = []; for (let i = 0; i < 4; i++) baseRepeated.push(...t.hero.integrations); const items = [...baseRepeated, ...baseRepeated]; return (
{t.hero.integrationsEyebrow}
{items.map((it, idx) => { const baseLen = t.hero.integrations.length; const isLast = (idx % baseLen) === baseLen - 1; // Items can be either a letter mark (legacy + the "+ Your PMS" // placeholder at the end) or a logo image path. Logos render // larger inside the chip to read at carousel speed. const hasLogo = !!it.logo; return (
{hasLogo ? ( {it.name} ) : it.mark} {it.name}
); })}
); } // ========== DASHBOARD SNAPSHOT (dark) ========== function DashboardSnapshot({ t }) { const d = t.dashboard; return (
{d.eyebrow}

{d.h2Pre} {d.h2Accent}

{d.sub}

{/* browser-chrome card */}
{/* chrome */}
{d.browserUrl}
{d.live}
{/* body */}
{d.header}
{/* hero stat */}
{d.recovered}
€ 3.820
+22% {d.vsLast}
{/* sparkline */}
{/* tile grid */}
{d.tiles.map((tile, i) => )}
{d.footnote} Sync 60s
); } function DashTile({ tile }) { const flavors = { "cat-blue": { bg: "#EFF6FF", fg: "#1D4ED8", chip: "#DBEAFE" }, "cat-teal": { bg: "#ECFEFA", fg: "#0F766E", chip: "#CCFBF1" }, "cat-purple": { bg: "#F5F3FF", fg: "#6D28D9", chip: "#EDE9FE" }, "cat-green": { bg: "#ECFDF5", fg: "#047857", chip: "#D1FAE5" }, "soft-rose": { bg: "#FDE2E2", fg: "#B91C1C", chip: "#FECACA" }, "soft-amber": { bg: "#FCE7C8", fg: "#C2410C", chip: "#FED7AA" } }; const f = flavors[tile.flavor] || flavors["cat-blue"]; return (
{tile.label}
{tile.value}
{tile.delta}
); } function Sparkline() { // simple climbing line const pts = [10, 18, 14, 22, 19, 28, 24, 36, 32, 44, 40, 54]; const w = 220, h = 56; const max = Math.max(...pts); const d = pts.map((v, i) => { const x = (i / (pts.length - 1)) * w; const y = h - (v / max) * h * 0.85 - 4; return `${i === 0 ? "M" : "L"} ${x.toFixed(1)} ${y.toFixed(1)}`; }).join(" "); return ( ); } // ========== FAQ ========== function FAQ({ t }) { return (
{t.faq.eyebrow}

{t.faq.h2}

{t.faq.items.map((item, i) => (
{item.q}
{item.a}
))}
); } // ========== FOOTER CTA (dark, single CTA) ========== function FooterCTA({ t }) { return (
{t.footerCta.eyebrow}

{t.footerCta.h2Pre} {t.footerCta.h2Accent}

{t.footerCta.sub}

); } // ========== FOOTER ========== function Footer({ t }) { return ( ); } Object.assign(window, { Nav, Hero, IntegrationsStrip, ProductSplit, WhySonaro, DashboardSnapshot, FAQ, FooterCTA, Footer });