// Shared design tokens, copy, and micro-components.
// Exposed on window so every script can share them.

const TP = {
  // brand
  brand: 'TESTED PEPTIDES',
  domain: 'tested-peptides.com',
  product: 'BPC-157',
  protocol: '30-Day Recovery Protocol',

  // pricing
  price: 97,
  priceWas: 197,
  bumpPrice: 27,
  upsellPrice: 147,
  upsellWas: 297,

  // copy
  bigPromise: 'Recover in half the time — or it\'s free.',
  guaranteeDays: 60,

  // colors (mirrors :root vars)
  c: {
    bg: '#fbfaf7',
    ink: '#0a0a0a',
    ink2: '#4a4a4a',
    ink3: '#8a8a8a',
    line: '#e5e2dc',
    line2: '#d4d0c8',
    cta: '#e63946',
    ctaDeep: '#c2293a',
    trust: '#1f5d3a',
    warn: '#f5a623',
    paper: '#f4f1ec',
  },
};

// — Generic UI atoms ——————————————————————————————————

function Mono({ children, style, ...p }) {
  return <span style={{ fontFamily: 'var(--font-mono)', letterSpacing: '0.02em', ...style }} {...p}>{children}</span>;
}

function Display({ children, style, ...p }) {
  return <span style={{ fontFamily: 'var(--font-display)', letterSpacing: '-0.025em', ...style }} {...p}>{children}</span>;
}

function Serif({ children, style, ...p }) {
  return <span style={{ fontFamily: 'var(--font-serif)', ...style }} {...p}>{children}</span>;
}

// Striped placeholder — for any imagery we don't have.
function ImgPlaceholder({ label = 'image', w = '100%', h = 200, dark = false, radius = 0, style }) {
  const fg = dark ? '#fff' : '#0a0a0a';
  const bg = dark ? '#0a0a0a' : '#efece6';
  return (
    <div style={{
      width: w, height: h, borderRadius: radius,
      background: `repeating-linear-gradient(135deg, ${bg} 0 10px, ${dark ? '#1a1a1a' : '#e6e2d9'} 10px 11px)`,
      border: `1px solid ${dark ? '#222' : '#d4d0c8'}`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: 'var(--font-mono)', fontSize: 10, color: dark ? '#777' : '#8a8a8a',
      textTransform: 'uppercase', letterSpacing: '0.1em',
      ...style,
    }}>[ {label} ]</div>
  );
}

// Pill / tag
function Pill({ children, color = '#0a0a0a', bg = 'transparent', border, style }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      padding: '4px 8px', borderRadius: 999,
      fontFamily: 'var(--font-mono)', fontSize: 10,
      letterSpacing: '0.08em', textTransform: 'uppercase',
      color, background: bg,
      border: border || `1px solid ${color}33`,
      ...style,
    }}>{children}</span>
  );
}

// Red ⬤ live dot
function LiveDot({ color = '#e63946' }) {
  return <span style={{
    display: 'inline-block', width: 6, height: 6, borderRadius: 999,
    background: color, marginRight: 6, boxShadow: `0 0 0 3px ${color}33`,
    animation: 'tpPulse 1.6s infinite',
  }} />;
}

// Big CTA button
function CTA({ children, full = true, size = 'lg', style, danger, ...p }) {
  const sizes = { lg: { fs: 16, py: 18 }, md: { fs: 14, py: 14 }, sm: { fs: 12, py: 10 } };
  const s = sizes[size];
  return (
    <button style={{
      width: full ? '100%' : 'auto',
      padding: `${s.py}px 22px`,
      background: danger ? '#0a0a0a' : 'var(--tp-cta)',
      color: '#fff',
      border: 'none',
      borderRadius: 4,
      fontFamily: 'var(--font-display)',
      fontWeight: 800,
      fontSize: s.fs,
      letterSpacing: '0.04em',
      textTransform: 'uppercase',
      cursor: 'pointer',
      boxShadow: danger ? '0 4px 0 #000' : '0 4px 0 var(--tp-cta-deep)',
      ...style,
    }} {...p}>{children}</button>
  );
}

