/* ui.jsx — shared TaxAim primitives (Button, Eyebrow, headings, icons, layout) */
const { useState, useEffect, useRef } = React;

/* Lucide icon — React owns a stable <span> wrapper; lucide only mutates its
   inner node. This survives re-renders/theme toggles (no orphaned nodes). */
function Icon({ name, size = 20, stroke = 2, className = '', style = {} }) {
  const ref = useRef(null);
  useEffect(() => {
    const host = ref.current;
    if (!host) return;
    host.innerHTML = '';
    const i = document.createElement('i');
    i.setAttribute('data-lucide', name);
    host.appendChild(i);
    if (window.lucide) window.lucide.createIcons();
    const svg = host.querySelector('svg');
    if (svg) {
      svg.setAttribute('width', size);
      svg.setAttribute('height', size);
      svg.setAttribute('stroke-width', stroke);
      svg.style.display = 'block';
    }
  }, [name, size, stroke]);
  return <span ref={ref} className={className} aria-hidden="true" style={{
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    width: size, height: size, flexShrink: 0, ...style,
  }} />;
}

/* Re-run lucide whenever children change */
function useLucide(dep) {
  useEffect(() => {
    if (window.lucide) window.lucide.createIcons({
      attrs: { 'stroke-width': 2 }
    });
  }, [dep]);
}

function Container({ children, style = {}, className = '' }) {
  return <div className={className} style={{ width: '100%', maxWidth: 1160, margin: '0 auto', padding: '0 32px', ...style }}>{children}</div>;
}

function Eyebrow({ children, onDark = false, style = {} }) {
  return <span style={{
    font: 'var(--t-label)', letterSpacing: '0.16em', textTransform: 'uppercase',
    color: onDark ? 'var(--teal-300)' : 'var(--teal-600)',
    display: 'inline-flex', alignItems: 'center', gap: 10, ...style
  }}>
    <span style={{ width: 22, height: 2, background: onDark ? 'var(--teal-400)' : 'var(--teal-500)', display: 'inline-block' }}></span>
    {children}
  </span>;
}

function Button({ children, variant = 'primary', onClick, href, icon, style = {} }) {
  const base = {
    font: '600 15px/1 var(--font-sans)', padding: '14px 24px', borderRadius: 10,
    border: '1.5px solid transparent', cursor: 'pointer', display: 'inline-flex',
    alignItems: 'center', gap: 9, textDecoration: 'none', transition: 'all .16s cubic-bezier(.2,.6,.2,1)',
    whiteSpace: 'nowrap',
  };
  const variants = {
    primary: { background: 'var(--teal-500)', color: '#fff' },
    secondaryDark: { background: 'transparent', color: '#fff', borderColor: 'var(--navy-300)' },
    secondary: { background: 'var(--bg-surface)', color: 'var(--fg-1)', borderColor: 'var(--line-strong)' },
  };
  const [hover, setHover] = useState(false);
  const hoverStyles = {
    primary: { background: 'var(--teal-700)' },
    secondaryDark: { background: 'rgba(255,255,255,.10)', borderColor: 'var(--navy-200)' },
    secondary: { background: 'var(--bg-page)', borderColor: 'var(--fg-1)' },
  };
  const Comp = href ? 'a' : 'button';
  return <Comp href={href} onClick={onClick}
    onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
    style={{ ...base, ...variants[variant], ...(hover ? hoverStyles[variant] : {}), ...style }}>
    {children}
    {icon && <Icon name={icon} size={17} />}
  </Comp>;
}

function SectionHeading({ children, onDark = false, style = {} }) {
  return <h2 style={{
    font: 'var(--t-h2)', letterSpacing: '-0.012em',
    color: onDark ? '#fff' : 'var(--fg-1)', margin: 0, textWrap: 'balance', ...style
  }}>{children}</h2>;
}

/* Topographic texture layer for navy grounds */
function TopoBg({ opacity = 0.16, color = 'var(--teal-300)', src = 'assets/topo-contours.svg' }) {
  return <div aria-hidden="true" style={{
    position: 'absolute', inset: 0, color, opacity, pointerEvents: 'none', overflow: 'hidden'
  }}>
    <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
  </div>;
}

/* Section wrapper with consistent vertical rhythm */
function Section({ id, children, dark = false, tint = false, style = {} }) {
  return <section id={id} style={{
    position: 'relative',
    padding: 'clamp(64px, 9vw, 120px) 0',
    background: dark ? 'var(--navy-800)' : tint ? 'var(--mist)' : 'var(--paper)',
    color: dark ? '#fff' : 'var(--fg-1)',
    overflow: 'hidden', ...style
  }}>{children}</section>;
}

Object.assign(window, { Icon, useLucide, Container, Eyebrow, Button, SectionHeading, TopoBg, Section });