/* Nina website — shared primitives. Exports to window. */
const { useState, useEffect, useRef, useLayoutEffect } = React;

/* Re-render Lucide icons whenever the tree changes */
function useLucide(dep) {
  useLayoutEffect(() => { if (window.lucide) window.lucide.createIcons(); });
}

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

function Logo({ height = 32, variant = 'lockup', onClick }) {
  const A = (typeof window !== 'undefined' && window.__NINA_ASSETS) || {};
  const src = variant === 'mark' ? 'assets/nina-mark.png'
    : variant === 'color' ? 'assets/nina-lockup-color.png'
    : variant === 'white' ? 'assets/nina-lockup-white.png'
    : (A.lockup || 'assets/nina-logo-lockup.png');
  return <img src={src} alt={window.NN()} style={{ height, display: 'block', cursor: onClick ? 'pointer' : 'default' }} onClick={onClick} />;
}

function Button({ children, variant = 'primary', size = 'md', icon, iconRight, onClick, full, style }) {
  const [hover, setHover] = useState(false);
  const [press, setPress] = useState(false);
  const pad = size === 'lg' ? '14px 26px' : size === 'sm' ? '8px 14px' : '11px 20px';
  const fs = size === 'lg' ? 17 : size === 'sm' ? 14 : 15;
  const base = {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: fs, lineHeight: 1.1,
    borderRadius: 'var(--radius-btn)', padding: pad, cursor: 'pointer',
    border: '1.5px solid transparent', width: full ? '100%' : 'auto',
    transition: 'background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out)', transform: press ? 'scale(0.98)' : 'scale(1)',
    whiteSpace: 'nowrap', ...style,
  };
  const variants = {
    primary: { background: hover ? '#c8401f' : 'var(--coral-strong)', color: '#fff', boxShadow: hover ? '0 6px 16px rgba(225,78,46,.28)' : 'var(--shadow-sm)' },
    secondary: { background: hover ? 'var(--coral-tint)' : 'transparent', color: 'var(--coral-strong)', borderColor: '#FFD2C4' },
    ghost: { background: hover ? 'var(--surface-warm)' : 'transparent', color: 'var(--ink)' },
    whatsapp: { background: hover ? '#1da851' : '#25D366', color: '#fff', boxShadow: hover ? '0 6px 16px rgba(37,211,102,.28)' : 'var(--shadow-sm)' },
    mint: { background: hover ? '#047857' : 'var(--mint-strong)', color: '#fff', boxShadow: hover ? '0 6px 16px rgba(5,150,105,.26)' : 'var(--shadow-sm)' },
  };
  return (
    <button style={{ ...base, ...variants[variant] }}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => { setHover(false); setPress(false); }}
      onMouseDown={() => setPress(true)} onMouseUp={() => setPress(false)} onClick={onClick}>
      {icon && <Icon name={icon} size={fs + 3} />}
      {children}
      {iconRight && <Icon name={iconRight} size={fs + 3} />}
    </button>
  );
}

function Pill({ children, tone = 'amber', dot }) {
  const tones = {
    amber: ['#FEF3C7', '#B45309', '#FBBF24'],
    mint: ['#D1FAE5', '#059669', '#34D399'],
    expense: ['#FEE2E2', '#EF4444', '#EF4444'],
    coral: ['#FFE4DB', '#E14E2E', '#FF7A59'],
    info: ['#E0F2FE', '#0369A1', '#0EA5E9'],
  }[tone];
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12.5, fontWeight: 600, padding: '5px 12px', borderRadius: 999, background: tones[0], color: tones[1] }}>
      {dot && <span style={{ width: 7, height: 7, borderRadius: '50%', background: tones[2] }}></span>}
      {children}
    </span>
  );
}

function Section({ children, warm, style, id }) {
  return <section id={id} style={{ padding: '80px 24px', background: warm ? 'var(--surface-warm)' : 'transparent', ...style }}>
    <div style={{ maxWidth: 1100, margin: '0 auto' }}>{children}</div>
  </section>;
}

const NINA_MARK = ((typeof window !== 'undefined' && window.__NINA_ASSETS && window.__NINA_ASSETS.mark) || 'assets/nina-mark.png');

function NinaAvatar({ size = 36, idle = true, variant = 'mono' }) {
  if (variant === 'mark') {
    return <img src={NINA_MARK} alt={window.NN()} className={idle ? 'nina-breathe' : undefined}
      style={{ width: size, height: size, borderRadius: '50%', display: 'block', flex: 'none', objectFit: 'cover', objectPosition: '50% 38%', background: 'var(--surface-warm)' }} />;
  }
  return <div className={idle ? 'nina-breathe' : undefined} style={{ width: size, height: size, borderRadius: '50%', background: 'var(--coral)', color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 600, display: 'grid', placeItems: 'center', fontSize: size * 0.5, flex: 'none' }}>N</div>;
}

function NinaLoader({ size = 72, label }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
      <div style={{ position: 'relative', width: size, height: size }}>
        <svg viewBox="0 0 100 100" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', animation: 'nina-spin 1.6s linear infinite' }} aria-hidden="true">
          <circle cx="50" cy="50" r="46" fill="none" stroke="var(--coral)" strokeWidth="3" strokeLinecap="round" strokeDasharray="80 220" />
        </svg>
        <img src={NINA_MARK} alt="" className="nina-breathe" style={{ position: 'absolute', inset: 6, width: 'calc(100% - 12px)', height: 'calc(100% - 12px)', borderRadius: '50%', objectFit: 'cover', objectPosition: '50% 38%', background: 'var(--surface-warm)' }} />
      </div>
      {label && <p style={{ margin: 0, fontSize: 13, color: 'var(--muted)' }}>{label}</p>}
    </div>
  );
}

/* IntersectionObserver hook: marca elementos com .nina-reveal
   e adiciona .in quando entram na viewport (1×). */
function useRevealOnScroll() {
  useEffect(() => {
    if (typeof window === 'undefined' || !('IntersectionObserver' in window)) return;
    const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduced) { document.querySelectorAll('.nina-reveal').forEach(el => el.classList.add('in')); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    document.querySelectorAll('.nina-reveal:not(.in)').forEach(el => io.observe(el));
    return () => io.disconnect();
  });
}

Object.assign(window, { useLucide, Icon, Logo, Button, Pill, Section, NinaAvatar, NinaLoader, useRevealOnScroll });