/* global React */
const { useEffect, useRef } = React;

// ── Lucide icon wrapper ─────────────────────────────────────────
// Renders an <i data-lucide> and asks Lucide to hydrate it.
function Icon({ name, size = 20, color, stroke = 1.9, style }) {
  const ref = useRef(null);
  useEffect(() => {
    if (window.lucide && ref.current) {
      ref.current.innerHTML = '';
      const el = document.createElement('i');
      el.setAttribute('data-lucide', name);
      ref.current.appendChild(el);
      window.lucide.createIcons({
        attrs: { width: size, height: size, 'stroke-width': stroke },
        nameAttr: 'data-lucide',
      });
    }
  }, [name, size, stroke]);
  return <span ref={ref} style={{ display: 'inline-flex', color: color || 'currentColor', lineHeight: 0, ...style }} />;
}

// ── Eyebrow label (Rajdhani, tracked, uppercase) ────────────────
function Eyebrow({ children, color = 'var(--neon-cyan)', style }) {
  return (
    <div style={{
      fontFamily: 'var(--font-head)', fontSize: 14, fontWeight: 600,
      letterSpacing: '.22em', textTransform: 'uppercase', color, ...style,
    }}>{children}</div>
  );
}

// ── Button ──────────────────────────────────────────────────────
const cdtBtnBase = {
  fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 15.5,
  letterSpacing: '.04em', textTransform: 'uppercase',
  borderRadius: 'var(--r-sm)', border: '1px solid transparent',
  cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 9,
  transition: 'all 160ms ease', textDecoration: 'none',
};
const cdtBtnSizes = {
  md: { padding: '13px 24px' },
  lg: { padding: '17px 34px', fontSize: 17 },
  sm: { padding: '10px 18px', fontSize: 13.5 },
};
function Button({ children, variant = 'primary', size = 'md', icon, onClick, href, style }) {
  const variants = {
    primary: { background: 'var(--neon-magenta)', color: '#fff', boxShadow: 'var(--glow-magenta-sm)' },
    secondary: { background: 'transparent', color: 'var(--neon-cyan)', borderColor: 'rgba(0,229,255,.45)' },
    ghost: { background: 'var(--surface-3)', color: 'var(--fg-1)' },
  };
  const [hover, setHover] = React.useState(false);
  const hoverStyles = {
    primary: { background: 'var(--magenta-bright)', boxShadow: 'var(--glow-magenta)' },
    secondary: { borderColor: 'var(--neon-cyan)', boxShadow: 'var(--glow-cyan-sm)' },
    ghost: { background: 'var(--surface-4)' },
  };
  const Tag = href ? 'a' : 'button';
  return (
    <Tag
      href={href} onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ ...cdtBtnBase, ...cdtBtnSizes[size], ...variants[variant], ...(hover ? hoverStyles[variant] : {}),
        transform: hover ? 'translateY(-1px)' : 'none', ...style }}
    >
      {children}
      {icon && <Icon name={icon} size={size === 'lg' ? 19 : 17} stroke={2.2} />}
    </Tag>
  );
}

// ── Technical grid background (the brand motif) ─────────────────
function GridBG({ cyan = '78% 30%', magenta = '18% 70%', cell = 38, opacity = 0.05, style }) {
  return (
    <div aria-hidden style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      backgroundImage: `
        linear-gradient(rgba(0,229,255,${opacity}) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,229,255,${opacity}) 1px, transparent 1px)`,
      backgroundSize: `${cell}px ${cell}px, ${cell}px ${cell}px`,
      maskImage: 'radial-gradient(circle at 50% 40%, #000 30%, transparent 80%)',
      WebkitMaskImage: 'radial-gradient(circle at 50% 40%, #000 30%, transparent 80%)',
      ...style,
    }} />
  );
}

// ── Section shell (consistent vertical rhythm + max width) ──────
function SectionShell({ id, children, style, bg }) {
  return (
    <section id={id} style={{ position: 'relative', background: bg || 'transparent',
      padding: 'clamp(64px, 9vw, 120px) 24px', overflow: 'hidden', ...style }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', position: 'relative', zIndex: 1 }}>
        {children}
      </div>
    </section>
  );
}

Object.assign(window, { Icon, Eyebrow, Button, GridBG, SectionShell });