/* global React, window */
// Sections for the Dolado lean premium homepage.
// All sections take `t` (translated copy block) and `theme`.
// Components export to window.DoladoSections for app.jsx to consume.
const { useState, useEffect, useRef, useMemo, useCallback } = React;
/* ============================================================
Hook — IntersectionObserver reveal
============================================================ */
function useReveal() {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add("in");
io.unobserve(e.target);
}
});
},
{ threshold: 0.12 }
);
el.querySelectorAll(".reveal").forEach((n) => io.observe(n));
return () => io.disconnect();
}, []);
return ref;
}
/* ============================================================
LogoMarquee — infinite-scroll logo carousel
Duplicates the list and translates -50% so the loop is seamless.
Pauses on hover. Theme-aware monochrome via CSS.
============================================================ */
function LogoMarquee({ items, speed = 40, itemWidth = 220, dense = false }) {
// Duplicate for seamless loop. Three copies keeps it smooth even
// when the list is short (8 funds × 3 = 24 cells visible at any time).
const looped = [...items, ...items, ...items];
// Resolve logo path through window.__resources for standalone HTML bundles
// (the bundler maps each declared resource id to a blob URL at runtime).
const resolveSrc = (p) =>
(typeof window !== "undefined" && window.__resources && window.__resources[p]) || p;
return (
{looped.map((it, i) => (
))}
);
}
/* ============================================================
Hook — count-up
============================================================ */
function useCountUp(target, { duration = 1200, decimals = 0 } = {}) {
const [val, setVal] = useState(0);
const ref = useRef(null);
const started = useRef(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting && !started.current) {
started.current = true;
const start = performance.now();
const tick = (now) => {
const t = Math.min(1, (now - start) / duration);
const eased = 1 - Math.pow(1 - t, 3);
setVal(eased * target);
if (t < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
}
});
}, { threshold: 0.4 });
io.observe(el);
return () => io.disconnect();
}, [target, duration]);
return [val, ref];
}
/* ============================================================
NAV
============================================================ */
function Nav({ t, lang, setLang, theme, openModal }) {
return (
e.preventDefault()}>
{theme === "dark" ? "Operating layer / live" : "Operating layer · live"}
setLang("en")}
aria-pressed={lang === "en"}
>EN
setLang("pt")}
aria-pressed={lang === "pt"}
>PT
{t.nav.cta}
);
}
/* ============================================================
HERO
============================================================ */
function HeroSparkline() {
// Simple SVG sparkline tracking GMV-style data.
const points = [4, 7, 5, 9, 8, 11, 10, 14, 13, 17, 16, 20, 19, 23];
const max = Math.max(...points);
const w = 320, h = 28;
const step = w / (points.length - 1);
const path = points
.map((p, i) => `${i === 0 ? "M" : "L"} ${i * step} ${h - (p / max) * (h - 4) - 2}`)
.join(" ");
return (
);
}
function Hero({ t, openModal, currentHeadlineIdx }) {
const headline = t.hero.headlines[currentHeadlineIdx % t.hero.headlines.length];
// Animate the headline word-by-word? No — system says headlines arrive once, fade + slide. Use a simple cross-fade keyed by headline.
return (
{t.hero.status.label} · {t.hero.status.value}
{t.hero.status.meta}
{t.hero.eyebrow}
{(() => {
const parts = headline.split(/(Agentic Commerce|Agentic|agentes|agents|Agentic Era|comércio guiado por IA|AI-driven commerce|próxima interface|next commerce interface)/);
return parts.map((p, i) =>
/Agentic|agents|agentes|AI-driven|guiado|interface/.test(p) ? (
{p}
) : (
{p}
)
);
})()}
{t.hero.sub}
{t.hero.trust.map((x, i) => {x} )}
{t.proof.clients.label}
{t.proof.clients.more}
);
}
/* ============================================================
POSITIONING
============================================================ */
function Positioning({ t }) {
const ref = useReveal();
return (
{t.positioning.eyebrow}
{t.positioning.title}
{t.positioning.arc.map((step, i) => (
{step.phase}
{step.verb}.
{step.body}
{i < 2 &&
→
}
))}
{t.positioning.kicker}
);
}
/* ============================================================
CORE BUSINESS
============================================================ */
function CoreBusiness({ t }) {
const ref = useReveal();
const [active, setActive] = useState(0);
const pillars = t.core.pillars;
const current = pillars[active];
return (
{t.core.eyebrow}
{t.core.title}
{t.core.lede}
{/* Tab rail */}
{pillars.map((p, i) => (
setActive(i)}
>
{p.n}
{p.name}
›
))}
{/* Active detail */}
{current.n}
{current.name}
{current.claim}
DLDO
{t.core.ownsLabel}
{current.owns.map((o, i) => (
{o}
))}
{t.core.replacesLabel}
{current.replaces}
{current.metric.label}
{current.metric.value}
{t.core.authority.label}
{t.core.authority.lead}{" "}
{t.core.authority.punch}
);
}
/* ============================================================
AGENTIC COMMERCE — with live prompt mockup
============================================================ */
function PromptMockup({ data }) {
const [active, setActive] = useState(0);
const [typed, setTyped] = useState("");
const [phase, setPhase] = useState("typing"); // typing | done
const current = data.prompts[active];
// Typewriter effect for the query, then reveal answer.
useEffect(() => {
setPhase("typing");
setTyped("");
const q = current.q;
let i = 0;
let cancelled = false;
const tick = () => {
if (cancelled) return;
if (i <= q.length) {
setTyped(q.slice(0, i));
i += 1;
const jitter = 14 + Math.random() * 24;
setTimeout(tick, jitter);
} else {
setPhase("done");
}
};
tick();
return () => { cancelled = true; };
}, [active, current.q]);
return (
{data.label}
{data.prompts.map((p, i) => (
setActive(i)}
>{p.category}
))}
user_q
{typed}
{phase === "typing" &&
{phase === "done" && (
agent · recommends
{current.answer.map((rec, i) => (
{String(i + 1).padStart(2, "0")}
{rec.brand}
{rec.line}
{rec.reason}
{rec.price}
))}
)}
{data.caption}
);
}
function AgenticCommerce({ t }) {
const ref = useReveal();
return (
{t.agentic.eyebrow}
{t.agentic.title}{t.agentic.title2}
{t.agentic.lede}
{t.agentic.pillars.map((p, i) => (
))}
{t.agentic.kicker}
);
}
/* ============================================================
READINESS — sample report card
============================================================ */
function ReportCard({ sample }) {
const ref = useRef(null);
const [visible, setVisible] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
setVisible(true);
io.disconnect();
}
});
}, { threshold: 0.3 });
io.observe(el);
return () => io.disconnect();
}, []);
return (
{sample.title}
live
{sample.score}/100
{sample.scoreLabel}
{sample.bands.slice().reverse().map((b, i) => {b.label} )}
{sample.breakdown.map((d, i) => (
))}
Dolado · Readiness Index™
v2.4
);
}
function Readiness({ t, openModal }) {
const ref = useReveal();
return (
{t.readiness.eyebrow}
{t.readiness.product}
{t.readiness.title}
);
}
/* ============================================================
WHY
============================================================ */
function Why({ t }) {
const ref = useReveal();
return (
{t.why.eyebrow}
{t.why.title}
{t.why.lede}
{t.why.body}
stamp
{t.why.stamp}
);
}
/* ============================================================
PROOF — stats + marketplaces + cases
============================================================ */
function AnimatedKpi({ kpi, prefix, suffix }) {
// Parse numeric portion; preserve thousand separators ("5,000" or "5.000").
const parsed = parseFloat(String(kpi).replace(/[,\.]/g, ""));
const isNumeric = !isNaN(parsed) && parsed > 0;
const [val, ref] = useCountUp(isNumeric ? parsed : 0);
const formatted = useMemo(() => {
if (!isNumeric) return kpi;
// Match formatting of source string
const v = Math.round(val);
if (/[,]/.test(String(kpi))) {
return v.toLocaleString("en-US");
}
if (/[\.]/.test(String(kpi))) {
return v.toLocaleString("de-DE");
}
return String(v);
}, [val, kpi, isNumeric]);
return (
{prefix && {prefix} }
{formatted}
{suffix && {suffix} }
);
}
function Proof({ t }) {
const ref = useReveal();
return (
{t.proof.eyebrow}
{t.proof.title}
{t.proof.stats.map((s, i) => (
))}
Operated marketplaces
{t.proof.marketplaces.map((m, i) => {m} )}
);
}
/* ============================================================
SOCIAL PROOF — clients + press band right under the hero
============================================================ */
function SocialProof({ t }) {
const ref = useReveal();
return (
{t.proof.press.eyebrow}
{t.proof.press.title}
);
}
/* ============================================================
BACKERS — investor showcase
============================================================ */
function Backers({ t }) {
const ref = useReveal();
return (
{t.backers.eyebrow}
{t.backers.title}
{t.backers.sub}
{t.backers.funds.map((f, i) => (
{String(i + 1).padStart(2, "0")}
{f.name}
{f.thesis}
))}
);
}
/* ============================================================
LAB
============================================================ */
function Lab({ t, openModal }) {
const ref = useReveal();
return (
{t.lab.eyebrow}
{t.lab.product}
{t.lab.product}
{t.lab.title}
{t.lab.positioning}
{t.lab.facts.label}
{t.lab.facts.items.map((f, i) => (
{f.label}
{f.value}
))}
{t.lab.personasLabel}
{t.lab.personas.map((p, i) => (
))}
Included
{t.lab.includes.map((x, i) => {x} )}
{t.lab.outcomes.eyebrow}
{t.lab.outcomes.label}
{t.lab.outcomes.items.map((o, i) => (
{o.n}
{o.meta}
{o.name}
{o.body}
))}
);
}
// We don't truly have a `lang` here for the cohort dt labels — the cohort dl uses static-ish labels.
// Simple helper: returns the first (we'll always pass EN for these short labels).
function lang_safe(en, pt) { return en; }
/* ============================================================
FINAL CTA
============================================================ */
function FinalCta({ t, openModal }) {
const ref = useReveal();
return (
);
}
/* ============================================================
FOOTER
============================================================ */
function Footer({ t }) {
return (
);
}
/* ============================================================
MODAL — Executive Diagnosis lead form
============================================================ */
function Modal({ t, open, onClose }) {
const [form, setForm] = useState({ name: "", email: "", role: "", brand: "", gmv: "", notes: "" });
const [submitted, setSubmitted] = useState(false);
const closeBtnRef = useRef(null);
useEffect(() => {
if (open && closeBtnRef.current) closeBtnRef.current.focus();
const onKey = (e) => { if (e.key === "Escape" && open) onClose(); };
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [open, onClose]);
// Reset when re-opening after submit
useEffect(() => {
if (open) {
setTimeout(() => setSubmitted(false), 0);
}
}, [open]);
if (!open) return null;
const handleSubmit = (e) => {
e.preventDefault();
setSubmitted(true);
};
const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });
return (
e.stopPropagation()}>
×
{submitted ? (
) : (
<>
Executive · by invitation
{t.modal.title}
{t.modal.sub}
)}
);
}
/* ============================================================
Export
============================================================ */
Object.assign(window, {
DoladoSections: {
Nav, Hero, SocialProof, Positioning, CoreBusiness, AgenticCommerce, Readiness, Why, Proof, Backers, Lab, FinalCta, Footer, Modal,
},
});
})
))}