// Shared UI atoms: Button, Reveal-on-scroll, Eyebrow, Divider

function useReveal() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          el.classList.add('in');
          io.unobserve(el);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

function Reveal({ children, delay = 0, as: Tag = 'div', style, ...rest }){
  const ref = useReveal();
  return (
    <Tag ref={ref} className={'reveal ' + (rest.className||'')} style={{ transitionDelay: `${delay}ms`, ...style }} {...rest}>
      {children}
    </Tag>
  );
}

function Button({ children, href = '#unirme', variant = 'primary', size = 'md', ...rest }){
  const sizes = {
    sm: { padding: '10px 18px', fontSize: 12 },
    md: { padding: '16px 28px', fontSize: 13 },
    lg: { padding: '20px 36px', fontSize: 14 },
  }[size];
  const base = {
    display: 'inline-flex', alignItems: 'center', gap: 10,
    textDecoration: 'none',
    fontFamily: 'Montserrat, sans-serif',
    fontWeight: 600,
    letterSpacing: '0.18em',
    textTransform: 'uppercase',
    borderRadius: 999,
    border: '1px solid transparent',
    transition: 'all .25s ease',
    cursor: 'pointer',
    ...sizes,
  };
  const styles = {
    primary: {
      background: 'var(--accent)',
      color: '#fff',
      boxShadow: '0 1px 0 rgba(0,0,0,0.04), 0 18px 40px -20px rgba(122,68,52,0.55)',
    },
    ghost: {
      background: 'transparent',
      color: 'var(--accent)',
      border: '1px solid var(--accent)',
    },
    soft: {
      background: 'var(--off-white)',
      color: 'var(--ink)',
      border: '1px solid var(--line)',
    }
  }[variant];
  const [hover, setHover] = React.useState(false);
  const hoverStyle = hover ? {
    primary: { transform: 'translateY(-2px)', boxShadow: '0 1px 0 rgba(0,0,0,0.04), 0 24px 48px -20px rgba(122,68,52,0.7)' },
    ghost: { background: 'var(--accent)', color: '#fff' },
    soft:  { background: '#fff' },
  }[variant] : {};
  return (
    <a href={href}
       onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
       style={{ ...base, ...styles, ...hoverStyle }} {...rest}>
      {children}
      <span style={{ display:'inline-block', transform: hover ? 'translateX(4px)' : 'none', transition:'transform .25s ease' }}>→</span>
    </a>
  );
}

function Eyebrow({ children, color = 'var(--muted)' }){
  return (
    <div className="uppercase-track" style={{
      fontSize: 11, color, fontWeight: 500, letterSpacing: '0.32em',
      display:'inline-flex', alignItems:'center', gap: 12
    }}>
      <span style={{ display:'inline-block', width: 28, height: 1, background: 'currentColor', opacity: 0.5 }}/>
      {children}
    </div>
  );
}

function Divider({ style }){
  return (
    <div style={{ display:'flex', alignItems:'center', justifyContent:'center', gap: 14, ...style }}>
      <span style={{ flex: 1, height: 1, background: 'var(--line)' }}/>
      <svg width="40" height="12" viewBox="0 0 40 12" fill="none">
        <path d="M 0 6 Q 10 0 20 6 T 40 6" stroke="var(--terracotta)" strokeWidth="1" opacity="0.7" fill="none"/>
      </svg>
      <span style={{ flex: 1, height: 1, background: 'var(--line)' }}/>
    </div>
  );
}

// tiny lotus glyph for bullet lists
function LotusBullet({ size = 14, color = 'var(--terracotta)' }){
  return (
    <svg width={size} height={size} viewBox="-12 -12 24 24" style={{ flex:'none', marginTop: 6 }}>
      <g fill="none" stroke={color} strokeWidth="1.1" strokeLinecap="round">
        <path d="M 0 6 C -5 1, -5 -6, 0 -10 C 5 -6, 5 1, 0 6 Z"/>
        <path d="M -8 5 C -11 2, -12 -3, -9 -8"/>
        <path d="M 8 5 C 11 2, 12 -3, 9 -8"/>
      </g>
    </svg>
  );
}

window.Reveal = Reveal;
window.Button = Button;
window.Eyebrow = Eyebrow;
window.Divider = Divider;
window.LotusBullet = LotusBullet;