/* ============================================================
   UI — helpers compartidos
   - Icon (Lucide)
   - Alias de los componentes del Design System a window
   - Reveal: animación de entrada al hacer scroll
   ============================================================ */

/* Componentes del Design System (bundle) */
const DS = window.YanTrottaDesignSystem_581c59 || {};
const { Avatar, Badge, Button, SectionLabel, ContactRow, ExperienceItem, ProjectCard } = DS;

/* ---- Icon (Lucide) ---- */
function Icon({ name, size = 18, stroke = 2, style = {} }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current && window.lucide) {
      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', ...style }} aria-hidden="true" />;
}

/* ---- Reveal on scroll ---- */
function Reveal({ children, delay = 0, y = 16, style = {}, as = 'div' }) {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) { setShown(true); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } });
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const El = as;
  return (
    <El ref={ref} style={{
      opacity: shown ? 1 : 0,
      transform: shown ? 'none' : `translateY(${y}px)`,
      transition: `opacity 620ms var(--ease-out) ${delay}ms, transform 620ms var(--ease-out) ${delay}ms`,
      ...style,
    }}>{children}</El>
  );
}

/* ---- Eyebrow + título de sección reutilizable ---- */
function SectionHead({ eyebrow, title, kicker, light, align = 'left', style = {} }) {
  const heading = light ? 'var(--white)' : 'var(--color-heading)';
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14, textAlign: align, alignItems: align === 'center' ? 'center' : 'flex-start', ...style }}>
      {eyebrow ? <SectionLabel variant="eyebrow">{eyebrow}</SectionLabel> : null}
      <h2 style={{ margin: 0, fontWeight: 'var(--weight-bold)', fontSize: 'clamp(28px, 4vw, var(--text-3xl))', letterSpacing: 'var(--tracking-tight)', lineHeight: 1.05, color: heading, textWrap: 'balance' }}>{title}</h2>
      {kicker ? <p style={{ margin: 0, maxWidth: 460, fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-normal)', color: light ? 'var(--navy-100)' : 'var(--color-text-muted)' }}>{kicker}</p> : null}
    </div>
  );
}

Object.assign(window, { Icon, Reveal, SectionHead, Avatar, Badge, Button, SectionLabel, ContactRow, ExperienceItem, ProjectCard });