/* ============================================================
   AR — Bits.jsx · shared atoms (evolved)
   ============================================================ */

const Container = ({ children, style, className = '' }) => (
  <div className={('ar-container ' + className).trim()} style={{
    maxWidth: 1280, margin: '0 auto', padding: '0 80px', ...style,
  }}>{children}</div>
);

const Eyebrow = ({ children, color = 'var(--ar-cyan)', style }) => (
  <div style={{
    display: 'inline-flex', alignItems: 'center', gap: 9,
    fontFamily: 'var(--ar-font-body)', fontSize: 12, fontWeight: 600,
    letterSpacing: '0.18em', textTransform: 'uppercase', color, ...style,
  }}>
    <span style={{ width: 18, height: 1, background: 'currentColor', opacity: 0.5 }} />
    {children}
  </div>
);

const GradText = ({ children, style }) => (
  <span style={{
    background: 'linear-gradient(120deg, #3D8BFF 0%, #00D4FF 100%)',
    WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent', ...style,
  }}>{children}</span>
);

const Chip = ({ children, icon, style }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 7,
    padding: '7px 13px', borderRadius: 999,
    background: 'rgba(0,212,255,0.08)', border: '1px solid rgba(0,212,255,0.28)',
    fontFamily: 'var(--ar-font-body)', fontSize: 13, fontWeight: 500, color: 'var(--ar-cyan)',
    ...style,
  }}>
    {icon && <i data-lucide={icon} style={{ width: 14, height: 14 }}></i>}
    {children}
  </span>
);

const Button = ({ children, variant = 'primary', size = 'md', onClick, type, style }) => {
  const base = {
    fontFamily: 'var(--ar-font-body)', fontWeight: 600, border: 'none', cursor: 'pointer',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    position: 'relative', overflow: 'hidden', whiteSpace: 'nowrap',
    transition: 'transform 140ms var(--ar-ease), box-shadow 220ms, filter 220ms, background 220ms',
  };
  const sizes = {
    sm: { padding: '9px 16px', fontSize: 13, borderRadius: 12 },
    md: { padding: '13px 22px', fontSize: 15, borderRadius: 14 },
    lg: { padding: '16px 28px', fontSize: 16, borderRadius: 16 },
  };
  const variants = {
    primary: { background: 'linear-gradient(135deg, #005EFF 0%, #00D4FF 100%)', color: '#fff', boxShadow: '0 0 28px rgba(0,94,255,0.32)' },
    secondary: { background: 'rgba(255,255,255,0.02)', color: 'var(--ar-text-main)', border: '1px solid rgba(255,255,255,0.18)' },
    ghost: { background: 'transparent', color: 'var(--ar-cyan)', padding: '8px 4px' },
  };
  return (
    <button
      type={type} onClick={onClick}
      style={{ ...base, ...sizes[size], ...variants[variant], ...style }}
      onMouseEnter={e => {
        e.currentTarget.style.transform = 'translateY(-2px)';
        e.currentTarget.style.filter = 'brightness(1.06)';
        if (variant === 'primary') e.currentTarget.style.boxShadow = '0 0 40px rgba(0,94,255,0.5)';
        if (variant === 'secondary') { e.currentTarget.style.borderColor = 'rgba(0,94,255,0.45)'; e.currentTarget.style.background = 'rgba(0,94,255,0.08)'; }
      }}
      onMouseLeave={e => {
        e.currentTarget.style.transform = 'translateY(0)';
        e.currentTarget.style.filter = 'brightness(1)';
        if (variant === 'primary') e.currentTarget.style.boxShadow = '0 0 28px rgba(0,94,255,0.32)';
        if (variant === 'secondary') { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.18)'; e.currentTarget.style.background = 'rgba(255,255,255,0.02)'; }
      }}
    >{children}</button>
  );
};

