/* Surgr Landing — shared primitives */

window.SurgrLandingKit = window.SurgrLandingKit || {};

const LIcon = ({ children, size = 20, ...props }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>{children}</svg>
);

const LIcons = {
  Check: (p) => <LIcon {...p} strokeWidth={2.5}><polyline points="20 6 9 17 4 12"/></LIcon>,
  Brain: (p) => <LIcon {...p}><path d="M9.9 15.5A2 2 0 0 0 8.5 14L2.4 12.5a.5.5 0 0 1 0-1L8.5 9.9A2 2 0 0 0 9.9 8.5L11.5 2.4a.5.5 0 0 1 1 0L14 8.5a2 2 0 0 0 1.4 1.4L21.6 11.5a.5.5 0 0 1 0 1L15.5 14a2 2 0 0 0-1.4 1.4l-1.6 6.1a.5.5 0 0 1-1 0z"/></LIcon>,
  Star: (p) => <LIcon {...p} fill="currentColor"><polygon points="12 2 15 9 22 9.5 17 14.5 18.5 22 12 18 5.5 22 7 14.5 2 9.5 9 9 12 2"/></LIcon>,
  ArrowRight: (p) => <LIcon {...p}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></LIcon>,
};
window.SurgrLandingKit.Icons = LIcons;

/* PillTag — animated lime dot + label */
function PillTag({ text, color = '#C8FF00' }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '8px 16px',
      borderRadius: 100,
      border: '1px solid rgba(255,255,255,0.1)',
      background: 'rgba(255,255,255,0.02)',
    }}>
      <span style={{
        width: 8, height: 8, borderRadius: 4,
        background: color,
        boxShadow: `0 0 10px ${color}`,
        animation: 'surgr-pulse 2s ease-in-out infinite',
      }}/>
      <span style={{
        fontFamily: 'var(--surgr-font-body)',
        fontSize: 11, fontWeight: 800, letterSpacing: 2,
        textTransform: 'uppercase',
        color: '#8F8F9A',
      }}>{text}</span>
    </div>
  );
}
window.SurgrLandingKit.PillTag = PillTag;

/* CTA Button — landing primary */
function CTAButton({ text, large = false, onClick, style = {} }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'inline-block',
        background: '#C8FF00',
        color: '#000',
        fontFamily: 'var(--surgr-font-body)',
        fontWeight: 800,
        fontSize: large ? 16 : 14,
        letterSpacing: 1,
        textTransform: 'uppercase',
        padding: large ? '18px 48px' : '14px 32px',
        borderRadius: 14,
        border: 'none',
        boxShadow: hover ? '0 10px 30px rgba(200,255,0,0.25)' : '0 4px 20px rgba(200,255,0,0.15)',
        cursor: 'pointer',
        transition: 'all var(--surgr-dur-base) var(--surgr-ease-out)',
        transform: hover ? 'translateY(-2px)' : 'translateY(0)',
        ...style,
      }}>
      {text}
    </button>
  );
}
window.SurgrLandingKit.CTAButton = CTAButton;

/* Glass card with optional accent stripe */
function GlassCard({ children, accent = '#C8FF00', stripe = true, style = {} }) {
  return (
    <div style={{
      background: 'rgba(255,255,255,0.02)',
      backdropFilter: 'blur(24px)',
      WebkitBackdropFilter: 'blur(24px)',
      border: '1px solid rgba(255,255,255,0.06)',
      borderRadius: 24,
      padding: 32,
      position: 'relative',
      overflow: 'hidden',
      ...style,
    }}>
      {stripe && (
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0,
          height: 4,
          background: `linear-gradient(90deg, ${accent}, transparent)`,
        }}/>
      )}
      {children}
    </div>
  );
}
window.SurgrLandingKit.GlassCard = GlassCard;

/* Section heading scaffolding */
function SectionHead({ kicker, kickerColor = '#C8FF00', title, subtitle }) {
  return (
    <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
      {kicker && (
        <p style={{
          fontFamily: 'var(--surgr-font-body)',
          fontSize: 11, fontWeight: 800, letterSpacing: 3,
          textTransform: 'uppercase',
          color: kickerColor,
          margin: '0 0 16px',
        }}>{kicker}</p>
      )}
      <h2 style={{
        fontFamily: 'var(--surgr-font-heading)',
        fontWeight: 800,
        fontSize: 'clamp(36px, 5vw, 56px)',
        letterSpacing: -1,
        lineHeight: 1.05,
        color: '#FFF',
        margin: 0,
      }}>{title}</h2>
      {subtitle && (
        <p style={{
          fontFamily: 'var(--surgr-font-body)',
          fontSize: 17, color: '#8888A0',
          marginTop: 16, lineHeight: 1.6,
        }}>{subtitle}</p>
      )}
    </div>
  );
}
window.SurgrLandingKit.SectionHead = SectionHead;

/* Glow Blob — animated background element */
function GlowBlob({ size = 600, x = '50%', y = '50%', delay = 0 }) {
  return (
    <div style={{
      position: 'absolute',
      width: size, height: size,
      left: x, top: y,
      transform: 'translate(-50%, -50%)',
      borderRadius: '50%',
      background: 'rgba(200,255,0,0.04)',
      filter: 'blur(120px)',
      pointerEvents: 'none',
      animation: `surgr-breathe 9s ${delay}s ease-in-out infinite`,
      zIndex: 0,
    }}/>
  );
}
window.SurgrLandingKit.GlowBlob = GlowBlob;