// ── Content sections ────────────────────────────────────────
function Section({ children, glow, noTopBorder, style, className = "" }) {
// glow: subtle warm radial wash from the top (gold, very faint) — keeps
// section heads feeling premium without competing with CTA color.
return (
{children}
);
}
// Editorial section head: oversized ghosted serif numeral behind a
// premium eyebrow tag, headline and optional sub-paragraph.
function SectionHead({ tag, n, title, sub, titleStyle, align = "left" }) {
return (
{n && (
{n}
)}
{tag}
{sub &&
{sub}
}
);
}
// ── TICKER ──
function Ticker() {
const items = ["Imersão Mundo China · 24 e 25 de Junho de 2026 · Alphaville", "Com Soong · direto da China", "+100 milhões importados", "Negocie mais perto da fonte", "Preparação para a feira de outubro"];
const loop = [...items, ...items];
return (
{loop.map((t, i) => (
❖{t}
))}
);
}
// Accent presets for icon-led cards. Reds re-tuned to imperial crimson
// (Cinnabar) for the high-ticket Asia/luxury palette; cool cyan kept
// only as a soft accent option, not used for primary tagging.
const ACC = {
red: { fg: "#B83232", line: "#8C1F1F", soft: "rgba(140,31,31,0.10)" },
gold: { fg: "var(--go-4)", line: "var(--go)", soft: "rgba(var(--go-rgb),0.08)" },
green:{ fg: "#34D399", line: "#10B981", soft: "rgba(16,185,129,0.07)" },
cyan: { fg: "#67E8F9", line: "#06B6D4", soft: "rgba(6,182,212,0.07)" },
};
// Premium editorial card for a high-end event: gold metallic hairline
// (the VIP "ticket" thread), ghosted gold index numeral, dot + line-icon +
// tracked kicker + fading rule, confident Syne title. No chunky chips.
function IconCard({ icon, kicker, tone = "red", num, title, children }) {
const a = ACC[tone];
const [h, setH] = React.useState(false);
return (
);
}
// ── PAIN ──
const PAINS = [
{ ic: "layers", t: "O intermediário invisível", d: "Distribuidores e fornecedores brasileiros já compraram antes de você. Cada elo no caminho cobra a sua parte, e ela sai direto da sua margem." },
{ ic: "trending-down", t: "A margem comprimida", d: "Você vende bem, mas compra mal. O lucro que deveria ser seu fica espalhado entre os atravessadores até a mercadoria chegar nas suas mãos." },
{ ic: "eye-off", t: "Pouca clareza sobre fornecedores", d: "Você não sabe quem está por trás do produto: fábrica, trading ou revendedor? Sem essa leitura, não dá pra comprar com estratégia." },
{ ic: "handshake", t: "Falta de negociação direta", d: "Sem acesso à fonte, você aceita o preço que te dão. Negociar direto muda o jogo, mas exige entender como a China funciona." },
{ ic: "calendar-x", t: "Despreparo para as oportunidades", d: "A maior feira de fornecedores do mundo acontece em outubro. Chegar lá sem preparação é desperdiçar a melhor janela do ano." },
];
function Pain() {
return (
{PAINS.map((p, i) => (
{p.d}
))}
);
}
// ── TURN (a virada) — editorial interlude band, no chapter number ──
function Turn() {
return (
A oportunidade não está só em vender mais. Está em comprar melhor.
Para quem já tem demanda, produto, loja ou operação, entender a China muda a forma de comprar, negociar e planejar crescimento. É aí que a margem volta para o seu lado.
);
}
// reusable card with hover lift + soft accent wash (no flat left-border)
function HoverCard({ accent, children, surface = "var(--surface)", pad = "24px" }) {
const [h, setH] = React.useState(false);
return (
);
}
// ── EXPERIENCE ("O que você vai viver") ──
const STEPS = [
{ t: "Enxergar oportunidades de compra", d: "Onde estão as oportunidades reais de compra, e o que separa um bom negócio de uma armadilha cara." },
{ t: "Pensar fornecedores e fábricas", d: "Como enxergar fábricas e fornecedores por trás dos produtos que você já vende, em vez de aceitar o primeiro intermediário." },
{ t: "Fugir dos intermediários", d: "O caminho para chegar mais perto da fonte e parar de pagar a margem de quem comprou antes de você." },
{ t: "Se preparar para negociar", d: "Como chegar à negociação com clareza: o que perguntar, o que exigir e o que nunca aceitar." },
{ t: "Pedidos, amostras e volume", d: "Como funcionam pedidos, amostras e compras em volume, e o que avaliar antes de fechar." },
{ t: "Logística e chegada no Brasil", d: "Como pensar logística, importação e a chegada da mercadoria ao Brasil sem travar no caminho." },
{ t: "Preparação para a feira de outubro", d: "Como se preparar para a maior feira de fornecedores do mundo, em outubro, chegando lá sabendo o que procurar." },
{ t: "Networking entre empresários", d: "Troca direta com empresários, compradores e participantes que vivem o mesmo desafio que você." },
];
function Experience({ onCta }) {
// Very subtle calligraphy backdrop that gently warms up on hover.
const [hovers, setHovers] = React.useState(0);
const bump = () => setHovers((h) => Math.min(h + 1, 6));
const opacity = Math.min(0.04 + hovers * 0.014, 0.13);
return (
{STEPS.map((s, i) => (
{String(i + 1).padStart(2, "0")}
{s.t}
{s.d}
))}
);
}
// ── AUDIENCE (for / not for) ──
function Audience() {
const yes = ["Já vende produtos físicos ou tem operação rodando", "Já compra de fornecedores ou distribuidores brasileiros", "Sente que a sua margem poderia ser bem maior", "Quer negociar mais perto da fonte, sem intermediário", "Quer se preparar para a feira de fornecedores de outubro", "Busca networking e quer aprender com quem mora na China"];
const no = ["Procura promessa de dinheiro fácil", "Quer fórmula mágica, sem estratégia", "Não está disposto a estudar compra e negociação", "Ainda não tem interesse real em produtos ou fornecedores"];
// Left (yes) column: brighter cream text, full saturation. Right
// (no) column: legible soft cream-grey — the brief specifically asked
// we lift contrast there but keep visual hierarchy lower than yes.
const Col = ({ head, items, color, mark, accent, strike, textColor, bg }) => (
