// PRIMITIVES — shared UI atoms (Button, Input, Shield, Orb, Stars)

const Button = ({ children, variant='primary', size='md', onClick, type='button', className='', style={}, ...rest }) => {
  const base = {
    display:'inline-flex',alignItems:'center',justifyContent:'center',gap:10,
    border:'none',cursor:'pointer',fontFamily:'inherit',fontWeight:800,
    letterSpacing:'0.5px',borderRadius:14,
    transition:'all 0.2s ease',
    textDecoration:'none',
  };
  const sizes = {
    sm:{padding:'10px 16px',fontSize:13},
    md:{padding:'14px 20px',fontSize:14},
    lg:{padding:'18px 24px',fontSize:15},
    xl:{padding:'20px 28px',fontSize:16},
  };
  const variants = {
    primary:{background:BRAND.gradient,color:'#fff',boxShadow:'var(--glow)'},
    ghost:{background:'transparent',color:'var(--ink)',border:'1.5px solid var(--border-strong)'},
    white:{background:'#fff',color:BRAND.purple,boxShadow:'0 12px 40px rgba(0,0,0,0.2)'},
    ink:{background:'var(--ink)',color:'var(--bg)'},
  };
  return (
    <button type={type} onClick={onClick} className={className}
      style={{...base,...sizes[size],...variants[variant],...style}} {...rest}>
      {children}
    </button>
  );
};

const Input = React.forwardRef(({ style={}, ...rest }, ref) => (
  <input ref={ref} {...rest} style={{
    width:'100%',background:'var(--break-bg)',
    border:'1.5px solid transparent',borderRadius:12,
    padding:'16px 16px',fontFamily:'inherit',fontSize:16,
    color:'var(--ink)',outline:'none',transition:'all 0.2s',
    ...style,
  }} />
));

// Live pulsing dot — used in urgency strip and "live" tags
const LiveDot = ({ color='#fff', size=7 }) => (
  <span style={{
    width:size,height:size,borderRadius:'50%',background:color,
    boxShadow:`0 0 8px ${color}80`,display:'inline-block',
    animation:'apex-pulse 1.4s ease-in-out infinite',
  }}/>
);

const Shield = ({ size=28, color='#10b981' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
       strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"
       style={{filter:`drop-shadow(0 2px 6px ${color}50)`,flexShrink:0}}>
    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
    <path d="m9 12 2 2 4-4"/>
  </svg>
);

const Stars = ({ n=5, size=14 }) => (
  <span style={{
    background:BRAND.gradient,WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent',
    backgroundClip:'text',fontSize:size,letterSpacing:2,fontWeight:700,
  }}>{'★'.repeat(n)}</span>
);

// Guarantee stamp — compact version under form
const GuaranteeStamp = ({ tone='light' }) => (
  <div style={{
    display:'flex',alignItems:'center',gap:12,
    marginTop:14,padding:'12px 14px',
    background:'linear-gradient(135deg,rgba(16,185,129,0.08),rgba(124,58,237,0.05))',
    border:'1px solid rgba(16,185,129,0.28)',borderRadius:12,
  }}>
    <Shield/>
    <div>
      <div style={{fontSize:12,fontWeight:800,letterSpacing:1.2,textTransform:'uppercase',color:'var(--ink)',lineHeight:1.2}}>
        200% ROI Guarantee
      </div>
      <div style={{fontSize:11.5,color:'var(--mute)',lineHeight:1.35,marginTop:2}}>
        Or we refund 100% of your investment within 90 days.
      </div>
    </div>
  </div>
);

// Section label — small uppercase eyebrow
const Eyebrow = ({ children, accent='var(--purple)', style={} }) => (
  <div style={{
    fontSize:11,fontWeight:700,letterSpacing:2.5,textTransform:'uppercase',
    color:accent,...style,
  }}>{children}</div>
);

// Injected global keyframes — once
function InjectGlobals() {
  useEffect(() => {
    if (document.getElementById('apex-keyframes')) return;
    const s = document.createElement('style');
    s.id = 'apex-keyframes';
    s.textContent = `
      @keyframes apex-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.35;transform:scale(0.7)}}
      @keyframes apex-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
      @keyframes apex-orb-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
      @keyframes apex-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
      @keyframes apex-slide-up{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
      @keyframes apex-fade-in{from{opacity:0}to{opacity:1}}
      @keyframes apex-toast-in{from{transform:translateX(-120%);opacity:0}to{transform:translateX(0);opacity:1}}
      @keyframes apex-bubble-in{from{transform:translateY(8px) scale(0.96);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
      @keyframes apex-typing{0%{opacity:0.3}30%{opacity:1}60%{opacity:0.3}}
      @keyframes apex-glow-pulse{0%,100%{box-shadow:0 10px 40px rgba(124,58,237,0.35)}50%{box-shadow:0 14px 50px rgba(124,58,237,0.55)}}
      @keyframes apex-caret{0%,50%{opacity:1}51%,100%{opacity:0}}
      @keyframes apex-ring-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
      @keyframes apex-glow-breathe{0%,100%{opacity:0.85;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
      @keyframes apex-cta-pulse{0%,100%{box-shadow:0 18px 50px rgba(124,58,237,0.55)}50%{box-shadow:0 22px 60px rgba(124,58,237,0.75)}}
      @keyframes apex-pulse-badge{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
      @keyframes apex-chevron-bob{0%,100%{transform:translateY(0);opacity:0.6}50%{transform:translateY(4px);opacity:1}}
      @keyframes apex-arrow-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
      @keyframes apex-avail-blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.45;transform:scale(0.82)}}
      html,body{overflow-x:hidden}
      input::placeholder{color:var(--dim)}
      input.apex-input-neon::placeholder{color:rgba(255,255,255,0.55)!important}
      input.apex-input-neon:focus{border-color:rgba(255,255,255,0.5)!important;background:rgba(255,255,255,0.22)!important;box-shadow:0 0 0 3px rgba(255,255,255,0.18)!important}
      input:focus{border-color:var(--purple)!important;background:var(--card)!important;box-shadow:0 0 0 3px rgba(124,58,237,0.12)!important}
      a{color:inherit}
      button:active{transform:scale(0.98)}
      .apex-scroll-lock{overflow:hidden!important}
    `;
    document.head.appendChild(s);
  }, []);
  return null;
}

Object.assign(window, { Button, Input, LiveDot, Shield, Stars, GuaranteeStamp, Eyebrow, InjectGlobals });