const IconTile = ({ icon, size = 52, accent = 'cyan' }) => {
  const ref = React.useRef(null);
  React.useEffect(() => { if (window.lucide && ref.current) window.lucide.createIcons(); });
  const colors = {
    cyan: { bg: 'rgba(0,212,255,0.10)', bd: 'rgba(0,212,255,0.30)', stroke: '#00D4FF' },
    blue: { bg: 'rgba(0,94,255,0.14)', bd: 'rgba(0,94,255,0.45)', stroke: '#7CB0FF' },
  }[accent];
  return (
    <div ref={ref} style={{
      width: size, height: size, background: colors.bg, border: `1px solid ${colors.bd}`,
      borderRadius: 14, display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: colors.stroke, flexShrink: 0,
    }}>
      <i data-lucide={icon} style={{ width: size * 0.42, height: size * 0.42 }}></i>
    </div>
  );
};

/* Card with optional pointer-tracking glow + lift */
const Card = ({ children, style, premium = false, hoverable = true, glow = true, onClick }) => {
  const [hover, setHover] = React.useState(false);
  const ref = React.useRef(null);
  const onMove = (e) => {
    if (!glow || !ref.current) return;
    const r = ref.current.getBoundingClientRect();
    ref.current.style.setProperty('--mx', `${e.clientX - r.left}px`);
    ref.current.style.setProperty('--my', `${e.clientY - r.top}px`);
  };
  return (
    <div
      ref={ref}
      onClick={onClick}
      onMouseMove={onMove}
      onMouseEnter={() => hoverable && setHover(true)}
      onMouseLeave={() => hoverable && setHover(false)}
      style={{
        position: 'relative', overflow: 'hidden',
        background: premium
          ? 'linear-gradient(145deg, rgba(0,94,255,0.13), rgba(255,255,255,0.025))'
          : 'var(--ar-bg-card)',
        border: `1px solid ${hover ? 'rgba(0,94,255,0.45)' : 'rgba(255,255,255,0.10)'}`,
        borderRadius: 22, padding: 28,
        transition: 'border-color 220ms, transform 280ms var(--ar-ease), box-shadow 280ms',
        transform: hover ? 'translateY(-4px)' : 'none',
        boxShadow: hover
          ? '0 30px 70px -26px rgba(0,0,0,0.75), 0 0 0 1px rgba(0,94,255,0.22) inset'
          : '0 18px 48px -18px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04) inset',
        ...style,
      }}
    >
      {glow && (
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none', borderRadius: 'inherit',
          opacity: hover ? 1 : 0, transition: 'opacity 280ms',
          background: 'radial-gradient(360px circle at var(--mx,50%) var(--my,0%), rgba(0,212,255,0.12), transparent 60%)',
        }} />
      )}
      <div style={{ position: 'relative' }}>{children}</div>
    </div>
  );
};

/* Reveal — wraps children in a scroll-reveal node with optional stagger delay */
const Reveal = ({ children, delay = 0, style, as = 'div' }) => {
  const El = as;
  return <El className="reveal" style={{ transitionDelay: `${delay}ms`, ...style }}>{children}</El>;
};

/* Section header block */
const SectionHead = ({ eyebrow, title, sub, align = 'left', maxWidth = 720, style }) => (
  <div style={{ maxWidth, marginLeft: align === 'center' ? 'auto' : 0, marginRight: align === 'center' ? 'auto' : 0, textAlign: align, ...style }}>
    <Reveal><Eyebrow>{eyebrow}</Eyebrow></Reveal>
    <Reveal delay={60}>
      <h2 style={{
        fontFamily: 'var(--ar-font-title)', fontWeight: 700,
        fontSize: 'clamp(30px, 3.4vw, 44px)', lineHeight: 1.1,
        letterSpacing: '-0.015em', color: 'var(--ar-text-main)',
        margin: '14px 0 0', textWrap: 'balance',
      }}>{title}</h2>
    </Reveal>
    {sub && (
      <Reveal delay={120}>
        <p style={{
          fontFamily: 'var(--ar-font-body)', fontSize: 18, lineHeight: 1.58,
          color: 'var(--ar-text-muted)', margin: '16px 0 0',
          marginLeft: align === 'center' ? 'auto' : 0, marginRight: align === 'center' ? 'auto' : 0,
          maxWidth: 600, textWrap: 'pretty',
        }}>{sub}</p>
      </Reveal>
    )}
  </div>
);

Object.assign(window, { Container, Eyebrow, GradText, Chip, Button, IconTile, Card, Reveal, SectionHead });