// Subhead/eyebrow
function Eyebrow({ children, color, style }) {
  return (
    <div style={{
      fontFamily: 'var(--font-mono)', fontSize: 11,
      letterSpacing: '0.18em', textTransform: 'uppercase',
      color: color || 'var(--tp-ink-3)',
      ...style,
    }}>{children}</div>
  );
}

// Wordmark (text-only, no SVG art)
function Wordmark({ size = 14, dark = false, style }) {
  return (
    <div style={{
      fontFamily: 'var(--font-display)',
      fontWeight: 900,
      fontSize: size,
      letterSpacing: '0.18em',
      color: dark ? '#fff' : '#0a0a0a',
      display: 'inline-flex', alignItems: 'center', gap: 6,
      ...style,
    }}>
      <span style={{
        display: 'inline-block', width: size * 0.55, height: size * 0.55,
        borderRadius: 2, background: 'var(--tp-cta)',
      }} />
      TESTED <span style={{ opacity: 0.55 }}>/</span> PEPTIDES
    </div>
  );
}

// Sticker badge (Hormozi-style "circle stamp")
function Stamp({ children, rotate = -6, size = 78, color = '#e63946', style }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: color, color: '#fff',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      textAlign: 'center',
      fontFamily: 'var(--font-display)', fontWeight: 900,
      fontSize: size * 0.16, lineHeight: 1.05, letterSpacing: '0.02em',
      textTransform: 'uppercase',
      border: '2px solid #fff',
      boxShadow: '0 0 0 2px ' + color,
      transform: `rotate(${rotate}deg)`,
      flexShrink: 0,
      ...style,
    }}>{children}</div>
  );
}

// Tiny checkmark
function Check({ size = 14, color = 'var(--tp-trust)' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0 }}>
      <circle cx="7" cy="7" r="7" fill={color} />
      <path d="M3.5 7L6 9.5L10.5 4.5" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// Star rating
function Stars({ n = 5, size = 12, color = '#f5a623' }) {
  return (
    <span style={{ display: 'inline-flex', gap: 1 }}>
      {Array.from({ length: 5 }).map((_, i) => (
        <svg key={i} width={size} height={size} viewBox="0 0 12 12">
          <path d="M6 1l1.5 3.2 3.5.5-2.5 2.5.6 3.5L6 9l-3.1 1.7.6-3.5L1 4.7l3.5-.5L6 1z"
            fill={i < n ? color : '#d4d0c8'} />
        </svg>
      ))}
    </span>
  );
}

// Section header inside an artboard
function SectionLabel({ idx, label, color = '#0a0a0a' }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '6px 10px',
      background: color, color: color === '#0a0a0a' ? '#fff' : '#0a0a0a',
      fontFamily: 'var(--font-mono)', fontSize: 10,
      letterSpacing: '0.14em', textTransform: 'uppercase',
    }}>
      <span style={{ opacity: 0.6 }}>{idx}</span>
      <span style={{ width: 1, height: 8, background: 'currentColor', opacity: 0.3 }} />
      {label}
    </div>
  );
}

// Inject keyframes once
if (typeof document !== 'undefined' && !document.getElementById('tp-keyframes')) {
  const s = document.createElement('style');
  s.id = 'tp-keyframes';
  s.textContent = `
    @keyframes tpPulse { 0%,100%{opacity:1} 50%{opacity:.35} }
    @keyframes tpBlink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
    @keyframes tpTickerScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
  `;
  document.head.appendChild(s);
}

Object.assign(window, {
  TP, Mono, Display, Serif, ImgPlaceholder, Pill, LiveDot, CTA, Eyebrow,
  Wordmark, Stamp, Check, Stars, SectionLabel,
});