/* ─── Checkout page component ─────────────────────────────── */ /* Pixel-perfect port of the Checkout.html prototype into the Studio React SPA. Reads product data from window.PRODUCTS and checkout-specific copy from window.CHECKOUT_DATA[id]. */ /* ─── Checkout colors (themed via CSS custom properties) ──── */ const coPaper = "var(--coPaper)"; const coPaper2 = "var(--coPaper2)"; const coInk = "var(--coInk)"; const coInk2 = "var(--coInk2)"; const coInk3 = "var(--coInk3)"; const coRule = "var(--coRule)"; const coRuleS = "var(--coRuleS)"; const coJade = "var(--coJade)"; const coJadeBg = "var(--coJadeBg)"; const coTerra = "var(--coTerra)"; const coTerraBg = "var(--coTerraBg)"; const coGold = "var(--coGold)"; const coSerif = '"Fraunces", Georgia, serif'; const coSans = '"Inter", system-ui, sans-serif'; const coMono = '"JetBrains Mono", ui-monospace, monospace'; /* ─── Safe markup renderer (replaces dangerouslySetInnerHTML) ─── */ /* Only processes , , tags — all else stays escaped text */ function safeMarkup(str) { if (!str) return null; var parts = str.split(/(<\/?(?:em|b|strong)>)/); var result = []; var tag = null; for (var i = 0; i < parts.length; i++) { var p = parts[i]; if (p === "" || p === "" || p === "") { tag = p === "" ? "em" : "b"; continue; } if (p === "" || p === "" || p === "") { tag = null; continue; } if (!p) continue; result.push(tag ? React.createElement(tag, { key: i }, p) : p); } return result; } /* ─── SVG icon paths (inline) ─────────────────────────────── */ const coIcons = { book: "M4 4h12a4 4 0 0 1 4 4v12H8a4 4 0 0 1-4-4V4z|M4 16a4 4 0 0 1 4-4h12", file: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z|M14 2v6h6|M9 13h6|M9 17h6", user: "M12 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8z|M4 21v-2a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v2", list: "M3 3h18v4H3z|M3 11h18v4H3z|M3 19h18v2H3z", check: "M12 12a9 9 0 1 0 0-18 9 9 0 0 0 0 18z|M9 12l2 2 4-4", refresh: "M21 12a9 9 0 1 1-9-9|M21 4v8h-8", shield: "M12 1l8 4v6c0 5-3.5 9.5-8 11-4.5-1.5-8-6-8-11V5l8-4z|M9 12l2 2 4-4", lock: "M5 11h14v10a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V11z|M8 11V7a4 4 0 0 1 8 0v4", tick: "M5 13l4 4L19 7", grid: "M4 4h16v16H4z|M4 9h16|M9 4v16", clock: "M12 12a10 10 0 1 0 0-20 10 10 0 0 0 0 20z|M12 6v6l4 2", plus: "M2 12h20|M12 2v20", }; const CoIcon = ({ name, size = 18, color = coInk3 }) => { const paths = (coIcons[name] || coIcons.book).split("|"); return React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, style: { width: size, height: size, flexShrink: 0 } }, paths.map((d, i) => d.includes("a") || d.includes("A") ? React.createElement("path", { key: i, d }) : d.startsWith("M12 12a") || d.startsWith("M12 8a") ? React.createElement("circle", { key: i, cx: 12, cy: d.includes("8a") ? 8 : 12, r: parseInt(d.match(/(\d+)\s/)?.[1] || 9) }) : React.createElement("path", { key: i, d }) )); }; /* ─── Checkout i18n ───────────────────────────────────────── */ const CO_I18N = { en: { secureCheckout: "Secure checkout · 256-bit SSL", freeDelivery: "Instant digital delivery", whyNow: "Why this matters now", whatsInside: "What's inside the", bundle: "bundle", totalWorth: "Total worth", yoursToday: "Yours today", fromReaders: "From readers who used it", honestAnswers: "Honest answers", yourOrder: "Your order", secure: "Secure", subtotal: "Subtotal", launchDiscount: "Launch discount", vat: "VAT", included: "included", total: "Total", emailLabel: "Email address", emailPh: "you@example.com", firstName: "First name", firstNamePh: "Jane", lastName: "Last name", lastNamePh: "Smith", payMethod: "Payment method", stripeSecure: "Secure payment powered by Stripe", stripeReady: "Card details are handled securely by Stripe. Your data never touches our servers.", getAccess: "Get instant access", terms: "By placing this order you agree to the", termsLink: "terms", privacyLink: "privacy policy", noSub: "One-time charge. No subscription.", processing: "Processing…", viewers: "readers are viewing this page right now", ssl: "256-bit SSL", refund: "refund", instantDl: "Instant download", freeUpdates: "Free updates", verifiedPurchase: "verified purchase", videoReview: "video review", dayPromise: "Day Promise", backToCatalog: "← Catalog", day: "Day", days: "Days", hours: "Hours", min: "Min", }, pt: { secureCheckout: "Checkout seguro · SSL 256-bit", freeDelivery: "Entrega digital imediata", whyNow: "Por que isso importa agora", whatsInside: "O que está dentro do", bundle: "pacote", totalWorth: "Valor total", yoursToday: "Seu hoje", fromReaders: "De leitores que usaram", honestAnswers: "Respostas honestas", yourOrder: "Seu pedido", secure: "Seguro", subtotal: "Subtotal", launchDiscount: "Desconto de lançamento", vat: "Impostos", included: "incluído", total: "Total", emailLabel: "Endereço de email", emailPh: "voce@email.com", firstName: "Nome", firstNamePh: "Maria", lastName: "Sobrenome", lastNamePh: "Silva", payMethod: "Método de pagamento", stripeSecure: "Pagamento seguro via Stripe", stripeReady: "Os dados do cartão são processados com segurança pelo Stripe. Seus dados nunca passam pelos nossos servidores.", getAccess: "Acesso imediato", terms: "Ao fazer este pedido você concorda com os", termsLink: "termos", privacyLink: "política de privacidade", noSub: "Cobrança única. Sem assinatura.", processing: "Processando…", viewers: "leitores estão vendo esta página agora", ssl: "SSL 256-bit", refund: "reembolso", instantDl: "Download imediato", freeUpdates: "Atualizações grátis", verifiedPurchase: "compra verificada", videoReview: "depoimento em vídeo", dayPromise: "Dias de Garantia", backToCatalog: "← Catálogo", day: "Dia", days: "Dias", hours: "Horas", min: "Min", }, es: { secureCheckout: "Pago seguro · SSL 256-bit", freeDelivery: "Entrega digital inmediata", whyNow: "Por qué importa ahora", whatsInside: "Qué incluye el", bundle: "paquete", totalWorth: "Valor total", yoursToday: "Tuyo hoy", fromReaders: "De lectores que lo usaron", honestAnswers: "Respuestas honestas", yourOrder: "Tu pedido", secure: "Seguro", subtotal: "Subtotal", launchDiscount: "Descuento de lanzamiento", vat: "IVA", included: "incluido", total: "Total", emailLabel: "Correo electrónico", emailPh: "tu@email.com", firstName: "Nombre", firstNamePh: "María", lastName: "Apellido", lastNamePh: "García", payMethod: "Método de pago", stripeSecure: "Pago seguro con Stripe", stripeReady: "Los datos de la tarjeta se procesan de forma segura por Stripe. Tus datos nunca pasan por nuestros servidores.", getAccess: "Acceso inmediato", terms: "Al realizar este pedido aceptas los", termsLink: "términos", privacyLink: "política de privacidad", noSub: "Cobro único. Sin suscripción.", processing: "Procesando…", viewers: "lectores están viendo esta página ahora", ssl: "SSL 256-bit", refund: "reembolso", instantDl: "Descarga inmediata", freeUpdates: "Actualizaciones gratis", verifiedPurchase: "compra verificada", videoReview: "reseña en vídeo", dayPromise: "Días de Garantía", backToCatalog: "← Catálogo", day: "Día", days: "Días", hours: "Horas", min: "Min", }, }; const useCoI18n = (lang) => (key) => CO_I18N[lang]?.[key] || CO_I18N.en[key] || key; /* ─── Checkout styles ─────────────────────────────────────── */ const co = { /* top strip */ topStrip: { background: coInk, color: coPaper, fontSize: 12, padding: "8px 24px", display: "flex", justifyContent: "center", gap: 24, alignItems: "center", letterSpacing: "0.02em" }, pulse: { width: 6, height: 6, borderRadius: "50%", background: coJade, display: "inline-block", marginRight: 4 }, topSep: { opacity: 0.4 }, /* header */ coHeader: { padding: "18px 32px", display: "flex", justifyContent: "space-between", alignItems: "center", borderBottom: `1px solid ${coRule}` }, brandMark: { width: 40, height: 40, background: "#1a1f1c", color: "#f6f4ee", display: "grid", placeItems: "center", borderRadius: 4, fontFamily: coSerif, fontWeight: 400, fontSize: 28, lineHeight: 1, letterSpacing: -1 }, brandName: { fontFamily: coSerif, fontSize: 18, letterSpacing: "-0.3px" }, brandSub: { display: "block", fontFamily: '"JetBrains Mono", ui-monospace, monospace', fontSize: 9, fontWeight: 400, color: coInk3, letterSpacing: "2.2px", textTransform: "uppercase", marginTop: 4 }, secureBadge: { display: "flex", alignItems: "center", gap: 8, fontSize: 12, color: coInk2 }, /* layout */ checkout: { maxWidth: 1180, margin: "0 auto", padding: "32px 24px 64px", display: "grid", gridTemplateColumns: "minmax(0,1fr) 420px", gap: 48 }, left: { display: "flex", flexDirection: "column", gap: 24, minWidth: 0 }, right: { position: "sticky", top: 24, alignSelf: "start", display: "flex", flexDirection: "column", gap: 14 }, /* product card */ productCard: { display: "grid", gridTemplateColumns: "140px 1fr", gap: 24, alignItems: "start", padding: 24, background: coPaper2, border: `1px solid ${coRule}`, borderRadius: 8 }, coverImg: { width: "100%", height: "auto", display: "block", boxShadow: "0 8px 24px -8px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.08)", borderRadius: 2 }, metaCol: { display: "flex", flexDirection: "column", gap: 8 }, badge: { display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.08em", color: coJade, background: coJadeBg, padding: "4px 10px", borderRadius: 100, width: "fit-content" }, badgeDot: { width: 5, height: 5, borderRadius: "50%", background: coJade, display: "inline-block" }, prodTitle: { fontFamily: coSerif, fontSize: 26, lineHeight: 1.15, fontWeight: 600, letterSpacing: "-0.015em", color: coInk, margin: 0 }, prodSub: { color: coInk2, fontWeight: 500 }, byLine: { fontSize: 13, color: coInk3 }, byBold: { color: coInk, fontWeight: 600 }, specs: { display: "flex", gap: 18, fontSize: 12, color: coInk2, marginTop: 4, flexWrap: "wrap" }, specItem: { display: "flex", alignItems: "center", gap: 6 }, /* urgency banner */ lawBanner: { border: `1px solid ${coInk}`, borderRadius: 8, padding: "20px 22px", background: coInk, color: coPaper, display: "grid", gridTemplateColumns: "1fr auto", gap: 24, alignItems: "center" }, bannerLabel: { fontFamily: coMono, fontSize: 10, letterSpacing: "0.15em", textTransform: "uppercase", opacity: 0.6, marginBottom: 6 }, bannerH3: { fontFamily: coSerif, fontSize: 20, fontWeight: 500, lineHeight: 1.25, letterSpacing: "-0.01em", margin: 0 }, bannerEm: { color: "#c09a40", fontStyle: "normal", fontWeight: 600 }, /* section headers */ secH: { display: "flex", alignItems: "baseline", gap: 14, marginBottom: 14 }, secNum: { fontFamily: coMono, fontSize: 11, color: coInk3, letterSpacing: "0.1em" }, secTitle: { fontFamily: coSerif, fontSize: 22, fontWeight: 600, letterSpacing: "-0.015em", color: coInk, margin: 0 }, secRule: { flex: 1, height: 1, background: coRule, alignSelf: "center", marginLeft: 8 }, /* stats */ statsGrid: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }, statBox: { padding: 24, border: `1px solid ${coRule}`, borderRadius: 8, background: coPaper2 }, statAlert: { background: coTerraBg, borderColor: "#d9c0a8" }, statNum: { fontFamily: coSerif, fontSize: 64, fontWeight: 600, lineHeight: 0.95, letterSpacing: "-0.04em", color: coInk }, statNumAlert: { color: coTerra }, statSmall: { fontSize: 32, color: coInk3, fontWeight: 500 }, statLbl: { marginTop: 10, fontSize: 13, color: coInk2, lineHeight: 1.4 }, statSrc: { marginTop: 10, fontSize: 10, color: coInk3, fontFamily: coMono, letterSpacing: "0.05em", textTransform: "uppercase" }, statsIntro: { marginTop: 14, fontSize: 14, color: coInk2, lineHeight: 1.6 }, /* deliverables */ delBox: { border: `1px solid ${coRule}`, borderRadius: 8, overflow: "hidden", background: coPaper2 }, delHead: { padding: "14px 20px", borderBottom: `1px solid ${coRule}`, background: coPaper, display: "flex", justifyContent: "space-between", alignItems: "center" }, delHeadT: { fontFamily: coSerif, fontSize: 15, fontWeight: 600 }, delHeadV: { fontSize: 11, color: coInk3, fontFamily: coMono }, delRow: { display: "grid", gridTemplateColumns: "36px 1fr auto", gap: 14, padding: "16px 20px", borderBottom: `1px solid ${coRule}`, alignItems: "start" }, delRowLast: { borderBottom: "none" }, delIc: { width: 36, height: 36, borderRadius: 6, background: coPaper, border: `1px solid ${coRule}`, display: "grid", placeItems: "center", color: coInk2 }, delBody: { display: "flex", flexDirection: "column", gap: 3 }, delBodyB: { fontFamily: coSerif, fontSize: 15, fontWeight: 600, color: coInk }, delBodySpan: { fontSize: 13, color: coInk2, lineHeight: 1.4 }, delPrice: { fontFamily: coSerif, fontSize: 13, color: coInk3, textDecoration: "line-through", alignSelf: "center", textAlign: "right" }, delIncl: { display: "block", color: coJade, fontSize: 11, fontFamily: coSans, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.08em", textDecoration: "none" }, /* aggregate rating */ agg: { display: "flex", alignItems: "center", gap: 16, padding: "18px 22px", border: `1px solid ${coRule}`, borderRadius: 8, background: coPaper2, flexWrap: "wrap" }, aggBig: { fontFamily: coSerif, fontSize: 42, fontWeight: 600, lineHeight: 1, color: coInk }, aggStars: { color: coGold, fontSize: 14, letterSpacing: 2 }, aggCt: { fontSize: 12, color: coInk2 }, /* testimonials */ testGrid: { display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 14 }, testCard: { padding: 22, border: `1px solid ${coRule}`, borderRadius: 8, background: coPaper2, display: "flex", flexDirection: "column", gap: 14 }, testStars: { color: coGold, fontSize: 13, letterSpacing: 2 }, testQuote: { fontFamily: coSerif, fontSize: 17, lineHeight: 1.4, fontWeight: 500, color: coInk, letterSpacing: "-0.01em" }, testWho: { display: "flex", gap: 12, alignItems: "center", marginTop: "auto" }, testAvatar: { width: 38, height: 38, borderRadius: "50%", display: "grid", placeItems: "center", fontFamily: coSerif, fontWeight: 600, color: coInk2, fontSize: 14, flexShrink: 0, overflow: "hidden" }, testNm: { fontSize: 13, fontWeight: 600, color: coInk }, testLoc: { fontSize: 11, color: coInk3, fontFamily: coMono, letterSpacing: "0.04em" }, testVerified: { fontSize: 10, fontFamily: coMono, color: coJade, letterSpacing: "0.08em", textTransform: "uppercase", marginTop: -6 }, /* video testimonial */ vidTest: { position: "relative", borderRadius: 8, overflow: "hidden", border: `1px solid ${coRule}`, background: "linear-gradient(135deg, #8a7e5a, #5a4e36)", aspectRatio: "4/5", minHeight: 280, display: "flex", alignItems: "flex-end", padding: 18, color: "#fff" }, vidOverlay: { position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7))", pointerEvents: "none" }, vidPlay: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)", width: 64, height: 64, borderRadius: "50%", background: "rgba(255,255,255,0.95)", display: "grid", placeItems: "center", color: coInk }, vidMeta: { position: "relative", zIndex: 1, display: "flex", flexDirection: "column", gap: 4 }, vidNm: { fontFamily: coSerif, fontSize: 18, fontWeight: 600 }, vidQuote: { fontSize: 12, opacity: 0.95, lineHeight: 1.4, marginTop: 6, fontStyle: "italic" }, vidLoc: { fontFamily: coMono, fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", opacity: 0.7 }, /* WA + small testimonials row */ testRow2: { display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14, marginTop: 14 }, wa: { padding: 18, borderRadius: 10, background: "#e5ddd5", display: "flex", flexDirection: "column", gap: 8 }, waBubble: { background: "#dcf8c6", padding: "10px 12px", borderRadius: 8, maxWidth: "90%", fontSize: 14, lineHeight: 1.4, color: "#1a1a1a", alignSelf: "flex-end", boxShadow: "0 1px 1px rgba(0,0,0,0.05)" }, waBubbleTheirs: { background: "#fff", alignSelf: "flex-start" }, waTime: { fontSize: 9, color: "#667781", textAlign: "right", marginTop: 4 }, waCap: { fontSize: 11, color: coInk3, fontFamily: coMono, textAlign: "center", letterSpacing: "0.04em" }, testSm: { padding: 18, border: `1px solid ${coRule}`, borderRadius: 8, background: coPaper2, display: "flex", flexDirection: "column", gap: 10 }, testSmQuote: { fontFamily: coSerif, fontSize: 15, lineHeight: 1.4, color: coInk, fontWeight: 500 }, testSmWho: { display: "flex", gap: 10, alignItems: "center", marginTop: "auto" }, testSmAvatar: { width: 32, height: 32, borderRadius: "50%", display: "grid", placeItems: "center", fontFamily: coSerif, fontWeight: 600, color: coInk2, fontSize: 13, flexShrink: 0 }, testSmNm: { fontSize: 12, fontWeight: 600 }, testSmLoc: { fontSize: 10, color: coInk3, fontFamily: coMono }, /* guarantee */ guarantee: { display: "grid", gridTemplateColumns: "88px 1fr", gap: 20, alignItems: "center", padding: 22, border: `1px dashed ${coRuleS}`, borderRadius: 8, background: coPaper2 }, seal: { width: 88, height: 88, borderRadius: "50%", border: `2px solid ${coInk}`, display: "grid", placeItems: "center", textAlign: "center", fontFamily: coSerif, color: coInk, position: "relative" }, sealInner: { position: "absolute", inset: 6, border: `1px solid ${coInk}`, borderRadius: "50%", pointerEvents: "none" }, sealN: { fontSize: 32, fontWeight: 700, lineHeight: 1 }, sealD: { fontSize: 9, letterSpacing: "0.15em", textTransform: "uppercase", fontFamily: coSans, fontWeight: 600, marginTop: 2 }, guarH3: { fontFamily: coSerif, fontSize: 18, fontWeight: 600, marginBottom: 4, letterSpacing: "-0.01em" }, guarP: { fontSize: 13, color: coInk2, lineHeight: 1.5 }, /* FAQ */ faqBox: { border: `1px solid ${coRule}`, borderRadius: 8, overflow: "hidden" }, faqItem: { borderBottom: `1px solid ${coRule}` }, faqItemLast: { borderBottom: "none" }, faqSummary: { padding: "16px 20px", cursor: "pointer", fontFamily: coSerif, fontSize: 15, fontWeight: 600, color: coInk, display: "flex", justifyContent: "space-between", alignItems: "center", listStyle: "none", background: coPaper2, border: "none", width: "100%" }, faqPlus: { fontFamily: coSans, fontSize: 20, color: coInk3, fontWeight: 300, transition: "transform 0.2s", flexShrink: 0 }, faqPlusOpen: { transform: "rotate(45deg)" }, faqAnswer: { padding: "0 20px 18px", fontSize: 14, color: coInk2, lineHeight: 1.55 }, /* right: summary */ summary: { border: `1px solid ${coInk}`, borderRadius: 8, background: coPaper, overflow: "hidden" }, sumHead: { padding: "16px 20px", borderBottom: `1px solid ${coRule}`, display: "flex", justifyContent: "space-between", alignItems: "center", background: coPaper2 }, sumHeadH2: { fontFamily: coSerif, fontSize: 16, fontWeight: 600, margin: 0 }, sumLock: { fontSize: 11, color: coInk3, display: "flex", alignItems: "center", gap: 5, fontFamily: coMono, letterSpacing: "0.05em", textTransform: "uppercase" }, sumItem: { padding: "14px 20px", display: "grid", gridTemplateColumns: "1fr auto", gap: 8, borderBottom: `1px solid ${coRule}`, alignItems: "center" }, sumNm: { fontSize: 13, color: coInk }, sumNmSm: { display: "block", fontSize: 11, color: coInk3, fontFamily: coMono, marginTop: 2 }, sumPr: { fontFamily: coSerif, fontVariantNumeric: "tabular-nums", fontWeight: 600, fontSize: 14 }, sumPrFree: { color: coJade, fontSize: 11, fontFamily: coSans, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.08em" }, sumPrWas: { color: coInk3, textDecoration: "line-through", fontWeight: 500 }, sumTotals: { padding: "14px 20px", display: "flex", flexDirection: "column", gap: 8, borderBottom: `1px solid ${coRule}` }, sumRow: { display: "flex", justifyContent: "space-between", fontSize: 13, color: coInk2, fontVariantNumeric: "tabular-nums" }, sumDiscount: { color: coJade, fontWeight: 600 }, sumTotal: { fontFamily: coSerif, fontSize: 24, fontWeight: 700, color: coInk, paddingTop: 8, borderTop: `1px solid ${coRule}`, marginTop: 4, letterSpacing: "-0.02em" }, sumCurrency: { fontSize: 18, color: coInk3, fontWeight: 500 }, /* form */ form: { padding: "18px 20px", display: "flex", flexDirection: "column", gap: 12 }, label: { fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.08em", color: coInk2, display: "block", marginBottom: 5, fontFamily: coMono }, input: { width: "100%", border: `1px solid ${coRuleS}`, background: coPaper, padding: "11px 12px", borderRadius: 6, fontFamily: coSans, fontSize: 14, color: coInk, outline: "none" }, row2: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }, /* payment tabs */ payTabs: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6, marginBottom: 6 }, payTab: { border: `1px solid ${coRuleS}`, background: coPaper, padding: 8, borderRadius: 6, display: "grid", placeItems: "center", cursor: "pointer", height: 38, color: coInk2, fontSize: 11, fontWeight: 600, fontFamily: coSans }, payTabActive: { borderColor: coInk, background: coInk, color: coPaper }, /* Stripe placeholder */ stripePlaceholder: { border: `1.5px dashed ${coRuleS}`, borderRadius: 8, padding: "20px 16px", textAlign: "center", background: coPaper2 }, stripeLock: { display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8, fontSize: 13, fontWeight: 600, fontFamily: coSans, color: coInk2, marginBottom: 6 }, stripeMsg: { fontSize: 11, color: coInk3, lineHeight: 1.5, fontFamily: coSans }, /* CTA */ ctaBtn: { width: "100%", background: "#C8553D", color: "#FAF7F2", border: "none", padding: "18px 16px", borderRadius: 8, fontFamily: coSerif, fontSize: 18, fontWeight: 600, letterSpacing: "-0.01em", cursor: "pointer", display: "flex", justifyContent: "center", alignItems: "center", gap: 10 }, ctaMicro: { fontSize: 11, color: coInk3, textAlign: "center", marginTop: 10, lineHeight: 1.5 }, ctaBold: { color: coInk2 }, /* trust bar */ trust: { padding: "14px 20px", borderTop: `1px solid ${coRule}`, background: coPaper2, display: "flex", flexWrap: "wrap", gap: "14px 18px", fontSize: 11, color: coInk2 }, trustItem: { display: "flex", alignItems: "center", gap: 6 }, /* live viewers */ liveViewers: { padding: "10px 20px", background: "#ecf5e8", borderTop: `1px solid ${coRule}`, display: "flex", alignItems: "center", gap: 8, fontSize: 11, color: coInk2, fontFamily: coMono, letterSpacing: "0.04em" }, /* cover placeholder */ coverPlaceholder: { width: 140, aspectRatio: "3/4", background: "#e9e6db", backgroundImage: "repeating-linear-gradient(135deg, transparent 0, transparent 12px, rgba(0,0,0,0.025) 12px, rgba(0,0,0,0.025) 13px)", border: `1px solid ${coRule}`, borderRadius: 2, display: "flex", flexDirection: "column", justifyContent: "space-between", padding: 10, boxShadow: "0 8px 24px -8px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.08)" }, coverCat: { fontSize: 7, letterSpacing: 1, textTransform: "uppercase", color: coInk3 }, coverTitle: { fontFamily: coSerif, fontSize: 12, lineHeight: 1.15, color: coInk }, coverFoot: { display: "flex", justifyContent: "space-between", fontFamily: coMono, fontSize: 6, color: coInk3 }, /* footer */ coFooter: { borderTop: `1px solid ${coRule}`, padding: "28px 24px", display: "flex", justifyContent: "space-between", fontSize: 11, color: coInk3, fontFamily: coMono, letterSpacing: "0.04em", flexWrap: "wrap", gap: 14 }, footerLink: { color: coInk2, textDecoration: "none", marginRight: 14, cursor: "pointer" }, }; /* ─── FAQ Item (with toggle) ──────────────────────────────── */ const CoFaqItem = ({ q, a, isLast }) => { const [open, setOpen] = React.useState(false); return React.createElement("div", { style: { ...co.faqItem, ...(isLast ? co.faqItemLast : {}) } }, React.createElement("button", { style: co.faqSummary, onClick: () => setOpen(!open), }, React.createElement("span", null, q), React.createElement("span", { style: { ...co.faqPlus, ...(open ? co.faqPlusOpen : {}) } }, "+") ), open && React.createElement("div", { style: co.faqAnswer }, a) ); }; /* ─── Main Checkout Component ─────────────────────────────── */ const StudioCheckout = ({ product, products, onBack, onProduct, t: parentT, lang, isMobile, isTablet }) => { const p = product; const cd = (window.CHECKOUT_DATA || {})[p.id] || {}; const ct = useCoI18n(lang); const [buying, setBuying] = React.useState(false); const [buyError, setBuyError] = React.useState(null); /* ── Floating CTA on mobile: show once user scrolls past the sidebar CTA ── */ const [showFloatingCta, setShowFloatingCta] = React.useState(false); React.useEffect(function () { if (!isMobile) { setShowFloatingCta(false); return; } var onScroll = function () { setShowFloatingCta(window.scrollY > 500); }; window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return function () { window.removeEventListener("scroll", onScroll); }; }, [isMobile]); const handleBuy = async (e) => { e.preventDefault(); if (buying) return; setBuying(true); setBuyError(null); /* ── Kiwify redirect (if product is registered there) ── */ if (p.kiwifyUrl) { window.location.href = p.kiwifyUrl; return; } /* ── Stripe fallback ── */ try { const resp = await fetch("/api/create-checkout-session", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ productId: p.id }), }); const data = await resp.json(); if (!resp.ok || !data.url) throw new Error(data.error || "Payment error"); window.location.href = data.url; } catch (err) { setBuyError(err.message); setBuying(false); } }; const chapters = p.chapters || []; const currency = p.market === "ES" ? "EUR" : p.market === "BR" ? "BRL" : p.market === "UK" ? "GBP" : p.market === "AU" ? "AUD" : "USD"; return React.createElement(React.Fragment, null, /* ─── Top strip ─── */ React.createElement("div", { style: {...co.topStrip, ...(isMobile ? { padding: "8px 12px", gap: 8, fontSize: 11, flexWrap: "wrap" } : {})} }, React.createElement("span", { style: co.pulse }), React.createElement("span", null, React.createElement("b", null, cd.topStrip || p.title) ), React.createElement("span", { style: co.topSep }, "·"), React.createElement("span", null, ct("freeDelivery")) ), /* ─── Checkout header ─── */ React.createElement("header", { style: {...co.coHeader, ...(isMobile ? { padding: "14px 16px", flexWrap: "wrap", gap: 8 } : {})} }, React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 14 } }, React.createElement("div", { style: co.brandMark }, "A"), React.createElement("div", null, React.createElement("div", { style: co.brandName }, "Alvaro Abreu"), React.createElement("small", { style: co.brandSub }, p.category + " · " + p.market) ) ), React.createElement("div", { style: co.secureBadge }, React.createElement(CoIcon, { name: "shield", size: 14, color: coInk2 }), ct("secureCheckout") ) ), /* ─── Main checkout grid ─── */ React.createElement("main", { style: {...co.checkout, ...(isMobile ? { gridTemplateColumns: "1fr", gap: 24, padding: "20px 16px 100px" } : isTablet ? { gridTemplateColumns: "1fr", gap: 32, padding: "24px 24px 56px" } : {})} }, /* ====== LEFT COLUMN ====== */ React.createElement("section", { style: co.left }, /* ── Product card ── */ React.createElement("article", { style: {...co.productCard, ...(isMobile ? { gridTemplateColumns: "100px 1fr", gap: 16, padding: 16 } : {})} }, p.coverImg ? React.createElement("img", { src: p.coverImg, alt: p.title, style: { ...co.coverImg, ...(isMobile ? { width: 100 } : { width: 140 }) } }) : React.createElement("div", { style: {...co.coverPlaceholder, ...(isMobile ? { width: 100 } : {})} }, React.createElement("div", { style: co.coverCat }, p.category), React.createElement("div", { style: co.coverTitle }, p.title), React.createElement("div", { style: co.coverFoot }, React.createElement("span", null, "№ " + String(p.id).padStart(2, "0")), React.createElement("span", null, p.market) ) ), React.createElement("div", { style: co.metaCol }, React.createElement("span", { style: co.badge }, React.createElement("span", { style: co.badgeDot }), (p.formatVal || "PDF") + " · " + (p.lengthVal || "Digital ebook") ), React.createElement("h1", { style: co.prodTitle }, p.title), React.createElement("div", { style: co.byLine }, "by ", React.createElement("b", { style: co.byBold }, "Álvaro Abreu"), " · 2026 Edition" ), React.createElement("div", { style: co.specs }, React.createElement("span", { style: co.specItem }, React.createElement(CoIcon, { name: "grid", size: 13 }), chapters.length + " chapters" ), React.createElement("span", { style: co.specItem }, React.createElement(CoIcon, { name: "clock", size: 13 }), p.lengthVal || "Digital ebook" ) ) ) ), /* ── Urgency banner ── */ cd.urgencyHeadline && React.createElement("div", { style: {...co.lawBanner, ...(isMobile ? { gridTemplateColumns: "1fr", gap: 14, padding: "16px 18px" } : {})} }, React.createElement("div", null, React.createElement("div", { style: co.bannerLabel }, cd.urgencyLabel || ""), React.createElement("h3", { style: co.bannerH3 }, safeMarkup(cd.urgencyHeadline)) ) ), /* ── Stats section ── */ cd.stats && cd.stats.length > 0 && React.createElement("div", null, React.createElement("div", { style: co.secH }, React.createElement("span", { style: co.secNum }, "01"), React.createElement("h2", { style: co.secTitle }, ct("whyNow")), React.createElement("span", { style: co.secRule }) ), React.createElement("div", { style: {...co.statsGrid, ...(isMobile ? { gridTemplateColumns: "1fr" } : {})} }, cd.stats.map((s, i) => React.createElement("div", { key: i, style: { ...co.statBox, ...co.statAlert } }, React.createElement("div", { style: { ...co.statNum, ...co.statNumAlert } }, s.num, React.createElement("small", { style: co.statSmall }, s.unit) ), React.createElement("div", { style: co.statLbl }, s.text), React.createElement("div", { style: co.statSrc }, s.source) )) ), cd.statsIntro && React.createElement("p", { style: co.statsIntro }, safeMarkup(cd.statsIntro)) ), /* ── Deliverables ── */ cd.deliverables && React.createElement("div", null, React.createElement("div", { style: co.secH }, React.createElement("span", { style: co.secNum }, "02"), React.createElement("h2", { style: co.secTitle }, ct("whatsInside") + " " + p.price + " " + ct("bundle")), React.createElement("span", { style: co.secRule }) ), React.createElement("div", { style: co.delBox }, React.createElement("div", { style: co.delHead }, React.createElement("span", { style: co.delHeadT }, ct("totalWorth") + " · " + (cd.totalWorth || "")), React.createElement("span", { style: co.delHeadV }, ct("yoursToday") + " · " + p.price) ), React.createElement("div", null, cd.deliverables.map((d, i) => React.createElement("div", { key: i, style: { ...co.delRow, ...(i === cd.deliverables.length - 1 ? co.delRowLast : {}) } }, React.createElement("div", { style: co.delIc }, React.createElement(CoIcon, { name: d.icon || "book", size: 18 }) ), React.createElement("div", { style: co.delBody }, React.createElement("b", { style: co.delBodyB }, d.title), React.createElement("span", { style: co.delBodySpan }, d.desc) ), React.createElement("div", { style: co.delPrice }, d.origPrice, React.createElement("b", { style: co.delIncl }, ct("included")) ) )) ) ) ), /* ── Aggregate rating ── */ cd.rating && React.createElement("div", { style: co.agg }, React.createElement("div", { style: co.aggBig }, cd.rating.score), React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 2 } }, React.createElement("div", { style: co.aggStars }, "★★★★★"), React.createElement("div", { style: co.aggCt }, React.createElement("b", { style: { color: coInk } }, cd.rating.count + " verified readers"), " · " + cd.rating.highlight ) ) ), /* ── Testimonials ── */ cd.testimonials && React.createElement("div", null, React.createElement("div", { style: co.secH }, React.createElement("span", { style: co.secNum }, "03"), React.createElement("h2", { style: co.secTitle }, ct("fromReaders")), React.createElement("span", { style: co.secRule }) ), /* Main + video */ React.createElement("div", { style: {...co.testGrid, ...(isMobile ? { gridTemplateColumns: "1fr" } : {})} }, cd.testimonials.main && React.createElement("article", { style: co.testCard }, React.createElement("div", { style: co.testStars }, "★★★★★"), React.createElement("blockquote", { style: co.testQuote }, "\"" + cd.testimonials.main.quote + "\""), React.createElement("div", { style: co.testWho }, React.createElement("div", { style: { ...co.testAvatar, background: cd.testimonials.main.color || coRule } }, cd.testimonials.main.initials), React.createElement("div", null, React.createElement("div", { style: co.testNm }, cd.testimonials.main.name), React.createElement("div", { style: co.testLoc }, cd.testimonials.main.location) ) ), React.createElement("div", { style: co.testVerified }, ct("verifiedPurchase")) ), cd.testimonials.video && React.createElement("div", { style: co.vidTest }, React.createElement("div", { style: co.vidOverlay }), React.createElement("div", { style: co.vidPlay }, React.createElement("svg", { viewBox: "0 0 24 24", fill: "currentColor", style: { width: 24, height: 24, marginLeft: 3 } }, React.createElement("path", { d: "M8 5v14l11-7z" }) ) ), React.createElement("div", { style: co.vidMeta }, React.createElement("div", { style: co.vidLoc }, "02:47 · " + ct("videoReview")), React.createElement("div", { style: co.vidNm }, "\"" + cd.testimonials.video.quote + "\""), React.createElement("div", { style: { ...co.vidLoc, marginTop: 8 } }, "— " + cd.testimonials.video.name + " · " + cd.testimonials.video.location) ) ) ), /* WA + 2 short */ cd.testimonials.wa && cd.testimonials.short && React.createElement("div", { style: {...co.testRow2, ...(isMobile ? { gridTemplateColumns: "1fr", gap: 14 } : {})} }, React.createElement("div", { style: co.wa }, React.createElement("div", { style: { ...co.waBubble, ...co.waBubbleTheirs } }, cd.testimonials.wa.bubble1), React.createElement("div", { style: co.waBubble }, cd.testimonials.wa.bubble2, React.createElement("div", { style: co.waTime }, "10:42 ✓✓") ), React.createElement("div", { style: co.waCap }, "— " + cd.testimonials.wa.name) ), ...cd.testimonials.short.map((s, i) => React.createElement("div", { key: i, style: co.testSm }, React.createElement("div", { style: co.testStars }, "★★★★★"), React.createElement("blockquote", { style: co.testSmQuote }, "\"" + s.quote + "\""), React.createElement("div", { style: co.testSmWho }, React.createElement("div", { style: { ...co.testSmAvatar, background: s.color || coRule } }, s.initials), React.createElement("div", null, React.createElement("div", { style: co.testSmNm }, s.name), React.createElement("div", { style: co.testSmLoc }, s.location) ) ) )) ) ), /* ── Guarantee ── */ cd.guarantee && React.createElement("div", { style: {...co.guarantee, ...(isMobile ? { gridTemplateColumns: "70px 1fr", gap: 14, padding: 16 } : {})} }, React.createElement("div", { style: co.seal }, React.createElement("div", { style: co.sealInner }), React.createElement("div", null, React.createElement("div", { style: co.sealN }, cd.guarantee.days), React.createElement("div", { style: co.sealD }, ct("dayPromise")) ) ), React.createElement("div", null, React.createElement("h3", { style: co.guarH3 }, "\"" + cd.guarantee.headline + "\""), React.createElement("p", { style: co.guarP }, cd.guarantee.body) ) ), /* ── FAQ ── */ cd.faq && React.createElement("div", null, React.createElement("div", { style: co.secH }, React.createElement("span", { style: co.secNum }, "04"), React.createElement("h2", { style: co.secTitle }, ct("honestAnswers")), React.createElement("span", { style: co.secRule }) ), React.createElement("div", { style: co.faqBox }, cd.faq.map((f, i) => React.createElement(CoFaqItem, { key: i, q: f.q, a: f.a, isLast: i === cd.faq.length - 1 })) ) ) ), /* end left */ /* ====== RIGHT COLUMN — STICKY CHECKOUT ====== */ React.createElement("aside", { style: {...co.right, ...(isMobile || isTablet ? { position: "static", order: -1 } : {})} }, React.createElement("div", { style: co.summary }, /* header */ React.createElement("div", { style: co.sumHead }, React.createElement("h2", { style: co.sumHeadH2 }, ct("yourOrder")), React.createElement("span", { style: co.sumLock }, React.createElement(CoIcon, { name: "lock", size: 11, color: coInk3 }), ct("secure") ) ), /* line items */ React.createElement("div", { style: co.sumItem }, React.createElement("div", { style: co.sumNm }, p.title, React.createElement("small", { style: co.sumNmSm }, (p.formatVal || "PDF") + " · " + (p.lengthVal || "Digital ebook")) ), React.createElement("div", { style: { ...co.sumPr, ...co.sumPrWas } }, cd.wasPrice || "") ), cd.deliverables && cd.deliverables.slice(1, 4).map((d, i) => React.createElement("div", { key: i, style: co.sumItem }, React.createElement("div", { style: co.sumNm }, d.title, React.createElement("small", { style: co.sumNmSm }, d.desc.substring(0, 40) + "…") ), React.createElement("div", { style: { ...co.sumPr, ...co.sumPrFree } }, ct("included")) ) ), /* totals */ React.createElement("div", { style: co.sumTotals }, React.createElement("div", { style: co.sumRow }, React.createElement("span", null, ct("subtotal")), React.createElement("span", null, cd.wasPrice || p.price) ), React.createElement("div", { style: { ...co.sumRow, ...co.sumDiscount } }, React.createElement("span", null, ct("launchDiscount") + " (" + (cd.discount || "") + ")"), React.createElement("span", null, (function () { var wp = parseFloat((cd.wasPrice || "0").replace(/[^\d.]/g, "")); var ap = parseFloat((p.price || "0").replace(/[^\d.]/g, "")); return "−" + (cd.wasPrice || "").replace(/[\d.]+/, (wp - ap).toFixed(2)); })()) ), React.createElement("div", { style: co.sumRow }, React.createElement("span", null, ct("vat")), React.createElement("span", null, ct("included")) ), React.createElement("div", { style: { ...co.sumRow, ...co.sumTotal } }, React.createElement("span", null, ct("total")), React.createElement("span", null, React.createElement("span", { style: co.sumCurrency }, currency + " "), p.price ) ) ), /* form — Stripe handles email/name/card collection */ React.createElement("form", { style: co.form, onSubmit: handleBuy }, /* Secure payment info — Kiwify or Stripe */ React.createElement("div", { style: co.stripePlaceholder }, React.createElement("div", { style: co.stripeLock }, CoIcon({ name: "check", size: 16, color: coJade }), p.kiwifyUrl ? "Secure payment powered by Kiwify" : ct("stripeSecure") ), React.createElement("div", { style: co.stripeMsg }, p.kiwifyUrl ? "Card details are handled securely by Kiwify. Your data never touches our servers." : ct("stripeReady") ), !p.kiwifyUrl && React.createElement("div", { id: "stripe-card-element", style: { marginTop: 12 } }) ), /* CTA button */ buyError && React.createElement("div", { style: { color: "#c53030", fontSize: 13, fontFamily: coSans, padding: "0 0 8px", textAlign: "center" } }, buyError), React.createElement("div", { style: { padding: "8px 0 0" } }, React.createElement("button", { type: "submit", style: { ...co.ctaBtn, opacity: buying ? 0.7 : 1, cursor: buying ? "wait" : "pointer" }, disabled: buying }, buying ? ct("processing") : ct("getAccess") + " · " + p.price, !buying && React.createElement("span", null, "→") ), React.createElement("div", { style: co.ctaMicro }, ct("terms"), " ", React.createElement("a", { href: "/terms", style: { ...co.ctaBold, textDecoration: "underline", cursor: "pointer" } }, ct("termsLink")), " & ", React.createElement("a", { href: "/privacy", style: { ...co.ctaBold, textDecoration: "underline", cursor: "pointer" } }, ct("privacyLink")), ".", React.createElement("br", null), ct("noSub") ) ) ), /* live viewers */ React.createElement("div", { style: co.liveViewers }, React.createElement("span", { style: co.pulse }), React.createElement("span", null, React.createElement("b", { style: { fontWeight: 700, color: coInk } }, (cd.liveViewers || 14) + " " + ct("viewers").split(" ")[0]), " " + ct("viewers").split(" ").slice(1).join(" ") ) ), /* trust badges */ React.createElement("div", { style: co.trust }, [ct("ssl"), ct("refund"), ct("instantDl"), ct("freeUpdates")].map((label, i) => React.createElement("span", { key: i, style: co.trustItem }, React.createElement(CoIcon, { name: "tick", size: 13, color: coJade }), label ) ) ) ) ) /* end right */ ), /* end main checkout */ /* ─── Floating mobile CTA bar ─── */ isMobile && showFloatingCta && React.createElement("div", { style: { position: "fixed", bottom: 0, left: 0, right: 0, zIndex: 999, background: coPaper, borderTop: "1px solid " + coRule, padding: "12px 16px", display: "flex", alignItems: "center", gap: 12, boxShadow: "0 -4px 24px rgba(0,0,0,0.10)" } }, React.createElement("div", { style: { flex: 1, minWidth: 0 } }, React.createElement("div", { style: { fontFamily: coSerif, fontSize: 20, fontWeight: 600, color: coInk, letterSpacing: "-0.01em" } }, p.price), React.createElement("div", { style: { fontFamily: coSans, fontSize: 11, color: coInk3, marginTop: 1 } }, cd.discount ? cd.discount + " off" : ct("instantDl")) ), React.createElement("button", { onClick: handleBuy, style: { background: "#C8553D", color: "#FAF7F2", border: "none", padding: "14px 28px", borderRadius: 8, fontFamily: coSerif, fontSize: 16, fontWeight: 600, cursor: buying ? "wait" : "pointer", opacity: buying ? 0.7 : 1, display: "flex", alignItems: "center", gap: 8, whiteSpace: "nowrap", flexShrink: 0 }, disabled: buying }, buying ? ct("processing") : ct("getAccess"), !buying && React.createElement("span", null, " →") ) ), /* ─── Footer ─── */ React.createElement("footer", { style: co.coFooter }, React.createElement("div", null, "© 2026 Alvaro Abreu · São Paulo"), React.createElement("div", null, React.createElement("a", { style: co.footerLink, href: "/terms", onClick: function(e) { e.preventDefault(); window.history.pushState(null,"","/terms"); window.dispatchEvent(new PopStateEvent("popstate")); } }, "Terms"), React.createElement("a", { style: co.footerLink, href: "/privacy", onClick: function(e) { e.preventDefault(); window.history.pushState(null,"","/privacy"); window.dispatchEvent(new PopStateEvent("popstate")); } }, "Privacy"), React.createElement("a", { style: co.footerLink, href: "/refunds", onClick: function(e) { e.preventDefault(); window.history.pushState(null,"","/refunds"); window.dispatchEvent(new PopStateEvent("popstate")); } }, "Refunds"), React.createElement("a", { style: co.footerLink, onClick: onBack }, ct("backToCatalog")) ) ) ); };