// ============= PRIMITIVES V2 (TSL, colorful) =============
const CHECKOUT_URL = 'https://pay.hotmart.com/Y105635909E?off=6qromvdt&checkoutMode=10';
const goCheckout = () => {
window.open(CHECKOUT_URL, '_blank');
};
// ============= IMAGE PLACEHOLDER =============
// Drop-in slot to mark where a real image should go.
// Replace `src` with a real image URL/path and the placeholder visuals disappear.
const ImgSlot = ({
src,
alt = '',
label = 'IMAGEN',
sub = '',
ratio = '4/3',
radius = 18,
tint = 'var(--blue)',
style,
objectFit = 'cover',
rotate = 0,
}) => {
const wrapStyle = {
position: 'relative',
width: '100%',
aspectRatio: ratio,
borderRadius: radius,
overflow: 'hidden',
transform: rotate ? `rotate(${rotate}deg)` : undefined,
...style,
};
if (src) {
return (
);
}
return (
📷 {label}
{sub &&
{sub}
}
);
};
const Container = ({ children, size = 'md', style }) => {
const maxW = size === 'sm' ? 680 : size === 'md' ? 820 : size === 'lg' ? 1040 : 1200;
return (
{children}
);
};
const Section = ({ children, bg, style, id, label }) => (
);
const Eyebrow = ({ children, color = 'var(--orange)' }) => (
{children}
);
const H = ({ children, size = 'xl', style, as: Tag = 'h2' }) => {
const sizes = {
xxl: 'clamp(40px, 6.5vw, 84px)',
xl: 'clamp(32px, 4.6vw, 58px)',
lg: 'clamp(26px, 3.2vw, 40px)',
md: 'clamp(20px, 2.2vw, 28px)',
};
return (
{children}
);
};
const Lede = ({ children, style }) => (
{children}
);
// Big CTA button (used everywhere; all go to checkout)
const CTA = ({ children, size = 'md', sub, style, pulse = false, fullWidth = false, subtle = false }) => {
const sizes = {
sm: { padding: '12px 22px', fontSize: 14 },
md: { padding: '18px 30px', fontSize: 16 },
lg: { padding: '22px 36px', fontSize: 19 },
xl: { padding: '26px 44px', fontSize: 22 },
};
return (
);
};
const _ctaCss = document.createElement('style');
_ctaCss.textContent = `
.cta-btn { cursor: pointer; }
.cta-btn:hover { transform: translateY(-2px) scale(1.02); background: var(--cta-2); }
.cta-btn:active { transform: translateY(0); }
.cta-pulse { animation: pulseBtn 2.4s ease-in-out infinite; }
`;
document.head.appendChild(_ctaCss);
// Pill
const Pill = ({ children, color = 'var(--orange)', filled, style }) => (
{children}
);
const Stars = ({ n = 5, size = 14, color = 'var(--yellow)' }) => (
{Array.from({ length: n }).map((_, i) => )}
);
// Countdown
const useCountdown = (targetMs) => {
const [now, setNow] = React.useState(() => Date.now());
React.useEffect(() => {
const id = setInterval(() => setNow(Date.now()), 1000);
return () => clearInterval(id);
}, []);
const remaining = Math.max(0, targetMs - now);
return {
d: Math.floor(remaining / 86400000),
h: Math.floor((remaining % 86400000) / 3600000),
m: Math.floor((remaining % 3600000) / 60000),
s: Math.floor((remaining % 60000) / 1000),
remaining,
};
};
const getOfferTarget = () => {
try {
const stored = localStorage.getItem('__offer_target_v2');
if (stored) return parseInt(stored, 10);
} catch {}
const t = Date.now() + 23 * 3600000 + 47 * 60000 + 12 * 1000;
try { localStorage.setItem('__offer_target_v2', String(t)); } catch {}
return t;
};
const Countdown = ({ compact, dark }) => {
const { d, h, m, s } = useCountdown(getOfferTarget());
const pad = (n) => String(n).padStart(2, '0');
const totalH = d * 24 + h;
const fg = dark ? '#fff' : 'var(--ink)';
const unit = (v, l) => (
);
const sep = (
:
);
return (
{unit(totalH, 'hrs')}{sep}{unit(m, 'min')}{sep}{unit(s, 'seg')}
);
};
// Wobbly sticker / badge
const Sticker = ({ children, color = 'var(--yellow)', rotate = -6, size = 90, style }) => (
{children}
);
// Big quote highlight block
const Pullquote = ({ children, color = 'var(--orange)' }) => (
{children}
);
// Checklist item
const Check = ({ children, color = 'var(--green)' }) => (
{children}
);
const Cross = ({ children }) => (
{children}
);
// Drop cap for TSL paragraphs
const Dropcap = ({ letter, color = 'var(--orange)' }) => (
{letter}
);
Object.assign(window, {
CHECKOUT_URL, goCheckout, ImgSlot,
Container, Section, Eyebrow, H, Lede, CTA, Pill, Stars,
useCountdown, getOfferTarget, Countdown, Sticker, Pullquote, Check, Cross, Dropcap,
});