/* global React */
const { useEffect, useRef, useState } = React;

// Reveal wrapper — uses IntersectionObserver via data-reveal attribute (handled in effects.js)
function Reveal({ children, delay = 0, as: As = 'div', className = '', style = {}, ...rest }) {
  return (
    <As
      data-reveal
      className={className}
      style={{ ...style, '--delay': `${delay}ms` }}
      {...rest}
    >
      {children}
    </As>
  );
}

// Arrow icon
function Arrow({ size = 14 }) {
  return (
    <svg className="arrow" width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M3 8h10M9 4l4 4-4 4" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

// Eyebrow label
function Eyebrow({ children, style }) {
  return <div className="eyebrow" style={style}>{children}</div>;
}

// Primary button
function Button({ children, href, onClick, variant = 'primary', download, target, ...rest }) {
  const Tag = href ? 'a' : 'button';
  const cls = `btn btn-${variant}`;
  return (
    <Tag href={href} onClick={onClick} className={cls} download={download} target={target} rel={target === '_blank' ? 'noopener noreferrer' : undefined} data-magnetic {...rest}>
      {children}
    </Tag>
  );
}

Object.assign(window, { Reveal, Arrow, Eyebrow, Button });