// ============= 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 (
      <div style={wrapStyle}>
        <img src={src} alt={alt} style={{ width:'100%', height:'100%', objectFit, display:'block' }} />
      </div>
    );
  }
  return (
    <div style={{
      ...wrapStyle,
      background: `linear-gradient(135deg, color-mix(in oklab, ${tint} 22%, white), color-mix(in oklab, ${tint} 10%, white))`,
      border: `2px dashed color-mix(in oklab, ${tint} 45%, var(--line))`,
      display: 'grid',
      placeItems: 'center',
      padding: 16,
    }}>
      <div style={{
        position:'absolute', inset: 10, borderRadius: radius - 6,
        background: `repeating-linear-gradient(45deg, color-mix(in oklab, ${tint} 14%, transparent) 0 10px, transparent 10px 22px)`,
        opacity: .5,
      }} />
      <div style={{ position:'relative', textAlign:'center', maxWidth: '80%' }}>
        <div style={{
          display:'inline-flex', alignItems:'center', gap: 8,
          padding: '6px 12px', borderRadius: 999,
          background: '#fff', color: tint,
          fontFamily: 'var(--font-mono)', fontSize: 10,
          letterSpacing: '.16em', fontWeight: 700,
          boxShadow: '0 4px 12px -4px rgba(0,0,0,.12)',
          marginBottom: 10,
        }}>
          📷 {label}
        </div>
        {sub && <div style={{
          fontFamily:'var(--font-mono)', fontSize: 11, color:'var(--ink-2)',
          lineHeight: 1.5, background:'#fff', padding: '8px 12px', borderRadius: 8,
          boxShadow: '0 4px 12px -4px rgba(0,0,0,.08)',
        }}>{sub}</div>}
      </div>
    </div>
  );
};

const Container = ({ children, size = 'md', style }) => {
  const maxW = size === 'sm' ? 680 : size === 'md' ? 820 : size === 'lg' ? 1040 : 1200;
  return (
    <div style={{ width: '100%', maxWidth: maxW, margin: '0 auto', padding: '0 var(--pad-x)', ...style }}>
      {children}
    </div>
  );
};

const Section = ({ children, bg, style, id, label }) => (
  <section id={id} data-screen-label={label} style={{
    position: 'relative',
    padding: 'var(--pad-section) 0',
    background: bg,
    ...style,
  }}>
    {children}
  </section>
);

const Eyebrow = ({ children, color = 'var(--orange)' }) => (
  <div style={{
    display: 'inline-flex', alignItems: 'center', gap: 10,
    fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.16em',
    textTransform: 'uppercase', color, marginBottom: 18, fontWeight: 500,
  }}>
    <span style={{ width: 20, height: 2, background: 'currentColor', borderRadius: 2 }} />
    {children}
  </div>
);

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 (
    <Tag style={{
      fontFamily: 'var(--font-display)',
      fontWeight: 500,
      fontSize: sizes[size],
      lineHeight: 1.05,
      letterSpacing: '-0.025em',
      margin: 0,
      color: 'var(--text)',
      textWrap: 'balance',
      ...style,
    }}>
      {children}
    </Tag>
  );
};

const Lede = ({ children, style }) => (
  <p style={{
    fontSize: 'clamp(16px, 1.4vw, 19px)',
    lineHeight: 1.6,
    color: 'var(--text-dim)',
    margin: 0,
    maxWidth: '58ch',
    textWrap: 'pretty',
    ...style,
  }}>{children}</p>
);

// 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 (
    <button onClick={goCheckout} className={'cta-btn ' + (pulse ? 'cta-pulse' : '')} style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 12,
      fontWeight: 700, letterSpacing: '-0.005em',
      fontFamily: 'var(--font-body)',
      borderRadius: 999,
      background: subtle ? 'transparent' : 'var(--cta)',
      color: subtle ? 'var(--cta)' : '#fff',
      boxShadow: subtle ? 'inset 0 0 0 2px var(--cta)' : '0 14px 30px -8px color-mix(in oklab, var(--cta) 55%, transparent), inset 0 2px 0 rgba(255,255,255,0.25), inset 0 -2px 0 rgba(0,0,0,0.1)',
      transition: 'transform .2s, box-shadow .2s, background .2s',
      width: fullWidth ? '100%' : 'auto',
      ...sizes[size], ...style,
    }}>
      <span style={{ display:'inline-flex', flexDirection:'column', alignItems:'center', lineHeight: 1.15 }}>
        <span>{children}</span>
        {sub && <span style={{ fontSize: 11.5, fontWeight: 500, opacity: .85, fontFamily:'var(--font-mono)', letterSpacing:'.05em', textTransform:'uppercase', marginTop: 3 }}>{sub}</span>}
      </span>
      <IconArrow size={20} sw={2.5} />
    </button>
  );
};

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 }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 8,
    padding: '8px 16px',
    borderRadius: 999,
    fontSize: 12.5,
    fontFamily: 'var(--font-mono)',
    letterSpacing: '.08em',
    textTransform: 'uppercase',
    fontWeight: 600,
    background: filled ? color : `color-mix(in oklab, ${color} 14%, white)`,
    color: filled ? '#fff' : color,
    border: filled ? 'none' : `1.5px solid color-mix(in oklab, ${color} 35%, transparent)`,
    whiteSpace: 'nowrap',
    ...style,
  }}>
    {children}
  </span>
);

