/* A Gem of Joy ABA — UI Kit · shared primitives
   Exposes: Icon, Btn, Eyebrow, TrustStrip, SectionHeading, ServiceIcon, JoySpark
   Icons via Lucide (CDN) — closest rounded match to brand glyphs (see README §5). */

// Re-run Lucide's DOM replacement after React paints.
function useLucide(dep) {
  React.useEffect(() => {
    if (window.lucide && window.lucide.createIcons) {
      window.lucide.createIcons();
    }
  });
}

function Icon({ name, size = 22, color, strokeWidth = 2, style = {} }) {
  return (
    <i
      data-lucide={name}
      style={{
        display: 'inline-flex',
        width: size,
        height: size,
        color: color || 'currentColor',
        ['--lucide-stroke-width']: strokeWidth,
        ...style,
      }}
    ></i>
  );
}

function Btn({ children, variant = 'primary', size = 'md', icon, onClick, style = {} }) {
  const base = {
    fontFamily: 'var(--font-display)',
    fontWeight: 700,
    border: 'none',
    cursor: 'pointer',
    borderRadius: 'var(--r-pill)',
    display: 'inline-flex',
    alignItems: 'center',
    gap: 9,
    transition: 'all var(--dur) var(--ease-soft)',
    lineHeight: 1,
  };
  const sizes = {
    sm: { fontSize: 14, padding: '10px 18px' },
    md: { fontSize: 16, padding: '15px 28px' },
    lg: { fontSize: 18, padding: '18px 36px' },
  };
  const variants = {
    primary: { background: 'var(--coral)', color: '#fff', boxShadow: 'var(--sh-coral)' },
    secondary: { background: 'var(--navy)', color: '#fff' },
    ghost: { background: 'transparent', color: 'var(--navy)', boxShadow: 'inset 0 0 0 2px var(--navy)' },
    white: { background: '#fff', color: 'var(--coral-600)', boxShadow: 'var(--sh-md)' },
  };
  const [hov, setHov] = React.useState(false);
  const hover = hov ? { transform: 'translateY(-2px)', filter: 'brightness(0.97)' } : {};
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{ ...base, ...sizes[size], ...variants[variant], ...hover, ...style }}
    >
      {icon && <Icon name={icon} size={size === 'lg' ? 20 : 18} />}
      {children}
    </button>
  );
}

function Eyebrow({ children, color = 'var(--coral)', center }) {
  return (
    <div style={{
      fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13,
      letterSpacing: '0.06em', textTransform: 'uppercase', color,
      marginBottom: 12, textAlign: center ? 'center' : 'left',
    }}>{children}</div>
  );
}

function SectionHeading({ eyebrow, children, center, light, max = 760 }) {
  return (
    <div style={{ textAlign: center ? 'center' : 'left', maxWidth: max, margin: center ? '0 auto' : 0 }}>
      {eyebrow && <Eyebrow center={center}>{eyebrow}</Eyebrow>}
      <h2 style={{
        fontSize: 'clamp(1.7rem, 3vw, 2.4rem)', fontWeight: 700,
        color: light ? '#fff' : 'var(--navy)', margin: 0, lineHeight: 1.12, letterSpacing: '-0.02em',
      }}>{children}</h2>
    </div>
  );
}

// Trust badge strip (emoji used here only — per brand)
function TrustStrip({ dark }) {
  const items = [
    ['✅', 'Maryland Medicaid Accepted'],
    ['📍', 'Baltimore · Howard · Montgomery'],
    ['⭐', 'BHCOE Accredited'],
  ];
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, justifyContent: 'center' }}>
      {items.map(([e, t]) => (
        <span key={t} style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          background: dark ? 'rgba(255,255,255,0.16)' : '#fff',
          color: dark ? '#fff' : 'var(--navy)',
          fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14.5,
          padding: '9px 16px', borderRadius: 'var(--r-pill)',
          boxShadow: dark ? 'none' : 'var(--sh-sm)',
        }}>
          <span style={{ fontSize: 15 }}>{e}</span>{t}
        </span>
      ))}
    </div>
  );
}

// Rounded gradient icon tile (mimics brand's soft service glyphs)
function ServiceIcon({ name, tone = 'burst', size = 60 }) {
  const bg = tone === 'coral' ? 'var(--grad-coral)'
    : tone === 'sun' ? 'var(--sun)'
    : 'var(--grad-burst)';
  return (
    <div style={{
      width: size, height: size, borderRadius: 'var(--r-md)', background: bg,
      display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none',
      boxShadow: '0 8px 18px rgba(62,137,201,0.28)',
    }}>
      <Icon name={name} size={size * 0.48} color={tone === 'sun' ? 'var(--navy)' : '#fff'} strokeWidth={2.2} />
    </div>
  );
}

// Hand-drawn yellow spark accent (the "joy" mark beside portraits)
function JoySpark({ style = {}, size = 64 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none" style={style}>
      <path d="M14 12c2 10 7 18 16 22" stroke="var(--sun)" strokeWidth="7" strokeLinecap="round" />
      <path d="M30 34C24 27 19 24 11 23" stroke="var(--sun)" strokeWidth="7" strokeLinecap="round" />
      <ellipse cx="40" cy="14" rx="6" ry="9" transform="rotate(24 40 14)" fill="var(--sun)" />
    </svg>
  );
}

Object.assign(window, { useLucide, Icon, Btn, Eyebrow, SectionHeading, TrustStrip, ServiceIcon, JoySpark });