/* global React, C7Logo, useTicker, Sparkline, Reveal, useReveal, Hairline, C7Button, QuoteCalculator */ // Prototype B — Performance / Fluxo // F1 energy. Liquidez como linhas em movimento. Mais cinético. const Core7Site = ({ lang = "pt", embedded = false }) => { const t = window.C7_COPY[lang]; const { price: ticker, trend } = useTicker(5.42, 0.005); const fmt = (n) => n.toLocaleString("pt-BR", { minimumFractionDigits: 4, maximumFractionDigits: 4 }); const [modalOpen, setModalOpen] = React.useState(false); const [quoteData, setQuoteData] = React.useState(null); const goToContact = (data) => { // Aceita só objeto de cotação válido (ignora MouseEvent quando o handler vem de onClick={goToContact}) if (data && typeof data === "object" && "side" in data && "amount" in data) { setQuoteData(data); } const el = document.getElementById("contact"); if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); }; return (
); }; const BackToTop = () => { const [show, setShow] = React.useState(false); React.useEffect(() => { // Encontra o container scrollável (artboard inner ou window) const findScrollContainer = () => { let el = document.getElementById("contact"); while (el && el !== document.body) { const overflowY = getComputedStyle(el).overflowY; if (overflowY === "auto" || overflowY === "scroll") return el; el = el.parentElement; } return window; }; const container = findScrollContainer(); const onScroll = () => { const y = container === window ? window.scrollY : container.scrollTop; setShow(y > 400); }; container.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => container.removeEventListener("scroll", onScroll); }, []); const handleClick = () => { let el = document.getElementById("contact"); let container = null; while (el && el !== document.body) { const overflowY = getComputedStyle(el).overflowY; if (overflowY === "auto" || overflowY === "scroll") {container = el;break;} el = el.parentElement; } if (container) container.scrollTo({ top: 0, behavior: "smooth" });else window.scrollTo({ top: 0, behavior: "smooth" }); }; return ( ); }; const NavP = ({ t, ticker, fmt, onQuote }) => { const [scrolled, setScrolled] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 40); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return ( ); }; const HeroP = ({ t, onQuote }) => { return (
{/* F1 background */}
{/* Gradient overlay para legibilidade do texto à esquerda */}
{/* Eyebrow */}
{t.hero.eyebrow}
{/* Big title */}

{t.hero.title_a} {t.hero.title_b}

{/* Sub + CTA */}

{t.hero.sub}

{t.hero.cta_primary} →
{/* Caption */}
{t.hero.hero_caption}
); }; const FlowBackdrop = () => { // Linhas curvas animadas — liquidez/velocidade const [t, setT] = React.useState(0); React.useEffect(() => { let raf; const start = performance.now(); const loop = (now) => { setT((now - start) / 1000); raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, []); const lines = 14; return ( {Array.from({ length: lines }).map((_, i) => { const offset = i / lines * 800; const phase = t * 0.4 + i * 0.4; const amp = 60 + Math.sin(phase * 0.7) * 30; const path = `M 0 ${offset} Q 400 ${offset + Math.sin(phase) * amp}, 800 ${offset + Math.sin(phase + 1) * amp * 0.6} T 1600 ${offset}`; return ( ); })} ); }; const TickerStripP = () => { const [prices, setPrices] = React.useState({ USDTBRL: { price: 5.4218, prev: 5.4218 }, BTCUSDT: { price: 71420, prev: 71420 }, ETHUSDT: { price: 3884, prev: 3884 } }); React.useEffect(() => { let cancelled = false; const symbols = ["USDTBRL", "BTCUSDT", "ETHUSDT"]; const fetchAll = async () => { try { const results = await Promise.all( symbols.map((s) => fetch(`https://api.binance.com/api/v3/ticker/price?symbol=${s}`).then((r) => r.json()) ) ); if (cancelled) return; setPrices((prev) => { const next = { ...prev }; results.forEach((r, i) => { const sym = symbols[i]; const newPrice = parseFloat(r.price); if (!isNaN(newPrice)) { next[sym] = { price: newPrice, prev: prev[sym].price }; } }); return next; }); } catch (e) {/* mantém valores anteriores */} }; fetchAll(); const id = setInterval(fetchAll, 7000); return () => { cancelled = true; clearInterval(id); }; }, []); const arrow = (cur, prev) => cur > prev ? "▲" : cur < prev ? "▼" : "●"; const fmtBRL = (n) => n.toFixed(4); const fmtBig = (n) => n.toLocaleString("en-US", { maximumFractionDigits: 0 }); const items = [ `USDT/BRL ${fmtBRL(prices.USDTBRL.price)} ${arrow(prices.USDTBRL.price, prices.USDTBRL.prev)}`, "USDT/USD 0.9998 ●", `BTC/USDT ${fmtBig(prices.BTCUSDT.price)} ${arrow(prices.BTCUSDT.price, prices.BTCUSDT.prev)}`, `ETH/USDT ${fmtBig(prices.ETHUSDT.price)} ${arrow(prices.ETHUSDT.price, prices.ETHUSDT.prev)}`, "SETTLEMENT ≤ 5 min", "DESK ACTIVE 24H"]; return (
{[...items, ...items, ...items].map((x, i) => {x} )}
); }; const LivePanelSection = ({ t, ticker, trend, fmt }) => { const [ref, shown] = useReveal(); const [flashClass, setFlashClass] = React.useState(""); const prevPrice = React.useRef(ticker); const [animatedPrice, setAnimatedPrice] = React.useState(0); const book = useOrderBook(); // Count-up entrance: anima de 0 até ticker quando entra em view React.useEffect(() => { if (!shown) return; const start = performance.now(); const duration = 1400; const target = ticker; let raf; const tick = (t) => { const p = Math.min(1, (t - start) / duration); const eased = 1 - Math.pow(1 - p, 3); setAnimatedPrice(target * eased); if (p < 1) raf = requestAnimationFrame(tick);else setAnimatedPrice(null); // libera para o ticker live }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); // eslint-disable-next-line react-hooks/exhaustive-deps }, [shown]); // Flash green/red quando o ticker oscila (após o entrance acabar) React.useEffect(() => { if (animatedPrice !== null) return; // ainda animando entrance const diff = ticker - prevPrice.current; if (Math.abs(diff) > 0.0001) { setFlashClass(diff > 0 ? "c7-flash-up" : "c7-flash-down"); const id = setTimeout(() => setFlashClass(""), 700); prevPrice.current = ticker; return () => clearTimeout(id); } }, [ticker, animatedPrice]); const displayPrice = animatedPrice !== null ? animatedPrice : ticker; return (
{t.hero.ticker_label}
LIVE
R$ {fmt(displayPrice)}
{(() => { const bidStr = book.bid > 0 ? `R$ ${fmt(book.bid)}` : `R$ ${fmt(ticker - 0.012)}`; const askStr = book.ask > 0 ? `R$ ${fmt(book.ask)}` : `R$ ${fmt(ticker + 0.014)}`; const spreadStr = book.spread > 0 ? `${book.spread.toFixed(2)}%` : "0.48%"; return [["BID", bidStr], ["ASK", askStr], ["SPREAD", spreadStr]]; })().map(([k, v]) =>
{k}
{v}
)}
); }; const LivePanel = ({ t, ticker, fmt }) => { return (
{t.hero.ticker_label}
● LIVE
R$ {fmt(ticker)}
{[ ["BID", `R$ ${fmt(ticker - 0.012)}`], ["ASK", `R$ ${fmt(ticker + 0.014)}`], ["SPREAD", "0.48%"]]. map(([k, v]) =>
{k}
{v}
)}
); }; const MetricsP = ({ t }) => { const [hoverIdx, setHoverIdx] = React.useState(null); const [isMobile, setIsMobile] = React.useState(false); React.useEffect(() => { const mq = window.matchMedia("(max-width: 768px)"); const update = () => setIsMobile(mq.matches); update(); mq.addEventListener ? mq.addEventListener("change", update) : mq.addListener(update); return () => { mq.removeEventListener ? mq.removeEventListener("change", update) : mq.removeListener(update); }; }, []); return (
{t.metrics.map((m, i) => { const isHover = hoverIdx === i; return (
!isMobile && setHoverIdx(i)} onMouseLeave={() => !isMobile && setHoverIdx(null)} onClick={() => isMobile && setHoverIdx(isHover ? null : i)} style={{ padding: "8px 32px", borderLeft: i === 0 ? "none" : "1px solid rgba(255,255,255,0.08)", position: "relative", cursor: isMobile && m.d ? "pointer" : "default", transform: isHover ? "scale(1.04)" : "scale(1)", transformOrigin: "left center", transition: "transform 0.4s cubic-bezier(0.22,1,0.36,1), filter 0.4s ease" }}> {/* Glow background */}
{/* "+" / "×" indicator — só visível no mobile via CSS */} {m.d && + }
{m.v}
{m.l}
{/* Descrição que aparece com fade-in */} {m.d &&
{m.d}
}
); })}
); }; const AboutP = ({ t }) => { return (
{/* Eyebrow no canto superior esquerdo */}
{t.about.eyebrow}
{/* Conteúdo centralizado */}

{t.about.title}

{t.about.body.split("\n\n").map((para, i) =>

{para}

)}

{t.about.body2}

); }; const ProcessP = ({ t, onQuote }) => { const containerRef = React.useRef(null); const [activeStep, setActiveStep] = React.useState(-1); // lineProgress[i]: 0..1 preenchimento da linha entre step i e i+1 const [lineProgress, setLineProgress] = React.useState([0, 0, 0]); const animRefs = React.useRef([null, null, null]); const progressRef = React.useRef([0, 0, 0]); const animLine = (idx, target, dur = 800) => { if (animRefs.current[idx]) cancelAnimationFrame(animRefs.current[idx]); const start = performance.now(); const from = progressRef.current[idx]; const tick = (now) => { const p = Math.min(1, (now - start) / dur); const ease = p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2; const val = from + (target - from) * ease; progressRef.current[idx] = val; setLineProgress((prev) => {const c = [...prev];c[idx] = val;return c;}); if (p < 1) animRefs.current[idx] = requestAnimationFrame(tick); }; animRefs.current[idx] = requestAnimationFrame(tick); }; const handleEnter = (i) => { setActiveStep(i); // Linhas anteriores: completas instantaneamente for (let k = 0; k < i; k++) { if (animRefs.current[k]) cancelAnimationFrame(animRefs.current[k]); progressRef.current[k] = 1; setLineProgress((prev) => {const c = [...prev];c[k] = 1;return c;}); } // Linha atual (i → i+1): só anima se não for o último box if (i < 3) animLine(i, 1, 900); // Linhas seguintes: resetam para 0 for (let k = i + 1; k < 3; k++) { if (animRefs.current[k]) cancelAnimationFrame(animRefs.current[k]); progressRef.current[k] = 0; setLineProgress((prev) => {const c = [...prev];c[k] = 0;return c;}); } }; const handleLeave = () => { setActiveStep(-1); // Resetar TODAS as linhas ao sair, para que a próxima entrada recomece do zero for (let k = 0; k < 3; k++) { if (animRefs.current[k]) cancelAnimationFrame(animRefs.current[k]); progressRef.current[k] = 0; } setLineProgress([0, 0, 0]); }; // Calcula posições das caixas para desenhar SVG const BOX = 72; const GAP = 24; const COLS = 4; // Vamos usar SVG posicionado sobre o grid, com viewBox dinâmica // Cada coluna ocupa 1/4. O centro do box fica em col*25% + 12.5% - metade do box return (
{/* Eyebrow no canto superior esquerdo */}
{t.process.eyebrow}
{/* Layout: título + steps à esquerda, calculadora à direita */}

{t.process.title}
{/* SVG overlay para as 3 linhas animadas */} {[0, 1, 2].map((idx) => { // Linha vai do lado direito do box idx até o lado esquerdo do box idx+1 // Cada coluna = 25% da largura. Box tem 72px. Gap entre colunas = 24px. // x1 = col_idx_start + 72px, x2 = col_(idx+1)_start // Em % relativo ao container: col i começa em i*25% + i*gap/totalWidth // Simplificamos: usamos calc() no SVG via foreignObject não é possível // Usamos porcentagens aproximadas: col i center ~ (i + 0.5) * 25% // Box right ~ col_start + 72/(containerWidth) — usamos valor fixo visual // Melhor abordagem: posicionar linhas entre centros dos boxes mas recuadas const colW = 25; // % por coluna const boxPct = 5; // 72px ~ 5% de 1440px const gapPct = 1.67; // 24px ~ 1.67% de 1440px const x1 = idx * colW + boxPct + gapPct * idx; const x2 = (idx + 1) * colW + gapPct * (idx + 1); const lineW = x2 - x1; return ( {/* Trilho base */} {/* Linha animada */} 0.02 ? "url(#glow-line)" : "none"} /> {/* Ponto brilhante na ponta */} {lineProgress[idx] > 0.02 && lineProgress[idx] < 0.98 && } ); })} {/* Grid dos steps */}
{t.process.steps.map((s, i) =>
handleEnter(i)} onMouseLeave={handleLeave}> = i || lineProgress[Math.max(0, i - 1)] >= 0.95} />

{s.t}

{s.d}

)}
{/* Calculadora à direita */}
); }; const ProcBox = ({ label, active, lit }) =>
{/* Aura glow prata */}
{/* Box */}
{label}
; const FaqP = ({ t }) => { const [open, setOpen] = React.useState(0); const items = t.faq && t.faq.items || []; return (
{t.faq && t.faq.eyebrow}

{t.faq && t.faq.title}
{items.map((it, i) =>
setOpen(open === i ? -1 : i)} style={{ borderBottom: "1px solid rgba(255,255,255,0.08)", padding: "28px 4px", cursor: "pointer", transition: "background 0.3s" }}>

{it.q}

+

{it.a}

 )}
); }; const ContactP = ({ t, lang = "pt", quoteData = null }) => { return (
{t.contact.eyebrow}

{t.contact.title}

{t.contact.sub}

{t.contact.direct}
suporte@core7cap.com
+55 27 99265 9494
); }; const ContactFormP = ({ t, lang = "pt", quoteData = null }) => { const [submitted, setSubmitted] = React.useState(false); const [sending, setSending] = React.useState(false); const [error, setError] = React.useState(""); const [personType, setPersonType] = React.useState("pj"); const buildQuoteMsg = (q) => { if (!q) return ""; const isEn = lang === "en"; const fmt2 = (n, d = 2) => n.toLocaleString("pt-BR", { minimumFractionDigits: d, maximumFractionDigits: d }); const side = q.side === "buy" ? (isEn ? "Buy USDT" : "Comprar USDT") : (isEn ? "Sell USDT" : "Vender USDT"); const sendLabel = isEn ? "Send" : "Envio"; const recvLabel = isEn ? "Receive" : "Recebimento"; const rateLabel = isEn ? "Rate" : "Taxa"; const midLabel = isEn ? "Ref. rate" : "Câmbio ref."; const spreadLabel= isEn ? "Spread" : "Spread"; return [ `[${isEn ? "Quote" : "Cotação"}: ${side}]`, `${sendLabel}: ${q.side === "buy" ? "R$ " + fmt2(q.amount, 2) : fmt2(q.amount, 4) + " USDT"}`, `${recvLabel}: ${q.side === "buy" ? fmt2(q.receive, 4) + " USDT" : "R$ " + fmt2(q.receive, 2)}`, `${rateLabel} C7: R$ ${fmt2(q.c7Rate, 4)}`, `${midLabel}: R$ ${fmt2(q.mid, 4)}`, `${spreadLabel}: ${(q.spreadPct * 100).toFixed(2)}%`, ].join("\n"); }; const [data, setData] = React.useState(() => ({ name: "", company: "", email: "", ticket: "USD 100k – 500k", msg: buildQuoteMsg(quoteData) })); // Atualiza a msg se quoteData chegar depois (via scroll do QuoteCalculator) React.useEffect(() => { if (quoteData) { setData(prev => ({ ...prev, msg: buildQuoteMsg(quoteData) })); } }, [quoteData]); const [hcaptchaToken, setHcaptchaToken] = React.useState(""); // Honeypot — campo invisível para bots const [website, setWebsite] = React.useState(""); const captchaRef = React.useRef(null); const captchaContainerId = React.useRef("hcaptcha-" + Math.random().toString(36).slice(2)); const widgetIdRef = React.useRef(null); const [showCaptcha, setShowCaptcha] = React.useState(false); // Guarda os dados validados aguardando o captcha const pendingSubmit = React.useRef(false); // Renderiza o widget hCaptcha uma única vez, na primeira vez que showCaptcha vira true const captchaRendered = React.useRef(false); React.useEffect(() => { if (!showCaptcha || captchaRendered.current) return; const tryRender = () => { if (window.hcaptcha && document.getElementById(captchaContainerId.current)) { widgetIdRef.current = window.hcaptcha.render(captchaContainerId.current, { sitekey: "50b2fe65-b00b-4b9e-ad62-3ba471098be2", theme: "dark", callback: (token) => setHcaptchaToken(token), "expired-callback": () => setHcaptchaToken(""), "error-callback": () => setHcaptchaToken(""), }); captchaRendered.current = true; } else { setTimeout(tryRender, 300); } }; tryRender(); }, [showCaptcha]); // Dispara o envio automaticamente assim que o token chegar React.useEffect(() => { if (hcaptchaToken && pendingSubmit.current) { pendingSubmit.current = false; doSend(hcaptchaToken); } }, [hcaptchaToken]); const set = (k) => (e) => { setError(""); let v = e.target.value; if (k === "msg" && v.length > 1000) v = v.slice(0, 1000); setData({ ...data, [k]: v }); }; const hasLink = (text) => { if (!text) return false; return [/https?:\/\//i, /www\./i, /\b[a-z0-9-]+\.(com|net|org|io|co|br|xyz|info|biz|ru|cn|tk|ml|ga|cf|me|dev|app|link)\b/i].some((p) => p.test(text)); }; const validate = () => { if (!data.name.trim()) return t.err_name; if (!data.email.trim()) return t.err_email; if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) return t.err_email_invalid; if (personType === "pj" && !data.company.trim()) return t.err_company; if (data.msg.length > 1000) return t.err_msg_long; if (hasLink(data.msg)) return t.err_msg_link; return null; }; const resetCaptcha = () => { setShowCaptcha(false); setHcaptchaToken(""); pendingSubmit.current = false; if (widgetIdRef.current !== null && window.hcaptcha) { try { window.hcaptcha.reset(widgetIdRef.current); } catch (e) {} } }; const doSend = async (token) => { setSending(true); setError(""); try { const payload = { access_key: "14e01ea5-a0d5-495c-937a-5dbe337d2b94", subject: `[Core 7 Capital] Novo contato — ${data.name}${personType === "pj" && data.company ? ` (${data.company})` : ""}`, from_name: "Core 7 Capital — Site", replyto: data.email, "Nome": data.name, "E-mail": data.email, "Tipo": personType === "pj" ? "Empresa" : "Pessoa física", "Empresa": data.company || "-", "Ticket": data.ticket, "Mensagem": data.msg || "(sem mensagem)", "Idioma": lang.toUpperCase(), "botcheck": website, "h-captcha-response": token, }; const res = await fetch("https://api.web3forms.com/submit", { method: "POST", headers: { "Content-Type": "application/json", "Accept": "application/json" }, body: JSON.stringify(payload), }); const result = await res.json(); if (result.success) { setSubmitted(true); } else { setError(result.message || t.err_send); resetCaptcha(); } } catch (ex) { setError(t.err_send); resetCaptcha(); } finally { setSending(false); } }; const handleSubmit = async (e) => { e.preventDefault(); const err = validate(); if (err) { setError(err); return; } setError(""); pendingSubmit.current = true; setShowCaptcha(true); }; if (submitted) { return (
{t.success_title}

{t.success_sub}

); } const inputStyle = { width: "100%", background: "rgba(0,0,0,0.4)", border: "1px solid rgba(255,255,255,0.10)", padding: "16px 18px", fontFamily: "var(--c7-font-display)", fontSize: 16, color: "var(--c7-white)", outline: "none", fontWeight: 300, boxSizing: "border-box" }; const tabBtn = (active) => ({ flex: 1, padding: "12px 16px", background: active ? "rgba(255,255,255,0.06)" : "transparent", border: "1px solid rgba(255,255,255,0.10)", color: active ? "var(--c7-platinum)" : "var(--c7-silver-1)", fontFamily: "var(--c7-font-mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", cursor: "pointer", transition: "all 0.2s" }); return (
{/* Honeypot */} setWebsite(e.target.value)} tabIndex={-1} autoComplete="off" aria-hidden="true" style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0 }} /> {/* PF / PJ toggle */}
{t.person_type}
{personType === "pj" && }