const Stars = ({ n = 5, size = 14, color = 'var(--yellow)' }) => (
  <span style={{ display: 'inline-flex', gap: 2, color, filter: 'drop-shadow(0 1px 1px rgba(0,0,0,.08))' }}>
    {Array.from({ length: n }).map((_, i) => <IconStar key={i} size={size} />)}
  </span>
);

// 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) => (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', minWidth: compact ? 42 : 66 }}>
      <div style={{
        fontFamily: 'var(--font-display)',
        fontSize: compact ? 26 : 'clamp(34px, 4.5vw, 54px)',
        fontWeight: 500,
        lineHeight: 1,
        color: fg,
        fontVariantNumeric: 'tabular-nums',
      }}>{pad(v)}</div>
      <div style={{
        fontFamily: 'var(--font-mono)',
        fontSize: compact ? 9 : 11,
        letterSpacing: '.18em',
        textTransform: 'uppercase',
        color: dark ? 'rgba(255,255,255,.75)' : 'var(--text-dim)',
        marginTop: compact ? 4 : 8,
      }}>{l}</div>
    </div>
  );
  const sep = (
    <div style={{
      fontFamily: 'var(--font-display)',
      fontSize: compact ? 24 : 'clamp(28px, 4vw, 44px)',
      color: dark ? 'rgba(255,255,255,.5)' : 'var(--orange)',
      lineHeight: 1, marginTop: compact ? 0 : 2,
    }}>:</div>
  );
  return (
    <div style={{ display: 'inline-flex', alignItems: 'flex-start', gap: compact ? 8 : 14 }}>
      {unit(totalH, 'hrs')}{sep}{unit(m, 'min')}{sep}{unit(s, 'seg')}
    </div>
  );
};

// Wobbly sticker / badge
const Sticker = ({ children, color = 'var(--yellow)', rotate = -6, size = 90, style }) => (
  <div style={{
    display: 'inline-grid', placeItems: 'center',
    width: size, height: size, borderRadius: '50%',
    background: color,
    color: 'var(--ink)',
    fontFamily: 'var(--font-display)',
    fontWeight: 500,
    transform: `rotate(${rotate}deg)`,
    textAlign: 'center',
    lineHeight: 1.05,
    boxShadow: '0 4px 0 color-mix(in oklab, var(--ink) 18%, transparent), 0 10px 24px -6px rgba(0,0,0,.15)',
    fontStyle: 'italic',
    padding: 12,
    ...style,
  }}>{children}</div>
);

// Big quote highlight block
const Pullquote = ({ children, color = 'var(--orange)' }) => (
  <div style={{
    padding: '28px 32px',
    borderLeft: `6px solid ${color}`,
    background: `color-mix(in oklab, ${color} 8%, transparent)`,
    borderRadius: '0 14px 14px 0',
    fontFamily: 'var(--font-display)',
    fontSize: 'clamp(20px, 2.2vw, 26px)',
    fontStyle: 'italic',
    lineHeight: 1.3,
    color: 'var(--ink)',
    margin: '28px 0',
  }}>{children}</div>
);

// Checklist item
const Check = ({ children, color = 'var(--green)' }) => (
  <li style={{ display: 'flex', gap: 14, alignItems: 'flex-start', padding: '10px 0' }}>
    <span style={{
      flexShrink: 0, width: 26, height: 26, borderRadius: '50%',
      background: color, color: '#fff',
      display: 'grid', placeItems: 'center', marginTop: 2,
      boxShadow: `0 2px 0 color-mix(in oklab, ${color} 50%, black)`,
    }}>
      <IconCheck size={15} sw={3} />
    </span>
    <span style={{ fontSize: 16, color: 'var(--ink)', lineHeight: 1.5, flex: 1 }}>{children}</span>
  </li>
);

const Cross = ({ children }) => (
  <li style={{ display: 'flex', gap: 14, alignItems: 'flex-start', padding: '10px 0', opacity: .85 }}>
    <span style={{
      flexShrink: 0, width: 26, height: 26, borderRadius: '50%',
      background: '#fff', color: '#D84343',
      display: 'grid', placeItems: 'center', marginTop: 2,
      border: '2px solid #D84343',
    }}>
      <svg width="13" height="13" viewBox="0 0 14 14" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M3 3l8 8M11 3l-8 8"/></svg>
    </span>
    <span style={{ fontSize: 16, color: 'var(--text-dim)', lineHeight: 1.5, flex: 1, textDecoration: 'line-through', textDecorationThickness: 1 }}>{children}</span>
  </li>
);

// Drop cap for TSL paragraphs
const Dropcap = ({ letter, color = 'var(--orange)' }) => (
  <span style={{
    float: 'left',
    fontFamily: 'var(--font-display)',
    fontSize: '5.5em',
    lineHeight: .8,
    padding: '6px 10px 0 0',
    color,
    fontStyle: 'italic',
    fontWeight: 500,
  }}>{letter}</span>
);

Object.assign(window, {
  CHECKOUT_URL, goCheckout, ImgSlot,
  Container, Section, Eyebrow, H, Lede, CTA, Pill, Stars,
  useCountdown, getOfferTarget, Countdown, Sticker, Pullquote, Check, Cross, Dropcap,
});
